@openshift-assisted/ui-lib 2.16.3-cim → 2.16.4-cim

package/lib/common/components/ui/formik/validationSchemas.ts

@@ -28,6 +28,7 @@ import {
   nameValidationMessages,
 } from './constants';
 import { allSubnetsIPv4, getAddress, trimCommaSeparatedList, trimSshPublicKey } from './utils';
+import { isMajorMinorVersionEqualOrGreater } from '../../../utils';
 import { selectApiVip, selectIngressVip } from '../../../selectors';
 import { ClusterDetailsValues } from '../../clusterWizard/types';
 
@@ -172,6 +173,17 @@ export const ipValidationSchema = Yup.string().test(
   (value?: string) => Address4.isValid(value || '') || Address6.isValid(value || ''),
 );
 
+// Helpers to classify literal IPs more robustly
+const isIPv4Address = (ip?: string) => {
+  if (!ip) return false;
+  return ip.includes('.') && Address4.isValid(ip);
+};
+
+const isIPv6Address = (ip?: string) => {
+  if (!ip) return false;
+  return ip.includes(':') && Address6.isValid(ip);
+};
+
 export const ipNoSuffixValidationSchema = Yup.string().test(
   'ip-validation-no-suffix',
   'Not a valid IP address',
@@ -201,7 +213,6 @@ export const vipRangeValidationSchema = (
     } catch (err) {
       return true;
     }
-
     const foundHostSubnets = [];
     if (machineNetworks) {
       const cidrs = machineNetworks?.map((network) => network.cidr);
@@ -302,12 +313,51 @@ export const vipNoSuffixValidationSchema = (
       vipDhcpAllocation: NetworkConfigurationValues['vipDhcpAllocation'],
       managedNetworkingType: NetworkConfigurationValues['managedNetworkingType'],
     ) => !vipDhcpAllocation && managedNetworkingType !== 'userManaged',
-    then: () =>
-      requiredOnceSet(head(initialValues)?.ip, 'Required. Please provide an IP address')
+    then: () => {
+      // Per-item schema for VIPs (apiVips[*].ip / ingressVips[*].ip)
+      // 1) Require value once set
+      // 2) Validate IP without suffix
+      // 3) Ensure VIP family matches machineNetworks[idx] family
+      // 4) Validate range vs selected subnets
+      // 5) No broadcast/network address
+      // 6) Uniqueness across API/Ingress
+      const vipFamilyMatchSchema = Yup.string().test(
+        'vip-family-match-machine-network',
+        'IP family must match the corresponding machine network family.',
+        function (value?: string) {
+          if (!value) {
+            return true;
+          }
+          // this.path looks like: "apiVips[0].ip" or "ingressVips[1].ip"
+          const path = this.path || '';
+          const match = path.match(/\[(\d+)\]/);
+          const index = match ? parseInt(match[1], 10) : NaN;
+          if (Number.isNaN(index)) {
+            return true;
+          }
+          const cidr = values.machineNetworks?.[index]?.cidr || '';
+          const mnIsV4 = isCIDR.v4(cidr);
+          const mnIsV6 = isCIDR.v6(cidr);
+          // If machine network at index is not selected/valid, don't block validation here
+          if (!mnIsV4 && !mnIsV6) {
+            return true;
+          }
+          const ipIsV4 = isIPv4Address(value);
+          const ipIsV6 = isIPv6Address(value);
+          if (!ipIsV4 && !ipIsV6) {
+            return true;
+          }
+          return mnIsV4 ? ipIsV4 : ipIsV6;
+        },
+      );
+
+      return requiredOnceSet(head(initialValues)?.ip, 'Required. Please provide an IP address')
         .concat(ipNoSuffixValidationSchema)
+        .concat(vipFamilyMatchSchema)
         .concat(vipRangeValidationSchema(hostSubnets, values, false))
         .concat(vipBroadcastValidationSchema(values))
-        .concat(vipUniqueValidationSchema(values, true)),
+        .concat(vipUniqueValidationSchema(values, true));
+    },
   });
 
 export const vipArrayValidationSchema = <T extends Yup.Maybe<Yup.AnyObject>>(
@@ -323,11 +373,39 @@ export const vipArrayValidationSchema = <T extends Yup.Maybe<Yup.AnyObject>>(
         }),
       )
     : Yup.array<T>()
-  ).test(
-    'vips-length',
-    'Both API and ingress APIs must be provided.',
-    (_value) => values.apiVips?.length === values.ingressVips?.length,
-  );
+  )
+    .test(
+      'vips-length',
+      'Both API and ingress APIs must be provided.',
+      (_value) => values.apiVips?.length === values.ingressVips?.length,
+    )
+    .test(
+      'vips-match-machine-networks',
+      'Primary API and Ingress IPs must match the primary machine network family; secondary must match the secondary machine network family.',
+      (_vips?: { ip?: string }[]) => {
+        const machineNetworks = values.machineNetworks || [];
+        const validateIndex = (idx: number) => {
+          const cidr = machineNetworks[idx]?.cidr || '';
+          const mIsIpv4 = isCIDR.v4(cidr);
+          const mIsIpv6 = isCIDR.v6(cidr);
+          if (!mIsIpv4 && !mIsIpv6) {
+            return true;
+          }
+          const api = values.apiVips?.[idx]?.ip || '';
+          const ing = values.ingressVips?.[idx]?.ip || '';
+          if (!api || !ing) {
+            return true;
+          }
+          const apiOk = mIsIpv4 ? isIPv4Address(api) : isIPv6Address(api);
+          const ingOk = mIsIpv4 ? isIPv4Address(ing) : isIPv6Address(ing);
+          return apiOk && ingOk;
+        };
+
+        const primaryOk = validateIndex(0);
+        const secondaryOk = validateIndex(1);
+        return primaryOk && secondaryOk;
+      },
+    );
 
 export const ipBlockValidationSchema = (reservedCidrs: string | string[] | undefined) =>
   Yup.string()
@@ -439,11 +517,11 @@ export const hostPrefixValidationSchema = (
   const errorMsgIPv4 = `${errorMsgPrefix} (${netBlockNumber}) and 25.`;
   const errorMsgIPv6 = `${errorMsgPrefix} (8) and 128.`;
 
-  if (Address6.isValid(clusterNetworkCidr || '')) {
+  if (isCIDR.v6(clusterNetworkCidr || '')) {
     return Yup.number().required(requiredText).min(8, errorMsgIPv6).max(128, errorMsgIPv6);
   }
 
-  if (Address4.isValid(clusterNetworkCidr || '')) {
+  if (isCIDR.v4(clusterNetworkCidr || '')) {
     return Yup.number()
       .required(requiredText)
       .min(netBlockNumber, errorMsgIPv4)
@@ -703,20 +781,64 @@ export const serviceNetworkValidationSchema = Yup.array().of(
   }),
 );
 
-export const dualStackValidationSchema = (field: string) =>
+export const dualStackValidationSchema = (field: string, openshiftVersion?: string) =>
   Yup.array()
     .max(2, `Maximum number of ${field} subnets in dual stack is 2.`)
     .test(
       'dual-stack-ipv4',
-      'First network has to be IPv4 subnet.',
-      (values?: { cidr: MachineNetwork['cidr'] }[]): boolean =>
-        !!values?.[0].cidr && Address4.isValid(values[0].cidr),
+      openshiftVersion && isMajorMinorVersionEqualOrGreater(openshiftVersion, '4.12')
+        ? 'First network has to be a valid IPv4 or IPv6 subnet.'
+        : 'First network has to be IPv4 subnet.',
+      (values?: { cidr: MachineNetwork['cidr'] }[]): boolean => {
+        // For OCP versions > 4.11, allow IPv6 as primary network
+        if (openshiftVersion && isMajorMinorVersionEqualOrGreater(openshiftVersion, '4.12')) {
+          return !!values?.[0].cidr && (isCIDR.v4(values[0].cidr) || isCIDR.v6(values[0].cidr));
+        }
+        // For older versions, require IPv4 as primary network
+        return !!values?.[0].cidr && isCIDR.v4(values[0].cidr);
+      },
     )
     .test(
-      'dual-stack-ipv6',
-      'Second network has to be IPv6 subnet.',
-      (values?: { cidr: MachineNetwork['cidr'] }[]): boolean =>
-        !!values?.[1].cidr && Address6.isValid(values[1].cidr),
+      'dual-stack-unique-cidrs',
+      `Provided ${field} subnets must be unique.`,
+      (values?: { cidr?: MachineNetwork['cidr'] }[]) => {
+        if (!values || values.length < 2) {
+          return true;
+        }
+        const first = values[0]?.cidr || '';
+        const second = values[1]?.cidr || '';
+        if (!first || !second) {
+          return true;
+        }
+        const firstIsCidr = isCIDR.v4(first) || isCIDR.v6(first);
+        const secondIsCidr = isCIDR.v4(second) || isCIDR.v6(second);
+        if (!firstIsCidr || !secondIsCidr) {
+          return true;
+        }
+        return first !== second;
+      },
+    )
+    .test(
+      'dual-stack-opposite-families',
+      `When two ${field} are provided, one must be IPv4 and the other IPv6.`,
+      (values?: { cidr?: MachineNetwork['cidr'] }[]) => {
+        if (!values || values.length < 2) {
+          return true;
+        }
+        const a = values[0]?.cidr || '';
+        const b = values[1]?.cidr || '';
+        if (!a || !b) {
+          return true;
+        }
+        const a4 = isCIDR.v4(a);
+        const a6 = isCIDR.v6(a);
+        const b4 = isCIDR.v4(b);
+        const b6 = isCIDR.v6(b);
+        if (!((a4 || a6) && (b4 || b6))) {
+          return true;
+        }
+        return (a4 && b6) || (a6 && b4);
+      },
     );
 
 export const IPv4ValidationSchema = Yup.array().test(

package/lib/common/components/ui/uiState/EmptyState.tsx

@@ -1,19 +1,17 @@
 import React from 'react';
 import {
-  Title,
   EmptyState as PFEmptyState,
   EmptyStateBody,
   Bullseye,
-  EmptyStateIcon,
-  EmptyStateIconProps,
   EmptyStateActions,
 } from '@patternfly/react-core';
 import { SearchIcon } from '@patternfly/react-icons/dist/js/icons/search-icon';
+import { ComponentType } from 'react';
 
 type Props = {
   title?: string;
   content?: React.ReactNode;
-  icon?: EmptyStateIconProps['icon'];
+  icon?: ComponentType;
   primaryAction?: React.ReactNode;
   secondaryActions?: React.ReactNode[];
 };
@@ -26,9 +24,7 @@ const EmptyState: React.FC<Props> = ({
   secondaryActions,
 }) => (
   <Bullseye>
-    <PFEmptyState>
-      <EmptyStateIcon icon={icon} />
-      <Title headingLevel="h2">{title}</Title>
+    <PFEmptyState titleText={title} icon={icon} headingLevel="h2">
       {content && <EmptyStateBody>{content}</EmptyStateBody>}
       {primaryAction}
       {secondaryActions && <EmptyStateActions>{secondaryActions}</EmptyStateActions>}

package/lib/common/components/ui/uiState/ErrorState.tsx

@@ -3,24 +3,20 @@ import {
   EmptyState,
   EmptyStateBody,
   Bullseye,
-  EmptyStateIcon,
   EmptyStateVariant,
   Button,
   ButtonVariant,
-  EmptyStateIconProps,
   EmptyStateActions,
-  EmptyStateHeader,
   EmptyStateFooter,
 } from '@patternfly/react-core';
 import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
-import { global_danger_color_200 as globalDangerColor200 } from '@patternfly/react-tokens/dist/js/global_danger_color_200';
 import { useTranslation } from '../../../hooks/use-translation-wrapper';
 
 type ErrorStateProps = {
   title?: string;
   content?: React.ReactNode;
   fetchData?: () => void;
-  icon?: EmptyStateIconProps['icon'];
+  icon?: React.ComponentClass;
   iconColor?: string;
   primaryAction?: React.ReactNode;
   actions?: React.ReactNode[];
@@ -49,19 +45,19 @@ const ErrorState = ({
   content,
   fetchData,
   icon = ExclamationCircleIcon,
-  iconColor = globalDangerColor200.value,
   variant = EmptyStateVariant.sm,
   primaryAction,
   actions,
 }: ErrorStateProps) => {
   return (
     <Bullseye>
-      <EmptyState variant={variant}>
-        <EmptyStateHeader
-          titleText={<>{title}</>}
-          icon={<EmptyStateIcon icon={icon} color={iconColor} />}
-          headingLevel="h2"
-        />
+      <EmptyState
+        status="danger"
+        headingLevel="h2"
+        icon={icon}
+        titleText={<>{title}</>}
+        variant={variant}
+      >
         <EmptyStateBody>{content || <DefaultErrorContent fetchData={fetchData} />}</EmptyStateBody>
         <EmptyStateFooter>
           {primaryAction}

package/lib/common/components/ui/uiState/LoadingState.tsx

@@ -17,7 +17,7 @@ type Props = {
 const LoadingState: React.FC<Props> = ({ content, primaryAction, secondaryActions }) => (
   <Bullseye>
     <EmptyState variant={EmptyStateVariant.sm}>
-      <Spinner size="xl" />
+      <Spinner size="xl" data-testid="loading-state-spinner" />
       {content && <EmptyStateBody>{content}</EmptyStateBody>}
       {primaryAction}
       {secondaryActions && <EmptyStateActions>{secondaryActions}</EmptyStateActions>}

package/lib/common/config/constants.ts

@@ -145,6 +145,8 @@ export const hostValidationLabels = (t: TFunction): { [key in HostValidationId]:
   'node-maintenance-requirements-satisfied': t('ai:Node Maintenance requirements'),
   'kube-descheduler-requirements-satisfied': t('ai:Kube Descheduler requirements'),
   'cluster-observability-requirements-satisfied': t('ai:Cluster Observability requirements'),
+  'loki-requirements-satisfied': t('ai:Loki Operator requirements'),
+  'openshift-logging-requirements-satisfied': t('ai:OpenShift Logging Operator requirements'),
   'numa-resources-requirements-satisfied': t('ai:NUMA Resources requirements'),
   'oadp-requirements-satisfied': t('ai:OADP requirements'),
   'metallb-requirements-satisfied': t('ai:MetalLB requirements'),
@@ -216,6 +218,8 @@ export const hostValidationFailureHints = (
   'node-maintenance-requirements-satisfied': '',
   'kube-descheduler-requirements-satisfied': '',
   'cluster-observability-requirements-satisfied': '',
+  'loki-requirements-satisfied': '',
+  'openshift-logging-requirements-satisfied': '',
   'numa-resources-requirements-satisfied': '',
   'oadp-requirements-satisfied': '',
   'metallb-requirements-satisfied': '',
@@ -247,8 +251,11 @@ export const clusterValidationLabels = (
   'lvm-requirements-satisfied': t('ai:Logical Volume Manager requirements'),
   'cnv-requirements-satisfied': t('ai:CNV requirements'),
   'mce-requirements-satisfied': t('ai:MCE requirements'),
+  'openshift-ai-gpu-requirements-satisfied': t('ai:OpenShift AI GPU requirements'),
   'platform-requirements-satisfied': t('ai:Platform requirements'),
   'cluster-observability-requirements-satisfied': t('ai:Cluster Observability requirements'),
+  'loki-requirements-satisfied': t('ai:Loki Operator requirements'),
+  'openshift-logging-requirements-satisfied': t('ai:OpenShift Logging Operator requirements'),
   'numa-resources-requirements-satisfied': t('ai:NUMA Resources requirements'),
   'oadp-requirements-satisfied': t('ai:OADP requirements'),
   'metallb-requirements-satisfied': t('ai:MetalLB requirements'),
@@ -333,6 +340,8 @@ export const OPERATOR_NAME_FENCE_AGENTS_REMEDIATION = 'fence-agents-remediation'
 export const OPERATOR_NAME_NODE_MAINTENANCE = 'node-maintenance';
 export const OPERATOR_NAME_KUBE_DESCHEDULER = 'kube-descheduler';
 export const OPERATOR_NAME_CLUSTER_OBSERVABILITY = 'cluster-observability';
+export const OPERATOR_NAME_LOKI = 'loki';
+export const OPERATOR_NAME_OPENSHIFT_LOGGING = 'openshift-logging';
 export const OPERATOR_NAME_NUMA_RESOURCES = 'numaresources';
 export const OPERATOR_NAME_OADP = 'oadp';
 export const OPERATOR_NAME_METALLB = 'metallb';
@@ -345,6 +354,9 @@ export const singleClusterOperators = [
   OPERATOR_NAME_NODE_MAINTENANCE,
   OPERATOR_NAME_FENCE_AGENTS_REMEDIATION,
   OPERATOR_NAME_KUBE_DESCHEDULER,
+  OPERATOR_NAME_CLUSTER_OBSERVABILITY,
+  OPERATOR_NAME_LOKI,
+  OPERATOR_NAME_OPENSHIFT_LOGGING,
 ];
 
 export const singleClusterBundles = ['virtualization'];

package/lib/common/config/docs_links.ts

@@ -47,11 +47,12 @@ export const getEncryptingDiskDuringInstallationDocsLink = (ocpVersion?: string)
 
 //Networking page
 export const getOpenShiftNetworkingDocsLink = (ocpVersion?: string) => {
-  const validOcpVersion = getDocsOpenshiftVersion(ocpVersion);
-  const variant = isMajorMinorVersionEqualOrGreater(validOcpVersion, '4.18')
+  const variant = isMajorMinorVersionEqualOrGreater(ocpVersion, '4.18')
     ? 'user-provisioned-infrastructure'
     : 'installing-bare-metal';
-  return `https://docs.redhat.com/en/documentation/openshift_container_platform/${validOcpVersion}/html/installing_on_bare_metal/${variant}#installation-network-user-infra_installing-bare-metal`;
+  return `https://docs.redhat.com/en/documentation/openshift_container_platform/${getDocsOpenshiftVersion(
+    ocpVersion,
+  )}/html/installing_on_bare_metal/${variant}#installation-network-user-infra_installing-bare-metal`;
 };
 
 export const SSH_GENERATION_DOC_LINK = 'https://www.redhat.com/sysadmin/configure-ssh-keygen';
@@ -76,6 +77,8 @@ export const NUTANIX_CONFIG_LINK = `https://docs.redhat.com/en/documentation/ass
 
 export const VSPHERE_CONFIG_LINK = `https://docs.redhat.com/en/documentation/assisted_installer_for_openshift_container_platform/${getYearForAssistedInstallerDocumentationLink()}/html-single/installing_openshift_container_platform_with_the_assisted_installer/index#adding-hosts-on-vsphere_installing-on-vsphere`;
 
+export const VSPHERE_LIMITATIONS_LINK = `https://docs.redhat.com/en/documentation/assisted_installer_for_openshift_container_platform/${getYearForAssistedInstallerDocumentationLink()}/html/installing_openshift_container_platform_with_the_assisted_installer/installing-on-vsphere`;
+
 export const OCI_CONFIG_LINK = `https://docs.redhat.com/en/documentation/assisted_installer_for_openshift_container_platform/${getYearForAssistedInstallerDocumentationLink()}/html-single/installing_openshift_container_platform_with_the_assisted_installer/index#installing-on-oci`;
 
 export const HOW_TO_KNOW_IF_CLUSTER_SUPPORTS_MULTIPLE_CPU_ARCHS = `https://docs.redhat.com/en/documentation/assisted_installer_for_openshift_container_platform/${getYearForAssistedInstallerDocumentationLink()}/html/installing_openshift_container_platform_with_the_assisted_installer/expanding-the-cluster#checking-for-multiple-architectures_expanding-the-cluster`;
@@ -171,10 +174,12 @@ export const getLsoLink = (ocpVersion?: string) => {
     : `https://docs.openshift.com/container-platform/${version}/storage/persistent_storage/persistent_storage_local/ways-to-provision-local-storage.html`;
 };
 
-export const getNmstateLink = (ocpVersion?: string) =>
-  `https://docs.redhat.com/en/documentation/openshift_container_platform/${getDocsOpenshiftVersion(
-    ocpVersion,
-  )}/html/networking/networking-operators#k8s-nmstate-about-the-k8s-nmstate-operator`;
+export const getNmstateLink = (ocpVersion?: string) => {
+  const version = getDocsOpenshiftVersion(ocpVersion);
+  return isMajorMinorVersionEqualOrGreater(ocpVersion, '4.17')
+    ? `https://docs.redhat.com/en/documentation/openshift_container_platform/${version}/html/networking_operators/k8s-nmstate-about-the-k8s-nmstate-operator`
+    : `https://docs.redhat.com/en/documentation/openshift_container_platform/4.17/html/networking_operators/k8s-nmstate-about-the-k8s-nmstate-operator`;
+};
 
 export const getNodeFeatureDiscoveryLink = (ocpVersion?: string) =>
   `https://docs.redhat.com/en/documentation/openshift_container_platform/${getDocsOpenshiftVersion(
@@ -215,6 +220,16 @@ export const getClusterObservabilityLink = (ocpVersion?: string) =>
     ocpVersion,
   )}/html/cluster_observability_operator/cluster-observability-operator-overview`;
 
+export const getLokiLink = (ocpVersion?: string) =>
+  `https://docs.redhat.com/en/documentation/openshift_container_platform/${getDocsOpenshiftVersion(
+    ocpVersion,
+  )}/html/network_observability/network-observability-overview`;
+
+export const getOpenShiftLoggingLink = (ocpVersion?: string) =>
+  `https://docs.redhat.com/en/documentation/openshift_container_platform/${getDocsOpenshiftVersion(
+    ocpVersion,
+  )}/html/logging`;
+
 export const getNumaResourcesLink = (ocpVersion?: string) =>
   `https://docs.redhat.com/en/documentation/openshift_container_platform/${getDocsOpenshiftVersion(
     ocpVersion,

package/lib/common/reducers/alertsSlice.ts

@@ -6,6 +6,7 @@ export type AlertPayload = {
   title: string;
   message?: string;
   variant?: AlertVariant;
+  key?: string;
 };
 
 export type AlertProps = {
@@ -22,7 +23,7 @@ export const alertsSlice = createSlice({
   name: 'alerts',
   reducers: {
     addAlert: (state, action: PayloadAction<AlertPayload>) => [
-      { key: uuidv4(), variant: AlertVariant.danger, ...action.payload },
+      { key: action.payload.key || uuidv4(), variant: AlertVariant.danger, ...action.payload },
       ...state,
     ],
     removeAlert: (state, action: PayloadAction<string>) =>

package/lib/common/utils.ts

@@ -113,7 +113,7 @@ export const getMajorMinorVersion = (version = '') => {
 };
 
 // Converts an Openshift version to a comparable integer
-export const getComparableVersionInt = (version: string): number => {
+const getComparableVersionInt = (version: string): number => {
   const majorMinorParts = version.split('.').slice(0, 2).map(Number);
   if (majorMinorParts.length < 2 || majorMinorParts.some(isNaN)) {
     // If the version doesn't have the required format, returning 0 makes it be considered

package/lib/ocm/components/AddHosts/InventoryAddHost.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Text, TextContent, Alert, AlertVariant, Stack, StackItem } from '@patternfly/react-core';
+import { Content, Alert, AlertVariant, Stack, StackItem } from '@patternfly/react-core';
 import ClusterHostsTable from '../hosts/ClusterHostsTable';
 import InformationAndAlerts from '../clusterConfiguration/InformationAndAlerts';
 import { CpuArchitecture } from '../../../common';
@@ -17,14 +17,12 @@ const InventoryAddHosts = ({ cluster }: { cluster?: Cluster }) => {
   return (
     <Stack hasGutter>
       <StackItem>
-        <TextContent>
-          <Text component="p">
-            <Day2WizardContextProvider>
-              <Day2DiscoveryImageModalButton cluster={cluster} />
-              <Day2Wizard />
-            </Day2WizardContextProvider>
-          </Text>
-        </TextContent>
+        <Day2WizardContextProvider>
+          <Content component="p">
+            <Day2DiscoveryImageModalButton cluster={cluster} />
+          </Content>
+          <Day2Wizard />
+        </Day2WizardContextProvider>
       </StackItem>
       <StackItem>
         <InformationAndAlerts cluster={cluster} />

package/lib/ocm/components/AddHosts/day2Wizard/Day2StaticIP.tsx

@@ -1,11 +1,9 @@
 import React from 'react';
 import {
   Grid,
-  TextContent,
-  Text,
-  TextVariants,
+  Content,
+  ContentVariants,
   PageSection,
-  PageSectionVariants,
   Button,
   ButtonVariant,
 } from '@patternfly/react-core';
@@ -93,7 +91,7 @@ const Day2StaticIP = () => {
 
   if (hasLoadError) {
     return (
-      <PageSection variant={PageSectionVariants.light} isFilled>
+      <PageSection hasBodyWrapper={false} isFilled>
         <ErrorState
           title="Cannot load the Static IP configuration for this cluster"
           content="For non-multi-architecture clusters, make sure you select the Day1 cpu architecture"
@@ -165,13 +163,13 @@ const Day2StaticIP = () => {
       }
     >
       <Grid hasGutter>
-        <TextContent>
-          <Text component={TextVariants.h2}>Static network configurations</Text>
-          <Text component={TextVariants.small}>
+        <Content>
+          <Content component={ContentVariants.h2}>Static network configurations</Content>
+          <Content component={ContentVariants.small}>
             Network configuration can be done using either the form view or YAML view.
             Configurations done in this step are for discovering hosts.
-          </Text>
-        </TextContent>
+          </Content>
+        </Content>
 
         <StaticIpViewRadioGroup
           initialView={initialStaticIpInfo.view}

package/lib/ocm/components/AddHosts/day2Wizard/Day2StaticIpHostConfigurations.tsx

@@ -3,9 +3,8 @@ import {
   Flex,
   FlexItem,
   FormGroup,
-  TextContent,
-  TextVariants,
-  Text,
+  Content,
+  ContentVariants,
   Tooltip,
 } from '@patternfly/react-core';
 import { useFormikContext } from 'formik';
@@ -24,11 +23,7 @@ const Day2HostStaticIpConfigurations = ({ isDisabled }: { isDisabled: boolean })
 
   return (
     <FormGroup
-      label={
-        <TextContent>
-          <Text component={TextVariants.h4}>Hosts' network configuration</Text>
-        </TextContent>
-      }
+      label={<Content component={ContentVariants.h4}>Hosts' network configuration</Content>}
       fieldId={getFieldId(GROUP_NAME, 'radio')}
       isInline
       onChange={onChangeNetworkType}

package/lib/ocm/components/AddHosts/day2Wizard/Day2Wizard.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
-import { Modal, ModalVariant } from '@patternfly/react-core';
-import { WizardHeader } from '@patternfly/react-core';
+import { Modal, ModalVariant, WizardHeader } from '@patternfly/react-core';
 import classNames from 'classnames';
 import { ClusterWizardStep } from '../../../../common';
 import { useModalDialogsContext } from '../../hosts/ModalDialogsContext';
@@ -40,15 +39,15 @@ const Day2Wizard = () => {
       aria-label={'Day 2 Wizard'}
       isOpen={isOpen}
       variant={ModalVariant.large}
-      showClose={false}
-      hasNoBodyWrapper
+      onClose={undefined}
       id="generate-discovery-iso-modal"
     >
-      <div className={classNames('pf-v5-c-wizard', 'cluster-wizard')}>
+      <div className={classNames('pf-v6-c-wizard', 'cluster-wizard')}>
         <WizardHeader
           title={'Add hosts'}
           description={'Choose the settings for adding a new host'}
           onClose={close}
+          data-testid="day2-wizard-header"
         />
         <Day2WizardStep />
       </div>

package/lib/ocm/components/AddHosts/day2Wizard/Day2WizardFooter.tsx

@@ -41,6 +41,7 @@ const Day2WizardFooter = ({
       isBackDisabled={wizardContext.currentStepId === 'cluster-details'}
       isNextDisabled={disableNext}
       onCancel={closeWizard}
+      data-testid="day2-wizard-footer"
     />
   );
 };

package/lib/ocm/components/AddHosts/day2Wizard/Day2WizardNav.tsx

@@ -24,6 +24,7 @@ const Day2WizardNav = () => {
         onClick={() => wizardContext.setCurrentStepId(stepId)}
         isCurrent={wizardContext.currentStepId === stepId}
         isDisabled={isStepDisabled(idx, stepId)}
+        data-testid={`day2-wizard-nav-item-${stepId}`}
       />
     );
   };
@@ -37,8 +38,12 @@ const Day2WizardNav = () => {
         key="static-network-configuration-form-view"
         isCurrent={isStaticIpStep(wizardContext.currentStepId)}
         isDisabled={isStepIdxAfterCurrent(idx)}
+        data-testid={`day2-wizard-nav-item-static-network-configuration-form-view`}
       >
-        <WizardNav isInnerList>
+        <WizardNav
+          isInnerList
+          data-testid="day2-wizard-nav-item-static-network-configuration-form-view-inner-list"
+        >
           {staticIpFormViewSubSteps.map((stepId, subIdx) => {
             return getNavItem(idx + subIdx, stepId);
           })}
@@ -64,7 +69,7 @@ const Day2WizardNav = () => {
     return navItems;
   };
 
-  return <WizardNav>{getWizardNavItems()}</WizardNav>;
+  return <WizardNav data-testid="day2-wizard-nav">{getWizardNavItems()}</WizardNav>;
 };
 
 export default Day2WizardNav;

package/lib/ocm/components/HostsClusterDetailTab/HostsClusterDetailTabMock.tsx

@@ -5,8 +5,6 @@ import {
   EmptyStateBody,
   Grid,
   PageSection,
-  PageSectionVariants,
-  EmptyStateHeader,
 } from '@patternfly/react-core';
 import {
   OcmCpuArchitecture,
@@ -66,9 +64,8 @@ export const HostsClusterDetailTabMock = () => {
 
   if (!isMocked) {
     return (
-      <PageSection variant={PageSectionVariants.light} isFilled>
-        <EmptyState>
-          <EmptyStateHeader titleText="Mocked environment not detected" headingLevel="h4" />
+      <PageSection hasBodyWrapper={false} isFilled>
+        <EmptyState headingLevel="h4" titleText="Mocked environment not detected">
           <EmptyStateBody>You can only use this page on a mocked environment</EmptyStateBody>
         </EmptyState>
       </PageSection>
@@ -76,7 +73,7 @@ export const HostsClusterDetailTabMock = () => {
   }
 
   return (
-    <PageSection variant={PageSectionVariants.light} isFilled>
+    <PageSection hasBodyWrapper={false} isFilled>
       {tabShown ? (
         <OpenShiftVersionsContextProvider>
           <HostsClusterDetailTab