From c6f46c587de28313ab5498392c1999d9d07a8f98 Mon Sep 17 00:00:00 2001
From: Oliver <oliver.henry.walters@gmail.com>
Date: Thu, 4 Sep 2025 12:06:15 +1000
Subject: [PATCH] [UI] breadcrumb fix (#10264)

* Allow middle-click on breadcrumbs

* Fix playwright test
---
 src/frontend/src/components/nav/BreadcrumbList.tsx | 5 ++++-
 src/frontend/tests/pages/pui_sales_order.spec.ts   | 2 +-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/frontend/src/components/nav/BreadcrumbList.tsx b/src/frontend/src/components/nav/BreadcrumbList.tsx
index 1a50d33031..1c19b5395a 100644
--- a/src/frontend/src/components/nav/BreadcrumbList.tsx
+++ b/src/frontend/src/components/nav/BreadcrumbList.tsx
@@ -11,7 +11,7 @@ import { useMemo } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { identifierString } from '@lib/functions/Conversion';
-import { navigateToLink } from '@lib/functions/Navigation';
+import { getBaseUrl, navigateToLink } from '@lib/functions/Navigation';
 
 export type Breadcrumb = {
   icon?: React.ReactNode;
@@ -31,6 +31,8 @@ export function BreadcrumbList({
 }>) {
   const navigate = useNavigate();
 
+  const baseUrl = useMemo(() => getBaseUrl(), []);
+
   const elements = useMemo(() => {
     // Limit to 7 active elements
     if (breadcrumbs.length > 7) {
@@ -62,6 +64,7 @@ export function BreadcrumbList({
             return (
               <Anchor
                 key={`${index}-${breadcrumb.name}`}
+                href={`${baseUrl}${breadcrumb.url}`}
                 aria-label={`breadcrumb-${index}-${identifierString(
                   breadcrumb.name
                 )}`}
diff --git a/src/frontend/tests/pages/pui_sales_order.spec.ts b/src/frontend/tests/pages/pui_sales_order.spec.ts
index c7f29e0b90..b84b8adb9c 100644
--- a/src/frontend/tests/pages/pui_sales_order.spec.ts
+++ b/src/frontend/tests/pages/pui_sales_order.spec.ts
@@ -175,7 +175,7 @@ test('Sales Orders - Shipments', async ({ browser }) => {
   await page.getByText(tracking_number).waitFor();
 
   // Link back to sales order
-  await page.getByRole('link', { name: 'SO0006' }).click();
+  await page.getByRole('link', { name: 'breadcrumb-1-so0006' }).click();
 
   // Let's try to allocate some stock
   await loadTab(page, 'Line Items');