New nav

[myasonik]

Fixes #56232
Also fixes: #59039 by chance

Summary

New collapsible nav! (There's an advanced setting to bring the old nav.)

See our plan for test coverage: #65369

Initial build checklist

• Display Kibana, Observability, Security, Management accordion sections
• Observability section should be: Logs, Metrics, APM, Uptime
• Change order of Visualize apps - Dashboard first; Visualize last resolves [Discuss] Move dashboard app as the first application in Kibana section  #63429
• Store state of docked navigation
• Add accordion section for Recently viewed (temp until global search is added)
• Fix existing tests
• Write new tests See our plan for test coverage: Add unit tests for new nav #65369

---

Feedback to fix

• Change 'Visualization Library' to 'Visualize' (see this comment)
• Move Recently viewed above Kibana to keep with old nav placement (ultimately this will move to Global Search)
• When docked, hide menu button in header (see showButtonIfDocked prop)
• Bottom bar width calculation (see first screenshot here)
• When not docked, hide menu after any nav click (see first bullet here)
• Make sure all apps use full screen height now that there is not an always visible nav (see example here) Layout breaks have been observed in:
  • Visualize
  • Lens
  • Graph
• Correct header height variable; extra height results in extra top menu padding (see second bullet in this comment) and can force a vertical scroll (see Maps example in fifth screenshot here) [Note: The real fix is in EUI but putting an override into Kibana for the time being to not rush an EUI update right before feature freeze]
• Always hide menu after a nav link click (see first bullet in this comment)
• Force nav and its overlay mask to be above other flyouts (see screenshots 3 and 6 in this comment)
• Adjust popover direction for Dashboard items (see bullet items 3 and 4 in this comment)
• Fix full screen display of Dashboard (see bullet 1 in this comment)
• Fix full screen display of an individual Dashboard panel (see bullet 1 in this comment)
• If related to nav change, fix Space selection layout (see this comment) Layout of spaces picker is same as it is on master

---

Feedback to watch

• Is the Home link atop the nav useful or simply redundant?
  We should keep in mind that pinning will soon also fill this space, so the Home link keeps this section always visible even when no pins exists. That could be accomplished with a title, for example, however there is some convenience with regards to keyboard navigation by keeping it here. Let's keep it for now and monitor user feedback.
• Is the overlay mask necessary?
  It blocks all other screen interaction which may or may not be desirable. For cases where another flyout is open from the right side, we can cover those with the nav overlay which may reduce some confusion. It also forces an interaction with regards to navigation before all else. This may make it easier to manager the open/close state of the nav. Let's keep it as-is for now and monitor user feedback.
• Is the nav width unnecessarily wide?
  As it stands, none of the links within the nav exceed even half of the width which is currently set at 320px. User may perceive this is a waste of screen space as they did with the previous nav design which was 240px. There is an opposing opinion that the new visual design/prominence may warrant the extra size. Additionally, we may consider stepped widths for varying screen sizes. Let's keep it as-is for now and monitor user feedback.
• How much confusion is generated by naming the first section Kibana?
  Product has taken the lead on this topic and is consulting internal stakeholders. @alexfrancoeur will communicate the final decision.

---

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
• Documentation was added for features that require explanation or tutorials
• 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, including a check against IE11

For maintainers

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

[myasonik]

Promoting this to not a draft to encourage more eyes on it early because of how big of a change this is. Sorry for the pings y'all!

I believe this to be functionally complete.

Now is a great time to:

• Review the code
• Review the functionality, particularly:
  • Making sure I didn't break anything in the old nav
  • Making sure the order and name changes work/are expected

Known a11y issues:

1. Locking the nav the first time will force focus to be placed back at the start of the page. This was a tradeoff to put the nav in the correct tab order which I think is a worthwhile trade. (A onetime annoyance of focus being moved vs a persistent annoyance of the nav being in the wrong spot.) The problem can likely be fixed by tuning how often the nav rerenders which will have the added benefit of less rerendering (read: faster).
2. When closing the nav, focus isn't consistently sent to the same location. (Gets sent to the button if the nav was not docked previously, gets sent somewhere onto the page if the nav was previously docked.) EUI needs to be updated to accept a ref on header buttons to fix this.

[lizozom]

🔥 🔥 🔥 🔥 Dock navigation option 🔥 🔥 🔥 🔥

[snide]

@lindseypoli Given the rework of our security products, it might make sense to start breaking down the individual views under Security into separate nav links. Right now it's just SIEM, but my guess is we can probably link directly to some of these spots (signals, cases...etc) from the nav directly.

[shahzad31]

Uptime changes LGTM !

[elasticmachine]

Pinging @elastic/uptime (Team:uptime)

[ryankeairns]

In response to the feedback regarding additional unit tests, coupled with feedback from Product regarding delivery of this feature in 7.8, we'll be making a concerted effort to continue bulking up test coverage post-merge. We discussed this as a team and understand that this procedure (continuing to write tests post-FF) is an exception to the norm, but feel it is the best approach for this particular case.

A separate issue has been created here to track that additional work around testing: #65369

There were existing navigation tests in place prior to this PR (which have been updated here), but more work ought to be done. Semi-relatedly, there is an existing deficiency for tests concerning the header which we would also like to improve.

[kibanamachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request
• Commit: 9c98447

History

• 💚 Build #45805 succeeded 02dac24
• 💔 Build #45790 failed 485a4ee
• 💔 Build #45756 failed a947add
• 💛 Build #45698 was flaky 153cf49
• 💚 Build #45649 succeeded 96bf7c0

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