@openshift-assisted/ui-lib 2.44.5 → 2.46.0

package/lib/ocm/components/clusterConfiguration/ControlPlaneNodesDropdown.tsx

@@ -141,7 +141,8 @@ const ControlPlaneNodesDropdown: React.FC<ControlPlaneNodesDropdownProps> = ({
       ref={toggleRef}
       onClick={() => setOpen(!isOpen)}
       isExpanded={isOpen}
-      className="pf-v5-u-w-100"
+      className="pf-v6-u-w-100"
+      data-testid="control-plane-nodes-dropdown-toggle"
     >
       {options.find((opt) => opt.value === field.value)?.label || 'Select'}
     </MenuToggle>

package/lib/ocm/components/clusterConfiguration/CpuArchitectureDropdown.tsx

@@ -159,7 +159,9 @@ const CpuArchitectureDropdown = ({
       ref={toggleRef}
       onClick={() => setOpen(!isOpen)}
       isExpanded={isOpen}
-      className="pf-v5-u-w-100"
+      className="pf-v6-u-w-100"
+      style={{ minWidth: '420px' }}
+      data-testid="cpu-architecture-dropdown-toggle"
     >
       {currentCpuArch}
     </MenuToggle>

package/lib/ocm/components/clusterConfiguration/CustomManifestCheckbox.tsx

@@ -81,7 +81,9 @@ const CustomManifestCheckbox = ({ clusterId, isDisabled }: CustomManifestCheckbo
             <FormGroup>
               <FormHelperText>
                 <HelperText id={fieldId}>
-                  <HelperTextItem>
+                  <HelperTextItem
+                    data-testid={`input-custommanifestcheckbox-${fieldId}-helper-text`}
+                  >
                     Additional manifests will be applied at the install time for advanced
                     configuration of the cluster.
                   </HelperTextItem>

package/lib/ocm/components/clusterConfiguration/DiscoveryImageModal.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { Button, ButtonVariant, Modal, ModalVariant } from '@patternfly/react-core';
+import { Button, ButtonVariant } from '@patternfly/react-core';
+import { Modal, ModalVariant } from '@patternfly/react-core/deprecated';
 import { pluralize } from 'humanize-plus';
 import {
   AI_CISCO_INTERSIGHT_TAG,
@@ -104,13 +105,16 @@ export const DiscoveryImageModal = () => {
   return (
     <Modal
       aria-label="Add hosts dialog"
-      title={`Add ${pluralize(+isSNOCluster, 'host')}`}
+      title={
+        <span data-testid="discovery-modal-title">{`Add ${pluralize(+isSNOCluster, 'host')}`}</span>
+      }
       isOpen={isOpen}
       onClose={close}
       variant={ModalVariant.small}
       hasNoBodyWrapper
       id="generate-discovery-iso-modal"
       tabIndex={0}
+      ouiaId="discovery-image-modal"
     >
       {(isoDownloadError || ipxeDownloadError) && <ErrorState />}
       {isoDownloadUrl ? (

package/lib/ocm/components/clusterConfiguration/DiscoveryImageTypeDropdown.tsx

@@ -93,12 +93,14 @@ export const DiscoveryImageTypeDropdown = ({
   const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
     <MenuToggle
       id={fieldId}
-      className="pf-v5-u-w-100"
+      className="pf-v6-u-w-100"
       ref={toggleRef}
       isFullWidth
       onClick={() => setOpen(!isOpen)}
       isExpanded={isOpen}
       isDisabled={isDisabled}
+      style={{ minWidth: '510px' }}
+      data-testid="discovery-image-type-dropdown-toggle"
     >
       {current || value}
     </MenuToggle>

package/lib/ocm/components/clusterConfiguration/HostInventory.tsx

@@ -1,14 +1,6 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
-import {
-  Text,
-  TextContent,
-  Button,
-  Stack,
-  StackItem,
-  Split,
-  SplitItem,
-} from '@patternfly/react-core';
+import { Content, Button, Stack, StackItem, Split, SplitItem } from '@patternfly/react-core';
 import { useFormikContext } from 'formik';
 import {
   HostDiscoveryValues,
@@ -39,24 +31,24 @@ const HostInventory = ({ cluster }: { cluster: Cluster }) => {
   }, [cluster, mastersMustRunWorkloads, setFieldValue]); // Schedulable masters need to be recalculated only when forced status changes
 
   return (
-    <Stack hasGutter>
-      <StackItem>
+    <Stack hasGutter data-testid="host-inventory">
+      <StackItem data-testid="host-discovery-header">
         <ClusterWizardStepHeader>Host discovery</ClusterWizardStepHeader>
       </StackItem>
-      <StackItem>
+      <StackItem data-testid="discovery-image-modal-section">
         {!isViewerMode && !isSingleClusterFeatureEnabled && (
-          <TextContent>
-            <Text component="p">
+          <Content>
+            <Content component="p">
               <DiscoveryImageModalButton
                 ButtonComponent={Button}
                 cluster={cluster}
                 idPrefix="host-inventory"
               />
-            </Text>
-          </TextContent>
+            </Content>
+          </Content>
         )}
       </StackItem>
-      <StackItem>
+      <StackItem data-testid="schedulable-masters-section">
         <Split>
           <SplitItem>
             <OcmSwitchField
@@ -67,6 +59,7 @@ const HostInventory = ({ cluster }: { cluster: Cluster }) => {
               isDisabled={mastersMustRunWorkloads}
               name={'schedulableMasters'}
               label="Run workloads on control plane nodes&nbsp;"
+              data-testid="schedulable-masters-switch"
             />
           </SplitItem>
           <SplitItem>
@@ -75,19 +68,20 @@ const HostInventory = ({ cluster }: { cluster: Cluster }) => {
                 <p>Enables your control plane nodes to be used for running applications.</p>
               }
               buttonStyle={{ marginTop: '4px' }}
+              data-testid="schedulable-masters-popover"
             />
           </SplitItem>
         </Split>
       </StackItem>
-      <StackItem>
+      <StackItem data-testid="information-and-alerts">
         <InformationAndAlerts cluster={cluster} />
       </StackItem>
-      <StackItem>
-        <TextContent>
-          <Text component="h3">Host Inventory</Text>
-        </TextContent>
+      <StackItem data-testid="host-inventory-title">
+        <Content>
+          <Content component="h3">Host Inventory</Content>
+        </Content>
       </StackItem>
-      <StackItem>
+      <StackItem data-testid="hosts-discovery-table-wrapper">
         <HostsDiscoveryTable cluster={cluster} />
       </StackItem>
     </Stack>

package/lib/ocm/components/clusterConfiguration/HostsNetworkConfigurationControlGroup.tsx

@@ -44,6 +44,7 @@ export const HostsNetworkConfigurationControlGroup = ({
       fieldId={fieldId}
       isInline
       role="radiogroup"
+      data-testid="hosts-network-configuration-control-group"
     >
       <RadioFieldWithTooltip
         name={GROUP_NAME}
@@ -51,7 +52,7 @@ export const HostsNetworkConfigurationControlGroup = ({
         value={HostsNetworkConfigurationType.DHCP}
         label="DHCP only"
         tooltipProps={tooltipProps}
-        className="pf-v5-u-mr-md"
+        className="pf-v6-u-mr-md"
       />
       <RadioFieldWithTooltip
         name={GROUP_NAME}

package/lib/ocm/components/clusterConfiguration/OcmBaseDomainField.tsx

@@ -32,7 +32,7 @@ export const BaseDnsHelperText = ({
 }) => (
   <FormHelperText>
     <HelperText id={fieldId}>
-      <HelperTextItem>
+      <HelperTextItem data-testid={`input-basednshelpertext-${fieldId}-helper-text`}>
         Enter the name of your domain [domainname] or [domainname.com]. This cannot be changed after
         cluster installed. All DNS records must include the cluster name and be subdomains of the
         base you enter. The full cluster address will be: <br />
@@ -71,7 +71,8 @@ export const OcmBaseDomainField = ({
         ref={toggleRef}
         onClick={() => setOpen(!isOpen)}
         isExpanded={isOpen}
-        className="pf-v5-u-w-100"
+        className="pf-v6-u-w-100"
+        data-testid="base-domain-dropdown-toggle"
       >
         {selectedDomain ? getManagedDomainLabel(selectedDomain) : 'Base domain'}
       </MenuToggle>

package/lib/ocm/components/clusterConfiguration/OcmDiscoveryImageConfigForm.tsx

@@ -1,15 +1,7 @@
 import React from 'react';
 import * as Yup from 'yup';
-import {
-  Button,
-  Form,
-  ModalBoxBody,
-  ModalBoxFooter,
-  AlertVariant,
-  Alert,
-  Stack,
-  StackItem,
-} from '@patternfly/react-core';
+import { Button, Form, AlertVariant, Alert, Stack, StackItem } from '@patternfly/react-core';
+import { ModalBoxBody, ModalBoxFooter } from '@patternfly/react-core/deprecated';
 import { Formik, FormikHelpers } from 'formik';
 import {
   HostStaticNetworkConfig,
@@ -182,6 +174,7 @@ export const OcmDiscoveryImageConfigForm = ({
                     }}
                     isDisabled={isSubmitting}
                     isLoading={isSubmitting}
+                    data-testid="generate-discovery-iso-button"
                   >
                     {isSubmitting ? t('ai:Generating') : buttonText}
                   </Button>

package/lib/ocm/components/clusterConfiguration/OcmOperatorProgressItem.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';
 

package/lib/ocm/components/clusterConfiguration/manifestsConfiguration/CustomManifestsPage.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Text, TextContent, TextVariants, Alert, Grid } from '@patternfly/react-core';
+import { Content, ContentVariants, Alert, Grid } from '@patternfly/react-core';
 
 import { CustomManifests } from './components/CustomManifests';
 import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
@@ -13,13 +13,13 @@ export const CustomManifestsPage = ({
   onFormStateChange(formState: CustomManifestFormState): void;
 }) => (
   <Grid hasGutter>
-    <TextContent>
-      <Text component={TextVariants.h2}>Custom manifests</Text>
-      <Text component={TextVariants.small}>
+    <Content>
+      <Content component={ContentVariants.h2}>Custom manifests</Content>
+      <Content component={ContentVariants.small}>
         Upload additional manifests that will be applied at the install time for advanced
         configuration of the cluster.
-      </Text>
-    </TextContent>
+      </Content>
+    </Content>
     <Alert
       isInline
       variant="warning"

package/lib/ocm/components/clusterConfiguration/manifestsConfiguration/DeleteCustomManifestModal.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { Modal, Button, ModalVariant } from '@patternfly/react-core';
+import { Button } from '@patternfly/react-core';
+import { Modal, ModalVariant } from '@patternfly/react-core/deprecated';
 
 const DeleteCustomManifestModal = ({
   isOpen,

package/lib/ocm/components/clusterConfiguration/manifestsConfiguration/components/CustomManifest.tsx

@@ -26,13 +26,12 @@ export const RemoveItemButton = ({
   dataTestId: string;
 }) => (
   <Button
+    icon={<MinusCircleIcon onClick={onRemove} />}
     data-testid={dataTestId}
     aria-label="remove manifest"
     style={{ visibility: showRemoveButton ? 'visible' : 'hidden' }}
     variant="plain"
-  >
-    <MinusCircleIcon onClick={onRemove} />
-  </Button>
+  />
 );
 
 export const CustomManifest = ({

package/lib/ocm/components/clusterConfiguration/manifestsConfiguration/components/FolderDropdown.tsx

@@ -55,8 +55,9 @@ export const FolderDropdown = ({ name }: FolderDropdownProps) => {
       ref={toggleRef}
       onClick={() => setOpen(!isOpen)}
       isExpanded={isOpen}
-      className="pf-v5-u-w-100"
+      className="pf-v6-u-w-100"
       id={fieldId}
+      data-testid="folder-dropdown-toggle"
     >
       {value || 'manifests'}
     </MenuToggle>

package/lib/ocm/components/clusterConfiguration/networkConfiguration/AdvancedNetworkFields.tsx

@@ -3,10 +3,9 @@ import {
   Alert,
   AlertVariant,
   FormGroup,
-  StackItem,
+  GridItem,
   TextInputTypes,
   Grid,
-  Stack,
 } from '@patternfly/react-core';
 import { FieldArray, useFormikContext } from 'formik';
 import {
@@ -62,15 +61,15 @@ const AdvancedNetworkFields = () => {
   );
 
   return (
-    <Grid hasGutter className="pf-v5-u-ml-lg">
+    <Grid hasGutter className="pf-v6-u-ml-lg">
       <FieldArray name="clusterNetworks">
         {() => (
           <FormGroup fieldId="clusterNetworks" labelInfo={isDualStack && 'Primary'}>
             {values.clusterNetworks?.map((_, index) => {
               const networkSuffix = getNetworkLabelSuffix(index, isDualStack);
               return (
-                <Stack key={index}>
-                  <StackItem className={'network-field-group pf-v5-u-pb-md'}>
+                <Grid hasGutter key={index}>
+                  <GridItem className={'network-field-group pf-v6-u-pb-md'}>
                     <OcmInputField
                       name={`clusterNetworks.${index}.cidr`}
                       label={
@@ -85,8 +84,8 @@ const AdvancedNetworkFields = () => {
                       isRequired
                       labelInfo={index === 0 && isDualStack ? 'Primary' : ''}
                     />
-                  </StackItem>
-                  <StackItem className={'network-field-group pf-v5-u-pb-md'}>
+                  </GridItem>
+                  <GridItem className={'network-field-group pf-v6-u-pb-md'}>
                     <OcmInputField
                       name={`clusterNetworks.${index}.hostPrefix`}
                       label={
@@ -108,8 +107,8 @@ const AdvancedNetworkFields = () => {
                       helperText={ClusterPrefixHelperText}
                       isRequired
                     />
-                  </StackItem>
-                </Stack>
+                  </GridItem>
+                </Grid>
               );
             })}
           </FormGroup>
@@ -124,7 +123,7 @@ const AdvancedNetworkFields = () => {
         {() => (
           <FormGroup fieldId="serviceNetworks" labelInfo={isDualStack && 'Primary'}>
             {values.serviceNetworks?.map((_, index) => (
-              <StackItem key={index} className={'network-field-group pf-v5-u-pb-md'}>
+              <GridItem key={index} className={'network-field-group pf-v6-u-pb-md'}>
                 <OcmInputField
                   name={`serviceNetworks.${index}.cidr`}
                   label={
@@ -141,7 +140,7 @@ const AdvancedNetworkFields = () => {
                   isRequired
                   labelInfo={index === 0 && isDualStack ? 'Primary' : ''}
                 />
-              </StackItem>
+              </GridItem>
             ))}
           </FormGroup>
         )}

package/lib/ocm/components/clusterConfiguration/networkConfiguration/NetworkConfigurationForm.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { Formik, FormikConfig, useFormikContext } from 'formik';
-import { Form, Grid, GridItem, Text, TextContent } from '@patternfly/react-core';
+import { Form, Grid, GridItem, Content } from '@patternfly/react-core';
 import {
   ClusterWizardStep,
   ClusterWizardStepHeader,
@@ -153,9 +153,9 @@ const NetworkConfigurationForm: React.FC<{
             </Grid>
           </GridItem>
           <GridItem>
-            <TextContent>
-              <Text component="h2">Host inventory</Text>
-            </TextContent>
+            <Content>
+              <Content component="h2">Host inventory</Content>
+            </Content>
             <NetworkConfigurationTable cluster={cluster} />
           </GridItem>
         </Grid>

package/lib/ocm/components/clusterConfiguration/networkConfiguration/SubnetsDropdown.tsx

@@ -76,8 +76,10 @@ export const SubnetsDropdown = ({ name, machineSubnets, isDisabled }: SubnetsDro
       onClick={() => setOpen(!isOpen)}
       isExpanded={isOpen}
       isDisabled={isDisabled}
-      className="pf-v5-u-w-100"
       id={fieldId}
+      className="pf-v6-u-w-100"
+      style={{ minWidth: '100%' }}
+      data-testid="subnets-dropdown-toggle"
     >
       {currentDisplayValue}
     </MenuToggle>

package/lib/ocm/components/clusterConfiguration/networkConfiguration/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 { ExternalLink } from '../../../../common/components/ui';
 import { getOpenShiftNetworkingDocsLink } from '../../../../common/config/docs_links';
 
@@ -11,20 +11,20 @@ export const UserManagedNetworkingTextContent = ({
   shouldDisplayLoadBalancersBullet = false,
 }: UserManagedNetworkingTextContentProps) => {
   return (
-    <TextContent>
-      <Text component={'p'}>
+    <Content>
+      <Content component={'p'}>
         Please refer to the{' '}
         <ExternalLink href={getOpenShiftNetworkingDocsLink()}>
           OpenShift networking documentation
         </ExternalLink>{' '}
         to configure your cluster's networking, including:{' '}
-      </Text>
+      </Content>
       <List>
         <ListItem>DHCP or static IP Addresses</ListItem>
         {shouldDisplayLoadBalancersBullet && <ListItem>Load balancers</ListItem>}
         <ListItem>Network ports</ListItem>
         <ListItem>DNS</ListItem>
       </List>
-    </TextContent>
+    </Content>
   );
 };

package/lib/ocm/components/clusterConfiguration/networkConfiguration/VirtualIPControlGroup.tsx

@@ -61,7 +61,7 @@ const VipStaticValue = ({
   if (vipDhcpAllocation && machineNetworkCidr) {
     return (
       <>
-        <Spinner size="md" id={`${id}-allocating`} />
+        <Spinner size="md" id={`${id}-allocating`} data-testid={`vip-static-${id}-value-spinner`} />
         <i> This IP is being allocated by the DHCP server</i>
       </>
     );

package/lib/ocm/components/clusterConfiguration/operators/OperatorCheckbox.tsx

@@ -198,7 +198,7 @@ const OperatorCheckbox = ({
         description={
           !!Description && (
             <HelperText>
-              <HelperTextItem variant="indeterminate">
+              <HelperTextItem data-testid={`operator-checkbox-description-${operatorId}`}>
                 <Description openshiftVersion={openshiftVersion} searchTerm={searchTerm} />
               </HelperTextItem>
             </HelperText>

package/lib/ocm/components/clusterConfiguration/operators/utils.tsx

@@ -59,7 +59,7 @@ const getBundleOperators = (
   bundle.operators?.forEach((op) => {
     getOperatorDependencies(op, preflightRequirements).forEach((dep) => bundleOperators.add(dep));
   });
-  return [...bundleOperators];
+  return Array.from(bundleOperators);
 };
 
 export const getNewBundleOperators = (
@@ -73,7 +73,8 @@ export const getNewBundleOperators = (
   const newBundleOperators = getBundleOperators(newBundle, preflightRequirements);
 
   if (add) {
-    return [...new Set([...currentOperators, ...newBundleOperators])];
+    const combined = [...currentOperators, ...newBundleOperators];
+    return Array.from(new Set(combined));
   }
 
   const newBundles = currentBundles.filter((b) => b !== newBundle.id);

package/lib/ocm/components/clusterConfiguration/platformIntegration/ExternalPlatformDropdown.tsx

@@ -245,11 +245,13 @@ export const ExternalPlatformDropdown = ({
   const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
     <MenuToggle
       id={fieldId}
-      className="pf-v5-u-w-100"
+      className="pf-v6-u-w-100"
+      style={{ minWidth: '420px' }}
       ref={toggleRef}
       onClick={() => setOpen(!isOpen)}
       isDisabled={dropdownIsDisabled}
       isExpanded={isOpen}
+      data-testid="external-platform-dropdown-toggle"
     >
       {externalPlatformTypes[field.value as PlatformType]?.label}
     </MenuToggle>

package/lib/ocm/components/clusterConfiguration/review/ReviewCluster.css

@@ -8,24 +8,24 @@
   padding-left: 0;
 }
 
-.review-expandable > .pf-v5-c-expandable-section__toggle {
+.review-expandable > .pf-v6-c-expandable-section__toggle {
   margin-right: 0;
   width: 100%;
   display: inline-flex;
 }
 
-.review-expandable .pf-v5-c-expandable-section__toggle-text {
+.review-expandable .pf-v6-c-expandable-section__toggle-text {
   width: 100%;
 }
 
-.summary-expandable .pf-v5-c-expandable-section__toggle,
-.review-expandable > .pf-v5-c-expandable-section__toggle {
+.summary-expandable .pf-v6-c-expandable-section__toggle,
+.review-expandable > .pf-v6-c-expandable-section__toggle {
   color: initial;
   text-align: left;
 }
 
 .summary-expandable
-  > .pf-v5-c-expandable-section__toggle
-  > .pf-v5-c-expandable-section__toggle-icon {
+  > .pf-v6-c-expandable-section__toggle
+  > .pf-v6-c-expandable-section__toggle-icon {
   visibility: hidden;
 }

package/lib/ocm/components/clusterConfiguration/review/ReviewNetworkingTable.tsx

@@ -176,7 +176,7 @@ export const ReviewNetworkingTable = ({ cluster }: { cluster: Cluster }) => {
       </Table>
 
       <br />
-      <Title className="pf-v5-u-color-400" headingLevel="h4">
+      <Title className="pf-v6-u-color-400" headingLevel="h4">
         Advanced networking settings
       </Title>
 

package/lib/ocm/components/clusterConfiguration/review/ReviewPreflightChecks.tsx

@@ -2,18 +2,18 @@ import React from 'react';
 import {
   Divider,
   ExpandableSection,
+  Flex,
+  FlexItem,
   Grid,
   GridItem,
   gridSpans,
-  Split,
-  SplitItem,
 } 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 { global_success_color_100 as okColor } from '@patternfly/react-tokens/dist/js/global_success_color_100';
-import { global_info_color_100 as infoColor } from '@patternfly/react-tokens/dist/js/global_info_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_color_status_info_100 as infoColor } from '@patternfly/react-tokens/dist/js/t_global_color_status_info_100';
 import {
   ClusterValidations,
   DetailItem,
@@ -57,7 +57,7 @@ const PreflightChecksDetailExpanded = ({ cluster }: { cluster: Cluster }) => {
             wizardStepsValidationsMap={wizardStepsValidationsMap}
           />
         }
-        classNameValue={'pf-v5-u-mb-md'}
+        classNameValue={'pf-v6-u-mb-md'}
         testId="cluster-preflight-checks"
       />
       <DetailItem
@@ -71,7 +71,7 @@ const PreflightChecksDetailExpanded = ({ cluster }: { cluster: Cluster }) => {
             wizardStepsValidationsMap={wizardStepsValidationsMap}
           />
         }
-        classNameValue={'pf-v5-u-mb-md'}
+        classNameValue={'pf-v6-u-mb-md'}
         testId="host-preflight-checks"
       />
       <ClusterFeatureSupportLevelsDetailItem cluster={cluster} />
@@ -94,25 +94,25 @@ const PreflightCheckInfo = ({
 }) => {
   return (
     <GridItem span={span} offset={offset} className={className}>
-      <Split hasGutter>
-        <SplitItem>{icon}</SplitItem>
-        <SplitItem>
+      <Flex spaceItems={{ default: 'spaceItemsSm' }} alignItems={{ default: 'alignItemsCenter' }}>
+        <FlexItem style={{ display: 'flex', alignItems: 'center' }}>{icon}</FlexItem>
+        <FlexItem style={{ display: 'flex', alignItems: 'center' }}>
           <b>{title}</b>
-        </SplitItem>
-      </Split>
+        </FlexItem>
+      </Flex>
     </GridItem>
   );
 };
 
 const getCheckIcon = (validationStatuses: string[]) => {
   if (validationStatuses.includes('failure') || validationStatuses.includes('error')) {
-    return <UiIcon status="danger" icon={<ExclamationCircleIcon />} />;
+    return <UiIcon size="sm" status="danger" icon={<ExclamationCircleIcon />} />;
   } else if (validationStatuses.includes('warning')) {
-    return <UiIcon status="warning" icon={<ExclamationTriangleIcon />} />;
+    return <UiIcon size="sm" status="warning" icon={<ExclamationTriangleIcon />} />;
   } else if (validationStatuses.includes('pending')) {
-    return <UiIcon status="info" icon={<InfoCircleIcon />} />;
+    return <UiIcon size="sm" status="info" icon={<InfoCircleIcon />} />;
   }
-  return <UiIcon status="warning" icon={<CheckCircleIcon color={okColor.value} />} />;
+  return <UiIcon size="sm" icon={<CheckCircleIcon color={okColor.value} />} />;
 };
 
 const PreflightChecksDetailCollapsed = ({ cluster }: { cluster: Cluster }) => {
@@ -126,9 +126,9 @@ const PreflightChecksDetailCollapsed = ({ cluster }: { cluster: Cluster }) => {
   );
 
   const supportLevelIcon = isFullySupported ? (
-    <CheckCircleIcon color={okColor.value} />
+    <UiIcon size="sm" icon={<CheckCircleIcon color={okColor.value} />} />
   ) : (
-    <InfoCircleIcon color={infoColor.value} />
+    <UiIcon size="sm" icon={<InfoCircleIcon color={infoColor.value} />} />
   );
 
   const clusterValidations = React.useMemo(
@@ -161,12 +161,17 @@ const PreflightChecksDetailCollapsed = ({ cluster }: { cluster: Cluster }) => {
       <PreflightCheckInfo
         title="Cluster preflight checks"
         icon={getCheckIcon(clusterValidations)}
+        span={3}
+      />
+      <PreflightCheckInfo
+        title="Host preflight checks"
+        icon={getCheckIcon(hostValidations)}
+        span={3}
       />
-      <PreflightCheckInfo title="Host preflight checks" icon={getCheckIcon(hostValidations)} />
       <PreflightCheckInfo
         title={`Cluster support level: ${isFullySupported ? 'Full' : 'Limited'}`}
         icon={supportLevelIcon}
-        span={4}
+        span={3}
       />
     </>
   );