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

Author: Hubert-Szczepanski-SAP

package-lock.json

@@ -34,6 +34,7 @@
     "@fastify/static": "8.2.0",
     "@fastify/vite": "8.2.0",
     "@hookform/resolvers": "5.2.2",
+    "@monaco-editor/react": "^4.7.0",
     "@sentry/node": "10.15.0",
     "@sentry/react": "10.15.0",
     "@sentry/vite-plugin": "4.3.0",
@@ -54,13 +55,14 @@
     "i18next": "25.5.2",
     "javascript-time-ago": "2.5.12",
     "js-yaml": "4.1.0",
+    "monaco-editor": "^0.45.0",
+    "monaco-yaml": "^5.4.0",
     "react": "19.1.1",
     "react-dom": "19.1.1",
     "react-error-boundary": "6.0.0",
     "react-hook-form": "7.63.0",
     "react-i18next": "16.0.0",
     "react-router-dom": "7.9.3",
-    "react-syntax-highlighter": "15.6.6",
     "react-time-ago": "7.3.5",
     "swr": "2.3.6",
     "yaml": "2.8.1",
@@ -76,7 +78,6 @@
     "@types/node": "22.18.6",
     "@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.4",
     "@vitest/eslint-plugin": "1.3.13",
@@ -97,6 +98,7 @@
     "typescript": "5.9.2",
     "typescript-eslint": "8.44.1",
     "vite": "7.1.7",
+    "vite-plugin-static-copy": "^3.1.2",
     "vitest": "3.2.4"
   }
 }

package.json

@@ -22,8 +22,6 @@
     "tableCreatedHeader": "Created",
     "tableVersionHeader": "Revision",
     "noFluxError": "Please install flux to view this component",
-    "gitOpsTitle": "GitOps",
-    "kustomizationsTitle": "Kustomizations",
     "undefinedError": "Something went wrong"
   },
   "ProvidersList": {
@@ -32,15 +30,13 @@
     "tableCreatedHeader": "Created"
   },
   "ManagedResources": {
-    "header": "Managed Resources",
     "tableHeaderKind": "Kind",
     "tableHeaderName": "Name",
     "tableHeaderCreated": "Created",
     "tableHeaderSynced": "Synced",
     "tableHeaderReady": "Ready"
   },
   "ProvidersConfig": {
-    "headerProviderConfigs": "Provider Configs",
     "tableHeaderProvider": "Provider",
     "tableHeaderName": "Name",
     "tableHeaderCreated": "Created",
@@ -196,12 +192,23 @@
   },
   "McpPage": {
     "accessError": "Managed Control Plane does not have access information yet",
-    "componentsTitle": "Components",
     "overviewTitle": "Overview",
+    "dashboardTitle": "Dashboard",
+    "graphTitle": "Graph",
+    "componentsTitle": "Components",
     "crossplaneTitle": "Crossplane",
-    "gitOpsTitle": "GitOps",
-    "landscapersTitle": "Landscapers",
-    "graphTitle": "Graph"
+    "providersTitle": "Providers",
+    "providerConfigsTitle": "ProviderConfigs",
+    "managedResourcesTitle": "Managed Resources",
+    "fluxTitle": "Flux",
+    "gitRepositoriesTitle": "GitRepositories",
+    "kustomizationsTitle": "Kustomizations",
+    "landscapersTitle": "Landscapers"
+  },
+  "McpHeader": {
+    "nameLabel": "Name",
+    "createdByLabel": "Created By",
+    "createdOnLabel": "Created On"
   },
   "ToastContext": {
     "errorMessage": "useToast must be used within a ToastProvider"
@@ -296,7 +303,6 @@
     "learnButton": "Learn how to do this in code"
   },
   "Providers": {
-    "headerProviders": "Providers",
     "tableHeaderVersion": "Version",
     "tableHeaderName": "Name",
     "tableHeaderCreated": "Created",
@@ -351,7 +357,9 @@
     "remaining": "Remaining",
     "active": "Active",
     "copyToClipboardSuccessToast": "Copied to clipboard",
-    "copyToClipboardFailedToast": "Failed to copy to clipboard"
+    "copyToClipboardFailedToast": "Failed to copy to clipboard",
+    "resourcesCount": "Resources ({{count}})",
+    "itemsCount": "Items ({{count}})"
   },
   "errors": {
     "installError": "Install error",

public/locales/en.json

@@ -1,8 +1,16 @@
-import { AnalyticalTable, AnalyticalTableColumnDefinition } from '@ui5/webcomponents-react';
+import {
+  AnalyticalTable,
+  AnalyticalTableColumnDefinition,
+  Panel,
+  Title,
+  Toolbar,
+  ToolbarButton,
+  ToolbarSpacer,
+} from '@ui5/webcomponents-react';
 import { ControlPlaneType } from '../../lib/api/types/crate/controlPlanes';
 import { useTranslation } from 'react-i18next';
 
-export default function ComponentList({ mcp }: { mcp: ControlPlaneType }) {
+export default function ComponentList({ mcp, onEditClick }: { mcp: ControlPlaneType; onEditClick: () => void }) {
   const { t } = useTranslation();
 
   const data = [
@@ -40,8 +48,17 @@ export default function ComponentList({ mcp }: { mcp: ControlPlaneType }) {
   ];
 
   return (
-    <div>
+    <Panel
+      fixed
+      header={
+        <Toolbar>
+          <Title>{t('common.itemsCount', { count: data.length })}</Title>
+          <ToolbarSpacer />
+          <ToolbarButton tooltip={t('editMCP.editComponents')} design="Transparent" icon="edit" onClick={onEditClick} />
+        </Toolbar>
+      }
+    >
       <AnalyticalTable scaleWidthMode="Smart" columns={componentTableColumns} minRows={0} data={data} />
-    </div>
+    </Panel>
   );
 }