@openshift-assisted/ui-lib 2.16.5-cim → 2.17.0-cim

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

@@ -11,14 +11,19 @@ import { useTranslation } from '../../hooks/use-translation-wrapper';
 
 export const SshPublicKeyHelperText: React.FC<{
   fieldId?: string;
-}> = ({ fieldId = 'sshPublicKey' }) => {
+  allowMultipleKeys?: boolean;
+}> = ({ fieldId = 'sshPublicKey', allowMultipleKeys = false }) => {
   const { t } = useTranslation();
   return (
     <HelperText id={fieldId}>
-      <HelperTextItem>
-        {t(
-          'ai:Paste the content of a public ssh key you want to use to connect to the hosts into this field.',
-        )}{' '}
+      <HelperTextItem data-testid="ssh-public-key-helper-text">
+        {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.',
+            )
+          : t(
+              'ai:Paste the content of a public SSH key you want to use to connect to the hosts into this field.',
+            )}{' '}
         <ExternalLink href={SSH_GENERATION_DOC_LINK}>{t('ai:Learn more')}</ExternalLink>
       </HelperTextItem>
     </HelperText>
@@ -29,12 +34,14 @@ interface SecurityFieldsFieldsProps {
   clusterSshKey: Cluster['sshPublicKey'];
   imageSshKey?: Cluster['imageInfo']['sshPublicKey'];
   isDisabled?: boolean;
+  allowMultipleKeys?: boolean;
 }
 
 const SecurityFields = ({
   clusterSshKey,
   imageSshKey,
   isDisabled = false,
+  allowMultipleKeys = false,
 }: SecurityFieldsFieldsProps) => {
   //shareSshKey shouldn't response to changes. imageSshKey stays the same, there's a loading state while it's requested
   //clusterSshKey updating causes the textarea to disappear when the user clears it to edit it
@@ -77,7 +84,7 @@ const SecurityFields = ({
         <RenderIf condition={!shareSshKey}>
           <TextAreaField
             name="sshPublicKey"
-            helperText={<SshPublicKeyHelperText />}
+            helperText={<SshPublicKeyHelperText allowMultipleKeys={allowMultipleKeys} />}
             onBlur={handleSshKeyBlur}
             isDisabled={isDisabled}
           />

package/lib/common/components/clusterConfiguration/utils.test.ts

@@ -0,0 +1,275 @@
+import { test, describe, expect } from 'vitest';
+import { isDualStack } from './utils';
+import {
+  MachineNetwork,
+  ClusterNetwork,
+  ServiceNetwork,
+} from '@openshift-assisted/types/assisted-installer-service';
+
+describe('isDualStack', () => {
+  const createMachineNetwork = (cidr: string): MachineNetwork => ({ cidr, clusterId: 'test' });
+  const createClusterNetwork = (cidr: string, hostPrefix: number): ClusterNetwork => ({
+    cidr,
+    hostPrefix,
+    clusterId: 'test',
+  });
+  const createServiceNetwork = (cidr: string): ServiceNetwork => ({ cidr, clusterId: 'test' });
+
+  describe('OCP < 4.12 (legacy behavior)', () => {
+    test('returns true for valid dual stack with IPv4 primary', () => {
+      const result = isDualStack({
+        machineNetworks: [
+          createMachineNetwork('192.168.1.0/24'),
+          createMachineNetwork('2001:db8::/64'),
+        ],
+        clusterNetworks: [
+          createClusterNetwork('10.128.0.0/14', 23),
+          createClusterNetwork('fd01::/48', 64),
+        ],
+        serviceNetworks: [
+          createServiceNetwork('172.30.0.0/16'),
+          createServiceNetwork('fd02::/112'),
+        ],
+        openshiftVersion: '4.11',
+      });
+
+      expect(result).toBe(true);
+    });
+
+    test('returns false for IPv6 primary in OCP < 4.12', () => {
+      const result = isDualStack({
+        machineNetworks: [
+          createMachineNetwork('2001:db8::/64'),
+          createMachineNetwork('192.168.1.0/24'),
+        ],
+        clusterNetworks: [
+          createClusterNetwork('fd01::/48', 64),
+          createClusterNetwork('10.128.0.0/14', 23),
+        ],
+        serviceNetworks: [
+          createServiceNetwork('fd02::/112'),
+          createServiceNetwork('172.30.0.0/16'),
+        ],
+        openshiftVersion: '4.11',
+      });
+
+      expect(result).toBe(false);
+    });
+
+    test('returns false for single stack', () => {
+      const result = isDualStack({
+        machineNetworks: [createMachineNetwork('192.168.1.0/24')],
+        clusterNetworks: [createClusterNetwork('10.128.0.0/14', 23)],
+        serviceNetworks: [createServiceNetwork('172.30.0.0/16')],
+        openshiftVersion: '4.11',
+      });
+
+      expect(result).toBe(false);
+    });
+
+    test('returns false for empty networks', () => {
+      const result = isDualStack({
+        machineNetworks: [],
+        clusterNetworks: [],
+        serviceNetworks: [],
+        openshiftVersion: '4.11',
+      });
+
+      expect(result).toBe(false);
+    });
+  });
+
+  describe('OCP >= 4.12 (new behavior)', () => {
+    test('returns true for IPv4 primary and IPv6 secondary', () => {
+      const result = isDualStack({
+        machineNetworks: [
+          createMachineNetwork('192.168.1.0/24'),
+          createMachineNetwork('2001:db8::/64'),
+        ],
+        clusterNetworks: [
+          createClusterNetwork('10.128.0.0/14', 23),
+          createClusterNetwork('fd01::/48', 64),
+        ],
+        serviceNetworks: [
+          createServiceNetwork('172.30.0.0/16'),
+          createServiceNetwork('fd02::/112'),
+        ],
+        openshiftVersion: '4.12',
+      });
+
+      expect(result).toBe(true);
+    });
+
+    test('returns true for IPv6 primary and IPv4 secondary', () => {
+      const result = isDualStack({
+        machineNetworks: [
+          createMachineNetwork('2001:db8::/64'),
+          createMachineNetwork('192.168.1.0/24'),
+        ],
+        clusterNetworks: [
+          createClusterNetwork('fd01::/48', 64),
+          createClusterNetwork('10.128.0.0/14', 23),
+        ],
+        serviceNetworks: [
+          createServiceNetwork('fd02::/112'),
+          createServiceNetwork('172.30.0.0/16'),
+        ],
+        openshiftVersion: '4.12',
+      });
+
+      expect(result).toBe(true);
+    });
+
+    test('returns false for IPv6 primary and IPv6 secondary (not dual-stack)', () => {
+      const result = isDualStack({
+        machineNetworks: [
+          createMachineNetwork('2001:db8::/64'),
+          createMachineNetwork('2001:db9::/64'),
+        ],
+        clusterNetworks: [
+          createClusterNetwork('fd01::/48', 64),
+          createClusterNetwork('fd02::/48', 64),
+        ],
+        serviceNetworks: [createServiceNetwork('fd03::/112'), createServiceNetwork('fd04::/112')],
+        openshiftVersion: '4.12',
+      });
+
+      expect(result).toBe(false);
+    });
+
+    test('returns false for IPv4 primary and IPv4 secondary (not dual-stack)', () => {
+      const result = isDualStack({
+        machineNetworks: [
+          createMachineNetwork('192.168.1.0/24'),
+          createMachineNetwork('10.0.0.0/24'),
+        ],
+        clusterNetworks: [
+          createClusterNetwork('10.128.0.0/14', 23),
+          createClusterNetwork('172.16.0.0/14', 23),
+        ],
+        serviceNetworks: [
+          createServiceNetwork('172.30.0.0/16'),
+          createServiceNetwork('172.31.0.0/16'),
+        ],
+        openshiftVersion: '4.12',
+      });
+
+      expect(result).toBe(false);
+    });
+
+    test('returns false for single stack', () => {
+      const result = isDualStack({
+        machineNetworks: [createMachineNetwork('192.168.1.0/24')],
+        clusterNetworks: [createClusterNetwork('10.128.0.0/14', 23)],
+        serviceNetworks: [createServiceNetwork('172.30.0.0/16')],
+        openshiftVersion: '4.12',
+      });
+
+      expect(result).toBe(false);
+    });
+
+    test('returns false if any network type is not dual stack', () => {
+      const result = isDualStack({
+        machineNetworks: [
+          createMachineNetwork('192.168.1.0/24'),
+          createMachineNetwork('2001:db8::/64'),
+        ],
+        clusterNetworks: [createClusterNetwork('10.128.0.0/14', 23)], // Single stack
+        serviceNetworks: [
+          createServiceNetwork('172.30.0.0/16'),
+          createServiceNetwork('fd02::/112'),
+        ],
+        openshiftVersion: '4.12',
+      });
+
+      expect(result).toBe(false);
+    });
+  });
+
+  describe('no version specified (defaults to legacy behavior)', () => {
+    test('returns true for IPv4 primary and IPv6 secondary', () => {
+      const result = isDualStack({
+        machineNetworks: [
+          createMachineNetwork('192.168.1.0/24'),
+          createMachineNetwork('2001:db8::/64'),
+        ],
+        clusterNetworks: [
+          createClusterNetwork('10.128.0.0/14', 23),
+          createClusterNetwork('fd01::/48', 64),
+        ],
+        serviceNetworks: [
+          createServiceNetwork('172.30.0.0/16'),
+          createServiceNetwork('fd02::/112'),
+        ],
+      });
+
+      expect(result).toBe(true);
+    });
+
+    test('returns false for IPv6 primary when no version specified', () => {
+      const result = isDualStack({
+        machineNetworks: [
+          createMachineNetwork('2001:db8::/64'),
+          createMachineNetwork('192.168.1.0/24'),
+        ],
+        clusterNetworks: [
+          createClusterNetwork('fd01::/48', 64),
+          createClusterNetwork('10.128.0.0/14', 23),
+        ],
+        serviceNetworks: [
+          createServiceNetwork('fd02::/112'),
+          createServiceNetwork('172.30.0.0/16'),
+        ],
+      });
+
+      expect(result).toBe(false);
+    });
+  });
+
+  describe('edge cases', () => {
+    test('handles undefined networks', () => {
+      const result = isDualStack({
+        machineNetworks: undefined,
+        clusterNetworks: undefined,
+        serviceNetworks: undefined,
+        openshiftVersion: '4.12',
+      });
+
+      expect(result).toBe(false);
+    });
+
+    test('handles networks with empty CIDRs', () => {
+      const result = isDualStack({
+        machineNetworks: [
+          { cidr: '', clusterId: 'test' },
+          { cidr: '', clusterId: 'test' },
+        ],
+        clusterNetworks: [
+          { cidr: '', hostPrefix: 23, clusterId: 'test' },
+          { cidr: '', hostPrefix: 64, clusterId: 'test' },
+        ],
+        serviceNetworks: [
+          { cidr: '', clusterId: 'test' },
+          { cidr: '', clusterId: 'test' },
+        ],
+        openshiftVersion: '4.12',
+      });
+
+      expect(result).toBe(false);
+    });
+
+    test('handles invalid CIDRs', () => {
+      const result = isDualStack({
+        machineNetworks: [createMachineNetwork('invalid'), createMachineNetwork('also-invalid')],
+        clusterNetworks: [
+          createClusterNetwork('invalid', 23),
+          createClusterNetwork('also-invalid', 64),
+        ],
+        serviceNetworks: [createServiceNetwork('invalid'), createServiceNetwork('also-invalid')],
+        openshiftVersion: '4.12',
+      });
+
+      expect(result).toBe(false);
+    });
+  });
+});

package/lib/common/components/clusterConfiguration/utils.ts

@@ -10,6 +10,7 @@ import {
   ServiceNetwork,
 } from '@openshift-assisted/types/assisted-installer-service';
 import { NO_SUBNET_SET } from '../../config';
+import { isMajorMinorVersionEqualOrGreater } from '../../utils';
 import {
   selectClusterNetworkCIDR,
   selectClusterNetworkHostPrefix,
@@ -179,20 +180,36 @@ export const canBeDualStack = (subnets: HostSubnets) =>
 
 const areNetworksDualStack = (
   networks: (MachineNetwork | ClusterNetwork | ServiceNetwork)[] | undefined,
-) =>
-  networks &&
-  networks.length > 1 &&
-  Address4.isValid(networks[0].cidr || '') &&
-  Address6.isValid(networks[1].cidr || '');
+  openshiftVersion?: string,
+) => {
+  if (!networks || networks.length < 2) {
+    return false;
+  }
+
+  const firstCidr = networks[0].cidr || '';
+  const secondCidr = networks[1].cidr || '';
+
+  // For OCP >= 4.12, allow either IPv4 or IPv6 as primary, with opposite as secondary
+  if (openshiftVersion && isMajorMinorVersionEqualOrGreater(openshiftVersion, '4.12')) {
+    return (
+      (Address4.isValid(firstCidr) && Address6.isValid(secondCidr)) ||
+      (Address6.isValid(firstCidr) && Address4.isValid(secondCidr))
+    );
+  }
+
+  // For older versions, require IPv4 as primary and IPv6 as secondary
+  return Address4.isValid(firstCidr) && Address6.isValid(secondCidr);
+};
 
 export const isDualStack = ({
   machineNetworks,
   clusterNetworks,
   serviceNetworks,
-}: Pick<Cluster, 'machineNetworks' | 'clusterNetworks' | 'serviceNetworks'>) =>
-  areNetworksDualStack(machineNetworks) &&
-  areNetworksDualStack(clusterNetworks) &&
-  areNetworksDualStack(serviceNetworks);
+  openshiftVersion,
+}: Pick<Cluster, 'machineNetworks' | 'clusterNetworks' | 'serviceNetworks' | 'openshiftVersion'>) =>
+  areNetworksDualStack(machineNetworks, openshiftVersion) &&
+  areNetworksDualStack(clusterNetworks, openshiftVersion) &&
+  areNetworksDualStack(serviceNetworks, openshiftVersion);
 
 export const isSubnetInIPv6 = ({
   clusterNetworkCidr,

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Stack, StackItem, TextContent } from '@patternfly/react-core';
+import { Stack, StackItem, Content } from '@patternfly/react-core';
 import BorderedIcon from '../ui/BorderedIcon/BorderedIcon';
 
 const ClusterProgressItem = ({
@@ -14,7 +14,7 @@ const ClusterProgressItem = ({
       <BorderedIcon>{icon}</BorderedIcon>
     </StackItem>
     <StackItem>
-      <TextContent>{children}</TextContent>
+      <Content>{children}</Content>
     </StackItem>
   </Stack>
 );

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

@@ -1,11 +1,14 @@
 import React from 'react';
 import {
-  Modal,
   Button,
   ButtonVariant,
-  Text,
-  ModalVariant,
+  Content,
   ExpandableSection,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  ModalVariant,
 } from '@patternfly/react-core';
 import { InfoCircleIcon } from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
 import { removeProtocolFromURL } from '../../api';
@@ -77,21 +80,21 @@ export const WebConsoleHint: React.FC<WebConsoleHintProps> = ({ cluster, console
   const { t } = useTranslation();
   return (
     <>
-      <Text component="p">
+      <Content component="p">
         {t(
           'ai:In order to access the OpenShift Web Console, use external DNS server or local configuration to resolve its hostname. To do so, either:',
         )}
-      </Text>
+      </Content>
       <ModalExpandableSection
         toggleText={t('ai:Option 1: Add the following records to your DNS server (recommended)')}
-        className="pf-v5-u-pb-md"
+        className="pf-v6-u-pb-md"
         isExpanded={isDNSExpanded}
         onToggle={handleToggle}
         requiredList={aRecords}
       />
       <ModalExpandableSection
         toggleText={t('ai:Option 2: Update your local /etc/hosts or /etc/resolv.conf files')}
-        className="pf-v5-u-pb-md"
+        className="pf-v6-u-pb-md"
         isExpanded={!isDNSExpanded}
         onToggle={handleToggle}
         requiredList={etcHosts}
@@ -180,14 +183,12 @@ export const ConsoleModal: React.FC<ConsoleModalProps> = ({
     </Button>,
   ];
   return (
-    <Modal
-      title={t('ai:OpenShift Web Console troubleshooting')}
-      isOpen={isOpen}
-      onClose={closeModal}
-      actions={actions}
-      variant={ModalVariant.large}
-    >
-      <WebConsoleHint cluster={cluster} consoleUrl={consoleUrl} />
+    <Modal isOpen={isOpen} onClose={closeModal} variant={ModalVariant.large}>
+      <ModalHeader title={t('ai:OpenShift Web Console troubleshooting')} />
+      <ModalBody>
+        <WebConsoleHint cluster={cluster} consoleUrl={consoleUrl} />
+      </ModalBody>
+      <ModalFooter>{actions}</ModalFooter>
     </Modal>
   );
 };

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

@@ -2,13 +2,13 @@ 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, Text, TextContent } from '@patternfly/react-core';
+import { Button, ButtonVariant, Popover, Content } 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 { global_success_color_100 as okColor } from '@patternfly/react-tokens/dist/js/global_success_color_100';
-import { global_danger_color_100 as dangerColor } from '@patternfly/react-tokens/dist/js/global_danger_color_100';
+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 ClusterProgressItem from './ClusterProgressItem';
 import capitalize from 'lodash-es/capitalize.js';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
@@ -87,13 +87,11 @@ export const FinalizingProgress: React.FC<FinalizingProgressProps> = ({
               zIndex={300} // set the zIndex below Cluster Events Modal
               headerContent={<>{t('ai:Initialization')}</>}
               bodyContent={
-                <TextContent>
-                  <Text>
-                    {t(
-                      'ai:This stage may take a while to finish. To view detailed information, click the events log link below.',
-                    )}
-                  </Text>
-                </TextContent>
+                <Content component="p">
+                  {t(
+                    'ai:This stage may take a while to finish. To view detailed information, click the events log link below.',
+                  )}
+                </Content>
               }
               footerContent={
                 <Button variant={ButtonVariant.link} isInline onClick={() => setIsModalOpen(true)}>

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

@@ -4,8 +4,8 @@ import { CheckCircleIcon } from '@patternfly/react-icons/dist/js/icons/check-cir
 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 { global_danger_color_100 as dangerColor } from '@patternfly/react-tokens/dist/js/global_danger_color_100';
-import { global_success_color_100 as okColor } from '@patternfly/react-tokens/dist/js/global_success_color_100';
+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 {

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

@@ -3,8 +3,8 @@ import { Host, HostRole } from '@openshift-assisted/types/assisted-installer-ser
 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 { global_danger_color_100 as dangerColor } from '@patternfly/react-tokens/dist/js/global_danger_color_100';
-import { global_success_color_100 as okColor } from '@patternfly/react-tokens/dist/js/global_success_color_100';
+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 ClusterProgressItem from './ClusterProgressItem';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
 

package/lib/common/components/clusterWizard/ClusterWizardStep.css

@@ -1,9 +1,9 @@
-.cluster-wizard-step .pf-v5-c-wizard__nav-item {
+.cluster-wizard-step .pf-v6-c-wizard__nav-item {
   white-space: nowrap;
 }
 
 .wizard-nav-item-warning-icon {
-  margin-left: var(--pf-v5-global--spacer--sm);
+  margin-left: var(--pf-v6-global--spacer--sm);
 }
 
 .cluster-wizard .cluster-wizard-step__footer {
@@ -15,16 +15,16 @@
   display: block !important;
 }
 
-.cluster-wizard.pf-v5-c-wizard {
-  --pf-v5-c-wizard__nav--Width: 19rem;
+.cluster-wizard.pf-v6-c-wizard {
+  --pf-v6-c-wizard__nav--Width: 19rem;
 }
 
-.pf-v5-c-wizard__inner-wrap {
+.pf-v6-c-wizard__inner-wrap {
   overflow: auto;
 }
 
 @media (min-width: 768px) {
-  .cluster-wizard .cluster-wizard-step .pf-v5-c-wizard__main {
+  .cluster-wizard .cluster-wizard-step .pf-v6-c-wizard__main {
     /* That breaks scrollbar in the ClusterDeployment wizard. As a fix, the "cluster-wizard" class is on the ClusterWizard and CreateClusterWizard only. */
     overflow: inherit !important;
   }

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

@@ -15,14 +15,25 @@ export const ClusterWizardStep = ({
   children,
 }: React.PropsWithChildren<ClusterWizardStepProps>) => {
   return (
-    <div className={css('pf-v5-c-wizard__outer-wrap', 'cluster-wizard-step')}>
-      <div className={css('pf-v5-c-wizard__inner-wrap')}>
+    <div className={css('pf-v6-c-wizard__outer-wrap', 'cluster-wizard-step')}>
+      <div className={css('pf-v6-c-wizard__inner-wrap')}>
         {navigation}
-        <WizardBody aria-labelledby="step-id" hasNoPadding={false}>
+        <WizardBody
+          aria-labelledby="step-id"
+          hasNoPadding={false}
+          data-testid="cluster-wizard-step-body"
+        >
           {children}
         </WizardBody>
       </div>
-      {footer && <div className="pf-v5-c-wizard__footer cluster-wizard-step__footer">{footer}</div>}
+      {footer && (
+        <div
+          className="pf-v6-c-wizard__footer cluster-wizard-step__footer"
+          data-testid="cluster-wizard-step-footer"
+        >
+          {footer}
+        </div>
+      )}
     </div>
   );
 };

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

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

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

@@ -4,7 +4,7 @@ import { Button, ButtonVariant } 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 { global_success_color_100 as okColor } from '@patternfly/react-tokens/dist/js/global_success_color_100';
+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,
@@ -108,7 +108,10 @@ const FailingValidation = <S extends string>({
       </>
     );
   } else {
-    if (validation.id === 'platform-requirements-satisfied') {
+    if (
+      validation.id === 'platform-requirements-satisfied' ||
+      validation.id === 'openshift-ai-gpu-requirements-satisfied'
+    ) {
       fix = validation.message;
     }
     // console.error(

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { List, ListItem, Text, TextContent } from '@patternfly/react-core';
+import { List, ListItem, Content } from '@patternfly/react-core';
 import { RenderIf, ExternalLink } from '../../ui';
 import { getOpenShiftNetworkingDocsLink } from '../../../config';
 import { useTranslation } from '../../../hooks/use-translation-wrapper';
@@ -16,8 +16,8 @@ export const UserManagedNetworkingTextContent = ({
 }: UserManagedNetworkingTextContentProps) => {
   const { t } = useTranslation();
   return (
-    <TextContent>
-      <Text component={'p'}>
+    <>
+      <Content component={'p'}>
         <Trans t={t}>
           ai:Please refer to the{' '}
           <ExternalLink href={getOpenShiftNetworkingDocsLink(docVersion)}>
@@ -25,7 +25,7 @@ export const UserManagedNetworkingTextContent = ({
           </ExternalLink>{' '}
           to configure your cluster's networking, including:
         </Trans>
-      </Text>
+      </Content>
       <List>
         <ListItem>{t('ai:DHCP or static IP Addresses')}</ListItem>
         <RenderIf condition={shouldDisplayLoadBalancersBullet}>
@@ -34,6 +34,6 @@ export const UserManagedNetworkingTextContent = ({
         <ListItem>{t('ai:Network ports')}</ListItem>
         <ListItem>{t('ai:DNS')}</ListItem>
       </List>
-    </TextContent>
+    </>
   );
 };

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

@@ -37,7 +37,7 @@ const VipStaticValue = ({ vipName, cluster, validationErrorMessage }: VipStaticV
   if (vipDhcpAllocation && machineNetworkCidr) {
     return (
       <>
-        <Spinner size="md" />
+        <Spinner size="md" data-testid="vip-static-value-spinner" />
         <i>{t('ai:This IP is being allocated by the DHCP server')}</i>
       </>
     );