refactor

Author: lucasgoral

public/locales/en.json

@@ -308,6 +308,7 @@
   "componentsSelection": {
     "selectComponents": "Select Components",
     "selectedComponents": "Selected Components",
-    "pleaseSelectComponents": "Choose the components you want to add to your Managed Control Plane."
+    "pleaseSelectComponents": "Choose the components you want to add to your Managed Control Plane.",
+    "cannotLoad": "Cannot load components list"
   }
 }

src/components/ComponentsSelection/ComponentsSelection.tsx

@@ -20,26 +20,26 @@ import {
 import styles from './ComponentsSelection.module.css';
 import { Infobox } from '../Ui/Infobox/Infobox.tsx';
 import { useTranslation } from 'react-i18next';
-import { ComponentSelectionItem } from '../../lib/api/types/crate/createManagedControlPlane.ts';
+import { ComponentsListItem } from '../../lib/api/types/crate/createManagedControlPlane.ts';
 import { getSelectedComponents } from './ComponentsSelectionContainer.tsx';
 
 export interface ComponentsSelectionProps {
-  components: ComponentSelectionItem[];
-  setSelectedComponents: (components: ComponentSelectionItem[]) => void;
+  componentsList: ComponentsListItem[];
+  setComponentsList: (components: ComponentsListItem[]) => void;
 }
 
 export const ComponentsSelection: React.FC<ComponentsSelectionProps> = ({
-  components,
-  setSelectedComponents,
+  componentsList,
+  setComponentsList,
 }) => {
   const [searchTerm, setSearchTerm] = useState('');
   const { t } = useTranslation();
   const handleSelectionChange = (
     e: Ui5CustomEvent<CheckBoxDomRef, { checked: boolean }>,
   ) => {
     const id = e.target?.id;
-    setSelectedComponents(
-      components.map((component) =>
+    setComponentsList(
+      componentsList.map((component) =>
         component.name === id
           ? { ...component, isSelected: !component.isSelected }
           : component,
@@ -57,19 +57,19 @@ export const ComponentsSelection: React.FC<ComponentsSelectionProps> = ({
     const selectedOption = e.detail.selectedOption as HTMLElement;
     const name = selectedOption.dataset.name;
     const version = selectedOption.dataset.version;
-    setSelectedComponents(
-      components.map((component) =>
+    setComponentsList(
+      componentsList.map((component) =>
         component.name === name
           ? { ...component, selectedVersion: version || '' }
           : component,
       ),
     );
   };
 
-  const searchResults = components.filter(({ name }) =>
+  const searchResults = componentsList.filter(({ name }) =>
     name.toLowerCase().includes(searchTerm.toLowerCase()),
   );
-  const selectedComponents = getSelectedComponents(components);
+  const selectedComponents = getSelectedComponents(componentsList);
 
   return (
     <div>
@@ -88,7 +88,7 @@ export const ComponentsSelection: React.FC<ComponentsSelectionProps> = ({
           {searchResults.map((component) => {
             const isProviderDisabled =
               component.name?.includes('provider') &&
-              components?.find(({ name }) => name === 'crossplane')
+              componentsList?.find(({ name }) => name === 'crossplane')
                 ?.isSelected === false;
             return (
               <FlexBox

src/components/ComponentsSelection/ComponentsSelectionContainer.tsx

@@ -7,15 +7,16 @@ import { sortVersions } from '../../utils/componentsVersions.ts';
 import { ListManagedComponents } from '../../lib/api/types/crate/listManagedComponents.ts';
 import useApiResource from '../../lib/api/useApiResource.ts';
 import Loading from '../Shared/Loading.tsx';
-import { ComponentSelectionItem } from '../../lib/api/types/crate/createManagedControlPlane.ts';
+import { ComponentsListItem } from '../../lib/api/types/crate/createManagedControlPlane.ts';
+import { useTranslation } from 'react-i18next';
 
 export interface ComponentsSelectionProps {
-  selectedComponents: ComponentSelectionItem[];
-  setSelectedComponents: (components: ComponentSelectionItem[]) => void;
+  componentsList: ComponentsListItem[];
+  setComponentsList: (components: ComponentsListItem[]) => void;
 }
 
 // get selected components and when Crossplane is selected then also providers
-export const getSelectedComponents = (components: ComponentSelectionItem[]) =>
+export const getSelectedComponents = (components: ComponentsListItem[]) =>
   components.filter(
     (component) =>
       component.isSelected &&
@@ -28,13 +29,14 @@ export const getSelectedComponents = (components: ComponentSelectionItem[]) =>
 
 export const ComponentsSelectionContainer: React.FC<
   ComponentsSelectionProps
-> = ({ setSelectedComponents, selectedComponents }) => {
+> = ({ setComponentsList, componentsList }) => {
   const {
     data: availableManagedComponentsListData,
     error,
     isLoading,
   } = useApiResource(ListManagedComponents());
   const [isReady, setIsReady] = useState(false);
+  const { t } = useTranslation();
   useEffect(() => {
     if (
       availableManagedComponentsListData?.items.length === 0 ||
@@ -43,7 +45,7 @@ export const ComponentsSelectionContainer: React.FC<
     )
       return;
 
-    setSelectedComponents(
+    setComponentsList(
       availableManagedComponentsListData?.items?.map((item) => {
         const versions = sortVersions(item.status.versions);
         return {
@@ -56,20 +58,20 @@ export const ComponentsSelectionContainer: React.FC<
       }) ?? [],
     );
     setIsReady(true);
-  }, [availableManagedComponentsListData, isReady, setSelectedComponents]);
+  }, [availableManagedComponentsListData, isReady, setComponentsList]);
   if (isLoading) {
     return <Loading />;
   }
   if (error) return <IllustratedError />;
   return (
     <>
-      {selectedComponents.length > 0 ? (
+      {componentsList.length > 0 ? (
         <ComponentsSelection
-          components={selectedComponents}
-          setSelectedComponents={setSelectedComponents}
+          componentsList={componentsList}
+          setComponentsList={setComponentsList}
         />
       ) : (
-        <IllustratedError title={'Cannot load components list'} />
+        <IllustratedError title={t('componentsSelection.cannotLoad')} />
       )}
     </>
   );

src/components/Dialogs/CreateWorkspaceDialogContainer.tsx

@@ -23,15 +23,15 @@ import { useTranslation } from 'react-i18next';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useForm } from 'react-hook-form';
 import { validationSchemaProjectWorkspace } from '../../lib/api/validations/schemas.ts';
-import { ComponentSelectionItem } from '../../lib/api/types/crate/createManagedControlPlane.ts';
+import { ComponentsListItem } from '../../lib/api/types/crate/createManagedControlPlane.ts';
 
 export type CreateDialogProps = {
   name: string;
   displayName?: string;
   chargingTarget?: string;
   chargingTargetType?: string;
   members: Member[];
-  selectedComponents?: ComponentSelectionItem[];
+  selectedComponents?: ComponentsListItem[];
 };
 
 export function CreateWorkspaceDialogContainer({

src/components/Wizards/CreateManagedControlPlaneWizardContainer.tsx

@@ -27,7 +27,7 @@ import YamlViewer from '../Yaml/YamlViewer.tsx';
 import { stringify } from 'yaml';
 import { APIError } from '../../lib/api/error.ts';
 import {
-  ComponentSelectionItem,
+  ComponentsListItem,
   CreateManagedControlPlane,
   CreateManagedControlPlaneResource,
   CreateManagedControlPlaneType,
@@ -137,7 +137,7 @@ export const CreateManagedControlPlaneWizardContainer: FC<
   const { trigger } = useApiResourceMutation<CreateManagedControlPlaneType>(
     CreateManagedControlPlaneResource(projectName, workspaceName),
   );
-  const selectedComponents = watch('selectedComponents');
+  const componentsList = watch('selectedComponents');
   const handleCreateManagedControlPlane = useCallback(
     async ({
       name,
@@ -154,7 +154,7 @@ export const CreateManagedControlPlaneWizardContainer: FC<
               displayName,
               chargingTarget,
               members,
-              selectedComponents,
+              selectedComponents: componentsList,
             },
             idpPrefix,
           ),
@@ -172,7 +172,7 @@ export const CreateManagedControlPlaneWizardContainer: FC<
         return false;
       }
     },
-    [trigger, projectName, workspaceName, selectedComponents],
+    [trigger, projectName, workspaceName, componentsList],
   );
 
   const handleStepChange = useCallback(
@@ -219,8 +219,8 @@ export const CreateManagedControlPlaneWizardContainer: FC<
     [setValue],
   );
 
-  const setSelectedComponents = useCallback(
-    (components: ComponentSelectionItem[]) => {
+  const setComponentsList = useCallback(
+    (components: ComponentsListItem[]) => {
       setValue('selectedComponents', components, { shouldValidate: false });
     },
     [setValue],
@@ -335,8 +335,8 @@ export const CreateManagedControlPlaneWizardContainer: FC<
           disabled={isStepDisabled('componentSelection')}
         >
           <ComponentsSelectionContainer
-            selectedComponents={selectedComponents ?? []}
-            setSelectedComponents={setSelectedComponents}
+            componentsList={componentsList ?? []}
+            setComponentsList={setComponentsList}
           />
         </WizardStep>
         <WizardStep
@@ -379,7 +379,7 @@ export const CreateManagedControlPlaneWizardContainer: FC<
               </List>
               <br />
               <List headerText={t('common.components')}>
-                {getSelectedComponents(selectedComponents ?? []).map(
+                {getSelectedComponents(componentsList ?? []).map(
                   (component) => (
                     <ListItemStandard
                       key={component.name}
@@ -401,7 +401,7 @@ export const CreateManagedControlPlaneWizardContainer: FC<
                       chargingTarget: getValues('chargingTarget'),
                       members: getValues('members'),
                       selectedComponents: getSelectedComponents(
-                        selectedComponents ?? [],
+                        componentsList ?? [],
                       ),
                     },
                     idpPrefix,

src/lib/api/types/crate/createManagedControlPlane.ts

@@ -9,7 +9,7 @@ import { Member } from '../shared/members';
 export type Annotations = Record<string, string>;
 export type Labels = Record<string, string>;
 
-export interface ComponentSelectionItem {
+export interface ComponentsListItem {
   name: string;
   versions: string[];
   isSelected: boolean;
@@ -68,7 +68,7 @@ export const CreateManagedControlPlane = (
     chargingTarget?: string;
     chargingTargetType?: string;
     members?: Member[];
-    selectedComponents?: ComponentSelectionItem[];
+    selectedComponents?: ComponentsListItem[];
   },
   idpPrefix?: string,
 ): CreateManagedControlPlaneType => {