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

package/lib/{ocm/components/clusterConfiguration/networkConfiguration → common/components/clusterWizard/networkingSteps}/AdvancedNetworkFields.tsx

@@ -8,31 +8,19 @@ import {
   Grid,
 } from '@patternfly/react-core';
 import { FieldArray, useFormikContext } from 'formik';
-import {
-  DUAL_STACK,
-  PREFIX_MAX_RESTRICTION,
-  NetworkConfigurationValues,
-  PopoverIcon,
-} from '../../../../common';
-import { OcmInputField } from '../../ui/OcmFormFields';
-
-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.';
-
-const IPv6PrefixPopoverText =
-  'For example, if Cluster Network Host Prefix is set to 116, then each node is assigned a /116 subnet out of the given cidr (clusterNetworkCIDR), which allows for 4,094 (2^(128 - 116) - 2) pod IPs addresses.';
-
-const ClusterPrefixHelperText =
-  'Defines how big the subnets for each individual node are out of the given CIDR. Must enter a whole number.';
-
-const clusterCidrHelperText =
-  'The block must not overlap with existing physical networks. To access the Pods from an external network, configure load balancers and routers to manage the traffic.';
+import { NetworkConfigurationValues } from '../../../types';
+import { DUAL_STACK, PREFIX_MAX_RESTRICTION } from '../../../config';
+import { PopoverIcon } from '../../ui';
+import { InputField } from '../../ui/formik';
+import { useTranslation } from '../../../hooks/use-translation-wrapper';
 
-const serviceCidrHelperText =
-  'Enter only 1 IP address pool. If you need to access the services from an external network, configure load balancers and routers to manage the traffic.';
+export type AdvancedNetworkFieldsProps = {
+  isDisabled?: boolean;
+};
 
-const AdvancedNetworkFields = () => {
+const AdvancedNetworkFields = ({ isDisabled = false }: AdvancedNetworkFieldsProps) => {
   const { values, errors } = useFormikContext<NetworkConfigurationValues>();
+  const { t } = useTranslation();
 
   const isDualStack = values.stackType === DUAL_STACK;
 
@@ -43,15 +31,36 @@ const AdvancedNetworkFields = () => {
 
   const isSubnetIPv6 = (index: number) => (isDualStack ? !!index : false);
 
+  const IPv4PrefixPopoverText = t(
+    'ai: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.',
+  );
+
+  const IPv6PrefixPopoverText = t(
+    'ai:For example, if Cluster Network Host Prefix is set to 116, then each node is assigned a /116 subnet out of the given cidr (clusterNetworkCIDR), which allows for 4,094 (2^(128 - 116) - 2) pod IPs addresses.',
+  );
+
+  const clusterPrefixHelperText = t(
+    'ai:Defines how big the subnets for each individual node are out of the given CIDR. Must enter a whole number.',
+  );
+
+  const clusterCidrHelperText = t(
+    'ai:The block must not overlap with existing physical networks. To access the Pods from an external network, configure load balancers and routers to manage the traffic.',
+  );
+
+  const serviceCidrHelperText = t(
+    'ai:Enter only 1 IP address pool. If you need to access the services from an external network, configure load balancers and routers to manage the traffic.',
+  );
+
   const clusterNetworkHostPrefixPopoverText = (index: number) => (
     <>
       <p>
-        The subnet prefix length to assign to each individual node.{' '}
+        {t('ai:The subnet prefix length to assign to each individual node.')}{' '}
         {isSubnetIPv6(index) ? IPv6PrefixPopoverText : IPv4PrefixPopoverText}
       </p>
       <p>
-        If you are required to provide access to nodes from an external network, configure load
-        balancers and routers to manage the traffic.
+        {t(
+          'ai:If you are required to provide access to nodes from an external network, configure load balancers and routers to manage the traffic.',
+        )}
       </p>
     </>
   );
@@ -60,32 +69,37 @@ const AdvancedNetworkFields = () => {
     <Grid className="pf-v6-u-ml-lg">
       <FieldArray name="clusterNetworks">
         {() => (
-          <FormGroup fieldId="clusterNetworks" labelInfo={isDualStack && 'Primary'}>
+          <FormGroup fieldId="clusterNetworks" labelInfo={isDualStack && t('ai:Primary')}>
             {values.clusterNetworks?.map((_, index) => {
               return (
                 <Grid key={index} className="pf-v6-u-pb-md">
                   <GridItem className={'network-field-group'}>
-                    <OcmInputField
+                    <InputField
                       name={`clusterNetworks.${index}.cidr`}
                       label={
                         <>
-                          <span>Cluster network CIDR </span>
+                          <span>{t('ai:Cluster network CIDR')} </span>
                           <PopoverIcon
-                            bodyContent={'IP address blocks from which Pod IPs are allocated.'}
+                            bodyContent={t(
+                              'ai:IP address blocks from which Pod IPs are allocated.',
+                            )}
                           />
                         </>
                       }
                       helperText={clusterCidrHelperText}
                       isRequired
-                      labelInfo={isDualStack ? (index === 0 ? 'Primary' : 'Secondary') : ''}
+                      isDisabled={isDisabled}
+                      labelInfo={
+                        isDualStack ? (index === 0 ? t('ai:Primary') : t('ai:Secondary')) : ''
+                      }
                     />
                   </GridItem>
                   <GridItem className={'network-field-group'}>
-                    <OcmInputField
+                    <InputField
                       name={`clusterNetworks.${index}.hostPrefix`}
                       label={
                         <>
-                          <span>Cluster network host prefix </span>
+                          <span>{t('ai:Cluster network host prefix')} </span>
                           <PopoverIcon
                             bodyContent={clusterNetworkHostPrefixPopoverText(index)}
                             minWidth="30rem"
@@ -99,8 +113,9 @@ const AdvancedNetworkFields = () => {
                           ? PREFIX_MAX_RESTRICTION.IPv6
                           : PREFIX_MAX_RESTRICTION.IPv4
                       }
-                      helperText={ClusterPrefixHelperText}
+                      helperText={clusterPrefixHelperText}
                       isRequired
+                      isDisabled={isDisabled}
                     />
                   </GridItem>
                 </Grid>
@@ -116,22 +131,23 @@ const AdvancedNetworkFields = () => {
 
       <FieldArray name="serviceNetworks">
         {() => (
-          <FormGroup fieldId="serviceNetworks" labelInfo={isDualStack && 'Primary'}>
+          <FormGroup fieldId="serviceNetworks" labelInfo={isDualStack && t('ai:Primary')}>
             {values.serviceNetworks?.map((_, index) => (
               <GridItem key={index} className={'network-field-group'}>
-                <OcmInputField
+                <InputField
                   name={`serviceNetworks.${index}.cidr`}
                   label={
                     <>
-                      <span>Service network CIDR </span>
+                      <span>{t('ai:Service network CIDR')} </span>
                       <PopoverIcon
-                        bodyContent={'The IP address pool used for service IP addresses.'}
+                        bodyContent={t('ai:The IP address pool used for service IP addresses.')}
                       />
                     </>
                   }
                   helperText={serviceCidrHelperText}
                   isRequired
-                  labelInfo={isDualStack ? (index === 0 ? 'Primary' : 'Secondary') : ''}
+                  isDisabled={isDisabled}
+                  labelInfo={isDualStack ? (index === 0 ? t('ai:Primary') : t('ai:Secondary')) : ''}
                 />
               </GridItem>
             ))}

package/lib/common/components/clusterWizard/networkingSteps/AvailableSubnetsControl.tsx

@@ -1,30 +1,156 @@
-import React from 'react';
-import { Alert, AlertActionLink, AlertVariant, Popover } from '@patternfly/react-core';
-import { HostSubnets } from '../../../types/clusters';
-import { Host } from '@openshift-assisted/types/assisted-installer-service';
-import { SelectField } from '../../ui';
-import { NO_SUBNET_SET } from '../../../config';
+import React, { useEffect } from 'react';
+import {
+  Alert,
+  AlertActionLink,
+  AlertVariant,
+  FormGroup,
+  Popover,
+  Stack,
+  StackItem,
+} from '@patternfly/react-core';
+import { FieldArray, useFormikContext, FormikHelpers } from 'formik';
+import { Address4, Address6 } from 'ip-address';
+
+import { HostSubnet, NetworkConfigurationValues } from '../../../types';
+import { DUAL_STACK, NO_SUBNET_SET } from '../../../config';
+import { isMajorMinorVersionEqualOrGreater } from '../../../utils';
 import { useTranslation } from '../../../hooks/use-translation-wrapper';
+import { SubnetsDropdown } from './SubnetsDropdown';
+import { reorderNetworksForPrimary } from './reorderNetworks';
+import {
+  Cluster,
+  Host,
+  MachineNetwork,
+} from '@openshift-assisted/types/assisted-installer-service';
+
+const subnetSort = (subA: HostSubnet, subB: HostSubnet) =>
+  subA.humanized.localeCompare(subB.humanized);
+
+const useAutoSelectDefaultMachineNetworks = (
+  autoSelectNetwork: boolean,
+  setFieldValue: FormikHelpers<NetworkConfigurationValues>['setFieldValue'],
+  cidrV4: MachineNetwork['cidr'],
+  cidrV6: MachineNetwork['cidr'],
+  clusterId: string,
+  isDualStack: boolean,
+) => {
+  useEffect(() => {
+    if (autoSelectNetwork) {
+      setFieldValue(
+        'machineNetworks',
+        isDualStack
+          ? [
+              { cidr: cidrV4, clusterId },
+              { cidr: cidrV6, clusterId },
+            ]
+          : [{ cidr: cidrV4, clusterId }],
+        false,
+      );
+    }
+  }, [autoSelectNetwork, cidrV4, cidrV6, clusterId, isDualStack, setFieldValue]);
+};
 
 export interface AvailableSubnetsControlProps {
-  hostSubnets: HostSubnets;
-  hosts: Host[];
+  clusterId: Cluster['id'];
+  hostSubnets: HostSubnet[];
   isRequired: boolean;
-  isMultiNodeCluster: boolean;
+  isDisabled: boolean;
+  openshiftVersion?: string;
+  isViewerMode?: boolean;
+  hosts?: Host[];
+  isMultiNodeCluster?: boolean;
 }
 
 export const AvailableSubnetsControl = ({
+  clusterId,
   hostSubnets,
-  hosts,
   isRequired = false,
-  isMultiNodeCluster,
+  isDisabled,
+  openshiftVersion,
+  isViewerMode = false,
+  hosts,
+  isMultiNodeCluster = true,
 }: AvailableSubnetsControlProps) => {
   const { t } = useTranslation();
-  const getHelperText = (value: string) => {
-    const matchingSubnet = hostSubnets.find((hn) => hn.subnet === value);
-    if (matchingSubnet && isMultiNodeCluster) {
+  const { values, errors, setFieldValue } = useFormikContext<NetworkConfigurationValues>();
+  const isDualStack = values.stackType === DUAL_STACK;
+
+  // 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);
+  const IPv6Subnets = hostSubnets
+    .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, prefer IPv4 as primary (even for dual-stack)
+  const cidrV4 = IPv4Subnets.length >= 1 ? IPv4Subnets[0].subnet : NO_SUBNET_SET;
+  const cidrV6 = IPv6Subnets.length >= 1 ? IPv6Subnets[0].subnet : NO_SUBNET_SET;
+  const hasEmptySelection = (values.machineNetworks ?? []).length === 0;
+  const autoSelectNetwork = !isViewerMode && hasEmptySelection;
+  useAutoSelectDefaultMachineNetworks(
+    autoSelectNetwork,
+    setFieldValue,
+    cidrV4,
+    cidrV6,
+    clusterId,
+    isDualStack,
+  );
+
+  // Ensure primary and secondary machine networks are not in the same stack (IPv4/IPv6).
+  // If the user switches primary to the same address family as secondary, adjust secondary to the opposite family
+  // (or clear it if no subnet is available).
+  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;
+    }
+
+    const firstIsV4 = Address4.isValid(first);
+    const firstIsV6 = Address6.isValid(first);
+    const secondIsV4 = Address4.isValid(second);
+    const secondIsV6 = Address6.isValid(second);
+
+    // If both are the same family, force the secondary to the opposite family.
+    if ((firstIsV4 && secondIsV4) || (firstIsV6 && secondIsV6)) {
+      const replacement = firstIsV4
+        ? IPv6Subnets[0]?.subnet ?? NO_SUBNET_SET
+        : IPv4Subnets[0]?.subnet ?? NO_SUBNET_SET;
+
+      if (replacement !== second) {
+        setFieldValue('machineNetworks.1.cidr', replacement, false);
+      }
+    }
+  }, [isDualStack, values.machineNetworks, IPv4Subnets, IPv6Subnets, setFieldValue]);
+
+  // Helper text showing excluded hosts
+  const getExcludedHostsAlert = React.useCallback(
+    (subnetCidr: string | undefined) => {
+      if (!hosts || !isMultiNodeCluster || !subnetCidr) {
+        return null;
+      }
+      const matchingSubnet = hostSubnets.find((hn) => hn.subnet === subnetCidr);
+      if (!matchingSubnet) {
+        return null;
+      }
+
       const excludedHosts =
-        hosts?.filter(
+        hosts.filter(
           (host) =>
             !['disabled', 'disconnected'].includes(host.status) &&
             !matchingSubnet.hostIDs.includes(host.requestedHostname || ''),
@@ -32,7 +158,7 @@ export const AvailableSubnetsControl = ({
 
       // Workaround for bug in CIM backend. hostIDs are empty
       if (excludedHosts.length === 0 || !matchingSubnet.hostIDs.length) {
-        return undefined;
+        return null;
       }
 
       const actionLinks = (
@@ -71,45 +197,87 @@ export const AvailableSubnetsControl = ({
           {t('ai:Hosts outside of this range will not be included in the new cluster.')}
         </Alert>
       );
-    }
+    },
+    [hosts, isMultiNodeCluster, hostSubnets, t],
+  );
 
-    return undefined;
-  };
+  const primaryNetworkCidr = values.machineNetworks?.[0]?.cidr;
+  const excludedHostsAlert = getExcludedHostsAlert(primaryNetworkCidr);
+  const showSecondaryMachineNetwork =
+    isDualStack && values.machineNetworks && values.machineNetworks.length > 1;
 
-  const hostSubnetLength = hostSubnets.length;
-  return (
-    <SelectField
-      name="hostSubnet"
-      label={t('ai:Available subnets')}
-      options={
-        hostSubnets.length
-          ? [
-              {
-                label: t('ai:Please select a subnet. ({{hostSubnetLength}} available)', {
-                  hostSubnetLength,
-                }),
-                value: NO_SUBNET_SET,
-                isDisabled: true,
-                id: 'form-input-hostSubnet-field-option-no-subnet',
-              },
-              ...hostSubnets
-                .sort((subA, subB) => subA.humanized.localeCompare(subB.humanized))
-                .map((hn, index) => ({
-                  label: hn.humanized,
-                  value: hn.subnet,
-                  id: `form-input-hostSubnet-field-option-${index}`,
-                })),
-            ]
-          : [
-              {
-                label: t('ai:No subnets are currently available'),
-                value: NO_SUBNET_SET,
-              },
-            ]
+  // Determine available subnets for primary dropdown
+  const primaryMachineSubnets = isDualStack && supportsIPv6Primary ? allSubnets : IPv4Subnets;
+
+  // Determine available subnets for secondary dropdown
+  const secondaryMachineSubnets = React.useMemo(() => {
+    if (supportsIPv6Primary) {
+      // For OCP >= 4.12, smart filtering based on the other network's selection
+      if (primaryNetworkCidr && Address6.isValid(primaryNetworkCidr)) {
+        // If first is IPv6, second should be IPv4
+        return IPv4Subnets;
+      } else if (primaryNetworkCidr && Address4.isValid(primaryNetworkCidr)) {
+        // If first is IPv4, second should be IPv6
+        return IPv6Subnets;
+      } else {
+        // If first is not selected yet, show all subnets
+        return allSubnets;
       }
-      getHelperText={getHelperText}
-      isDisabled={!hostSubnets.length}
-      isRequired={isRequired}
-    />
+    } else {
+      // For older versions, second network is IPv6
+      return IPv6Subnets;
+    }
+  }, [supportsIPv6Primary, primaryNetworkCidr, IPv4Subnets, IPv6Subnets, allSubnets]);
+
+  return (
+    <>
+      <FormGroup
+        label="Machine network"
+        labelInfo={isDualStack && 'Primary'}
+        fieldId="machine-networks"
+        isRequired={isRequired}
+      >
+        <FieldArray name="machineNetworks">
+          {() => (
+            <Stack>
+              <StackItem>
+                <SubnetsDropdown
+                  name="machineNetworks.0.cidr"
+                  machineSubnets={primaryMachineSubnets}
+                  isDisabled={isDisabled}
+                  onAfterSelect={(newSelection) =>
+                    reorderNetworksForPrimary(newSelection, values, setFieldValue)
+                  }
+                  data-testid="subnets-dropdown-toggle-primary"
+                />
+              </StackItem>
+            </Stack>
+          )}
+        </FieldArray>
+      </FormGroup>
+
+      {/* Secondary machine network */}
+      {showSecondaryMachineNetwork && (
+        <FormGroup
+          label="Machine network"
+          labelInfo="Secondary"
+          fieldId="machine-networks-secondary"
+          isRequired={isRequired}
+        >
+          <SubnetsDropdown
+            name="machineNetworks.1.cidr"
+            machineSubnets={secondaryMachineSubnets}
+            isDisabled={isDisabled}
+            data-testid="subnets-dropdown-toggle-secondary"
+          />
+        </FormGroup>
+      )}
+      <>
+        {typeof errors.machineNetworks === 'string' && (
+          <Alert variant={AlertVariant.warning} title={errors.machineNetworks} isInline />
+        )}
+        {excludedHostsAlert}
+      </>
+    </>
   );
 };

package/lib/{ocm/components/clusterConfiguration/networkConfiguration/StackTypeControl.tsx → common/components/clusterWizard/networkingSteps/StackTypeControlGroup.tsx}

@@ -1,35 +1,42 @@
 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 { HostSubnets, NetworkConfigurationValues } from '../../../types';
+import { getFieldId } from '../../ui';
 import {
-  HostSubnets,
-  NetworkConfigurationValues,
-  getFieldId,
   DUAL_STACK,
   IPV4_STACK,
   NETWORK_TYPE_OVN,
   NETWORK_TYPE_SDN,
   NO_SUBNET_SET,
-} from '../../../../common';
-import { ConfirmationModal, PopoverIcon } from '../../../../common/components/ui';
-import { useDefaultConfiguration } from '../ClusterDefaultConfigurationContext';
-import { selectCurrentClusterPermissionsState } from '../../../store/slices/current-cluster/selectors';
-import { OcmRadioField } from '../../ui/OcmFormFields';
+} from '../../../config';
+import { RadioField } from '../../ui/formik';
+import { ConfirmationModal, PopoverIcon } from '../../ui';
 import { reorderNetworksByCurrentPrimary } from './reorderNetworks';
 import {
   Cluster,
+  ClusterDefaultConfig,
   ClusterNetwork,
   MachineNetwork,
   ServiceNetwork,
 } from '@openshift-assisted/types/assisted-installer-service';
 
-type StackTypeControlGroupProps = {
+export type StackTypeDefaultNetworkValues = Pick<
+  ClusterDefaultConfig,
+  | 'clusterNetworksDualstack'
+  | 'clusterNetworksIpv4'
+  | 'serviceNetworksDualstack'
+  | 'serviceNetworksIpv4'
+>;
+
+export type StackTypeControlGroupProps = {
   clusterId: Cluster['id'];
   isDualStackSelectable: boolean;
   hostSubnets: HostSubnets;
+  defaultNetworkValues: StackTypeDefaultNetworkValues;
+  isViewerMode?: boolean;
 };
 
 const hasDualStackConfigurationChanged = (
@@ -40,29 +47,26 @@ const hasDualStackConfigurationChanged = (
 ) =>
   clusterNetworks &&
   serviceNetworks &&
-  ((values.machineNetworks && values.machineNetworks[1].cidr !== cidrIPv6) ||
-    (values.clusterNetworks && values.clusterNetworks[1].cidr !== clusterNetworks[1].cidr) ||
-    (values.clusterNetworks &&
-      values.clusterNetworks[1].hostPrefix !== clusterNetworks[1].hostPrefix) ||
-    (values.serviceNetworks && values.serviceNetworks[1].cidr !== serviceNetworks[1].cidr));
+  ((values.machineNetworks?.[1] && values.machineNetworks[1].cidr !== cidrIPv6) ||
+    (values.clusterNetworks?.[1] && values.clusterNetworks[1].cidr !== clusterNetworks[1]?.cidr) ||
+    (values.clusterNetworks?.[1] &&
+      values.clusterNetworks[1].hostPrefix !== clusterNetworks[1]?.hostPrefix) ||
+    (values.serviceNetworks?.[1] && values.serviceNetworks[1].cidr !== serviceNetworks[1]?.cidr) ||
+    values.apiVips?.[1]?.ip ||
+    values.ingressVips?.[1]?.ip);
 
 export const StackTypeControlGroup = ({
   clusterId,
   isDualStackSelectable,
   hostSubnets,
+  defaultNetworkValues,
+  isViewerMode = false,
 }: StackTypeControlGroupProps) => {
   const { setFieldValue, values, validateForm } = useFormikContext<NetworkConfigurationValues>();
   const [openConfirmModal, setConfirmModal] = React.useState(false);
-  const defaultNetworkValues = useDefaultConfiguration([
-    'clusterNetworksDualstack',
-    'clusterNetworksIpv4',
-    'serviceNetworksDualstack',
-    'serviceNetworksIpv4',
-  ]);
 
   const IPv6Subnets = hostSubnets.filter((subnet) => Address6.isValid(subnet.subnet));
   const cidrIPv6 = IPv6Subnets.length >= 1 ? IPv6Subnets[0].subnet : NO_SUBNET_SET;
-  const { isViewerMode } = useSelector(selectCurrentClusterPermissionsState);
   const shouldSetSingleStack =
     !isViewerMode && !isDualStackSelectable && values.stackType === DUAL_STACK;
 
@@ -216,9 +220,41 @@ export const StackTypeControlGroup = ({
         false,
       );
     }
-    // Ensure cluster/service networks ordering matches the new primary family
-    reorderNetworksByCurrentPrimary(values, setFieldValue);
+    // Initialize VIPs for dual-stack
+    if (values.apiVips && values.apiVips.length < 2) {
+      setFieldValue(
+        'apiVips',
+        [values.apiVips[0] || { ip: '', clusterId: clusterId }, { ip: '', clusterId: clusterId }],
+        false,
+      );
+    }
+    if (values.ingressVips && values.ingressVips.length < 2) {
+      setFieldValue(
+        'ingressVips',
+        [
+          values.ingressVips[0] || { ip: '', clusterId: clusterId },
+          { ip: '', clusterId: clusterId },
+        ],
+        false,
+      );
+    }
   };
+  // Ensure cluster/service networks ordering matches the new primary family
+  const primaryCidr = values.machineNetworks?.[0]?.cidr;
+  React.useEffect(() => {
+    if (isViewerMode) {
+      return;
+    }
+    reorderNetworksByCurrentPrimary(values, setFieldValue);
+  }, [
+    isViewerMode,
+    setFieldValue,
+    values,
+    values.stackType,
+    primaryCidr,
+    values.clusterNetworks,
+    values.serviceNetworks,
+  ]);
 
   const setStackType = (e: React.ChangeEvent<HTMLInputElement>) => {
     if (e.target.value === DUAL_STACK) {
@@ -253,10 +289,10 @@ export const StackTypeControlGroup = ({
       >
         <Split>
           <SplitItem>
-            <OcmRadioField
+            <RadioField
               name={'stackType'}
               value={IPV4_STACK}
-              isDisabled={!isDualStackSelectable}
+              isDisabled={!isDualStackSelectable || isViewerMode}
               label="IPv4&nbsp;"
             />
           </SplitItem>
@@ -275,10 +311,10 @@ export const StackTypeControlGroup = ({
               }
               hidden={isDualStackSelectable}
             >
-              <OcmRadioField
+              <RadioField
                 name={'stackType'}
                 value={DUAL_STACK}
-                isDisabled={!isDualStackSelectable}
+                isDisabled={!isDualStackSelectable || isViewerMode}
                 label="Dual-stack&nbsp;"
               />
             </Tooltip>

package/lib/{ocm/components/clusterConfiguration/networkConfiguration → common/components/clusterWizard/networkingSteps}/SubnetsDropdown.tsx

@@ -9,14 +9,11 @@ import {
   Divider,
 } from '@patternfly/react-core';
 import { useField } from 'formik';
-import {
-  getFieldId,
-  HostSubnet,
-  NO_SUBNET_SET,
-  TechnologyPreview,
-  PreviewBadgePosition,
-} from '../../../../common';
 import { Address4, Address6 } from 'ip-address';
+import { getFieldId } from '../../ui';
+import { HostSubnet } from '../../../types';
+import { NO_SUBNET_SET } from '../../../config';
+import { TechnologyPreview, PreviewBadgePosition } from '../../ui';
 
 type SubnetsDropdownProps = {
   name: string;