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

package/lib/cim/components/YamlPreview/YamlPreview.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
-import MonacoEditor from 'react-monaco-editor';
-import Measure from 'react-measure';
+import MonacoEditor, { EditorDidMount, EditorWillMount } from 'react-monaco-editor';
+import { editor } from 'monaco-editor';
+import useResizeObserver from '@react-hook/resize-observer';
 import {
   Alert,
   AlertActionCloseButton,
@@ -13,11 +14,11 @@ import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 
 const options = { readOnly: true, scrollBeyondLastLine: false };
 
-const theme = {
+const theme: editor.IStandaloneThemeData = {
   base: 'vs',
   inherit: true,
   rules: [
-    { background: 'e0e0e0' },
+    { token: '', background: 'e0e0e0' },
     { token: 'number', foreground: '000000' },
     { token: 'type', foreground: '000000' },
     { token: 'string', foreground: '000000' },
@@ -37,19 +38,27 @@ type YamlPreviewProps = {
   loading: boolean;
 };
 
-const YamlPreview: React.FC<YamlPreviewProps> = ({ children, code, setPreviewOpen, loading }) => {
-  const editorDidMount = React.useCallback((editor) => {
-    /* eslint-disable */
+const YamlPreview: React.FC<React.PropsWithChildren<YamlPreviewProps>> = ({
+  children,
+  code,
+  setPreviewOpen,
+  loading,
+}) => {
+  const editorDidMount = React.useCallback<EditorDidMount>((editor) => {
     editor.layout();
     editor.focus();
-    /* eslint-enable */
   }, []);
 
-  const editorWillMount = React.useCallback((monaco) => {
-    // eslint-disable-next-line
+  const editorWillMount = React.useCallback<EditorWillMount>((monaco) => {
     monaco.editor.defineTheme('acm-console', theme);
   }, []);
   const { t } = useTranslation();
+  const editorRef = React.useRef<HTMLDivElement>(null);
+  const [editorHeight, setEditorHeight] = React.useState<number>();
+  useResizeObserver(editorRef, (entry) => {
+    setEditorHeight(entry.contentRect.height);
+  });
+
   return loading ? (
     <LoadingState content="Loading resources" />
   ) : (
@@ -76,23 +85,19 @@ const YamlPreview: React.FC<YamlPreviewProps> = ({ children, code, setPreviewOpe
         </div>
       </StackItem>
       <StackItem isFilled>
-        <Measure bounds>
-          {({ measureRef, contentRect }) => (
-            <div ref={measureRef} style={{ height: '100%' }}>
-              {!!contentRect.bounds?.height && (
-                <MonacoEditor
-                  language="yaml"
-                  theme="acm-console"
-                  height={contentRect.bounds?.height}
-                  value={code}
-                  options={options}
-                  editorDidMount={editorDidMount}
-                  editorWillMount={editorWillMount}
-                />
-              )}
-            </div>
+        <div ref={editorRef} style={{ height: '100%' }}>
+          {!!editorHeight && (
+            <MonacoEditor
+              language="yaml"
+              theme="acm-console"
+              height={editorHeight}
+              value={code}
+              options={options}
+              editorDidMount={editorDidMount}
+              editorWillMount={editorWillMount}
+            />
           )}
-        </Measure>
+        </div>
       </StackItem>
     </Stack>
   );

package/lib/cim/components/helpers/agentStatus.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
+import { TFunction } from 'i18next';
+import { Icon } from '@patternfly/react-core';
 import { ConnectedIcon } from '@patternfly/react-icons/dist/js/icons/connected-icon';
 import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-circle-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 { hostStatus } from '../../../common';
 import { HostStatus } from '../../../common/components/hosts/types';
-import { TFunction } from 'i18next';
 
 export const bmhStatus = (t: TFunction): HostStatus<string> => ({
   'bmh-error': {
@@ -68,7 +68,11 @@ export const agentStatus = (t: TFunction): HostStatus<string> => ({
   specSyncErr: {
     key: 'specSyncErr',
     title: t('ai:Sync error'),
-    icon: <ExclamationCircleIcon color={dangerColor.value} />,
+    icon: (
+      <Icon status="danger">
+        <ExclamationCircleIcon />
+      </Icon>
+    ),
     category: 'Discovery related',
   },
 });

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,7 +95,7 @@ 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'] || '',
   };
 
@@ -110,7 +110,8 @@ export const CimConfigurationModal: React.FC<CimConfigurationModalProps> = ({
       .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/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/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:

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

@@ -1,8 +1,10 @@
 import React from 'react';
 import { Content } from '@patternfly/react-core';
 
-const ClusterWizardStepHeader: React.FC = ({ children }) => (
-  <Content component="h2">{children}</Content>
+const ClusterWizardStepHeader: React.FC<React.PropsWithChildren> = ({ children }) => (
+  <Content data-testid="step-header" component="h2">
+    {children}
+  </Content>
 );
 
 export default ClusterWizardStepHeader;

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/networkingSteps/NetworkTypeControlGroup.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Split, SplitItem, Tooltip, FormGroup } from '@patternfly/react-core';
 import { RadioField } from '../../ui/formik';
 import { PopoverIcon } from '../../../components/ui';
-import { NETWORK_TYPE_OVN, NETWORK_TYPE_SDN } from '../../../config';
+import { NETWORK_TYPE_OVN, NETWORK_TYPE_SDN } from '../../../types/networkType';
 import { useTranslation } from '../../../hooks/use-translation-wrapper';
 
 const GROUP_NAME = 'networkType';