back improvements

Author: Dosant

src/core/packages/chrome/app-header/src/app_header/app_header.test.tsx

@@ -10,7 +10,7 @@
 import React from 'react';
 import '@testing-library/jest-dom';
 import { BehaviorSubject } from 'rxjs';
-import { fireEvent, render, screen } from '@testing-library/react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { EuiButtonIcon } from '@elastic/eui';
 import type { InternalChromeStart } from '@kbn/core-chrome-browser-internal-types';
 import { ChromeServiceProvider } from '@kbn/core-chrome-browser-context';
@@ -99,4 +99,33 @@ describe('AppHeaderView', () => {
     expect(screen.getByTestId('alertsTab')).toBeInTheDocument();
     expect(screen.getByText('3')).toBeInTheDocument();
   });
+
+  it('only treats exact base path prefixes as already prepended for back links', () => {
+    const chrome = chromeServiceMock.createStartContract();
+    chrome.componentDeps.basePath.get.mockReturnValue('/base');
+    chrome.componentDeps.basePath.prepend.mockImplementation((path: string) => `/base${path}`);
+
+    renderAppHeader(<AppHeaderView back="/base-other/app" />, chrome);
+
+    expect(screen.getByTestId('appHeaderBack')).toHaveAttribute('href', '/base/base-other/app');
+  });
+
+  it('renders multiple back targets as a menu and closes it after selection', async () => {
+    const backClick = jest.fn((event: React.MouseEvent) => event.preventDefault());
+
+    renderAppHeader(
+      <AppHeaderView
+        back={[
+          { href: '/app/first', label: 'First app' },
+          { href: '/app/second', label: 'Second app', onClick: backClick },
+        ]}
+      />
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: 'Open back navigation menu' }));
+    fireEvent.click(screen.getByText('Second app'));
+
+    expect(backClick).toHaveBeenCalledTimes(1);
+    await waitFor(() => expect(screen.queryByText('Second app')).not.toBeInTheDocument());
+  });
 });

src/core/packages/chrome/app-header/src/app_header/back_button.tsx

@@ -30,6 +30,10 @@ const getBackToLabel = (destination: string) =>
     values: { destination },
   });
 
+const backMenuLabel = i18n.translate('core.ui.chrome.appHeader.backButtonMenuAriaLabel', {
+  defaultMessage: 'Open back navigation menu',
+});
+
 const useBackButtonStyles = () => {
   const { euiTheme } = useEuiTheme();
 
@@ -57,6 +61,7 @@ export const BackButton = React.memo<BackButtonProps>(({ targets }) => {
   const tooltip = primary?.backDestinationLabel
     ? getBackToLabel(primary.backDestinationLabel)
     : backLabel;
+  const buttonLabel = targets.length > 1 ? backMenuLabel : tooltip;
 
   if (!primary) {
     return null;
@@ -69,10 +74,14 @@ export const BackButton = React.memo<BackButtonProps>(({ targets }) => {
       display="empty"
       size="xs"
       css={styles.button}
-      aria-label={tooltip}
+      aria-label={buttonLabel}
       data-test-subj="appHeaderBack"
       {...(targets.length > 1
-        ? { onClick: togglePopover }
+        ? {
+            onClick: togglePopover,
+            'aria-haspopup': 'menu' as const,
+            'aria-expanded': isPopoverOpen,
+          }
         : { href: primary.backHref, onClick: primary.backOnClick })}
     />
   );
@@ -89,7 +98,14 @@ export const BackButton = React.memo<BackButtonProps>(({ targets }) => {
       >
         <EuiContextMenuPanel
           items={targets.map((target, idx) => (
-            <EuiContextMenuItem key={idx} href={target.backHref} onClick={target.backOnClick}>
+            <EuiContextMenuItem
+              key={idx}
+              href={target.backHref}
+              onClick={(event) => {
+                closePopover();
+                target.backOnClick?.(event);
+              }}
+            >
               {target.backDestinationLabel ?? target.backHref}
             </EuiContextMenuItem>
           ))}

src/core/packages/chrome/app-header/src/app_header/hooks/use_back_navigation.ts

@@ -20,6 +20,10 @@ export interface BackNavigation {
 
 const EMPTY: BackNavigation[] = [];
 
+const hasBasePathPrefix = (href: string, basePath: string): boolean => {
+  return href === basePath || href.startsWith(`${basePath}/`);
+};
+
 export function useBackNavTargets(
   back: AppHeaderBack | AppHeaderBack[] | undefined
 ): BackNavigation[] {
@@ -32,17 +36,24 @@ export function useBackNavTargets(
     const backItems = Array.isArray(back) ? back : [back];
     const base = basePath.get();
     const explicit: BackNavigation[] = [];
+    const seenHrefs = new Set<string>();
     for (const b of backItems) {
       const target = typeof b === 'string' ? { href: b } : b;
-      if (target.href?.trim()) {
-        const href =
-          base && target.href.startsWith(base) ? target.href : basePath.prepend(target.href);
-        explicit.push({
-          backHref: href,
-          backOnClick: target.onClick,
-          backDestinationLabel: target.label,
-        });
+      const targetHref = target.href?.trim();
+      if (!targetHref) {
+        continue;
+      }
+      const href =
+        base && hasBasePathPrefix(targetHref, base) ? targetHref : basePath.prepend(targetHref);
+      if (seenHrefs.has(href)) {
+        continue;
       }
+      seenHrefs.add(href);
+      explicit.push({
+        backHref: href,
+        backOnClick: target.onClick,
+        backDestinationLabel: target.label,
+      });
     }
     return explicit.length > 0 ? explicit : EMPTY;
   }, [back, basePath]);