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

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 {
@@ -17,10 +16,6 @@ import {
 } from '../../../../common';
 import { OcmInputField } from '../../ui/OcmFormFields';
 
-const getNetworkLabelSuffix = (index: number, isDualStack: boolean) => {
-  return isDualStack ? ` (${index === 0 ? 'IPv4' : 'IPv6'})` : '';
-};
-
 const IPv4PrefixPopoverText =
   'For example, if Cluster Network Host Prefix is set to 23, then each node is assigned a /23 subnet out of the given cidr (clusterNetworkCIDR), which allows for 510 (2^(32 - 23) - 2) pod IPs addresses.';
 
@@ -62,20 +57,19 @@ const AdvancedNetworkFields = () => {
   );
 
   return (
-    <Grid hasGutter className="pf-v5-u-ml-lg">
+    <Grid 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 key={index} className="pf-v6-u-pb-md">
+                  <GridItem className={'network-field-group'}>
                     <OcmInputField
                       name={`clusterNetworks.${index}.cidr`}
                       label={
                         <>
-                          <span>{`Cluster network CIDR${networkSuffix} `}</span>
+                          <span>Cluster network CIDR </span>
                           <PopoverIcon
                             bodyContent={'IP address blocks from which Pod IPs are allocated.'}
                           />
@@ -83,15 +77,15 @@ const AdvancedNetworkFields = () => {
                       }
                       helperText={clusterCidrHelperText}
                       isRequired
-                      labelInfo={index === 0 && isDualStack ? 'Primary' : ''}
+                      labelInfo={isDualStack ? (index === 0 ? 'Primary' : 'Secondary') : ''}
                     />
-                  </StackItem>
-                  <StackItem className={'network-field-group pf-v5-u-pb-md'}>
+                  </GridItem>
+                  <GridItem className={'network-field-group'}>
                     <OcmInputField
                       name={`clusterNetworks.${index}.hostPrefix`}
                       label={
                         <>
-                          <span>Cluster network host prefix{networkSuffix} </span>
+                          <span>Cluster network host prefix </span>
                           <PopoverIcon
                             bodyContent={clusterNetworkHostPrefixPopoverText(index)}
                             minWidth="30rem"
@@ -108,8 +102,8 @@ const AdvancedNetworkFields = () => {
                       helperText={ClusterPrefixHelperText}
                       isRequired
                     />
-                  </StackItem>
-                </Stack>
+                  </GridItem>
+                </Grid>
               );
             })}
           </FormGroup>
@@ -124,14 +118,12 @@ 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'}>
                 <OcmInputField
                   name={`serviceNetworks.${index}.cidr`}
                   label={
                     <>
-                      <span>
-                        {`Service network CIDR${getNetworkLabelSuffix(index, isDualStack)} `}
-                      </span>
+                      <span>Service network CIDR </span>
                       <PopoverIcon
                         bodyContent={'The IP address pool used for service IP addresses.'}
                       />
@@ -139,9 +131,9 @@ const AdvancedNetworkFields = () => {
                   }
                   helperText={serviceCidrHelperText}
                   isRequired
-                  labelInfo={index === 0 && isDualStack ? 'Primary' : ''}
+                  labelInfo={isDualStack ? (index === 0 ? 'Primary' : 'Secondary') : ''}
                 />
-              </StackItem>
+              </GridItem>
             ))}
           </FormGroup>
         )}

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

@@ -9,9 +9,11 @@ import {
   NetworkConfigurationValues,
   DUAL_STACK,
   NO_SUBNET_SET,
+  isMajorMinorVersionEqualOrGreater,
 } from '../../../../common';
 import { selectCurrentClusterPermissionsState } from '../../../store/slices/current-cluster/selectors';
 import { SubnetsDropdown } from './SubnetsDropdown';
+import { reorderNetworksForPrimary } from './reorderNetworks';
 import { Cluster, MachineNetwork } from '@openshift-assisted/types/assisted-installer-service';
 
 const subnetSort = (subA: HostSubnet, subB: HostSubnet) =>
@@ -25,7 +27,7 @@ const useAutoSelectSingleAvailableSubnet = (
 ) => {
   useEffect(() => {
     if (autoSelectNetwork) {
-      setFieldValue('machineNetworks', [{ cidr, clusterId }], true);
+      setFieldValue('machineNetworks', [{ cidr, clusterId }], false);
     }
   }, [autoSelectNetwork, cidr, clusterId, setFieldValue]);
 };
@@ -35,6 +37,7 @@ export interface AvailableSubnetsControlProps {
   hostSubnets: HostSubnet[];
   isRequired: boolean;
   isDisabled: boolean;
+  openshiftVersion?: string;
 }
 
 export const AvailableSubnetsControl = ({
@@ -42,11 +45,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,51 +62,147 @@ 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);
 
+  // Ensure primary and secondary machine networks are not duplicated.
+  // If the user switches primary to the same CIDR as secondary, adjust secondary to the opposite family or clear it.
+  React.useEffect(() => {
+    if (!isDualStack) {
+      return;
+    }
+    if (!values.machineNetworks || values.machineNetworks.length < 2) {
+      return;
+    }
+    const first = values.machineNetworks?.[0]?.cidr || '';
+    const second = values.machineNetworks?.[1]?.cidr || '';
+    if (!first || !second) {
+      return;
+    }
+    if (first === second) {
+      if (Address6.isValid(first)) {
+        const nextIPv4 = IPv4Subnets[0]?.subnet || NO_SUBNET_SET;
+        const replacement = nextIPv4 !== first ? nextIPv4 : NO_SUBNET_SET;
+        if (replacement !== second) {
+          setFieldValue('machineNetworks.1.cidr', replacement, false);
+        }
+      } else if (Address4.isValid(first)) {
+        const nextIPv6 = IPv6Subnets[0]?.subnet || NO_SUBNET_SET;
+        const replacement = nextIPv6 !== first ? nextIPv6 : NO_SUBNET_SET;
+        if (replacement !== second) {
+          setFieldValue('machineNetworks.1.cidr', replacement, false);
+        }
+      } else {
+        if (second !== NO_SUBNET_SET) {
+          setFieldValue('machineNetworks.1.cidr', NO_SUBNET_SET, false);
+        }
+      }
+    }
+  }, [isDualStack, values.machineNetworks, IPv4Subnets, IPv6Subnets, setFieldValue]);
+
   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}
-                    />
-                  </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}
+                        onAfterSelect={(newSelection) =>
+                          reorderNetworksForPrimary(newSelection, values, setFieldValue)
+                        }
+                        data-testid={`subnets-dropdown-toggle-${index ? 'ipv6' : 'ipv4'}`}
+                      />
+                    </StackItem>
+                  );
+                })
+              ) : (
+                <StackItem>
+                  <SubnetsDropdown
+                    name={`machineNetworks.0.cidr`}
+                    machineSubnets={IPv4Subnets}
+                    isDisabled={isDisabled}
+                    onAfterSelect={(newSelection) =>
+                      reorderNetworksForPrimary(newSelection, values, setFieldValue)
+                    }
+                    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-${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

@@ -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,
@@ -92,7 +92,7 @@ const NetworkConfigurationForm: React.FC<{
           JSON.stringify(
             JSON.stringify({
               featureSet: 'CustomNoUpgrade',
-              featureGates: ['NoRegistryClusterOperations=true'],
+              featureGates: ['NoRegistryClusterInstall=true'],
             }),
           ),
         );
@@ -153,9 +153,7 @@ const NetworkConfigurationForm: React.FC<{
             </Grid>
           </GridItem>
           <GridItem>
-            <TextContent>
-              <Text component="h2">Host inventory</Text>
-            </TextContent>
+            <Content component="h2">Host inventory</Content>
             <NetworkConfigurationTable cluster={cluster} />
           </GridItem>
         </Grid>
@@ -202,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,
@@ -18,6 +18,7 @@ import { ConfirmationModal, PopoverIcon } from '../../../../common/components/ui
 import { useDefaultConfiguration } from '../ClusterDefaultConfigurationContext';
 import { selectCurrentClusterPermissionsState } from '../../../store/slices/current-cluster/selectors';
 import { OcmRadioField } from '../../ui/OcmFormFields';
+import { reorderNetworksByCurrentPrimary } from './reorderNetworks';
 import {
   Cluster,
   ClusterNetwork,
@@ -68,23 +69,93 @@ export const StackTypeControlGroup = ({
   const setSingleStack = React.useCallback(() => {
     setFieldValue('stackType', IPV4_STACK);
 
+    // Determine whether the first machine network is IPv4
+    const firstNetwork = values.machineNetworks?.[0];
+    const isFirstIPv4 = Boolean(firstNetwork?.cidr && Address4.isValid(firstNetwork.cidr));
+
     if (values.machineNetworks && values.machineNetworks?.length >= 2) {
-      setFieldValue('machineNetworks', values.machineNetworks.slice(0, 1));
+      // For single-stack IPv4, prefer IPv4 machine network
+      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', []);
+        }
+      }
+    }
+    // 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.clusterNetworks && values.clusterNetworks?.length >= 2) {
-      setFieldValue('clusterNetworks', values.clusterNetworks.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]);
     }
-    if (values.serviceNetworks && values.serviceNetworks?.length >= 2) {
-      setFieldValue('serviceNetworks', values.serviceNetworks.slice(0, 1));
+
+    // Keep only IPv4 VIPs when switching to single-stack (unless DHCP allocation is used)
+    if (!values.vipDhcpAllocation) {
+      const pruneVips = (
+        vips?: { ip?: string; clusterId?: Cluster['id'] }[],
+      ): { ip: string; clusterId: Cluster['id'] }[] => {
+        if (!vips || vips.length === 0) return [];
+        // Choose which index to keep based on whether the first network is IPv4
+        const keepIndex = isFirstIPv4 ? 0 : 1;
+        const chosen = vips[keepIndex];
+        return chosen && chosen.ip
+          ? [{ ip: chosen.ip, clusterId: chosen.clusterId || clusterId }]
+          : [];
+      };
+
+      setFieldValue('apiVips', pruneVips(values.apiVips));
+      setFieldValue('ingressVips', pruneVips(values.ingressVips));
     }
 
     void validateForm();
   }, [
     setFieldValue,
     validateForm,
+    clusterId,
+    defaultNetworkValues.clusterNetworksIpv4,
+    defaultNetworkValues.serviceNetworksIpv4,
     values.clusterNetworks,
     values.machineNetworks,
     values.serviceNetworks,
+    values.apiVips,
+    values.ingressVips,
+    values.vipDhcpAllocation,
   ]);
 
   const setDualStack = () => {
@@ -96,11 +167,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(
@@ -126,6 +216,8 @@ export const StackTypeControlGroup = ({
         false,
       );
     }
+    // Ensure cluster/service networks ordering matches the new primary family
+    reorderNetworksByCurrentPrimary(values, setFieldValue);
   };
 
   const setStackType = (e: React.ChangeEvent<HTMLInputElement>) => {