[Enterprise Search] Add nested sub navigation to SideNavLinks

[cee-chen]

Summary

This adds the subNav prop to the SideNavLink component to support nested sub navigation. Example usage:

const subNav = (
  <>
    <SideNavLink to="/red">Red Fish</SideNavLink>
    <SideNavLink to="/blue">Blue Fish</SideNavLink>
  </>
);

const sideNav = (
  <SideNav product={APP_SEARCH_PLUGIN}>
    <SideNavLink to="/one" subNav={subNav}>One Fish</SideNavLink>
    <SideNavLink to="/two">Two Fish</SideNavLink>
  <SideNav>
);

Let me know if this works for you @scottybollinger!

Screencaps

Example from above:

Example App Search Engines subnav:

Checklist

• Unit or functional tests were updated or added to match the most common scenarios
• This renders correctly on smaller devices using a responsive layout. (You can test this in your browser
• This was checked for cross-browser compatibility

[cee-chen]

Also in theory you can continually nest as many levels deep as you need to but you probably shouldn't lol. (link hitboxes & highlight areas will get wonky, they're currently only optimized for 1 sub-level)

also the markup is horrendous 😂

[scottybollinger]

This LGTM! Thanks so much for doing this!

[cee-chen]

@scottybollinger Ah I forgot to mention how to implement this with conditional display (i.e. only show the subnav when you're on the groups page). App Search does this a bit differently so I'm currently spitballing...

In some example new file (maybe components/layout/subnavs.tsx or maybe views/groups/subnav.tsx? Could go either way):

import { useParams } from 'react-router-dom';

export const groupsSubNav = () => {
  const { groupId } = useParams();
  if (!groupId) return null; // Or some other way of checking the route matches your groups route

  return (
     // nested SideNavLinks
  );
};

and then in layout/nav.tsx for workplace search:

import { groupsSubNav } from '../groups_view_folder/wherever';

// ...

      <SideNavLink to="/groups" subNav={groupsSubNav}>
        {i18n.translate('xpack.enterpriseSearch.workplaceSearch.nav.groups', {
          defaultMessage: 'Groups',
        })}
      </SideNavLink>

[cee-chen]

Not sure what's up with that failing test, it's not ours 🤷

@elasticmachine merge upstream

[cee-chen]

@elasticmachine merge upstream

[scottybollinger]

@scottybollinger Ah I forgot to mention how to implement this with conditional display (i.e. only show the subnav when you're on the groups page). App Search does this a bit differently so I'm currently spitballing...

In some example new file (maybe components/layout/subnavs.tsx or maybe views/groups/subnav.tsx? Could go either way):

import { useParams } from 'react-router-dom';

export const groupsSubNav = () => {
  const { groupId } = useParams();
  if (!groupId) return null; // Or some other way of checking the route matches your groups route

  return (
     // nested SideNavLinks
  );
};

and then in layout/nav.tsx for workplace search:

import { groupsSubNav } from '../groups_view_folder/wherever';

// ...

      <SideNavLink to="/groups" subNav={groupsSubNav}>
        {i18n.translate('xpack.enterpriseSearch.workplaceSearch.nav.groups', {
          defaultMessage: 'Groups',
        })}
      </SideNavLink>

Thanks! What I'm doing is checking the logic file for a group.id, which is only set when the user is where they need to be to show the nav.

[kibanamachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request
• Commit: c4c7b91

Build metrics

async chunks size

id	value	diff	baseline
enterpriseSearch	434.5KB	+898.0B	433.7KB

History

• 💔 Build #75019 failed c3880df
• 💔 Build #75012 failed c1b5708

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