@openshift-assisted/ui-lib 2.50.1 → 2.51.1

package/lib/ocm/components/clusterConfiguration/OpenshiftVersionHelperText.tsx

@@ -1,9 +1,6 @@
 import * as React from 'react';
-import {
-  OPENSHIFT_LIFE_CYCLE_DATES_LINK,
-  OpenshiftVersionOptionType,
-  UiIcon,
-} from '../../../common';
+import { Icon } from '@patternfly/react-core';
+import { OPENSHIFT_LIFE_CYCLE_DATES_LINK, OpenshiftVersionOptionType } from '../../../common';
 import { TFunction } from 'i18next';
 import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
 import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
@@ -29,7 +26,9 @@ export const getOpenshiftVersionHelperText = (
   if (!versions.length && !isModal) {
     return (
       <>
-        <UiIcon status="danger" size="sm" icon={<ExclamationCircleIcon />} />
+        <Icon status="danger" size="sm">
+          <ExclamationCircleIcon />
+        </Icon>
         &nbsp; {t('ai:No release image is available.')}
       </>
     );
@@ -50,7 +49,9 @@ export const getOpenshiftVersionHelperText = (
     }
     return (
       <>
-        <UiIcon status="warning" icon={<ExclamationTriangleIcon />} />
+        <Icon status="warning">
+          <ExclamationTriangleIcon />
+        </Icon>
         &nbsp;
         {messageSelectedVersion}&nbsp;
         <OpenShiftLifeCycleDatesLink />

package/lib/ocm/components/clusterConfiguration/manifestsConfiguration/CustomManifestsPage.tsx

@@ -1,10 +1,26 @@
 import React from 'react';
-import { Content, ContentVariants, Alert, Grid } from '@patternfly/react-core';
+import {
+  Content,
+  ContentVariants,
+  Alert,
+  AlertVariant,
+  Grid,
+  FormGroup,
+  Switch,
+  Tooltip,
+  Stack,
+  StackItem,
+} from '@patternfly/react-core';
 
 import { CustomManifests } from './components/CustomManifests';
 import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
 import { CustomManifestFormState } from './components/propTypes';
-import { ClusterWizardStepHeader } from '../../../../common';
+import { ClustersAPI, ClusterWizardStepHeader, isThirdPartyCNI } from '../../../../common';
+import { getFieldId } from '../../../../common/components/ui/formik';
+import { isOciPlatformType } from '../../utils';
+import DeleteCustomManifestModal from './DeleteCustomManifestModal';
+import { ClustersService } from '../../../services';
+import { useClusterWizardContext } from '../../clusterWizard/ClusterWizardContext';
 
 export const CustomManifestsPage = ({
   cluster,
@@ -12,22 +28,146 @@ export const CustomManifestsPage = ({
 }: {
   cluster: Cluster;
   onFormStateChange(formState: CustomManifestFormState): void;
-}) => (
-  <Grid hasGutter>
-    <Content>
-      <ClusterWizardStepHeader>Custom manifests</ClusterWizardStepHeader>
-      <Content component={ContentVariants.small}>
-        Upload additional manifests that will be applied at the install time for advanced
-        configuration of the cluster.
-      </Content>
-    </Content>
-    <Alert
-      isInline
-      variant="warning"
-      title={
-        'No validation is performed for the custom manifest contents. Only include resources that are necessary for initial setup to reduce the chance of installation failures.'
+}) => {
+  const clusterWizardContext = useClusterWizardContext();
+  const isRequired = isThirdPartyCNI(cluster.networkType) || isOciPlatformType(cluster);
+  const [useCustomManifests, setUseCustomManifests] = React.useState(isRequired);
+  const [isDeleteModalOpen, setDeleteModalOpen] = React.useState(false);
+
+  React.useEffect(() => {
+    if (isRequired || clusterWizardContext.uiSettings?.customManifestsAdded) {
+      setUseCustomManifests(true);
+    }
+  }, [isRequired, clusterWizardContext]);
+
+  // The form unmounts when the switch is off, but its last state persists in the parent.
+  React.useEffect(() => {
+    if (!useCustomManifests) {
+      onFormStateChange({
+        isValid: true,
+        isSubmitting: false,
+        isAutoSaveRunning: false,
+        errors: {},
+        touched: {},
+        isEmpty: true,
+      });
+    }
+  }, [useCustomManifests, onFormStateChange]);
+
+  const handleSwitchChange = React.useCallback(
+    (_event: React.FormEvent<HTMLInputElement>, on: boolean) => {
+      if (!on && clusterWizardContext.uiSettings?.customManifestsAdded) {
+        setDeleteModalOpen(true);
+      } else {
+        setUseCustomManifests(on);
+        if (!on) {
+          void clusterWizardContext.updateUISettings({ customManifestsAdded: false });
+        }
       }
-    />
-    <CustomManifests cluster={cluster} onFormStateChange={onFormStateChange} />
-  </Grid>
-);
+    },
+    [clusterWizardContext],
+  );
+
+  const handleCloseDeleteModal = React.useCallback(() => {
+    setDeleteModalOpen(false);
+  }, []);
+
+  const cleanCustomManifests = React.useCallback(async () => {
+    if (!clusterWizardContext.uiSettings?.customManifestsAdded || !cluster.id) return;
+    const { data: manifests } = await ClustersAPI.getManifests(cluster.id);
+    await ClustersService.removeClusterManifests(manifests, cluster.id);
+    setUseCustomManifests(false);
+    setDeleteModalOpen(false);
+    await clusterWizardContext.updateUISettings({ customManifestsAdded: false });
+  }, [cluster.id, clusterWizardContext]);
+
+  const fieldId = getFieldId('use-custom-manifests', 'switch');
+
+  const tooltipWhenDisabled = isRequired
+    ? 'Custom manifests are required when using a third-party CNI or Oracle Cloud Infrastructure.'
+    : '';
+
+  const showExternalPlatformReminder = isOciPlatformType(cluster);
+  const showThirdPartyCnIReminder = isThirdPartyCNI(cluster.networkType);
+  const showCombinedReminder = showExternalPlatformReminder && showThirdPartyCnIReminder;
+  let reminderAlerts: React.ReactNode = null;
+  if (showCombinedReminder) {
+    reminderAlerts = (
+      <Stack>
+        <StackItem>
+          <Alert
+            variant={AlertVariant.info}
+            isInline
+            title="You're using an external platform and a third-party CNI"
+          >
+            Make sure to upload the required custom and CNI manifests in this step.
+          </Alert>
+        </StackItem>
+      </Stack>
+    );
+  } else if (showExternalPlatformReminder) {
+    reminderAlerts = (
+      <Stack>
+        <StackItem>
+          <Alert variant={AlertVariant.info} isInline title="You're using an external platform">
+            Make sure to upload the required custom manifests in this step.
+          </Alert>
+        </StackItem>
+      </Stack>
+    );
+  } else if (showThirdPartyCnIReminder) {
+    reminderAlerts = (
+      <Stack>
+        <StackItem>
+          <Alert variant={AlertVariant.info} isInline title="You're using a third-party CNI">
+            Make sure to upload the required CNI manifests in this step.
+          </Alert>
+        </StackItem>
+      </Stack>
+    );
+  }
+
+  return (
+    <Grid hasGutter>
+      <Content>
+        <ClusterWizardStepHeader>Custom manifests</ClusterWizardStepHeader>
+        <Content component={ContentVariants.small}>
+          Upload additional manifests that will be applied at the install time for advanced
+          configuration of the cluster.
+        </Content>
+      </Content>
+      <FormGroup fieldId={fieldId} label="">
+        <Tooltip content={tooltipWhenDisabled} hidden={!isRequired}>
+          <span style={{ display: 'inline-block', cursor: isRequired ? 'not-allowed' : undefined }}>
+            <Switch
+              id={fieldId}
+              data-testid={fieldId}
+              data-checked={useCustomManifests}
+              isChecked={useCustomManifests}
+              isDisabled={isRequired}
+              onChange={handleSwitchChange}
+              label="Use custom manifests"
+            />
+          </span>
+        </Tooltip>
+      </FormGroup>
+      {!useCustomManifests && <div style={{ minHeight: '250px' }} aria-hidden="true" />}
+      {useCustomManifests && (
+        <>
+          {reminderAlerts}
+          <Alert
+            isInline
+            variant="warning"
+            title="No validation is performed for the custom manifest contents. Only include resources that are necessary for initial setup to reduce the chance of installation failures."
+          />
+          <CustomManifests cluster={cluster} onFormStateChange={onFormStateChange} />
+        </>
+      )}
+      <DeleteCustomManifestModal
+        isOpen={isDeleteModalOpen}
+        onClose={handleCloseDeleteModal}
+        onDelete={() => void cleanCustomManifests()}
+      />
+    </Grid>
+  );
+};

package/lib/ocm/components/clusterConfiguration/manifestsConfiguration/components/CustomManifestsArray.tsx

@@ -12,6 +12,7 @@ import { CustomManifest } from './CustomManifest';
 import { getEmptyManifest, getManifestName } from './utils';
 import { CustomManifestValues } from '../data/dataTypes';
 import { selectCurrentClusterPermissionsState } from '../../../../store/slices/current-cluster/selectors';
+import { useClusterWizardContext } from '../../../clusterWizard/ClusterWizardContext';
 
 const fieldName = 'manifests';
 
@@ -40,6 +41,8 @@ export const CustomManifestsArray = ({
   clusterId,
   ...props
 }: CustomManifestsArrayProps) => {
+  const { updateUISettings } = useClusterWizardContext();
+
   const [field, { error }] = useField<CustomManifestValues[]>({
     name: fieldName,
   });
@@ -67,6 +70,7 @@ export const CustomManifestsArray = ({
             manifestToRemove['folder'] as string,
             manifestToRemove['filename'],
           );
+          await updateUISettings({ customManifestsUpdated: true });
         } catch (e) {
           handleApiError(e, () =>
             addAlert({
@@ -77,7 +81,7 @@ export const CustomManifestsArray = ({
         }
       }
     },
-    [addAlert, field.value],
+    [addAlert, field.value, updateUISettings],
   );
 
   const onConfirm = React.useCallback(async (): Promise<void> => {

package/lib/ocm/components/clusterConfiguration/networkConfiguration/NetworkConfiguration.tsx

@@ -4,7 +4,6 @@ import { useSelector } from 'react-redux';
 import { Stack, StackItem, Tooltip } from '@patternfly/react-core';
 import {
   canBeDualStack,
-  canSelectNetworkTypeSDN,
   CpuArchitecture,
   DUAL_STACK,
   HostSubnets,
@@ -23,9 +22,9 @@ import {
   VirtualIPControlGroupProps,
   AdvancedNetworkFields,
 } from '../../../../common/components/clusterWizard/networkingSteps';
+import { NetworkTypeDropDown } from './NetworkTypeDropdown';
 import { selectCurrentClusterPermissionsState } from '../../../store/slices/current-cluster/selectors';
 import { OcmCheckbox } from '../../ui/OcmFormFields';
-import { NetworkTypeControlGroup } from '../../../../common/components/clusterWizard/networkingSteps/NetworkTypeControlGroup';
 import {
   NewFeatureSupportLevelData,
   NewFeatureSupportLevelMap,
@@ -144,9 +143,6 @@ const NetworkConfiguration = ({
   const isDualStack = values.stackType === DUAL_STACK;
 
   const isDualStackSelectable = React.useMemo(() => canBeDualStack(hostSubnets), [hostSubnets]);
-  const isSDNSelectable = React.useMemo(() => {
-    return canSelectNetworkTypeSDN(isSNOCluster, isDualStack);
-  }, [isSNOCluster, isDualStack]);
 
   const [isAdvanced, setAdvanced] = React.useState(
     isDualStack || isAdvNetworkConf(cluster, defaultNetworkSettings),
@@ -259,11 +255,12 @@ const NetworkConfiguration = ({
           />
         </StackItem>
       )}
-      {isSDNSupported && (
-        <StackItem>
-          <NetworkTypeControlGroup isDisabled={isViewerMode} isSDNSelectable={isSDNSelectable} />
-        </StackItem>
-      )}
+      <StackItem>
+        <NetworkTypeDropDown
+          isDisabled={isViewerMode}
+          featureSupportLevelData={featureSupportLevelData}
+        />
+      </StackItem>
 
       {!(isUserManagedNetworking && !isSNOCluster) && (
         <StackItem>

package/lib/ocm/components/clusterConfiguration/networkConfiguration/NetworkTypeDropdown.tsx

@@ -0,0 +1,142 @@
+import React from 'react';
+import { useField, useFormikContext } from 'formik';
+import {
+  Alert,
+  AlertVariant,
+  Dropdown,
+  DropdownItem,
+  FormGroup,
+  MenuToggle,
+  MenuToggleElement,
+  Stack,
+  StackItem,
+  Tooltip,
+} from '@patternfly/react-core';
+import { getFieldId, ExternalLink } from '../../../../common/components/ui';
+import {
+  NewFeatureSupportLevelMap,
+  useNewFeatureSupportLevel,
+} from '../../../../common/components/newFeatureSupportLevels';
+import NewFeatureSupportLevelBadge from '../../../../common/components/newFeatureSupportLevels/NewFeatureSupportLevelBadge';
+import type { NetworkConfigurationValues } from '../../../../common/types/clusters';
+import {
+  NETWORK_TYPE_OVN,
+  NETWORK_TYPE_LABELS,
+  NETWORK_TYPE_FEATURE_IDS,
+  isThirdPartyCNI,
+} from '../../../../common/types/networkType';
+import { RED_HAT_CNI_SUPPORT_MATRIX_LINK } from '../../../../common/config/docs_links';
+
+export interface NetworkTypeDropDownProps {
+  isDisabled?: boolean;
+  featureSupportLevelData: NewFeatureSupportLevelMap | null;
+}
+
+export const NetworkTypeDropDown = ({
+  isDisabled = false,
+  featureSupportLevelData,
+}: NetworkTypeDropDownProps) => {
+  const [field, , { setValue }] = useField<string>('networkType');
+  const [isOpen, setOpen] = React.useState(false);
+  const { values } = useFormikContext<NetworkConfigurationValues>();
+  const { getFeatureDisabledReason, getFeatureSupportLevel } = useNewFeatureSupportLevel();
+  const fieldId = getFieldId('networkType', 'input');
+  const showThirdPartyBanner = isThirdPartyCNI(values.networkType);
+
+  React.useEffect(() => {
+    if (
+      getFeatureDisabledReason(
+        NETWORK_TYPE_FEATURE_IDS[field.value],
+        featureSupportLevelData ?? undefined,
+      ) !== undefined
+    ) {
+      setValue(NETWORK_TYPE_OVN);
+    }
+  }, [field.value, setValue, featureSupportLevelData, getFeatureDisabledReason]);
+
+  const currentDisplayValue = NETWORK_TYPE_LABELS[field.value];
+
+  const dropdownItems = Object.entries(NETWORK_TYPE_LABELS).map(([value, label]) => {
+    const disabledReason = getFeatureDisabledReason(
+      NETWORK_TYPE_FEATURE_IDS[value],
+      featureSupportLevelData ?? undefined,
+    );
+    const featureId = NETWORK_TYPE_FEATURE_IDS[value];
+    const supportLevel = featureId
+      ? getFeatureSupportLevel(featureId, featureSupportLevelData ?? undefined)
+      : undefined;
+    const shouldDisable =
+      supportLevel === 'unavailable' ||
+      supportLevel === 'unsupported' ||
+      disabledReason !== undefined;
+    return (
+      <DropdownItem key={value} id={value} value={value} isAriaDisabled={shouldDisable}>
+        <Tooltip hidden={!disabledReason} content={disabledReason} position="top">
+          <div>
+            {label}
+            <span onClick={(event) => event.stopPropagation()}>
+              <NewFeatureSupportLevelBadge featureId={featureId} supportLevel={supportLevel} />
+            </span>
+          </div>
+        </Tooltip>
+      </DropdownItem>
+    );
+  });
+
+  const onSelect = (event?: React.MouseEvent<Element, MouseEvent>, nextValue?: string): void => {
+    if (nextValue) {
+      setValue(nextValue);
+    }
+    setOpen(false);
+  };
+
+  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
+    <MenuToggle
+      ref={toggleRef}
+      onClick={() => setOpen(!isOpen)}
+      isExpanded={isOpen}
+      isDisabled={isDisabled}
+      id={fieldId}
+      className="pf-v6-u-w-100"
+      style={{ minWidth: '100%' }}
+    >
+      {currentDisplayValue}
+    </MenuToggle>
+  );
+
+  return (
+    <Stack hasGutter>
+      <StackItem>
+        <FormGroup fieldId={fieldId} label="Network type" id={`form-control__${fieldId}`}>
+          <Dropdown
+            id={`${fieldId}-dropdown`}
+            onOpenChange={(open: boolean) => setOpen(open)}
+            onSelect={onSelect}
+            toggle={toggle}
+            isOpen={isOpen}
+          >
+            {dropdownItems}
+          </Dropdown>
+        </FormGroup>
+      </StackItem>
+      {showThirdPartyBanner && (
+        <StackItem>
+          <Alert variant={AlertVariant.warning} isInline title="Third-party CNI">
+            <Stack hasGutter>
+              <StackItem>
+                Third-party CNIs require uploading CNI manifests. Please verify you have the
+                required manifests and that the chosen CNI is compatible with your platform and
+                OpenShift version.
+              </StackItem>
+              <StackItem>
+                <ExternalLink href={RED_HAT_CNI_SUPPORT_MATRIX_LINK}>
+                  Red Hat CNI Support Matrix
+                </ExternalLink>
+              </StackItem>
+            </Stack>
+          </Alert>
+        </StackItem>
+      )}
+    </Stack>
+  );
+};

package/lib/ocm/components/clusterConfiguration/platformIntegration/PlatformIntegrationNote.tsx

@@ -1,14 +1,17 @@
 import React from 'react';
+import { Icon } from '@patternfly/react-core';
 import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
-import { UiIcon, SupportedPlatformType } from '../../../../common';
+import { SupportedPlatformType } from '../../../../common';
 import { ExternalPlatformLinks } from './constants';
 
 const PlatformIntegrationNote = ({ platformType }: { platformType: SupportedPlatformType }) => {
   const integrationPlatformLink = ExternalPlatformLinks[platformType];
   return (
     <p>
-      <UiIcon status="warning" icon={<ExclamationTriangleIcon />} /> You will need to modify your
-      platform configuration after cluster installation is completed.{' '}
+      <Icon status="warning">
+        <ExclamationTriangleIcon />
+      </Icon>{' '}
+      You will need to modify your platform configuration after cluster installation is completed.{' '}
       {!!integrationPlatformLink && (
         <a
           href={integrationPlatformLink || ''}

package/lib/ocm/components/clusterConfiguration/review/ReviewNetworkingTable.tsx

@@ -1,12 +1,8 @@
 import { Title } from '@patternfly/react-core';
 import { Table, TableVariant, Tbody, Td, Tr } from '@patternfly/react-table';
 import React from 'react';
-import { genericTableRowKey, isDualStack } from '../../../../common';
-import {
-  getManagementType,
-  getStackTypeLabel,
-  getNetworkType,
-} from '../../clusterDetail/ClusterProperties';
+import { genericTableRowKey, isDualStack, NETWORK_TYPE_LABELS } from '../../../../common';
+import { getManagementType, getStackTypeLabel } from '../../clusterDetail/ClusterProperties';
 import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
 
 type ReviewTableRowsType = {
@@ -201,7 +197,7 @@ export const ReviewNetworkingTable = ({ cluster }: { cluster: Cluster }) => {
         cells: [
           { title: 'Networking type' },
           {
-            title: getNetworkType(cluster.networkType),
+            title: cluster.networkType ? NETWORK_TYPE_LABELS[cluster.networkType] : '-',
             props: { 'data-testid': 'networking-type', colSpan: 2 },
           },
         ],

package/lib/ocm/components/clusterConfiguration/review/ReviewPreflightChecks.tsx

@@ -6,20 +6,13 @@ import {
   Grid,
   GridItem,
   gridSpans,
+  Icon,
 } from '@patternfly/react-core';
 import { CheckCircleIcon } from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
 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 { InfoCircleIcon } from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
-import { t_global_color_status_success_default as okColor } from '@patternfly/react-tokens/dist/js/t_global_color_status_success_default';
-import { t_global_color_status_info_100 as infoColor } from '@patternfly/react-tokens/dist/js/t_global_color_status_info_100';
-import {
-  ClusterValidations,
-  DetailItem,
-  DetailList,
-  HostsValidations,
-  UiIcon,
-} from '../../../../common';
+import { ClusterValidations, DetailItem, DetailList, HostsValidations } from '../../../../common';
 import { useClusterWizardContext } from '../../clusterWizard/ClusterWizardContext';
 import { useOpenShiftVersionsContext } from '../../clusterWizard/OpenShiftVersionsContext';
 import { wizardStepNames } from '../../clusterWizard/constants';
@@ -102,13 +95,29 @@ const PreflightCheckInfo = ({
 
 const getCheckIcon = (validationStatuses: string[]) => {
   if (validationStatuses.includes('failure') || validationStatuses.includes('error')) {
-    return <UiIcon size="sm" status="danger" icon={<ExclamationCircleIcon />} />;
+    return (
+      <Icon size="sm" status="danger">
+        <ExclamationCircleIcon />
+      </Icon>
+    );
   } else if (validationStatuses.includes('warning')) {
-    return <UiIcon size="sm" status="warning" icon={<ExclamationTriangleIcon />} />;
+    return (
+      <Icon size="sm" status="warning">
+        <ExclamationTriangleIcon />
+      </Icon>
+    );
   } else if (validationStatuses.includes('pending')) {
-    return <UiIcon size="sm" status="info" icon={<InfoCircleIcon />} />;
+    return (
+      <Icon size="sm" status="info">
+        <InfoCircleIcon />
+      </Icon>
+    );
   }
-  return <UiIcon size="sm" icon={<CheckCircleIcon color={okColor.value} />} />;
+  return (
+    <Icon status="success" size="sm">
+      <CheckCircleIcon />
+    </Icon>
+  );
 };
 
 const PreflightChecksDetailCollapsed = ({ cluster }: { cluster: Cluster }) => {
@@ -122,9 +131,13 @@ const PreflightChecksDetailCollapsed = ({ cluster }: { cluster: Cluster }) => {
   );
 
   const supportLevelIcon = isFullySupported ? (
-    <UiIcon size="sm" icon={<CheckCircleIcon color={okColor.value} />} />
+    <Icon status="success" size="sm">
+      <CheckCircleIcon />
+    </Icon>
   ) : (
-    <UiIcon size="sm" icon={<InfoCircleIcon color={infoColor.value} />} />
+    <Icon status="info" size="sm">
+      <InfoCircleIcon />
+    </Icon>
   );
 
   const clusterValidations = React.useMemo(

package/lib/ocm/components/clusterDetail/ClusterProperties.tsx

@@ -5,7 +5,7 @@ import {
   DetailList,
   getDefaultCpuArchitecture,
   isDualStack,
-  NETWORK_TYPE_SDN,
+  NETWORK_TYPE_LABELS,
   selectApiVip,
   selectIngressVip,
   selectIpv4Cidr,
@@ -25,11 +25,7 @@ type ClusterPropertiesProps = {
 };
 
 export const getNetworkType = (clusterNetworkType: Cluster['networkType']): string => {
-  let networkType: string;
-  clusterNetworkType === NETWORK_TYPE_SDN
-    ? (networkType = 'Software-Defined Networking (SDN)')
-    : (networkType = 'Open Virtual Network (OVN)');
-  return networkType;
+  return NETWORK_TYPE_LABELS[clusterNetworkType || ''];
 };
 
 export const getManagementType = ({ userManagedNetworking }: Cluster): string => {

package/lib/ocm/components/clusterDetail/HostInventoryExpandable.tsx

@@ -1,12 +1,14 @@
 import React, { useState } from 'react';
-import { UiIcon, hostStatus } from '../../../common';
+import { ExpandableSection, Icon } from '@patternfly/react-core';
+import ExclamationTriangleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
+
+import { hostStatus } from '../../../common';
 import ClusterHostsTable from '../hosts/ClusterHostsTable';
 import { getHostsWithTimeout, getMostSevereHostStatus } from './utils';
-import { ExpandableSection } from '@patternfly/react-core';
-import './HostInventoryExpandable.css';
 import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
-import ExclamationTriangleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
+
+import './HostInventoryExpandable.css';
 
 type HostInventoryExpandableProps = {
   cluster: Cluster;
@@ -33,7 +35,11 @@ const HostInventoryExpandable = ({ cluster }: HostInventoryExpandableProps) => {
   const mostSevereHostStatus = getMostSevereHostStatus(hosts);
   const hostStatusDef = mostSevereHostStatus ? hostStatus(t)[mostSevereHostStatus] : null;
   const someHostHasTimeout = getHostsWithTimeout(hosts);
-  const warningIcon = <UiIcon size="sm" status="warning" icon={<ExclamationTriangleIcon />} />;
+  const warningIcon = (
+    <Icon size="sm" status="warning">
+      <ExclamationTriangleIcon />
+    </Icon>
+  );
   return (
     <ExpandableSection
       toggleContent={

package/lib/ocm/components/clusterDetail/OpenShiftVersionDetail.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
-import { UiIcon, getOpenshiftVersionText } from '../../../common';
-import { useOpenShiftVersionsContext } from '../clusterWizard/OpenShiftVersionsContext';
+import { Popover, Content, ContentVariants, Icon } from '@patternfly/react-core';
 import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
-import { Popover, Content, ContentVariants } from '@patternfly/react-core';
-import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
+
 import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
+import { getOpenshiftVersionText } from '../../../common';
+import { useOpenShiftVersionsContext } from '../clusterWizard/OpenShiftVersionsContext';
+import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 
 const UnsupportedVersion = ({ version }: { version: string }) => {
   const { t } = useTranslation();
@@ -18,7 +19,9 @@ const UnsupportedVersion = ({ version }: { version: string }) => {
     <Content component="p">
       {version} &nbsp;
       <Popover bodyContent={hint}>
-        <UiIcon size="sm" status="warning" icon={<ExclamationTriangleIcon />} />
+        <Icon size="sm" status="warning">
+          <ExclamationTriangleIcon />
+        </Icon>
       </Popover>
     </Content>
   );