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

package/lib/common/components/clusterDetail/FinalizingProgress.tsx

@@ -1,16 +1,15 @@
-import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
-import { EventListFetchProps } from '../../types';
 import React from 'react';
-import { EventsModal } from '../ui';
-import { Button, ButtonVariant, Popover, Content } from '@patternfly/react-core';
+import capitalize from 'lodash-es/capitalize.js';
+import { Button, ButtonVariant, Popover, Content, 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 { 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_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 { Cluster } from '@openshift-assisted/types/assisted-installer-service';
+import { EventsModal } from '../ui';
+import { EventListFetchProps } from '../../types';
 import ClusterProgressItem from './ClusterProgressItem';
-import capitalize from 'lodash-es/capitalize.js';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
 
 type FinalizingProgressProps = {
@@ -32,7 +31,11 @@ const areAllBuiltInOperatorsAvailable = (
 export const getFinalizingStatus = (cluster: Cluster) => {
   let finalizingIcon, initializationStatus;
   if (areAllBuiltInOperatorsAvailable(cluster.monitoredOperators)) {
-    finalizingIcon = <CheckCircleIcon color={okColor.value} />;
+    finalizingIcon = (
+      <Icon status="success">
+        <CheckCircleIcon />
+      </Icon>
+    );
     initializationStatus = 'completed';
   } else {
     switch (cluster.status) {
@@ -42,12 +45,20 @@ export const getFinalizingStatus = (cluster: Cluster) => {
         break;
       case 'error':
       case 'cancelled':
-        finalizingIcon = <ExclamationCircleIcon color={dangerColor.value} />;
+        finalizingIcon = (
+          <Icon status="danger">
+            <ExclamationCircleIcon />
+          </Icon>
+        );
         initializationStatus = 'failed';
         break;
       case 'installed':
       case 'adding-hosts':
-        finalizingIcon = <CheckCircleIcon color={okColor.value} />;
+        finalizingIcon = (
+          <Icon status="success">
+            <CheckCircleIcon />
+          </Icon>
+        );
         initializationStatus = 'completed';
         break;
       default:

package/lib/common/components/clusterDetail/OperatorsProgressItem.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';
 import {
@@ -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/common/components/clusterDetail/ProgressBarTexts.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
-import { Host, HostRole } from '@openshift-assisted/types/assisted-installer-service';
+import { 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 { InProgressIcon } from '@patternfly/react-icons/dist/js/icons/in-progress-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 { Host, HostRole } from '@openshift-assisted/types/assisted-installer-service';
 import ClusterProgressItem from './ClusterProgressItem';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
 
@@ -24,7 +24,13 @@ export const ProgressBarTexts = ({ hosts, hostRole }: HostProgressProps) => {
   if (hosts.some((host) => ['cancelled', 'error'].includes(host.status))) {
     const failedHostsCount = hosts.filter((host) => host.status === 'error').length;
     return (
-      <ClusterProgressItem icon={<ExclamationCircleIcon color={dangerColor.value} />}>
+      <ClusterProgressItem
+        icon={
+          <Icon status="danger">
+            <ExclamationCircleIcon />
+          </Icon>
+        }
+      >
         <>
           {hostRoleText}
           <br />
@@ -73,7 +79,13 @@ export const ProgressBarTexts = ({ hosts, hostRole }: HostProgressProps) => {
   }
 
   return (
-    <ClusterProgressItem icon={<CheckCircleIcon color={okColor.value} />}>
+    <ClusterProgressItem
+      icon={
+        <Icon status="success">
+          <CheckCircleIcon />
+        </Icon>
+      }
+    >
       <>
         {hostRoleText}
         <br />

package/lib/common/components/clusterWizard/ReviewValidations.tsx

@@ -1,10 +1,9 @@
 import React from 'react';
 import lodashValues from 'lodash-es/values.js';
-import { Button, ButtonVariant } from '@patternfly/react-core';
+import { Button, ButtonVariant, 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 { t_global_color_status_success_default as okColor } from '@patternfly/react-tokens/dist/js/t_global_color_status_success_default';
 
 import {
   ValidationsInfo as ClusterValidationsInfo,
@@ -30,13 +29,15 @@ import {
 import { useTranslation } from '../../hooks/use-translation-wrapper';
 import { Trans } from 'react-i18next';
 import { getKeys, stringToJSON } from '../../utils';
-import { UiIcon } from '../ui';
 
 const AllValidationsPassed = () => {
   const { t } = useTranslation();
   return (
     <>
-      <CheckCircleIcon color={okColor.value} /> {t('ai:All checks passed')}
+      <Icon status="success">
+        <CheckCircleIcon />
+      </Icon>{' '}
+      {t('ai:All checks passed')}
     </>
   );
 };
@@ -124,9 +125,17 @@ const FailingValidation = <S extends string>({
 
   let icon;
   if (severity === 'warning') {
-    icon = <UiIcon status="warning" icon={<ExclamationTriangleIcon />} />;
+    icon = (
+      <Icon status="warning">
+        <ExclamationTriangleIcon />
+      </Icon>
+    );
   } else {
-    icon = <UiIcon status="danger" icon={<ExclamationCircleIcon />} />;
+    icon = (
+      <Icon status="danger">
+        <ExclamationCircleIcon />
+      </Icon>
+    );
   }
 
   return (

package/lib/common/components/clusterWizard/clusterDetailsValidation.ts

@@ -7,13 +7,13 @@ import {
 } from '@openshift-assisted/types/assisted-installer-service';
 import { getDefaultCpuArchitecture, OpenshiftVersionOptionType } from '../../types';
 import { TangServer } from '../clusterConfiguration/DiskEncryptionFields/DiskEncryptionValues';
+import { getDefaultOpenShiftVersion } from '../ui';
 import {
   baseDomainValidationSchema,
   dnsNameValidationSchema,
-  getDefaultOpenShiftVersion,
   nameValidationSchema,
   pullSecretValidationSchema,
-} from '../ui';
+} from '../../validationSchemas';
 import { ClusterDetailsValues } from './types';
 
 const emptyTangServers = (): TangServer[] => {
@@ -98,22 +98,32 @@ export const getClusterDetailsValidationSchema = ({
   t: TFunction;
 }) =>
   Yup.lazy((values: { baseDnsDomain: string; isSNODevPreview: boolean }) => {
-    const validateName = () =>
-      nameValidationSchema(t, usedClusterNames, values.baseDnsDomain, validateUniqueName, isOcm);
     if (pullSecretSet) {
       return Yup.object({
-        name: validateName(),
+        name: nameValidationSchema(
+          t,
+          usedClusterNames,
+          values.baseDnsDomain,
+          validateUniqueName,
+          isOcm,
+        ),
         baseDnsDomain: isOcm
-          ? baseDomainValidationSchema.required(t('ai:Required field'))
-          : dnsNameValidationSchema.required(t('ai:Required field')),
+          ? baseDomainValidationSchema(t).required(t('ai:Required field'))
+          : dnsNameValidationSchema(t).required(t('ai:Required field')),
       });
     }
     return Yup.object({
-      name: validateName(),
+      name: nameValidationSchema(
+        t,
+        usedClusterNames,
+        values.baseDnsDomain,
+        validateUniqueName,
+        isOcm,
+      ),
       baseDnsDomain: isOcm
-        ? baseDomainValidationSchema.required(t('ai:Required field'))
-        : dnsNameValidationSchema.required(t('ai:Required field')),
-      pullSecret: pullSecretValidationSchema.required(t('ai:Required field')),
+        ? baseDomainValidationSchema(t).required(t('ai:Required field'))
+        : dnsNameValidationSchema(t).required(t('ai:Required field')),
+      pullSecret: pullSecretValidationSchema(t).required(t('ai:Required field')),
       diskEncryptionTangServers: Yup.array().when('diskEncryptionMode', {
         is: (diskEncryptionMode: DiskEncryption['mode']) => {
           return diskEncryptionMode === 'tang';

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

@@ -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/hosts/AdditionalNTPSourcesDialog.tsx

@@ -11,11 +11,8 @@ import {
   ModalVariant,
   ModalHeader,
 } from '@patternfly/react-core';
-import {
-  ntpSourceValidationSchema,
-  AdditionalNTPSourcesField,
-  StatusErrorType,
-} from '../../../common';
+import { AdditionalNTPSourcesField, StatusErrorType } from '../../../common';
+import { ntpSourceValidationSchema } from '../../validationSchemas/ntpValidation';
 import { AlertFormikError } from '../../../common/components/ui';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
 import {
@@ -43,7 +40,7 @@ const AdditionalNTPSourcesForm = ({
 
   const getValidationSchema = (t: TFunction) =>
     Yup.object().shape({
-      additionalNtpSource: ntpSourceValidationSchema.required(t('ai:Required field')),
+      additionalNtpSource: ntpSourceValidationSchema(t).required(t('ai:Required field')),
     });
 
   const { t } = useTranslation();

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

@@ -14,14 +14,8 @@ import {
 import { Formik } from 'formik';
 import { TFunction } from 'i18next';
 import { Host, Inventory } from '@openshift-assisted/types/assisted-installer-service';
-import {
-  richHostnameValidationSchema,
-  RichInputField,
-  StaticTextField,
-  hostnameValidationMessages,
-  getRichTextValidation,
-  AlertFormikError,
-} from '../ui';
+import { RichInputField, StaticTextField, getRichTextValidation, AlertFormikError } from '../ui';
+import { richHostnameValidationSchema, hostnameValidationMessages } from '../../validationSchemas';
 import { canHostnameBeChanged } from './utils';
 import GridGap from '../ui/GridGap';
 import { EditHostFormValues } from './types';

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';
@@ -61,7 +59,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 +80,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';
@@ -225,7 +234,9 @@ const getHostStatusIcon = (
         minWidth="20rem"
         maxWidth="30rem"
       >
-        <UiIcon size="sm" status="warning" icon={<ExclamationTriangleIcon />} />
+        <Icon size="sm" status="warning">
+          <ExclamationTriangleIcon />
+        </Icon>
       </Popover>
     );
   } else return icon;

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/MassChangeHostnameModal.tsx

@@ -7,6 +7,7 @@ import {
   Form,
   HelperText,
   HelperTextItem,
+  Icon,
   Modal,
   ModalBody,
   ModalFooter,
@@ -19,18 +20,15 @@ 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';
 
+import { RichInputField, getRichTextValidation, ModalProgress } from '../ui';
 import {
-  RichInputField,
-  getRichTextValidation,
-  richHostnameValidationSchema,
-  hostnameValidationMessages,
-  ModalProgress,
   FORBIDDEN_HOSTNAMES,
-} from '../ui';
+  hostnameValidationMessages,
+  richHostnameValidationSchema,
+} from '../../validationSchemas';
 import { Host } from '@openshift-assisted/types/assisted-installer-service';
 import { getHostname as getHostnameUtils, getInventory } from './utils';
 import { ActionCheck } from './types';
@@ -237,7 +235,11 @@ const MassChangeHostnameForm = ({
                       >
                         <Button
                           variant="link"
-                          icon={<InfoCircleIcon color={blueInfoColor.value} />}
+                          icon={
+                            <Icon status="info">
+                              <InfoCircleIcon />
+                            </Icon>
+                          }
                           isInline
                         >
                           {t('ai:Not changeable')}

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.'),
     },
   });