UI: Improve global search UX

[backspace]

This has a few improvements to the search:

• new shortcut hint adapted from learn.hashicorp.com
• fuzzy search with highlighting
  • this involves stuffing the Fuse “matches” into an Ember Data model which I don’t love but means the search results are always a collection of models vs a mix of models and Fuse wrappers
• a debounce in the call to open the search to address the “focus blackhole”
• adds a wrapper around the search so it can be centred instead of equally spaced
• a fork of Ember Power Select to let me catch presses of escape to deactivate the search
  • using a fork is subpar, I know… I couldn’t figure out another way with the public API that exists 😞

[github-actions]

Ember Asset Size action

As of fd39ead

Files that got Bigger 🚨:

File	raw	gzip
nomad-ui.js	+5.07 kB	+541 B
vendor.js	+8 B	+47 B
nomad-ui.css	+977 B	+120 B

Files that stayed the same size 🤷‍:

File	raw	gzip
auto-import-fastboot.js	0 B	0 B
vendor.css	0 B	0 B

[github-actions]

Ember Test Audit comparison

	master	fd39ead	change
passes	1425	1429	+4
failures	0	0	0
flaky	0	0	0
duration	5m 21s 141ms	5m 09s 604ms	-11s 537ms

[DingoEatingFuzz]

This is a nice collection of improvements.

The fork is of course unfortunate. Hopefully that can be handled upstream at some point.

The result highlighting is also a little funky. It doesn't always highlight the text I would expect. But short of doing what github's file fuzzy search does (break the search term into chunks and highlight multiple substrings) I think this is the best we can get.

⚠️ subjective aesthetic nitpicking follows ⚠️

The border around the search input in the dormant state is better now, but I think it might still be too much. The contrast draws a lot of attention to it when I think it would be okay for it to fall into the background a bit more. The original design for this had it borderless when idle.

As for the shortcut icon, I think it may be suffering the same border problem where it's drawing a lot of focus by the sharp lines. Maybe a dark green "/" on a light green, rounded background?

These are just things to think about between now and RC, definitely not blocking this on that 🙂

[DingoEatingFuzz]

Mock up of how I was thinking the shortcut indicator could look:

[backspace]

Thanks for the styling suggestions, I meant to refer back to the original design but failed to in the press for time. I think it looks much better now!

Re fuzzy search highlighting expectations, it should be possible to have multiple highlights instead of only using the first. Can you give an example of not highlighting what you would expect? I think this would be a minimal intervention before the RC 🤞

[DingoEatingFuzz]

Here's one:

I think this happens whenever you start typing the second word but the first letter is in the prefix.

I think the way github's match highlighter would would this is smtp-sensor-1

[backspace]

excellent, thanks, I can definitely refine the match component 😀

[github-actions]

I'm going to lock this pull request because it has been closed for 120 days ⏳. This helps our maintainers find and focus on the active contributions.
If you have found a problem that seems related to this change, please open a new issue and complete the issue template so we can capture all the details necessary to investigate further.