Custom Resource Definition Schema based Intellisense for YAML viewer and editor

package.json

@@ -39,6 +39,7 @@
     "@fastify/vite": "8.2.1",
     "@hookform/resolvers": "5.2.2",
     "@monaco-editor/react": "4.7.0",
+    "@openapi-contrib/openapi-schema-to-json-schema": "5.1.0",
     "@sentry/node": "10.24.0",
     "@sentry/react": "10.24.0",
     "@sentry/vite-plugin": "4.6.0",
@@ -61,6 +62,7 @@
     "js-yaml": "4.1.0",
     "monaco-editor": "0.54.0",
     "monaco-yaml": "5.4.0",
+    "path-browserify": "1.0.1",
     "react": "19.2.0",
     "react-dom": "19.2.0",
     "react-error-boundary": "6.0.0",

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,13 +1,20 @@
 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';
 import { useTranslation } from 'react-i18next';
 import { formatDateAsTimeAgo } from '../../utils/i18n/timeAgo.ts';
 
 import { YamlViewButton } from '../Yaml/YamlViewButton.tsx';
-import { Fragment, useCallback, useMemo, useRef } from 'react';
+import { Fragment, useCallback, useContext, useMemo, useRef } from 'react';
 import StatusFilter from '../Shared/StatusFilter/StatusFilter.tsx';
 import { ResourceStatusCell } from '../Shared/ResourceStatusCell.tsx';
 import { Resource } from '../../utils/removeManagedFieldsAndFilterData.ts';
@@ -17,6 +24,8 @@ 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';
+import { ApiConfigContext } from '../Shared/k8s';
 
 export type GitRepoItem = GitReposResponse['items'][0] & {
   apiVersion?: string;
@@ -39,7 +48,8 @@ export function GitRepositories() {
     readyMessage: string;
     revision?: string;
   };
-
+  const apiConfig = useContext(ApiConfigContext);
+  const { hasMCPAdminRights } = useAuthMcp();
   const openEditPanel = useCallback(
     (item: GitRepoItem) => {
       const identityKey = `${item.kind}:${item.metadata.namespace ?? ''}:${item.metadata.name}`;
@@ -49,12 +59,13 @@ export function GitRepositories() {
             isEdit={true}
             resource={item as unknown as Resource}
             filename={`${item.kind}_${item.metadata.name}`}
+            apiConfig={apiConfig}
             onApply={async (parsed) => await handlePatch(item, parsed)}
           />
         </Fragment>,
       );
     },
-    [openInAside, handlePatch],
+    [openInAside, handlePatch, apiConfig],
   );
 
   const columns = useMemo<AnalyticalTableColumnDefinition[]>(
@@ -96,7 +107,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 +145,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,13 +1,21 @@
 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';
+
 import { useTranslation } from 'react-i18next';
 import { formatDateAsTimeAgo } from '../../utils/i18n/timeAgo.ts';
 
 import { YamlViewButton } from '../Yaml/YamlViewButton.tsx';
-import { Fragment, useCallback, useMemo, useRef } from 'react';
+import { Fragment, useCallback, useContext, useMemo, useRef } from 'react';
 import StatusFilter from '../Shared/StatusFilter/StatusFilter.tsx';
 import { ResourceStatusCell } from '../Shared/ResourceStatusCell.tsx';
 import { Resource } from '../../utils/removeManagedFieldsAndFilterData.ts';
@@ -17,6 +25,8 @@ 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';
+import { ApiConfigContext } from '../Shared/k8s';
 
 export type KustomizationItem = KustomizationsResponse['items'][0] & {
   apiVersion?: string;
@@ -25,6 +35,7 @@ export type KustomizationItem = KustomizationsResponse['items'][0] & {
 
 export function Kustomizations() {
   const { data, error, isLoading } = useApiResource(FluxKustomization); //404 if component not enabled
+  const apiConfig = useContext(ApiConfigContext);
   const { t } = useTranslation();
   const { openInAside } = useSplitter();
   const errorDialogRef = useRef<ErrorDialogHandle>(null);
@@ -48,13 +59,15 @@ export function Kustomizations() {
             isEdit={true}
             resource={item as unknown as Resource}
             filename={`${item.kind}_${item.metadata.name}`}
+            apiConfig={apiConfig}
             onApply={async (parsed) => await handlePatch(item, parsed)}
           />
         </Fragment>,
       );
     },
-    [openInAside, handlePatch],
+    [openInAside, handlePatch, apiConfig],
   );
+  const { hasMCPAdminRights } = useAuthMcp();
 
   const columns = useMemo<AnalyticalTableColumnDefinition[]>(
     () =>
@@ -91,7 +104,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 +142,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 { useAuthMcp } from '../../spaces/mcp/auth/AuthContextMcp.tsx';
 
 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 } = useAuthMcp();
   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[] =