Merge branch 'main' into fix/visualise-resources-on-graph-by-name-and-version

Author: andreaskienle

Dockerfile

@@ -1,5 +1,5 @@
 # BUILD STAGE
-FROM node:24-slim@sha256:0cce74a5708f603925e2bf01929da8d71e92b5e2493fcfb662d5a8ffed2d8ef1 AS build-stage
+FROM node:24-slim@sha256:3e69116c924bfcba6c6979aff60d966c37aef56d488ce091c69d442ebec9f103 AS build-stage
 WORKDIR /usr/src/app
 
 # Copy package.json and package-lock.json

package-lock.json

@@ -25,8 +25,8 @@
     "@apollo/client": "3.14.0",
     "@fastify/autoload": "6.3.1",
     "@fastify/cookie": "11.0.2",
-    "@fastify/env": "5.0.2",
-    "@fastify/helmet": "13.0.1",
+    "@fastify/env": "5.0.3",
+    "@fastify/helmet": "13.0.2",
     "@fastify/http-proxy": "11.3.0",
     "@fastify/secure-session": "8.2.0",
     "@fastify/sensible": "6.0.3",
@@ -48,7 +48,7 @@
     "diff": "^8.0.2",
     "dotenv": "17.2.2",
     "fastify": "5.6.1",
-    "fastify-plugin": "5.0.1",
+    "fastify-plugin": "5.1.0",
     "graphql": "16.11.0",
     "graphql-config": "5.1.5",
     "i18next": "25.5.2",
@@ -74,11 +74,11 @@
     "@types/dagre": "0.7.53",
     "@types/js-yaml": "4.0.9",
     "@types/node": "22.18.6",
-    "@types/react": "19.1.14",
+    "@types/react": "19.1.15",
     "@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.3",
+    "@vitejs/plugin-react": "5.0.4",
     "@vitest/eslint-plugin": "1.3.13",
     "cypress": "15.3.0",
     "eslint-config-prettier": "10.1.8",

package.json

@@ -371,7 +371,8 @@
     "update": "Update"
   },
   "yaml": {
-    "YAML": "File"
+    "YAML": "File",
+    "showOnlyImportant": "Show only important fields"
   },
   "createMCP": {
     "dialogTitle": "Create Managed Control Plane",

public/locales/en.json

@@ -6,6 +6,8 @@ import { SentryRoutes } from './mount.ts';
 import ProjectPage from './spaces/onboarding/pages/ProjectPage.tsx';
 import McpPage from './spaces/mcp/pages/McpPage.tsx';
 import { SearchParamToggleVisibility } from './components/Helper/FeatureToggleExistance.tsx';
+import { SplitterProvider } from './components/Splitter/SplitterContext.tsx';
+import { SplitterLayout } from './components/Splitter/SplitterLayout.tsx';
 
 function AppRouter() {
   return (
@@ -20,20 +22,24 @@ function AppRouter() {
         <ShellBarComponent />
       </SearchParamToggleVisibility>
 
-      <Router>
-        <SentryRoutes>
-          <Route path="/mcp" element={<GlobalProviderOutlet />}>
-            <Route path="projects" element={<ProjectListView />} />
-            <Route path="projects/:projectName" element={<ProjectPage />} />
-            <Route
-              path="projects/:projectName/workspaces/:workspaceName/mcps/:controlPlaneName"
-              element={<McpPage />}
-            />
-          </Route>
-          <Route path="/" element={<Navigate to="/mcp/projects" />} />
-          <Route path="*" element={<Navigate to="/" />} />
-        </SentryRoutes>
-      </Router>
+      <SplitterProvider>
+        <SplitterLayout>
+          <Router>
+            <SentryRoutes>
+              <Route path="/mcp" element={<GlobalProviderOutlet />}>
+                <Route path="projects" element={<ProjectListView />} />
+                <Route path="projects/:projectName" element={<ProjectPage />} />
+                <Route
+                  path="projects/:projectName/workspaces/:workspaceName/mcps/:controlPlaneName"
+                  element={<McpPage />}
+                />
+              </Route>
+              <Route path="/" element={<Navigate to="/mcp/projects" />} />
+              <Route path="*" element={<Navigate to="/" />} />
+            </SentryRoutes>
+          </Router>
+        </SplitterLayout>
+      </SplitterProvider>
     </>
   );
 }

src/AppRouter.tsx

@@ -11,6 +11,7 @@ import { YamlViewButton } from '../Yaml/YamlViewButton.tsx';
 import { useMemo } from 'react';
 import StatusFilter from '../Shared/StatusFilter/StatusFilter.tsx';
 import { ResourceStatusCell } from '../Shared/ResourceStatusCell.tsx';
+import { Resource } from '../../utils/removeManagedFieldsAndFilterData.ts';
 
 export default function FluxList() {
   const { data: gitReposData, error: repoErr, isLoading: repoIsLoading } = useApiResource(FluxRequest); //404 if component not enabled
@@ -81,7 +82,7 @@ export default function FluxList() {
         accessor: 'yaml',
         disableFilters: true,
         Cell: (cellData: CellData<KustomizationsResponse['items']>) => (
-          <YamlViewButton resourceObject={cellData.cell.row.original?.item} />
+          <YamlViewButton variant="resource" resource={cellData.cell.row.original?.item as Resource} />
         ),
       },
     ],
@@ -125,7 +126,9 @@ export default function FluxList() {
         width: 75,
         accessor: 'yaml',
         disableFilters: true,
-        Cell: (cellData: CellData<FluxRow>) => <YamlViewButton resourceObject={cellData.cell.row.original?.item} />,
+        Cell: (cellData: CellData<FluxRow>) => (
+          <YamlViewButton variant="resource" resource={cellData.cell.row.original?.item as Resource} />
+        ),
       },
     ],
     [t],
@@ -173,14 +176,14 @@ export default function FluxList() {
       <div className="crossplane-table-element">
         <FlexBox justifyContent={'Start'} alignItems={'Center'} gap={'0.5em'}>
           <Title level="H4">{t('FluxList.gitOpsTitle')}</Title>
-          <YamlViewButton resourceObject={gitReposData} />
+          <YamlViewButton variant="resource" resource={gitReposData as unknown as Resource} />
         </FlexBox>
         <ConfiguredAnalyticstable columns={gitReposColumns} isLoading={repoIsLoading} data={gitReposRows} />
       </div>
       <div className="crossplane-table-element">
         <FlexBox justifyContent={'Start'} alignItems={'Center'} gap={'0.5em'}>
           <Title level="H4">{t('FluxList.kustomizationsTitle')}</Title>
-          <YamlViewButton resourceObject={kustmizationData} />
+          <YamlViewButton variant="resource" resource={kustmizationData as unknown as Resource} />
         </FlexBox>
         <ConfiguredAnalyticstable
           columns={kustomizationsColumns}

src/components/ControlPlane/FluxList.tsx

@@ -17,6 +17,7 @@ import { YamlViewButton } from '../Yaml/YamlViewButton.tsx';
 import { useMemo } from 'react';
 import StatusFilter from '../Shared/StatusFilter/StatusFilter.tsx';
 import { ResourceStatusCell } from '../Shared/ResourceStatusCell.tsx';
+import { Resource } from '../../utils/removeManagedFieldsAndFilterData.ts';
 
 interface CellData<T> {
   cell: {
@@ -107,7 +108,7 @@ export function ManagedResources() {
         disableFilters: true,
         Cell: (cellData: CellData<ResourceRow>) =>
           cellData.cell.row.original?.item ? (
-            <YamlViewButton resourceObject={cellData.cell.row.original?.item} />
+            <YamlViewButton variant="resource" resource={cellData.cell.row.original?.item as Resource} />
           ) : undefined,
       },
     ],

src/components/ControlPlane/ManagedResources.tsx

@@ -19,6 +19,7 @@ import '@ui5/webcomponents-icons/dist/sys-enter-2';
 import '@ui5/webcomponents-icons/dist/sys-cancel-2';
 import StatusFilter from '../Shared/StatusFilter/StatusFilter.tsx';
 import { ResourceStatusCell } from '../Shared/ResourceStatusCell.tsx';
+import { Resource } from '../../utils/removeManagedFieldsAndFilterData.ts';
 
 interface CellData<T> {
   cell: {
@@ -110,7 +111,7 @@ export function Providers() {
         accessor: 'yaml',
         disableFilters: true,
         Cell: (cellData: CellData<ProvidersRow>) => (
-          <YamlViewButton resourceObject={cellData.cell.row.original?.item} />
+          <YamlViewButton variant="resource" resource={cellData.cell.row.original?.item as Resource} />
         ),
       },
     ],

src/components/ControlPlane/Providers.tsx

@@ -13,6 +13,7 @@ import { formatDateAsTimeAgo } from '../../utils/i18n/timeAgo';
 import { YamlViewButton } from '../Yaml/YamlViewButton.tsx';
 
 import { useMemo } from 'react';
+import { Resource } from '../../utils/removeManagedFieldsAndFilterData.ts';
 
 type Rows = {
   parent: string;
@@ -79,7 +80,7 @@ export function ProvidersConfig() {
         disableFilters: true,
         Cell: (cellData: CellData<Rows>) =>
           cellData.cell.row.original?.resource ? (
-            <YamlViewButton resourceObject={cellData.cell.row.original?.resource} />
+            <YamlViewButton variant="resource" resource={cellData.cell.row.original?.resource as Resource} />
           ) : undefined,
       },
     ],

src/components/ControlPlane/ProvidersConfig.tsx

@@ -22,13 +22,13 @@ import {
   PatchMCPResourceForDeletionBody,
 } from '../../../lib/api/types/crate/deleteMCP.ts';
 
-import { YamlViewButtonWithLoader } from '../../Yaml/YamlViewButtonWithLoader.tsx';
+import { YamlViewButton } from '../../Yaml/YamlViewButton.tsx';
 import { useToast } from '../../../context/ToastContext.tsx';
 import { canConnectToMCP } from '../controlPlanes.ts';
+
 import { Infobox } from '../../Ui/Infobox/Infobox.tsx';
 
 import { ControlPlaneCardMenu } from './ControlPlaneCardMenu.tsx';
-
 import { EditManagedControlPlaneWizardDataLoader } from '../../Wizards/CreateManagedControlPlane/EditManagedControlPlaneWizardDataLoader.tsx';
 import { DISPLAY_NAME_ANNOTATION } from '../../../lib/api/types/shared/keyNames.ts';
 
@@ -99,7 +99,8 @@ export const ControlPlaneCard = ({ controlPlane, workspace, projectName }: Props
                 setIsEditManagedControlPlaneWizardOpen={handleIsManagedControlPlaneWizardOpen}
               />
               <FlexBox direction="Row" justifyContent="SpaceBetween" alignItems="Center" gap={10}>
-                <YamlViewButtonWithLoader
+                <YamlViewButton
+                  variant="loader"
                   workspaceName={controlPlane.metadata.namespace}
                   resourceName={controlPlane.metadata.name}
                   resourceType={'managedcontrolplanes'}