@openshift-assisted/ui-lib 2.17.1-cim → 2.18.0-cim

package/lib/ocm/components/clusterWizard/ClusterWizardContextProvider.tsx

@@ -19,6 +19,8 @@ import { Cluster, InfraEnv } from '@openshift-assisted/types/assisted-installer-
 import { useUISettings } from '../../hooks';
 import { AlertVariant } from '@patternfly/react-core';
 import { useFeature } from '../../hooks/use-feature';
+import { isThirdPartyCNI } from '../../../common/types/networkType';
+import { isOciPlatformType } from '../utils';
 
 const addStepToClusterWizard = (
   wizardStepIds: ClusterWizardStepsType[],
@@ -50,7 +52,7 @@ const removeStepFromClusterWizard = (
 const getWizardStepIds = (
   wizardStepIds: ClusterWizardStepsType[] | undefined,
   staticIpView?: StaticIpView | 'dhcp-selected',
-  customManifestsStep?: boolean,
+
   isSingleClusterFeatureEnabled?: boolean,
 ): ClusterWizardStepsType[] => {
   let stepsCopy = wizardStepIds ? [...wizardStepIds] : [...defaultWizardSteps];
@@ -64,11 +66,6 @@ const getWizardStepIds = (
     stepsCopy = removeStepFromClusterWizard(stepsCopy, 'static-ip-network-wide-configurations', 2);
   }
 
-  if (customManifestsStep) {
-    stepsCopy = addStepToClusterWizard(stepsCopy, 'networking', ['custom-manifests']);
-  } else {
-    stepsCopy = removeStepFromClusterWizard(stepsCopy, 'custom-manifests', 1);
-  }
   if (isSingleClusterFeatureEnabled) {
     stepsCopy = addStepToClusterWizard(stepsCopy, 'networking', ['credentials-download']);
   }
@@ -90,11 +87,7 @@ const ClusterWizardContextProvider = ({
   const [currentStepId, setCurrentStepId] = React.useState<ClusterWizardStepsType>();
   const [connectedWizardStepIds, setWizardStepIds] = React.useState<ClusterWizardStepsType[]>();
   const [wizardPerPage, setWizardPerPage] = React.useState(10);
-  const [customManifestsStep, setCustomManifestsStep] = React.useState<boolean>(false);
   const [installDisconnected, setInstallDisconnected] = React.useState(false);
-  const [disconnectedInfraEnv, setDisconnectedInfraEnv] = React.useState<InfraEnv | undefined>(
-    infraEnv,
-  );
   const location = useLocation();
   const locationState = location.state as ClusterWizardFlowStateType | undefined;
   const {
@@ -111,10 +104,13 @@ const ClusterWizardContextProvider = ({
   React.useEffect(() => {
     if (!UISettingsLoading) {
       const staticIpInfo = infraEnv ? getStaticIpInfo(infraEnv) : undefined;
-      const customManifestsStepEnabled = !!uiSettings?.addCustomManifests;
-      const customManifestsStepNeedsToBeFilled = !!(
-        uiSettings?.addCustomManifests && !uiSettings?.customManifestsAdded
-      );
+      let customManifestsRequired = false;
+      if (cluster) {
+        customManifestsRequired =
+          isThirdPartyCNI(cluster.networkType) || isOciPlatformType(cluster);
+      }
+      const customManifestsStepNeedsToBeFilled =
+        customManifestsRequired && !uiSettings?.customManifestsAdded;
 
       const requiredStepId = getClusterWizardFirstStep(
         locationState,
@@ -123,11 +119,10 @@ const ClusterWizardContextProvider = ({
         cluster?.hosts,
         customManifestsStepNeedsToBeFilled,
       );
-
       const firstStepIds = getWizardStepIds(
         wizardStepIds,
         staticIpInfo?.view,
-        customManifestsStepEnabled,
+
         isSingleClusterFeatureEnabled,
       );
 
@@ -141,7 +136,6 @@ const ClusterWizardContextProvider = ({
 
       setWizardStepIds(firstStepIds);
       setClusterPermissions(cluster, permissions);
-      setCustomManifestsStep(!!uiSettings?.addCustomManifests);
     }
 
     if (
@@ -169,10 +163,11 @@ const ClusterWizardContextProvider = ({
       if (!staticIpInfo) {
         throw `Wizard step is currently ${currentStepId}, but no static ip info is defined`;
       }
+
       const newStepIds = getWizardStepIds(
         wizardStepIds,
         staticIpInfo.view,
-        customManifestsStep,
+
         isSingleClusterFeatureEnabled,
       );
       setWizardStepIds(newStepIds);
@@ -186,18 +181,6 @@ const ClusterWizardContextProvider = ({
       setCurrentStepId(stepId);
     };
 
-    const onSetAddCustomManifestsStep = (addCustomManifest: boolean) => {
-      setCustomManifestsStep(addCustomManifest);
-      setWizardStepIds(
-        getWizardStepIds(
-          wizardStepIds,
-          undefined,
-          addCustomManifest,
-          isSingleClusterFeatureEnabled,
-        ),
-      );
-    };
-
     return {
       moveBack(): void {
         clearAlerts();
@@ -219,9 +202,7 @@ const ClusterWizardContextProvider = ({
         } else {
           setCurrentStepId('static-ip-network-wide-configurations');
         }
-        setWizardStepIds(
-          getWizardStepIds(wizardStepIds, view, customManifestsStep, isSingleClusterFeatureEnabled),
-        );
+        setWizardStepIds(getWizardStepIds(wizardStepIds, view, isSingleClusterFeatureEnabled));
       },
       onUpdateHostNetworkConfigType(type: HostsNetworkConfigurationType): void {
         if (type === HostsNetworkConfigurationType.STATIC) {
@@ -229,26 +210,19 @@ const ClusterWizardContextProvider = ({
             getWizardStepIds(
               wizardStepIds,
               StaticIpView.FORM,
-              customManifestsStep,
+
               isSingleClusterFeatureEnabled,
             ),
           );
         } else {
           setWizardStepIds(
-            getWizardStepIds(
-              wizardStepIds,
-              'dhcp-selected',
-              customManifestsStep,
-              isSingleClusterFeatureEnabled,
-            ),
+            getWizardStepIds(wizardStepIds, 'dhcp-selected', isSingleClusterFeatureEnabled),
           );
         }
       },
       wizardStepIds: wizardStepIds,
       currentStepId,
       setCurrentStepId: onSetCurrentStepId,
-      customManifestsStep,
-      setCustomManifestsStep: onSetAddCustomManifestsStep,
       wizardPerPage,
       setWizardPerPage,
       uiSettings,
@@ -262,23 +236,18 @@ const ClusterWizardContextProvider = ({
           connectedWizardStepIds?.length && onSetCurrentStepId(connectedWizardStepIds[0]);
         }
       },
-      disconnectedInfraEnv,
-      setDisconnectedInfraEnv,
     };
   }, [
     wizardStepIds,
     currentStepId,
     infraEnv,
-    customManifestsStep,
     wizardPerPage,
     isSingleClusterFeatureEnabled,
     clearAlerts,
     uiSettings,
     updateUISettings,
     installDisconnected,
-    setInstallDisconnected,
     connectedWizardStepIds,
-    disconnectedInfraEnv,
   ]);
 
   if (!contextValue) {

package/lib/ocm/components/clusterWizard/ClusterWizardFooter.tsx

@@ -17,8 +17,6 @@ import { onFetchEvents } from '../fetching/fetchEvents';
 import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
 import { useFeature } from '../../hooks/use-feature';
 import { useModalDialogsContext } from '../hosts/ModalDialogsContext';
-import ClustersService from '../../services/ClustersService';
-import { handleApiError, getApiErrorMessage } from '../../../common/api';
 
 type ClusterValidationSectionProps = {
   cluster?: Cluster;
@@ -73,7 +71,6 @@ type ClusterWizardFooterProps = WizardFooterGenericProps & {
   errorFields?: string[];
   alertTitle?: string;
   alertContent?: string | null;
-  disconnectedClusterId?: string;
 };
 
 const ClusterWizardFooter = ({
@@ -83,37 +80,19 @@ const ClusterWizardFooter = ({
   alertTitle,
   alertContent,
   onCancel,
-  disconnectedClusterId,
   ...rest
 }: ClusterWizardFooterProps) => {
-  const { alerts, addAlert } = useAlerts();
+  const { alerts } = useAlerts();
   const navigate = useNavigate();
   const isSingleClusterFeatureEnabled = useFeature('ASSISTED_INSTALLER_SINGLE_CLUSTER_FEATURE');
   const { currentStepId } = useClusterWizardContext();
   const { resetSingleClusterDialog } = useModalDialogsContext();
-  const { setDisconnectedInfraEnv } = useClusterWizardContext();
 
-  const handleCancel = React.useCallback(async () => {
-    if (disconnectedClusterId) {
-      try {
-        await ClustersService.remove(disconnectedClusterId);
-      } catch (e) {
-        handleApiError(e, () =>
-          addAlert({
-            title: 'Failed to remove cluster',
-            message: getApiErrorMessage(e),
-          }),
-        );
-      }
-    }
-    setDisconnectedInfraEnv(undefined);
-    navigate('/cluster-list');
-  }, [navigate, setDisconnectedInfraEnv, addAlert, disconnectedClusterId]);
+  const handleCancel = React.useCallback(() => navigate('/cluster-list'), [navigate]);
 
-  const handleReset = React.useCallback(
-    () => resetSingleClusterDialog.open({ cluster }),
-    [resetSingleClusterDialog, cluster],
-  );
+  const handleReset = React.useCallback(() => {
+    resetSingleClusterDialog.open({ cluster });
+  }, [resetSingleClusterDialog, cluster]);
 
   const alertsSection = alerts.length ? <Alerts /> : undefined;
 

package/lib/ocm/components/clusterWizard/NewClusterWizard.tsx

@@ -4,7 +4,6 @@ import ClusterDetails from './ClusterDetails';
 import { useClusterWizardContext } from './ClusterWizardContext';
 import ReviewStep from './disconnected/ReviewStep';
 import BasicStep from './disconnected/BasicStep';
-import OptionalConfigurationsStep from './disconnected/OptionalConfigurationsStep';
 import { ClusterWizardStepsType } from './wizardTransition';
 
 const getCurrentStep = (currentStepId: ClusterWizardStepsType) => {
@@ -13,8 +12,6 @@ const getCurrentStep = (currentStepId: ClusterWizardStepsType) => {
       return <ReviewStep />;
     case 'disconnected-basic':
       return <BasicStep />;
-    case 'disconnected-optional-configurations':
-      return <OptionalConfigurationsStep />;
     default:
       return <ClusterDetails />;
   }
@@ -22,6 +19,7 @@ const getCurrentStep = (currentStepId: ClusterWizardStepsType) => {
 
 const NewClusterWizard: React.FC = () => {
   const { currentStepId } = useClusterWizardContext();
+
   return (
     <div className={classNames('pf-v6-c-wizard', 'cluster-wizard')}>
       {getCurrentStep(currentStepId)}

package/lib/ocm/components/clusterWizard/OpenShiftVersionsContext.tsx

@@ -23,6 +23,7 @@ export const OpenShiftVersionsContextProvider = ({ children }: { children: React
   const [allVersions, setAllVersions] = React.useState<OpenshiftVersionOptionType[]>([]);
   const [latestVersions, setLatestVersions] = React.useState<OpenshiftVersionOptionType[]>([]);
   const [error, setError] = React.useState<{ title: string; message: string }>();
+  const [isLoading, setIsLoading] = React.useState(true);
 
   const sortVersions = (versions: OpenshiftVersionOptionType[]) => {
     return versions.sort((version1, version2) =>
@@ -30,8 +31,11 @@ export const OpenShiftVersionsContextProvider = ({ children }: { children: React
     );
   };
 
-  const getVersions = React.useCallback(
-    async (latest: boolean, setVersions: (versions: OpenshiftVersionOptionType[]) => void) => {
+  React.useEffect(() => {
+    const getVersions = async (
+      latest: boolean,
+      setVersions: (versions: OpenshiftVersionOptionType[]) => void,
+    ) => {
       try {
         const { data } = await SupportedOpenshiftVersionsAPI.list(latest);
 
@@ -49,7 +53,15 @@ export const OpenShiftVersionsContextProvider = ({ children }: { children: React
           };
         }) as OpenshiftVersionOptionType[];
 
-        setVersions(sortVersions(versions));
+        const sorted = sortVersions(versions);
+        setVersions(sorted);
+
+        if (!latest && sorted.length === 0) {
+          setError({
+            title: 'Failed to retrieve list of supported OpenShift versions.',
+            message: 'No OpenShift versions available.',
+          });
+        }
       } catch (e) {
         handleApiError(e, (e) => {
           setError({
@@ -58,21 +70,13 @@ export const OpenShiftVersionsContextProvider = ({ children }: { children: React
           });
         });
       }
-    },
-    [],
-  );
+    };
 
-  React.useEffect(() => {
-    if (!allVersions.length) {
-      void getVersions(false, setAllVersions);
-    }
-  }, [allVersions, getVersions]);
-
-  React.useEffect(() => {
-    if (!latestVersions.length) {
-      void getVersions(true, setLatestVersions);
-    }
-  }, [getVersions, latestVersions]);
+    void Promise.allSettled([
+      getVersions(false, setAllVersions),
+      getVersions(true, setLatestVersions),
+    ]).finally(() => setIsLoading(false));
+  }, []);
 
   const findVersionItemByVersion = React.useCallback(
     (version: OpenShiftVersion) => {
@@ -111,7 +115,7 @@ export const OpenShiftVersionsContextProvider = ({ children }: { children: React
       value={{
         allVersions,
         latestVersions,
-        loading: !error && (allVersions?.length === 0 || latestVersions?.length === 0),
+        loading: !error && isLoading,
         error,
         isSupportedOpenShiftVersion,
         getCpuArchitectures,

package/lib/ocm/components/clusterWizard/constants.ts

@@ -14,7 +14,6 @@ export const wizardStepNames: { [key in ClusterWizardStepsType]: string } = {
   'credentials-download': 'Download credentials',
   'disconnected-review': 'Review and download ISO',
   'disconnected-basic': 'Basic information',
-  'disconnected-optional-configurations': 'Optional configurations',
 };
 
 export const defaultWizardSteps: ClusterWizardStepsType[] = [
@@ -23,6 +22,7 @@ export const defaultWizardSteps: ClusterWizardStepsType[] = [
   'host-discovery',
   'storage',
   'networking',
+  'custom-manifests',
   'review',
 ];
 

package/lib/ocm/components/clusterWizard/disconnected/BasicStep.tsx

@@ -15,53 +15,10 @@ import ClusterWizardNavigation from '../ClusterWizardNavigation';
 import { WithErrorBoundary } from '../../../../common/components/ErrorHandling/WithErrorBoundary';
 import InstallDisconnectedSwitch from './InstallDisconnectedSwitch';
 import { Formik } from 'formik';
-import ClustersService from '../../../services/ClustersService';
-import { handleApiError, getApiErrorMessage } from '../../../../common/api';
-import { useAlerts } from '../../../../common/components/AlertsContextProvider';
-import { AlertVariant } from '@patternfly/react-core';
-import { ClusterWizardFlowStateNew } from '../wizardTransition';
-import { useLocation, useNavigate } from 'react-router-dom-v5-compat';
-import { AxiosResponse } from 'axios';
-import { Cluster } from '@openshift-assisted/types//assisted-installer-service';
 
 const BasicStep = () => {
   const { t } = useTranslation();
   const { moveNext } = useClusterWizardContext();
-  const { addAlert } = useAlerts();
-  const [isSubmitting, setIsSubmitting] = React.useState(false);
-  const navigate = useNavigate();
-  const location = useLocation();
-  const currentPath = location.pathname;
-  let disconnectedClusterId: string | undefined;
-
-  const onNext = async () => {
-    try {
-      setIsSubmitting(true);
-      // Create cluster only - infraEnv will be created in OptionalConfigurationsStep
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-      const { data: disconnectedCluster }: AxiosResponse<Cluster> =
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-call
-        await ClustersService.registerDisconnected({
-          name: 'disconnected-cluster',
-          openshiftVersion: '4.20',
-        });
-      disconnectedClusterId = disconnectedCluster.id;
-      navigate(`${currentPath}/${disconnectedClusterId}`, {
-        state: ClusterWizardFlowStateNew,
-      });
-      moveNext();
-    } catch (error: unknown) {
-      handleApiError(error, () => {
-        addAlert({
-          title: 'Failed to create disconnected cluster',
-          message: getApiErrorMessage(error),
-          variant: AlertVariant.danger,
-        });
-      });
-    } finally {
-      setIsSubmitting(false);
-    }
-  };
 
   return (
     <Formik
@@ -72,15 +29,7 @@ const BasicStep = () => {
     >
       <ClusterWizardStep
         navigation={<ClusterWizardNavigation />}
-        footer={
-          <ClusterWizardFooter
-            onNext={() => {
-              void onNext();
-            }}
-            isSubmitting={isSubmitting}
-            disconnectedClusterId={disconnectedClusterId}
-          />
-        }
+        footer={<ClusterWizardFooter onNext={moveNext} />}
       >
         <WithErrorBoundary title="Failed to load Basic step">
           <Grid hasGutter>

package/lib/ocm/components/clusterWizard/disconnected/ReviewStep.tsx

@@ -26,18 +26,15 @@ import {
 } from '@patternfly/react-core';
 import { Formik } from 'formik';
 import { saveAs } from 'file-saver';
-import { useNavigate, useParams } from 'react-router-dom-v5-compat';
+import { useNavigate } from 'react-router-dom-v5-compat';
 
 import { getOperatorSpecs } from '../../../../common/components/operators/operatorSpecs';
-import ClustersService from '../../../services/ClustersService';
-import { handleApiError, getApiErrorMessage } from '../../../../common/api';
-import { useAlerts } from '../../../../common/components/AlertsContextProvider';
-import { AlertVariant } from '@patternfly/react-core';
+
+const downloadUrl =
+  'https://mirror.openshift.com/pub/cgw/assisted-installer-disconnected/latest/agent-ove.x86_64.iso';
 
 const ReviewStep = () => {
-  const { moveBack, disconnectedInfraEnv, setDisconnectedInfraEnv } = useClusterWizardContext();
-  const { clusterId } = useParams<{ clusterId: string }>();
-  const { addAlert } = useAlerts();
+  const { moveBack } = useClusterWizardContext();
   const opSpecs = getOperatorSpecs(() => undefined);
   const navigate = useNavigate();
 
@@ -53,40 +50,11 @@ const ReviewStep = () => {
         footer={
           <ClusterWizardFooter
             onNext={() => {
-              void (async () => {
-                if (disconnectedInfraEnv?.downloadUrl) {
-                  saveAs(disconnectedInfraEnv.downloadUrl);
-                }
-                if (clusterId) {
-                  try {
-                    await ClustersService.remove(clusterId);
-                    // Remove infraEnv from wizard context after successful deregistration
-                    setDisconnectedInfraEnv(undefined);
-                    // Navigate to cluster-list only after successful deregistration
-                    navigate('/cluster-list');
-                  } catch (error) {
-                    handleApiError(error, () => {
-                      addAlert({
-                        title: 'Failed to deregister cluster',
-                        message: getApiErrorMessage(error),
-                        variant: AlertVariant.danger,
-                      });
-                    });
-                    // Error handling: continue with navigation even if deregistration fails
-                    // Still clear the context to avoid stale data
-                    setDisconnectedInfraEnv(undefined);
-                    // Navigate even on error to avoid getting stuck
-                    navigate('/cluster-list');
-                  }
-                } else {
-                  // If there's no cluster to deregister, navigate immediately
-                  navigate('/cluster-list');
-                }
-              })();
+              downloadUrl && saveAs(downloadUrl);
+              navigate('/cluster-list');
             }}
             onBack={moveBack}
             nextButtonText="Download ISO"
-            disconnectedClusterId={clusterId}
           />
         }
       >

package/lib/ocm/components/clusterWizard/index.ts

@@ -2,5 +2,4 @@ export { default as ClusterDetailsForm } from './ClusterDetailsForm';
 export { default as NewClusterWizard } from './NewClusterWizard';
 export { default as ClusterWizard } from './ClusterWizard';
 export { default as ClusterWizardContextProvider } from './ClusterWizardContextProvider';
-export { useClusterWizardContext } from './ClusterWizardContext';
 export { OpenShiftVersionsContextProvider } from './OpenShiftVersionsContext';

package/lib/ocm/components/clusterWizard/wizardTransition.ts

@@ -31,8 +31,7 @@ export type ClusterWizardStepsType =
   | 'custom-manifests'
   | 'credentials-download'
   | 'disconnected-basic'
-  | 'disconnected-review'
-  | 'disconnected-optional-configurations';
+  | 'disconnected-review';
 
 const wizardStepsOrder: ClusterWizardStepsType[] = [
   'cluster-details',
@@ -50,7 +49,6 @@ const wizardStepsOrder: ClusterWizardStepsType[] = [
 
 export const disconnectedSteps: ClusterWizardStepsType[] = [
   'disconnected-basic',
-  'disconnected-optional-configurations',
   'disconnected-review',
 ];
 
@@ -102,6 +100,9 @@ export const getClusterWizardFirstStep = (
     case 'pending-for-input':
     case 'adding-hosts':
     case 'insufficient':
+      if (customManifestsStepNeedsToBeFilled) {
+        return 'custom-manifests';
+      }
       return getStepForFailingHostValidations(hosts);
     default:
       return 'cluster-details';
@@ -241,7 +242,12 @@ const networkingStepValidationsMap: WizardStepValidationMap = {
   // Alternatively we would have to whitelist network validations instead of using group
   // TODO(mlibra): remove that container-images-available from soft validations and let backend drive it via disabling it.
   //   Depends on: https://issues.redhat.com/browse/MGMT-5265
-  softValidationIds: ['ntp-synced', 'container-images-available', 'mtu-valid'],
+  softValidationIds: [
+    'ntp-synced',
+    'container-images-available',
+    'mtu-valid',
+    'custom-manifests-requirements-satisfied',
+  ],
 };
 
 const reviewStepValidationsMap: WizardStepValidationMap = {
@@ -262,7 +268,6 @@ const credentialsValidationMap = buildEmptyValidationsMap();
 const customManifestsValidationsMap = buildEmptyValidationsMap();
 const disconnectedReviewValidationsMap = buildEmptyValidationsMap();
 const disconnectedBasicValidationsMap = buildEmptyValidationsMap();
-const disconnectedOptionalConfigurationsValidationsMap = buildEmptyValidationsMap();
 
 export const wizardStepsValidationsMap: WizardStepsValidationMap<ClusterWizardStepsType> = {
   'cluster-details': clusterDetailsStepValidationsMap,
@@ -278,7 +283,6 @@ export const wizardStepsValidationsMap: WizardStepsValidationMap<ClusterWizardSt
   'credentials-download': credentialsValidationMap,
   'disconnected-review': disconnectedReviewValidationsMap,
   'disconnected-basic': disconnectedBasicValidationsMap,
-  'disconnected-optional-configurations': disconnectedOptionalConfigurationsValidationsMap,
 };
 
 export const allClusterWizardSoftValidationIds =

package/lib/ocm/components/clusters/ClusterStatus.tsx

@@ -1,15 +1,15 @@
 import React from 'react';
-import { t_global_color_status_success_default as okColor } from '@patternfly/react-tokens/dist/js/t_global_color_status_success_default';
 import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
 import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
 import { FileAltIcon } from '@patternfly/react-icons/dist/js/icons/file-alt-icon';
 import { CheckCircleIcon } from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
 import { InProgressIcon } from '@patternfly/react-icons/dist/js/icons/in-progress-icon';
 import { BanIcon } from '@patternfly/react-icons/dist/js/icons/ban-icon';
-import { clusterStatusLabels, UiIcon, WithTestID } from '../../../common';
+import { clusterStatusLabels, WithTestID } from '../../../common';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 import { TFunction } from 'i18next';
 import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
+import { Icon } from '@patternfly/react-core';
 
 type ClusterStatusProps = {
   status: Cluster['status'];
@@ -24,25 +24,47 @@ type ClusterStatusIconProps = {
 export const ClusterStatusIcon: React.FC<ClusterStatusIconProps> = ({ status, ...extraProps }) => {
   switch (status) {
     case 'cancelled':
-      return <UiIcon size="sm" icon={<BanIcon {...extraProps} />} />;
+      return (
+        <Icon size="sm">
+          <BanIcon {...extraProps} />
+        </Icon>
+      );
     case 'insufficient':
     case 'pending-for-input':
     case 'ready':
-      return <UiIcon size="sm" icon={<FileAltIcon {...extraProps} />} />;
+      return (
+        <Icon size="sm">
+          <FileAltIcon {...extraProps} />
+        </Icon>
+      );
     case 'error':
-      return <UiIcon size="sm" status="danger" icon={<ExclamationCircleIcon {...extraProps} />} />;
+      return (
+        <Icon size="sm" status="danger">
+          <ExclamationCircleIcon {...extraProps} />
+        </Icon>
+      );
     case 'installed':
-      return <UiIcon size="sm" icon={<CheckCircleIcon color={okColor.value} {...extraProps} />} />;
+      return (
+        <Icon status="success" size="sm">
+          <CheckCircleIcon {...extraProps} />
+        </Icon>
+      );
     case 'installing-pending-user-action':
       return (
-        <UiIcon size="sm" status="warning" icon={<ExclamationTriangleIcon {...extraProps} />} />
+        <Icon size="sm" status="warning">
+          <ExclamationTriangleIcon {...extraProps} />
+        </Icon>
       );
 
     case 'preparing-for-installation':
     case 'installing':
     case 'finalizing':
     case 'adding-hosts':
-      return <UiIcon size="sm" icon={<InProgressIcon {...extraProps} />} />;
+      return (
+        <Icon size="sm">
+          <InProgressIcon {...extraProps} />
+        </Icon>
+      );
     default:
       return <></>;
   }

package/lib/ocm/components/clusters/ClusterToolbar.tsx

@@ -6,7 +6,10 @@ interface Props {
   validationSection?: React.ReactNode;
 }
 
-const ClusterToolbar: React.FC<Props> = ({ children, validationSection }) => (
+const ClusterToolbar: React.FC<React.PropsWithChildren<Props>> = ({
+  children,
+  validationSection,
+}) => (
   <>
     {validationSection}
     <ActionGroup>