diff --git a/src/core/packages/chrome/navigation/README.md b/src/core/packages/chrome/navigation/README.md index ea4eeade4fd3b..1e68f90c4fdb6 100644 --- a/src/core/packages/chrome/navigation/README.md +++ b/src/core/packages/chrome/navigation/README.md @@ -6,15 +6,6 @@ An adaptive side navigation system built with [Elastic UI](https://eui.elastic.c | ----------------------------- | ------------------------------ | | ![image](./expanded-mode.png) | ![image](./collapsed-mode.png) | -## Features - -- **Responsive design** - automatically adapts between collapsed and expanded states based on screen size. -- **Smart menu system** - dynamic "More" menu that consolidates overflow items during window resize. -- **Nested navigation** - multi-level menu support with nested popover panels in collapsed mode. -- **Accessibility-first** - WCAG-compliant with proper ARIA labels, keyboard navigation, and screen reader support. -- **Modular architecture** - composable components with clean separation of concerns. Exported as a self-contained widget. -- **Dark mode** and **High contrast mode support** - ## Usage ### Basic setup @@ -66,6 +57,12 @@ const navigationItems = { function App() { const [isCollapsed, setIsCollapsed] = useState(false); + const [activeItemId, setActiveItemId] = useState('dashboard'); + + const handleItemClick = (item: MenuItem | SecondaryMenuItem | SideNavLogo) => { + setActiveItemId(item.id); + trackAnalytics(item.id); + }; return (
@@ -80,6 +77,7 @@ function App() { iconType: 'observabilityApp', href: '/observability', }} + onItemClick={handleItemClick} setWidth={setNavigationWidth} />
{/* Your application content */}
@@ -101,6 +99,7 @@ export const navigationItems = { label: 'Overview', iconType: 'info', href: '/overview', + badgeType: 'techPreview', // for tech preview items }, // Menu item with nested sections { @@ -111,7 +110,7 @@ export const navigationItems = { sections: [ { id: 'reports-section', - label: 'Reports', // or null for unlabeled sections + label: 'Reports', // omit for unlabeled sections items: [ { id: 'analytics', // has the same `id` as the parent item @@ -122,6 +121,7 @@ export const navigationItems = { id: 'sales-report', label: 'Sales report', href: '/analytics/sales', + badgeType: 'beta', // for beta items }, { id: 'traffic-report', diff --git a/src/core/packages/chrome/navigation/src/__stories__/navigation.stories.tsx b/src/core/packages/chrome/navigation/src/__stories__/navigation.stories.tsx index 8df3a7eba89f3..982f3cb8e6b98 100644 --- a/src/core/packages/chrome/navigation/src/__stories__/navigation.stories.tsx +++ b/src/core/packages/chrome/navigation/src/__stories__/navigation.stories.tsx @@ -73,7 +73,7 @@ export default { id: 'observability', href: LOGO.href, label: LOGO.label, - iconType: LOGO.type, + iconType: LOGO.iconType, }, setWidth: () => {}, }, @@ -91,6 +91,7 @@ export const Default: StoryObj = { ); }, ], + render: (args) => , }; export const Collapsed: StoryObj = { @@ -108,6 +109,7 @@ export const Collapsed: StoryObj = { args: { isCollapsed: true, }, + render: (args) => , }; export const WithMinimalItems: StoryObj = { @@ -128,6 +130,7 @@ export const WithMinimalItems: StoryObj = { footerItems: PRIMARY_MENU_FOOTER_ITEMS.slice(0, 2), }, }, + render: (args) => , }; export const WithManyItems: StoryObj = { @@ -168,6 +171,24 @@ export const WithManyItems: StoryObj = { footerItems: PRIMARY_MENU_FOOTER_ITEMS, }, }, + render: (args) => , +}; + +export const WithinLayout: StoryObj = { + name: 'Navigation within Layout', + render: (args) => , +}; + +const ControlledNavigation = ({ ...props }: PropsAndArgs) => { + const [activeItemId, setActiveItemId] = useState(props.activeItemId || PRIMARY_MENU_ITEMS[0].id); + + return ( + setActiveItemId(item.id)} + /> + ); }; const Layout = ({ ...props }: PropsAndArgs) => { @@ -212,15 +233,7 @@ const Layout = ({ ...props }: PropsAndArgs) => { backgroundColor={euiTheme.colors.backgroundFilledText} /> } - navigation={ - - } + navigation={} sidebar={ { ); }; - -export const WithinLayout: StoryObj = { - name: 'Navigation within Layout', - render: (args) => , -}; diff --git a/src/core/packages/chrome/navigation/src/__tests__/__snapshots__/both_modes.test.tsx.snap b/src/core/packages/chrome/navigation/src/__tests__/__snapshots__/both_modes.test.tsx.snap new file mode 100644 index 0000000000000..5ec35ddf4a103 --- /dev/null +++ b/src/core/packages/chrome/navigation/src/__tests__/__snapshots__/both_modes.test.tsx.snap @@ -0,0 +1,296 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Both modes should render the side navigation 1`] = ` +
+
+
+
+ +
+
+
+ Solution +
+ +
+ + +
+
+
+`; diff --git a/src/core/packages/chrome/navigation/src/__tests__/__snapshots__/collapsed_mode.test.tsx.snap b/src/core/packages/chrome/navigation/src/__tests__/__snapshots__/collapsed_mode.test.tsx.snap new file mode 100644 index 0000000000000..68b3fdaebdd82 --- /dev/null +++ b/src/core/packages/chrome/navigation/src/__tests__/__snapshots__/collapsed_mode.test.tsx.snap @@ -0,0 +1,308 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Collapsed mode should render the side navigation 1`] = ` +
+
+
+ +
+ +
+
+
+ Solution +
+ +
+ + + +
+
+
+`; diff --git a/src/core/packages/chrome/navigation/src/__tests__/__snapshots__/expanded_mode.test.tsx.snap b/src/core/packages/chrome/navigation/src/__tests__/__snapshots__/expanded_mode.test.tsx.snap new file mode 100644 index 0000000000000..214bf627b057f --- /dev/null +++ b/src/core/packages/chrome/navigation/src/__tests__/__snapshots__/expanded_mode.test.tsx.snap @@ -0,0 +1,296 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Expanded mode should render the side navigation 1`] = ` +
+
+
+
+ +
+
+
+ Solution +
+ +
+ + +
+
+
+`; diff --git a/src/core/packages/chrome/navigation/src/__tests__/both_modes.test.tsx b/src/core/packages/chrome/navigation/src/__tests__/both_modes.test.tsx new file mode 100644 index 0000000000000..4a29866d91688 --- /dev/null +++ b/src/core/packages/chrome/navigation/src/__tests__/both_modes.test.tsx @@ -0,0 +1,1465 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the "Elastic License + * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side + * Public License v 1"; you may not use this file except in compliance with, at + * your election, the "Elastic License 2.0", the "GNU Affero General Public + * License v3.0 only", or the "Server Side Public License, v 1". + */ + +import React, { useState } from 'react'; +import { I18nProvider } from '@kbn/i18n-react'; +import { fireEvent, render, screen, waitFor, within } from '@testing-library/react'; +import { userEvent } from '@testing-library/user-event'; + +import { EXPANDED_MENU_GAP, EXPANDED_MENU_ITEM_HEIGHT, MAX_MENU_ITEMS } from '../constants'; +import { Navigation } from '../components/navigation'; +import { basicMock } from '../mocks/basic_navigation'; +import { createBoundingClientRectMock } from './create_bounding_client_rect_mock'; +import { elasticsearchMock } from '../mocks/elasticsearch'; +import { observabilityMock } from '../mocks/observability'; +import { resizeWindow } from './resize_window'; +import { securityMock } from '../mocks/security'; +import { getHasSubmenu } from '../utils/get_has_submenu'; + +const SPACE_MARGIN = 100; + +// Basic mock reusable IDs +const dashboardsItemId = basicMock.navItems.primaryItems[0].id; +const tlsCertificatesItemId = basicMock.navItems.primaryItems[2].sections?.[0].items[1].id; +const settingsItemId = basicMock.navItems.footerItems[2].id; +const advancedSettingsItemId = basicMock.navItems.footerItems[2].sections?.[0].items[1].id; + +// Security mock reusable IDs +const machinelearningItemId = securityMock.navItems.primaryItems[11].id; + +// Observability mock reusable IDs +const appsItemId = observabilityMock.navItems.primaryItems[6].id; +const infrastructureItemId = observabilityMock.navItems.primaryItems[7].id; +const machineLearningItemId = observabilityMock.navItems.primaryItems[10].id; + +describe('Both modes', () => { + let restoreWindowSize: () => void; + + const originalGetBoundingClientRect = Element.prototype.getBoundingClientRect; + + beforeAll(() => { + Element.prototype.getBoundingClientRect = createBoundingClientRectMock( + (EXPANDED_MENU_ITEM_HEIGHT + EXPANDED_MENU_GAP) * (MAX_MENU_ITEMS - 1) + + (EXPANDED_MENU_ITEM_HEIGHT + EXPANDED_MENU_GAP) + + SPACE_MARGIN + ); + }); + + afterAll(() => { + if (restoreWindowSize) restoreWindowSize(); + Element.prototype.getBoundingClientRect = originalGetBoundingClientRect; + }); + + it('should render the side navigation', () => { + const { container } = render( + {}} + /> + ); + + expect(container).toMatchSnapshot(); + }); + + describe('Solution logo', () => { + /** + * GIVEN the solution logo is displayed in the navigation + * WHEN I click the solution logo + * THEN I should be redirected to the solution’s homepage + */ + it('should redirect to the solution homepage when clicked', () => { + render( + {}} + /> + ); + + const solutionLogo = screen.getByRole('link', { + name: 'Solution homepage', + }); + const expectedHref = basicMock.logo.href; + + expect(solutionLogo).toHaveAttribute('href', expectedHref); + + userEvent.click(solutionLogo); + }); + + /** + * GIVEN the current page is the solution’s homepage + * WHEN the navigation renders + * THEN the solution logo is in an active state + */ + it('should have active state if the initial active item is the homepage', () => { + render( + {}} + /> + ); + + const solutionLogo = screen.getByRole('link', { + name: 'Solution homepage', + }); + + expect(solutionLogo).toHaveAttribute('aria-current', 'page'); + }); + }); + + describe('Responsive mode', () => { + /** + * GIVEN the screen size is less than `s` (767px) + * WHEN the navigation renders + * THEN it shows in collapsed mode + */ + it('should render in collapsed mode if the screen size is less than `s` (767px)', () => { + restoreWindowSize = resizeWindow(640, 480); + render( + {}} + /> + ); + + const solutionLogo = screen.getByRole('link', { + name: 'Solution homepage', + }); + + // The label is wrapped with `` in collapsed mode + // See: https://eui.elastic.co/docs/utilities/accessibility/#screen-reader-only + expect(solutionLogo.children[1].className).toContain('euiScreenReaderOnly'); + }); + + /** + * GIVEN the screen size is more or equal to `s` (767px) + * WHEN the navigation renders + * THEN the navigation should be in expanded mode + */ + it('should render in expanded mode if the screen size is more or equal to `s` (767px)', () => { + restoreWindowSize = resizeWindow(1024, 768); + render( + {}} + /> + ); + + const solutionLogo = screen.getByRole('link', { + name: 'Solution homepage', + }); + + // The label is NOT wrapped with `` in expanded mode + // See: https://eui.elastic.co/docs/utilities/accessibility/#screen-reader-only + expect(solutionLogo.children[1].className).not.toContain('euiScreenReaderOnly'); + }); + }); + + describe('Primary menu', () => { + describe('Primary menu item', () => { + /** + * GIVEN the initial active item is a primary menu item + * WHEN the navigation renders + * THEN this primary menu item is in an active state + */ + it('should have active state if the initial active item is the primary menu item', () => { + render( + {}} + /> + ); + + const dashboardsLink = screen.getByRole('link', { + name: 'Dashboards', + }); + + // Current item should have both aria-current and be highlighted + expect(dashboardsLink).toHaveAttribute('aria-current', 'page'); + expect(dashboardsLink).toHaveAttribute('data-highlighted', 'true'); + + const discoverLink = screen.getByRole('link', { + name: 'Discover', + }); + + // Non-current item should not have aria-current and not be highlighted + expect(discoverLink).not.toHaveAttribute('aria-current', 'page'); + expect(discoverLink).toHaveAttribute('data-highlighted', 'false'); + }); + + /** + * GIVEN the initial active item is a submenu item + * WHEN the navigation renders + * THEN its parent primary menu item is in a visually active state + * AND a side panel with the submenu opens + * AND the submenu item is in an active state (`aria-current="page"`) + */ + it('should have active state if the initial active item is the submenu item', async () => { + render( + {}} + /> + ); + + const appsLink = screen.getByRole('link', { + name: 'Apps', + }); + + // Parent should be visually highlighted but not have aria-current since child is the actual active item + expect(appsLink).toHaveAttribute('data-highlighted', 'true'); + expect(appsLink).not.toHaveAttribute('aria-current', 'page'); + + const sidePanel = screen.getByRole('region', { + name: 'Side panel', + }); + + const tlsCertificatesLink = within(sidePanel).getByRole('link', { + name: 'TLS certificates', + }); + + // Only the actual active submenu item should have aria-current="page" + expect(tlsCertificatesLink).toHaveAttribute('aria-current', 'page'); + expect(tlsCertificatesLink).toHaveAttribute('data-highlighted', 'true'); + }); + + /** + * GIVEN a primary menu item without a submenu is not active + * WHEN I click on it + * THEN this primary menu item becomes active + */ + it('(without submenu) should have active state after clicking on it', async () => { + const TestComponent = () => { + const [activeItemId, setActiveItemId] = useState(dashboardsItemId); + + return ( + + setActiveItemId(item.id)} + setWidth={() => {}} + /> + + ); + }; + + render(); + + const discoverLink = screen.getByRole('link', { name: 'Discover' }); + + // Initially not current and not highlighted + expect(discoverLink).not.toHaveAttribute('aria-current', 'page'); + expect(discoverLink).toHaveAttribute('data-highlighted', 'false'); + + await userEvent.click(discoverLink); + + // After clicking, should be both current and highlighted + expect(discoverLink).toHaveAttribute('aria-current', 'page'); + expect(discoverLink).toHaveAttribute('data-highlighted', 'true'); + }); + + /** + * GIVEN a primary menu item with a submenu is not active + * WHEN I click on it + * THEN the primary menu item becomes active + * AND a side panel with its submenu opens + * AND the first item in the submenu is in an active state by default + */ + it('(with submenu) should have active state after clicking on it, and a side panel should open', async () => { + const TestComponent = () => { + const [activeItemId, setActiveItemId] = useState(settingsItemId); + + return ( + + ({ + ...item, + onClick: () => { + const hasSubmenu = getHasSubmenu(item); + const firstChild = item.sections?.[0].items?.[0].id; + + if (hasSubmenu && firstChild) { + setActiveItemId(firstChild); + } else { + setActiveItemId(item.id); + } + }, + })), + }} + logo={basicMock.logo} + setWidth={() => {}} + /> + + ); + }; + + render(); + + const appsLink = screen.getByRole('link', { + name: 'Apps', + }); + + await userEvent.click(appsLink); + + // Parent should be both current and highlighted (since parent and first child have same ID) + expect(appsLink).toHaveAttribute('aria-current', 'page'); + expect(appsLink).toHaveAttribute('data-highlighted', 'true'); + + const sidePanel = screen.getByRole('region', { + name: 'Side panel', + }); + + expect(sidePanel).toBeInTheDocument(); + + const overviewLink = within(sidePanel).getByRole('link', { + name: 'Overview', + }); + + // First submenu item should be current and highlighted + expect(overviewLink).toHaveAttribute('aria-current', 'page'); + expect(overviewLink).toHaveAttribute('data-highlighted', 'true'); + }); + + /** + * GIVEN a primary menu item with a submenu where parent and child have different IDs + * WHEN I click on it to activate the child + * THEN the parent should be highlighted but NOT current + * AND the child should be both current and highlighted + */ + it('(with submenu) should show correct states when parent and child have different IDs', async () => { + // Create a modified navigation structure where parent and child have different IDs + const modifiedNavItems = { + ...basicMock.navItems, + primaryItems: [ + ...basicMock.navItems.primaryItems.slice(0, 2), + { + ...basicMock.navItems.primaryItems[2], + id: 'parent_different_id', + sections: [ + { + ...basicMock.navItems.primaryItems[2].sections![0], + items: [ + { + id: 'child_different_id', + label: 'Child with different ID', + href: '/child_different', + }, + ...basicMock.navItems.primaryItems[2].sections![0].items.slice(1), + ], + }, + ], + }, + ], + }; + + render( + + {}} + /> + + ); + + const parentLink = screen.getByRole('link', { + name: 'Apps', + }); + + const sidePanel = screen.getByRole('region', { + name: 'Side panel', + }); + + const childLink = within(sidePanel).getByRole('link', { + name: 'Child with different ID', + }); + + // Parent should be highlighted but NOT current (since child has different ID and is the active one) + expect(parentLink).not.toHaveAttribute('aria-current', 'page'); + expect(parentLink).toHaveAttribute('data-highlighted', 'true'); + + // Child should be both current and highlighted + expect(childLink).toHaveAttribute('aria-current', 'page'); + expect(childLink).toHaveAttribute('data-highlighted', 'true'); + }); + + /** + * GIVEN a primary menu item with a submenu is active + * WHEN I click on a different item in its submenu + * THEN the parent primary menu item remains in an active state + * AND the clicked submenu item becomes active + */ + it('(with submenu) should still have active state after clicking on another submenu item', async () => { + const TestComponent = () => { + const [activeItemId, setActiveItemId] = useState(tlsCertificatesItemId); + + return ( + + setActiveItemId(item.id)} + setWidth={() => {}} + /> + + ); + }; + + render(); + + const appsLink = screen.getByRole('link', { + name: 'Apps', + }); + + const sidePanel = screen.getByRole('region', { + name: 'Side panel', + }); + + let overviewLink = within(sidePanel).getByRole('link', { + name: 'Overview', + }); + + const tlsCertificatesLink = within(sidePanel).getByRole('link', { + name: 'TLS certificates', + }); + + expect(appsLink).toHaveAttribute('data-highlighted', 'true'); + expect(appsLink).not.toHaveAttribute('aria-current', 'page'); + + expect(tlsCertificatesLink).toHaveAttribute('aria-current', 'page'); + expect(tlsCertificatesLink).toHaveAttribute('data-highlighted', 'true'); + + await userEvent.click(overviewLink); + + expect(appsLink).toHaveAttribute('data-highlighted', 'true'); + expect(appsLink).toHaveAttribute('aria-current', 'page'); + + // "Overview" becomes stale and leads to incorrect assertions, we need to re-query the link + overviewLink = within(sidePanel).getByRole('link', { + name: 'Overview', + }); + + expect(overviewLink).toHaveAttribute('aria-current', 'page'); + expect(overviewLink).toHaveAttribute('data-highlighted', 'true'); + }); + }); + + describe('Primary menu item limit', () => { + /** + * GIVEN fewer than 12 primary menu items exist (e.g. 10) + * WHEN the navigation renders + * THEN all provided items are displayed + */ + it('should display all provided items when fewer than 12 exist', () => { + render( + {}} + /> + ); + + elasticsearchMock.navItems.primaryItems.forEach((item) => { + const link = screen.getByRole('link', { + name: item.label, + }); + + expect(link).toBeInTheDocument(); + }); + + const moreButton = screen.queryByRole('button', { + name: 'More', + }); + + expect(moreButton).not.toBeInTheDocument(); + }); + + /** + * GIVEN exactly 12 primary menu items exist + * WHEN the navigation renders + * THEN all provided items are displayed + */ + it('should display all 12 provided items when exactly 12 exist', () => { + // Observability mock has exactly 11 primary menu items + const navigationWithTwelveItems = { + ...observabilityMock, + navItems: { + ...observabilityMock.navItems, + primaryItems: [ + ...observabilityMock.navItems.primaryItems, + { + id: 'new-item', + label: 'New Item', + icon: 'new_item', + href: '/new-item', + iconType: 'star', + }, + ], + }, + }; + + // Renders exactly 12 primary menu items + render( + {}} + /> + ); + + observabilityMock.navItems.primaryItems.forEach((item) => { + const link = screen.getByRole('link', { + name: item.label, + }); + + expect(link).toBeInTheDocument(); + }); + + const moreButton = screen.queryByRole('button', { + name: 'More', + }); + + expect(moreButton).not.toBeInTheDocument(); + }); + + /** + * GIVEN more than 12 primary menu items exist (e.g. 13) + * WHEN the navigation renders + * THEN only 11 of those primary menu items display + * AND a "More" menu item displays + * AND it has a submenu with the 1 primary menu item left + */ + it('should display a "More" menu item with a submenu when more than 12 exist', async () => { + render( + + {}} + /> + + ); + + securityMock.navItems.primaryItems.slice(0, 11).forEach((item) => { + const link = screen.getByRole('link', { + name: item.label, + }); + + expect(link).toBeInTheDocument(); + }); + + const twelfthLink = screen.queryByRole('link', { + name: securityMock.navItems.primaryItems[11].label, + }); + + expect(twelfthLink).not.toBeInTheDocument(); + + const moreButton = screen.getByRole('button', { + name: 'More', + }); + + expect(moreButton).toBeInTheDocument(); + + await userEvent.hover(moreButton); + + const morePopover = screen.getByRole('dialog', { + name: 'More', + }); + + securityMock.navItems.primaryItems.slice(11).forEach((item) => { + const link = within(morePopover).getByRole('link', { + name: item.label, + }); + + expect(link).toBeInTheDocument(); + }); + }); + }); + + describe('More menu', () => { + /** + * GIVEN not all primary menu items fit the menu height + * WHEN I click on the "More" primary menu + * THEN a popover should appear with the submenu + * AND when I hover out the popover should persist + */ + it('should have persistent popover on hover out after the trigger was clicked', async () => { + render( + + {}} + /> + + ); + + const moreButton = screen.getByRole('button', { + name: 'More', + }); + + await userEvent.hover(moreButton); + + const morePopover = screen.getByRole('dialog', { + name: 'More', + }); + + expect(morePopover).toBeInTheDocument(); + + await userEvent.click(moreButton); + + expect(morePopover).toBeInTheDocument(); + + await userEvent.unhover(moreButton); + + expect(morePopover).toBeInTheDocument(); + + const solutionLogo = screen.getByRole('link', { + name: 'Security homepage', + }); + + await userEvent.click(solutionLogo); + + // Popover has a delay on hover out so we need to await the assertion + await waitFor(() => { + expect(morePopover).not.toBeInTheDocument(); + }); + }); + + /** + * GIVEN not all primary menu items fit the menu height + * AND the initial active item is a primary menu item within the "More" menu + * WHEN the navigation renders + * THEN the "More" primary menu item itself is in an active state + */ + it('should show correct active states when active item is in "More" menu', async () => { + render( + + {}} + /> + + ); + + const moreButton = screen.getByRole('button', { + name: 'More', + }); + + // More button should be highlighted when containing active item but not marked as current page + expect(moreButton).toHaveAttribute('data-highlighted', 'true'); + + await userEvent.hover(moreButton); + + const morePopover = screen.getByRole('dialog', { + name: 'More', + }); + + const mlLink = within(morePopover).getByRole('link', { + name: 'Machine learning', + }); + + expect(mlLink).toHaveAttribute('aria-current', 'page'); + expect(mlLink).toHaveAttribute('data-highlighted', 'true'); + }); + }); + }); + + describe('Footer', () => { + describe('Footer item', () => { + /** + * GIVEN the initial active item is a footer item + * WHEN the navigation renders + * THEN this footer item is in an active state + */ + it('should have active state if the initial active item is the footer item', () => { + render( + {}} + /> + ); + + const settingsLink = screen.getByRole('link', { + name: 'Settings', + }); + + expect(settingsLink).toHaveAttribute('aria-current', 'page'); + }); + + /** + * GIVEN the initial active item is a footer submenu item + * WHEN the navigation renders + * THEN its parent footer item is in an active state + * AND a side panel with the submenu opens + * AND the footer submenu item is in an active state + */ + it('should have active state if the initial active item is the footer submenu item', async () => { + render( + {}} + /> + ); + + const settingsLink = screen.getByRole('link', { + name: 'Settings', + }); + + // Parent should be highlighted but not current (child is current) + expect(settingsLink).toHaveAttribute('data-highlighted', 'true'); + expect(settingsLink).not.toHaveAttribute('aria-current', 'page'); + + const sidePanel = screen.getByRole('region', { + name: 'Side panel', + }); + + expect(sidePanel).toBeInTheDocument(); + + const advancedSettings = within(sidePanel).getByRole('link', { + name: 'Advanced settings', + }); + + expect(advancedSettings).toHaveAttribute('aria-current', 'page'); + expect(advancedSettings).toHaveAttribute('data-highlighted', 'true'); + }); + + /** + * GIVEN a footer item with a submenu is not active + * WHEN I click on it + * THEN the footer item becomes active + * AND a side panel with its submenu opens + * AND the first item in the submenu is in an active state by default + */ + it('(with submenu) should have active state after clicking on it, and a side panel should open', async () => { + const TestComponent = () => { + const [activeItemId, setActiveItemId] = useState(); + return ( + + ({ + ...item, + onClick: () => { + // If item has submenus, set the first child item as active + if ( + item.sections && + item.sections.length > 0 && + item.sections[0].items.length > 0 + ) { + setActiveItemId(item.sections[0].items[0].id); + } else { + setActiveItemId(item.id); + } + }, + })), + }} + logo={basicMock.logo} + setWidth={() => {}} + /> + + ); + }; + + render(); + + const settingsLink = screen.getByRole('link', { + name: 'Settings', + }); + + await userEvent.click(settingsLink); + + // Parent should be both current and highlighted (since parent and first child have same ID) + expect(settingsLink).toHaveAttribute('aria-current', 'page'); + expect(settingsLink).toHaveAttribute('data-highlighted', 'true'); + + const sidePanel = screen.getByRole('region', { + name: 'Side panel', + }); + + expect(sidePanel).toBeInTheDocument(); + + const integrationsLink = within(sidePanel).getByRole('link', { + name: 'Integrations', + }); + + // First submenu item should be current and highlighted (same ID as parent = same page) + expect(integrationsLink).toHaveAttribute('aria-current', 'page'); + expect(integrationsLink).toHaveAttribute('data-highlighted', 'true'); + }); + + /** + * GIVEN a footer item with a submenu is active + * WHEN I click on a different item in its submenu + * THEN the parent footer item remains in an active state + * AND the clicked submenu item becomes active + */ + it('(with submenu) should still have active state after clicking on another submenu item', async () => { + const TestComponent = () => { + const [activeItemId, setActiveItemId] = useState(advancedSettingsItemId); + + return ( + + setActiveItemId(item.id)} + setWidth={() => {}} + /> + + ); + }; + + render(); + + const settingsLink = screen.getByRole('link', { + name: 'Settings', + }); + + const sidePanel = screen.getByRole('region', { + name: 'Side panel', + }); + + let integrationsLink = within(sidePanel).getByRole('link', { + name: 'Integrations', + }); + + await userEvent.click(integrationsLink); + + // Parent should be highlighted and current (because it represents the same page) + expect(settingsLink).toHaveAttribute('data-highlighted', 'true'); + expect(settingsLink).toHaveAttribute('aria-current', 'page'); + + // "Integrations" becomes stale and leads to incorrect assertions, we need to re-query the link + integrationsLink = within(sidePanel).getByRole('link', { + name: 'Integrations', + }); + + // Clicked submenu item should be current and highlighted (same ID as parent = same page) + expect(integrationsLink).toHaveAttribute('aria-current', 'page'); + expect(integrationsLink).toHaveAttribute('data-highlighted', 'true'); + }); + + /** + * GIVEN there are footer items + * WHEN I hover over a footer item + * THEN a tooltip appears with the item label + * AND when I click on the trigger + * AND then I hover out + * THEN the tooltip disappears + */ + it('should display a tooltip with the item label on hover, and hide on hover out', async () => { + render( + {}} + /> + ); + + const developerToolsLink = screen.getByRole('link', { + name: 'Developer tools', + }); + + await userEvent.hover(developerToolsLink); + + const tooltip = await screen.findByRole('tooltip', { + name: 'Developer tools', + }); + + expect(tooltip).toBeInTheDocument(); + + await userEvent.click(developerToolsLink); + await userEvent.unhover(developerToolsLink); + + // Even after clicking on the trigger which makes the `EuiToolTip` persistent by default + // See: https://eui.elastic.co/docs/components/display/tooltip/ + await waitFor(() => { + expect(tooltip).not.toBeInTheDocument(); + }); + }); + }); + + describe('Footer item limit', () => { + /** + * GIVEN fewer than 5 footer items exist + * WHEN the navigation renders + * THEN all existing footer items are displayed + */ + it('should display all existing footer items if fewer than 5 exist', () => { + // Renders 3 footer items + render( + {}} + /> + ); + + const footer = screen.getByRole('contentinfo', { name: 'Side navigation footer' }); + const footerItems = within(footer).getAllByRole('link'); + + expect(footerItems.length).toBe(3); + }); + + /** + * GIVEN exactly 5 footer items exist + * WHEN the navigation renders + * THEN all 5 items are displayed + */ + it('should display all 5 footer items if exactly 5 exist', () => { + // Renders 5 footer items + render( + {}} + /> + ); + + const footer = screen.getByRole('contentinfo', { name: 'Side navigation footer' }); + const footerItems = within(footer).getAllByRole('link'); + + expect(footerItems.length).toBe(5); + }); + + /** + * GIVEN 6 footer items exist + * WHEN the navigation renders + * THEN only 5 footer items are displayed + */ + it('should display only 5 footer items if 6 or more exist', () => { + const navItemsWithSixFooterItems = { + ...basicMock.navItems, + footerItems: [ + ...basicMock.navItems.footerItems, + { + id: 'extra_footer_item', + label: 'Extra footer', + href: '/extra-footer', + iconType: 'extra', + }, + ], + }; + + render( + {}} + /> + ); + + const footer = screen.getByRole('contentinfo', { name: 'Side navigation footer' }); + const footerItems = within(footer).getAllByRole('link'); + + expect(footerItems.length).toBe(5); + }); + }); + + describe('Beta badge', () => { + /** + * GIVEN a footer item is in beta + * WHEN I hover over that item + * THEN a tooltip shows up with the item label + * AND a beta badge with beta icon + */ + it('should render a tooltip with the item label and a beta badge with beta icon', async () => { + render( + + {}} + setWidth={() => {}} + /> + + ); + + const footer = await screen.findByRole('contentinfo', { name: 'Side navigation footer' }); + + const gettingStartedLink = within(footer).getByRole('link', { + name: 'Getting started', + }); + + await userEvent.hover(gettingStartedLink); + + const tooltip = await screen.findByRole('tooltip'); + + expect(tooltip).toHaveTextContent('Getting started'); + + const betaIcon = tooltip.querySelector('[data-euiicon-type="beta"]'); + + expect(betaIcon).toBeInTheDocument(); + }); + }); + + describe('Tech preview badge', () => { + /** + * GIVEN a footer item is in tech preview + * WHEN I hover over that item + * THEN a tooltip shows up with the item label + * AND a beta badge with flask icon + */ + it('should render a tooltip with the item label and a beta badge with flask icon', async () => { + render( + {}} + /> + ); + + const gettingStartedLink = screen.getByRole('link', { + name: 'Developer tools', + }); + + await userEvent.hover(gettingStartedLink); + + const tooltip = await screen.findByRole('tooltip'); + + expect(tooltip).toHaveTextContent('Developer tools'); + + const flaskIcon = tooltip.querySelector('[data-euiicon-type="flask"]'); + + expect(flaskIcon).toBeInTheDocument(); + }); + }); + }); + + describe('Secondary menu', () => { + describe('Beta badge', () => { + /** + * GIVEN a primary menu item is in beta + * WHEN the navigation renders the secondary menu header + * THEN a beta badge with beta icon appears next to the menu title + */ + it('should render a beta badge with beta icon next to the menu title', async () => { + render( + {}} + /> + ); + + const sidePanel = screen.getByRole('region', { + name: 'Side panel', + }); + const panelHeader = within(sidePanel).getByRole('heading', { + name: 'Apps', + }); + const betaBadge = await within(panelHeader.parentElement!).findByTitle('Beta'); + + expect(betaBadge).toBeInTheDocument(); + }); + + /** + * GIVEN a menu item is in beta + * WHEN the navigation renders the secondary menu items + * THEN a beta badge with beta icon appears next to the menu item label + */ + it('should render a beta badge with beta icon next to the menu item label', async () => { + render( + {}} + /> + ); + + const sidePanel = screen.getByRole('region', { + name: 'Side panel', + }); + const tlsCertificatesLink = within(sidePanel).getByRole('link', { + name: 'TLS certificates Beta', + }); + const betaBadge = await within(tlsCertificatesLink).findByTitle('Beta'); + + expect(betaBadge).toBeInTheDocument(); + }); + }); + + describe('Tech preview badge', () => { + /** + * GIVEN a primary menu item is in tech preview + * WHEN the navigation renders the secondary menu header + * THEN a beta badge with flask icon appears next to the menu title + */ + it('should render a beta badge with flask icon next to the menu title', async () => { + render( + {}} + /> + ); + + const sidePanel = screen.getByRole('region', { + name: 'Side panel', + }); + const panelHeader = within(sidePanel).getByRole('heading', { + name: 'Machine learning', + }); + const techPreviewBadge = await within(panelHeader.parentElement!).findByTitle( + 'Tech preview' + ); + + expect(techPreviewBadge).toBeInTheDocument(); + }); + + /** + * GIVEN a menu item is in tech preview + * WHEN the navigation renders the secondary menu items + * THEN a beta badge with flask icon appears next to the menu item label + */ + it('should render a beta badge with flask icon next to the menu item label', async () => { + render( + {}} + /> + ); + + const sidePanel = screen.getByRole('region', { + name: 'Side panel', + }); + const hostsLink = within(sidePanel).getByRole('link', { + name: 'Hosts Tech preview', + }); + const techPreviewBadge = await within(hostsLink).findByTitle('Tech preview'); + + expect(techPreviewBadge).toBeInTheDocument(); + }); + }); + + describe('External links', () => { + /** + * GIVEN a menu item is an external link + * WHEN the navigation renders the menu item + * THEN a popout icon is displayed next to the link text + */ + it('should render a popout icon next to the link text', async () => { + render( + {}} + /> + ); + + const sidePanel = screen.getByRole('region', { + name: 'Side panel', + }); + const tracesLink = within(sidePanel).getByRole('link', { + name: /traces/i, + }); + const externalIcon = tracesLink.querySelector('[data-euiicon-type="popout"]'); + + expect(externalIcon).toBeInTheDocument(); + }); + + /** + * GIVEN a menu item is an external link + * WHEN I click on the link + * THEN it is opened in a new tab + */ + it('should open the link in a new tab', () => { + render( + {}} + /> + ); + + const sidePanel = screen.getByRole('region', { + name: 'Side panel', + }); + const tracesLink = within(sidePanel).getByRole('link', { + name: /traces/i, + }); + + expect(tracesLink).toHaveAttribute('target', '_blank'); + }); + }); + }); + + describe('Keyboard navigation', () => { + /** + * GIVEN focus is on any menu item within a menu (primary, footer, or submenu) + * WHEN I press the Arrow Down or Arrow Up key + * THEN focus moves to the next or previous item in that menu, respectively + */ + it('should move focus to the next or previous item in the menu when pressing Arrow Down or Arrow Up', async () => { + render( + {}} + /> + ); + + const primaryMenu = await screen.findByRole('navigation', { name: 'Main navigation' }); + const dashboardsLink = await screen.findByRole('link', { name: 'Dashboards' }); + const discoverLink = await screen.findByRole('link', { name: 'Discover' }); + + dashboardsLink.focus(); + + expect(dashboardsLink).toHaveFocus(); + + fireEvent.keyDown(primaryMenu, { key: 'ArrowDown', code: 'ArrowDown' }); + + expect(discoverLink).toHaveFocus(); + + fireEvent.keyDown(primaryMenu, { key: 'ArrowUp', code: 'ArrowUp' }); + + expect(dashboardsLink).toHaveFocus(); + }); + + /** + * GIVEN focus is on any menu item within a menu (primary, footer, or submenu) + * AND I am navigating with a keyboard + * WHEN I repeatedly press the Tab key + * THEN focus moves sequentially through the primary menu, the footer menu, and the side panel (if open), before moving to the main page content + * + * NOTE: With roving index, Tab only hits one focusable item per menu section + */ + it('should move focus through all navigable menus when pressing Tab', async () => { + render( + {}} + /> + ); + + const solutionLogo = screen.getByRole('link', { name: 'Observability homepage' }); + const discoverLink = screen.getByRole('link', { name: 'Discover' }); + const gettingStartedLink = screen.getByRole('link', { name: 'Getting started' }); + const sidePanel = screen.getByRole('region', { name: 'Side panel' }); + const serviceInventoryLink = within(sidePanel).getByRole('link', { + name: 'Service inventory', + }); + + solutionLogo.focus(); + + expect(solutionLogo).toHaveFocus(); + + // Tab to primary menu - should land on first focusable item (Dashboards) + await userEvent.tab(); + + expect(discoverLink).toHaveFocus(); + + // Tab to footer menu - should land on first focusable item (Getting started) + await userEvent.tab(); + + expect(gettingStartedLink).toHaveFocus(); + + // Tab to side panel - should land on first focusable item (Service inventory) + await userEvent.tab(); + + expect(serviceInventoryLink).toHaveFocus(); + }); + + /** + * GIVEN I am navigating with a keyboard + * AND focus is in the primary menu, the footer menu, the popover or the side panel + * WHEN I press the Home or End key + * THEN focus moves to the first or last item in that menu, respectively + */ + + it('should move focus to the first or last item in the menu when pressing Home or End', async () => { + render( + {}} + /> + ); + + const primaryMenu = screen.getByRole('navigation', { name: 'Main navigation' }); + const solutionLogo = screen.getByRole('link', { name: 'Solution homepage' }); + const dashboardsLink = screen.getByRole('link', { name: 'Dashboards' }); + const appsLink = screen.getByRole('link', { name: 'Apps' }); + + await userEvent.tab(); + + expect(solutionLogo).toHaveFocus(); + + await userEvent.tab(); + + expect(dashboardsLink).toHaveFocus(); + + fireEvent.keyDown(primaryMenu, { key: 'End', code: 'End' }); + + expect(appsLink).toHaveFocus(); + + fireEvent.keyDown(primaryMenu, { key: 'Home', code: 'Home' }); + + expect(dashboardsLink).toHaveFocus(); + }); + + /** + * GIVEN focus is inside an open popover + * WHEN I repeatedly press the Tab or Shift + Tab key + * THEN focus cycles only through the interactive elements within that container and does not leave it + */ + it('should cycle focus through interactive elements in the popover when pressing Tab or Shift + Tab', async () => { + render( + + {}} + /> + + ); + + const moreButton = screen.getByRole('button', { name: 'More' }); + + moreButton.focus(); + + await userEvent.click(moreButton); + + const popover = screen.getByRole('dialog', { name: 'More' }); + const popoverItems = within(popover).getAllByRole('link'); + + const firstItem = popoverItems[0]; + const lastItem = popoverItems[popoverItems.length - 1]; + + firstItem.focus(); + + await userEvent.keyboard('{end}'); + + expect(lastItem).toHaveFocus(); + + // Test focus trap by pressing tab from last item should wrap to first + fireEvent.keyDown(popover, { key: 'Tab', code: 'Tab' }); + + // Should wrap around to the first item + expect(firstItem).toHaveFocus(); + }); + + /** + * GIVEN the focus is inside the popover + * WHEN I press the Escape key + * THEN the popover closes + * AND focus returns to the menu item that originally opened it + */ + + it('should return focus to the menu item that opened the popover when it is closed', async () => { + render( + + {}} + /> + + ); + + const moreButton = screen.getByRole('button', { name: 'More' }); + + await userEvent.click(moreButton); + + const popover = screen.getByRole('dialog', { name: 'More' }); + + expect(popover).toBeInTheDocument(); + + await userEvent.keyboard('{escape}'); + + await waitFor(() => { + expect(popover).not.toBeInTheDocument(); + }); + + expect(moreButton).toHaveFocus(); + }); + }); +}); diff --git a/src/core/packages/chrome/navigation/src/__tests__/collapsed_mode.test.tsx b/src/core/packages/chrome/navigation/src/__tests__/collapsed_mode.test.tsx new file mode 100644 index 0000000000000..ee0a23bfe3326 --- /dev/null +++ b/src/core/packages/chrome/navigation/src/__tests__/collapsed_mode.test.tsx @@ -0,0 +1,675 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the "Elastic License + * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side + * Public License v 1"; you may not use this file except in compliance with, at + * your election, the "Elastic License 2.0", the "GNU Affero General Public + * License v3.0 only", or the "Server Side Public License, v 1". + */ + +import React from 'react'; +import { I18nProvider } from '@kbn/i18n-react'; +import { render, screen, waitFor, within } from '@testing-library/react'; +import { userEvent } from '@testing-library/user-event'; + +import { COLLAPSED_MENU_GAP, COLLAPSED_MENU_ITEM_HEIGHT, MAX_MENU_ITEMS } from '../constants'; +import { Navigation } from '../components/navigation'; +import { basicMock } from '../mocks/basic_navigation'; +import { createBoundingClientRectMock } from './create_bounding_client_rect_mock'; +import { observabilityMock } from '../mocks/observability'; +import { securityMock } from '../mocks/security'; + +// Security mock reusable IDs - Machine Learning > Anomaly explorer (item that's in "More" menu) +const mlAnomalyExplorerItemId = securityMock.navItems.primaryItems[11].sections?.[1].items[0].id; + +describe('Collapsed mode', () => { + const originalGetBoundingClientRect = Element.prototype.getBoundingClientRect; + + beforeAll(() => { + Element.prototype.getBoundingClientRect = createBoundingClientRectMock( + (COLLAPSED_MENU_ITEM_HEIGHT + COLLAPSED_MENU_GAP) * (MAX_MENU_ITEMS - 1) + + (COLLAPSED_MENU_ITEM_HEIGHT + COLLAPSED_MENU_GAP) + ); + }); + + afterAll(() => { + Element.prototype.getBoundingClientRect = originalGetBoundingClientRect; + }); + + it('should render the side navigation', () => { + const { container } = render( + {}} + /> + ); + + expect(container).toMatchSnapshot(); + }); + + describe('Solution logo', () => { + /** + * GIVEN the side navigation is in collapsed mode + * WHEN the navigation renders the solution logo + * THEN I should not see the solution label + */ + it('should NOT display the solution label next to the logo', () => { + render( + {}} + /> + ); + + const solutionLogo = screen.getByRole('link', { + name: 'Solution homepage', + }); + + // The label is wrapped with `` in collapsed mode + // See: https://eui.elastic.co/docs/utilities/accessibility/#screen-reader-only + expect(solutionLogo.children[1].className).toContain('euiScreenReaderOnly'); + }); + + /** + * GIVEN the side navigation is in collapsed mode + * WHEN I hover over the solution logo + * THEN a tooltip appears with the item label + * AND when I click on the trigger + * AND then I hover out + * THEN the tooltip disappears + */ + it('should display a tooltip with the solution label on hover, and hide on hover out', async () => { + render( + {}} + /> + ); + + const solutionLogo = screen.getByRole('link', { + name: 'Solution homepage', + }); + + await userEvent.hover(solutionLogo); + + const tooltip = await screen.findByRole('tooltip', { + name: 'Solution', + }); + + expect(tooltip).toBeInTheDocument(); + + await userEvent.click(solutionLogo); + await userEvent.unhover(solutionLogo); + + // Even after clicking on the trigger which makes the `EuiToolTip` persistent by default + // See: https://eui.elastic.co/docs/components/display/tooltip/ + await waitFor(() => { + expect(tooltip).not.toBeInTheDocument(); + }); + }); + }); + + describe('Primary menu', () => { + describe('Primary menu item', () => { + /** + * GIVEN the side navigation is in collapsed mode + * AND a primary menu item has a submenu (has children) + * WHEN I hover over it + * THEN I should see a popover with the submenu + */ + it('(with submenu) should show a popover with the submenu on hover', async () => { + render( + {}} + /> + ); + + const appsLink = screen.getByRole('link', { + name: 'Apps', + }); + + await userEvent.hover(appsLink); + + const popover = await screen.findByRole('dialog', { + name: 'Apps', + }); + + expect(popover).toBeInTheDocument(); + }); + + /** + * GIVEN the side navigation is in collapsed mode + * AND a primary menu item with a submenu receives keyboard focus + * THEN I should see a popover with the submenu + */ + it('(with submenu) should show a popover when item with submenu receives keyboard focus', async () => { + render( + {}} + /> + ); + + const appsLink = screen.getByRole('link', { + name: 'Apps', + }); + + appsLink.focus(); + + const popover = await screen.findByRole('dialog', { + name: 'Apps', + }); + + expect(popover).toBeInTheDocument(); + }); + + /** + * GIVEN the side navigation is in collapsed mode + * AND a primary menu item has a submenu (has children) + * WHEN I click on it + * - THEN I should be redirected to its href + * AND I should not see a side panel + */ + it('(with submenu) should redirect and NOT open side panel when clicking item', async () => { + render( + {}} + /> + ); + + const appsLink = screen.getByRole('link', { + name: 'Apps', + }); + const expectedHref = basicMock.navItems.primaryItems[2].href; // Apps + + await userEvent.click(appsLink); + + expect(appsLink).toHaveAttribute('href', expectedHref); + + const sidePanel = screen.queryByRole('region', { + name: 'Side panel', + }); + + expect(sidePanel).not.toBeInTheDocument(); + }); + + /** + * GIVEN the side navigation is in collapsed mode + * AND a primary menu item with a submenu has focus + * WHEN I press the Enter key + * THEN focus moves to the first item inside the displayed popover + */ + it('(with submenu) should move focus to first popover item on Enter', async () => { + render( + {}} + /> + ); + + const appsLink = screen.getByRole('link', { + name: 'Apps', + }); + + appsLink.focus(); + + await userEvent.keyboard('{enter}'); + + const popover = await screen.findByRole('dialog', { + name: 'Apps', + }); + + const overviewLink = within(popover).getByRole('link', { + name: 'Overview', + }); + + expect(overviewLink).toHaveFocus(); + }); + + /** + * GIVEN the side navigation is in collapsed mode + * AND a primary menu item doesn’t have a submenu + * WHEN I hover over it + * THEN I should not see a popover + */ + it('(without submenu) should NOT show a popover on hover', async () => { + render( + {}} + /> + ); + + const dashboardsLink = screen.getByRole('link', { + name: 'Dashboards', + }); + + await userEvent.hover(dashboardsLink); + + const popover = screen.queryByRole('dialog'); + + expect(popover).not.toBeInTheDocument(); + }); + + /** + * GIVEN the side navigation is in collapsed mode + * AND a primary menu item doesn’t have a submenu + * WHEN I click on it + * - THEN I should be redirected to its href + * AND I should not see a side panel + */ + it('(without submenu) should redirect without side panel when clicking item without submenu', async () => { + render( + {}} + /> + ); + + const dashboardsLink = screen.getByRole('link', { + name: 'Dashboards', + }); + const expectedHref = basicMock.navItems.primaryItems[0].href; + + await userEvent.click(dashboardsLink); + + expect(dashboardsLink).toHaveAttribute('href', expectedHref); + + const sidePanel = screen.queryByRole('region', { + name: 'Side panel', + }); + + expect(sidePanel).not.toBeInTheDocument(); + }); + + /** + * GIVEN the side navigation is in collapsed mode + * AND a primary menu item without a submenu has focus + * WHEN I press the Enter key + * - THEN I should be redirected to its href + */ + it('(without submenu) should redirect on Enter when focused item has no submenu', async () => { + render( + {}} + /> + ); + + const dashboardsLink = screen.getByRole('link', { + name: 'Dashboards', + }); + const expectedHref = basicMock.navItems.primaryItems[0].href; + + dashboardsLink.focus(); + + await userEvent.keyboard('{enter}'); + + expect(dashboardsLink).toHaveAttribute('href', expectedHref); + }); + + /** + * GIVEN the side navigation is in collapsed mode + * WHEN I hover over a primary menu item + * THEN a tooltip appears with the item label + * AND when I click on the trigger + * AND then I hover out + * THEN the tooltip disappears + */ + it('should display a tooltip with the item label on hover, and hide on hover out', async () => { + render( + {}} + /> + ); + + const dashboardsLink = screen.getByRole('link', { + name: 'Dashboards', + }); + + await userEvent.hover(dashboardsLink); + + const tooltip = await screen.findByRole('tooltip', { + name: 'Dashboards', + }); + + expect(tooltip).toBeInTheDocument(); + + await userEvent.click(dashboardsLink); + await userEvent.unhover(dashboardsLink); + + // Even after clicking on the trigger which makes the `EuiToolTip` persistent by default + // See: https://eui.elastic.co/docs/components/display/tooltip/ + await waitFor(() => { + expect(tooltip).not.toBeInTheDocument(); + }); + }); + + /** + * GIVEN the side navigation is in collapsed mode + * AND a primary menu item is in beta + * WHEN I hover over that item + * THEN a tooltip shows up with the item label + * AND a beta badge with beta icon + */ + it('should show tooltip with label and beta badge on hover', async () => { + render( + {}} + /> + ); + + const dashboardsLink = screen.getByRole('link', { + name: 'Dashboards', + }); + + await userEvent.hover(dashboardsLink); + + const tooltip = await screen.findByRole('tooltip'); + const betaIcon = tooltip.querySelector('[data-euiicon-type="beta"]'); + + expect(tooltip).toBeInTheDocument(); + expect(tooltip).toHaveTextContent('Dashboards'); + expect(betaIcon).toBeInTheDocument(); + }); + + /** + * GIVEN the side navigation is in collapsed mode + * AND a primary menu item is in tech preview + * WHEN I hover over that item + * THEN a tooltip shows up with the item label + * AND a beta badge with flask icon + */ + it('should show tooltip with label and flask badge on hover', async () => { + render( + {}} + /> + ); + + const casesLink = screen.getByRole('link', { + name: 'Cases', + }); + + await userEvent.hover(casesLink); + + const tooltip = await screen.findByRole('tooltip'); + const flaskIcon = tooltip.querySelector('[data-euiicon-type="flask"]'); + + expect(tooltip).toBeInTheDocument(); + expect(tooltip).toHaveTextContent('Cases'); + expect(flaskIcon).toBeInTheDocument(); + }); + }); + + describe('More menu', () => { + /** + * GIVEN not all primary menu items fit the menu height + * AND the navigation renders in collapsed mode + * WHEN the navigation renders + * THEN I should see a "More" primary menu item + */ + it('should render the "More" primary menu item when items overflow', () => { + // Renders 10 primary menu items + "More" item + render( + + {}} + /> + + ); + + const moreButton = screen.getByRole('button', { + name: 'More', + }); + + expect(moreButton).toBeInTheDocument(); + }); + + /** + * GIVEN not all primary menu items fit the menu height + * AND the navigation renders in collapsed mode + * WHEN I hover over the "More" primary menu item + * THEN I should see a popover with secondary menu + */ + it('should show secondary menu popover on hover over "More"', async () => { + render( + + {}} + /> + + ); + + const moreButton = screen.getByRole('button', { + name: 'More', + }); + + await userEvent.hover(moreButton); + + const popover = await screen.findByRole('dialog', { + name: 'More', + }); + + expect(popover).toBeInTheDocument(); + }); + + /** + * GIVEN not all primary menu items fit the menu height + * AND the navigation renders in collapsed mode + * WHEN I hover over the "More" primary menu item + * AND I click on the arrow next to the item that has a submenu + * THEN the nested panel shows with the submenu + * AND when I click on a submenu item + * THEN the popover should close + * - AND I should be redirected to that item’s href + * AND I shouldn’t see a side panel + */ + it('should navigate through nested panel and redirect on clicking a submenu item', async () => { + const TestComponent = () => { + const [activeItemId, setActiveItemId] = React.useState(); + + return ( + + { + if ('id' in item) { + setActiveItemId(item.id); + } + }} + setWidth={() => {}} + /> + + ); + }; + + render(); + + const moreButton = screen.getByRole('button', { + name: 'More', + }); + + await userEvent.hover(moreButton); + + const popover = await screen.findByRole('dialog', { + name: 'More', + }); + + const mlLink = within(popover).getByRole('link', { + name: 'Machine learning', + }); + + await userEvent.click(mlLink); + + expect(popover).toBeInTheDocument(); + + const mlAnomalyExplorerLink = await within(popover).findByRole('link', { + name: 'Anomaly explorer', + }); + + expect(mlAnomalyExplorerLink).toBeInTheDocument(); + + await userEvent.click(mlAnomalyExplorerLink); + + await waitFor(() => { + expect(popover).not.toBeInTheDocument(); + }); + + const sidePanel = screen.queryByRole('region', { + name: 'Side panel', + }); + + expect(sidePanel).not.toBeInTheDocument(); + }); + + /** + * GIVEN not all primary menu items fit the menu height + * AND the navigation renders in collapsed mode + * WHEN I hover over the "More" primary menu item + * AND I click on the menu item that doesn’t have a submenu + * THEN the popover should close + * - AND I should be redirected to that item’s href + * AND I shouldn’t see a side panel + */ + it('should close popover, redirect, and NOT open side panel after clicking on an item without submenu from "More"', async () => { + render( + + {}} + /> + + ); + + const moreButton = screen.getByRole('button', { + name: 'More', + }); + + await userEvent.hover(moreButton); + + const popover = await screen.findByRole('dialog', { + name: 'More', + }); + + const coverageLink = within(popover).getByRole('link', { + name: 'Coverage', + }); + + await userEvent.click(coverageLink); + + await waitFor(() => { + expect(popover).not.toBeInTheDocument(); + }); + + const sidePanel = screen.queryByRole('region', { + name: 'Side panel', + }); + + expect(sidePanel).not.toBeInTheDocument(); + }); + + /** + * GIVEN not all primary menu items fit the menu height + * AND the navigation renders in collapsed mode + * AND the initial active item is a submenu item of an item in the "More" menu + * WHEN the navigation renders in collapsed mode + * THEN the "More" primary menu item itself is in an active state + * AND its parent primary menu item is active within the "More" menu popover + * AND there is no side panel + * AND the submenu item is active in its nested panel within the popover + */ + it('should have active state and NOT open side panel when initial active submenu item is under "More"', async () => { + render( + + {}} + /> + + ); + + const moreButton = screen.getByRole('button', { + name: 'More', + }); + + // More button should be highlighted when containing active item + expect(moreButton).toHaveAttribute('data-highlighted', 'true'); + + await userEvent.hover(moreButton); + + const popover = await screen.findByRole('dialog', { + name: 'More', + }); + + const mlLink = within(popover).getByRole('link', { + name: 'Machine learning', + }); + + // Parent should be highlighted when child is active + expect(mlLink).toHaveAttribute('data-highlighted', 'true'); + + await userEvent.click(mlLink); + + const mlAnomalyExplorerLink = within(popover).getByRole('link', { + name: 'Anomaly explorer', + }); + + // Actual active submenu item should be both current and highlighted + expect(mlAnomalyExplorerLink).toHaveAttribute('aria-current', 'page'); + expect(mlAnomalyExplorerLink).toHaveAttribute('data-highlighted', 'true'); + + const sidePanel = screen.queryByRole('region', { + name: 'Side panel', + }); + + expect(sidePanel).not.toBeInTheDocument(); + }); + }); + }); +}); diff --git a/src/core/packages/chrome/navigation/src/__tests__/create_bounding_client_rect_mock.ts b/src/core/packages/chrome/navigation/src/__tests__/create_bounding_client_rect_mock.ts new file mode 100644 index 0000000000000..be79fb5d07575 --- /dev/null +++ b/src/core/packages/chrome/navigation/src/__tests__/create_bounding_client_rect_mock.ts @@ -0,0 +1,21 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the "Elastic License + * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side + * Public License v 1"; you may not use this file except in compliance with, at + * your election, the "Elastic License 2.0", the "GNU Affero General Public + * License v3.0 only", or the "Server Side Public License, v 1". + */ + +export const createBoundingClientRectMock = (height: number) => + jest.fn(() => ({ + width: 100, + height, + top: 0, + left: 0, + bottom: 0, + right: 0, + x: 0, + y: 0, + toJSON: () => '', + })); diff --git a/src/core/packages/chrome/navigation/src/__tests__/expanded_mode.test.tsx b/src/core/packages/chrome/navigation/src/__tests__/expanded_mode.test.tsx new file mode 100644 index 0000000000000..7cb934d17c16f --- /dev/null +++ b/src/core/packages/chrome/navigation/src/__tests__/expanded_mode.test.tsx @@ -0,0 +1,713 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the "Elastic License + * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side + * Public License v 1"; you may not use this file except in compliance with, at + * your election, the "Elastic License 2.0", the "GNU Affero General Public + * License v3.0 only", or the "Server Side Public License, v 1". + */ + +import React from 'react'; +import { I18nProvider } from '@kbn/i18n-react'; +import { render, screen, waitFor, within } from '@testing-library/react'; +import { userEvent } from '@testing-library/user-event'; + +import { EXPANDED_MENU_GAP, EXPANDED_MENU_ITEM_HEIGHT, MAX_MENU_ITEMS } from '../constants'; +import { Navigation } from '../components/navigation'; +import { basicMock } from '../mocks/basic_navigation'; +import { createBoundingClientRectMock } from './create_bounding_client_rect_mock'; +import { observabilityMock } from '../mocks/observability'; +import { resizeWindow } from './resize_window'; +import { securityMock } from '../mocks/security'; + +// Basic mock reusable IDs +const appsItemId = basicMock.navItems.primaryItems[2].id; + +// Security mock reusable IDs +const resultExplorerItemId = securityMock.navItems.primaryItems[11].sections?.[2].items[0].id; + +describe('Expanded mode', () => { + let restoreWindowSize: () => void; + + const originalGetBoundingClientRect = Element.prototype.getBoundingClientRect; + + beforeAll(() => { + Element.prototype.getBoundingClientRect = createBoundingClientRectMock( + (EXPANDED_MENU_ITEM_HEIGHT + EXPANDED_MENU_GAP) * (MAX_MENU_ITEMS - 1) + + (EXPANDED_MENU_ITEM_HEIGHT + EXPANDED_MENU_GAP) + ); + }); + + beforeEach(() => { + restoreWindowSize = resizeWindow(1024, 768); + }); + + afterAll(() => { + if (restoreWindowSize) restoreWindowSize(); + Element.prototype.getBoundingClientRect = originalGetBoundingClientRect; + }); + + it('should render the side navigation', () => { + const { container } = render( + {}} + /> + ); + + expect(container).toMatchSnapshot(); + }); + + describe('Solution logo', () => { + /** + * GIVEN the side navigation is in expanded mode + * WHEN the navigation renders the solution logo + * THEN I should see the solution label + */ + it('should display the solution label next to the logo', () => { + render( + {}} + /> + ); + + const solutionLogo = screen.getByRole('link', { + name: 'Solution homepage', + }); + + // The label is NOT wrapped with `` in expanded mode + // See: https://eui.elastic.co/docs/utilities/accessibility/#screen-reader-only + expect(solutionLogo.children[1].className).not.toContain('euiScreenReaderOnly'); + }); + }); + + describe('Primary menu', () => { + describe('Primary menu item', () => { + /** + * GIVEN the side navigation is in expanded mode + * AND a primary menu item has a submenu (has children) + * WHEN I hover over it + * THEN I should see a popover with the submenu + */ + it('(with submenu) should show a popover with the submenu on hover (with submenu)', async () => { + render( + {}} + /> + ); + + const appsLink = screen.getByRole('link', { + name: 'Apps', + }); + + await userEvent.hover(appsLink); + + const popover = await screen.findByRole('dialog', { + name: 'Apps', + }); + + expect(popover).toBeInTheDocument(); + }); + + /** + * GIVEN the side navigation is in expanded mode + * AND a primary menu item with a submenu is in an active state + * WHEN I hover over it + * THEN a popover with the submenu should not be displayed + */ + it('(with submenu) should NOT show a popover if the item with submenu is already active', async () => { + render( + {}} + /> + ); + + const appsLink = screen.getByRole('link', { + name: 'Apps', + }); + + expect(appsLink).toHaveAttribute('aria-current', 'page'); + expect(appsLink).toHaveAttribute('data-highlighted', 'true'); + + await userEvent.hover(appsLink); + + const popover = screen.queryByRole('dialog', { + name: 'Apps', + }); + + expect(popover).not.toBeInTheDocument(); + }); + + /** + * GIVEN the side navigation is in expanded mode + * AND a primary menu item has a submenu (has children) + * WHEN I click on it + * THEN I should be redirected to its href + * AND a side panel with the submenu should show + */ + it('(with submenu) should redirect and open side panel when clicking item with submenu', async () => { + const TestComponent = () => { + const [activeItemId, setActiveItemId] = React.useState(); + + return ( + setActiveItemId(item.id)} + setWidth={() => {}} + /> + ); + }; + + render(); + + const appsLink = screen.getByRole('link', { + name: 'Apps', + }); + const expectedHref = basicMock.navItems.primaryItems[2].href; + + expect(appsLink).toHaveAttribute('href', expectedHref); + + await userEvent.click(appsLink); + + const sidePanel = await screen.findByRole('region', { + name: 'Side panel', + }); + + expect(sidePanel).toBeInTheDocument(); + }); + + /** + * GIVEN the side navigation is in expanded mode + * AND a primary menu item with a submenu has focus + * WHEN I press the Enter key + * THEN focus should move to the popover + */ + it('(with submenu) should move focus to popover on Enter when focused item has submenu', async () => { + render( + {}} + /> + ); + + const appsLink = screen.getByRole('link', { + name: 'Apps', + }); + + appsLink.focus(); + + await userEvent.keyboard('{enter}'); + + const popover = await screen.findByRole('dialog', { + name: 'Apps', + }); + + const overviewLink = within(popover).getByRole('link', { + name: 'Overview', + }); + + expect(overviewLink).toHaveFocus(); + }); + + /** + * GIVEN the side navigation is in expanded mode + * AND a primary menu item doesn’t have a submenu + * WHEN I hover over it + * THEN I should not see a popover + */ + it('(without submenu) should NOT show a popover on hover (without submenu)', async () => { + render( + {}} + /> + ); + + const dashboardsLink = screen.getByRole('link', { + name: 'Dashboards', + }); + + await userEvent.hover(dashboardsLink); + + const popover = screen.queryByRole('dialog'); + + expect(popover).not.toBeInTheDocument(); + }); + + /** + * GIVEN the side navigation is in expanded mode + * AND a primary menu item doesn’t have a submenu + * WHEN I click on it + * THEN I should be redirected to its href + * AND I should not see a side panel + */ + it('(without submenu) should redirect and NOT open side panel when clicking item without submenu', async () => { + render( + {}} + /> + ); + + const dashboardsLink = screen.getByRole('link', { + name: 'Dashboards', + }); + const expectedHref = basicMock.navItems.primaryItems[0].href; + + expect(dashboardsLink).toHaveAttribute('href', expectedHref); + + await userEvent.click(dashboardsLink); + + const sidePanel = screen.queryByRole('region', { + name: 'Side panel', + }); + + expect(sidePanel).not.toBeInTheDocument(); + }); + + /** + * GIVEN the side navigation is in expanded mode + * AND a primary menu item without a submenu has focus + * WHEN I press the Enter key + * THEN I should be redirected to its href + */ + it('(without submenu) should redirect on Enter when focused item has no submenu', async () => { + render( + {}} + /> + ); + + const dashboardsLink = screen.getByRole('link', { + name: 'Dashboards', + }); + const expectedHref = basicMock.navItems.primaryItems[0].href; + + expect(dashboardsLink).toHaveAttribute('href', expectedHref); + + dashboardsLink.focus(); + + await userEvent.keyboard('{enter}'); + + const sidePanel = screen.queryByRole('region', { + name: 'Side panel', + }); + + expect(sidePanel).not.toBeInTheDocument(); + }); + + /** + * GIVEN the side navigation is in expanded mode + * AND a primary menu item is in beta + * WHEN I hover over that item + * THEN a tooltip shows up with "Beta" text + * AND a beta badge with beta icon + */ + it('should show tooltip with "Beta" and beta badge on hover', async () => { + render( + {}} + /> + ); + + const dashboardsLink = screen.getByRole('link', { + name: 'Dashboards', + }); + + await userEvent.hover(dashboardsLink); + + const tooltip = await screen.findByRole('tooltip'); + const betaIcon = tooltip.querySelector('[data-euiicon-type="beta"]'); + + expect(tooltip).toBeInTheDocument(); + expect(tooltip).toHaveTextContent('Beta'); + expect(betaIcon).toBeInTheDocument(); + }); + + /** + * GIVEN the side navigation is in expanded mode + * AND a primary menu item is in tech preview + * WHEN I hover over that item + * THEN a tooltip shows up with "Tech preview" text + * AND a beta badge with flask icon + */ + it('should show tooltip with "Tech preview" and flask badge on hover', async () => { + render( + {}} + /> + ); + + const casesLink = screen.getByRole('link', { + name: 'Cases', + }); + + await userEvent.hover(casesLink); + + const tooltip = await screen.findByRole('tooltip'); + const flaskIcon = tooltip.querySelector('[data-euiicon-type="flask"]'); + + expect(tooltip).toBeInTheDocument(); + expect(tooltip).toHaveTextContent('Tech preview'); + expect(flaskIcon).toBeInTheDocument(); + }); + }); + + describe('More menu', () => { + /** + * GIVEN not all primary menu items fit the menu height + * AND the navigation renders in expanded mode + * WHEN the navigation renders + * THEN I should see a "More" primary menu item + */ + it('should render the "More" primary menu item when items overflow', async () => { + render( + + {}} + /> + + ); + + const moreButton = await screen.findByRole('button', { + name: 'More', + }); + + expect(moreButton).toBeInTheDocument(); + }); + + /** + * GIVEN not all primary menu items fit the menu height + * AND the navigation renders in expanded mode + * WHEN I hover over the "More" primary menu item + * THEN I should see a popover with secondary menu + */ + it('should show popover with secondary menu on hover over "More"', async () => { + render( + + {}} + /> + + ); + + const moreButton = screen.getByRole('button', { + name: 'More', + }); + + await userEvent.hover(moreButton); + + const popover = await screen.findByRole('dialog', { + name: 'More', + }); + + await within(popover).findAllByRole('link'); + + expect(popover).toBeInTheDocument(); + }); + + /** + * GIVEN not all primary menu items fit the menu height + * AND the navigation renders in expanded mode + * WHEN I hover over the "More" primary menu item + * AND I click on the menu item that has a submenu + * THEN I should see a side panel with that submenu + */ + it('should open side panel when clicking submenu item inside "More" popover', async () => { + const TestComponent = () => { + const [activeItemId, setActiveItemId] = React.useState(); + + return ( + + setActiveItemId(item.id)} + setWidth={() => {}} + /> + + ); + }; + + render(); + + const moreButton = screen.getByRole('button', { + name: 'More', + }); + + await userEvent.hover(moreButton); + + const popover = await screen.findByRole('dialog', { + name: 'More', + }); + + const mlLink = within(popover).getByRole('link', { + name: 'Machine learning', + }); + + await userEvent.click(mlLink); + + const sidePanel = screen.getByRole('region', { + name: 'Side panel', + }); + + expect(sidePanel).toBeInTheDocument(); + }); + + /** + * GIVEN not all primary menu items fit the menu height + * AND the navigation renders in expanded mode + * WHEN I hover over the "More" primary menu item + * AND I click on the menu item that doesn’t have a submenu + * THEN I shouldn’t see a side panel + */ + it('should NOT open side panel when clicking item without submenu in "More" popover', async () => { + render( + + {}} + /> + + ); + + const moreButton = screen.getByRole('button', { + name: 'More', + }); + + await userEvent.hover(moreButton); + + const popover = await screen.findByRole('dialog', { + name: 'More', + }); + + const coverageLink = within(popover).getByRole('link', { + name: 'Coverage', + }); + + await userEvent.click(coverageLink); + + const sidePanel = screen.queryByRole('region', { + name: 'Side panel', + }); + + expect(sidePanel).not.toBeInTheDocument(); + }); + + /** + * GIVEN not all primary menu items fit the menu height + * AND the navigation renders in expanded mode + * WHEN I hover over the "More" primary menu item + * AND I click on the menu item that has a submenu + * THEN the popover should close + * AND I should be redirected to that item’s href + * AND I should a side panel should show with that submenu + */ + it('should close popover, redirect, and open side panel after clicking on an item with submenu from "More"', async () => { + const TestComponent = () => { + const [activeItemId, setActiveItemId] = React.useState(); + + return ( + + setActiveItemId(item.id)} + setWidth={() => {}} + /> + + ); + }; + + render(); + + const moreButton = screen.getByRole('button', { + name: 'More', + }); + + await userEvent.hover(moreButton); + + const popover = await screen.findByRole('dialog', { + name: 'More', + }); + + const mlLink = within(popover).getByRole('link', { + name: /Machine learning/, + }); + const expectedHref = securityMock.navItems.primaryItems[11].href; + + expect(mlLink).toHaveAttribute('href', expectedHref); + + await userEvent.click(mlLink); + + await waitFor(() => { + expect(popover).not.toBeInTheDocument(); + }); + + const sidePanel = await screen.findByRole('region', { + name: 'Side panel', + }); + + expect(sidePanel).toBeInTheDocument(); + }); + + /** + * GIVEN not all primary menu items fit the menu height + * AND the navigation renders in expanded mode + * WHEN I hover over the "More" primary menu item + * AND I click on the menu item that doesn’t have a submenu + * THEN the popover should close + * AND I should be redirected to that item’s href + * AND I shouldn’t see a side panel + */ + it('should close popover, redirect, and NOT open side panel after clicking on an item without submenu from "More"', async () => { + render( + + {}} + /> + + ); + + const moreButton = screen.getByRole('button', { + name: 'More', + }); + + await userEvent.hover(moreButton); + + const popover = await screen.findByRole('dialog', { + name: 'More', + }); + + const coverageLink = within(popover).getByRole('link', { + name: 'Coverage', + }); + const expectedHref = securityMock.navItems.primaryItems[12].href; + + expect(coverageLink).toHaveAttribute('href', expectedHref); + + await userEvent.click(coverageLink); + + await waitFor(() => { + expect(popover).not.toBeInTheDocument(); + }); + + const sidePanel = screen.queryByRole('region', { + name: 'Side panel', + }); + + expect(sidePanel).not.toBeInTheDocument(); + }); + + /** + * GIVEN the navigation renders in expanded mode + * AND not all primary menu items fit the menu height + * AND the initial active item is a submenu item of an item in the "More" menu + * WHEN the navigation renders + * THEN the "More" primary menu item itself is in an active state + * AND its parent primary menu item is active within the "More" menu popover + * AND a side panel with the submenu opens + * AND the submenu item is in an active state + */ + it('should have active state and open side panel when initial active submenu item is under "More"', async () => { + render( + + {}} + /> + + ); + + const moreButton = screen.getByRole('button', { + name: 'More', + }); + + // More button should be highlighted when containing active item + expect(moreButton).toHaveAttribute('data-highlighted', 'true'); + + await userEvent.hover(moreButton); + + const popover = await screen.findByRole('dialog', { + name: 'More', + }); + + expect(popover).toBeInTheDocument(); + + const mlPopoverLink = await within(popover).findByRole('link', { + name: /Machine learning/, + }); + const expectedHref = securityMock.navItems.primaryItems[11].href; + + expect(mlPopoverLink).toHaveAttribute('href', expectedHref); + // Parent should be highlighted when child is active, but not marked as current + expect(mlPopoverLink).toHaveAttribute('data-highlighted', 'true'); + + const sidePanel = await screen.findByRole('region', { + name: 'Side panel', + }); + + expect(sidePanel).toBeInTheDocument(); + + const resultExplorerLink = within(sidePanel).getByRole('link', { + name: /Result explorer/, + }); + const expectedSubItemHref = + securityMock.navItems.primaryItems[11].sections?.[2].items[0].href; + + expect(resultExplorerLink).toHaveAttribute('href', expectedSubItemHref); + // Actual active submenu item should be both current and highlighted + expect(resultExplorerLink).toHaveAttribute('aria-current', 'page'); + expect(resultExplorerLink).toHaveAttribute('data-highlighted', 'true'); + }); + }); + }); +}); diff --git a/src/core/packages/chrome/navigation/src/__tests__/resize_window.ts b/src/core/packages/chrome/navigation/src/__tests__/resize_window.ts new file mode 100644 index 0000000000000..639ea66f5aeb7 --- /dev/null +++ b/src/core/packages/chrome/navigation/src/__tests__/resize_window.ts @@ -0,0 +1,36 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the "Elastic License + * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side + * Public License v 1"; you may not use this file except in compliance with, at + * your election, the "Elastic License 2.0", the "GNU Affero General Public + * License v3.0 only", or the "Server Side Public License, v 1". + */ + +import { act } from '@testing-library/react'; + +/** + * Mocks the window's dimensions and dispatches a resize event. + * + * @param width The new window width + * @param height The new window height + * @returns A cleanup function to restore the original dimensions. + */ +export const resizeWindow = (width: number, height: number) => { + const originalInnerWidth = window.innerWidth; + const originalInnerHeight = window.innerHeight; + + // Set the new values + window.innerWidth = width; + window.innerHeight = height; + + // Dispatch the resize event + act(() => window.dispatchEvent(new Event('resize'))); + + // Return a cleanup function + return () => { + window.innerWidth = originalInnerWidth; + window.innerHeight = originalInnerHeight; + window.dispatchEvent(new Event('resize')); + }; +}; diff --git a/src/core/packages/chrome/navigation/src/components/menu_item/index.tsx b/src/core/packages/chrome/navigation/src/components/menu_item/index.tsx index 663da344878b0..1ec1530032472 100644 --- a/src/core/packages/chrome/navigation/src/components/menu_item/index.tsx +++ b/src/core/packages/chrome/navigation/src/components/menu_item/index.tsx @@ -19,7 +19,8 @@ export interface MenuItemProps extends HTMLAttributes} {...commonProps} diff --git a/src/core/packages/chrome/navigation/src/components/navigation.tsx b/src/core/packages/chrome/navigation/src/components/navigation.tsx index d8a6f26b968d5..eeaa95bf80ea6 100644 --- a/src/core/packages/chrome/navigation/src/components/navigation.tsx +++ b/src/core/packages/chrome/navigation/src/components/navigation.tsx @@ -14,7 +14,7 @@ import { css } from '@emotion/react'; import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n-react'; -import type { MenuItem, NavigationStructure, SecondaryMenuItem, SideNavLogo } from '../../types'; +import type { NavigationStructure, SideNavLogo, MenuItem, SecondaryMenuItem } from '../../types'; import { NestedSecondaryMenu } from './nested_secondary_menu'; import { SecondaryMenu } from './secondary_menu'; import { SideNav } from './side_nav'; @@ -42,6 +42,10 @@ export interface NavigationProps { * The logo object containing the route ID, href, label, and type. */ logo: SideNavLogo; + /** + * Callback fired when a navigation item is clicked. + */ + onItemClick?: (item: MenuItem | SecondaryMenuItem | SideNavLogo) => void; /** * Required by the grid layout to set the width of the navigation slot. */ @@ -57,14 +61,20 @@ export const Navigation = ({ isCollapsed: isCollapsedProp, items, logo, + onItemClick, setWidth, ...rest }: NavigationProps) => { const isMobile = useIsWithinBreakpoints(['xs', 's']); const isCollapsed = isMobile || isCollapsedProp; - const { activePageId, activeSubpageId, isSidePanelOpen, navigateTo, sidePanelContent } = - useNavigation(isCollapsed, items, logo.id, activeItemId); + const { + actualActiveItemId, + visuallyActivePageId, + visuallyActiveSubpageId, + isSidePanelOpen, + sidePanelContent, + } = useNavigation(isCollapsed, items, logo.id, activeItemId); const { overflowMenuItems, primaryMenuRef, visibleMenuItems } = useResponsiveMenu( isCollapsed, @@ -73,31 +83,15 @@ export const Navigation = ({ useLayoutWidth({ isCollapsed, isSidePanelOpen, setWidth }); - const handleMainItemClick = (item: MenuItem) => { - navigateTo(item); - focusMainContent(); - }; - - const handleSubMenuItemClick = (item: MenuItem, subItem: SecondaryMenuItem) => { - navigateTo(item, subItem); - focusMainContent(); - }; - - const handleFooterItemKeyDown = (item: MenuItem, e: KeyboardEvent) => { + const handleFooterItemKeyDown = (e: KeyboardEvent) => { if (e.key === 'Enter' || e.key === ' ') { // Required for entering the popover with Enter or Space key // Otherwise the navigation happens immediately e.preventDefault(); - navigateTo(item); focusMainContent(); } }; - const handleLogoClick = () => { - navigateTo(logo); - focusMainContent(); - }; - return (
onItemClick?.(logo)} {...logo} /> - {visibleMenuItems.map((item) => ( - handleMainItemClick(item)} - {...item} - > - {item.label} - - } - > - {(closePopover) => ( - - {item.sections?.map((section) => ( - - {section.items.map((subItem) => ( - { - if (subItem.href) { - handleSubMenuItemClick(item, subItem); - closePopover(); - } - }} - testSubjPrefix="popoverItem" - {...subItem} - > - {subItem.label} - - ))} - - ))} - - )} - - ))} + {visibleMenuItems.map((item) => { + const { sections, ...itemProps } = item; + return ( + onItemClick?.(item)} + {...itemProps} + > + {item.label} + + } + > + {(closePopover) => ( + + {sections?.map((section) => ( + + {section.items.map((subItem) => ( + { + onItemClick?.(subItem); + if (subItem.href) { + closePopover(); + } + }} + testSubjPrefix="popoverItem" + {...subItem} + > + {subItem.label} + + ))} + + ))} + + )} + + ); + })} {overflowMenuItems.length > 0 && ( item.id === sidePanelContent?.id)} + isHighlighted={overflowMenuItems.some((item) => item.id === visuallyActivePageId)} isCollapsed={isCollapsed} iconType="boxesVertical" hasContent @@ -203,22 +203,22 @@ export const Navigation = ({ {overflowMenuItems.map((item) => { const hasSubItems = getHasSubmenu(item); - + const { sections, ...itemProps } = item; return ( { + onItemClick?.(item); if (!hasSubItems) { - navigateTo(item); closePopover(); focusMainContent(); } }} - {...item} + {...itemProps} > {item.label} @@ -241,9 +241,10 @@ export const Navigation = ({ {section.items.map((subItem) => ( { - navigateTo(item, subItem); + onItemClick?.(subItem); closePopover(); focusMainContent(); }} @@ -264,23 +265,27 @@ export const Navigation = ({ })} > - {overflowMenuItems.map((item) => ( - { - navigateTo(item); - closePopover(); - focusMainContent(); - }} - isHorizontal - {...item} - > - {item.label} - - ))} + {overflowMenuItems.map((item) => { + const { sections, ...itemProps } = item; + return ( + { + onItemClick?.(item); + closePopover(); + focusMainContent(); + }} + isHorizontal + {...itemProps} + > + {item.label} + + ); + })} ) @@ -290,53 +295,55 @@ export const Navigation = ({ - {items.footerItems.slice(0, MAX_FOOTER_ITEMS).map((item) => ( - navigateTo(item)} - hasContent={getHasSubmenu(item)} - onKeyDown={(e) => handleFooterItemKeyDown(item, e)} - {...item} - /> - } - > - {(closePopover) => ( - - {item.sections?.map((section) => ( - - {section.items.map((subItem) => ( - { - if (subItem.href) { - handleSubMenuItemClick(item, subItem); - closePopover(); - } - }} - {...subItem} - testSubjPrefix="popoverFooterItem" - > - {subItem.label} - - ))} - - ))} - - )} - - ))} + {items.footerItems.slice(0, MAX_FOOTER_ITEMS).map((item) => { + const { sections, ...itemProps } = item; + return ( + onItemClick?.(item)} + onKeyDown={handleFooterItemKeyDown} + {...itemProps} + /> + } + > + {(closePopover) => ( + + {sections?.map((section) => ( + + {section.items.map((subItem) => ( + { + onItemClick?.(subItem); + if (subItem.href) { + closePopover(); + } + }} + {...subItem} + testSubjPrefix="popoverFooterItem" + > + {subItem.label} + + ))} + + ))} + + )} + + ); + })} @@ -352,12 +359,9 @@ export const Navigation = ({ {section.items.map((subItem) => ( { - if (subItem.href) { - handleSubMenuItemClick(sidePanelContent, subItem); - } - }} + isHighlighted={subItem.id === visuallyActiveSubpageId} + isCurrent={actualActiveItemId === subItem.id} + onClick={() => onItemClick?.(subItem)} testSubjPrefix="sidePanelItem" {...subItem} > diff --git a/src/core/packages/chrome/navigation/src/components/nested_secondary_menu/menu_item.tsx b/src/core/packages/chrome/navigation/src/components/nested_secondary_menu/menu_item.tsx index 9460b9fff9eab..669d277818780 100644 --- a/src/core/packages/chrome/navigation/src/components/nested_secondary_menu/menu_item.tsx +++ b/src/core/packages/chrome/navigation/src/components/nested_secondary_menu/menu_item.tsx @@ -17,12 +17,13 @@ import { SecondaryMenu } from '../secondary_menu'; import { useNestedMenu } from './use_nested_menu'; export interface ItemProps - extends Omit, 'isActive' | 'href'> { + extends Omit, 'isHighlighted' | 'href'> { children: ReactNode; hasSubmenu?: boolean; href?: string; iconType?: IconType; - isActive?: boolean; + isHighlighted?: boolean; + isCurrent?: boolean; onClick?: () => void; submenuPanelId?: string; } @@ -32,7 +33,8 @@ export const Item: FC = ({ hasSubmenu = false, href, id, - isActive = false, + isHighlighted = false, + isCurrent, onClick, submenuPanelId, ...props @@ -50,7 +52,6 @@ export const Item: FC = ({ const arrowStyle = css` margin-left: ${euiTheme.size.xs}; opacity: 0.6; - pointer-events: none; `; const handleClick = useCallback(() => { @@ -64,7 +65,8 @@ export const Item: FC = ({ , 'children' | 'isActive'> { + extends Omit, 'children' | 'isHighlighted'> { children: ReactNode; hasSubmenu?: boolean; - isActive?: boolean; + isHighlighted?: boolean; + isCurrent?: boolean; isCollapsed: boolean; onClick?: () => void; submenuPanelId?: string; @@ -28,7 +29,8 @@ export interface PrimaryMenuItemProps export const PrimaryMenuItem: FC = ({ children, hasSubmenu = false, - isActive = false, + isHighlighted = false, + isCurrent, onClick, submenuPanelId, ...props @@ -45,7 +47,6 @@ export const PrimaryMenuItem: FC = ({ const arrowStyle = css` opacity: 0.6; - pointer-events: none; position: absolute; right: ${euiTheme.size.s}; top: 50%; @@ -60,7 +61,13 @@ export const PrimaryMenuItem: FC = ({ return (
- + {children} {hasSubmenu && ( diff --git a/src/core/packages/chrome/navigation/src/components/popover/use_keyboard_management.ts b/src/core/packages/chrome/navigation/src/components/popover/use_keyboard_management.ts index 2d8895d2382c7..8a931118bd86c 100644 --- a/src/core/packages/chrome/navigation/src/components/popover/use_keyboard_management.ts +++ b/src/core/packages/chrome/navigation/src/components/popover/use_keyboard_management.ts @@ -14,7 +14,12 @@ import { getFocusableElements } from '../../utils/get_focusable_elements'; import { trapFocus } from '../../utils/trap_focus'; /** - * Hook for keyboard event handling + * Custom hook for keyboard event handling in the popover. + * + * @param isOpen - Whether the popover is open. + * @param onClose - Callback to close the popover. + * @param triggerRef - Reference to the trigger element. + * @param popoverRef - Reference to the popover element. */ export const useKeyboardManagement = ( isOpen: boolean, @@ -22,10 +27,13 @@ export const useKeyboardManagement = ( triggerRef: RefObject, popoverRef: RefObject ) => { - const elements = getFocusableElements(popoverRef); - const handleKeyDown = useCallback( (e: KeyboardEvent) => { + const container = popoverRef?.current; + if (!container) return; + + const elements = getFocusableElements(container); + if (!isOpen) return; switch (e.key) { @@ -52,12 +60,13 @@ export const useKeyboardManagement = ( trapFocus(popoverRef)(e); } }, - [isOpen, onClose, triggerRef, popoverRef, elements] + [isOpen, onClose, triggerRef, popoverRef] ); useEffect(() => { if (isOpen) { document.addEventListener('keydown', handleKeyDown, true); + return () => document.removeEventListener('keydown', handleKeyDown, true); } }, [isOpen, handleKeyDown]); diff --git a/src/core/packages/chrome/navigation/src/components/secondary_menu/item.tsx b/src/core/packages/chrome/navigation/src/components/secondary_menu/item.tsx index 6644f5a52c8d6..a41c152f317cf 100644 --- a/src/core/packages/chrome/navigation/src/components/secondary_menu/item.tsx +++ b/src/core/packages/chrome/navigation/src/components/secondary_menu/item.tsx @@ -20,7 +20,8 @@ export interface SecondaryMenuItemProps extends SecondaryMenuItem { children: ReactNode; href: string; iconType?: IconType; - isActive: boolean; + isHighlighted: boolean; + isCurrent?: boolean; key: string; onClick?: () => void; testSubjPrefix?: string; @@ -35,7 +36,8 @@ export const SecondaryMenuItemComponent = ({ children, iconType, id, - isActive, + isHighlighted, + isCurrent, isExternal, testSubjPrefix = 'secondaryMenuItem', ...props @@ -79,13 +81,14 @@ export const SecondaryMenuItemComponent = ({ return (
  • - {isActive ? ( + {isHighlighted ? ( ) : ( , MenuItem { hasContent?: boolean; iconType: IconType; - isActive: boolean; + isHighlighted: boolean; + isCurrent?: boolean; label: string; - onClick: () => void; + onClick?: () => void; onKeyDown?: (e: KeyboardEvent) => void; } @@ -31,7 +32,7 @@ export interface SideNavFooterItemProps extends Omit( ( - { badgeType, hasContent, iconType, id, isActive, label, ...props }, + { badgeType, hasContent, iconType, id, isHighlighted, isCurrent, label, ...props }, ref: ForwardedRef ) => { const { euiTheme } = useEuiTheme(); @@ -45,10 +46,12 @@ export const SideNavFooterItem = forwardRef, SideNavLogo { +export interface SideNavLogoProps + extends Omit, 'onClick'>, + SideNavLogo { id: string; - isActive: boolean; + isHighlighted: boolean; + isCurrent?: boolean; isCollapsed: boolean; + onClick?: () => void; } /** * It's used to communicate what solution the user is currently in. */ export const SideNavLogoComponent = ({ - isActive, + isHighlighted, + isCurrent, isCollapsed, label, ...props @@ -58,7 +63,8 @@ export const SideNavLogoComponent = ({ { useRovingIndex(ref); return ( -
    +
    void; @@ -38,7 +39,8 @@ export const SideNavPrimaryMenuItem = forwardRef { - if (isHorizontal || (isCollapsed && hasContent)) return null; + if (isHorizontal || hasContent) return null; if (isCollapsed) return badgeType ? getLabelWithBeta(children) : children; if (!isCollapsed && badgeType) return getLabelWithBeta( @@ -94,7 +96,8 @@ export const SideNavPrimaryMenuItem = forwardRef { - const { primaryItem, secondaryItem, isLogoActive } = getInitialActiveItems( - items, - activeItemId, - logoId + const { primaryItem, secondaryItem, isLogoActive } = useMemo( + () => getActiveItems(items, activeItemId, logoId), + [items, activeItemId, logoId] ); - const [activePageId, setActivePageId] = useState( - isLogoActive ? logoId : primaryItem?.id - ); - const [activeSubpageId, setActiveSubpageId] = useState(secondaryItem?.id); - const [sidePanelContent, setSidePanelContent] = useState(primaryItem); - + const actualActiveItemId = activeItemId; + const visuallyActivePageId = isLogoActive ? logoId : primaryItem?.id; + const visuallyActiveSubpageId = secondaryItem?.id; + const sidePanelContent = primaryItem; const isSidePanelOpen = !isCollapsed && !!sidePanelContent?.sections; - const navigateTo = useCallback( - (primaryMenuItem: MenuItem, secondaryMenuItem?: SecondaryMenuItem) => { - setActivePageId(primaryMenuItem.id); - setActiveSubpageId(secondaryMenuItem?.id || undefined); - setSidePanelContent(primaryMenuItem); - }, - [] - ); - - const resetActiveItems = useCallback( - (newActiveItems: InitialMenuState) => { - const { - primaryItem: newPrimaryItem, - secondaryItem: newSecondaryItem, - isLogoActive: newIsLogoActive, - } = newActiveItems; - setActivePageId(newIsLogoActive ? logoId : newPrimaryItem?.id); - setActiveSubpageId(newSecondaryItem?.id); - setSidePanelContent(newPrimaryItem); - }, - [logoId] - ); - - // Update active items when `activeItemId` changes - useEffect(() => { - const newActiveItems = getInitialActiveItems(items, activeItemId, logoId); - resetActiveItems(newActiveItems); - }, [activeItemId, items, logoId, resetActiveItems]); - const state: NavigationState = { - activePageId, - activeSubpageId, + actualActiveItemId, + visuallyActivePageId, + visuallyActiveSubpageId, sidePanelContent, isCollapsed, isSidePanelOpen, }; - return { - ...state, - navigateTo, - }; + return state; }; diff --git a/src/core/packages/chrome/navigation/src/hooks/use_roving_index.ts b/src/core/packages/chrome/navigation/src/hooks/use_roving_index.ts new file mode 100644 index 0000000000000..1c498aaea5736 --- /dev/null +++ b/src/core/packages/chrome/navigation/src/hooks/use_roving_index.ts @@ -0,0 +1,81 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the "Elastic License + * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side + * Public License v 1"; you may not use this file except in compliance with, at + * your election, the "Elastic License 2.0", the "GNU Affero General Public + * License v3.0 only", or the "Server Side Public License, v 1". + */ + +import type { RefObject } from 'react'; +import { useCallback, useEffect } from 'react'; + +import { getFocusableElements } from '../utils/get_focusable_elements'; + +export const useRovingIndex = (ref: RefObject | null) => { + const updateTabIndices = useCallback((elements: HTMLElement[]) => { + elements.forEach((el, idx) => { + el.tabIndex = idx === 0 ? 0 : -1; + }); + }, []); + + const handleKeyDown = useCallback( + (e: KeyboardEvent) => { + const container = ref?.current; + if (!container) return; + + const elements = getFocusableElements(container); + const currentIndex = elements.findIndex((el) => el === document.activeElement); + + let nextIndex = currentIndex; + + switch (e.key) { + case 'ArrowDown': + nextIndex = (currentIndex + 1) % elements.length; + break; + case 'ArrowUp': + nextIndex = (currentIndex - 1 + elements.length) % elements.length; + break; + case 'Home': + nextIndex = 0; + break; + case 'End': + nextIndex = elements.length - 1; + break; + default: + return; + } + + elements[nextIndex]?.focus(); + }, + [ref] + ); + + useEffect(() => { + const container = ref?.current; + if (!container) return; + + const updateChildren = () => { + const elements = getFocusableElements(container); + updateTabIndices(elements); + }; + + updateChildren(); + + container.addEventListener('keydown', handleKeyDown); + + const observer = new MutationObserver(() => { + updateChildren(); + }); + + observer.observe(container, { + childList: true, + subtree: true, + }); + + return () => { + container.removeEventListener('keydown', handleKeyDown); + observer.disconnect(); + }; + }, [ref, handleKeyDown, updateTabIndices]); +}; diff --git a/src/core/packages/chrome/navigation/src/mocks/basic_navigation.ts b/src/core/packages/chrome/navigation/src/mocks/basic_navigation.ts new file mode 100644 index 0000000000000..e44831714b5a0 --- /dev/null +++ b/src/core/packages/chrome/navigation/src/mocks/basic_navigation.ts @@ -0,0 +1,114 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the "Elastic License + * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side + * Public License v 1"; you may not use this file except in compliance with, at + * your election, the "Elastic License 2.0", the "GNU Affero General Public + * License v3.0 only", or the "Server Side Public License, v 1". + */ +import type { MenuItem, SideNavLogo } from '../../types'; + +export const LOGO: SideNavLogo = { + id: 'home', + href: '/', + label: 'Solution', + iconType: 'logoElastic', +}; + +export const PRIMARY_MENU_ITEMS: MenuItem[] = [ + { + id: 'dashboards', + label: 'Dashboards', + href: '/dashboards', + iconType: 'dashboardApp', + }, + { + id: 'discover', + label: 'Discover', + href: '/discover', + iconType: 'discoverApp', + }, + { + id: 'apps_overview', + label: 'Apps', + href: '/apps_overview', + iconType: 'apps', + sections: [ + { + id: 'synthetics', + label: 'Synthetics', + items: [ + { + id: 'apps_overview', + label: 'Overview', + href: '/apps_overview', + }, + { + id: 'tls_certificates', + label: 'TLS certificates', + href: '/tls_certificates', + }, + ], + }, + ], + }, +]; + +export const PRIMARY_MENU_FOOTER_ITEMS: MenuItem[] = [ + { + id: 'getting_started', + label: 'Getting started', + iconType: 'launch', + href: '/getting-started', + }, + { + id: 'developer_tools', + label: 'Developer tools', + iconType: 'code', + href: '/developer-tools', + }, + { + id: 'integrations', + label: 'Settings', + href: '/integrations', + iconType: 'gear', + sections: [ + { + id: 'section_one', + label: 'Section', + items: [ + { + id: 'integrations', + label: 'Integrations', + href: '/integrations', + }, + { + id: 'advanced_settings', + label: 'Advanced settings', + href: '/advanced_settings', + }, + ], + }, + ], + }, + { + id: 'fourth_item', + label: 'Fourth item', + iconType: 'launch', + href: '/fourth-item', + }, + { + id: 'fifth_item', + label: 'Fifth item', + iconType: 'code', + href: '/fourth-item', + }, +]; + +export const basicMock = { + logo: LOGO, + navItems: { + primaryItems: PRIMARY_MENU_ITEMS, + footerItems: PRIMARY_MENU_FOOTER_ITEMS, + }, +}; diff --git a/src/core/packages/chrome/navigation/src/mocks/elasticsearch.ts b/src/core/packages/chrome/navigation/src/mocks/elasticsearch.ts index bf9a82f5a396f..38870bf3ba001 100644 --- a/src/core/packages/chrome/navigation/src/mocks/elasticsearch.ts +++ b/src/core/packages/chrome/navigation/src/mocks/elasticsearch.ts @@ -13,7 +13,7 @@ export const LOGO = { href: '/elasticsearch', id: 'elasticsearch', label: 'Elasticsearch', - type: 'logoElasticsearch', + iconType: 'logoElasticsearch', }; export const PRIMARY_MENU_ITEMS: MenuItem[] = [ @@ -93,7 +93,7 @@ export const PRIMARY_MENU_FOOTER_ITEMS: MenuItem[] = [ href: '/developer-tools', }, { - id: 'settings', + id: 'project-performance', label: 'Settings', iconType: 'gear', href: '/settings/project/performance', @@ -317,3 +317,11 @@ export const PRIMARY_MENU_FOOTER_ITEMS: MenuItem[] = [ ], }, ]; + +export const elasticsearchMock = { + logo: LOGO, + navItems: { + primaryItems: PRIMARY_MENU_ITEMS, + footerItems: PRIMARY_MENU_FOOTER_ITEMS, + }, +}; diff --git a/src/core/packages/chrome/navigation/src/mocks/observability.ts b/src/core/packages/chrome/navigation/src/mocks/observability.ts index 33b52d605c602..d299e7d87f69e 100644 --- a/src/core/packages/chrome/navigation/src/mocks/observability.ts +++ b/src/core/packages/chrome/navigation/src/mocks/observability.ts @@ -13,7 +13,7 @@ export const LOGO = { href: '/observability', id: 'observability', label: 'Observability', - type: 'logoObservability', + iconType: 'logoObservability', }; export const PRIMARY_MENU_ITEMS: MenuItem[] = [ @@ -45,10 +45,11 @@ export const PRIMARY_MENU_ITEMS: MenuItem[] = [ href: '/slos', }, { - id: 'apps', + id: 'service-inventory', label: 'Apps', iconType: 'apps', href: '/apps/service-inventory', + badgeType: 'beta', sections: [ { id: 'apps-section-1', @@ -58,31 +59,32 @@ export const PRIMARY_MENU_ITEMS: MenuItem[] = [ label: 'Service inventory', href: '/apps/service-inventory', }, - { id: 'traces', label: 'Traces', href: '/apps/traces' }, + { id: 'traces', label: 'Traces', href: '/apps/traces', isExternal: true }, { id: 'dependencies', label: 'Dependencies', href: '/apps/dependencies', }, - { id: 'settings', label: 'Settings', href: '/apps/settings' }, + { id: 'apps-settings', label: 'Settings', href: '/apps/settings' }, ], }, { id: 'synthetics', label: 'Synthetics', items: [ - { id: 'overview', label: 'Overview', href: '/synthetics/overview' }, + { id: 'synthetics-overview', label: 'Overview', href: '/synthetics/overview' }, { id: 'tls-certificates', label: 'TLS certificates', href: '/synthetics/tls-certificates', + badgeType: 'beta', }, ], }, ], }, { - id: 'infrastructure', + id: 'inventory', label: 'Infrastructure', iconType: 'storage', href: '/infrastructure/inventory', @@ -95,9 +97,9 @@ export const PRIMARY_MENU_ITEMS: MenuItem[] = [ label: 'Infrastructure inventory', href: '/infrastructure/inventory', }, - { id: 'hosts', label: 'Hosts', href: '/infrastructure/hosts' }, + { id: 'hosts', label: 'Hosts', href: '/infrastructure/hosts', badgeType: 'techPreview' }, { - id: 'settings', + id: 'infrastructure-settings', label: 'Settings', href: '/infrastructure/settings', }, @@ -118,16 +120,16 @@ export const PRIMARY_MENU_ITEMS: MenuItem[] = [ href: '/streams', }, { - id: 'machine-learning', + id: 'ml-overview', label: 'Machine learning', iconType: 'machineLearningApp', href: '/ml/overview', - badgeType: 'beta', + badgeType: 'techPreview', sections: [ { id: 'ml-section-1', items: [ - { id: 'overview', label: 'Overview', href: '/ml/overview' }, + { id: 'ml-overview', label: 'Overview', href: '/ml/overview' }, { id: 'data-visualizer', label: 'Data visualizer', @@ -208,7 +210,7 @@ export const PRIMARY_MENU_FOOTER_ITEMS: MenuItem[] = [ badgeType: 'techPreview', }, { - id: 'settings', + id: 'project-performance', label: 'Settings', iconType: 'gear', href: '/settings/project/performance', @@ -286,6 +288,7 @@ export const PRIMARY_MENU_FOOTER_ITEMS: MenuItem[] = [ id: 'access-org-members', label: 'Org members', href: '/settings/access/org-members', + badgeType: 'techPreview', isExternal: true, }, { @@ -357,7 +360,7 @@ export const PRIMARY_MENU_FOOTER_ITEMS: MenuItem[] = [ label: 'Machine learning', items: [ { - id: 'ml-overview', + id: 'settings-ml-overview', label: 'Overview', href: '/settings/ml/overview', }, @@ -435,3 +438,11 @@ export const PRIMARY_MENU_FOOTER_ITEMS: MenuItem[] = [ ], }, ]; + +export const observabilityMock = { + logo: LOGO, + navItems: { + primaryItems: PRIMARY_MENU_ITEMS, + footerItems: PRIMARY_MENU_FOOTER_ITEMS, + }, +}; diff --git a/src/core/packages/chrome/navigation/src/mocks/security.ts b/src/core/packages/chrome/navigation/src/mocks/security.ts index 157e841b79a19..53b3f2235a84a 100644 --- a/src/core/packages/chrome/navigation/src/mocks/security.ts +++ b/src/core/packages/chrome/navigation/src/mocks/security.ts @@ -13,7 +13,7 @@ export const LOGO = { href: '/security', id: 'security', label: 'Security', - type: 'logoSecurity', + iconType: 'logoSecurity', }; export const PRIMARY_MENU_ITEMS: MenuItem[] = [ @@ -30,10 +30,10 @@ export const PRIMARY_MENU_ITEMS: MenuItem[] = [ href: '/dashboards', }, { - id: 'rules', + id: 'detection-rules', label: 'Rules', iconType: 'info', - href: '/rules', + href: '/rules/management/detection-rules', sections: [ { id: 'management', @@ -62,7 +62,7 @@ export const PRIMARY_MENU_ITEMS: MenuItem[] = [ ], }, { - id: 'discover', + id: 'rules-discover', label: 'Discover', items: [ { @@ -74,12 +74,6 @@ export const PRIMARY_MENU_ITEMS: MenuItem[] = [ }, ], }, - { - id: 'coverage', - label: 'Coverage', - iconType: 'visGauge', - href: '/coverage', - }, { id: 'alerts', label: 'Alerts', @@ -105,10 +99,10 @@ export const PRIMARY_MENU_ITEMS: MenuItem[] = [ href: '/cases', }, { - id: 'investigations', + id: 'investigations-timelines', label: 'Investigations', iconType: 'casesApp', - href: '/investigations', + href: '/investigations/timelines', sections: [ { id: 'investigations-section', @@ -139,10 +133,10 @@ export const PRIMARY_MENU_ITEMS: MenuItem[] = [ href: '/intelligence', }, { - id: 'explore', + id: 'hosts', label: 'Explore', iconType: 'search', - href: '/explore', + href: '/explore/hosts', sections: [ { id: 'explore-section', @@ -167,10 +161,10 @@ export const PRIMARY_MENU_ITEMS: MenuItem[] = [ ], }, { - id: 'assets', + id: 'agents', label: 'Assets', iconType: 'indexManagementApp', - href: '/assets', + href: '/assets/fleet/agents', sections: [ { id: 'fleet', @@ -202,7 +196,7 @@ export const PRIMARY_MENU_ITEMS: MenuItem[] = [ href: '/assets/fleet/data-streams', }, { - id: 'settings', + id: 'fleet-settings', label: 'Settings', href: '/assets/fleet/settings', }, @@ -252,7 +246,7 @@ export const PRIMARY_MENU_ITEMS: MenuItem[] = [ ], }, { - id: 'machine_learning', + id: 'ml-overview', label: 'Machine learning', iconType: 'machineLearningApp', href: '/ml/overview', @@ -261,7 +255,7 @@ export const PRIMARY_MENU_ITEMS: MenuItem[] = [ id: 'ml-section-1', items: [ { - id: 'overview', + id: 'ml-overview', label: 'Overview', href: '/ml/overview', }, @@ -327,6 +321,12 @@ export const PRIMARY_MENU_ITEMS: MenuItem[] = [ }, ], }, + { + id: 'coverage', + label: 'Coverage', + iconType: 'visGauge', + href: '/coverage', + }, ]; export const PRIMARY_MENU_FOOTER_ITEMS: MenuItem[] = [ @@ -343,7 +343,7 @@ export const PRIMARY_MENU_FOOTER_ITEMS: MenuItem[] = [ href: '/developer-tools', }, { - id: 'settings', + id: 'project-performance', label: 'Settings', iconType: 'gear', href: '/settings/project/performance', @@ -527,7 +527,7 @@ export const PRIMARY_MENU_FOOTER_ITEMS: MenuItem[] = [ ], }, { - id: 'assets', + id: 'settings-assets', label: 'Assets', items: [ { @@ -567,3 +567,11 @@ export const PRIMARY_MENU_FOOTER_ITEMS: MenuItem[] = [ ], }, ]; + +export const securityMock = { + logo: LOGO, + navItems: { + primaryItems: PRIMARY_MENU_ITEMS, + footerItems: PRIMARY_MENU_FOOTER_ITEMS, + }, +}; diff --git a/src/core/packages/chrome/navigation/src/utils/focus_first_element.ts b/src/core/packages/chrome/navigation/src/utils/focus_first_element.ts index 770fed662e10c..5fd9b25fdb7cf 100644 --- a/src/core/packages/chrome/navigation/src/utils/focus_first_element.ts +++ b/src/core/packages/chrome/navigation/src/utils/focus_first_element.ts @@ -15,7 +15,10 @@ import { getFocusableElements } from './get_focusable_elements'; * Utility function for focusing the first interactive element */ export const focusFirstElement = (ref: RefObject) => { - const elements = getFocusableElements(ref); + const container = ref?.current; + if (!container) return; + + const elements = getFocusableElements(container); if (elements.length > 0) { elements[0].focus(); diff --git a/src/core/packages/chrome/navigation/src/utils/get_focusable_elements.ts b/src/core/packages/chrome/navigation/src/utils/get_focusable_elements.ts index f9592977b68df..cfe8fe9d8da63 100644 --- a/src/core/packages/chrome/navigation/src/utils/get_focusable_elements.ts +++ b/src/core/packages/chrome/navigation/src/utils/get_focusable_elements.ts @@ -7,15 +7,14 @@ * License v3.0 only", or the "Server Side Public License, v 1". */ -import type { RefObject } from 'react'; - /** - * Utility function for getting focusable elements + * Utility function for getting focusable elements. + * + * @param container The container element to search within. + * @returns An array of focusable elements. */ -export const getFocusableElements = (ref: RefObject | null) => { - if (!ref?.current) return []; - - return Array.from(ref.current.querySelectorAll('button, a')).filter( +export const getFocusableElements = (container: HTMLElement) => { + return Array.from(container.querySelectorAll('button, a')).filter( (el) => !el.hasAttribute('disabled') && !el.getAttribute('aria-hidden') ) as HTMLElement[]; }; diff --git a/src/core/packages/chrome/navigation/src/utils/get_initial_active_items.ts b/src/core/packages/chrome/navigation/src/utils/get_initial_active_items.ts index 1ecfabe65fb79..f6f55015d63d4 100644 --- a/src/core/packages/chrome/navigation/src/utils/get_initial_active_items.ts +++ b/src/core/packages/chrome/navigation/src/utils/get_initial_active_items.ts @@ -9,20 +9,20 @@ import type { MenuItem, NavigationStructure, SecondaryMenuItem } from '../../types'; -export interface InitialMenuState { +export interface ActiveItemsState { primaryItem: MenuItem | null; secondaryItem: SecondaryMenuItem | null; isLogoActive: boolean; } /** - * Utility function to determine the initial menu item based on the `activeItemId` + * Utility function to determine the active menu items based on the `activeItemId` */ -export const getInitialActiveItems = ( +export const getActiveItems = ( items: NavigationStructure, activeItemId?: string, logoId?: string -): InitialMenuState => { +): ActiveItemsState => { if (!activeItemId) { return { primaryItem: null, secondaryItem: null, isLogoActive: false }; } @@ -32,19 +32,7 @@ export const getInitialActiveItems = ( return { primaryItem: null, secondaryItem: null, isLogoActive: true }; } - // Second, search the primary menu items using their IDs - const primaryItem = items.primaryItems.find((item) => item.id === activeItemId); - if (primaryItem) { - return { primaryItem, secondaryItem: null, isLogoActive: false }; - } - - // Third, search the footer items using their IDs - const footerItem = items.footerItems.find((item) => item.id === activeItemId); - if (footerItem) { - return { primaryItem: footerItem, secondaryItem: null, isLogoActive: false }; - } - - // Fourth, search the secondary menu items using their IDs + // Second, search the secondary menu items using their IDs (prioritize children over parents) for (const primary of items.primaryItems) { if (!primary.sections) continue; @@ -56,7 +44,7 @@ export const getInitialActiveItems = ( } } - // Fifth, search the secondary items of footer items + // Third, search the secondary items of footer items for (const footer of items.footerItems) { if (!footer.sections) continue; @@ -68,5 +56,17 @@ export const getInitialActiveItems = ( } } + // Fourth, search the primary menu items using their IDs + const primaryItem = items.primaryItems.find((item) => item.id === activeItemId); + if (primaryItem) { + return { primaryItem, secondaryItem: null, isLogoActive: false }; + } + + // Fifth, search the footer items using their IDs + const footerItem = items.footerItems.find((item) => item.id === activeItemId); + if (footerItem) { + return { primaryItem: footerItem, secondaryItem: null, isLogoActive: false }; + } + return { primaryItem: null, secondaryItem: null, isLogoActive: false }; }; diff --git a/src/core/packages/chrome/navigation/src/utils/trap_focus.ts b/src/core/packages/chrome/navigation/src/utils/trap_focus.ts index 44edd159454f0..281674d9cb8b6 100644 --- a/src/core/packages/chrome/navigation/src/utils/trap_focus.ts +++ b/src/core/packages/chrome/navigation/src/utils/trap_focus.ts @@ -15,9 +15,9 @@ import { getFocusableElements } from './get_focusable_elements'; * Utility function for focus trap functionality */ export const trapFocus = (ref: RefObject) => (e: KeyboardEvent) => { - const elements = getFocusableElements(ref); - if (!ref.current || e.key !== 'Tab') return; + + const elements = getFocusableElements(ref.current); if (!ref.current.contains(document.activeElement)) return; if (!elements.length) return; diff --git a/src/core/packages/chrome/navigation/src/utils/use_roving_index.ts b/src/core/packages/chrome/navigation/src/utils/use_roving_index.ts deleted file mode 100644 index 5cb3c98b67112..0000000000000 --- a/src/core/packages/chrome/navigation/src/utils/use_roving_index.ts +++ /dev/null @@ -1,68 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the "Elastic License - * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side - * Public License v 1"; you may not use this file except in compliance with, at - * your election, the "Elastic License 2.0", the "GNU Affero General Public - * License v3.0 only", or the "Server Side Public License, v 1". - */ - -import type { RefObject } from 'react'; -import { useCallback, useEffect } from 'react'; - -import { getFocusableElements } from './get_focusable_elements'; - -export const useRovingIndex = (ref: RefObject | null) => { - const elements = getFocusableElements(ref); - - useEffect(() => { - elements.forEach((el, idx) => { - el.tabIndex = idx === 0 ? 0 : -1; - }); - }, [elements]); - - const handleKeyDown = useCallback( - (e: KeyboardEvent) => { - switch (e.key) { - case 'ArrowDown': { - if (elements.length > 0) { - const currentIndex = elements.findIndex((el) => el === document.activeElement); - const nextIndex = (currentIndex + 1) % elements.length; - elements[nextIndex].focus(); - } - break; - } - case 'ArrowUp': { - if (elements.length > 0) { - const currentIndex = elements.findIndex((el) => el === document.activeElement); - const prevIndex = (currentIndex - 1 + elements.length) % elements.length; - elements[prevIndex].focus(); - } - break; - } - case 'Home': { - if (elements.length > 0) { - elements[0].focus(); - } - break; - } - case 'End': { - if (elements.length > 0) { - elements[elements.length - 1].focus(); - } - break; - } - } - }, - [elements] - ); - - useEffect(() => { - const currentRef = ref?.current; - currentRef?.addEventListener('keydown', handleKeyDown); - - return () => { - currentRef?.removeEventListener('keydown', handleKeyDown); - }; - }, [ref, handleKeyDown]); -}; diff --git a/src/core/packages/chrome/navigation/tsconfig.json b/src/core/packages/chrome/navigation/tsconfig.json index 0afaa26e1d1be..0dd2806b6b3c7 100644 --- a/src/core/packages/chrome/navigation/tsconfig.json +++ b/src/core/packages/chrome/navigation/tsconfig.json @@ -4,6 +4,7 @@ "outDir": "target/types", "types": [ "jest", + "@testing-library/jest-dom", "node", "react", "@kbn/ambient-ui-types", @@ -18,6 +19,6 @@ "@kbn/core-chrome-layout-components", "@kbn/core-chrome-layout-constants", "@kbn/i18n", - "@kbn/i18n-react", + "@kbn/i18n-react" ] }