Edit MCP's resources improvements

public/locales/en.json

@@ -417,19 +417,21 @@
     "back": "Back",
     "cancel": "Cancel",
     "update": "Update",
-    "applyChanges": "Apply changes"
+    "applyChanges": "Apply changes",
+    "edit": "Edit"
   },
   "yaml": {
     "YAML": "File",
     "showOnlyImportant": "Show only important fields",
     "panelTitle": "YAML",
-    "editorTitle": "YAML Editor",
     "applySuccess2": "The Managed Control Plane will reconcile this resource shortly.",
     "applySuccess": "Update submitted ",
     "diffConfirmTitle": "Review changes",
     "diffConfirmMessage": "Are you sure that you want to apply these changes?",
     "diffNo": "No, go back",
-    "diffYes": "Yes"
+    "diffYes": "Yes",
+    "validationErrors": "Validation errors",
+    "fluxManaged": "This resource is managed by Flux and cannot be edited here"
   },
   "createMCP": {
     "dialogTitle": "Create Managed Control Plane",

src/components/ControlPlane/ActionsMenu.tsx

@@ -9,6 +9,7 @@ export type ActionItem<T> = {
   icon?: string;
   disabled?: boolean;
   onClick: (item: T) => void;
+  tooltip?: string;
 };
 
 export type ActionsMenuProps<T> = {
@@ -45,7 +46,14 @@ export function ActionsMenu<T>({ item, actions, buttonIcon = 'overflow' }: Actio
         }}
       >
         {actions.map((a) => (
-          <MenuItem key={a.key} text={a.text} icon={a.icon} data-action-key={a.key} disabled={a.disabled} />
+          <MenuItem
+            key={a.key}
+            text={a.text}
+            icon={a.icon}
+            data-action-key={a.key}
+            disabled={a.disabled}
+            tooltip={a.tooltip}
+          />
         ))}
       </Menu>
     </>

src/components/ControlPlane/GitRepositories.tsx

@@ -1,5 +1,12 @@
 import ConfiguredAnalyticstable from '../Shared/ConfiguredAnalyticsTable.tsx';
-import { AnalyticalTableColumnDefinition, Panel, Title, Toolbar, ToolbarSpacer } from '@ui5/webcomponents-react';
+import {
+  AnalyticalTableColumnDefinition,
+  Panel,
+  Title,
+  Toolbar,
+  ToolbarSpacer,
+  Button,
+} from '@ui5/webcomponents-react';
 import IllustratedError from '../Shared/IllustratedError.tsx';
 import { useApiResource } from '../../lib/api/useApiResource';
 import { FluxRequest } from '../../lib/api/types/flux/listGitRepo';
@@ -17,6 +24,7 @@ import { useHandleResourcePatch } from '../../lib/api/types/crossplane/useHandle
 import { ErrorDialog, ErrorDialogHandle } from '../Shared/ErrorMessageBox.tsx';
 import type { GitReposResponse } from '../../lib/api/types/flux/listGitRepo';
 import { ActionsMenu, type ActionItem } from './ActionsMenu';
+import { useHasMcpAdminRights } from '../../spaces/mcp/auth/useHasMcpAdminRights.ts';
 
 export type GitRepoItem = GitReposResponse['items'][0] & {
   apiVersion?: string;
@@ -39,7 +47,6 @@ export function GitRepositories() {
     readyMessage: string;
     revision?: string;
   };
-
   const openEditPanel = useCallback(
     (item: GitRepoItem) => {
       const identityKey = `${item.kind}:${item.metadata.namespace ?? ''}:${item.metadata.name}`;
@@ -56,6 +63,7 @@ export function GitRepositories() {
     },
     [openInAside, handlePatch],
   );
+  const hasMCPAdminRights = useHasMcpAdminRights();
 
   const columns = useMemo<AnalyticalTableColumnDefinition[]>(
     () =>
@@ -96,7 +104,28 @@ export function GitRepositories() {
           width: 75,
           accessor: 'yaml',
           disableFilters: true,
-          Cell: ({ row }) => <YamlViewButton variant="resource" resource={row.original.item as unknown as Resource} />,
+          Cell: ({ row }) => {
+            const item = row.original?.item;
+            return item ? (
+              <YamlViewButton
+                variant="resource"
+                resource={item as unknown as Resource}
+                toolbarContent={
+                  hasMCPAdminRights ? (
+                    <Button
+                      icon={'edit'}
+                      design={'Transparent'}
+                      onClick={() => {
+                        openEditPanel(item);
+                      }}
+                    >
+                      {t('buttons.edit')}
+                    </Button>
+                  ) : undefined
+                }
+              />
+            ) : undefined;
+          },
         },
         {
           Header: t('ManagedResources.actionColumnHeader'),
@@ -113,13 +142,14 @@ export function GitRepositories() {
                 text: t('ManagedResources.editAction', 'Edit'),
                 icon: 'edit',
                 onClick: openEditPanel,
+                disabled: !hasMCPAdminRights,
               },
             ];
             return <ActionsMenu item={item} actions={actions} />;
           },
         },
       ] as AnalyticalTableColumnDefinition[],
-    [t, openEditPanel],
+    [t, hasMCPAdminRights, openEditPanel],
   );
 
   if (error) {

src/components/ControlPlane/Kustomizations.tsx

@@ -1,5 +1,12 @@
 import ConfiguredAnalyticstable from '../Shared/ConfiguredAnalyticsTable.tsx';
-import { AnalyticalTableColumnDefinition, Panel, Title, Toolbar, ToolbarSpacer } from '@ui5/webcomponents-react';
+import {
+  AnalyticalTableColumnDefinition,
+  Panel,
+  Title,
+  Toolbar,
+  ToolbarSpacer,
+  Button,
+} from '@ui5/webcomponents-react';
 import IllustratedError from '../Shared/IllustratedError.tsx';
 import { useApiResource } from '../../lib/api/useApiResource';
 import { FluxKustomization } from '../../lib/api/types/flux/listKustomization';
@@ -17,6 +24,7 @@ import { useHandleResourcePatch } from '../../lib/api/types/crossplane/useHandle
 import { ErrorDialog, ErrorDialogHandle } from '../Shared/ErrorMessageBox.tsx';
 import type { KustomizationsResponse } from '../../lib/api/types/flux/listKustomization';
 import { ActionsMenu, type ActionItem } from './ActionsMenu';
+import { useHasMcpAdminRights } from '../../spaces/mcp/auth/useHasMcpAdminRights.ts';
 
 export type KustomizationItem = KustomizationsResponse['items'][0] & {
   apiVersion?: string;
@@ -55,7 +63,7 @@ export function Kustomizations() {
     },
     [openInAside, handlePatch],
   );
-
+  const hasMCPAdminRights = useHasMcpAdminRights();
   const columns = useMemo<AnalyticalTableColumnDefinition[]>(
     () =>
       [
@@ -91,7 +99,28 @@ export function Kustomizations() {
           width: 75,
           accessor: 'yaml',
           disableFilters: true,
-          Cell: ({ row }) => <YamlViewButton variant="resource" resource={row.original.item as unknown as Resource} />,
+          Cell: ({ row }) => {
+            const item = row.original?.item;
+            return item ? (
+              <YamlViewButton
+                variant="resource"
+                resource={item as unknown as Resource}
+                toolbarContent={
+                  hasMCPAdminRights ? (
+                    <Button
+                      icon={'edit'}
+                      design={'Transparent'}
+                      onClick={() => {
+                        openEditPanel(item);
+                      }}
+                    >
+                      {t('buttons.edit')}
+                    </Button>
+                  ) : undefined
+                }
+              />
+            ) : undefined;
+          },
         },
         {
           Header: t('ManagedResources.actionColumnHeader'),
@@ -108,13 +137,14 @@ export function Kustomizations() {
                 text: t('ManagedResources.editAction', 'Edit'),
                 icon: 'edit',
                 onClick: openEditPanel,
+                disabled: !hasMCPAdminRights,
               },
             ];
             return <ActionsMenu item={item} actions={actions} />;
           },
         },
       ] as AnalyticalTableColumnDefinition[],
-    [t, openEditPanel],
+    [t, openEditPanel, hasMCPAdminRights],
   );
 
   if (error) {

src/components/ControlPlane/ManagedResources.tsx

@@ -4,6 +4,7 @@ import {
   AnalyticalTable,
   AnalyticalTableColumnDefinition,
   AnalyticalTableScaleWidthMode,
+  Button,
   Panel,
   Title,
   Toolbar,
@@ -35,6 +36,7 @@ import { YamlSidePanel } from '../Yaml/YamlSidePanel.tsx';
 import { ErrorDialog, ErrorDialogHandle } from '../Shared/ErrorMessageBox.tsx';
 import { APIError } from '../../lib/api/error.ts';
 import { useHandleResourcePatch } from '../../lib/api/types/crossplane/useHandleResourcePatch.ts';
+import { useHasMcpAdminRights } from '../../spaces/mcp/auth/useHasMcpAdminRights.ts';
 
 interface StatusFilterColumn {
   filterValue?: string;
@@ -54,6 +56,19 @@ type ResourceRow = {
   conditionSyncedMessage: string;
 };
 
+/**
+ * Checks if a resource is managed by Flux based on the kustomize.toolkit.fluxcd.io/name label
+ */
+const isResourceFluxManaged = (item: ManagedResourceItem | undefined): boolean => {
+  if (!item) return false;
+
+  const fluxLabelValue = (item?.metadata?.labels as unknown as Record<string, unknown> | undefined)?.[
+    'kustomize.toolkit.fluxcd.io/name'
+  ];
+
+  return fluxLabelValue != null && (typeof fluxLabelValue !== 'string' || fluxLabelValue.trim() !== '');
+};
+
 export function ManagedResources() {
   const { t } = useTranslation();
   const toast = useToast();
@@ -105,7 +120,7 @@ export function ManagedResources() {
     },
     [openInAside, handlePatch],
   );
-
+  const hasMCPAdminRights = useHasMcpAdminRights();
   const columns = useMemo<AnalyticalTableColumnDefinition[]>(
     () =>
       [
@@ -167,8 +182,27 @@ export function ManagedResources() {
           disableFilters: true,
           Cell: ({ row }) => {
             const { original } = row;
+            const isFluxManaged = isResourceFluxManaged(original?.item);
             return original?.item ? (
-              <YamlViewButton variant="resource" resource={original.item as unknown as Resource} />
+              <YamlViewButton
+                variant="resource"
+                resource={original.item as unknown as Resource}
+                toolbarContent={
+                  hasMCPAdminRights ? (
+                    <Button
+                      icon={'edit'}
+                      design={'Transparent'}
+                      disabled={isFluxManaged}
+                      tooltip={t('yaml.fluxManaged')}
+                      onClick={() => {
+                        openEditPanel(original?.item);
+                      }}
+                    >
+                      {t('buttons.edit')}
+                    </Button>
+                  ) : undefined
+                }
+              />
             ) : undefined;
           },
         },
@@ -182,12 +216,7 @@ export function ManagedResources() {
             const item = original?.item;
             if (!item) return undefined;
 
-            // Flux-managed check for disabling Edit
-            const fluxLabelValue = (item?.metadata?.labels as unknown as Record<string, unknown> | undefined)?.[
-              'kustomize.toolkit.fluxcd.io/name'
-            ];
-            const isFluxManaged =
-              typeof fluxLabelValue === 'string' ? fluxLabelValue.trim() !== '' : fluxLabelValue != null;
+            const isFluxManaged = isResourceFluxManaged(item);
 
             const actions: ActionItem<ManagedResourceItem>[] = [
               {
@@ -196,20 +225,23 @@ export function ManagedResources() {
                 icon: 'edit',
                 disabled: isFluxManaged,
                 onClick: openEditPanel,
+                tooltip: isFluxManaged && hasMCPAdminRights ? t('yaml.fluxManaged') : undefined,
               },
+
               {
                 key: 'delete',
                 text: t('ManagedResources.deleteAction'),
                 icon: 'delete',
                 onClick: openDeleteDialog,
+                disabled: !hasMCPAdminRights,
               },
             ];
 
             return <ActionsMenu item={item} actions={actions} />;
           },
         },
       ] as AnalyticalTableColumnDefinition[],
-    [t, openEditPanel, openDeleteDialog],
+    [t, openEditPanel, openDeleteDialog, hasMCPAdminRights],
   );
 
   const rows: ResourceRow[] =

src/components/ControlPlane/ProvidersConfig.tsx

@@ -3,6 +3,7 @@ import {
   AnalyticalTable,
   AnalyticalTableColumnDefinition,
   AnalyticalTableScaleWidthMode,
+  Button,
   Panel,
   Title,
   Toolbar,
@@ -23,6 +24,7 @@ import { useSplitter } from '../Splitter/SplitterContext.tsx';
 import { YamlSidePanel } from '../Yaml/YamlSidePanel.tsx';
 import { useHandleResourcePatch } from '../../lib/api/types/crossplane/useHandleResourcePatch.ts';
 import { ErrorDialog, ErrorDialogHandle } from '../Shared/ErrorMessageBox.tsx';
+import { useHasMcpAdminRights } from '../../spaces/mcp/auth/useHasMcpAdminRights.ts';
 
 type Rows = {
   parent: string;
@@ -74,7 +76,7 @@ export function ProvidersConfig() {
     },
     [openInAside, handlePatch],
   );
-
+  const hasMCPAdminRights = useHasMcpAdminRights();
   const columns = useMemo<AnalyticalTableColumnDefinition[]>(
     () =>
       [
@@ -102,7 +104,25 @@ export function ProvidersConfig() {
           disableFilters: true,
           Cell: ({ row }) => {
             const item = row.original?.resource;
-            return item ? <YamlViewButton variant="resource" resource={item as unknown as Resource} /> : undefined;
+            return item ? (
+              <YamlViewButton
+                variant="resource"
+                resource={item as unknown as Resource}
+                toolbarContent={
+                  hasMCPAdminRights ? (
+                    <Button
+                      icon={'edit'}
+                      design={'Transparent'}
+                      onClick={() => {
+                        openEditPanel(item);
+                      }}
+                    >
+                      {t('buttons.edit')}
+                    </Button>
+                  ) : undefined
+                }
+              />
+            ) : undefined;
           },
         },
         {
@@ -120,13 +140,14 @@ export function ProvidersConfig() {
                 text: t('ManagedResources.editAction', 'Edit'),
                 icon: 'edit',
                 onClick: openEditPanel,
+                disabled: !hasMCPAdminRights,
               },
             ];
             return <ActionsMenu item={item} actions={actions} />;
           },
         },
       ] as AnalyticalTableColumnDefinition[],
-    [t, openEditPanel],
+    [t, openEditPanel, hasMCPAdminRights],
   );
 
   return (