Side Nav Serverless Requirements for April Integration Checkpoint

[petrklapka]

The side navigation menu component is to be modified to meet the following needs in support of the Serverless Initiative.

• [x] The left nav menu shall be a single component for both serverless and stateful deployments.
  • The following requirements are serverless specific. All behavior in stateful deployments shall be unchanged from what exists now unless otherwise specified.

1. Left nav

Appearance

• [ ] The Left Nav menu shall adhere to the shown mockup in appearance.

• It will be full-height and always appear in dark mode

  • Dependencies on EUI are being captured here (tl;dr the nav components have not yet been converted to Emotion) NOTE: this requirement is being reconsidered in Design

• [ ] It shall display the following groups

  • [x] Link back to Cloud (future: Project Switcher) - reuse existing group
  • [ ] Recents - reuse existing group
  • [x] Section for each solution - this exists today but inner portion will change
  • [x] Analytics - reuse existing group; possibly renamed to Data exploration
  • [x] Dev Tools - new section; move out of Management
  • [x] Management - reuse existing group

• [x] It shall be possible for the Solution to hide each group. For example, if project type X only needs Discover and has provided it in their Solution IA/side nav, then they can hide the root level Data exploration/Analytics group (note: verify that this is technically feasible in initial build)

• [x] For each group, specific child items may be hidden at the Solution team's discretion

  • For example, project type Z may want to hide a specific set of links in the Management group
  • 

• [ ] Menu items that correspond to applications that are not enabled in the deployment shall not be rendered

• [x] It shall support an icon and textual label for each root level menu item via EuiCollapsibleNavGroup docs

• [x] Root menu items shall support child menus via EuiSideNav docs

• [x] Root menu items shall be expandable/collapsible when they contain children via EuiSideNav docs

• [x] Child menu items shall consist only of textual labels and no icons (EuiSideNav support this, would we want/need to restrict what can be passed via the chrome service?)

  • Note from @tsullivan : child menu items will need the ability to be custom components and support secondary actions. The restriction we want is to not allow the text of the menu item to have an icon on the left side. To indicate secondary actions, the menu item will need an icon on the right.

• The expanded/collapsed state of the menu shall persist across user sessions (is this already supported via localStorage?)

  • Note from @tsullivan : this is not feasible for IC2 since the collapsed/icon-only version of the nav is not in scope.

Root Level Menu Item Behavior

The root menu items defined above shall have the following behavior

• Logo

  • [x] Logo shall function as link to homepage by default.
  • [x] Logo shall be configurable by Solutions to link to start page specified by the solution.
  • [x] Logo shall show loading state as it does in stateful product.
  • Note: Kibana currently allows users to to set a different start page than the actual home page. We should aim to keep that functionality
  • Logo
  • 

• Project Switcher

  • [x] The Project Switcher shall be a link to the list of projects in the cloud console.
  • [x] The label shall be along the lines of "View Projects/Deployments"
  • [x] It shall be on by default for all project types in initial build
  • [x] It shall not be disableable by the solution
  • For the initial build, we will not have a true switcher as no API exists. Instead, we will keep the existing UI as seen below.
  • 

• Home

  • [x] Home button shall not be visible in serverless deployments.
  • See image above for placement

• Recents

  • [ ] The Recents button shall be on by default.
  • [ ] It shall not be hidable by the Solution.
  • [ ] The recents button shall show children that are only applicable to the current user in the current project.
    • @tsullivan note: A simple way to implement this is to give Solutions a callback used to filter items they want. This mean they could hide the recents altogether by filtering out every item.
  • [x] #156126
  • Keep the existing UI as seen below.
  • 

• Solution Menu

  • [x] The Solution Menu shall display the Project Type name (ex: Security, Elasticsearch, Observability) and associated icon (same as the current nav) via EuiCollapsibleNavGroup
  • [x] The Solution Menu IA/links of the Solutions Menu shall be configurable by the Solution.
  • [x] The final rendering may use EuiSideNav components within the aforementioned EuiCollapsibleNavGroup
  • 

• Analytics / Data exploration || Machine Learning || Dev Tools || Management

  • [x] These Platform sections will be present and show all available apps for that category
    • [x] The existing admin-oriented group (Dev Tools and Management) may be anchored to the bottom of the left nav menu.

Additional Programmatic Functionality

This section defines additional behaviors and functionality required at a programmatic level that are not covered in the Appearance and Root Level Menu Behavior sections.

• [ ] The top announcement banner shall continue to work as it does today (example below)

  
  • Note: Dashboard selection four square icon is known to corrupt the rendering.

• [ ] The bottom bars shall continue to work as they do today

Out of scope for April Checkpoint

(This is a general consensus as of writing; not set in stone)

• Collapsed, icon-only version
• True project switcher
• Ability to hide Recents
• Global Header

[elasticmachine]

Pinging @elastic/appex-sharedux (Team:SharedUX)

[tsullivan]

There was an ask from the Security Solution team (@YulNaumenko) that the nav component package provide a way for solutions to import Platform navigation items, with the intention of placing them at-will within the Solution area and hiding them from the Platform area.

Example of how it would be used: Observability wants to show a link to Logs Anomalies from ML in the nav under Observability > Logs > Anomalies. The Anomalies link is in the Platform area of the nav under Machine Learning. Observability should hide the anomalies link under Machine Learning, and "import" that link so it can be showed in their solution area.

[rayafratkina]

@tsullivan the capability to import individual items from the Platform area is something we need to have for MVP, but it's not a requirement for the first checkpoint. Should we start another issue with the remaining requirements so we can track them without adding scope to the initial work?

[tsullivan]

@rayafratkina I have created new issues to track progress, and each can be moved around or changed in priority as needed. The capability in question in tracked here: https://github.com/elastic/kibana/issues/154486 and we can have a separate discussion there about it.

[yuliacech]

I believe I was pinged by mistake, probably meant for @YulNaumenko

[tsullivan]

I've updated 20/35 of the checklist items to reflect the state of implementation in this (currently Draft) PR: https://github.com/elastic/kibana/pull/152510

[petrklapka]

The MVP Left Nav implementation for the April Integration checkpoint was delivered as a POC, then subsequently merged into main. Chrome polish tasks that remain are being tracked as separate issues.