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

package/lib/common/components/clusterWizard/networkingSteps/StackTypeControlGroup.tsx

@@ -3,15 +3,14 @@ import { ButtonVariant, FormGroup, Split, SplitItem, Tooltip } from '@patternfly
 import { useFormikContext } from 'formik';
 import { Address4, Address6 } from 'ip-address';
 
-import { HostSubnets, NetworkConfigurationValues } from '../../../types';
-import { getFieldId } from '../../ui';
 import {
-  DUAL_STACK,
-  IPV4_STACK,
+  HostSubnets,
+  NetworkConfigurationValues,
   NETWORK_TYPE_OVN,
   NETWORK_TYPE_SDN,
-  NO_SUBNET_SET,
-} from '../../../config';
+} from '../../../types';
+import { getFieldId } from '../../ui';
+import { DUAL_STACK, IPV4_STACK, NO_SUBNET_SET } from '../../../config';
 import { RadioField } from '../../ui/formik';
 import { ConfirmationModal, PopoverIcon } from '../../ui';
 import { reorderNetworksByCurrentPrimary } from './reorderNetworks';

package/lib/common/components/clusterWizard/networkingSteps/VirtualIPControlGroup.tsx

@@ -9,8 +9,8 @@ import {
   Stack,
   StackItem,
 } from '@patternfly/react-core';
-import { NetworkConfigurationValues, HostSubnets } from '../../../types';
-import { NETWORK_TYPE_SDN, DUAL_STACK } from '../../../config';
+import { NetworkConfigurationValues, HostSubnets, NETWORK_TYPE_SDN } from '../../../types';
+import { DUAL_STACK } from '../../../config';
 import { selectMachineNetworkCIDR, selectApiVip, selectIngressVip } from '../../../selectors';
 import { getVipValidationsById } from '../../clusterConfiguration';
 import { FormikStaticField, PopoverIcon } from '../../ui';
@@ -243,7 +243,6 @@ export const VirtualIPControlGroup = ({
                       }
                       name="apiVips.1.ip"
                       maxLength={45}
-                      isRequired
                       isDisabled={isVipInputDisabled || isViewerMode}
                       labelInfo={t('ai:Secondary')}
                     />
@@ -275,7 +274,6 @@ export const VirtualIPControlGroup = ({
                         </>
                       }
                       maxLength={45}
-                      isRequired
                       isDisabled={isVipInputDisabled || isViewerMode}
                       labelInfo={t('ai:Secondary')}
                     />

package/lib/common/components/clusters/PullSecret.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Checkbox } from '@patternfly/react-core';
+import { Alert, AlertVariant, Checkbox } from '@patternfly/react-core';
 import { useFormikContext } from 'formik';
 import { ClusterCreateParams } from '@openshift-assisted/types/assisted-installer-service';
 import { PullSecretField, PullSecretInfo } from '../ui';
@@ -8,42 +8,54 @@ import { useTranslation } from '../../hooks/use-translation-wrapper';
 export type PullSecretProps = {
   defaultPullSecret?: string;
   isOcm?: boolean;
+  isPullSecretSet?: boolean;
+  isSingleClusterFeatureEnabled?: boolean;
 };
 
-const PullSecret: React.FC<PullSecretProps> = ({ defaultPullSecret, isOcm = false }) => {
+const PullSecret: React.FC<PullSecretProps> = ({
+  defaultPullSecret,
+  isOcm = false,
+  isPullSecretSet = false,
+  isSingleClusterFeatureEnabled = false,
+}) => {
   // Fetched pull secret will never change - see LoadingState in NewCluster
   const [isExpanded, setExpanded] = React.useState(!defaultPullSecret);
   const { setFieldValue } = useFormikContext<ClusterCreateParams>();
   const { t } = useTranslation();
-  if (isOcm) {
-    const onCheckboxChange = () => {
-      if (isExpanded) {
-        // about to collapse, reset to original value
-        setFieldValue('pullSecret', defaultPullSecret);
-      }
-      setExpanded(!isExpanded);
-    };
+  const onCheckboxChange = () => {
+    if (isExpanded) {
+      // about to collapse, reset to original value
+      setFieldValue('pullSecret', defaultPullSecret);
+    }
+    setExpanded(!isExpanded);
+  };
 
-    return (
-      <>
-        <Checkbox
-          id="checkbox-pull-secret"
-          className="pf-v6-u-display-inline-flex"
-          aria-label={t('ai:edit pull secret')}
-          isChecked={isExpanded}
-          onChange={onCheckboxChange}
-          label={
-            <>
-              {t('ai:Edit pull secret')} <PullSecretInfo isOcm={isOcm} />
-            </>
-          }
-        />
-        {isExpanded && <PullSecretField isOcm={isOcm} />}
-      </>
-    );
+  if (!(isOcm || isSingleClusterFeatureEnabled)) {
+    return <PullSecretField isOcm={isOcm} />;
   }
 
-  return <PullSecretField isOcm={isOcm} />;
+  return (
+    <>
+      {isPullSecretSet && (
+        <Alert variant={AlertVariant.success} isInline title={t('ai:Pull secret configured')}>
+          {t('ai:A pull secret has already been set for this cluster. You can edit it below.')}
+        </Alert>
+      )}
+      <Checkbox
+        id="checkbox-pull-secret"
+        className="pf-v6-u-display-inline-flex"
+        aria-label={t('ai:edit pull secret')}
+        isChecked={isExpanded}
+        onChange={onCheckboxChange}
+        label={
+          <>
+            {t('ai:Edit pull secret')} <PullSecretInfo isOcm={isOcm} />
+          </>
+        }
+      />
+      {isExpanded && <PullSecretField isOcm={isOcm} />}
+    </>
+  );
 };
 
 export default PullSecret;

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

@@ -226,7 +226,7 @@ const AITable = <R extends any>({
   }, [hostRows, columns, children]);
 
   const onCollapse = React.useCallback(
-    (_event, rowKey: number) => {
+    (_event: unknown, rowKey: number) => {
       const id = hostRows[rowKey].id as string;
       if (id) {
         setOpenRows(Object.assign({}, openRows, { [id]: !openRows[id] }));

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

@@ -40,7 +40,7 @@ const AdditionalNTPSourcesForm = ({
 
   const getValidationSchema = (t: TFunction) =>
     Yup.object().shape({
-      additionalNtpSource: ntpSourceValidationSchema(t).required(t('ai:Required field')),
+      additionalNtpSource: ntpSourceValidationSchema(t, false),
     });
 
   const { t } = useTranslation();

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

@@ -1,10 +1,8 @@
 import React from 'react';
-import { Button, ButtonVariant, Flex, Popover } from '@patternfly/react-core';
+import { Button, ButtonVariant, Flex, Icon, 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 { 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 successColor } from '@patternfly/react-tokens/dist/js/t_global_color_status_success_default';
 import { toSentence } from '../ui';
 import { hostValidationFailureHints, hostValidationLabels } from '../../config';
 import { Validation } from '../../types/hosts';
@@ -15,7 +13,11 @@ type ValidationPopoverProps = {
   actions?: React.ReactNode[];
 };
 
-const ValidationPopover: React.FC<ValidationPopoverProps> = ({ validation, actions, children }) => {
+const ValidationPopover: React.FC<React.PropsWithChildren<ValidationPopoverProps>> = ({
+  validation,
+  actions,
+  children,
+}) => {
   const { t } = useTranslation();
   const failedValidationHint = hostValidationFailureHints(t)[validation.id];
 
@@ -47,7 +49,9 @@ type HostPropertyValidationPopoverProps = {
   showSuccess?: boolean;
 };
 
-const HostPropertyValidationPopover: React.FC<HostPropertyValidationPopoverProps> = ({
+const HostPropertyValidationPopover: React.FC<
+  React.PropsWithChildren<HostPropertyValidationPopoverProps>
+> = ({
   validation,
   failureActions,
   pendingActions,
@@ -61,7 +65,10 @@ const HostPropertyValidationPopover: React.FC<HostPropertyValidationPopoverProps
       return (
         <ValidationPopover validation={validation} actions={failureActions}>
           <Flex columnGap={{ default: 'columnGapSm' }} alignItems={{ default: 'alignItemsCenter' }}>
-            <ExclamationCircleIcon color={dangerColor.value} /> {children}
+            <Icon status="danger">
+              <ExclamationCircleIcon />
+            </Icon>{' '}
+            {children}
           </Flex>
         </ValidationPopover>
       );
@@ -79,7 +86,10 @@ const HostPropertyValidationPopover: React.FC<HostPropertyValidationPopoverProps
       return (
         <>
           <Flex columnGap={{ default: 'columnGapSm' }} alignItems={{ default: 'alignItemsCenter' }}>
-            <CheckCircleIcon color={successColor.value} /> {children}
+            <Icon status="success">
+              <CheckCircleIcon />
+            </Icon>{' '}
+            {children}
           </Flex>
         </>
       );

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

@@ -1,5 +1,14 @@
 import React from 'react';
-import { Popover, Button, Content, FlexItem, Flex, Stack, StackItem } from '@patternfly/react-core';
+import {
+  Popover,
+  Button,
+  Content,
+  FlexItem,
+  Flex,
+  Stack,
+  StackItem,
+  Icon,
+} from '@patternfly/react-core';
 import { PopoverProps } from '@patternfly/react-core/dist/js/components/Popover/Popover';
 import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
 import { UnknownIcon } from '@patternfly/react-icons/dist/js/icons/unknown-icon';
@@ -8,7 +17,7 @@ import hdate from 'human-date';
 
 import { Host, HostProgressInfo } from '@openshift-assisted/types/assisted-installer-service';
 import { ValidationsInfo } from '../../types/hosts';
-import { ExternalLink, UiIcon, getHumanizedDateTime } from '../ui';
+import { ExternalLink, getHumanizedDateTime } from '../ui';
 
 import HostProgress from './HostProgress';
 import { getHostProgressStageNumber, getHostProgressStages } from './utils';
@@ -188,7 +197,9 @@ type WithHostStatusPopoverProps = AdditionNtpSourcePropsType &
     openshiftVersion?: string;
   };
 
-const WithHostStatusPopover: React.FC<WithHostStatusPopoverProps> = (props) => (
+const WithHostStatusPopover: React.FC<React.PropsWithChildren<WithHostStatusPopoverProps>> = (
+  props,
+) => (
   <Popover
     headerContent={<div>{props.title}</div>}
     bodyContent={
@@ -225,13 +236,15 @@ const getHostStatusIcon = (
         minWidth="20rem"
         maxWidth="30rem"
       >
-        <UiIcon size="sm" status="warning" icon={<ExclamationTriangleIcon />} />
+        <Icon size="sm" status="warning">
+          <ExclamationTriangleIcon />
+        </Icon>
       </Popover>
     );
   } else return icon;
 };
 
-const HostStatus: React.FC<HostStatusProps> = ({
+const HostStatus: React.FC<React.PropsWithChildren<HostStatusProps>> = ({
   host,
   validationsInfo,
   status,

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

@@ -1,7 +1,5 @@
 import React, { Fragment, ReactElement } from 'react';
-import { Alert, AlertGroup, AlertVariant, Level, LevelItem } from '@patternfly/react-core';
-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 { Alert, AlertGroup, AlertVariant, Icon, Level, LevelItem } from '@patternfly/react-core';
 import { PendingIcon } from '@patternfly/react-icons/dist/js/icons/pending-icon';
 import { CheckCircleIcon } from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
 import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
@@ -293,7 +291,10 @@ export const HostValidationGroups = ({
           if (failedValidations.length) {
             return (
               <>
-                {t('ai:Failed')} <ExclamationTriangleIcon color={warningColor.value} />
+                {t('ai:Failed')}{' '}
+                <Icon status="warning">
+                  <ExclamationTriangleIcon />
+                </Icon>
               </>
             );
           } else if (pendingValidations.length) {
@@ -305,7 +306,10 @@ export const HostValidationGroups = ({
           }
           return (
             <>
-              {t('ai:Ready')} <CheckCircleIcon color={okColor.value} />
+              {t('ai:Ready')}{' '}
+              <Icon status="success">
+                <CheckCircleIcon />
+              </Icon>
             </>
           );
         };

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

@@ -1,7 +1,6 @@
 import React from 'react';
-import { Button, ButtonVariant, Flex, FlexItem, Popover } from '@patternfly/react-core';
+import { Button, ButtonVariant, Flex, FlexItem, Icon, Popover } from '@patternfly/react-core';
 import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
-import { t_global_icon_color_status_warning_default as warningColor } from '@patternfly/react-tokens/dist/js/t_global_icon_color_status_warning_default';
 import type { Host, Inventory } from '@openshift-assisted/types/assisted-installer-service';
 import { getHostname } from './utils';
 import { DASH } from '../constants';
@@ -44,7 +43,9 @@ const Hostname: React.FC<HostnameProps> = ({
     <Flex alignItems={{ default: 'alignItemsCenter' }}>
       {onEditHostname && !isValid && (
         <FlexItem className={'pf-v6-u-mr-xs'}>
-          <ExclamationTriangleIcon color={warningColor.value} />
+          <Icon status="warning">
+            <ExclamationTriangleIcon />
+          </Icon>
         </FlexItem>
       )}
       <FlexItem>{hostname}</FlexItem>
@@ -61,7 +62,9 @@ const Hostname: React.FC<HostnameProps> = ({
         headerContent={
           <Flex alignItems={{ default: 'alignItemsCenter' }}>
             <FlexItem className={'pf-v6-u-mr-xs'}>
-              <ExclamationTriangleIcon color={warningColor.value} />
+              <Icon status="warning">
+                <ExclamationTriangleIcon />
+              </Icon>
             </FlexItem>
             <FlexItem>{t('ai:Hostname is not valid')}</FlexItem>
           </Flex>

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

@@ -12,12 +12,9 @@ const HostsTableDetailContext = React.createContext<HostsTableDetailContextValue
   undefined,
 );
 
-const HostsTableDetailContextProvider: React.FC<HostsTableDetailContextValue> = ({
-  canEditDisks,
-  onDiskRole,
-  updateDiskSkipFormatting,
-  children,
-}) => {
+const HostsTableDetailContextProvider: React.FC<
+  React.PropsWithChildren<HostsTableDetailContextValue>
+> = ({ canEditDisks, onDiskRole, updateDiskSkipFormatting, children }) => {
   const context = {
     canEditDisks,
     onDiskRole,

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

@@ -7,6 +7,7 @@ import {
   Form,
   HelperText,
   HelperTextItem,
+  Icon,
   Modal,
   ModalBody,
   ModalFooter,
@@ -19,7 +20,6 @@ import {
 } from '@patternfly/react-core';
 import { Formik, useFormikContext } from 'formik';
 import * as Yup from 'yup';
-import { t_global_icon_color_status_info_default as blueInfoColor } from '@patternfly/react-tokens/dist/js/t_global_icon_color_status_info_default';
 import { InfoCircleIcon } from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
 import { TFunction } from 'i18next';
 
@@ -55,8 +55,8 @@ const getNewHostnames = (
     const [changeEnabled, reason] = canChangeHostname(h);
     const hostnameRes = {
       newHostname: changeEnabled ? templateToHostname(index, values) : undefined,
+      oldHostname: getHostname(h),
       reason: changeEnabled ? undefined : reason,
-      oldHostname: h.requestedHostname,
     };
     if (changeEnabled) {
       index++;
@@ -176,6 +176,7 @@ const MassChangeHostnameForm = ({
 
   const newHostnames = getNewHostnames(values, selectedHosts, canChangeHostname);
   const { t } = useTranslation();
+
   return (
     <Form onSubmit={handleSubmit}>
       <ModalBody>
@@ -235,14 +236,20 @@ const MassChangeHostnameForm = ({
                       >
                         <Button
                           variant="link"
-                          icon={<InfoCircleIcon color={blueInfoColor.value} />}
+                          icon={
+                            <Icon status="info">
+                              <InfoCircleIcon />
+                            </Icon>
+                          }
                           isInline
                         >
                           {t('ai:Not changeable')}
                         </Button>
                       </Popover>
                     ) : (
-                      host.newHostname || t('ai:New hostname will appear here...')
+                      <Content>
+                        {host.newHostname || t('ai:New hostname will appear here...')}
+                      </Content>
                     )}
                   </div>
                 ))}

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

@@ -35,7 +35,7 @@ type TableToolbarProps = {
   clearAllFilters?: ToolbarProps['clearAllFilters'];
 };
 
-const TableToolbar: React.FC<TableToolbarProps> = ({
+const TableToolbar: React.FC<React.PropsWithChildren<TableToolbarProps>> = ({
   itemIDs,
   selectedIDs,
   setSelectedIDs,

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

@@ -1,8 +1,15 @@
 import React from 'react';
-import { Button, ButtonVariant, Popover, Content, ContentVariants } from '@patternfly/react-core';
+import {
+  Button,
+  ButtonVariant,
+  Popover,
+  Content,
+  ContentVariants,
+  Icon,
+} from '@patternfly/react-core';
 import { InfoCircleIcon } from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
 import { Trans } from 'react-i18next';
-import { PrismCode, UiIcon } from '../../../common/components/ui';
+import { PrismCode } from '../../../common/components/ui';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
 
 export const VMRebootConfigurationContent = () => {
@@ -43,7 +50,9 @@ const VMRebootConfigurationInfo = () => {
       <Popover bodyContent={<VMRebootConfigurationContent />} minWidth="35rem">
         <Button variant={ButtonVariant.link} isInline>
           <>
-            <UiIcon size="sm" icon={<InfoCircleIcon />} />
+            <Icon size="sm">
+              <InfoCircleIcon />
+            </Icon>
             &nbsp;
           </>
           {t('ai:Check your VM reboot configuration')}

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';
 
@@ -39,7 +46,9 @@ const diskColumns = (t: TFunction, showFormat: boolean) =>
       title: (
         <>
           WWN{' '}
-          <PopoverIcon bodyContent={t('ai:World Wide Name (WWN) is a unique disk identifier.')} />
+          <PopoverIcon
+            bodyContent={t<string>('ai:World Wide Name (WWN) is a unique disk identifier.')}
+          />
         </>
       ),
     },
@@ -100,7 +109,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 +126,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>
           )}
         </>