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

package/lib/cim/components/helpers/versions.ts

@@ -61,48 +61,65 @@ export const isValidImageSet = (
   );
 };
 
+// Extracts major.minor version, strips any non-numeric prefix (e.g., "img4.18.55" → "4.18")
+const extractMajorMinor = (version: string): string => {
+  const versionWithoutPrefix = version.replace(/^[^\d]*/, '');
+  return versionWithoutPrefix.split('.').slice(0, 2).join('.');
+};
+
+// Converts a ClusterImageSet to an OpenshiftVersionOptionType
+const toVersionOption = (
+  clusterImageSet: ClusterImageSetK8sResource,
+): OpenshiftVersionOptionType => {
+  const version =
+    getVersionFromReleaseImage(clusterImageSet.spec?.releaseImage) ||
+    clusterImageSet.metadata?.name ||
+    '';
+  const cpuArch = getCPUArchFromReleaseImage(clusterImageSet.spec?.releaseImage);
+  return {
+    label: `OpenShift ${version}`,
+    version,
+    value: clusterImageSet.metadata?.name as string,
+    default: false,
+    // (rawagner) ACM does not have the warning so changing to 'production'
+    // supportLevel : getSupportLevelFromChannel(clusterImageSet.metadata?.labels?.channel)
+    supportLevel: 'production',
+    cpuArchitectures: cpuArch ? [cpuArch as CpuArchitecture] : undefined,
+  };
+};
+
+/**
+ * In case there are osImages specified on the AgentServiceConfig, we want to limit
+ * the availability in the dropdown to only versions that are listed there.
+ * Otherwise the installation fails.
+ */
+const hasMatchingOsImage = (
+  version: OpenshiftVersionOptionType,
+  osImageVersions: (string | undefined)[],
+): boolean => {
+  if (!osImageVersions.length) return true;
+  return osImageVersions.includes(extractMajorMinor(version.version));
+};
+
 export const getOCPVersions = (
   clusterImageSets: ClusterImageSetK8sResource[],
-  isNutanix?: boolean | undefined,
+  isNutanix?: boolean,
   osImages?: OsImage[],
   extended?: boolean,
 ): OpenshiftVersionOptionType[] => {
-  const ocpImageVersions = Array.from(
-    new Set(osImages?.map((osImage) => osImage.openshiftVersion)),
-  );
+  const architectures = isNutanix ? supportedNutanixPlatforms : undefined;
+  const osImageVersions = [...new Set(osImages?.map((img) => img.openshiftVersion))];
 
   const versions = clusterImageSets
-    .filter((clusterImageSet) =>
-      isValidImageSet(clusterImageSet, isNutanix ? supportedNutanixPlatforms : undefined, extended),
-    )
-    .map((clusterImageSet): OpenshiftVersionOptionType => {
-      const version = getVersionFromReleaseImage(clusterImageSet.spec?.releaseImage);
-      const cpuArch = getCPUArchFromReleaseImage(clusterImageSet.spec?.releaseImage);
-      return {
-        label: `OpenShift ${version ? version : (clusterImageSet.metadata?.name as string)}`,
-        version: version || clusterImageSet.metadata?.name || '',
-        value: clusterImageSet.metadata?.name as string,
-        default: false,
-        // (rawagner) ACM does not have the warning so changing to 'production'
-        supportLevel: 'production', // getSupportLevelFromChannel(clusterImageSet.metadata?.labels?.channel),
-        cpuArchitectures: cpuArch ? [cpuArch as CpuArchitecture] : undefined,
-      };
-    })
-    .filter((ocpVersion) => {
-      const ver = ocpVersion.version.split('.').slice(0, 2).join('.');
-      return !!ocpImageVersions.length ? ocpImageVersions.includes(ver) : true;
-    })
-    .sort(
-      (versionA, versionB) => /* descending */ -1 * versionA.label.localeCompare(versionB.label),
-    );
-
-  if (versions.length) {
-    // make sure that the pre-selected one is the first-one after sorting
-    versions[0].default = true;
-  }
+    .filter((clusterImageSet) => isValidImageSet(clusterImageSet, architectures, extended))
+    .map(toVersionOption)
+    .filter((v) => hasMatchingOsImage(v, osImageVersions))
+    .sort((a, b) => b.label.localeCompare(a.label));
+
+  // Mark first version as the default selection
+  versions[0] && (versions[0].default = true);
 
-  const deduped = uniqBy(versions, (v) => v.version);
-  return deduped;
+  return uniqBy(versions, (v) => v.version);
 };
 
 export const getSelectedVersion = (

package/lib/cim/components/modals/CimConfiguration/CimConfigurationFormFields.tsx

@@ -33,7 +33,6 @@ export const CimConfigurationFormFields = ({
   setConfigureLoadBalancerInitial,
 }: CimConfigurationFormFieldsProps) => {
   const { t } = useTranslation();
-
   const { setFieldValue, values } = useFormikContext<CimConfigurationValues>();
 
   React.useEffect(
@@ -223,8 +222,7 @@ export const CimConfigurationFormFields = ({
 
         <StackItem>
           <CheckboxField
-            name={'addCiscoIntersightUrl'}
-            isDisabled={isEdit}
+            name={'addCiscoIntersightURL'}
             label={
               <>
                 {t('ai:Configure custom URL for Cisco Intersight')}{' '}
@@ -240,14 +238,18 @@ export const CimConfigurationFormFields = ({
                 </PopoverIcon>
               </>
             }
+            onChange={(checked) => {
+              if (!checked) {
+                setFieldValue('ciscoIntersightURL', '', false);
+              }
+            }}
           />
 
-          {values.addCiscoIntersightUrl && (
+          {values.addCiscoIntersightURL && (
             <InputField
               name={'ciscoIntersightURL'}
               label={t('ai:Cisco Intersight URL')}
               isRequired
-              isDisabled={isEdit}
               placeholder="https://www.intersight.com/an/workflow/workflow-definitions/execute/AddServersFromISO"
               helperText={t('ai:Provide the complete URL, including the protocol and parameters.')}
             />

package/lib/cim/components/modals/CimConfiguration/CimConfigurationModal.tsx

@@ -62,7 +62,7 @@ export const CimConfigurationModal: React.FC<CimConfigurationModalProps> = ({
         fsVolSizeGiB: values.fsVolSize,
         imgVolSizeGiB: values.imgVolSize,
         configureLoadBalancer: values.configureLoadBalancer,
-        ciscoIntersightURL: values.addCiscoIntersightUrl ? values.ciscoIntersightURL : undefined,
+        ciscoIntersightURL: values.addCiscoIntersightURL ? values.ciscoIntersightURL : undefined,
       })
     ) {
       // successfully persisted
@@ -95,16 +95,23 @@ export const CimConfigurationModal: React.FC<CimConfigurationModalProps> = ({
       agentServiceConfig?.spec?.imageStorage?.resources?.requests?.storage,
     ),
     configureLoadBalancer: platform === 'AWS',
-    addCiscoIntersightUrl: !!agentServiceConfig?.metadata?.annotations?.['ciscoIntersightURL'],
+    addCiscoIntersightURL: !!agentServiceConfig?.metadata?.annotations?.['ciscoIntersightURL'],
     ciscoIntersightURL: agentServiceConfig?.metadata?.annotations?.['ciscoIntersightURL'] || '',
   };
 
   const validationSchema = Yup.object<CimConfigurationValues>({
-    dbVolSize: Yup.number().min(MIN_DB_VOL_SIZE, t('ai:Minimal value is 1Gi')).required(),
-    fsVolSize: Yup.number().min(MIN_FS_VOL_SIZE, t('ai:Minimal value is 1Gi')).required(),
-    imgVolSize: Yup.number().min(MIN_IMG_VOL_SIZE, t('ai:Minimal value is 10Gi')).required(),
+    dbVolSize: Yup.number()
+      .min(MIN_DB_VOL_SIZE, t('ai:Minimal value is 1Gi'))
+      .required(t('ai:Required field')),
+    fsVolSize: Yup.number()
+      .min(MIN_FS_VOL_SIZE, t('ai:Minimal value is 1Gi'))
+      .required(t('ai:Required field')),
+    imgVolSize: Yup.number()
+      .min(MIN_IMG_VOL_SIZE, t('ai:Minimal value is 10Gi'))
+      .required(t('ai:Required field')),
     configureLoadBalancer: Yup.boolean(),
-    ciscoIntersightURL: Yup.string().when('addCiscoIntersightUrl', {
+    addCiscoIntersightURL: Yup.boolean(),
+    ciscoIntersightURL: Yup.string().when('addCiscoIntersightURL', {
       is: true,
       then: (schema) =>
         schema

package/lib/cim/components/modals/CimConfiguration/persist.ts

@@ -13,11 +13,13 @@ import {
   AgentServiceConfigK8sResource,
   AgentServiceConfigModel,
   IngressControllerModel,
+  K8sPatch,
   ProvisioningModel,
   RouteK8sResource,
   RouteModel,
 } from '../../../types';
 import { LOCAL_STORAGE_ID_LAST_UPDATE_TIMESTAMP } from './utils';
+import { appendPatch } from '../../../utils';
 
 export type SetErrorFuncType = ({
   title,
@@ -352,6 +354,15 @@ export const onEnableCIM = async ({
     ) {
       return false;
     }
+  } else {
+    const patches = [] as K8sPatch;
+    appendPatch(
+      patches,
+      '/metadata/annotations/ciscoIntersightURL',
+      ciscoIntersightURL,
+      agentServiceConfig.metadata?.annotations?.['ciscoIntersightURL'],
+    );
+    await k8sPatch({ model: AgentServiceConfigModel, resource: agentServiceConfig, data: patches });
   }
 
   // see isCIMConfigProgressing()

package/lib/cim/components/modals/CimConfiguration/types.ts

@@ -5,7 +5,7 @@ export type CimConfigurationValues = {
   fsVolSize: number;
   imgVolSize: number;
   configureLoadBalancer: boolean;
-  addCiscoIntersightUrl: boolean;
+  addCiscoIntersightURL: boolean;
   ciscoIntersightURL: string;
 };
 

package/lib/cim/components/modals/EditProxyModal.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import * as Yup from 'yup';
+import { TFunction } from 'i18next';
 import {
   Alert,
   Button,
@@ -25,20 +26,22 @@ import {
 import { getErrorMessage } from '../../../common/utils';
 import { getWarningMessage } from './utils';
 
-const validationSchema = () =>
+const validationSchema = (t: TFunction) =>
   Yup.lazy((values: ProxyFieldsType) =>
     Yup.object<ProxyFieldsType>().shape({
       httpProxy: httpProxyValidationSchema({
         values,
         pairValueName: 'httpsProxy',
         allowEmpty: true,
+        t,
       }),
       httpsProxy: httpProxyValidationSchema({
         values,
         pairValueName: 'httpProxy',
         allowEmpty: true,
+        t,
       }),
-      noProxy: noProxyValidationSchema,
+      noProxy: noProxyValidationSchema(t),
     }),
   );
 
@@ -91,7 +94,7 @@ const EditProxyModal: React.FC<EditProxyModalProps> = ({
           noProxy: infraEnv.spec?.proxy?.noProxy,
           enableProxy,
         }}
-        validationSchema={validationSchema}
+        validationSchema={validationSchema(t)}
         onSubmit={async (values: ProxyFieldsType) => {
           setError(undefined);
           try {

package/lib/cim/components/modals/EditPullSecretModal.tsx

@@ -23,7 +23,7 @@ import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 
 const validationSchema = (t: TFunction) =>
   Yup.object({
-    pullSecret: pullSecretValidationSchema.required(t('ai:Pull secret is a required field.')),
+    pullSecret: pullSecretValidationSchema(t).required(t('ai:Pull secret is a required field.')),
   });
 
 type EditPullSecretFormProps = {

package/lib/cim/components/modals/EditSSHKeyModal.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import * as Yup from 'yup';
+import { TFunction } from 'i18next';
 import {
   Alert,
   Button,
@@ -20,11 +21,12 @@ import { EditSSHKeyFormikValues } from './types';
 import { getWarningMessage } from './utils';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 
-const validationSchema = Yup.object({
-  sshPublicKey: sshPublicKeyValidationSchema.required(
-    'An SSH key is required to debug hosts as they register.',
-  ),
-});
+const validationSchema = (t: TFunction) =>
+  Yup.object({
+    sshPublicKey: sshPublicKeyValidationSchema(t).required(
+      t('ai:An SSH key is required to debug hosts as they register.'),
+    ),
+  });
 
 export type EditSSHKeyModalProps = {
   isOpen: boolean;
@@ -61,7 +63,7 @@ const EditSSHKeyModal: React.FC<EditSSHKeyModalProps> = ({
         initialValues={{
           sshPublicKey: infraEnv.spec?.sshAuthorizedKey || '',
         }}
-        validationSchema={validationSchema}
+        validationSchema={validationSchema(t)}
         onSubmit={async (values) => {
           try {
             await onSubmit(values, infraEnv);

package/lib/cim/components/modals/MassApproveAgentModal.tsx

@@ -27,14 +27,15 @@ type ApproveTableRowProps = {
   agent?: AgentK8sResource;
 };
 
-const ApproveTableRow: React.FC<ApproveTableRowProps> = ({ agent, children }) => (
-  <div className={agent?.spec.approved ? 'pf-v6-u-color-200' : undefined}>{children}</div>
-);
+const ApproveTableRow: React.FC<React.PropsWithChildren<ApproveTableRowProps>> = ({
+  agent,
+  children,
+}) => <div className={agent?.spec.approved ? 'pf-v6-u-color-200' : undefined}>{children}</div>;
 
 const hostnameColumn = (agents: AgentK8sResource[], t: TFunction): TableRow<Host> => {
   return {
     header: {
-      title: t('ai:Hostname'),
+      title: t<string>('ai:Hostname'),
       props: {
         id: 'col-header-hostname', // ACM jest tests require id over testId
       },
@@ -59,7 +60,7 @@ const statusColumn = (
 ): TableRow<Host> => {
   return {
     header: {
-      title: t('ai:Status'),
+      title: t<string>('ai:Status'),
       props: {
         id: 'col-header-status', // ACM jest tests require id over testId
       },

package/lib/cim/components/modals/MassDeleteAgentModal.tsx

@@ -1,8 +1,10 @@
 import * as React from 'react';
-import { Button, Flex, FlexItem, Popover } from '@patternfly/react-core';
+import { TFunction } from 'i18next';
+import { Button, Flex, FlexItem, Icon, Popover } from '@patternfly/react-core';
 import { InfoCircleIcon } from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
 import { Link } from 'react-router-dom-v5-compat';
-import { t_global_icon_color_status_info_default as blueInfoColor } from '@patternfly/react-tokens/dist/js/t_global_icon_color_status_info_default';
+
+import { Host } from '@openshift-assisted/types/assisted-installer-service';
 import {
   getHostname,
   getInventory,
@@ -23,14 +25,12 @@ import BMHStatus from '../Agent/BMHStatus';
 import { getBMHStatus, getAgentStatus } from '../helpers';
 import { usePagination } from '../../../common/components/hosts/usePagination';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
-import { TFunction } from 'i18next';
-import { Host } from '@openshift-assisted/types/assisted-installer-service';
 import { agentStatus, bmhStatus } from '../helpers/agentStatus';
 
 const hostnameColumn = (agents: AgentK8sResource[], t: TFunction): TableRow<Host> => {
   return {
     header: {
-      title: t('ai:Hostname'),
+      title: t<string>('ai:Hostname'),
       props: {
         id: 'col-header-hostname', // ACM jest tests require id over testId
       },
@@ -63,7 +63,7 @@ const statusColumn = (
   const bmhStatuses = bmhStatus(t);
   return {
     header: {
-      title: t('ai:Status'),
+      title: t<string>('ai:Status'),
       props: {
         id: 'col-header-status',
       },
@@ -85,22 +85,29 @@ const statusColumn = (
             <FlexItem align={{ default: 'alignRight' }}>
               <Popover
                 aria-label={t('ai:Cluster popover')}
-                headerContent={<div>{t('ai:Cannot be deleted')}</div>}
+                headerContent={<div>{t<string>('ai:Cannot be deleted')}</div>}
                 bodyContent={
                   <div>
-                    {t(
+                    {t<string>(
                       'ai:Hosts that are bound to a cluster cannot be deleted. Remove the host from the cluster and try again.',
                     )}
                   </div>
                 }
                 footerContent={
                   <Link to={`/multicloud/infrastructure/clusters/details/${clusterName}/`}>
-                    {t('ai:Go to cluster {{clusterName}}', { clusterName })}
+                    {t<string>('ai:Go to cluster {{clusterName}}', { clusterName })}
                   </Link>
                 }
               >
-                <Button variant="link" icon={<InfoCircleIcon color={blueInfoColor.value} />}>
-                  {t('ai:Cannot be deleted')}
+                <Button
+                  variant="link"
+                  icon={
+                    <Icon status="info">
+                      <InfoCircleIcon />
+                    </Icon>
+                  }
+                >
+                  {t<string>('ai:Cannot be deleted')}
                 </Button>
               </Popover>
             </FlexItem>

package/lib/common/api/assisted-service/ClustersAPI.ts

@@ -245,12 +245,6 @@ const ClustersAPI = {
       headers: { 'Content-Type': 'application/json' },
     });
   },
-  registerDisconnected(params: { name: string; openshiftVersion: string }) {
-    return client.post<Cluster, AxiosResponse<Cluster>, { name: string; openshiftVersion: string }>(
-      `${ClustersAPI.makeBaseURI()}disconnected`,
-      params,
-    );
-  },
 };
 
 export default ClustersAPI;

package/lib/common/components/AddHosts/AddHostsContext.tsx

@@ -10,7 +10,7 @@ export type AddHostsContextType = {
 
 export const AddHostsContext = React.createContext<AddHostsContextType>({});
 
-export const AddHostsContextProvider: React.FC<AddHostsContextType> = ({
+export const AddHostsContextProvider: React.FC<React.PropsWithChildren<AddHostsContextType>> = ({
   cluster,
   resetCluster,
   ocpConsoleUrl,

package/lib/common/components/AlertsContextProvider.tsx

@@ -18,7 +18,7 @@ export type AlertsContextType = {
 
 const AlertsContext = React.createContext<AlertsContextType | null>(null);
 
-export const AlertsContextProvider: React.FC = ({ children }) => {
+export const AlertsContextProvider: React.FC<React.PropsWithChildren> = ({ children }) => {
   const [alerts, dispatch] = React.useReducer(alertsReducer, []);
   const context = {
     alerts,

package/lib/common/components/clusterConfiguration/DiscoveryImageConfigForm.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import * as Yup from 'yup';
+import { TFunction } from 'i18next';
 import {
   Button,
   Form,
@@ -17,12 +18,12 @@ import {
   ImageType,
   Proxy,
 } from '@openshift-assisted/types/assisted-installer-service';
+import { AlertFormikError } from '../../../common/components/ui';
 import {
-  AlertFormikError,
   httpProxyValidationSchema,
   noProxyValidationSchema,
   sshPublicKeyValidationSchema,
-} from '../../../common/components/ui';
+} from '../../validationSchemas';
 import { ProxyFieldsType, StatusErrorType } from '../../types';
 import ProxyFields from './ProxyFields';
 import UploadSSH from './UploadSSH';
@@ -55,13 +56,13 @@ export const StaticIPInfo = ({ docVersion }: { docVersion?: string }) => {
 
 export type DiscoveryImageFormValues = ImageCreateParams & ProxyFieldsType;
 
-const getValidationSchema = (allowEmpty: boolean) =>
+const getValidationSchema = (allowEmpty: boolean, t: TFunction) =>
   Yup.lazy((values: DiscoveryImageFormValues) =>
     Yup.object<DiscoveryImageFormValues>().shape({
-      sshPublicKey: sshPublicKeyValidationSchema,
-      httpProxy: httpProxyValidationSchema({ values, pairValueName: 'httpsProxy', allowEmpty }),
-      httpsProxy: httpProxyValidationSchema({ values, pairValueName: 'httpProxy', allowEmpty }), // share the schema, httpS is currently not supported
-      noProxy: noProxyValidationSchema,
+      sshPublicKey: sshPublicKeyValidationSchema(t),
+      httpProxy: httpProxyValidationSchema({ values, pairValueName: 'httpsProxy', allowEmpty, t }),
+      httpsProxy: httpProxyValidationSchema({ values, pairValueName: 'httpProxy', allowEmpty, t }), // share the schema, httpS is currently not supported
+      noProxy: noProxyValidationSchema(t),
     }),
   );
 
@@ -108,7 +109,7 @@ export const DiscoveryImageConfigForm: React.FC<DiscoveryImageConfigFormProps> =
     <Formik
       initialValues={initialValues}
       initialStatus={{ error: null }}
-      validationSchema={getValidationSchema(!!allowEmpty)}
+      validationSchema={getValidationSchema(!!allowEmpty, t)}
       onSubmit={handleSubmit}
     >
       {({ submitForm, isSubmitting, status }) => {

package/lib/common/components/clusterConfiguration/DiscoveryTroubleshootingModal.tsx

@@ -14,9 +14,10 @@ import {
   ModalHeader,
   ModalFooter,
   ModalBody,
+  Icon,
 } from '@patternfly/react-core';
 import { InfoCircleIcon } from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
-import { PrismCode, UiIcon } from '../ui';
+import { PrismCode } from '../ui';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
 import { Trans } from 'react-i18next';
 import { saveAs } from 'file-saver';
@@ -207,7 +208,9 @@ export const HostsNotShowingLink = ({
     <Button variant={ButtonVariant.link} onClick={() => setDiscoveryHintModalOpen(true)} isInline>
       {!isInline && (
         <>
-          <UiIcon size="sm" icon={<InfoCircleIcon />} />
+          <Icon size="sm">
+            <InfoCircleIcon />
+          </Icon>
           &nbsp;
         </>
       )}

package/lib/common/components/clusterConfiguration/ProxyFields.tsx

@@ -16,6 +16,9 @@ export const ProxyInputFields = () => {
     }
   };
   const { t } = useTranslation();
+  const hasHttp = !!values.httpProxy?.trim();
+  const hasHttps = !!values.httpsProxy?.trim();
+
   return (
     <Grid hasGutter>
       <InputField
@@ -31,6 +34,7 @@ export const ProxyInputFields = () => {
         }
         name="httpProxy"
         placeholder="http://<user>:<password>@<ipaddr>:<port>"
+        isRequired={values.enableProxy && !hasHttps}
         helperText={
           <div>
             <Trans
@@ -54,6 +58,7 @@ export const ProxyInputFields = () => {
         }
         name="httpsProxy"
         placeholder="http://<user>:<password>@<ipaddr>:<port>"
+        isRequired={values.enableProxy && !hasHttp}
         helperText={
           <div>
             <Trans

package/lib/common/components/clusterConfiguration/SecurityFields.tsx

@@ -16,7 +16,7 @@ export const SshPublicKeyHelperText: React.FC<{
   const { t } = useTranslation();
   return (
     <HelperText id={fieldId}>
-      <HelperTextItem data-testid="ssh-public-key-helper-text">
+      <HelperTextItem>
         {allowMultipleKeys
           ? t(
               'ai:Paste the content of public SSH keys you want to use to connect to the hosts into this field. Multiple keys can be separated by newlines.',

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: