[SharedUxChromeNavigation] Detect active nav route(s)

[sebelga]

This PR add the active navigation detection in the side navigation.

getActiveNavigationNodes$()

The serverless plugin exposes a new getActiveNavigationNodes$() which returns the active nodes in the navigation tree based on the current browser location. The active node is the one with the longest url match.

Location.pathname = "/foo/bar/baz"
node1.url = "/foo"
node2.url = "/foo/bar" --> match

The result is a jagged array of branches of active nodes.

[
  [
    { id: 'root', path: ['root'] },
    { id: 'group1', title:'Group 1' path: ['root', 'group1'] },
    { id: 'item1', title:'Item 1', path: ['root', 'group1', 'item1'] }
  ],
  // If there are 2 branches that matches, 
  [
    { id: 'root', path: ['root'] },
    { id: 'item1', title:'Item 1', path: ['root', 'item1'] }
  ],
]

getIsActive()

It is possible to override the default matching mechanism and provide a handler to set the active state of a node. This handler is called whenever the location changes.

{
  id: 'alerts-cases-slos',
  children: [
    {
      link: 'observability-overview:alerts',
      // handler to set the active state
      getIsActive: (location) => {
        return location.pathname.startsWith('/alerts');
      },
    },
    ...
  ],
},

// Or using components
<Navigation.Group id="group:settings" title="Settings">
  <Navigation.Item
    id="logs"
    title="Logs"
    getIsActive={(location) => {
      return location.pathname.startsWith('/logs');
    }}
  />
  ...
</Navigation.Group>

Note

There is an issue to change the style of the active state. This PR does not solve it as it should be done in EUI. We use the isSelected state declared on the items of the <EuiSideNav /> component. When this component is updated the new style will be applied here.

Screenshot

Fixes #156664

[Dosant]

Nice! Have some questions/suggestions. In the meantime, I'll start working on breadcrumbs and see if I have any more questions

[Dosant]

is it possible to track if the section was manually opened and in that case not auto-collapse it or something like this?
Or maybe possible to rely on the initial render?

[Dosant]

What is "the "mounting" phase" in this sense? Does this mean that initially "isActive" is incorrect? Why so? Can we make it correct on the first render?

[Dosant]

I think related #159906 (comment)

[sebelga]

Does this mean that initially "isActive" is incorrect? Why so?

I am not sure it would be possible or would require quite a complex logic.

The state order is:

• isActive: false
• item register themselves in their parents
• the root Navigation component register the tree in the ChromeService
• the ChromeService updates the activeNodes based on the navigation tree + the current location
• the active nodes are returned to the Navigation
• each node checks if it is active and updates the isActive state

That's why all node initially mount as isActive: false and only after they are mounted the activeNodes array is constructed.

is it possible to track if the section was manually opened and in that case not auto-collapse it or something like this?

It is not only when it was manually opened, also if it was opened automatically on page load because one of the children is active.

You can disable the if statement around setIsCollapsed(!isActive); and see for yourself why it is needed.

[sebelga]

Basically we don't want to close automatically a group that has been opened (manually or automatically).

[jbudz]

limits.yml

[sebelga]

Thanks for the review @Dosant ! I addressed all of your feedback, can you have another look? Cheers!

[kibana-ci]

💚 Build Succeeded

• Buildkite Build
• Commit: 87e7816
• Storybooks Preview

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
core	429	431	+2
serverlessObservability	35	37	+2
serverlessSearch	81	83	+2
total			+6

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/core-chrome-browser	58	61	+3
@kbn/shared-ux-chrome-navigation	41	36	-5
serverless	15	16	+1
total			-1

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
core	145.5KB	145.5KB	+6.0B

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	5	4	-1

Page load bundle

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

id	before	after	diff
core	353.9KB	357.1KB	+3.2KB
serverless	5.3KB	5.3KB	+75.0B
serverlessObservability	16.5KB	17.9KB	+1.4KB
serverlessSearch	19.8KB	21.2KB	+1.4KB
total			+6.1KB

Unknown metric groups

API count

id	before	after	diff
@kbn/core-chrome-browser	149	155	+6
@kbn/shared-ux-chrome-navigation	62	45	-17
serverless	16	17	+1
total			-10

ESLint disabled line counts

id	before	after	diff
@kbn/core-chrome-browser	1	0	-1
enterpriseSearch	13	15	+2
securitySolution	416	420	+4
total			+5

Total ESLint disabled count

id	before	after	diff
@kbn/core-chrome-browser	1	0	-1
enterpriseSearch	14	16	+2
securitySolution	497	501	+4
total			+5

History

• 💚 Build #136986 succeeded e149dfc
• 💔 Build #136929 failed 3a47dcd
• 💔 Build #136893 failed 25b7c08
• 💔 Build #136874 failed b4da37b
• 💔 Build #136856 failed 8379059
• 💔 Build #136524 failed b3d55f7

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

cc @sebelga

[Dosant]

I tested while working on breadcrumbs 👍