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

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/operators/bundleSpecs.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { List, ListItem } from '@patternfly/react-core';
+import { getYearForAssistedInstallerDocumentationLink } from '../../../../common/config/docs_links';
 
 export type BundleSpec = {
   incompatibleBundles?: string[];
@@ -30,11 +31,13 @@ export const bundleSpecs: { [key: string]: BundleSpec } = {
     incompatibleBundles: [],
     Description: () => (
       <List>
+        <ListItem>GPUs are recommended for optimal AI/ML workload performance.</ListItem>
         <ListItem>
           NVIDIA GPU, AMD GPU and Kernel Module Management may or may not be installed based on the
           GPU discovered on your hosts.
         </ListItem>
       </List>
     ),
+    docsLink: `https://docs.redhat.com/en/documentation/assisted_installer_for_openshift_container_platform/${getYearForAssistedInstallerDocumentationLink()}/html/installing_openshift_container_platform_with_the_assisted_installer/customizing-with-bundles-and-operators#openshift-ai-bundle_customizing-with-bundles-and-operators`,
   },
 };

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/clusterConfiguration/review/ReviewStep.tsx

@@ -24,19 +24,17 @@ const ReviewStep = ({ cluster }: { cluster: Cluster }) => {
   const [disableInstallButton, setDisableInstallButton] = React.useState<boolean>();
 
   React.useEffect(() => {
-    if (
+    const manifestFail =
       cluster['last-installation-preparation']?.status === 'failed' &&
-      cluster['last-installation-preparation'].reason?.includes('manifest')
-    ) {
-      if (clusterWizardContext.uiSettings?.customManifestsUpdated === undefined) {
-        setDisableInstallButton(true);
-        void clusterWizardContext.updateUISettings({ customManifestsUpdated: false });
-      } else if (clusterWizardContext.uiSettings?.customManifestsUpdated === false) {
-        setDisableInstallButton(true);
-      }
-    } else {
-      setDisableInstallButton(isViewerMode || isStartingInstallation || cluster.status !== 'ready');
-    }
+      cluster['last-installation-preparation'].reason?.includes('manifest');
+    const userDidntAddressManifestIssue =
+      clusterWizardContext.uiSettings?.customManifestsUpdated !== true;
+    setDisableInstallButton(
+      (manifestFail && userDidntAddressManifestIssue) ||
+        isViewerMode ||
+        isStartingInstallation ||
+        cluster.status !== 'ready',
+    );
   }, [cluster, isStartingInstallation, isViewerMode, clusterWizardContext]);
 
   const handleClusterInstall = async () => {

package/lib/ocm/components/clusterConfiguration/staticIp/components/StaticIpForm.tsx

@@ -1,7 +1,7 @@
 import React, { PropsWithChildren } from 'react';
 import { useSelector } from 'react-redux';
 import { Form } from '@patternfly/react-core';
-import { Formik, FormikConfig, useFormikContext, yupToFormErrors } from 'formik';
+import { Formik, useFormikContext, yupToFormErrors } from 'formik';
 import isEqual from 'lodash-es/isEqual.js';
 import { useAlerts, useFormikAutoSave } from '../../../../../common';
 import { useErrorMonitor } from '../../../../../common/components/ErrorHandling/ErrorMonitorContext';
@@ -9,6 +9,7 @@ import { getApiErrorMessage } from '../../../../../common/api';
 import { StaticIpFormProps } from './propTypes';
 import { selectCurrentClusterPermissionsState } from '../../../../store/slices/current-cluster/selectors';
 
+/** Reports form state and triggers save on every value change (useFormikAutoSave) */
 const AutosaveWithParentUpdate = <StaticIpFormValues extends object>({
   onFormStateChange,
   getEmptyValues,
@@ -16,28 +17,41 @@ const AutosaveWithParentUpdate = <StaticIpFormValues extends object>({
   onFormStateChange: StaticIpFormProps<StaticIpFormValues>['onFormStateChange'];
   getEmptyValues: StaticIpFormProps<StaticIpFormValues>['getEmptyValues'];
 }) => {
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const emptyValues = React.useMemo(() => getEmptyValues(), []);
+  const emptyValues = React.useMemo(() => getEmptyValues(), [getEmptyValues]);
   const { isSubmitting, isValid, touched, errors, values, initialValues, submitForm } =
     useFormikContext<StaticIpFormValues>();
 
-  const isEmpty = React.useMemo<boolean>(() => {
-    return isEqual(values, emptyValues);
-  }, [values, emptyValues]);
-
-  const isAutoSaveRunning = useFormikAutoSave();
+  const isEmpty = React.useMemo(() => isEqual(values, emptyValues), [values, emptyValues]);
+  const isAutoSaveRunning = useFormikAutoSave(0);
 
+  // Submit once on mount when form was opened with existing data (so it gets persisted).
   React.useEffect(() => {
     if (!isEqual(emptyValues, initialValues)) {
       void submitForm();
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- intentional: run only on mount.
   }, []);
 
   React.useEffect(() => {
-    onFormStateChange({ isSubmitting, isAutoSaveRunning, isValid, touched, errors, isEmpty });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isSubmitting, isValid, isAutoSaveRunning, touched, errors]);
+    onFormStateChange({
+      isSubmitting,
+      isAutoSaveRunning,
+      isValid,
+      touched,
+      errors,
+      isEmpty,
+      values: values as Record<string, unknown>,
+    });
+  }, [
+    isSubmitting,
+    isValid,
+    isAutoSaveRunning,
+    touched,
+    errors,
+    values,
+    isEmpty,
+    onFormStateChange,
+  ]);
   return null;
 };
 
@@ -55,27 +69,13 @@ export const StaticIpForm = <StaticIpFormValues extends object>({
   const { clearAlerts, addAlert } = useAlerts();
   const { captureException } = useErrorMonitor();
   const { isViewerMode } = useSelector(selectCurrentClusterPermissionsState);
-  const [initialValues, setInitialValues] = React.useState<StaticIpFormValues | undefined>();
-  React.useEffect(() => {
-    if (showEmptyValues) {
-      //after view changed the formik should be rendered with empty values
-      setInitialValues(getEmptyValues());
-    } else {
-      setInitialValues(getInitialValues(infraEnv));
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  if (!initialValues) {
-    return null;
-  }
+  const initialValues = showEmptyValues ? getEmptyValues() : getInitialValues(infraEnv);
 
-  const handleSubmit: FormikConfig<StaticIpFormValues>['onSubmit'] = async (values) => {
+  const handleSubmit = async (values: StaticIpFormValues) => {
     clearAlerts();
     try {
-      const staticNetworkConfig = getUpdateParams(infraEnv, values);
       await updateInfraEnv({
-        staticNetworkConfig: staticNetworkConfig,
+        staticNetworkConfig: getUpdateParams(infraEnv, values),
       });
     } catch (error) {
       captureException(error);
@@ -98,6 +98,10 @@ export const StaticIpForm = <StaticIpFormValues extends object>({
     }
   };
 
+  if (!initialValues) {
+    return null;
+  }
+
   const onSubmit = isViewerMode ? () => Promise.resolve() : handleSubmit;
   return (
     <Formik initialValues={initialValues} onSubmit={onSubmit} validate={validate} validateOnMount>

package/lib/ocm/components/clusterConfiguration/staticIp/components/StaticIpPage.tsx

@@ -16,6 +16,7 @@ import { useClusterWizardContext } from '../../../clusterWizard/ClusterWizardCon
 import { FormViewHosts } from './FormViewHosts/FormViewHosts';
 import { FormViewNetworkWide } from './FormViewNetworkWide/FormViewNetworkWide';
 import './staticIp.css';
+import { ClusterWizardStepHeader } from '../../../../../common';
 
 const isoRegenerationAlert = (
   <Alert
@@ -48,15 +49,17 @@ export const StaticIpPage: React.FC<StaticIpPageProps> = ({
     return getStaticIpInfo(infraEnv);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  if (!initialStaticIpInfo) {
-    return null;
-  }
-  const onFormStateChange = (formState: StaticIpFormState) => {
-    const hasFilledData =
-      clusterWizardContext.currentStepId === 'static-ip-host-configurations' || !formState.isEmpty;
-    setConfirmOnChangeView(hasFilledData);
-    onFormStateChangeParent(formState);
-  };
+
+  const onFormStateChange = React.useCallback(
+    (formState: StaticIpFormState) => {
+      const hasFilledData =
+        clusterWizardContext.currentStepId === 'static-ip-host-configurations' ||
+        !formState.isEmpty;
+      setConfirmOnChangeView(hasFilledData);
+      onFormStateChangeParent(formState);
+    },
+    [clusterWizardContext.currentStepId, onFormStateChangeParent],
+  );
 
   const viewProps: StaticIpViewProps = {
     onFormStateChange,
@@ -65,7 +68,7 @@ export const StaticIpPage: React.FC<StaticIpPageProps> = ({
     showEmptyValues: viewChanged,
   };
 
-  const getContent = () => {
+  const content = (() => {
     switch (clusterWizardContext.currentStepId) {
       case 'static-ip-yaml-view':
         return <YamlView {...viewProps} />;
@@ -74,18 +77,20 @@ export const StaticIpPage: React.FC<StaticIpPageProps> = ({
       case 'static-ip-host-configurations':
         return <FormViewHosts {...viewProps} />;
       default:
-        throw `Unexpected wizard step id ${clusterWizardContext.currentStepId} when entering static ip page`;
+        throw new Error(
+          `Unexpected wizard step id ${clusterWizardContext.currentStepId} when entering static ip page`,
+        );
     }
-  };
+  })();
 
-  const content = getContent();
-  if (!content) {
+  if (!initialStaticIpInfo) {
     return null;
   }
+
   return (
     <Grid hasGutter>
       <GridItem>
-        <Content component={ContentVariants.h2}>Static network configurations</Content>
+        <ClusterWizardStepHeader>Static network configurations</ClusterWizardStepHeader>
         <Content component={ContentVariants.small}>
           Network configuration can be done using either the form view or YAML view. Configurations
           done in this step are for discovering hosts.

package/lib/ocm/components/clusterConfiguration/staticIp/components/propTypes.ts

@@ -13,6 +13,7 @@ export type StaticIpFormState = {
   touched: FormikTouched<object>;
   errors: FormikErrors<object>;
   isEmpty: boolean;
+  values?: Record<string, unknown>;
 };
 
 export type StaticIpProps = {
@@ -29,7 +30,6 @@ export type StaticIpViewProps = StaticIpPageProps & {
 };
 
 export type StaticIpFormProps<StaticIpViewValues extends object> = StaticIpViewProps & {
-  showEmptyValues: boolean;
   getInitialValues(infraEnv: InfraEnv): StaticIpViewValues;
   getUpdateParams(currentInfraEnv: InfraEnv, values: StaticIpViewValues): HostStaticNetworkConfig[];
   validationSchema: Yup.ObjectSchema<Yup.AnyObject> | Yup.Lazy<Yup.AnyObject>;

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>
   );

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

@@ -4,6 +4,7 @@ import {
   Button,
   ButtonVariant,
   Content,
+  Icon,
   Modal,
   ModalBody,
   ModalFooter,
@@ -16,7 +17,7 @@ import { getApiErrorMessage, handleApiError } from '../../../common/api';
 import { updateCluster } from '../../store/slices/current-cluster/slice';
 import { calculateCollectedLogsCount } from '../clusters/utils';
 import { useModalDialogsContext } from '../hosts/ModalDialogsContext';
-import { ErrorState, LoadingState, UiIcon } from '../../../common';
+import { ErrorState, LoadingState } from '../../../common';
 import { ClustersAPI } from '../../services/apis';
 
 const ResetClusterModal: React.FC = () => {
@@ -87,8 +88,10 @@ const ResetClusterModal: React.FC = () => {
         </Content>
 
         <Content component="p">
-          <UiIcon size="sm" status="warning" icon={<ExclamationTriangleIcon />} /> Logs won't be
-          available after the installation is reset.
+          <Icon size="sm" status="warning">
+            <ExclamationTriangleIcon />
+          </Icon>{' '}
+          Logs won't be available after the installation is reset.
         </Content>
 
         <Content component="p">Are you sure you want to reset the cluster?</Content>