From 34e4d944bdb0a958a4036de9440fdd97dd5fb455 Mon Sep 17 00:00:00 2001
From: Andreas Kienle <andreas.kienle@sap.com>
Date: Fri, 19 Sep 2025 17:15:23 +0200
Subject: [PATCH 1/4] feat: rework breadcrumbs

---
 public/locales/en.json                        |   7 +-
 src/Routes.ts                                 |   5 +
 .../Core/BreadcrumbFeedbackHeader.tsx         |  63 +++++++++
 .../Core/IntelligentBreadcrumbs.tsx           | 128 ------------------
 src/components/Core/LandscapeLabel.tsx        |   6 -
 .../PathAwareBreadcrumbs.cy.tsx               |  88 ++++++++++++
 .../PathAwareBreadcrumbs.tsx                  |  78 +++++++++++
 src/spaces/mcp/pages/McpPage.tsx              |   4 +-
 src/spaces/onboarding/pages/ProjectPage.tsx   |   4 +-
 src/views/ProjectList.tsx                     |   4 +-
 10 files changed, 242 insertions(+), 145 deletions(-)
 create mode 100644 src/Routes.ts
 create mode 100644 src/components/Core/BreadcrumbFeedbackHeader.tsx
 delete mode 100644 src/components/Core/IntelligentBreadcrumbs.tsx
 delete mode 100644 src/components/Core/LandscapeLabel.tsx
 create mode 100644 src/components/Core/PathAwareBreadcrumbs/PathAwareBreadcrumbs.cy.tsx
 create mode 100644 src/components/Core/PathAwareBreadcrumbs/PathAwareBreadcrumbs.tsx

diff --git a/public/locales/en.json b/public/locales/en.json
index e24cb086..47f56437 100644
--- a/public/locales/en.json
+++ b/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"
diff --git a/src/Routes.ts b/src/Routes.ts
new file mode 100644
index 00000000..fd3ef0a1
--- /dev/null
+++ b/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;
diff --git a/src/components/Core/BreadcrumbFeedbackHeader.tsx b/src/components/Core/BreadcrumbFeedbackHeader.tsx
new file mode 100644
index 00000000..4d4a4745
--- /dev/null
+++ b/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>
+    </>
+  );
+}
diff --git a/src/components/Core/IntelligentBreadcrumbs.tsx b/src/components/Core/IntelligentBreadcrumbs.tsx
deleted file mode 100644
index 8e641ce2..00000000
--- a/src/components/Core/IntelligentBreadcrumbs.tsx
+++ /dev/null
@@ -1,128 +0,0 @@
-import {
-  Breadcrumbs,
-  BreadcrumbsDomRef,
-  Button,
-  FlexBox,
-  FlexBoxAlignItems,
-  Menu,
-  MenuItem,
-  Ui5CustomEvent,
-} from '@ui5/webcomponents-react';
-import { BreadcrumbsItem } from '@ui5/webcomponents-react/wrappers';
-import { NavigateOptions, useParams } from 'react-router-dom';
-import useLuigiNavigate from '../Shared/useLuigiNavigate.tsx';
-import LandscapeLabel from './LandscapeLabel.tsx';
-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';
-
-const PREFIX = '/mcp';
-
-function navigateFromBreadcrumbs(navigate: (to: string, options?: NavigateOptions) => void) {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  return (event: Ui5CustomEvent<BreadcrumbsDomRef, any>) => {
-    event.preventDefault();
-    // @ts-ignore
-    const href = event.detail.item.href;
-    navigate(href);
-  };
-}
-
-export default function IntelligentBreadcrumbs() {
-  const { projectName, workspaceName, controlPlaneName } = useParams();
-  const navigate = useLuigiNavigate();
-  const { t } = useTranslation();
-
-  return (
-    <>
-      <Breadcrumbs onItemClick={navigateFromBreadcrumbs(navigate)}>
-        <BreadcrumbsItem href={`${PREFIX}/projects`}>
-          <LandscapeLabel /> {t('IntelligentBreadcrumbs.homeLabel')}{' '}
-        </BreadcrumbsItem>
-        {projectName && (
-          <>
-            <BreadcrumbsItem href={`${PREFIX}/projects`}>{t('IntelligentBreadcrumbs.projects')}</BreadcrumbsItem>
-            <BreadcrumbsItem href={`${PREFIX}/projects/${projectName}`}>{projectName}</BreadcrumbsItem>
-            {workspaceName && (
-              <>
-                <BreadcrumbsItem href={`${PREFIX}/projects/${projectName}`}>
-                  {t('IntelligentBreadcrumbs.workspaces')}
-                </BreadcrumbsItem>
-                <BreadcrumbsItem href={`${PREFIX}/projects/${projectName}`}>{workspaceName}</BreadcrumbsItem>
-                {controlPlaneName && (
-                  <>
-                    <BreadcrumbsItem href={`${PREFIX}/projects/${projectName}`}>
-                      {t('IntelligentBreadcrumbs.mcps')}
-                    </BreadcrumbsItem>
-                    <BreadcrumbsItem
-                      href={`${PREFIX}/projects/${projectName}/workspaces/${workspaceName}/mcps/${controlPlaneName}`}
-                    >
-                      {controlPlaneName}
-                    </BreadcrumbsItem>
-                  </>
-                )}
-              </>
-            )}
-          </>
-        )}
-      </Breadcrumbs>
-    </>
-  );
-}
-
-export function BreadCrumbFeedbackHeader() {
-  return (
-    <FlexBox alignItems={FlexBoxAlignItems.Center}>
-      <IntelligentBreadcrumbs />
-      <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>
-    </>
-  );
-}
diff --git a/src/components/Core/LandscapeLabel.tsx b/src/components/Core/LandscapeLabel.tsx
deleted file mode 100644
index 119b47ce..00000000
--- a/src/components/Core/LandscapeLabel.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import { useFrontendConfig } from '../../context/FrontendConfigContext.tsx';
-
-export default function LandscapeLabel() {
-  const frontendConfig = useFrontendConfig();
-  return <>{`[${frontendConfig.landscape}]`}</>;
-}
diff --git a/src/components/Core/PathAwareBreadcrumbs/PathAwareBreadcrumbs.cy.tsx b/src/components/Core/PathAwareBreadcrumbs/PathAwareBreadcrumbs.cy.tsx
new file mode 100644
index 00000000..92e9f207
--- /dev/null
+++ b/src/components/Core/PathAwareBreadcrumbs/PathAwareBreadcrumbs.cy.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');
+  });
+});
diff --git a/src/components/Core/PathAwareBreadcrumbs/PathAwareBreadcrumbs.tsx b/src/components/Core/PathAwareBreadcrumbs/PathAwareBreadcrumbs.tsx
new file mode 100644
index 00000000..858d7afe
--- /dev/null
+++ b/src/components/Core/PathAwareBreadcrumbs/PathAwareBreadcrumbs.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>
+  );
+}
diff --git a/src/spaces/mcp/pages/McpPage.tsx b/src/spaces/mcp/pages/McpPage.tsx
index de04cac0..25abd36a 100644
--- a/src/spaces/mcp/pages/McpPage.tsx
+++ b/src/spaces/mcp/pages/McpPage.tsx
@@ -7,7 +7,7 @@ import '@ui5/webcomponents-fiori/dist/illustrations/SimpleError';
 // thorws error sometimes if not imported
 import '@ui5/webcomponents-fiori/dist/illustrations/BeforeSearch';
 import IllustratedError from '../../../components/Shared/IllustratedError.tsx';
-import { BreadCrumbFeedbackHeader } from '../../../components/Core/IntelligentBreadcrumbs.tsx';
+import { BreadcrumbFeedbackHeader } from '../../../components/Core/BreadcrumbFeedbackHeader.tsx';
 
 import FluxList from '../../../components/ControlPlane/FluxList.tsx';
 import { ControlPlane as ControlPlaneResource } from '../../../lib/api/types/crate/controlPlanes.ts';
@@ -65,7 +65,7 @@ export default function McpPage() {
             titleArea={
               <ObjectPageTitle
                 header={controlPlaneName}
-                breadcrumbs={<BreadCrumbFeedbackHeader />}
+                breadcrumbs={<BreadcrumbFeedbackHeader />}
                 //TODO: actionBar should use Toolbar and ToolbarButton for consistent design
                 actionsBar={
                   <div
diff --git a/src/spaces/onboarding/pages/ProjectPage.tsx b/src/spaces/onboarding/pages/ProjectPage.tsx
index ab1808e3..cd493e1f 100644
--- a/src/spaces/onboarding/pages/ProjectPage.tsx
+++ b/src/spaces/onboarding/pages/ProjectPage.tsx
@@ -2,7 +2,7 @@ import { ObjectPage, ObjectPageTitle, Title } from '@ui5/webcomponents-react';
 import ProjectChooser from '../../../components/Projects/ProjectChooser.tsx';
 import { useParams } from 'react-router-dom';
 import ControlPlaneListAllWorkspaces from '../../../components/ControlPlanes/List/ControlPlaneListAllWorkspaces.tsx';
-import { BreadCrumbFeedbackHeader } from '../../../components/Core/IntelligentBreadcrumbs.tsx';
+import { BreadcrumbFeedbackHeader } from '../../../components/Core/BreadcrumbFeedbackHeader.tsx';
 import { ControlPlaneListToolbar } from '../../../components/ControlPlanes/List/ControlPlaneListToolbar.tsx';
 import { Trans, useTranslation } from 'react-i18next';
 import { useApiResource } from '../../../lib/api/useApiResource.ts';
@@ -52,7 +52,7 @@ export default function ProjectPage() {
                 <ProjectChooser currentProjectName={projectName ?? ''} />
               </div>
             }
-            breadcrumbs={<BreadCrumbFeedbackHeader />}
+            breadcrumbs={<BreadcrumbFeedbackHeader />}
             actionsBar={<ControlPlaneListToolbar projectName={projectName ?? ''} />}
           />
         }
diff --git a/src/views/ProjectList.tsx b/src/views/ProjectList.tsx
index ebb9fdd0..6fabb12c 100644
--- a/src/views/ProjectList.tsx
+++ b/src/views/ProjectList.tsx
@@ -1,6 +1,6 @@
 import { ObjectPage, ObjectPageTitle } from '@ui5/webcomponents-react';
 import ProjectsList from '../components/Projects/ProjectsList.tsx';
-import { BreadCrumbFeedbackHeader } from '../components/Core/IntelligentBreadcrumbs.tsx';
+import { BreadcrumbFeedbackHeader } from '../components/Core/BreadcrumbFeedbackHeader.tsx';
 import { ProjectListToolbar } from '../components/Projects/ProjectListToolbar.tsx';
 import { useTranslation } from 'react-i18next';
 
@@ -13,7 +13,7 @@ export default function ProjectsListView() {
       titleArea={
         <ObjectPageTitle
           header={t('ProjectsListView.pageTitle')}
-          breadcrumbs={<BreadCrumbFeedbackHeader />}
+          breadcrumbs={<BreadcrumbFeedbackHeader />}
           actionsBar={<ProjectListToolbar />}
         />
       }

From 59e1697bcdb9d5c66ea341197ea5418ea896efed Mon Sep 17 00:00:00 2001
From: Andreas Kienle <andreas.kienle@sap.com>
Date: Fri, 19 Sep 2025 17:24:22 +0200
Subject: [PATCH 2/4] fix(typo)

---
 .../Core/PathAwareBreadcrumbs/PathAwareBreadcrumbs.tsx      | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/Core/PathAwareBreadcrumbs/PathAwareBreadcrumbs.tsx b/src/components/Core/PathAwareBreadcrumbs/PathAwareBreadcrumbs.tsx
index 858d7afe..403d643c 100644
--- a/src/components/Core/PathAwareBreadcrumbs/PathAwareBreadcrumbs.tsx
+++ b/src/components/Core/PathAwareBreadcrumbs/PathAwareBreadcrumbs.tsx
@@ -1,17 +1,17 @@
 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 { generatePath, useNavigate as _useNavigate, 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;
+  useNavigate?: typeof _useNavigate;
   useParams?: typeof _useParams;
 }
 export function PathAwareBreadcrumbs({
-  useNavigate = _useNavgigate,
+  useNavigate = _useNavigate,
   useParams = _useParams,
 }: PathAwareBreadcrumbsProps) {
   const { projectName, workspaceName, controlPlaneName } = useParams();

From 38c7feda9c77102cd26f1da6f05d8cb8895f618c Mon Sep 17 00:00:00 2001
From: Andreas Kienle <andreas.kienle@sap.com>
Date: Fri, 19 Sep 2025 17:40:03 +0200
Subject: [PATCH 3/4] fix(types)

---
 .../PathAwareBreadcrumbs.cy.tsx               | 27 ++++++++-----------
 1 file changed, 11 insertions(+), 16 deletions(-)

diff --git a/src/components/Core/PathAwareBreadcrumbs/PathAwareBreadcrumbs.cy.tsx b/src/components/Core/PathAwareBreadcrumbs/PathAwareBreadcrumbs.cy.tsx
index 92e9f207..9888ef13 100644
--- a/src/components/Core/PathAwareBreadcrumbs/PathAwareBreadcrumbs.cy.tsx
+++ b/src/components/Core/PathAwareBreadcrumbs/PathAwareBreadcrumbs.cy.tsx
@@ -1,20 +1,22 @@
 import { PathAwareBreadcrumbs } from './PathAwareBreadcrumbs';
+import { useNavigate, useParams } from 'react-router-dom';
 
 describe('PathAwareBreadcrumbs', () => {
-  const navigateCalls = [];
-  const fakeUseNavigate = () => (path: string) => navigateCalls.push(path);
-  const fakeUseParams = () => ({
+  let lastNavigatedPath = '';
+  const fakeUseNavigate = (() => (path: string) => {
+    lastNavigatedPath = path;
+  }) as typeof useNavigate;
+  const fakeUseParams = (() => ({
     projectName: 'my-project',
     workspaceName: 'my-workspace',
     controlPlaneName: 'my-control-plane',
-  });
+  })) as typeof useParams;
 
   beforeEach(() => {
-    navigateCalls.length = 0;
+    lastNavigatedPath = '';
   });
 
   it('renders breadcrumbs for all path parameters', () => {
-    // @ts-ignore
     cy.mount(<PathAwareBreadcrumbs useNavigate={fakeUseNavigate} useParams={fakeUseParams} />);
 
     // Check that all breadcrumbs are rendered
@@ -26,11 +28,6 @@ describe('PathAwareBreadcrumbs', () => {
   });
 
   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 '/'
@@ -59,22 +56,20 @@ describe('PathAwareBreadcrumbs', () => {
   });
 
   it('renders only home breadcrumb when there are no path parameters', () => {
-    const fakeUseParams = () => ({});
+    const fakeUseParams = (() => ({})) as typeof useParams;
 
-    // @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 = () => ({
+    const fakeUseParams = (() => ({
       projectName: 'my-project',
       workspaceName: 'my-workspace',
       // No controlPlaneName
-    });
+    })) as typeof useParams;
 
-    // @ts-ignore
     cy.mount(<PathAwareBreadcrumbs useNavigate={fakeUseNavigate} useParams={fakeUseParams} />);
 
     // Should show 3 breadcrumbs

From 2f0a9bcedaddcb69d238eea899780b6ecd11823c Mon Sep 17 00:00:00 2001
From: Andreas Kienle <andreas.kienle@sap.com>
Date: Fri, 19 Sep 2025 17:53:05 +0200
Subject: [PATCH 4/4] feat: remove MCP name from breadcrumbs

---
 public/locales/en.json                             |  2 +-
 .../PathAwareBreadcrumbs.cy.tsx                    | 14 +++-----------
 .../PathAwareBreadcrumbs/PathAwareBreadcrumbs.tsx  | 13 +------------
 src/spaces/mcp/pages/McpPage.tsx                   |  1 +
 4 files changed, 6 insertions(+), 24 deletions(-)

diff --git a/public/locales/en.json b/public/locales/en.json
index 47f56437..e9b5cadf 100644
--- a/public/locales/en.json
+++ b/public/locales/en.json
@@ -6,7 +6,7 @@
     "signInButton": "Sign in"
   },
   "Entities": {
-    "ManagedControlPlane": "Managed Control Plane",
+    "ManagedControlPlane": "ManagedControlPlane",
     "Project": "Project",
     "Workspace": "Workspace",
     "Users": "Users",
diff --git a/src/components/Core/PathAwareBreadcrumbs/PathAwareBreadcrumbs.cy.tsx b/src/components/Core/PathAwareBreadcrumbs/PathAwareBreadcrumbs.cy.tsx
index 9888ef13..73b800bf 100644
--- a/src/components/Core/PathAwareBreadcrumbs/PathAwareBreadcrumbs.cy.tsx
+++ b/src/components/Core/PathAwareBreadcrumbs/PathAwareBreadcrumbs.cy.tsx
@@ -20,11 +20,10 @@ describe('PathAwareBreadcrumbs', () => {
     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']").should('have.length', 3);
     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', () => {
@@ -47,12 +46,6 @@ describe('PathAwareBreadcrumbs', () => {
     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', () => {
@@ -66,18 +59,17 @@ describe('PathAwareBreadcrumbs', () => {
   it('handles partial route parameters', () => {
     const fakeUseParams = (() => ({
       projectName: 'my-project',
-      workspaceName: 'my-workspace',
+      // No workspaceName
       // No controlPlaneName
     })) as typeof useParams;
 
     cy.mount(<PathAwareBreadcrumbs useNavigate={fakeUseNavigate} useParams={fakeUseParams} />);
 
     // Should show 3 breadcrumbs
-    cy.get("[data-testid='breadcrumb-item']").should('have.length', 3);
+    cy.get("[data-testid='breadcrumb-item']").should('have.length', 2);
 
     // 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');
   });
 });
diff --git a/src/components/Core/PathAwareBreadcrumbs/PathAwareBreadcrumbs.tsx b/src/components/Core/PathAwareBreadcrumbs/PathAwareBreadcrumbs.tsx
index 403d643c..96fd2c98 100644
--- a/src/components/Core/PathAwareBreadcrumbs/PathAwareBreadcrumbs.tsx
+++ b/src/components/Core/PathAwareBreadcrumbs/PathAwareBreadcrumbs.tsx
@@ -14,7 +14,7 @@ export function PathAwareBreadcrumbs({
   useNavigate = _useNavigate,
   useParams = _useParams,
 }: PathAwareBreadcrumbsProps) {
-  const { projectName, workspaceName, controlPlaneName } = useParams();
+  const { projectName, workspaceName } = useParams();
   const { t } = useTranslation();
   const frontendConfig = useFrontendConfig();
   const navigate = useNavigate();
@@ -42,17 +42,6 @@ export function PathAwareBreadcrumbs({
           projectName,
         }),
       });
-
-      if (controlPlaneName) {
-        breadcrumbItems.push({
-          label: controlPlaneName,
-          path: generatePath(Routes.Mcp, {
-            projectName,
-            workspaceName,
-            controlPlaneName,
-          }),
-        });
-      }
     }
   }
 
diff --git a/src/spaces/mcp/pages/McpPage.tsx b/src/spaces/mcp/pages/McpPage.tsx
index 25abd36a..c001e9ca 100644
--- a/src/spaces/mcp/pages/McpPage.tsx
+++ b/src/spaces/mcp/pages/McpPage.tsx
@@ -65,6 +65,7 @@ export default function McpPage() {
             titleArea={
               <ObjectPageTitle
                 header={controlPlaneName}
+                subHeader={t('Entities.ManagedControlPlane')}
                 breadcrumbs={<BreadcrumbFeedbackHeader />}
                 //TODO: actionBar should use Toolbar and ToolbarButton for consistent design
                 actionsBar={