@openshift-assisted/ui-lib 2.46.3 → 2.47.0

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

@@ -9,6 +9,7 @@ import {
   NetworkConfigurationValues,
   DUAL_STACK,
   NO_SUBNET_SET,
+  isMajorMinorVersionEqualOrGreater,
 } from '../../../../common';
 import { selectCurrentClusterPermissionsState } from '../../../store/slices/current-cluster/selectors';
 import { SubnetsDropdown } from './SubnetsDropdown';
@@ -35,6 +36,7 @@ export interface AvailableSubnetsControlProps {
   hostSubnets: HostSubnet[];
   isRequired: boolean;
   isDisabled: boolean;
+  openshiftVersion?: string;
 }
 
 export const AvailableSubnetsControl = ({
@@ -42,11 +44,16 @@ export const AvailableSubnetsControl = ({
   hostSubnets,
   isRequired = false,
   isDisabled,
+  openshiftVersion,
 }: AvailableSubnetsControlProps) => {
   const { values, errors, setFieldValue } = useFormikContext<NetworkConfigurationValues>();
   const isDualStack = values.stackType === DUAL_STACK;
   const { isViewerMode } = useSelector(selectCurrentClusterPermissionsState);
 
+  // Check if OCP version supports IPv6 as primary network
+  const supportsIPv6Primary =
+    openshiftVersion && isMajorMinorVersionEqualOrGreater(openshiftVersion, '4.12');
+
   const IPv4Subnets = hostSubnets
     .filter((subnet) => Address4.isValid(subnet.subnet))
     .sort(subnetSort);
@@ -54,53 +61,106 @@ export const AvailableSubnetsControl = ({
     .filter((subnet) => Address6.isValid(subnet.subnet))
     .sort(subnetSort);
 
+  // For OCP >= 4.12, both networks can use either IPv4 or IPv6
+  const allSubnets = supportsIPv6Primary
+    ? [...IPv4Subnets, ...IPv6Subnets].sort(subnetSort)
+    : IPv4Subnets;
+
+  // For auto-selection, always use IPv4 subnets for single-stack
   const cidr = IPv4Subnets.length >= 1 ? IPv4Subnets[0].subnet : NO_SUBNET_SET;
   const hasEmptySelection = (values.machineNetworks ?? []).length === 0;
   const autoSelectNetwork = !isViewerMode && hasEmptySelection;
   useAutoSelectSingleAvailableSubnet(autoSelectNetwork, setFieldValue, cidr, clusterId);
 
   return (
-    <FormGroup
-      label="Machine network"
-      labelInfo={isDualStack && 'Primary'}
-      fieldId="machine-networks"
-      isRequired={isRequired}
-    >
-      <FieldArray name="machineNetworks">
-        {() => (
-          <Stack>
-            {isDualStack ? (
-              values.machineNetworks?.map((_machineNetwork, index) => {
-                const machineSubnets = index === 1 ? IPv6Subnets : IPv4Subnets;
-
-                return (
-                  <StackItem key={index}>
-                    <SubnetsDropdown
-                      name={`machineNetworks.${index}.cidr`}
-                      machineSubnets={machineSubnets}
-                      isDisabled={isDisabled}
-                      data-testid={`subnets-dropdown-toggle-${index ? 'ipv6' : 'ipv4'}`}
-                    />
-                  </StackItem>
-                );
-              })
-            ) : (
-              <StackItem>
+    <>
+      <FormGroup
+        label="Machine network"
+        labelInfo={isDualStack && 'Primary'}
+        fieldId="machine-networks"
+        isRequired={isRequired}
+      >
+        <FieldArray name="machineNetworks">
+          {() => (
+            <Stack>
+              {isDualStack ? (
+                values.machineNetworks?.map((machineNetwork, index) => {
+                  if (index > 0) return null;
+
+                  const machineSubnets = supportsIPv6Primary ? allSubnets : IPv4Subnets;
+
+                  return (
+                    <StackItem key={index}>
+                      <SubnetsDropdown
+                        name={`machineNetworks.${index}.cidr`}
+                        machineSubnets={machineSubnets}
+                        isDisabled={isDisabled}
+                        data-testid={`subnets-dropdown-toggle-${index ? 'ipv6' : 'ipv4'}`}
+                      />
+                    </StackItem>
+                  );
+                })
+              ) : (
+                <StackItem>
+                  <SubnetsDropdown
+                    name={`machineNetworks.0.cidr`}
+                    machineSubnets={IPv4Subnets}
+                    isDisabled={isDisabled}
+                    data-testid={'subnets-dropdown-toggle-primary'}
+                  />
+                </StackItem>
+              )}
+            </Stack>
+          )}
+        </FieldArray>
+
+        {typeof errors.machineNetworks === 'string' && (
+          <Alert variant={AlertVariant.warning} title={errors.machineNetworks} isInline />
+        )}
+      </FormGroup>
+
+      {isDualStack && values.machineNetworks && values.machineNetworks.length > 1 && (
+        <FormGroup
+          label="Machine network"
+          labelInfo="Secondary"
+          fieldId="machine-networks-secondary"
+          isRequired={isRequired}
+        >
+          <FieldArray name="machineNetworks">
+            {() => {
+              const index = 1;
+              let machineSubnets;
+
+              if (supportsIPv6Primary) {
+                // For OCP >= 4.12, smart filtering based on the other network's selection
+                const firstNetworkCidr = values.machineNetworks?.[0]?.cidr;
+                if (firstNetworkCidr && Address6.isValid(firstNetworkCidr)) {
+                  // If first is IPv6, second should be IPv4
+                  machineSubnets = IPv4Subnets;
+                } else if (firstNetworkCidr && Address4.isValid(firstNetworkCidr)) {
+                  // If first is IPv4, second should be IPv6
+                  machineSubnets = IPv6Subnets;
+                } else {
+                  // If first is not selected yet, show all subnets
+                  machineSubnets = allSubnets;
+                }
+              } else {
+                // For older versions, second network is IPv6
+                machineSubnets = IPv6Subnets;
+              }
+
+              return (
                 <SubnetsDropdown
-                  name={`machineNetworks.0.cidr`}
-                  machineSubnets={IPv4Subnets}
+                  name={`machineNetworks.${index}.cidr`}
+                  machineSubnets={machineSubnets}
                   isDisabled={isDisabled}
-                  data-testid={'subnets-dropdown-toggle-ipv4'}
+                  data-testid={`subnets-dropdown-toggle-${index ? 'ipv6' : 'ipv4'}`}
                 />
-              </StackItem>
-            )}
-          </Stack>
-        )}
-      </FieldArray>
-
-      {typeof errors.machineNetworks === 'string' && (
-        <Alert variant={AlertVariant.warning} title={errors.machineNetworks} isInline />
+              );
+            }}
+          </FieldArray>
+        </FormGroup>
       )}
-    </FormGroup>
+    </>
   );
 };

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

@@ -224,10 +224,10 @@ const NetworkConfiguration = ({
   );
 
   React.useEffect(() => {
-    if (!isViewerMode && isDualStack && !isUserManagedNetworking) {
+    if (!isViewerMode && isDualStack) {
       toggleAdvConfiguration(true);
     }
-  }, [isDualStack, isUserManagedNetworking, isViewerMode, toggleAdvConfiguration]);
+  }, [isDualStack, isViewerMode, toggleAdvConfiguration]);
 
   const managedNetworkingState = React.useMemo(
     () =>
@@ -292,6 +292,7 @@ const NetworkConfiguration = ({
               hostSubnets.length === 0 ||
               false
             }
+            openshiftVersion={cluster.openshiftVersion}
           />
         </StackItem>
       )}

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

@@ -200,8 +200,9 @@ const NetworkConfigurationPage = ({ cluster }: { cluster: Cluster }) => {
   );
 
   const memoizedValidationSchema = React.useMemo(
-    () => getNetworkConfigurationValidationSchema(initialValues, hostSubnets),
-    [hostSubnets, initialValues],
+    () =>
+      getNetworkConfigurationValidationSchema(initialValues, hostSubnets, cluster.openshiftVersion),
+    [hostSubnets, initialValues, cluster.openshiftVersion],
   );
 
   React.useEffect(() => {

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { useSelector } from 'react-redux';
 import { ButtonVariant, FormGroup, Split, SplitItem, Tooltip } from '@patternfly/react-core';
 import { useFormikContext } from 'formik';
-import { Address6 } from 'ip-address';
+import { Address4, Address6 } from 'ip-address';
 
 import {
   HostSubnets,
@@ -69,19 +69,67 @@ export const StackTypeControlGroup = ({
     setFieldValue('stackType', IPV4_STACK);
 
     if (values.machineNetworks && values.machineNetworks?.length >= 2) {
-      setFieldValue('machineNetworks', values.machineNetworks.slice(0, 1));
+      // For single-stack IPv4, prefer IPv4 machine network
+      const firstNetwork = values.machineNetworks[0];
+      const isFirstIPv4 = firstNetwork?.cidr && Address4.isValid(firstNetwork.cidr);
+
+      if (isFirstIPv4) {
+        // Keep the first network if it's IPv4
+        setFieldValue('machineNetworks', [firstNetwork]);
+      } else {
+        // If first is IPv6, look for IPv4 network or set empty for auto-selection
+        const ipv4Network = values.machineNetworks.find(
+          (network) => network.cidr && Address4.isValid(network.cidr),
+        );
+        if (ipv4Network) {
+          setFieldValue('machineNetworks', [ipv4Network]);
+        } else {
+          // No IPv4 network found, set empty for auto-selection
+          setFieldValue('machineNetworks', []);
+        }
+      }
     }
-    if (values.clusterNetworks && values.clusterNetworks?.length >= 2) {
-      setFieldValue('clusterNetworks', values.clusterNetworks.slice(0, 1));
+    // Ensure single-stack inputs are IPv4 after switching from dual-stack
+    if (values.clusterNetworks && values.clusterNetworks.length >= 1) {
+      const defaultCluster =
+        defaultNetworkValues.clusterNetworksIpv4 && defaultNetworkValues.clusterNetworksIpv4[0];
+      const firstCluster = values.clusterNetworks[0];
+      const ipv4Cluster = defaultCluster
+        ? {
+            cidr: defaultCluster.cidr,
+            hostPrefix: defaultCluster.hostPrefix,
+            clusterId: firstCluster.clusterId, // ← Preserve clusterId from original network
+          }
+        : {
+            cidr: '',
+            hostPrefix: '',
+            clusterId: clusterId, // ← Use current clusterId
+          };
+      setFieldValue('clusterNetworks', [ipv4Cluster]);
     }
-    if (values.serviceNetworks && values.serviceNetworks?.length >= 2) {
-      setFieldValue('serviceNetworks', values.serviceNetworks.slice(0, 1));
+    if (values.serviceNetworks && values.serviceNetworks.length >= 1) {
+      const defaultService =
+        defaultNetworkValues.serviceNetworksIpv4 && defaultNetworkValues.serviceNetworksIpv4[0];
+      const firstService = values.serviceNetworks[0];
+      const ipv4Service = defaultService
+        ? {
+            cidr: defaultService.cidr,
+            clusterId: firstService.clusterId, // ← Preserve clusterId from original network
+          }
+        : {
+            cidr: '',
+            clusterId: clusterId, // ← Use current clusterId
+          };
+      setFieldValue('serviceNetworks', [ipv4Service]);
     }
 
     void validateForm();
   }, [
     setFieldValue,
     validateForm,
+    clusterId,
+    defaultNetworkValues.clusterNetworksIpv4,
+    defaultNetworkValues.serviceNetworksIpv4,
     values.clusterNetworks,
     values.machineNetworks,
     values.serviceNetworks,
@@ -96,11 +144,30 @@ export const StackTypeControlGroup = ({
     }
 
     if (values.machineNetworks && values.machineNetworks?.length < 2) {
-      setFieldValue(
-        'machineNetworks',
-        [...values.machineNetworks, { cidr: cidrIPv6, clusterId: clusterId }],
-        false,
-      );
+      // Ensure IPv4 is primary when switching to dual-stack
+      const firstNetwork = values.machineNetworks[0];
+      const isFirstIPv6 = firstNetwork?.cidr && Address6.isValid(firstNetwork.cidr);
+
+      if (isFirstIPv6) {
+        // If first network is IPv6, make IPv4 primary and IPv6 secondary
+        const IPv4Subnets = hostSubnets.filter((subnet) => Address4.isValid(subnet.subnet));
+        const cidrIPv4 = IPv4Subnets.length >= 1 ? IPv4Subnets[0].subnet : NO_SUBNET_SET;
+        setFieldValue(
+          'machineNetworks',
+          [
+            { cidr: cidrIPv4, clusterId: clusterId },
+            { cidr: firstNetwork.cidr, clusterId: clusterId },
+          ],
+          false,
+        );
+      } else {
+        // If first network is IPv4, add IPv6 as secondary
+        setFieldValue(
+          'machineNetworks',
+          [...values.machineNetworks, { cidr: cidrIPv6, clusterId: clusterId }],
+          false,
+        );
+      }
     }
     if (values.clusterNetworks && values.clusterNetworks?.length < 2) {
       setFieldValue(

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

@@ -2,12 +2,14 @@ import React from 'react';
 import {
   Dropdown,
   DropdownItem,
+  DropdownGroup,
   MenuToggle,
   MenuToggleElement,
   MenuToggleProps,
 } from '@patternfly/react-core';
 import { useField } from 'formik';
 import { getFieldId, HostSubnet, NO_SUBNET_SET } from '../../../../common';
+import { Address4, Address6 } from 'ip-address';
 
 type SubnetsDropdownProps = {
   name: string;
@@ -48,7 +50,7 @@ export const SubnetsDropdown = ({
   const [isOpen, setOpen] = React.useState(false);
   const fieldId = getFieldId(name, 'input');
 
-  const { itemsSubnets, currentDisplayValue } = React.useMemo(() => {
+  const { itemsSubnets, ipv4Subnets, ipv6Subnets, currentDisplayValue } = React.useMemo(() => {
     const itemsSubnets =
       machineSubnets.length === 0
         ? [noSubnetAvailableOption]
@@ -56,6 +58,10 @@ export const SubnetsDropdown = ({
             toFormSelectOptions(machineSubnets),
           );
 
+    // Separate IPv4 and IPv6 subnets
+    const ipv4Subnets = machineSubnets.filter((subnet) => Address4.isValid(subnet.subnet));
+    const ipv6Subnets = machineSubnets.filter((subnet) => Address6.isValid(subnet.subnet));
+
     let currentDisplayValue = itemsSubnets[0].label; // The placeholder is the fallback
     if (field.value) {
       const subnetItem = itemsSubnets.find((item) => item.value === field.value);
@@ -67,14 +73,65 @@ export const SubnetsDropdown = ({
       currentDisplayValue = itemsSubnets[1].label;
     }
 
-    return { itemsSubnets, currentDisplayValue: currentDisplayValue };
+    return { itemsSubnets, ipv4Subnets, ipv6Subnets, currentDisplayValue: currentDisplayValue };
   }, [machineSubnets, field.value]);
 
-  const dropdownItems = itemsSubnets.map(({ value, label, isDisabled }) => (
-    <DropdownItem key={value} id={value} isDisabled={isDisabled} value={value}>
-      {label}
-    </DropdownItem>
-  ));
+  const dropdownItems = React.useMemo(() => {
+    if (machineSubnets.length === 0) {
+      return [
+        <DropdownItem
+          key={noSubnetAvailableOption.value}
+          id={noSubnetAvailableOption.value}
+          isDisabled={noSubnetAvailableOption.isDisabled}
+          value={noSubnetAvailableOption.value}
+        >
+          {noSubnetAvailableOption.label}
+        </DropdownItem>,
+      ];
+    }
+
+    const hasIpv4 = ipv4Subnets.length > 0;
+    const hasIpv6 = ipv6Subnets.length > 0;
+
+    // If we have both IPv4 and IPv6, group them
+    if (hasIpv4 && hasIpv6) {
+      const ipv4Items = toFormSelectOptions(ipv4Subnets).map(({ value, label, isDisabled }) => (
+        <DropdownItem key={value} id={value} isDisabled={isDisabled} value={value}>
+          {label}
+        </DropdownItem>
+      ));
+
+      const ipv6Items = toFormSelectOptions(ipv6Subnets).map(({ value, label, isDisabled }) => (
+        <DropdownItem key={value} id={value} isDisabled={isDisabled} value={value}>
+          {label}
+        </DropdownItem>
+      ));
+
+      return [
+        <DropdownItem
+          key={makeNoSubnetSelectedOption(machineSubnets.length).value}
+          id={makeNoSubnetSelectedOption(machineSubnets.length).value}
+          isDisabled={makeNoSubnetSelectedOption(machineSubnets.length).isDisabled}
+          value={makeNoSubnetSelectedOption(machineSubnets.length).value}
+        >
+          {makeNoSubnetSelectedOption(machineSubnets.length).label}
+        </DropdownItem>,
+        <DropdownGroup label="IPv4" key="ipv4-group">
+          {ipv4Items}
+        </DropdownGroup>,
+        <DropdownGroup label="IPv6" key="ipv6-group">
+          {ipv6Items}
+        </DropdownGroup>,
+      ];
+    }
+
+    // If only one type, don't group
+    return itemsSubnets.map(({ value, label, isDisabled }) => (
+      <DropdownItem key={value} id={value} isDisabled={isDisabled} value={value}>
+        {label}
+      </DropdownItem>
+    ));
+  }, [machineSubnets, ipv4Subnets, ipv6Subnets, itemsSubnets]);
 
   const onSelect = (event?: React.MouseEvent<Element, MouseEvent>): void => {
     setValue(event?.currentTarget.id);
@@ -100,7 +157,7 @@ export const SubnetsDropdown = ({
     <Dropdown
       {...field}
       id={`${fieldId}-dropdown`}
-      onOpenChange={() => setOpen(!isOpen)}
+      onOpenChange={(isOpen: boolean) => setOpen(isOpen)}
       onSelect={onSelect}
       toggle={toggle}
       isOpen={isOpen}

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

@@ -16,7 +16,6 @@ import {
   NETWORK_TYPE_SDN,
   selectMachineNetworkCIDR,
   getVipValidationsById,
-  DUAL_STACK,
   PopoverIcon,
   selectApiVip,
   selectIngressVip,
@@ -117,7 +116,6 @@ export const VirtualIPControlGroup = ({
     setFieldValue(field, [{ ip: e.target.value, clusterId: cluster.id }], true);
   };
 
-  const ipFieldsSuffix = values.stackType === DUAL_STACK ? ' (IPv4)' : '';
   return (
     <>
       {!isVipDhcpAllocationDisabled && (
@@ -145,7 +143,7 @@ export const VirtualIPControlGroup = ({
           <FormikStaticField
             label={
               <>
-                <span>API IP{ipFieldsSuffix}</span> <PopoverIcon bodyContent={ipPopoverContent} />
+                <span>API IP</span> <PopoverIcon bodyContent={ipPopoverContent} />
               </>
             }
             name="apiVip"
@@ -164,8 +162,7 @@ export const VirtualIPControlGroup = ({
           <FormikStaticField
             label={
               <>
-                <span>Ingress IP{ipFieldsSuffix}</span>{' '}
-                <PopoverIcon bodyContent={ipPopoverContent} />
+                <span>Ingress IP</span> <PopoverIcon bodyContent={ipPopoverContent} />
               </>
             }
             name="ingressVip"
@@ -191,8 +188,7 @@ export const VirtualIPControlGroup = ({
                   <OcmInputField
                     label={
                       <>
-                        <span>API IP{ipFieldsSuffix}</span>{' '}
-                        <PopoverIcon bodyContent={ipPopoverContent} />
+                        <span>API IP</span> <PopoverIcon bodyContent={ipPopoverContent} />
                       </>
                     }
                     name="apiVips.0.ip"
@@ -208,8 +204,7 @@ export const VirtualIPControlGroup = ({
                     name="ingressVips.0.ip"
                     label={
                       <>
-                        <span>Ingress IP{ipFieldsSuffix}</span>{' '}
-                        <PopoverIcon bodyContent={ipPopoverContent} />
+                        <span>Ingress IP</span> <PopoverIcon bodyContent={ipPopoverContent} />
                       </>
                     }
                     helperText={ipHelperText}

package/lib/ocm/components/clusterConfiguration/networkConfiguration/networkConfigurationValidation.ts

@@ -34,7 +34,7 @@ export const getNetworkInitialValues = (
   isClusterManagedNetworkingUnsupported: boolean,
 ): NetworkConfigurationValues => {
   const isSNOCluster = isSNO(cluster);
-  const isDualStackType = isDualStack(cluster);
+  const isDualStackType = isDualStack({ ...cluster, openshiftVersion: cluster.openshiftVersion });
 
   return {
     apiVips: cluster.apiVips,
@@ -54,18 +54,25 @@ export const getNetworkInitialValues = (
       cluster.clusterNetworks ||
       (isDualStackType
         ? defaultNetworkValues.clusterNetworksDualstack
-        : defaultNetworkValues.clusterNetworksIpv4),
+        : defaultNetworkValues.clusterNetworksIpv4?.map((network) => ({
+            ...network,
+            clusterId: cluster.id,
+          }))),
     serviceNetworks:
       cluster.serviceNetworks ||
       (isDualStackType
         ? defaultNetworkValues.serviceNetworksDualstack
-        : defaultNetworkValues.serviceNetworksIpv4),
+        : defaultNetworkValues.serviceNetworksIpv4?.map((network) => ({
+            ...network,
+            clusterId: cluster.id,
+          }))),
   };
 };
 
 export const getNetworkConfigurationValidationSchema = (
   initialValues: NetworkConfigurationValues,
   hostSubnets: HostSubnets,
+  openshiftVersion?: string,
 ) =>
   Yup.lazy((values: NetworkConfigurationValues) =>
     Yup.object<NetworkConfigurationValues>().shape({
@@ -85,7 +92,7 @@ export const getNetworkConfigurationValidationSchema = (
               otherwise: () =>
                 values.machineNetworks && values.machineNetworks?.length >= 2
                   ? machineNetworksValidationSchema.concat(
-                      dualStackValidationSchema('machine networks'),
+                      dualStackValidationSchema('machine networks', openshiftVersion),
                     )
                   : Yup.array(),
             }),
@@ -94,7 +101,9 @@ export const getNetworkConfigurationValidationSchema = (
         then: () => clusterNetworksValidationSchema.concat(IPv4ValidationSchema),
         otherwise: () =>
           values.clusterNetworks && values.clusterNetworks?.length >= 2
-            ? clusterNetworksValidationSchema.concat(dualStackValidationSchema('cluster network'))
+            ? clusterNetworksValidationSchema.concat(
+                dualStackValidationSchema('cluster network', openshiftVersion),
+              )
             : Yup.array(),
       }),
       serviceNetworks: serviceNetworkValidationSchema.when('stackType', {
@@ -102,7 +111,9 @@ export const getNetworkConfigurationValidationSchema = (
         then: () => serviceNetworkValidationSchema.concat(IPv4ValidationSchema),
         otherwise: () =>
           values.serviceNetworks && values.serviceNetworks?.length >= 2
-            ? serviceNetworkValidationSchema.concat(dualStackValidationSchema('service network'))
+            ? serviceNetworkValidationSchema.concat(
+                dualStackValidationSchema('service network', openshiftVersion),
+              )
             : Yup.array(),
       }),
     }),

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

@@ -58,7 +58,16 @@ export const ReviewNetworkingTable = ({ cluster }: { cluster: Cluster }) => {
             )),
             props: { 'data-testid': 'machine-networks' },
           },
-          isDualStack(cluster) ? { title: 'Primary' } : { title: '' },
+          isDualStack({ ...cluster, openshiftVersion: cluster.openshiftVersion })
+            ? {
+                title: cluster.machineNetworks?.map((network, index) => (
+                  <span key={network.cidr}>
+                    {index === 0 ? 'Primary' : 'Secondary'}
+                    <br />
+                  </span>
+                )),
+              }
+            : { title: '' },
         ],
       });
 
@@ -106,7 +115,14 @@ export const ReviewNetworkingTable = ({ cluster }: { cluster: Cluster }) => {
             )),
             props: { 'data-testid': 'cluster-network-cidr' },
           },
-          isDualStack(cluster) && { title: 'Primary' },
+          isDualStack({ ...cluster, openshiftVersion: cluster.openshiftVersion }) && {
+            title: cluster.clusterNetworks?.map((network, index) => (
+              <span key={network.cidr}>
+                {index === 0 ? 'Primary' : 'Secondary'}
+                <br />
+              </span>
+            )),
+          },
         ].filter(Boolean),
       },
       {
@@ -122,7 +138,14 @@ export const ReviewNetworkingTable = ({ cluster }: { cluster: Cluster }) => {
             )),
             props: { 'data-testid': 'cluster-network-prefix' },
           },
-          isDualStack(cluster) && { title: 'Primary' },
+          isDualStack({ ...cluster, openshiftVersion: cluster.openshiftVersion }) && {
+            title: cluster.clusterNetworks?.map((network, index) => (
+              <span key={network.hostPrefix}>
+                {index === 0 ? 'Primary' : 'Secondary'}
+                <br />
+              </span>
+            )),
+          },
         ].filter(Boolean),
       },
       {
@@ -138,7 +161,14 @@ export const ReviewNetworkingTable = ({ cluster }: { cluster: Cluster }) => {
             )),
             props: { 'data-testid': 'service-network-cidr' },
           },
-          isDualStack(cluster) && { title: 'Primary' },
+          isDualStack({ ...cluster, openshiftVersion: cluster.openshiftVersion }) && {
+            title: cluster.serviceNetworks?.map((network, index) => (
+              <span key={network.cidr}>
+                {index === 0 ? 'Primary' : 'Secondary'}
+                <br />
+              </span>
+            )),
+          },
         ].filter(Boolean),
       },
       {

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

@@ -1,9 +1,8 @@
 import React from 'react';
 import {
+  Content,
   Divider,
   ExpandableSection,
-  Flex,
-  FlexItem,
   Grid,
   GridItem,
   gridSpans,
@@ -94,12 +93,9 @@ const PreflightCheckInfo = ({
 }) => {
   return (
     <GridItem span={span} offset={offset} className={className}>
-      <Flex spaceItems={{ default: 'spaceItemsSm' }} alignItems={{ default: 'alignItemsCenter' }}>
-        <FlexItem style={{ display: 'flex', alignItems: 'center' }}>{icon}</FlexItem>
-        <FlexItem style={{ display: 'flex', alignItems: 'center' }}>
-          <b>{title}</b>
-        </FlexItem>
-      </Flex>
+      <Content className="pf-v6-u-text-wrap pf-v6-u-font-weight-bold">
+        {icon} {title}
+      </Content>
     </GridItem>
   );
 };
@@ -186,7 +182,9 @@ const ReviewPreflightChecks = ({ cluster }: { cluster: Cluster }) => {
       <ExpandableSection
         toggleContent={
           <Grid>
-            <GridItem span={2}>Preflight checks</GridItem>
+            <GridItem span={2} className="pf-v6-u-text-wrap">
+              Preflight checks
+            </GridItem>
             {!isChecksExpanded && <PreflightChecksDetailCollapsed cluster={cluster} />}
           </Grid>
         }