Connect: Show resource search errors in the search bar

[ravicious]

This PR adds the foundation for error handling in the search bar. At the moment, it adds an extra item at the top of the search bar if a request for any resource fails.

This is suboptimal because it doesn't account for a bunch of different edge cases, for example requests to clusters with expired certs. This will be done in another PR since this one is quite large already.

Only 4 of the last 5 commits actually implement this. The rest are cleanup/refactoring commits which either make this feature possible or just clean up the code.

Screenshots

The most important pieces

At the heart of this PR is the change to ResourcesService.prototype.searchResources in the commit "Refactor resource search to use Promise.allSettled". We used to simply return an array with all search result promises wrapped in Promise.all. This wasn't that great because if any of the requests failed, you wouldn't see the results at all.

To work around this, we use Promise.allSettled and then return a flattened array of results across different clusters. Another important piece is the custom ResourceSearchError. If a resource search request fails, this is the error that is returned. It contains extra fields, one which points at the relevant cluster and one which describes what kind of resource we were trying to fetch.

Thanks to this, later in the UI we can extract those errors and tell the user what exactly went wrong.

Again, this is a very basic implementation which doesn't account for a plethora of edge cases, we'll deal with that in a separate PR.

Keeping the search bar open when inspecting errors

One issue I ran into is that we want the user to be able to inspect the details behind the errors in a modal. However, the search bar was written in a way where any click outside of the search bar is going to close it.

To fix this, I added a lockOpen function to the search context which takes a promise and prevents the modal from being closed for the duration of the promise.

[gzdunek]

The code looks really good, I will test it tomorrow.

[avatus]

this is really cool. its so concise, but also so informative. I REALLY like this, incredible job.

To fix this, I added a lockOpen function to the search context which takes a promise and prevents the modal from being closed for the duration of the promise.

Interesting solution, i dig it

[ravicious]

Thanks Michael!

To fix this, I added a lockOpen function to the search context which takes a promise and prevents the modal from being closed for the duration of the promise.

Interesting solution, i dig it

The inspiration for this comes from Ruby's File.open which takes an anonymous function and automatically closes the file descriptor after the function returns. There's a lot of methods like that in Ruby and Rails. Another one is ActiveRecord::Base.transaction which wraps any SQL calls within the function in a transaction. Though Ruby is much more OOP oriented than say JS, they had support for anonymous functions since forever but they call them "blocks".