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

package/lib/ocm/components/clusterConfiguration/networkConfiguration/networkConfigurationValidation.ts

@@ -1,4 +1,5 @@
 import * as Yup from 'yup';
+import { TFunction } from 'i18next';
 import {
   clusterNetworksValidationSchema,
   dualStackValidationSchema,
@@ -72,13 +73,14 @@ export const getNetworkInitialValues = (
 export const getNetworkConfigurationValidationSchema = (
   initialValues: NetworkConfigurationValues,
   hostSubnets: HostSubnets,
+  t: TFunction,
   openshiftVersion?: string,
 ) =>
   Yup.lazy((values: NetworkConfigurationValues) =>
     Yup.object<NetworkConfigurationValues>().shape({
-      apiVips: vipArrayValidationSchema<ApiVip>(hostSubnets, values),
-      ingressVips: vipArrayValidationSchema<IngressVip>(hostSubnets, values),
-      sshPublicKey: sshPublicKeyValidationSchema,
+      apiVips: vipArrayValidationSchema<ApiVip>(hostSubnets, values, t),
+      ingressVips: vipArrayValidationSchema<IngressVip>(hostSubnets, values, t),
+      sshPublicKey: sshPublicKeyValidationSchema(t),
       machineNetworks:
         values.managedNetworkingType === 'userManaged'
           ? Yup.array()
@@ -88,25 +90,21 @@ export const getNetworkConfigurationValidationSchema = (
               otherwise: () =>
                 values.machineNetworks && values.machineNetworks?.length >= 2
                   ? machineNetworksValidationSchema.concat(
-                      dualStackValidationSchema('machine networks', openshiftVersion),
+                      dualStackValidationSchema('machine networks', t, openshiftVersion),
                     )
                   : Yup.array(),
             }),
-      clusterNetworks: clusterNetworksValidationSchema.when('stackType', {
+      clusterNetworks: clusterNetworksValidationSchema(t).when('stackType', {
         is: (stackType: NetworkConfigurationValues['stackType']) => stackType === IPV4_STACK,
-        then: () => clusterNetworksValidationSchema.concat(IPv4ValidationSchema),
-        otherwise: () =>
-          clusterNetworksValidationSchema.concat(
-            dualStackValidationSchema('cluster network', openshiftVersion),
-          ),
+        then: (schema) => schema.concat(IPv4ValidationSchema),
+        otherwise: (schema) =>
+          schema.concat(dualStackValidationSchema('cluster network', t, openshiftVersion)),
       }),
-      serviceNetworks: serviceNetworkValidationSchema.when('stackType', {
+      serviceNetworks: serviceNetworkValidationSchema(t).when('stackType', {
         is: (stackType: NetworkConfigurationValues['stackType']) => stackType === IPV4_STACK,
-        then: () => serviceNetworkValidationSchema.concat(IPv4ValidationSchema),
-        otherwise: () =>
-          serviceNetworkValidationSchema.concat(
-            dualStackValidationSchema('service network', openshiftVersion),
-          ),
+        then: (schema) => schema.concat(IPv4ValidationSchema),
+        otherwise: (schema) =>
+          schema.concat(dualStackValidationSchema('service network', t, openshiftVersion)),
       }),
     }),
   );

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/clusterConfiguration/staticIp/components/FormViewHosts/FormViewHosts.tsx

@@ -9,8 +9,10 @@ import { formViewHostsToInfraEnvField } from '../../data/formDataToInfraEnvField
 import { getEmptyFormViewHostsValues } from '../../data/emptyData';
 import { getFormViewHostsValues, getFormViewNetworkWideValues } from '../../data/fromInfraEnv';
 import { InfraEnv } from '@openshift-assisted/types/assisted-installer-service';
+import { useTranslation } from '../../../../../../common';
 
 export const FormViewHosts: React.FC<StaticIpViewProps> = ({ infraEnv, ...props }) => {
+  const { t } = useTranslation();
   const [protocolType, setProtocolType] = React.useState<StaticProtocolType>();
   const [formProps, setFormProps] = React.useState<StaticIpFormProps<FormViewHostsValues>>();
   React.useEffect(() => {
@@ -20,7 +22,7 @@ export const FormViewHosts: React.FC<StaticIpViewProps> = ({ infraEnv, ...props
     if (networkWideValues) {
       setFormProps({
         infraEnv,
-        validationSchema: getFormViewHostsValidationSchema(networkWideValues),
+        validationSchema: getFormViewHostsValidationSchema(networkWideValues, t),
         getInitialValues: (infraEnv: InfraEnv) => {
           return getFormViewHostsValues(infraEnv);
         },

package/lib/ocm/components/clusterConfiguration/staticIp/components/FormViewHosts/formViewHostsValidationSchema.tsx

@@ -1,4 +1,5 @@
 import * as Yup from 'yup';
+import { TFunction } from 'i18next';
 
 import {
   FormViewNetworkWideValues,
@@ -14,6 +15,7 @@ import {
   getIpIsNotNetworkOrBroadcastAddressSchema,
 } from '../../commonValidationSchemas';
 import { getMachineNetworkCidr } from '../../data/machineNetwork';
+
 const requiredMsg = 'A value is required';
 
 const getAllIpv4Addresses: UniqueStringArrayExtractor<FormViewHostsValues> = (
@@ -39,12 +41,12 @@ const getAllBondInterfaces: UniqueStringArrayExtractor<FormViewHostsValues> = (
   ]);
 };
 
-const getHostValidationSchema = (networkWideValues: FormViewNetworkWideValues) =>
+const getHostValidationSchema = (networkWideValues: FormViewNetworkWideValues, t: TFunction) =>
   Yup.object({
     macAddress: Yup.mixed().when('useBond', {
       is: false,
       then: () =>
-        macAddressValidationSchema
+        macAddressValidationSchema(t)
           .required(requiredMsg)
           .concat(getUniqueValidationSchema(getAllMacAddresses)),
       otherwise: () => Yup.mixed().notRequired(),
@@ -82,7 +84,7 @@ const getHostValidationSchema = (networkWideValues: FormViewNetworkWideValues) =
     bondPrimaryInterface: Yup.mixed().when('useBond', {
       is: true,
       then: () =>
-        macAddressValidationSchema
+        macAddressValidationSchema(t)
           .required(requiredMsg)
           .concat(getUniqueValidationSchema(getAllBondInterfaces)),
       otherwise: () => Yup.mixed().notRequired(),
@@ -90,15 +92,18 @@ const getHostValidationSchema = (networkWideValues: FormViewNetworkWideValues) =
     bondSecondaryInterface: Yup.mixed().when('useBond', {
       is: true,
       then: () =>
-        macAddressValidationSchema
+        macAddressValidationSchema(t)
           .required(requiredMsg)
           .concat(getUniqueValidationSchema(getAllBondInterfaces)),
       otherwise: () => Yup.mixed().notRequired(),
     }),
   });
 
-export const getFormViewHostsValidationSchema = (networkWideValues: FormViewNetworkWideValues) => {
+export const getFormViewHostsValidationSchema = (
+  networkWideValues: FormViewNetworkWideValues,
+  t: TFunction,
+) => {
   return Yup.object().shape({
-    hosts: Yup.array(getHostValidationSchema(networkWideValues)),
+    hosts: Yup.array(getHostValidationSchema(networkWideValues, t)),
   });
 };

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

@@ -7,17 +7,21 @@ import { YamlViewFields } from './YamlViewFields';
 import { getEmptyYamlValues } from '../../data/emptyData';
 import { InfraEnv } from '@openshift-assisted/types/assisted-installer-service';
 import { getYamlViewValues } from '../../data/fromInfraEnv';
+import { useTranslation } from '../../../../../../common';
 
 export const YamlView: React.FC<StaticIpViewProps> = ({ ...props }) => {
+  const { t } = useTranslation();
+
   const formProps: StaticIpFormProps<YamlViewValues> = {
     ...props,
-    validationSchema: yamlViewValidationSchema,
+    validationSchema: yamlViewValidationSchema(t),
     getInitialValues: (infraEnv: InfraEnv) => {
       return getYamlViewValues(infraEnv);
     },
     getUpdateParams: (currentInfraEnv: InfraEnv, values: YamlViewValues) => values.hosts,
     getEmptyValues: () => getEmptyYamlValues(),
   };
+
   return (
     <StaticIpForm<YamlViewValues> {...formProps}>
       <YamlViewFields />

package/lib/ocm/components/clusterConfiguration/staticIp/components/YamlView/yamlViewValidationSchema.tsx

@@ -1,12 +1,15 @@
 import * as Yup from 'yup';
-import { ArrayElementType, macAddressValidationSchema } from '../../../../../../common';
+import {
+  ArrayElementType,
+  getIncorrectFileTypeMessage,
+  macAddressValidationSchema,
+} from '../../../../../../common';
 import { YamlViewValues } from '../../data/dataTypes';
 import {
   getUniqueValidationSchema,
   UniqueStringArrayExtractor,
 } from '../../commonValidationSchemas';
 import {
-  INCORRECT_TYPE_FILE_MESSAGE,
   getMaxFileSizeMessage,
   validateFileSize,
   validateFileType,
@@ -15,13 +18,13 @@ import {
   HostStaticNetworkConfig,
   MacInterfaceMap,
 } from '@openshift-assisted/types/assisted-installer-service';
+import { TFunction } from 'i18next';
 
-const requiredMsg = 'A value is required';
-
-const networkYamlValidationSchema = Yup.string()
-  .required(requiredMsg)
-  .test('file-size-limit', getMaxFileSizeMessage, validateFileSize)
-  .test('file-type-yaml', INCORRECT_TYPE_FILE_MESSAGE, validateFileType);
+const networkYamlValidationSchema = (t: TFunction) =>
+  Yup.string()
+    .required('Required field')
+    .test('file-size-limit', getMaxFileSizeMessage(t), validateFileSize)
+    .test('file-type-yaml', getIncorrectFileTypeMessage(t), validateFileType);
 
 const getAllMacAddresses: UniqueStringArrayExtractor<YamlViewValues> = (
   values: YamlViewValues,
@@ -59,24 +62,26 @@ const getInterfaceNamesInCurrentHost: UniqueStringArrayExtractor<YamlViewValues>
   });
 };
 
-const macInterfaceMapValidationSchema = Yup.array<MacInterfaceMap>().of(
-  Yup.object({
-    macAddress: macAddressValidationSchema
-      .required(requiredMsg)
-      .concat(getUniqueValidationSchema(getAllMacAddresses)),
-    logicalNicName: Yup.string()
-      .required(requiredMsg)
-      .concat(getUniqueValidationSchema(getInterfaceNamesInCurrentHost))
-      .max(15, 'Interface name must be 15 characters at most.')
-      .matches(/^\S+$/, 'Interface name can not contain spaces.'),
-  }),
-);
-
-export const yamlViewValidationSchema = Yup.object({
-  hosts: Yup.array<HostStaticNetworkConfig>().of(
-    Yup.object().shape({
-      networkYaml: networkYamlValidationSchema,
-      macInterfaceMap: macInterfaceMapValidationSchema,
+const macInterfaceMapValidationSchema = (t: TFunction) =>
+  Yup.array<MacInterfaceMap>().of(
+    Yup.object({
+      macAddress: macAddressValidationSchema(t)
+        .required('Required field')
+        .concat(getUniqueValidationSchema(getAllMacAddresses)),
+      logicalNicName: Yup.string()
+        .required('Required field')
+        .concat(getUniqueValidationSchema(getInterfaceNamesInCurrentHost))
+        .max(15, 'Interface name must be 15 characters at most.')
+        .matches(/^\S+$/, 'Interface name can not contain spaces.'),
     }),
-  ),
-});
+  );
+
+export const yamlViewValidationSchema = (t: TFunction) =>
+  Yup.object({
+    hosts: Yup.array<HostStaticNetworkConfig>().of(
+      Yup.object().shape({
+        networkYaml: networkYamlValidationSchema(t),
+        macInterfaceMap: macInterfaceMapValidationSchema(t),
+      }),
+    ),
+  });

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>

package/lib/ocm/components/clusterWizard/disconnected/OptionalConfigurationsStep.tsx

@@ -8,6 +8,7 @@ import {
   sshPublicKeyValidationSchema,
   pullSecretValidationSchema,
   getFormikErrorFields,
+  useTranslation,
 } from '../../../../common';
 import { Split, SplitItem, Grid, GridItem, Form, Content, Checkbox } from '@patternfly/react-core';
 import { useClusterWizardContext } from '../ClusterWizardContext';
@@ -44,6 +45,7 @@ const PullSecretSync: React.FC<{ pullSecret?: string }> = ({ pullSecret }) => {
 };
 
 const OptionalConfigurationsStep = () => {
+  const { t } = useTranslation();
   const pullSecret = usePullSecret() || '';
   const { clusterId } = useParams<{ clusterId: string }>();
   const [cluster, setCluster] = React.useState<Cluster | null>(null);
@@ -77,10 +79,10 @@ const OptionalConfigurationsStep = () => {
   const validationSchema = React.useMemo(
     () =>
       Yup.object<OptionalConfigurationsFormValues>().shape({
-        sshPublicKey: sshPublicKeyValidationSchema,
-        pullSecret: pullSecretValidationSchema,
+        sshPublicKey: sshPublicKeyValidationSchema(t),
+        pullSecret: pullSecretValidationSchema(t),
       }),
-    [],
+    [t],
   );
 
   const initialValues: OptionalConfigurationsFormValues = {

package/lib/ocm/components/clusters/ClusterStatus.tsx

@@ -1,15 +1,15 @@
 import React from 'react';
-import { t_global_color_status_success_default as okColor } from '@patternfly/react-tokens/dist/js/t_global_color_status_success_default';
 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 { FileAltIcon } from '@patternfly/react-icons/dist/js/icons/file-alt-icon';
 import { CheckCircleIcon } from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
 import { InProgressIcon } from '@patternfly/react-icons/dist/js/icons/in-progress-icon';
 import { BanIcon } from '@patternfly/react-icons/dist/js/icons/ban-icon';
-import { clusterStatusLabels, UiIcon, WithTestID } from '../../../common';
+import { clusterStatusLabels, WithTestID } from '../../../common';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 import { TFunction } from 'i18next';
 import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
+import { Icon } from '@patternfly/react-core';
 
 type ClusterStatusProps = {
   status: Cluster['status'];
@@ -24,25 +24,47 @@ type ClusterStatusIconProps = {
 export const ClusterStatusIcon: React.FC<ClusterStatusIconProps> = ({ status, ...extraProps }) => {
   switch (status) {
     case 'cancelled':
-      return <UiIcon size="sm" icon={<BanIcon {...extraProps} />} />;
+      return (
+        <Icon size="sm">
+          <BanIcon {...extraProps} />
+        </Icon>
+      );
     case 'insufficient':
     case 'pending-for-input':
     case 'ready':
-      return <UiIcon size="sm" icon={<FileAltIcon {...extraProps} />} />;
+      return (
+        <Icon size="sm">
+          <FileAltIcon {...extraProps} />
+        </Icon>
+      );
     case 'error':
-      return <UiIcon size="sm" status="danger" icon={<ExclamationCircleIcon {...extraProps} />} />;
+      return (
+        <Icon size="sm" status="danger">
+          <ExclamationCircleIcon {...extraProps} />
+        </Icon>
+      );
     case 'installed':
-      return <UiIcon size="sm" icon={<CheckCircleIcon color={okColor.value} {...extraProps} />} />;
+      return (
+        <Icon status="success" size="sm">
+          <CheckCircleIcon {...extraProps} />
+        </Icon>
+      );
     case 'installing-pending-user-action':
       return (
-        <UiIcon size="sm" status="warning" icon={<ExclamationTriangleIcon {...extraProps} />} />
+        <Icon size="sm" status="warning">
+          <ExclamationTriangleIcon {...extraProps} />
+        </Icon>
       );
 
     case 'preparing-for-installation':
     case 'installing':
     case 'finalizing':
     case 'adding-hosts':
-      return <UiIcon size="sm" icon={<InProgressIcon {...extraProps} />} />;
+      return (
+        <Icon size="sm">
+          <InProgressIcon {...extraProps} />
+        </Icon>
+      );
     default:
       return <></>;
   }

package/lib/ocm/components/featureSupportLevels/ReviewClusterFeatureSupportLevels.tsx

@@ -1,9 +1,7 @@
+import React from 'react';
 import { CheckCircleIcon } from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
 import { InfoCircleIcon } from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
-import React from 'react';
-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 { Content } from '@patternfly/react-core';
+import { Content, Icon } from '@patternfly/react-core';
 import {
   FeatureId,
   FeatureIdToSupportLevel,
@@ -13,7 +11,7 @@ import {
 import { TECH_SUPPORT_LEVEL_LINK } from '../../../common/config/docs_links';
 import ExternalLink from '../../../common/components/ui/ExternalLink';
 import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
-import { DetailItem, UiIcon } from '../../../common';
+import { DetailItem } from '../../../common';
 import { getLimitedFeatureSupportLevels } from '../../../common/components/newFeatureSupportLevels/utils';
 import { WithErrorBoundary } from '../../../common/components/ErrorHandling/WithErrorBoundary';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
@@ -90,13 +88,17 @@ export const LimitedSupportedCluster = ({
   <>
     {showVersionWarning && (
       <Content component="p">
-        <UiIcon size="sm" icon={<InfoCircleIcon color={infoColor.var} />} />
+        <Icon status="info" size="sm">
+          <InfoCircleIcon />
+        </Icon>
         &nbsp;The installed OpenShift version is not production-ready
       </Content>
     )}
     {Object.keys(clusterFeatureSupportLevels).length > 0 && (
       <>
-        <UiIcon size="sm" icon={<InfoCircleIcon color={infoColor.var} />} />
+        <Icon status="info" size="sm">
+          <InfoCircleIcon />
+        </Icon>
         &nbsp;Your cluster will be subject to support limitations because it includes:
         <Content component="ul">{getPreviewFeatureList(clusterFeatureSupportLevels)}</Content>
       </>
@@ -106,7 +108,9 @@ export const LimitedSupportedCluster = ({
 
 export const FullySupportedCluster = () => (
   <>
-    <CheckCircleIcon color={okColor.value} />
+    <Icon status="success">
+      <CheckCircleIcon />
+    </Icon>
     &nbsp;Your installed cluster will be fully supported
   </>
 );

package/lib/ocm/components/hosts/UpdateDay2ApiVipForm.tsx

@@ -9,13 +9,9 @@ import {
   ModalFooter,
 } from '@patternfly/react-core';
 import { Formik } from 'formik';
-import {
-  AlertFormikError,
-  day2ApiVipValidationSchema,
-  InputField,
-} from '../../../common/components/ui';
+import { AlertFormikError, InputField } from '../../../common/components/ui';
 import GridGap from '../../../common/components/ui/GridGap';
-import { StatusErrorType } from '../../../common';
+import { day2ApiVipValidationSchema, StatusErrorType } from '../../../common';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 
 export type UpdateDay2ApiVipFormProps = {
@@ -46,7 +42,7 @@ const UpdateDay2ApiVipForm: React.FC<UpdateDay2ApiVipFormProps> = ({
   const validationSchema = React.useMemo(
     () =>
       Yup.object().shape({
-        apiVip: day2ApiVipValidationSchema.required(t('ai:Required field')),
+        apiVip: day2ApiVipValidationSchema(t).required(t('ai:Required field')),
       }),
     [t],
   );

package/lib/ocm/components/ui/InfoLinkWithModal.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import {
   Button,
   ButtonVariant,
+  Icon,
   IconComponentProps,
   Modal,
   ModalBody,
@@ -10,7 +11,6 @@ import {
   ModalProps,
 } from '@patternfly/react-core';
 import { InfoCircleIcon } from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
-import { UiIcon } from '../../../common';
 
 export interface InfoLinkWithModalProps {
   linkText: string;
@@ -43,7 +43,9 @@ const InfoLinkWithModal = ({
       <Button id={linkId} variant={ButtonVariant.link} onClick={handleLinkClick} isInline>
         {!isInline && (
           <>
-            <UiIcon size={infoCircleSize} icon={<InfoCircleIcon />} />
+            <Icon size={infoCircleSize}>
+              <InfoCircleIcon />
+            </Icon>
             &nbsp;
           </>
         )}