[SharedUx] Chrome/Navigation package

[tsullivan]

The API for the link definition is subject to change. This PR provides linking functionality and structure that will give solution devs a starting point for side nav in their projects. The API uses simple hrefs for now, because it's the easiest thing to start with. Planning forward, we are thinking of a different navigation model that separates nav structure from presentation of each nav item - this will allow reuse of the structure without reusing the presentation.

Isolated dependencies

In order for this component to be usable in main, a bit further work is currently required in the ChromeStart service and the Serverless plugin. These links are examples of a usable implementation that link to a POC branch:

• Light mode for the side nav container: tsullivan@0a32333cdf0
• Extensions to Serverless plugin and the ChromeStart service: tsullivan@16b0aad610f

Summary

Introduces a component to host the side navigation in Kibana. Solution teams can insert their own content, and have other small options to customize the presentation: see the storybook demos for more.

Closes #154479
Closes #154484
Closes #154485
Closes #154489
Closes #154481
Closes #154480
Closes #154486
Closes #154487

Developer documentation

See the Storybook demos:

• run: yarn storybook shared_ux
• Find the Chrome > Navigation section in the Storybook app

Checklist

Delete any items that are not applicable to this PR.

• Home icon links to Project's "home" - or the customer user setting
• Home icon shows loading indicator
• All the Platform links navigate to the correct place
• Platform links are not shown if the underlying plugin is disabled
• Nav items define their links using href only
• All href links work
• Nav menu item to link to Cloud deployment
• 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)
• This renders correctly on smaller devices using a responsive layout. (You can test this in your browser)
• This was checked for cross-browser compatibility

[clintandrewhall]

Love this...! A great start. 🎉 🚀

[dgieselaar]

@tsullivan what kind of feedback are you looking for on this PR? I see that the API is subject to change, so not sure how deep we should go into that. I see a couple of visual bugs but as this is a first iteration those are probably not critical either?

[tsullivan]

@tsullivan what kind of feedback are you looking for on this PR? I see that the API is subject to change, so not sure how deep we should go into that. I see a couple of visual bugs but as this is a first iteration those are probably not critical either?

Hi @dgieselaar! Yes, the API for the link definition is subject to change. This PR provides linking functionality and structure that will give you a starting point for side nav in your project. e're just using hrefs in the API for now, because it's the easiest thing to start with.

Meanwhile, my team will ask for your feedback and try address it for our future iterations. We are thinking of a different navigation model that separates nav structure from presentation of each nav item - this will allow reuse of the structure without reusing the presentation. We realized we need that approach to give solution teams the option to have a highly customized side nav, and allow our breadcrumb component to "just work."

[tsullivan]

This includes extensions that are currently not provided by the ChromeStart service. These extensions were used to work out active link highlighting, but we are planning to change the API so that active link highlighting and breadcrumbs can work based on something more structured in the link definition. I will remove this to make a clean PR that will work with minimal changes needed in ChromeStart.

For determining if the side nav is open or collapsed, there will be a local storage setting that consumers can use, or we can make a service for it in the chrome package.

[tsullivan]

resolved in d1cd551

[ryankeairns]

We'll make some UI polish passes post-merge / in the coming weeks.

[kibana-ci]

💚 Build Succeeded

• Buildkite Build
• Commit: 5fbb3fc
• Storybooks Preview

Metrics [docs]

Public APIs missing comments

Total count of every public API that lacks a comment. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats comments for more detailed information.

id	before	after	diff
@kbn/shared-ux-chrome-navigation	-	11	+11

Public APIs missing exports

Total count of every type that is part of your API that should be exported but is not. This will cause broken links in the API documentation system. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats exports for more detailed information.

id	before	after	diff
@kbn/shared-ux-chrome-navigation	-	3	+3

Unknown metric groups

API count

id	before	after	diff
@kbn/shared-ux-chrome-navigation	-	21	+21

ESLint disabled line counts

id	before	after	diff
enterpriseSearch	17	19	+2
securitySolution	399	402	+3
total			+5

Total ESLint disabled count

id	before	after	diff
enterpriseSearch	18	20	+2
securitySolution	479	482	+3
total			+5

History

• 💛 Build #124037 was flaky 4257ba2
• 💚 Build #123741 succeeded d1cd551
• 💚 Build #123701 succeeded 8f5f601
• 💔 Build #123241 failed 1fa1f88
• 💔 Build #123171 failed ceab9d7
• 💚 Build #122998 succeeded 07f26d8

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

cc @tsullivan

[tsullivan]

Since the first reviews of this, there have only been removals of ChromeStart integrations that are currently going through redesign.

[tsullivan]

In the next few iterations, we'll refine how the nav is aware of it's open/closed status, and it will use a local storage setting.