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

package/lib/common/components/hosts/status.tsx

@@ -8,13 +8,10 @@ import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/js/icons/e
 import { InProgressIcon } from '@patternfly/react-icons/dist/js/icons/in-progress-icon';
 import { LinkIcon } from '@patternfly/react-icons/dist/js/icons/link-icon';
 import { PendingIcon } from '@patternfly/react-icons/dist/js/icons/pending-icon';
-import { t_global_icon_color_status_danger_default as dangerColor } from '@patternfly/react-tokens/dist/js/t_global_icon_color_status_danger_default';
-import { t_global_icon_color_status_warning_default as warningColor } from '@patternfly/react-tokens/dist/js/t_global_icon_color_status_warning_default';
-import { t_global_color_status_success_default as okColor } from '@patternfly/react-tokens/dist/js/t_global_color_status_success_default';
-import { chart_color_blue_300 as blueColor } from '@patternfly/react-tokens/dist/js/chart_color_blue_300';
 import { Host } from '@openshift-assisted/types/assisted-installer-service';
 import { HostStatus } from './types';
 import { TFunction } from 'i18next';
+import { Icon } from '@patternfly/react-core';
 
 export const hostStatus = (t: TFunction): HostStatus<Host['status'] | 'finalizing'> =>
   Object.freeze({
@@ -85,7 +82,11 @@ export const hostStatus = (t: TFunction): HostStatus<Host['status'] | 'finalizin
       key: 'insufficient-unbound',
       title: t('ai:Insufficient'),
       category: 'Discovery related',
-      icon: <ExclamationTriangleIcon color={warningColor.value} />,
+      icon: (
+        <Icon status="warning">
+          <ExclamationTriangleIcon />
+        </Icon>
+      ),
       details: t(
         'ai:This host does not meet the minimum hardware or networking requirements and can not be included in the cluster.',
       ),
@@ -94,7 +95,11 @@ export const hostStatus = (t: TFunction): HostStatus<Host['status'] | 'finalizin
       key: 'known-unbound',
       title: t('ai:Available'),
       category: 'Discovery related',
-      icon: <ConnectedIcon color={blueColor.value} />,
+      icon: (
+        <Icon status="info">
+          <ConnectedIcon />
+        </Icon>
+      ),
       details: t(
         'ai:This host meets the minimum hardware and networking requirements and can be included in the cluster.',
       ),
@@ -125,7 +130,11 @@ export const hostStatus = (t: TFunction): HostStatus<Host['status'] | 'finalizin
       key: 'known',
       title: t('ai:Ready'),
       category: 'Discovery related',
-      icon: <CheckCircleIcon color={okColor.value} />,
+      icon: (
+        <Icon status="success">
+          <CheckCircleIcon />
+        </Icon>
+      ),
       details: t(
         'ai:This host meets the minimum hardware and networking requirements and will be included in the cluster.',
       ),
@@ -143,7 +152,11 @@ export const hostStatus = (t: TFunction): HostStatus<Host['status'] | 'finalizin
       key: 'insufficient',
       title: t('ai:Insufficient'),
       category: 'Discovery related',
-      icon: <ExclamationTriangleIcon color={warningColor.value} />,
+      icon: (
+        <Icon status="warning">
+          <ExclamationTriangleIcon />
+        </Icon>
+      ),
       details: t(
         'ai:This host does not meet the minimum hardware or networking requirements and will not be included in the cluster.',
       ),
@@ -186,14 +199,22 @@ export const hostStatus = (t: TFunction): HostStatus<Host['status'] | 'finalizin
       key: 'installing-pending-user-action',
       title: t('ai:Pending user action'),
       category: 'Installation related',
-      icon: <ExclamationTriangleIcon color={warningColor.value} />,
+      icon: (
+        <Icon status="warning">
+          <ExclamationTriangleIcon />
+        </Icon>
+      ),
       details: t('ai:This host is pending user action'),
     },
     installed: {
       key: 'installed',
       title: t('ai:Installed'),
       category: 'Installation related',
-      icon: <CheckCircleIcon color={okColor.value} />,
+      icon: (
+        <Icon status="success">
+          <CheckCircleIcon />
+        </Icon>
+      ),
       details: t('ai:This host completed its installation successfully.'),
     },
     cancelled: {
@@ -208,7 +229,11 @@ export const hostStatus = (t: TFunction): HostStatus<Host['status'] | 'finalizin
       key: 'error',
       title: t('ai:Error'),
       category: 'Installation related',
-      icon: <ExclamationCircleIcon color={dangerColor.value} />,
+      icon: (
+        <Icon status="danger">
+          <ExclamationCircleIcon />
+        </Icon>
+      ),
       details: t('ai:This host failed its installation.'),
       withProgress: true,
     },
@@ -223,7 +248,11 @@ export const hostStatus = (t: TFunction): HostStatus<Host['status'] | 'finalizin
       key: 'resetting-pending-user-action',
       title: t('ai:Reboot required'),
       category: 'Installation related',
-      icon: <ExclamationTriangleIcon color={warningColor.value} />,
+      icon: (
+        <Icon status="warning">
+          <ExclamationTriangleIcon />
+        </Icon>
+      ),
       details: t(
         'ai:Host has already been booted from disk during the previous installation. To finish resetting the installation, boot the host into the discovery image',
       ),
@@ -238,7 +267,11 @@ export const hostStatus = (t: TFunction): HostStatus<Host['status'] | 'finalizin
       key: 'added-to-existing-cluster',
       title: t('ai:Installed'),
       category: 'Installation related',
-      icon: <CheckCircleIcon color={okColor.value} />,
+      icon: (
+        <Icon status="success">
+          <CheckCircleIcon />
+        </Icon>
+      ),
       details: t('ai:This host completed its installation successfully.'),
     },
   });

package/lib/common/components/storage/DisksTable.tsx

@@ -1,5 +1,12 @@
 import React from 'react';
-import { Content, ContentVariants, Popover, Alert, AlertVariant } from '@patternfly/react-core';
+import {
+  Content,
+  ContentVariants,
+  Popover,
+  Alert,
+  AlertVariant,
+  Icon,
+} from '@patternfly/react-core';
 import { TableVariant, Thead, Tbody, Table, Th, Tr, Td } from '@patternfly/react-table';
 import type { Disk, Host } from '@openshift-assisted/types/assisted-installer-service';
 import type { WithTestID } from '../../types/index';
@@ -12,7 +19,7 @@ import FormatDiskCheckbox, {
   isInDiskSkipFormattingList,
 } from '../hosts/FormatDiskCheckbox';
 import { fileSize } from '../../utils';
-import { PopoverIcon, UiIcon } from '../ui';
+import { PopoverIcon } from '../ui';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
 import { TFunction } from 'i18next';
 
@@ -100,7 +107,9 @@ const DiskName = ({
       {isIndented && <span style={{ width: '1rem', display: 'inline-block' }} />}
       {isInDiskSkipFormattingList(host, disk.id) && (
         <Popover bodyContent={<SkipFormattingDisk />} minWidth="20rem" maxWidth="30rem">
-          <UiIcon size="sm" status="warning" icon={<ExclamationTriangleIcon />} />
+          <Icon size="sm" status="warning">
+            <ExclamationTriangleIcon />
+          </Icon>
         </Popover>
       )}
       {'   '}
@@ -115,7 +124,9 @@ const DiskName = ({
             maxWidth="30rem"
             data-testid="disk-limitations-popover"
           >
-            <UiIcon size="sm" status="warning" icon={<ExclamationTriangleIcon />} />
+            <Icon size="sm" status="warning">
+              <ExclamationTriangleIcon />
+            </Icon>
           </Popover>
         </>
       )}

package/lib/common/components/storage/StorageUtils.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { TFunction } from 'i18next';
-import { getHostRole, getInventory, RoleCell, UiIcon } from '../../index';
-import { TableRow } from '../hosts/AITable';
-import { Popover, Content, ContentVariants } from '@patternfly/react-core';
+import { Popover, Content, ContentVariants, Icon } from '@patternfly/react-core';
 import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
 import { Host } from '@openshift-assisted/types/assisted-installer-service';
+import { getHostRole, getInventory, RoleCell } from '../../index';
+import { TableRow } from '../hosts/AITable';
 
 const SkipFormattingDisks = () => (
   <Content component={ContentVariants.p}>Some bootable disks will skip formatting</Content>
@@ -49,7 +49,9 @@ export const numberOfDisksColumn: TableRow<Host> = {
           {'   '}
           {host.skipFormattingDisks && (
             <Popover bodyContent={<SkipFormattingDisks />} minWidth="20rem" maxWidth="30rem">
-              <UiIcon size="sm" status="warning" icon={<ExclamationTriangleIcon />} />
+              <Icon size="sm" status="warning">
+                <ExclamationTriangleIcon />
+              </Icon>
             </Popover>
           )}
         </>

package/lib/common/components/ui/WizardNavItem.tsx

@@ -1,7 +1,6 @@
 import React, { PropsWithChildren, ReactNode } from 'react';
-import { WizardNavItem, WizardNavItemProps } from '@patternfly/react-core';
+import { Icon, WizardNavItem, WizardNavItemProps } from '@patternfly/react-core';
 import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
-import UiIcon from './UiIcon';
 
 const getNavItemContent = (
   content: ReactNode,
@@ -13,11 +12,9 @@ const getNavItemContent = (
     return (
       <>
         {content}
-        <UiIcon
-          status="danger"
-          className="wizard-nav-item-warning-icon"
-          icon={<ExclamationCircleIcon />}
-        />
+        <Icon status="danger" className="wizard-nav-item-warning-icon">
+          <ExclamationCircleIcon />
+        </Icon>
       </>
     );
   }

package/lib/common/components/ui/formik/RemovableField.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
-import { Button, ButtonVariant, Tooltip, TooltipProps } from '@patternfly/react-core';
+import { Button, ButtonVariant, Icon, Tooltip, TooltipProps } from '@patternfly/react-core';
 import { MinusCircleIcon } from '@patternfly/react-icons/dist/js/icons/minus-circle-icon';
-import './RemovableField.css';
 import classnames from 'classnames';
-import UiIcon from '../UiIcon';
+
+import './RemovableField.css';
 
 interface RemovableFieldProps {
   onRemove: VoidFunction;
@@ -30,7 +30,11 @@ const RemovableField: React.FC<RemovableFieldProps & Omit<TooltipProps, 'content
       distance={0}
       content={
         <Button
-          icon={<UiIcon size="sm" icon={<MinusCircleIcon />} />}
+          icon={
+            <Icon size="sm">
+              <MinusCircleIcon />
+            </Icon>
+          }
           variant={ButtonVariant.plain}
           onClick={onRemove}
           data-testid={removeButtonDataTestId}

package/lib/common/components/ui/formik/RichInputField.tsx

@@ -15,15 +15,13 @@ import {
   FormHelperText,
   HelperText,
   ButtonVariant,
+  Icon,
 } from '@patternfly/react-core';
 import { CheckCircleIcon } from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
 import { CheckIcon } from '@patternfly/react-icons/dist/js/icons/check-icon';
 import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
 import { InfoCircleIcon } from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
 import { TimesIcon } from '@patternfly/react-icons/dist/js/icons/times-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_icon_color_status_danger_default as dangerColor } from '@patternfly/react-tokens/dist/js/t_global_icon_color_status_danger_default';
-import { t_global_icon_color_status_info_default as blueInfoColor } from '@patternfly/react-tokens/dist/js/t_global_icon_color_status_info_default';
 
 import { InputFieldProps as BaseInputProps } from './types';
 import { getFieldId } from './utils';
@@ -164,11 +162,17 @@ const RichInputField: React.FC<RichInputFieldPropsProps> = React.forwardRef(
               <Button
                 icon={
                   !isValid ? (
-                    <ExclamationCircleIcon color={dangerColor.value} />
+                    <Icon status="danger">
+                      <ExclamationCircleIcon />
+                    </Icon>
                   ) : value ? (
-                    <CheckCircleIcon color={okColor.value} />
+                    <Icon status="success">
+                      <CheckCircleIcon />
+                    </Icon>
                   ) : (
-                    <InfoCircleIcon color={blueInfoColor.value} />
+                    <Icon status="info">
+                      <InfoCircleIcon />
+                    </Icon>
                   )
                 }
                 variant={ButtonVariant.control}

package/lib/common/components/ui/index.ts

@@ -28,5 +28,3 @@ export { default as ClusterEventsToolbar } from './ClusterEventsToolbar';
 export { default as ModalProgress } from './ModalProgress';
 export { default as ConfirmationModal } from './ConfirmationModal';
 export { default as NoPermissionsError } from './NoPermissionsError';
-
-export { default as UiIcon } from './UiIcon';

package/lib/common/validationSchemas/addressValidation.tsx

@@ -7,13 +7,7 @@ import { getAddress } from '../components/ui/formik/utils';
 import { getSubnet } from '../components/clusterConfiguration/utils';
 import { HostSubnets, NetworkConfigurationValues } from '../types';
 import { IP_V4_ZERO, IP_V6_ZERO, MAC_REGEX } from './regexes';
-import {
-  alwaysRequired,
-  getArrayIndexFromPath,
-  isIPorDN,
-  isIPv4Address,
-  isIPv6Address,
-} from './utils';
+import { getArrayIndexFromPath, isIPorDN, isIPv4Address, isIPv6Address } from './utils';
 import { NO_SUBNET_SET } from '../config';
 import { overlap } from 'cidr-tools';
 import parseUrl from 'parse-url';
@@ -28,6 +22,7 @@ export const ipValidationSchema = (t: TFunction) =>
 
 export const ipNoSuffixValidationSchema = (t: TFunction) =>
   Yup.string().test('ip-validation-no-suffix', t('ai:Not a valid IP address'), (value?: string) => {
+    if (!value) return true;
     const address = getAddress(value || '');
     return !!address && address.address === address.addressMinusSuffix;
   });
@@ -173,15 +168,25 @@ export const vipNoSuffixValidationSchema = (
         }
         if (apiVip === ingressVip) {
           return this.createError({
-            message: t('ai:The {{label}} Ingress and API IP addresses cannot be the same.', {
-              label: index === 0 ? t('ai:primary') : t('ai:secondary'),
-            }),
+            message:
+              index === 0
+                ? t('ai:The primary Ingress and API IP addresses cannot be the same.')
+                : t('ai:The secondary Ingress and API IP addresses cannot be the same.'),
           });
         }
         return true;
       });
+      const requiredField = (message: string) =>
+        Yup.string().test('required-field', message, function (value?: string) {
+          const index = getArrayIndexFromPath(this.path || '');
+          const api1 = (values.apiVips?.[1]?.ip ?? '').toString().trim();
+          const ingress1 = (values.ingressVips?.[1]?.ip ?? '').toString().trim();
+          // Dual-stack: secondary VIPs (index 1) are optional; skip required when both are empty
+          if (index === 1 && api1 === '' && ingress1 === '') return true;
+          return !!value;
+        });
 
-      return alwaysRequired(t('ai:Required field'))
+      return requiredField(t('ai:Required field'))
         .concat(ipNoSuffixValidationSchema(t))
         .concat(vipFamilyMatchSchema)
         .concat(vipRangeValidationSchema(hostSubnets, values, false, t))

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

@@ -1,11 +1,9 @@
 import React from 'react';
-import { Button, ButtonVariant, List, ListItem, Popover } from '@patternfly/react-core';
+import { Button, ButtonVariant, Icon, List, ListItem, Popover } 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 { InProgressIcon } from '@patternfly/react-icons/dist/js/icons/in-progress-icon';
 import { PendingIcon } from '@patternfly/react-icons/dist/js/icons/pending-icon';
-import { t_global_icon_color_status_danger_default as dangerColor } from '@patternfly/react-tokens/dist/js/t_global_icon_color_status_danger_default';
-import { t_global_color_status_success_default as okColor } from '@patternfly/react-tokens/dist/js/t_global_color_status_success_default';
 import { pluralize } from 'humanize-plus';
 import { TFunction } from 'i18next';
 
@@ -60,9 +58,17 @@ export function getOperatorsLabel(operators: MonitoredOperatorsList, t: TFunctio
 export function getOperatorsIcon(status: OperatorStatus | 'pending') {
   switch (status) {
     case 'available':
-      return <CheckCircleIcon color={okColor.value} />;
+      return (
+        <Icon status="success">
+          <CheckCircleIcon />
+        </Icon>
+      );
     case 'failed':
-      return <ExclamationCircleIcon color={dangerColor.value} />;
+      return (
+        <Icon status="danger">
+          <ExclamationCircleIcon />
+        </Icon>
+      );
     case 'progressing':
       return <InProgressIcon />;
     default:

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/networkConfiguration/NetworkConfigurationForm.tsx

@@ -236,9 +236,13 @@ const NetworkConfigurationPage = ({ cluster }: { cluster: Cluster }) => {
       const isMultiNodeCluster = !isSNO(cluster);
       const isUserManagedNetworking = values.managedNetworkingType === 'userManaged';
 
+      // Only send VIPs that have a non-empty IP;
+      const apiVips = (values.apiVips || []).filter((v) => (v?.ip ?? '').trim() !== '');
+      const ingressVips = (values.ingressVips || []).filter((v) => (v?.ip ?? '').trim() !== '');
+
       const params: V2ClusterUpdateParams = {
-        apiVips: values.apiVips,
-        ingressVips: values.ingressVips,
+        apiVips,
+        ingressVips,
         sshPublicKey: values.sshPublicKey,
         vipDhcpAllocation: values.vipDhcpAllocation,
         networkType: values.networkType,
@@ -247,7 +251,6 @@ const NetworkConfigurationPage = ({ cluster }: { cluster: Cluster }) => {
         serviceNetworks: values.serviceNetworks,
         userManagedNetworking: isUserManagedNetworking,
       };
-
       if (params.userManagedNetworking) {
         params.apiVips = [];
         params.ingressVips = [];

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/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/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>