[Proposal] Docking for wide viewports

[ryankeairns]

Relates to #77072

Summary

Prior versions of Kibana provided the capability to dock the primary navigation. This capability was removed when we introduced the solution-level side navigation as to avoid side-by-side navigation and, in turn, potentially cluttering up the UI.

Fast forward in time and we continue to see a steady stream of requests to add the dock option back, especially for cases where people use larger displays. Also, the width of the left nav design is now less than where it started. Digging into our telemetry data, we have also learned that the most common viewport size is 1920 x 1080. With this in mind, this PR proposes adding back the docking capability but only for wider viewport sizes where there are less concerns of available UI real estate.

Specifically, this PR allows the docking option for viewport widths of 1440px and up.

Screenshots

Discover < 1440

Discover >= 1440

Observability < 1440 (w/ solution side nav)

Observability >= 1440 (w/ solution side nav)

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
• Any UI touched in this PR is usable by keyboard only (learn more about keyboard accessibility)
• Any UI touched in this PR does not create any new axe failures (run axe in browser: FF, Chrome)
• If a plugin configuration key changed, check if it needs to be allowlisted in the cloud and added to the docker list
• This renders correctly on smaller devices using a responsive layout. (You can test this in your browser)
• This was checked for cross-browser compatibility

[ryankeairns]

@elasticmachine merge upstream

[ryankeairns]

@elasticmachine merge upstream

[ryankeairns]

@elasticmachine merge upstream

[cchaos]

I think this is a fair adjustment to allow larger screens to dock all navigation. The one thing we'll need to be concerned about are general EuiBottomBar's and especially the Security Timeline:

[pgayvallet]

Technically LGTM

[pgayvallet]

Not sure, but EUI may have constants and/or mixins around the most common break points? an hardcoded value probably should be avoided.

[pgayvallet]

NIT: lockRef.current?.focus()

[ryankeairns]

I'm going to need some help sorting out the space accommodations for views with a bottom bar before this can get merged.

I see there is something in the chrome_service for getting the docked state (getIsNavDrawerDocked$()), but I'm not certain how to wire that into the views where a bottom bar exists. Presumably, this boolean could be returned and used to set the left prop value on each EuiBottomBar bar instance (there are only a handful).

[ryankeairns]

@elasticmachine merge upstream

[kibana-ci]

💚 Build Succeeded

• Buildkite Build
• Commit: bb2f138
• Storybooks Preview
• Cloud Deployment
• Webpack Bundle Analyzer

Metrics [docs]

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id	before	after	diff
core	288.7KB	289.7KB	+1021.0B

History

• 💚 Build #40682 succeeded 06087e9
• 💚 Build #40318 succeeded af27fb1
• 💚 Build #39982 succeeded 827fb7fd99209390157ced99bcde9fc3c1cfe082
• 💔 Build #39974 failed 1342c4d
• 💔 Build #39934 failed f26a72f
• 💔 Build #39915 failed 1bc8c46

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

[FreerideTheWorld]

Finally. As per the feedback in [Discuss] Remove 'Dock navigation' feature #77072 this should have never been removed in the first place. What version will this be back in?