[UI] breadcrumb fix (#10264)

* Allow middle-click on breadcrumbs

* Fix playwright test

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
                 )}`}

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');