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

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

@@ -3,9 +3,10 @@ import {
   Alert,
   AlertVariant,
   FormGroup,
-  GridItem,
+  StackItem,
   TextInputTypes,
   Grid,
+  Stack,
 } from '@patternfly/react-core';
 import { FieldArray, useFormikContext } from 'formik';
 import {
@@ -16,6 +17,10 @@ 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.';
 
@@ -57,19 +62,20 @@ const AdvancedNetworkFields = () => {
   );
 
   return (
-    <Grid className="pf-v6-u-ml-lg">
+    <Grid hasGutter className="pf-v5-u-ml-lg">
       <FieldArray name="clusterNetworks">
         {() => (
           <FormGroup fieldId="clusterNetworks" labelInfo={isDualStack && 'Primary'}>
             {values.clusterNetworks?.map((_, index) => {
+              const networkSuffix = getNetworkLabelSuffix(index, isDualStack);
               return (
-                <Grid key={index} className="pf-v6-u-pb-md">
-                  <GridItem className={'network-field-group'}>
+                <Stack key={index}>
+                  <StackItem className={'network-field-group pf-v5-u-pb-md'}>
                     <OcmInputField
                       name={`clusterNetworks.${index}.cidr`}
                       label={
                         <>
-                          <span>Cluster network CIDR </span>
+                          <span>{`Cluster network CIDR${networkSuffix} `}</span>
                           <PopoverIcon
                             bodyContent={'IP address blocks from which Pod IPs are allocated.'}
                           />
@@ -77,15 +83,15 @@ const AdvancedNetworkFields = () => {
                       }
                       helperText={clusterCidrHelperText}
                       isRequired
-                      labelInfo={isDualStack ? (index === 0 ? 'Primary' : 'Secondary') : ''}
+                      labelInfo={index === 0 && isDualStack ? 'Primary' : ''}
                     />
-                  </GridItem>
-                  <GridItem className={'network-field-group'}>
+                  </StackItem>
+                  <StackItem className={'network-field-group pf-v5-u-pb-md'}>
                     <OcmInputField
                       name={`clusterNetworks.${index}.hostPrefix`}
                       label={
                         <>
-                          <span>Cluster network host prefix </span>
+                          <span>Cluster network host prefix{networkSuffix} </span>
                           <PopoverIcon
                             bodyContent={clusterNetworkHostPrefixPopoverText(index)}
                             minWidth="30rem"
@@ -102,8 +108,8 @@ const AdvancedNetworkFields = () => {
                       helperText={ClusterPrefixHelperText}
                       isRequired
                     />
-                  </GridItem>
-                </Grid>
+                  </StackItem>
+                </Stack>
               );
             })}
           </FormGroup>
@@ -118,12 +124,14 @@ const AdvancedNetworkFields = () => {
         {() => (
           <FormGroup fieldId="serviceNetworks" labelInfo={isDualStack && 'Primary'}>
             {values.serviceNetworks?.map((_, index) => (
-              <GridItem key={index} className={'network-field-group'}>
+              <StackItem key={index} className={'network-field-group pf-v5-u-pb-md'}>
                 <OcmInputField
                   name={`serviceNetworks.${index}.cidr`}
                   label={
                     <>
-                      <span>Service network CIDR </span>
+                      <span>
+                        {`Service network CIDR${getNetworkLabelSuffix(index, isDualStack)} `}
+                      </span>
                       <PopoverIcon
                         bodyContent={'The IP address pool used for service IP addresses.'}
                       />
@@ -131,9 +139,9 @@ const AdvancedNetworkFields = () => {
                   }
                   helperText={serviceCidrHelperText}
                   isRequired
-                  labelInfo={isDualStack ? (index === 0 ? 'Primary' : 'Secondary') : ''}
+                  labelInfo={index === 0 && isDualStack ? 'Primary' : ''}
                 />
-              </GridItem>
+              </StackItem>
             ))}
           </FormGroup>
         )}

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

@@ -9,11 +9,9 @@ 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) =>
@@ -27,7 +25,7 @@ const useAutoSelectSingleAvailableSubnet = (
 ) => {
   useEffect(() => {
     if (autoSelectNetwork) {
-      setFieldValue('machineNetworks', [{ cidr, clusterId }], false);
+      setFieldValue('machineNetworks', [{ cidr, clusterId }], true);
     }
   }, [autoSelectNetwork, cidr, clusterId, setFieldValue]);
 };
@@ -37,7 +35,6 @@ export interface AvailableSubnetsControlProps {
   hostSubnets: HostSubnet[];
   isRequired: boolean;
   isDisabled: boolean;
-  openshiftVersion?: string;
 }
 
 export const AvailableSubnetsControl = ({
@@ -45,16 +42,11 @@ 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);
@@ -62,147 +54,51 @@ 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) => {
-                  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 (
+    <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>
                 <SubnetsDropdown
-                  name={`machineNetworks.${index}.cidr`}
-                  machineSubnets={machineSubnets}
+                  name={`machineNetworks.0.cidr`}
+                  machineSubnets={IPv4Subnets}
                   isDisabled={isDisabled}
-                  data-testid={`subnets-dropdown-toggle-${index ? 'ipv6' : 'ipv4'}`}
                 />
-              );
-            }}
-          </FieldArray>
-        </FormGroup>
+              </StackItem>
+            )}
+          </Stack>
+        )}
+      </FieldArray>
+
+      {typeof errors.machineNetworks === 'string' && (
+        <Alert variant={AlertVariant.warning} title={errors.machineNetworks} isInline />
       )}
-    </>
+    </FormGroup>
   );
 };

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

@@ -224,10 +224,10 @@ const NetworkConfiguration = ({
   );
 
   React.useEffect(() => {
-    if (!isViewerMode && isDualStack) {
+    if (!isViewerMode && isDualStack && !isUserManagedNetworking) {
       toggleAdvConfiguration(true);
     }
-  }, [isDualStack, isViewerMode, toggleAdvConfiguration]);
+  }, [isDualStack, isUserManagedNetworking, isViewerMode, toggleAdvConfiguration]);
 
   const managedNetworkingState = React.useMemo(
     () =>
@@ -292,7 +292,6 @@ 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, Content } from '@patternfly/react-core';
+import { Form, Grid, GridItem, Text, TextContent } from '@patternfly/react-core';
 import {
   ClusterWizardStep,
   ClusterWizardStepHeader,
@@ -92,7 +92,7 @@ const NetworkConfigurationForm: React.FC<{
           JSON.stringify(
             JSON.stringify({
               featureSet: 'CustomNoUpgrade',
-              featureGates: ['NoRegistryClusterInstall=true'],
+              featureGates: ['NoRegistryClusterOperations=true'],
             }),
           ),
         );
@@ -153,7 +153,9 @@ const NetworkConfigurationForm: React.FC<{
             </Grid>
           </GridItem>
           <GridItem>
-            <Content component="h2">Host inventory</Content>
+            <TextContent>
+              <Text component="h2">Host inventory</Text>
+            </TextContent>
             <NetworkConfigurationTable cluster={cluster} />
           </GridItem>
         </Grid>
@@ -200,9 +202,8 @@ const NetworkConfigurationPage = ({ cluster }: { cluster: Cluster }) => {
   );
 
   const memoizedValidationSchema = React.useMemo(
-    () =>
-      getNetworkConfigurationValidationSchema(initialValues, hostSubnets, cluster.openshiftVersion),
-    [hostSubnets, initialValues, cluster.openshiftVersion],
+    () => getNetworkConfigurationValidationSchema(initialValues, hostSubnets),
+    [hostSubnets, initialValues],
   );
 
   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 { Address4, Address6 } from 'ip-address';
+import { Address6 } from 'ip-address';
 
 import {
   HostSubnets,
@@ -18,7 +18,6 @@ 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,
@@ -69,93 +68,23 @@ 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) {
-      // 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]);
+      setFieldValue('machineNetworks', values.machineNetworks.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.clusterNetworks && values.clusterNetworks?.length >= 2) {
+      setFieldValue('clusterNetworks', values.clusterNetworks.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));
+    if (values.serviceNetworks && values.serviceNetworks?.length >= 2) {
+      setFieldValue('serviceNetworks', values.serviceNetworks.slice(0, 1));
     }
 
     void validateForm();
   }, [
     setFieldValue,
     validateForm,
-    clusterId,
-    defaultNetworkValues.clusterNetworksIpv4,
-    defaultNetworkValues.serviceNetworksIpv4,
     values.clusterNetworks,
     values.machineNetworks,
     values.serviceNetworks,
-    values.apiVips,
-    values.ingressVips,
-    values.vipDhcpAllocation,
   ]);
 
   const setDualStack = () => {
@@ -167,30 +96,11 @@ export const StackTypeControlGroup = ({
     }
 
     if (values.machineNetworks && values.machineNetworks?.length < 2) {
-      // 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,
-        );
-      }
+      setFieldValue(
+        'machineNetworks',
+        [...values.machineNetworks, { cidr: cidrIPv6, clusterId: clusterId }],
+        false,
+      );
     }
     if (values.clusterNetworks && values.clusterNetworks?.length < 2) {
       setFieldValue(
@@ -216,8 +126,6 @@ export const StackTypeControlGroup = ({
         false,
       );
     }
-    // Ensure cluster/service networks ordering matches the new primary family
-    reorderNetworksByCurrentPrimary(values, setFieldValue);
   };
 
   const setStackType = (e: React.ChangeEvent<HTMLInputElement>) => {