Merge branch 'main' into ft/logo

Author: lucasgoral

Dockerfile

@@ -18,7 +18,7 @@ RUN npm prune --omit=dev
 
 
 # PRODUCTION STAGE
-FROM gcr.io/distroless/nodejs24-debian12@sha256:e6af293a96996c2a6d1e8a440600518ec614571a91356a38c55f316ff1ee9924 AS production
+FROM gcr.io/distroless/nodejs24-debian12@sha256:b8be532fe81829b3803c832989cba7f42de62b2fbc8c7599cae30f378882ea12 AS production
 WORKDIR /usr/src/app
 
 # Copy built files

package-lock.json

@@ -34,20 +34,20 @@
     "@fastify/static": "8.2.0",
     "@fastify/vite": "8.2.0",
     "@hookform/resolvers": "5.2.2",
-    "@sentry/node": "10.11.0",
-    "@sentry/react": "10.11.0",
+    "@sentry/node": "10.14.0",
+    "@sentry/react": "10.14.0",
     "@sentry/vite-plugin": "4.3.0",
     "@ui5/webcomponents": "2.14.0",
     "@ui5/webcomponents-fiori": "2.14.0",
     "@ui5/webcomponents-icons": "2.14.0",
     "@ui5/webcomponents-react": "2.14.1",
     "@ui5/webcomponents-react-charts": "2.14.1",
-    "@xyflow/react": "12.8.4",
+    "@xyflow/react": "12.8.5",
     "clsx": "2.1.1",
     "dagre": "0.8.5",
     "diff": "^8.0.2",
     "dotenv": "17.2.2",
-    "fastify": "5.6.0",
+    "fastify": "5.6.1",
     "fastify-plugin": "5.0.1",
     "graphql": "16.11.0",
     "graphql-config": "5.1.5",
@@ -57,29 +57,29 @@
     "react": "19.1.1",
     "react-dom": "19.1.1",
     "react-error-boundary": "6.0.0",
-    "react-hook-form": "7.62.0",
+    "react-hook-form": "7.63.0",
     "react-i18next": "15.7.3",
     "react-router-dom": "7.9.1",
     "react-syntax-highlighter": "15.6.6",
     "react-time-ago": "7.3.5",
     "swr": "2.3.6",
     "yaml": "2.8.1",
-    "zod": "4.1.8"
+    "zod": "4.1.11"
   },
   "devDependencies": {
     "@eslint/eslintrc": "3.3.1",
-    "@eslint/js": "9.35.0",
+    "@eslint/js": "9.36.0",
     "@graphql-codegen/cli": "6.0.0",
-    "@graphql-codegen/client-preset": "5.0.0",
+    "@graphql-codegen/client-preset": "5.0.1",
     "@types/dagre": "0.7.53",
     "@types/js-yaml": "4.0.9",
-    "@types/node": "22.18.3",
+    "@types/node": "22.18.6",
     "@types/react": "19.1.13",
     "@types/react-dom": "19.1.9",
     "@types/react-syntax-highlighter": "15.5.13",
     "@ui5/webcomponents-cypress-commands": "2.14.1",
-    "@vitejs/plugin-react": "5.0.2",
-    "@vitest/eslint-plugin": "1.3.9",
+    "@vitejs/plugin-react": "5.0.3",
+    "@vitest/eslint-plugin": "1.3.12",
     "cypress": "15.2.0",
     "eslint-config-prettier": "10.1.8",
     "eslint-import-resolver-typescript": "4.4.4",
@@ -95,8 +95,8 @@
     "prettier": "3.6.2",
     "tsx": "4.20.5",
     "typescript": "5.9.2",
-    "typescript-eslint": "8.43.0",
-    "vite": "7.1.5",
+    "typescript-eslint": "8.44.1",
+    "vite": "7.1.7",
     "vitest": "3.2.4"
   }
 }

package.json

@@ -6,7 +6,7 @@
     "signInButton": "Sign In"
   },
   "Entities": {
-    "ManagedControlPlane": "Managed Control Plane",
+    "ManagedControlPlane": "ManagedControlPlane",
     "Project": "Project",
     "Workspace": "Workspace",
     "Users": "Users",
@@ -104,11 +104,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"

public/locales/en.json

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

src/Routes.ts

@@ -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/BreadcrumbFeedbackHeader.tsx

@@ -0,0 +1,75 @@
+import { PathAwareBreadcrumbs } from './PathAwareBreadcrumbs';
+import { useNavigate, useParams } from 'react-router-dom';
+
+describe('PathAwareBreadcrumbs', () => {
+  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(() => {
+    lastNavigatedPath = '';
+  });
+
+  it('renders breadcrumbs for all path parameters', () => {
+    cy.mount(<PathAwareBreadcrumbs useNavigate={fakeUseNavigate} useParams={fakeUseParams} />);
+
+    // Check that all breadcrumbs are rendered
+    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');
+  });
+
+  it('navigates when clicking breadcrumbs for all path parameters', () => {
+    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');
+    });
+  });
+
+  it('renders only home breadcrumb when there are no path parameters', () => {
+    const fakeUseParams = (() => ({})) as typeof useParams;
+
+    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',
+      // 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', 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');
+  });
+});