Create a stacked header solution

[ryankeairns]

For the sake of tracking all the related work going into the global header concept, I'm creating this issue to track the EUI portion of the new stacked header design. Likewise, I will create a separate issue to track the navigational search pattern/component within this new header → #3490

Specifically, augmenting EuiHeader to display the black bar in this design:

Figma file

https://www.figma.com/file/AngVp8Bexq2UjN7G44IsuZ/Holistic-Experience?node-id=1143%3A5

The top header will be black for both light and dark themes. Content from the existing/original header will migrate to this new top header.

Phased approach

Phase 1

The top header is entirely new, pulls up some content from the current header, and adds new content:

• Logo/home button
• Navigational search (Tracked separately Create navigational/header search solution #3490)
• What's new (newsfeed flyout)
• Support menu
• User profile menu (there is a new design for this that is not yet finalized, but is basically a popover with a list)

The subheader will remain white (in light themes) and will contain the following content:

• Menu button
• Spaces button
• Breadcrumbs (new visual design w/Amsterdam; root will go back to deployment once available)
• (at right) Application-specific menu items*

* I realize these are determined by the implementor, but seems worth noting in the event EUI would like to update the docs examples to match the proposed design above (i.e. add a sample app menu).

Phase 2

As of now, no EUI impact is anticipated. The changes have to do with expanding the scope of the search results and adding the deployment to the breadcrumbs. That said, the enhanced visual design does come from #2639 :)

Phase 3

• Deployment switcher menu (Tracked separately [WIP] Global header: deployment switcher #3504)
• Trial badge* (maybe Phase 2? TBD)

* The trial badge uses the same location as the switcher since a trial cannot have multiple deployments

[cchaos]

Thanks @ryankeairns, can you list all the component that will be needed inside of this reverse theme header? There will likely need to be custom versions of each to support this reverse theme. Namely I see, some sort of badge and a search input.

[ryankeairns]

@cchaos Sure, I'll keep fleshing this out. I have a bigger meta issue that tracks all of this work at a top level and am filling in the table with these issues. elastic/kibana#62010

I've already created a separate issue for search #3490, should I do the the same for the switcher? or would you prefer they all live under this single issue?

[cchaos]

I think I just need to know what it is. Is it a button or a badge, something new?

[ryankeairns]

@johnbarrierwilson Is the design in the description above the latest or has the switcher moved to the right? Also, what is the status of that badge... is that pretty final or just an idea? Also, it conflicts with the switcher potentially :)

[ryankeairns]

I should clarify - as you'll see in elastic/kibana#62010 - the deployment switcher UI part is not until Phase 3 as there is a significant amount of work to be done on the Cloud side to create the supporting API, so that UI could come later.

Also, while the banner subject has been broached, it has not yet been settled. In other words, the design there definitely feels less settled at this stage.

[johnbarrierwilson]

I think I just need to know what it is. Is it a button or a badge, something new?

I was using the badge EUI component. B/c it's primary purpose is to notify the user of what deployment they are in—which is why I defaulted to a badge that's clickable instead of a button that notifies.

cc @cchaos

[johnbarrierwilson]

Is the design in the description above the latest or has the switcher moved to the right?

The switcher has moved to the right to be closer to other actions, and more importantly to allow for the branding to be more noticeable and mature enough to stand on it's own.

what is the status of that badge... is that pretty final or just an idea? Also, it conflicts with the switcher potentially :)

Users can't have more than one deployment on a trial. So, now that switcher is to the right, it allows for it to be replaced by the trial notice.

"What about navigating back to the cloud interface?" When a user clicks on the elastic cluster logo, it should still navigate them back to the cloud interface.

cc @ryankeairns

[cchaos]

Closed via #4008 🎉