feat: navigation via tabs (#297)

Author: andreaskienle

public/locales/en.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,18 @@
   },
   "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",
@@ -301,7 +303,6 @@
     "learnButton": "Learn how to do this in code"
   },
   "Providers": {
-    "headerProviders": "Providers",
     "tableHeaderVersion": "Version",
     "tableHeaderName": "Name",
     "tableHeaderCreated": "Created",
@@ -356,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",

src/components/ControlPlane/ComponentList.tsx

@@ -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>
   );
 }