refactor

lucasgoral · lucasgoral · commit 0c9e96c23487 · 2025-11-24T11:19:48.000+01:00
diff --git a/public/locales/en.json b/public/locales/en.json
@@ -405,7 +405,8 @@
     "syncError": "Sync error",
     "error": "Error",
     "notHealthy": "Not healthy",
-    "notReady": "Not ready"
+    "notReady": "Not ready",
+    "cannotLoadSchema": "Cannot load schema for this resource"
   },
   "buttons": {
     "viewResource": "View resource",
diff --git a/src/components/ControlPlane/GitRepositories.tsx b/src/components/ControlPlane/GitRepositories.tsx
@@ -60,7 +60,6 @@ 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>,
diff --git a/src/components/ControlPlane/Kustomizations.tsx b/src/components/ControlPlane/Kustomizations.tsx
@@ -38,7 +38,7 @@ 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 { openInAsideWithApiConfig } = useSplitter();
   const errorDialogRef = useRef<ErrorDialogHandle>(null);
   const handlePatch = useHandleResourcePatch(errorDialogRef);
 
@@ -54,19 +54,19 @@ export function Kustomizations() {
   const openEditPanel = useCallback(
     (item: KustomizationItem) => {
       const identityKey = `${item.kind}:${item.metadata.namespace ?? ''}:${item.metadata.name}`;
-      openInAside(
+      openInAsideWithApiConfig(
         <Fragment key={identityKey}>
           <YamlSidePanel
             isEdit={true}
             resource={item as unknown as Resource}
             filename={`${item.kind}_${item.metadata.name}`}
-            apiConfig={apiConfig}
             onApply={async (parsed) => await handlePatch(item, parsed)}
           />
         </Fragment>,
+        apiConfig,
       );
     },
-    [openInAside, handlePatch, apiConfig],
+    [openInAsideWithApiConfig, handlePatch, apiConfig],
   );
   const hasMCPAdminRights = useHasMcpAdminRights();
 
diff --git a/src/components/ControlPlane/ManagedResources.tsx b/src/components/ControlPlane/ManagedResources.tsx
@@ -90,7 +90,7 @@ export function ManagedResources({
   const { t } = useTranslation();
   const toast = useToast();
   const apiConfig = useContext(ApiConfigContext);
-  const { openInAside } = useSplitter();
+  const { openInAsideWithApiConfig } = useSplitter();
   const [pendingDeleteItem, setPendingDeleteItem] = useState<ManagedResourceItem | null>(null);
   const errorDialogRef = useRef<ErrorDialogHandle>(null);
   const handlePatch = useHandleResourcePatch(errorDialogRef);
@@ -125,19 +125,19 @@ export function ManagedResources({
   const openEditPanel = useCallback(
     (item: ManagedResourceItem) => {
       const identityKey = `${item.kind}:${item.metadata.namespace ?? ''}:${item.metadata.name}`;
-      openInAside(
+      openInAsideWithApiConfig(
         <Fragment key={identityKey}>
           <YamlSidePanel
             isEdit={true}
             resource={item as unknown as Resource}
             filename={`${item.kind}_${item.metadata.name}`}
-            apiConfig={apiConfig}
             onApply={async (parsed) => await handlePatch(item, parsed)}
           />
         </Fragment>,
+        apiConfig,
       );
     },
-    [openInAside, handlePatch, apiConfig],
+    [openInAsideWithApiConfig, handlePatch, apiConfig],
   );
   const hasMCPAdminRights = useHasMcpAdminRights();
   const columns = useMemo<AnalyticalTableColumnDefinition[]>(
diff --git a/src/components/ControlPlane/ProvidersConfig.tsx b/src/components/ControlPlane/ProvidersConfig.tsx
@@ -38,7 +38,7 @@ type Rows = {
 
 export function ProvidersConfig() {
   const { t } = useTranslation();
-  const { openInAside } = useSplitter();
+  const { openInAsideWithApiConfig } = useSplitter();
   const errorDialogRef = useRef<ErrorDialogHandle>(null);
   const handlePatch = useHandleResourcePatch(errorDialogRef);
   const apiConfig = useContext(ApiConfigContext);
@@ -65,19 +65,19 @@ export function ProvidersConfig() {
   const openEditPanel = useCallback(
     (item: ProviderConfigItem) => {
       const identityKey = `${item.kind}:${item.metadata.name}`;
-      openInAside(
+      openInAsideWithApiConfig(
         <Fragment key={identityKey}>
           <YamlSidePanel
             isEdit={true}
             resource={item as unknown as Resource}
             filename={`${item.kind}_${item.metadata.name}`}
-            apiConfig={apiConfig}
             onApply={async (parsed) => await handlePatch(item, parsed)}
           />
         </Fragment>,
+        apiConfig,
       );
     },
-    [openInAside, handlePatch, apiConfig],
+    [openInAsideWithApiConfig, handlePatch, apiConfig],
   );
   const hasMCPAdminRights = useHasMcpAdminRights();
   const columns = useMemo<AnalyticalTableColumnDefinition[]>(
diff --git a/src/components/Graphs/Graph.tsx b/src/components/Graphs/Graph.tsx
@@ -31,7 +31,7 @@ const nodeTypes = {
 
 const Graph: React.FC = () => {
   const { t } = useTranslation();
-  const { openInAside } = useSplitter();
+  const { openInAsideWithApiConfig } = useSplitter();
   const { isDarkTheme } = useTheme();
   const [colorBy, setColorBy] = useState<ColorBy>('source');
   const apiConfig = useContext(ApiConfigContext);
@@ -41,11 +41,12 @@ const Graph: React.FC = () => {
         ? `${item.kind ?? ''}${item.metadata?.name ? '_' : ''}${item.metadata?.name ?? ''}`
         : '';
 
-      openInAside(
-        <YamlSidePanel apiConfig={apiConfig} resource={item as unknown as Resource} filename={yamlFilename} />,
+      openInAsideWithApiConfig(
+        <YamlSidePanel resource={item as unknown as Resource} filename={yamlFilename} />,
+        apiConfig,
       );
     },
-    [openInAside, apiConfig],
+    [openInAsideWithApiConfig, apiConfig],
   );
 
   const { nodes, edges, colorMap, loading, error } = useGraph(colorBy, handleYamlClick);
diff --git a/src/components/Splitter/SplitterContext.tsx b/src/components/Splitter/SplitterContext.tsx
@@ -1,10 +1,13 @@
 import { createContext, ReactNode, use, useCallback, useMemo, useState } from 'react';
+import { ApiConfigProvider } from '../Shared/k8s';
+import { ApiConfig } from '../../lib/api/types/apiConfig.ts';
 
 interface SplitterContextType {
   isAsideVisible: boolean;
   asideContent: ReactNode;
   closeAside: () => void;
   openInAside: (content: ReactNode) => void;
+  openInAsideWithApiConfig: (content: ReactNode, apiConfig: ApiConfig) => void;
 }
 
 const SplitterContext = createContext<SplitterContextType | null>(null);
@@ -18,14 +21,37 @@ export function SplitterProvider({ children }: { children: ReactNode }) {
     setIsAsideVisible(true);
   }, []);
 
+  const openInAsideWithApiConfig = useCallback((node: ReactNode, apiConfig: ApiConfig) => {
+    const projectName = apiConfig.mcpConfig?.projectName ?? '';
+    const workspaceName = apiConfig.mcpConfig?.workspaceName ?? '';
+    const controlPlaneName = apiConfig.mcpConfig?.controlPlaneName ?? '';
+    setAsideContent(
+      <ApiConfigProvider
+        apiConfig={{
+          mcpConfig:
+            projectName && workspaceName && controlPlaneName
+              ? {
+                  projectName: apiConfig.mcpConfig?.projectName ?? '',
+                  workspaceName: apiConfig.mcpConfig?.workspaceName ?? '',
+                  controlPlaneName: apiConfig.mcpConfig?.controlPlaneName ?? '',
+                }
+              : undefined,
+        }}
+      >
+        {node}
+      </ApiConfigProvider>,
+    );
+    setIsAsideVisible(true);
+  }, []);
+
   const closeAside = useCallback(() => {
     setIsAsideVisible(false);
     setAsideContent(null);
   }, []);
 
   const value = useMemo(() => {
-    return { isAsideVisible, asideContent, closeAside, openInAside };
-  }, [isAsideVisible, asideContent, closeAside, openInAside]);
+    return { isAsideVisible, asideContent, closeAside, openInAside, openInAsideWithApiConfig };
+  }, [isAsideVisible, asideContent, closeAside, openInAside, openInAsideWithApiConfig]);
 
   return <SplitterContext value={value}>{children}</SplitterContext>;
 }
diff --git a/src/components/Yaml/YamlSidePanel.tsx b/src/components/Yaml/YamlSidePanel.tsx
@@ -21,7 +21,6 @@ import { useCopyToClipboard } from '../../hooks/useCopyToClipboard.ts';
 import styles from './YamlSidePanel.module.css';
 import { IllustratedBanner } from '../Ui/IllustratedBanner/IllustratedBanner.tsx';
 import { YamlDiff } from '../Wizards/CreateManagedControlPlane/YamlDiff.tsx';
-import { ApiConfig } from '../../lib/api/types/apiConfig.ts';
 
 export const SHOW_DOWNLOAD_BUTTON = false; // Download button is hidden now due to stakeholder request
 
@@ -31,10 +30,9 @@ export interface YamlSidePanelProps {
   onApply?: (parsed: unknown, yaml: string) => void | boolean | Promise<void | boolean>;
   isEdit?: boolean;
   toolbarContent?: JSX.Element;
-  apiConfig?: ApiConfig;
 }
 
-export function YamlSidePanel({ resource, filename, onApply, isEdit, toolbarContent, apiConfig }: YamlSidePanelProps) {
+export function YamlSidePanel({ resource, filename, onApply, isEdit, toolbarContent }: YamlSidePanelProps) {
   const [showOnlyImportantData, setShowOnlyImportantData] = useState(true);
   const [mode, setMode] = useState<'edit' | 'review' | 'success'>('edit');
   const [editedYaml, setEditedYaml] = useState<string | null>(null);
@@ -170,7 +168,6 @@ export function YamlSidePanel({ resource, filename, onApply, isEdit, toolbarCont
             isEdit={isEdit}
             apiGroupName={apiGroupName}
             apiVersion={apiVersion}
-            apiConfig={apiConfig}
             kind={kind}
             onApply={handleApplyFromEditor}
           />
diff --git a/src/components/Yaml/YamlSidePanelWithLoader.tsx b/src/components/Yaml/YamlSidePanelWithLoader.tsx
@@ -7,22 +7,17 @@ import IllustratedError from '../Shared/IllustratedError.tsx';
 import { Resource } from '../../utils/removeManagedFieldsAndFilterData.ts';
 import { YamlSidePanel } from './YamlSidePanel.tsx';
 
-import { ApiConfig } from '../../lib/api/types/apiConfig.ts';
-
 export interface YamlSidePanelWithLoaderProps {
   workspaceName?: string;
   resourceType: 'projects' | 'workspaces' | 'managedcontrolplanes';
   resourceName: string;
   isEdit?: boolean;
-
-  apiConfig?: ApiConfig;
 }
 export function YamlSidePanelWithLoader({
   workspaceName,
   resourceType,
   resourceName,
   isEdit = false,
-  apiConfig,
 }: YamlSidePanelWithLoaderProps) {
   const { t } = useTranslation();
   const { isLoading, data, error } = useApiResource(
@@ -36,5 +31,5 @@ export function YamlSidePanelWithLoader({
 
   const filename = `${workspaceName ? `${workspaceName}_` : ''}${resourceType}_${resourceName}`;
 
-  return <YamlSidePanel resource={data as Resource} filename={filename} isEdit={isEdit} apiConfig={apiConfig} />;
+  return <YamlSidePanel resource={data as Resource} filename={filename} isEdit={isEdit} />;
 }
diff --git a/src/components/Yaml/YamlViewButton.tsx b/src/components/Yaml/YamlViewButton.tsx
@@ -26,34 +26,34 @@ export type YamlViewButtonProps = YamlViewButtonResourceProps | YamlViewButtonLo
 
 export function YamlViewButton({ variant, ...props }: YamlViewButtonProps) {
   const { t } = useTranslation();
-  const { openInAside } = useSplitter();
+  const { openInAsideWithApiConfig } = useSplitter();
   const apiConfig = useContext(ApiConfigContext);
   const openSplitterSidePanel = () => {
     switch (variant) {
       case 'resource': {
         const { resource, toolbarContent } = props as YamlViewButtonResourceProps;
-        openInAside(
+        openInAsideWithApiConfig(
           <YamlSidePanel
             isEdit={false}
             resource={resource}
             filename={`${resource?.kind ?? ''}${resource?.metadata?.name ? '_' : ''}${resource?.metadata?.name ?? ''}`}
             toolbarContent={toolbarContent}
-            apiConfig={apiConfig}
           />,
+          apiConfig,
         );
         break;
       }
 
       case 'loader': {
         const { workspaceName, resourceType, resourceName } = props as YamlViewButtonLoaderProps;
-        openInAside(
+        openInAsideWithApiConfig(
           <YamlSidePanelWithLoader
             isEdit={false}
             workspaceName={workspaceName}
             resourceType={resourceType}
             resourceName={resourceName}
-            apiConfig={apiConfig}
           />,
+          apiConfig,
         );
         break;
       }
diff --git a/src/components/Yaml/YamlViewerSchemaLoader.tsx b/src/components/Yaml/YamlViewerSchemaLoader.tsx
@@ -6,14 +6,14 @@ import Loading from '../Shared/Loading.tsx';
 import { CustomResourceDefinition } from '../../types/customResourceDefinition.ts';
 import openapiSchemaToJsonSchema from '@openapi-contrib/openapi-schema-to-json-schema';
 
-import { ApiConfig } from '../../lib/api/types/apiConfig.ts';
 import { getCustomResourceDefinitionPluralName } from '../../utils/getPluralName.ts';
 import { useToast } from '../../context/ToastContext.tsx';
+import { useTranslation } from 'react-i18next';
 
 interface YamlViewerSchemaLoaderProps extends YamlViewerProps {
   apiVersion: string;
   apiGroupName: string;
-  apiConfig?: ApiConfig;
+
   kind?: string;
 }
 
@@ -24,7 +24,7 @@ export const YamlViewerSchemaLoader: FC<YamlViewerSchemaLoaderProps> = ({
   onApply,
   apiGroupName,
   apiVersion,
-  apiConfig,
+
   kind,
 }) => {
   const customResourceDefinitionName = getCustomResourceDefinitionPluralName(kind);
@@ -40,14 +40,15 @@ export const YamlViewerSchemaLoader: FC<YamlViewerSchemaLoaderProps> = ({
       path: `/apis/apiextensions.k8s.io/v1/customresourcedefinitions/${customResourceDefinitionName}.${apiGroupName}`,
     },
     undefined,
-    apiConfig?.mcpConfig,
+    undefined,
     !customResourceDefinitionName,
   );
 
+  const { t } = useTranslation();
+
   useEffect(() => {
     if (!hasShownErrorRef.current && error) {
-      const message = (error as { message?: string }).message || 'Failed to load schema';
-      show(message);
+      show(t('errors.cannotLoadSchema'));
       hasShownErrorRef.current = true;
     }
   }, [error, show]);
