[SecuritySolution][Navigation] Classic nav updates

packages/kbn-optimizer/limits.yml

@@ -162,7 +162,7 @@ pageLoadAssetSize:
   searchQueryRules: 6689
   searchSynonyms: 6371
   security: 79627
-  securitySolution: 135301
+  securitySolution: 157027
   securitySolutionEss: 38689
   securitySolutionServerless: 52082
   serverless: 7412

src/platform/packages/shared/deeplinks/security/deep_links.ts

@@ -59,6 +59,7 @@ export enum SecurityPageName {
   hostsUncommonProcesses = 'hosts-uncommon_processes',
   kubernetes = 'kubernetes',
   landing = 'get_started',
+  launchpad = 'launchpad',
   network = 'network',
   networkAnomalies = 'network-anomalies',
   networkDns = 'network-dns',

x-pack/solutions/security/packages/side-nav/index.ts

@@ -5,6 +5,10 @@
  * 2.0.
  */
 
-export { SolutionSideNav, type SolutionSideNavProps } from './src';
+export {
+  SolutionSideNav,
+  type SolutionSideNavProps,
+  type SolutionSideNavInteractionVariant,
+} from './src';
 export { SolutionSideNavItemPosition } from './src/types';
 export type { SolutionSideNavItem, Tracker } from './src/types';

x-pack/solutions/security/packages/side-nav/src/index.tsx

@@ -7,9 +7,9 @@
 
 import React, { lazy, Suspense } from 'react';
 import { EuiLoadingSpinner } from '@elastic/eui';
-import type { SolutionSideNavProps } from './solution_side_nav';
+import type { SolutionSideNavInteractionVariant, SolutionSideNavProps } from './solution_side_nav';
 
-export type { SolutionSideNavProps };
+export type { SolutionSideNavProps, SolutionSideNavInteractionVariant };
 
 const SolutionSideNavLazy = lazy(() => import('./solution_side_nav'));
 

x-pack/solutions/security/packages/side-nav/src/solution_side_nav.styles.ts

@@ -5,16 +5,23 @@
  * 2.0.
  */
 
-import { transparentize, type EuiThemeComputed } from '@elastic/eui';
+import { type EuiThemeComputed, transparentize } from '@elastic/eui';
 import { css } from '@emotion/css';
 
-export const SolutionSideNavItemStyles = (euiTheme: EuiThemeComputed<{}>) => css`
+export type SolutionSideNavSelectedAppearance = 'default' | 'primary';
+
+export const SolutionSideNavItemStyles = (
+  euiTheme: EuiThemeComputed<{}>,
+  selectedAppearance: SolutionSideNavSelectedAppearance = 'default'
+) => css`
   * {
     // EuiListGroupItem changes the links font-weight, we need to override it
     font-weight: ${euiTheme.font.weight.regular};
   }
   &.solutionSideNavItem--isSelected {
-    background-color: ${transparentize(euiTheme.colors.lightShade, 0.5)};
+    background-color: ${selectedAppearance === 'primary'
+      ? euiTheme.colors.backgroundBasePrimary
+      : transparentize(euiTheme.colors.lightShade, 0.5)};
     & * {
       font-weight: ${euiTheme.font.weight.medium};
     }

x-pack/solutions/security/packages/side-nav/src/solution_side_nav.test.tsx

@@ -6,9 +6,10 @@
  */
 
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { userEvent } from '@testing-library/user-event';
-import { SolutionSideNav, type SolutionSideNavProps } from './solution_side_nav';
+import { SolutionSideNav } from './solution_side_nav';
+import type { SolutionSideNavProps } from './solution_side_nav';
 import type { SolutionSideNavItem } from './types';
 import { METRIC_TYPE } from '@kbn/analytics';
 import { TELEMETRY_EVENT } from './telemetry/const';
@@ -169,4 +170,177 @@ describe('SolutionSideNav', () => {
       expect(result.getByText('Users')).toBeInTheDocument();
     });
   });
+
+  describe('unifiedRow interaction variant', () => {
+    const firstChildOnClick = jest.fn((ev: { preventDefault: () => void }) => {
+      ev.preventDefault();
+    });
+    const panelItems: SolutionSideNavItem[] = [
+      {
+        id: 'dashboardsLanding',
+        label: 'Dashboards',
+        href: '/dashboards',
+        items: [
+          {
+            id: 'overview',
+            label: 'Overview',
+            href: '/overview-first',
+            onClick: firstChildOnClick,
+            description: 'Overview description',
+          },
+        ],
+      },
+      {
+        id: 'alerts',
+        label: 'Alerts',
+        href: '/alerts',
+      },
+      {
+        id: 'Rules',
+        label: 'Rules',
+        href: '/rules',
+        items: [
+          {
+            id: 'rulesManagement',
+            label: 'Rules Management',
+            href: '/rules-management',
+            description: 'Rules Management description',
+          },
+        ],
+      },
+    ];
+
+    beforeEach(() => {
+      firstChildOnClick.mockClear();
+    });
+
+    it('renders arrow hint instead of split panel button when item has children', () => {
+      const result = renderNav({
+        items: panelItems,
+        navLinkInteractionVariant: 'unifiedRow',
+        selectedId: 'alerts',
+      });
+      expect(
+        result.queryByTestId('solutionSideNavItemButton-dashboardsLanding')
+      ).not.toBeInTheDocument();
+      expect(
+        result.getByTestId('solutionSideNavItemPanelHint-dashboardsLanding')
+      ).toBeInTheDocument();
+    });
+
+    it('uses first child href on the parent row link', () => {
+      const result = renderNav({
+        items: panelItems,
+        navLinkInteractionVariant: 'unifiedRow',
+        selectedId: 'alerts',
+      });
+      expect(
+        result.getByTestId('solutionSideNavItemLink-dashboardsLanding').getAttribute('href')
+      ).toBe('/overview-first');
+    });
+
+    it('clicking the parent row opens the panel', async () => {
+      const result = renderNav({
+        items: panelItems,
+        navLinkInteractionVariant: 'unifiedRow',
+        selectedId: 'alerts',
+      });
+      await userEvent.click(result.getByTestId('solutionSideNavItemLink-dashboardsLanding'));
+      expect(result.getByTestId('solutionSideNavPanel')).toBeInTheDocument();
+      expect(result.getByText('Overview')).toBeInTheDocument();
+      expect(mockTrack).toHaveBeenCalledWith(
+        METRIC_TYPE.CLICK,
+        `${TELEMETRY_EVENT.PANEL_NAVIGATION_TOGGLE}dashboardsLanding`
+      );
+    });
+
+    it('should not show panel button in unifiedRow variant', () => {
+      const result = renderNav({
+        items: panelItems,
+        navLinkInteractionVariant: 'unifiedRow',
+        selectedId: 'alerts',
+      });
+      // Panel button should not exist for items with children in unifiedRow mode
+      expect(
+        result.queryByTestId('solutionSideNavItemButton-dashboardsLanding')
+      ).not.toBeInTheDocument();
+      expect(result.queryByTestId('solutionSideNavItemButton-Rules')).not.toBeInTheDocument();
+    });
+
+    it('should navigate directly when clicking item without children in unifiedRow mode', async () => {
+      const mockOnClick = jest.fn((ev) => {
+        ev.preventDefault();
+      });
+      const itemsWithoutChildren: SolutionSideNavItem[] = [
+        {
+          id: 'alerts',
+          label: 'Alerts',
+          href: '/alerts',
+          onClick: mockOnClick,
+        },
+      ];
+      const result = renderNav({
+        items: itemsWithoutChildren,
+        navLinkInteractionVariant: 'unifiedRow',
+        selectedId: 'alerts',
+      });
+      await userEvent.click(result.getByTestId('solutionSideNavItemLink-alerts'));
+      expect(mockOnClick).toHaveBeenCalled();
+    });
+  });
+
+  describe('navLinkInteractionVariant attribute', () => {
+    it('should use splitButton as default variant', () => {
+      const result = renderNav();
+      // In splitButton mode, panel button should be visible for items with children
+      expect(result.getByTestId('solutionSideNavItemButton-dashboardsLanding')).toBeInTheDocument();
+    });
+
+    it('should apply unifiedRow variant correctly', () => {
+      const result = renderNav({
+        items: mockItems,
+        navLinkInteractionVariant: 'unifiedRow',
+        selectedId: 'alerts',
+      });
+      // In unifiedRow mode, arrow hint should show instead of button
+      expect(
+        result.getByTestId('solutionSideNavItemPanelHint-dashboardsLanding')
+      ).toBeInTheDocument();
+      expect(
+        result.queryByTestId('solutionSideNavItemButton-dashboardsLanding')
+      ).not.toBeInTheDocument();
+    });
+
+    it('should switch between variants correctly', () => {
+      const { rerender } = render(
+        <SolutionSideNav
+          items={mockItems}
+          selectedId={'alerts'}
+          navLinkInteractionVariant="splitButton"
+          tracker={mockTrack}
+        />
+      );
+
+      // Check splitButton mode
+      expect(screen.getByTestId('solutionSideNavItemButton-dashboardsLanding')).toBeInTheDocument();
+
+      // Re-render with unifiedRow
+      rerender(
+        <SolutionSideNav
+          items={mockItems}
+          selectedId={'alerts'}
+          navLinkInteractionVariant="unifiedRow"
+          tracker={mockTrack}
+        />
+      );
+
+      // Check unifiedRow mode
+      expect(
+        screen.getByTestId('solutionSideNavItemPanelHint-dashboardsLanding')
+      ).toBeInTheDocument();
+      expect(
+        screen.queryByTestId('solutionSideNavItemButton-dashboardsLanding')
+      ).not.toBeInTheDocument();
+    });
+  });
 });