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

package/lib/common/components/ui/formik/index.tsx

@@ -17,6 +17,7 @@ export { default as RemovableField } from './RemovableField';
 export { default as AddButton } from './AddButton';
 export { default as PencilEditField } from './PencilEditField';
 export { default as AlertFormikError } from './AlertFormikError';
+export { default as SelectFieldWithSearch } from './SelectFieldWithSearch';
 
 export * from './utils';
 export * from './PullSecretField';

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

@@ -28,7 +28,6 @@ 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';
 
@@ -58,7 +57,7 @@ export const nameValidationSchema = (
 ) => {
   const clusterNameValidationMessagesList = clusterNameValidationMessages(t);
   return Yup.string()
-    .required('Required')
+    .required(t('ai:Required field'))
     .matches(CLUSTER_NAME_VALID_CHARS_REGEX, {
       message: clusterNameValidationMessagesList.INVALID_VALUE,
       excludeEmptyString: true,
@@ -173,17 +172,6 @@ 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',
@@ -213,6 +201,7 @@ export const vipRangeValidationSchema = (
     } catch (err) {
       return true;
     }
+
     const foundHostSubnets = [];
     if (machineNetworks) {
       const cidrs = machineNetworks?.map((network) => network.cidr);
@@ -313,51 +302,12 @@ export const vipNoSuffixValidationSchema = (
       vipDhcpAllocation: NetworkConfigurationValues['vipDhcpAllocation'],
       managedNetworkingType: NetworkConfigurationValues['managedNetworkingType'],
     ) => !vipDhcpAllocation && managedNetworkingType !== 'userManaged',
-    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')
+    then: () =>
+      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>>(
@@ -373,39 +323,11 @@ 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-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;
-      },
-    );
+  ).test(
+    'vips-length',
+    'Both API and ingress APIs must be provided.',
+    (_value) => values.apiVips?.length === values.ingressVips?.length,
+  );
 
 export const ipBlockValidationSchema = (reservedCidrs: string | string[] | undefined) =>
   Yup.string()
@@ -517,11 +439,11 @@ export const hostPrefixValidationSchema = (
   const errorMsgIPv4 = `${errorMsgPrefix} (${netBlockNumber}) and 25.`;
   const errorMsgIPv6 = `${errorMsgPrefix} (8) and 128.`;
 
-  if (isCIDR.v6(clusterNetworkCidr || '')) {
+  if (Address6.isValid(clusterNetworkCidr || '')) {
     return Yup.number().required(requiredText).min(8, errorMsgIPv6).max(128, errorMsgIPv6);
   }
 
-  if (isCIDR.v4(clusterNetworkCidr || '')) {
+  if (Address4.isValid(clusterNetworkCidr || '')) {
     return Yup.number()
       .required(requiredText)
       .min(netBlockNumber, errorMsgIPv4)
@@ -781,64 +703,20 @@ export const serviceNetworkValidationSchema = Yup.array().of(
   }),
 );
 
-export const dualStackValidationSchema = (field: string, openshiftVersion?: string) =>
+export const dualStackValidationSchema = (field: string) =>
   Yup.array()
     .max(2, `Maximum number of ${field} subnets in dual stack is 2.`)
     .test(
       'dual-stack-ipv4',
-      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);
-      },
+      'First network has to be IPv4 subnet.',
+      (values?: { cidr: MachineNetwork['cidr'] }[]): boolean =>
+        !!values?.[0].cidr && Address4.isValid(values[0].cidr),
     )
     .test(
-      '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);
-      },
+      'dual-stack-ipv6',
+      'Second network has to be IPv6 subnet.',
+      (values?: { cidr: MachineNetwork['cidr'] }[]): boolean =>
+        !!values?.[1].cidr && Address6.isValid(values[1].cidr),
     );
 
 export const IPv4ValidationSchema = Yup.array().test(

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

@@ -1,17 +1,19 @@
 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?: ComponentType;
+  icon?: EmptyStateIconProps['icon'];
   primaryAction?: React.ReactNode;
   secondaryActions?: React.ReactNode[];
 };
@@ -24,7 +26,9 @@ const EmptyState: React.FC<Props> = ({
   secondaryActions,
 }) => (
   <Bullseye>
-    <PFEmptyState titleText={title} icon={icon} headingLevel="h2">
+    <PFEmptyState>
+      <EmptyStateIcon icon={icon} />
+      <Title headingLevel="h2">{title}</Title>
       {content && <EmptyStateBody>{content}</EmptyStateBody>}
       {primaryAction}
       {secondaryActions && <EmptyStateActions>{secondaryActions}</EmptyStateActions>}

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

@@ -3,20 +3,24 @@ 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?: React.ComponentClass;
+  icon?: EmptyStateIconProps['icon'];
   iconColor?: string;
   primaryAction?: React.ReactNode;
   actions?: React.ReactNode[];
@@ -45,19 +49,19 @@ const ErrorState = ({
   content,
   fetchData,
   icon = ExclamationCircleIcon,
+  iconColor = globalDangerColor200.value,
   variant = EmptyStateVariant.sm,
   primaryAction,
   actions,
 }: ErrorStateProps) => {
   return (
     <Bullseye>
-      <EmptyState
-        status="danger"
-        headingLevel="h2"
-        icon={icon}
-        titleText={<>{title}</>}
-        variant={variant}
-      >
+      <EmptyState variant={variant}>
+        <EmptyStateHeader
+          titleText={<>{title}</>}
+          icon={<EmptyStateIcon icon={icon} color={iconColor} />}
+          headingLevel="h2"
+        />
         <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" data-testid="loading-state-spinner" />
+      <Spinner size="xl" />
       {content && <EmptyStateBody>{content}</EmptyStateBody>}
       {primaryAction}
       {secondaryActions && <EmptyStateActions>{secondaryActions}</EmptyStateActions>}

package/lib/common/config/constants.ts

@@ -145,8 +145,6 @@ 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'),
@@ -218,8 +216,6 @@ 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': '',
@@ -251,11 +247,8 @@ 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'),
@@ -340,8 +333,6 @@ 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';
@@ -354,9 +345,6 @@ 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

@@ -1,6 +1,6 @@
 import { isMajorMinorVersionEqualOrGreater } from '../utils';
 
-const LATEST_OPENSHIFT_DOCS_VERSION = '4.19';
+const LATEST_OPENSHIFT_DOCS_VERSION = '4.21';
 const MIN_OPENSHIFT_DOCS_VERSION = '4.14';
 
 const getDocsOpenshiftVersion = (ocpVersion?: string): string => {
@@ -47,12 +47,11 @@ export const getEncryptingDiskDuringInstallationDocsLink = (ocpVersion?: string)
 
 //Networking page
 export const getOpenShiftNetworkingDocsLink = (ocpVersion?: string) => {
-  const variant = isMajorMinorVersionEqualOrGreater(ocpVersion, '4.18')
+  const validOcpVersion = getDocsOpenshiftVersion(ocpVersion);
+  const variant = isMajorMinorVersionEqualOrGreater(validOcpVersion, '4.18')
     ? 'user-provisioned-infrastructure'
     : '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`;
+  return `https://docs.redhat.com/en/documentation/openshift_container_platform/${validOcpVersion}/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';
@@ -77,8 +76,6 @@ 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`;
@@ -174,12 +171,10 @@ 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) => {
-  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 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 getNodeFeatureDiscoveryLink = (ocpVersion?: string) =>
   `https://docs.redhat.com/en/documentation/openshift_container_platform/${getDocsOpenshiftVersion(
@@ -220,16 +215,6 @@ 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,7 +6,6 @@ export type AlertPayload = {
   title: string;
   message?: string;
   variant?: AlertVariant;
-  key?: string;
 };
 
 export type AlertProps = {
@@ -23,7 +22,7 @@ export const alertsSlice = createSlice({
   name: 'alerts',
   reducers: {
     addAlert: (state, action: PayloadAction<AlertPayload>) => [
-      { key: action.payload.key || uuidv4(), variant: AlertVariant.danger, ...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
-const getComparableVersionInt = (version: string): number => {
+export 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 { Content, Alert, AlertVariant, Stack, StackItem } from '@patternfly/react-core';
+import { Text, TextContent, Alert, AlertVariant, Stack, StackItem } from '@patternfly/react-core';
 import ClusterHostsTable from '../hosts/ClusterHostsTable';
 import InformationAndAlerts from '../clusterConfiguration/InformationAndAlerts';
 import { CpuArchitecture } from '../../../common';
@@ -17,12 +17,14 @@ const InventoryAddHosts = ({ cluster }: { cluster?: Cluster }) => {
   return (
     <Stack hasGutter>
       <StackItem>
-        <Day2WizardContextProvider>
-          <Content component="p">
-            <Day2DiscoveryImageModalButton cluster={cluster} />
-          </Content>
-          <Day2Wizard />
-        </Day2WizardContextProvider>
+        <TextContent>
+          <Text component="p">
+            <Day2WizardContextProvider>
+              <Day2DiscoveryImageModalButton cluster={cluster} />
+              <Day2Wizard />
+            </Day2WizardContextProvider>
+          </Text>
+        </TextContent>
       </StackItem>
       <StackItem>
         <InformationAndAlerts cluster={cluster} />

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

@@ -1,9 +1,11 @@
 import React from 'react';
 import {
   Grid,
-  Content,
-  ContentVariants,
+  TextContent,
+  Text,
+  TextVariants,
   PageSection,
+  PageSectionVariants,
   Button,
   ButtonVariant,
 } from '@patternfly/react-core';
@@ -91,7 +93,7 @@ const Day2StaticIP = () => {
 
   if (hasLoadError) {
     return (
-      <PageSection hasBodyWrapper={false} isFilled>
+      <PageSection variant={PageSectionVariants.light} 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"
@@ -163,13 +165,13 @@ const Day2StaticIP = () => {
       }
     >
       <Grid hasGutter>
-        <Content>
-          <Content component={ContentVariants.h2}>Static network configurations</Content>
-          <Content component={ContentVariants.small}>
+        <TextContent>
+          <Text component={TextVariants.h2}>Static network configurations</Text>
+          <Text component={TextVariants.small}>
             Network configuration can be done using either the form view or YAML view.
             Configurations done in this step are for discovering hosts.
-          </Content>
-        </Content>
+          </Text>
+        </TextContent>
 
         <StaticIpViewRadioGroup
           initialView={initialStaticIpInfo.view}

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

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

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

@@ -1,5 +1,6 @@
 import React from 'react';
-import { Modal, ModalVariant, WizardHeader } from '@patternfly/react-core';
+import { Modal, ModalVariant } from '@patternfly/react-core';
+import { WizardHeader } from '@patternfly/react-core';
 import classNames from 'classnames';
 import { ClusterWizardStep } from '../../../../common';
 import { useModalDialogsContext } from '../../hosts/ModalDialogsContext';
@@ -39,15 +40,15 @@ const Day2Wizard = () => {
       aria-label={'Day 2 Wizard'}
       isOpen={isOpen}
       variant={ModalVariant.large}
-      onClose={undefined}
+      showClose={false}
+      hasNoBodyWrapper
       id="generate-discovery-iso-modal"
     >
-      <div className={classNames('pf-v6-c-wizard', 'cluster-wizard')}>
+      <div className={classNames('pf-v5-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,7 +41,6 @@ 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,7 +24,6 @@ const Day2WizardNav = () => {
         onClick={() => wizardContext.setCurrentStepId(stepId)}
         isCurrent={wizardContext.currentStepId === stepId}
         isDisabled={isStepDisabled(idx, stepId)}
-        data-testid={`day2-wizard-nav-item-${stepId}`}
       />
     );
   };
@@ -38,12 +37,8 @@ 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
-          data-testid="day2-wizard-nav-item-static-network-configuration-form-view-inner-list"
-        >
+        <WizardNav isInnerList>
           {staticIpFormViewSubSteps.map((stepId, subIdx) => {
             return getNavItem(idx + subIdx, stepId);
           })}
@@ -69,7 +64,7 @@ const Day2WizardNav = () => {
     return navItems;
   };
 
-  return <WizardNav data-testid="day2-wizard-nav">{getWizardNavItems()}</WizardNav>;
+  return <WizardNav>{getWizardNavItems()}</WizardNav>;
 };
 
 export default Day2WizardNav;