feat: rework breadcrumbs

Author: andreaskienle

public/locales/en.json

@@ -103,11 +103,8 @@
     "subtitleMessage": "Sorry, we couldn’t find what you are looking for.<br />The link may be incorrect or the {{entityType}} might have been removed.",
     "navigateHome": "Back to Homepage"
   },
-  "IntelligentBreadcrumbs": {
-    "homeLabel": "Home",
-    "projects": "Projects",
-    "workspaces": "Workspaces",
-    "mcps": "MCPs"
+  "PathAwareBreadcrumbs": {
+    "projectsLabel": "Projects"
   },
   "MCPContext": {
     "errorMessage": "An unknown error occurred"

src/Routes.ts

@@ -0,0 +1,5 @@
+export const Routes = {
+  Home: '/',
+  Project: '/mcp/projects/:projectName',
+  Mcp: '/mcp/projects/:projectName/workspaces/:workspaceName/mcps/:controlPlaneName',
+} as const;

src/components/Core/BreadcrumbFeedbackHeader.tsx

@@ -0,0 +1,63 @@
+import { Button, FlexBox, FlexBoxAlignItems, Menu, MenuItem } from '@ui5/webcomponents-react';
+
+import { useTranslation } from 'react-i18next';
+import { FeedbackButton } from './FeedbackButton.tsx';
+import { BetaButton } from './BetaButton.tsx';
+import { useRef, useState } from 'react';
+import { useAuthOnboarding } from '../../spaces/onboarding/auth/AuthContextOnboarding.tsx';
+import { SearchParamToggleVisibility } from '../Helper/FeatureToggleExistance.tsx';
+import { PathAwareBreadcrumbs } from './PathAwareBreadcrumbs/PathAwareBreadcrumbs.tsx';
+
+export function BreadcrumbFeedbackHeader() {
+  return (
+    <FlexBox alignItems={FlexBoxAlignItems.Center}>
+      <PathAwareBreadcrumbs />
+      <BetaButton />
+      <FeedbackButton />
+      <SearchParamToggleVisibility
+        shouldBeVisible={(params) => {
+          if (params === undefined) return false;
+          if (params.get('showHeaderBar') === null) return false;
+          return params?.get('showHeaderBar') === 'false';
+        }}
+      >
+        <LogoutMenu />
+      </SearchParamToggleVisibility>
+    </FlexBox>
+  );
+}
+
+function LogoutMenu() {
+  const auth = useAuthOnboarding();
+  const { t } = useTranslation();
+
+  const buttonRef = useRef(null);
+  const [menuIsOpen, setMenuIsOpen] = useState(false);
+  return (
+    <>
+      <Button
+        ref={buttonRef}
+        icon="menu2"
+        onClick={() => {
+          setMenuIsOpen(true);
+        }}
+      />
+      <Menu
+        opener={buttonRef.current}
+        open={menuIsOpen}
+        onClose={() => {
+          setMenuIsOpen(false);
+        }}
+      >
+        <MenuItem
+          icon="log"
+          text={t('ShellBar.signOutButton')}
+          onClick={async () => {
+            setMenuIsOpen(false);
+            await auth.logout();
+          }}
+        />
+      </Menu>
+    </>
+  );
+}

src/components/Core/IntelligentBreadcrumbs.tsx

@@ -0,0 +1,88 @@
+import { PathAwareBreadcrumbs } from './PathAwareBreadcrumbs';
+
+describe('PathAwareBreadcrumbs', () => {
+  const navigateCalls = [];
+  const fakeUseNavigate = () => (path: string) => navigateCalls.push(path);
+  const fakeUseParams = () => ({
+    projectName: 'my-project',
+    workspaceName: 'my-workspace',
+    controlPlaneName: 'my-control-plane',
+  });
+
+  beforeEach(() => {
+    navigateCalls.length = 0;
+  });
+
+  it('renders breadcrumbs for all path parameters', () => {
+    // @ts-ignore
+    cy.mount(<PathAwareBreadcrumbs useNavigate={fakeUseNavigate} useParams={fakeUseParams} />);
+
+    // Check that all breadcrumbs are rendered
+    cy.get("[data-testid='breadcrumb-item']").should('have.length', 4);
+    cy.get("[data-testid='breadcrumb-item']").eq(0).should('contain', '[LOCAL] Projects');
+    cy.get("[data-testid='breadcrumb-item']").eq(1).should('contain', 'my-project');
+    cy.get("[data-testid='breadcrumb-item']").eq(2).should('contain', 'my-workspace');
+    cy.get("[data-testid='breadcrumb-item']").eq(3).should('contain', 'my-control-plane');
+  });
+
+  it('navigates when clicking breadcrumbs for all path parameters', () => {
+    let lastNavigatedPath: string | null = null;
+    const fakeUseNavigate = () => (path: string) => {
+      lastNavigatedPath = path;
+    };
+    // @ts-ignore
+    cy.mount(<PathAwareBreadcrumbs useNavigate={fakeUseNavigate} useParams={fakeUseParams} />);
+
+    // Navigate to '/'
+    cy.contains('[LOCAL] Projects').click();
+    cy.wrap(null).then(() => {
+      expect(lastNavigatedPath).to.equal('/');
+    });
+
+    // Click on 'my-project' > Navigate to 'my-project'
+    cy.contains('my-project').click();
+    cy.wrap(null).then(() => {
+      expect(lastNavigatedPath).to.equal('/mcp/projects/my-project');
+    });
+
+    // Click on 'my-workspace' > Navigate to 'my-project' since workspaces don’t expose a direct path
+    cy.contains('my-workspace').click();
+    cy.wrap(null).then(() => {
+      expect(lastNavigatedPath).to.equal('/mcp/projects/my-project');
+    });
+
+    // Click on 'my-control-plane' > Navigate to 'my-control-plane'
+    cy.contains('my-control-plane').click();
+    cy.wrap(null).then(() => {
+      expect(lastNavigatedPath).to.equal('/mcp/projects/my-project/workspaces/my-workspace/mcps/my-control-plane');
+    });
+  });
+
+  it('renders only home breadcrumb when there are no path parameters', () => {
+    const fakeUseParams = () => ({});
+
+    // @ts-ignore
+    cy.mount(<PathAwareBreadcrumbs useNavigate={fakeUseNavigate} useParams={fakeUseParams} />);
+
+    cy.get("[data-testid='breadcrumb-item']").should('have.length', 1);
+  });
+
+  it('handles partial route parameters', () => {
+    const fakeUseParams = () => ({
+      projectName: 'my-project',
+      workspaceName: 'my-workspace',
+      // No controlPlaneName
+    });
+
+    // @ts-ignore
+    cy.mount(<PathAwareBreadcrumbs useNavigate={fakeUseNavigate} useParams={fakeUseParams} />);
+
+    // Should show 3 breadcrumbs
+    cy.get("[data-testid='breadcrumb-item']").should('have.length', 3);
+
+    // Verify data-target attributes
+    cy.get("[data-testid='breadcrumb-item']").eq(0).should('contain', '[LOCAL] Projects');
+    cy.get("[data-testid='breadcrumb-item']").eq(1).should('contain', 'my-project');
+    cy.get("[data-testid='breadcrumb-item']").eq(2).should('contain', 'my-workspace');
+  });
+});

src/components/Core/LandscapeLabel.tsx

@@ -0,0 +1,78 @@
+import { Breadcrumbs } from '@ui5/webcomponents-react';
+import { BreadcrumbsItem } from '@ui5/webcomponents-react/wrappers';
+import { generatePath, useNavigate as _useNavgigate, useParams as _useParams } from 'react-router-dom';
+
+import { useTranslation } from 'react-i18next';
+import { useFrontendConfig } from '../../../context/FrontendConfigContext.tsx';
+import { Routes } from '../../../Routes.ts';
+
+export interface PathAwareBreadcrumbsProps {
+  useNavigate?: typeof _useNavgigate;
+  useParams?: typeof _useParams;
+}
+export function PathAwareBreadcrumbs({
+  useNavigate = _useNavgigate,
+  useParams = _useParams,
+}: PathAwareBreadcrumbsProps) {
+  const { projectName, workspaceName, controlPlaneName } = useParams();
+  const { t } = useTranslation();
+  const frontendConfig = useFrontendConfig();
+  const navigate = useNavigate();
+
+  const breadcrumbItems: { label: string; path: string }[] = [
+    {
+      label: `[${frontendConfig.landscape}] ${t('PathAwareBreadcrumbs.projectsLabel')}`,
+      path: Routes.Home,
+    },
+  ];
+
+  if (projectName) {
+    breadcrumbItems.push({
+      label: projectName,
+      path: generatePath(Routes.Project, {
+        projectName,
+      }),
+    });
+
+    if (workspaceName) {
+      breadcrumbItems.push({
+        label: workspaceName,
+        // Navigate to the project route since workspaces don't provide a direct path
+        path: generatePath(Routes.Project, {
+          projectName,
+        }),
+      });
+
+      if (controlPlaneName) {
+        breadcrumbItems.push({
+          label: controlPlaneName,
+          path: generatePath(Routes.Mcp, {
+            projectName,
+            workspaceName,
+            controlPlaneName,
+          }),
+        });
+      }
+    }
+  }
+
+  return (
+    <Breadcrumbs
+      design="NoCurrentPage"
+      onItemClick={(event) => {
+        event.preventDefault();
+        const target = event.detail.item.dataset.target;
+
+        if (target) {
+          navigate(target);
+        }
+      }}
+    >
+      {breadcrumbItems.map((item) => (
+        <BreadcrumbsItem key={item.path} data-target={item.path} data-testid="breadcrumb-item">
+          {item.label}
+        </BreadcrumbsItem>
+      ))}
+    </Breadcrumbs>
+  );
+}