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.1",
     "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 }: ActionsMenuProps<T>) {
         }}
       >
         {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';
@@ -18,6 +25,9 @@ import { ErrorDialog, ErrorDialogHandle } from '../Shared/ErrorMessageBox.tsx';
 import type { GitReposResponse } from '../../lib/api/types/flux/listGitRepo';
 import { ActionsMenu, type ActionItem } from './ActionsMenu';
 
+import { ApiConfigContext } from '../Shared/k8s';
+import { useHasMcpAdminRights } from '../../spaces/mcp/auth/useHasMcpAdminRights.ts';
+
 export type GitRepoItem = GitReposResponse['items'][0] & {
   apiVersion?: string;
   metadata: GitReposResponse['items'][0]['metadata'] & { namespace?: string };
@@ -39,7 +49,8 @@ export function GitRepositories() {
     readyMessage: string;
     revision?: string;
   };
-
+  const apiConfig = useContext(ApiConfigContext);
+  const hasMCPAdminRights = useHasMcpAdminRights();
   const openEditPanel = useCallback(
     (item: GitRepoItem) => {
       const identityKey = `${item.kind}:${item.metadata.namespace ?? ''}:${item.metadata.name}`;
@@ -49,12 +60,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 +108,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 +146,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';
@@ -18,13 +26,17 @@ import { ErrorDialog, ErrorDialogHandle } from '../Shared/ErrorMessageBox.tsx';
 import type { KustomizationsResponse } from '../../lib/api/types/flux/listKustomization';
 import { ActionsMenu, type ActionItem } from './ActionsMenu';
 
+import { ApiConfigContext } from '../Shared/k8s';
+import { useHasMcpAdminRights } from '../../spaces/mcp/auth/useHasMcpAdminRights.ts';
+
 export type KustomizationItem = KustomizationsResponse['items'][0] & {
   apiVersion?: string;
   metadata: KustomizationsResponse['items'][0]['metadata'] & { namespace?: string };
 };
 
 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 +60,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 = useHasMcpAdminRights();
 
   const columns = useMemo<AnalyticalTableColumnDefinition[]>(
     () =>
@@ -91,7 +105,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 +143,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.cy.tsx

@@ -42,11 +42,16 @@ describe('ManagedResources - Delete Resource', () => {
     };
   };
 
+  const fakeuseHasMcpAdminRights = () => {
+    return true;
+  };
+
   const fakeUseResourcePluralNames: typeof useResourcePluralNames = (): any => {
     return {
       getPluralKind: (kind: string) => `${kind.toLowerCase()}s`,
       isLoading: false,
       error: undefined,
+      isAuthenticated: true,
     };
   };
 
@@ -97,6 +102,7 @@ describe('ManagedResources - Delete Resource', () => {
             useApiResourceMutation={fakeUseApiResourceMutation}
             useApiResource={fakeUseApiResource}
             useResourcePluralNames={fakeUseResourcePluralNames}
+            useHasMcpAdminRights={fakeuseHasMcpAdminRights}
           />
         </SplitterProvider>
       </MemoryRouter>,
@@ -131,6 +137,7 @@ describe('ManagedResources - Delete Resource', () => {
             useApiResourceMutation={fakeUseApiResourceMutation}
             useApiResource={fakeUseApiResource}
             useResourcePluralNames={fakeUseResourcePluralNames}
+            useHasMcpAdminRights={fakeuseHasMcpAdminRights}
           />
         </SplitterProvider>
       </MemoryRouter>,
@@ -173,6 +180,7 @@ describe('ManagedResources - Delete Resource', () => {
             useApiResourceMutation={fakeUseApiResourceMutation}
             useApiResource={fakeUseApiResource}
             useResourcePluralNames={fakeUseResourcePluralNames}
+            useHasMcpAdminRights={fakeuseHasMcpAdminRights}
           />
         </SplitterProvider>
       </MemoryRouter>,
@@ -208,6 +216,10 @@ describe('ManagedResources - Edit Resource', () => {
   let patchCalled = false;
   let patchedItem: any = null;
 
+  const fakeUseHasMcpAdminRights = () => {
+    return true;
+  };
+
   const fakeUseHandleResourcePatch: typeof useHandleResourcePatch = () => {
     return async (item: any) => {
       patchCalled = true;
@@ -293,6 +305,7 @@ describe('ManagedResources - Edit Resource', () => {
               useHandleResourcePatch={fakeUseHandleResourcePatch}
               useApiResource={fakeUseApiResource}
               useResourcePluralNames={fakeUseResourcePluralNames}
+              useHasMcpAdminRights={fakeUseHasMcpAdminRights}
             />
           </SplitterLayout>
         </SplitterProvider>