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 { useAuthMcp } from '../../spaces/mcp/auth/AuthContextMcp.tsx';
 
 export type GitRepoItem = GitReposResponse['items'][0] & {
   apiVersion?: string;
@@ -43,7 +51,7 @@ export function GitRepositories() {
     readyMessage: string;
     revision?: string;
   };
-
+  const { hasMCPAdminRights } = useAuthMcp();
   const openEditPanel = useCallback(
     (item: GitRepoItem) => {
       const identityKey = `${item.kind}:${item.metadata.namespace ?? ''}:${item.metadata.name}`;
@@ -100,9 +108,28 @@ export function GitRepositories() {
           width: 75,
           accessor: 'yaml',
           disableFilters: true,
-          Cell: ({ row }: { row: CellRow<FluxRow> }) => (
-            <YamlViewButton variant="resource" resource={row.original.item as unknown as Resource} />
-          ),
+          Cell: ({ row }: { row: CellRow<FluxRow> }) => {
+            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'),
@@ -119,6 +146,7 @@ export function GitRepositories() {
                 text: t('ManagedResources.editAction', 'Edit'),
                 icon: 'edit',
                 onClick: openEditPanel,
+                disabled: !hasMCPAdminRights,
               },
             ];
             return <ActionsMenu item={item} actions={actions} />;

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 { useAuthMcp } from '../../spaces/mcp/auth/AuthContextMcp.tsx';
 
 export type KustomizationItem = KustomizationsResponse['items'][0] & {
   apiVersion?: string;
@@ -59,7 +67,7 @@ export function Kustomizations() {
     },
     [openInAside, handlePatch],
   );
-
+  const { hasMCPAdminRights } = useAuthMcp();
   const columns = useMemo<AnalyticalTableColumnDefinition[]>(
     () =>
       [
@@ -95,9 +103,28 @@ export function Kustomizations() {
           width: 75,
           accessor: 'yaml',
           disableFilters: true,
-          Cell: ({ row }: { row: CellRow<FluxRow> }) => (
-            <YamlViewButton variant="resource" resource={row.original.item as unknown as Resource} />
-          ),
+          Cell: ({ row }: { row: CellRow<FluxRow> }) => {
+            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'),
@@ -114,6 +141,7 @@ export function Kustomizations() {
                 text: t('ManagedResources.editAction', 'Edit'),
                 icon: 'edit',
                 onClick: openEditPanel,
+                disabled: !hasMCPAdminRights,
               },
             ];
             return <ActionsMenu item={item} actions={actions} />;

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 { useAuthMcp } from '../../spaces/mcp/auth/AuthContextMcp.tsx';
 
 interface StatusFilterColumn {
   filterValue?: string;
@@ -108,7 +110,7 @@ export function ManagedResources() {
     },
     [openInAside, handlePatch],
   );
-
+  const { hasMCPAdminRights } = useAuthMcp();
   const columns = useMemo<AnalyticalTableColumnDefinition[]>(
     () =>
       [
@@ -170,8 +172,32 @@ export function ManagedResources() {
           disableFilters: true,
           Cell: ({ row }: { row: CellRow<ResourceRow> }) => {
             const { original } = row;
+            // Flux-managed check for disabling Edit
+            const fluxLabelValue = (
+              original?.item?.metadata?.labels as unknown as Record<string, unknown> | undefined
+            )?.['kustomize.toolkit.fluxcd.io/name'];
+            const isFluxManaged =
+              typeof fluxLabelValue === 'string' ? fluxLabelValue.trim() !== '' : fluxLabelValue != null;
             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;
           },
         },
@@ -199,12 +225,15 @@ 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,
               },
             ];
 

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 { useAuthMcp } from '../../spaces/mcp/auth/AuthContextMcp.tsx';
 
 type Rows = {
   parent: string;
@@ -78,7 +80,7 @@ export function ProvidersConfig() {
     },
     [openInAside, handlePatch],
   );
-
+  const { hasMCPAdminRights } = useAuthMcp();
   const columns = useMemo<AnalyticalTableColumnDefinition[]>(
     () =>
       [
@@ -106,7 +108,25 @@ export function ProvidersConfig() {
           disableFilters: true,
           Cell: ({ row }: { row: CellRow<Rows> }) => {
             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;
           },
         },
         {
@@ -124,6 +144,7 @@ export function ProvidersConfig() {
                 text: t('ManagedResources.editAction', 'Edit'),
                 icon: 'edit',
                 onClick: openEditPanel,
+                disabled: !hasMCPAdminRights,
               },
             ];
             return <ActionsMenu item={item} actions={actions} />;

src/components/Wizards/CreateManagedControlPlane/SummarizeStep.tsx

@@ -7,13 +7,13 @@ import {
   CreateManagedControlPlane,
 } from '../../../lib/api/types/crate/createManagedControlPlane.ts';
 
-import YamlPanel from '../../Yaml/YamlPanel.tsx';
 import { idpPrefix } from '../../../utils/idpPrefix.ts';
 import { UseFormWatch } from 'react-hook-form';
 import { CreateDialogProps } from '../../Dialogs/CreateWorkspaceDialogContainer.tsx';
 
 import styles from './SummarizeStep.module.css';
 import { YamlDiff } from './YamlDiff.tsx';
+import YamlSummarize from './YamlSummarize.tsx';
 interface SummarizeStepProps {
   watch: UseFormWatch<CreateDialogProps>;
   projectName: string;
@@ -94,7 +94,7 @@ export const SummarizeStep: React.FC<SummarizeStepProps> = ({
               )}
             />
           ) : (
-            <YamlPanel yamlString={yamlString} filename={`mcp_${projectName}--ws-${workspaceName}`} />
+            <YamlSummarize yamlString={yamlString} filename={`mcp_${projectName}--ws-${workspaceName}`} />
           )}
         </div>
       </Grid>

src/components/Yaml/YamlPanel.tsx → src/components/Wizards/CreateManagedControlPlane/YamlSummarize.tsx

@@ -1,16 +1,17 @@
 import { FC } from 'react';
 import { Button, FlexBox } from '@ui5/webcomponents-react';
-import styles from './YamlPanel.module.css';
-import { useCopyToClipboard } from '../../hooks/useCopyToClipboard.ts';
+import styles from './YamlSummarize.module.css';
 import { useTranslation } from 'react-i18next';
-import { SHOW_DOWNLOAD_BUTTON } from './YamlSidePanel.tsx';
-import { YamlViewer } from './YamlViewer.tsx';
+import { useCopyToClipboard } from '../../../hooks/useCopyToClipboard.ts';
+import { SHOW_DOWNLOAD_BUTTON } from '../../Yaml/YamlSidePanel.tsx';
+import { YamlViewer } from '../../Yaml/YamlViewer.tsx';
+
 type YamlPanelProps = {
   yamlString: string;
   filename: string;
 };
 
-const YamlPanel: FC<YamlPanelProps> = ({ yamlString, filename }) => {
+const YamlSummarize: FC<YamlPanelProps> = ({ yamlString, filename }) => {
   const { t } = useTranslation();
   const { copyToClipboard } = useCopyToClipboard();
   const downloadYaml = () => {
@@ -37,9 +38,9 @@ const YamlPanel: FC<YamlPanelProps> = ({ yamlString, filename }) => {
           </Button>
         )}
       </FlexBox>
-      <YamlViewer yamlString={yamlString} filename={filename} isEdit={true} />
+      <YamlViewer yamlString={yamlString} filename={filename} isEdit={false} />
     </div>
   );
 };
 
-export default YamlPanel;
+export default YamlSummarize;

src/components/Yaml/YamlSidePanel.module.css

@@ -26,10 +26,10 @@
   position: sticky;
   top: 0;
   height: 6rem;
-  padding: 1rem;
-  padding-bottom: 1.5rem;
+  padding: 1rem 1rem 1.5rem;
   z-index: 1;
   background: var(--sapBackgroundColor);
+  border-radius: 1rem;
 }
 
 .stickyHeaderInner {