refactor

Author: lucasgoral

public/locales/en.json

@@ -388,7 +388,8 @@
   "editMCP": {
     "dialogTitle": "Edit Managed Control Plane",
     "titleText": "Managed Control Plane Updated Successfully!",
-    "subtitleText": "Your Managed Control Plane is being updated. It will be ready to use in just a few minutes. You can safely close this window."
+    "subtitleText": "Your Managed Control Plane is being updated. It will be ready to use in just a few minutes. You can safely close this window.",
+    "editComponents": "Edit components"
   },
   "componentsSelection": {
     "selectComponents": "Select Components",

src/components/ComponentsSelection/ComponentsSelectionContainer.tsx

@@ -29,9 +29,9 @@ export const ComponentsSelectionContainer: React.FC<ComponentsSelectionProps> =
   componentsList,
 }) => {
   const { t } = useTranslation();
-  const { isLoading, error, templateDefaultsError } = useComponentsSelection();
+  const { isLoading, error, templateDefaultsError, hasInitialized } = useComponentsSelection();
 
-  if (isLoading) {
+  if (isLoading || !hasInitialized) {
     return <Loading />;
   }
 

src/components/ComponentsSelection/ComponentsSelectionProvider.tsx

@@ -20,6 +20,7 @@ export type ComponentsSelectionContextValue = {
   isLoading: boolean;
   error: unknown;
   templateDefaultsError: string | null;
+  hasInitialized: boolean;
 };
 
 const ComponentsSelectionContext = createContext<ComponentsSelectionContextValue | undefined>(undefined);
@@ -69,12 +70,19 @@ export const ComponentsSelectionProvider: React.FC<ComponentsSelectionProviderPr
       !availableManagedComponentsListData?.items ||
       availableManagedComponentsListData.items.length === 0
     ) {
+    if (!availableManagedComponentsListData?.items) {
+      return;
+    }
+    if (availableManagedComponentsListData.items.length === 0) {
+      setInitialComponentsList([]);
+      setComponentsList([]);
+      initializedComponents.current = true;
       return;
     }
-
     const newComponentsList = availableManagedComponentsListData.items
       .map((item) => {
-        const versions = sortVersions(item.status?.versions ?? []);
+        const rawVersions = Array.isArray(item.status?.versions) ? (item.status?.versions as string[]) : [];
+        const versions = sortVersions(rawVersions);
         const template = defaultComponents.find((dc) => dc.name === (item.metadata?.name ?? ''));
         const templateVersion = template?.version;
         let selectedVersion = template
@@ -112,7 +120,6 @@ export const ComponentsSelectionProvider: React.FC<ComponentsSelectionProviderPr
       setTemplateDefaultsError(null);
       return;
     }
-
     const errors: string[] = [];
     defaultComponents.forEach((dc: TemplateDefaultComponent) => {
       if (!dc?.name) return;
@@ -136,16 +143,15 @@ export const ComponentsSelectionProvider: React.FC<ComponentsSelectionProviderPr
     if (!defaultComponents?.length) return;
     if (!componentsList?.length) return;
     if (initialSelection && Object.keys(initialSelection).length > 0) return;
-
     const anySelected = componentsList.some((c) => c.isSelected);
     if (anySelected) return;
 
     const updated = componentsList.map((c) => {
       const template = defaultComponents.find((dc) => dc.name === c.name);
       if (!template) return c;
       const templateVersion = template.version;
-      const selectedVersion =
-        templateVersion && Array.isArray(c.versions) && c.versions.includes(templateVersion) ? templateVersion : '';
+      const safeVersions = Array.isArray(c.versions) ? c.versions : [];
+      const selectedVersion = templateVersion && safeVersions.includes(templateVersion) ? templateVersion : '';
       return { ...c, isSelected: true, selectedVersion } as ComponentsListItem;
     });
 
@@ -157,6 +163,7 @@ export const ComponentsSelectionProvider: React.FC<ComponentsSelectionProviderPr
     isLoading: Boolean(isLoading),
     error,
     templateDefaultsError,
+    hasInitialized: Boolean(initializedComponents.current),
   };
 
   return <ComponentsSelectionContext.Provider value={value}>{children}</ComponentsSelectionContext.Provider>;

src/spaces/mcp/pages/McpPage.tsx

@@ -55,6 +55,7 @@ export default function McpPage() {
     error,
     isLoading,
   } = useApiResource(ControlPlaneResource(projectName, workspaceName, controlPlaneName));
+  // @ts-ignore
   const displayName = mcp?.metadata?.annotations?.[DISPLAY_NAME_ANNOTATION];
   const onEditComponents = () => {
     setEditManagedControlPlaneWizardSection('componentSelection');
@@ -159,9 +160,7 @@ export default function McpPage() {
                 header={
                   <FlexBox justifyContent={'SpaceBetween'} alignItems={'Center'} style={{ width: '100%' }}>
                     <Title level="H3">{t('McpPage.componentsTitle')}</Title>{' '}
-                    <Button icon={'edit'} onClick={onEditComponents}>
-                      Edit components
-                    </Button>
+                    <Button tooltip={t('editMCP.editComponents')} icon={'edit'} onClick={onEditComponents} />
                   </FlexBox>
                 }
                 noAnimation