Stacked headers and navigational search

[myasonik]

Summary

This PR introduces two major features

1. Stacked (global) header

• The stacked header design will be consistent across Elastic properties (i.e. Kibana, Cloud, and Dream Machine)
• The new global header will include both navigational search (see next section) and app-specific controls/menus [1]

2. Navigational search

• This is an MVP that returns apps and saved objects, today, with more content coming in the future [2]
• Control (or Command on Mac) + / is the keyboard shortcut to activate the search input
• Apps are listed first and assigned a higher score. This may change over time but navigation remains our primary use case
• Future enhancements are being planned and tracked here

Closes #58049, closes #62010, closes #64541, closes #66464, and closes #68524.

Footnotes

[1] Note to app teams regarding menu relocation: there is a new header API that allows you to push app menus to the header via the shred TopNavMenu component. Several apps have already been converted; others are being evaluated as part of this PR

• dashboard abbc1b3
• lens 4e9ce62
• visualize 02fde93
• maps f48d2bf dede90e
• discover 2ecd226
• graph dda9841

[2] The list of currently included objects can be found here. This link also describes how content gets included and what teams can do to add additional saved objects.

---

Preview

In a future PR

Lots of stuff! If you have a feature request, please check our existing backlog first!
Navigational Search Project Backlog

---

Checklist

Delete any items that are not applicable to this PR.

• Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
• Unit or functional tests were updated or added to match the most common scenarios
• This was checked for keyboard-only and screenreader accessibility
• This renders correctly on smaller devices using a responsive layout. (You can test this in your browser
• This was checked for cross-browser compatibility

For maintainers

• This was checked for breaking API changes and was labeled appropriately

[ryankeairns]

Quick piece of feedback: Firefrox (mac) already uses Cmd + K to focus the address bar. We'll likely need to come up with something other 🤔

[myasonik]

We can... But likely anything we come up with will clash with something. That's largely why I've brought up the keyboard registry — to let people customize it to suit their tools.

As another data point, Slack (for web) uses cmd+k so there's at least precedent 🤷‍♂️ Though you can turn it off in Slack at a user level...

[cchaos]

❤️ Loving all the old hack removals :) 👍 LGTM with just some added suggestions

[timroes]

@myasonik @ryankeairns I wanted to bring up the topic of international keyboard layouts here and would like to hear the thoughts we had around them during planning the shortcut? While the shortcut might be very easy to hit on a US layout (Ctrl + /) a lot of non US keyboard layouts might have the slash assigned to at least an Shift variation if not even a alt gr variation.

So e.g. to trigger this on a German keyboard you'll need to hit Ctrl + Shift + 7 and similar on other keyboard layouts.

Using a letter (like k or p) would have had the advantage of being always without any modifier key on (at least) any latin based keyboards. Also not sure if the situation for letters could have been improved using key codes instead of the key sign (for special chars I think it's not possible, because those keys might not even exist in specific hardware layouts).

In general I'd like if you could elaborate a bit on the discussions and thoughts about that here for posterity.

[ryankeairns]

@myasonik @ryankeairns I wanted to bring up the topic of international keyboard layouts here and would like to hear the thoughts we had around them during planning the shortcut? While the shortcut might be very easy to hit on a US layout (Ctrl + /) a lot of non US keyboard layouts might have the slash assigned to at least an Shift variation if not even a alt gr variation.

So e.g. to trigger this on a German keyboard you'll need to hit Ctrl + Shift + 7 and similar on other keyboard layouts.

Using a letter (like k or p) would have had the advantage of being always without any modifier key on (at least) any latin based keyboards. Also not sure if the situation for letters could have been improved using key codes instead of the key sign (for special chars I think it's not possible, because those keys might not even exist in specific hardware layouts).

In general I'd like if you could elaborate a bit on the discussions and thoughts about that here for posterity.

The keyboard shortcut has changed more than once since we've started working on this feature. It has been challenging to find a solution that does not conflict with one of the major browsers or screen readers. Given the wide range of possible conflicts - which very per user - our belief is that the shortcut should be customizable.

Our thought process was to a) avoid single key shortcuts since those can conflict with screenreader software's way of navigating via keyboard b) avoid overriding existing browser shortcuts (which vary by browser) c) avoid global shortcuts (e.g. Cut/Copy/Paste/Save, etc.) and d) look for a common, existing pattern.

This leaves us with few alternatives for single-modifier combinations. github.com uses a / to activate its search feature while Slack uses it to toggle display of keyboard shortcuts... so this at least has some potential for familiarity. It may not be the same use, per se, but / is a common and findable key.

In addition to the advanced setting, we also have on our roadmap the creation of a global keyboard shortcut registry to avoid conflict within our own applications as shortcut usage continues to grow.

[spong]

Security code changes LGTM! 👍

[kibanamachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request
• Commit: 880a540

Build metrics

@kbn/optimizer bundle module count

id	value	diff	baseline
core	558	-1	559
globalSearchBar	13	+13	-
kibanaReact	296	+1	295
painlessLab	43	-1	44
total		+12

async chunks size

id	value	diff	baseline
advancedSettings	63.8KB	-2.2KB	65.9KB
canvas	1.4MB	-467.0B	1.4MB
discover	431.2KB	+106.0B	431.1KB
graph	1.4MB	+87.0B	1.4MB
ingestManager	1.1MB	-2.4KB	1.1MB
lens	26.0KB	+130.0B	25.9KB
maps	3.3MB	+331.0B	3.3MB
painlessLab	182.0KB	-2.4KB	184.4KB
timelion	598.3KB	-140.0B	598.5KB
visualize	697.8KB	+129.0B	697.7KB
total		-6.8KB

page load bundle size

id	value	diff	baseline
apm	41.7KB	+43.0B	41.7KB
canvas	1.3MB	+45.0B	1.3MB
console	30.3KB	-124.0B	30.4KB
core	1.2MB	-7.0KB	1.2MB
dashboard	711.9KB	+375.0B	711.5KB
devTools	166.1KB	-128.0B	166.2KB
discover	229.9KB	+591.0B	229.3KB
enterpriseSearch	22.5KB	+87.0B	22.4KB
globalSearchBar	28.8KB	+28.8KB	-
graph	15.8KB	+2.0B	15.8KB
infra	277.4KB	+17.0B	277.3KB
ingestManager	468.4KB	-4.0B	468.4KB
kibanaLegacy	232.6KB	+47.0B	232.5KB
kibanaReact	648.7KB	+480.0B	648.2KB
management	30.1KB	-2.0B	30.1KB
maps	297.9KB	+146.0B	297.8KB
ml	845.3KB	+47.0B	845.3KB
navigation	164.7KB	-860.0B	165.5KB
observability	51.8KB	+32.0B	51.7KB
painlessLab	161.0KB	+4.0B	161.0KB
searchprofiler	50.8KB	-136.0B	50.9KB
securitySolution	793.0KB	+46.0B	793.0KB
timelion	14.4KB	-1.0B	14.4KB
uptime	25.1KB	+8.0B	25.1KB
visualize	41.2KB	+94.0B	41.1KB
total		+22.7KB

distributable file count

id	value	diff	baseline
default	45543	+4	45539

History

• 💚 Build #74200 succeeded ea4825b
• 💔 Build #74181 failed 8eee3ce
• 💚 Build #73867 succeeded e882849
• 💔 Build #73799 failed 302eb79
• 💚 Build #73733 succeeded 5bd40cf

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream