@openshift-assisted/ui-lib 2.46.2 → 2.47.0

package/lib/common/components/ui/formik/_validationSchemas.test.ts

@@ -2,6 +2,7 @@ import { test, describe, expect } from 'vitest';
 import {
   baseDomainValidationSchema,
   dnsNameValidationSchema,
+  dualStackValidationSchema,
   hostPrefixValidationSchema,
   ipBlockValidationSchema,
   ipValidationSchema,
@@ -347,4 +348,85 @@ describe('validationSchemas', () => {
 
     expect(counter).toBe(invalid.length);
   });
+
+  describe('dualStackValidationSchema', () => {
+    describe('OCP < 4.12 (legacy behavior)', () => {
+      const schema = dualStackValidationSchema('machine networks', '4.11');
+
+      test('validates IPv4 as primary and IPv6 as secondary', async () => {
+        const validValues = [[{ cidr: '192.168.1.0/24' }, { cidr: '2001:db8::/64' }]];
+
+        for (const value of validValues) {
+          await expect(schema.validate(value)).resolves.toBe(value);
+        }
+      });
+
+      test('rejects IPv6 as primary for OCP < 4.12', async () => {
+        const invalidValues = [[{ cidr: '2001:db8::/64' }, { cidr: '192.168.1.0/24' }]];
+
+        for (const value of invalidValues) {
+          await expect(schema.validate(value)).rejects.toThrow(
+            'First network has to be IPv4 subnet',
+          );
+        }
+      });
+    });
+
+    describe('OCP >= 4.12 (new behavior)', () => {
+      const schema = dualStackValidationSchema('machine networks', '4.12');
+
+      test('validates IPv4 as primary and IPv6 as secondary', async () => {
+        const validValues = [[{ cidr: '192.168.1.0/24' }, { cidr: '2001:db8::/64' }]];
+
+        for (const value of validValues) {
+          await expect(schema.validate(value)).resolves.toBe(value);
+        }
+      });
+
+      test('validates IPv6 as primary and IPv4 as secondary', async () => {
+        const validValues = [[{ cidr: '2001:db8::/64' }, { cidr: '192.168.1.0/24' }]];
+
+        for (const value of validValues) {
+          await expect(schema.validate(value)).resolves.toBe(value);
+        }
+      });
+    });
+
+    describe('no version specified (defaults to legacy behavior)', () => {
+      const schema = dualStackValidationSchema('machine networks');
+
+      test('validates IPv4 as primary and IPv6 as secondary', async () => {
+        const validValues = [[{ cidr: '192.168.1.0/24' }, { cidr: '2001:db8::/64' }]];
+
+        for (const value of validValues) {
+          await expect(schema.validate(value)).resolves.toBe(value);
+        }
+      });
+
+      test('rejects IPv6 as primary when no version specified', async () => {
+        const invalidValues = [[{ cidr: '2001:db8::/64' }, { cidr: '192.168.1.0/24' }]];
+
+        for (const value of invalidValues) {
+          await expect(schema.validate(value)).rejects.toThrow(
+            'First network has to be IPv4 subnet',
+          );
+        }
+      });
+    });
+
+    describe('edge cases', () => {
+      test('validates maximum 2 networks', async () => {
+        const schema = dualStackValidationSchema('machine networks', '4.12');
+        const invalidValue = [
+          { cidr: '192.168.1.0/24' },
+          { cidr: '2001:db8::/64' },
+          { cidr: '10.0.0.0/24' },
+        ];
+
+        await expect(schema.validate(invalidValue)).rejects.toThrow(
+          'Maximum number of machine networks subnets in dual stack is 2',
+        );
+      });
+    });
+  });
 });

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

@@ -28,6 +28,7 @@ import {
   nameValidationMessages,
 } from './constants';
 import { allSubnetsIPv4, getAddress, trimCommaSeparatedList, trimSshPublicKey } from './utils';
+import { isMajorMinorVersionEqualOrGreater } from '../../../utils';
 import { selectApiVip, selectIngressVip } from '../../../selectors';
 import { ClusterDetailsValues } from '../../clusterWizard/types';
 
@@ -703,20 +704,25 @@ export const serviceNetworkValidationSchema = Yup.array().of(
   }),
 );
 
-export const dualStackValidationSchema = (field: string) =>
+export const dualStackValidationSchema = (field: string, openshiftVersion?: string) =>
   Yup.array()
     .max(2, `Maximum number of ${field} subnets in dual stack is 2.`)
     .test(
       'dual-stack-ipv4',
-      'First network has to be IPv4 subnet.',
-      (values?: { cidr: MachineNetwork['cidr'] }[]): boolean =>
-        !!values?.[0].cidr && Address4.isValid(values[0].cidr),
-    )
-    .test(
-      'dual-stack-ipv6',
-      'Second network has to be IPv6 subnet.',
-      (values?: { cidr: MachineNetwork['cidr'] }[]): boolean =>
-        !!values?.[1].cidr && Address6.isValid(values[1].cidr),
+      openshiftVersion && isMajorMinorVersionEqualOrGreater(openshiftVersion, '4.12')
+        ? 'First network has to be a valid IPv4 or IPv6 subnet.'
+        : 'First network has to be IPv4 subnet.',
+      (values?: { cidr: MachineNetwork['cidr'] }[]): boolean => {
+        // For OCP versions > 4.11, allow IPv6 as primary network
+        if (openshiftVersion && isMajorMinorVersionEqualOrGreater(openshiftVersion, '4.12')) {
+          return (
+            !!values?.[0].cidr &&
+            (Address4.isValid(values[0].cidr) || Address6.isValid(values[0].cidr))
+          );
+        }
+        // For older versions, require IPv4 as primary network
+        return !!values?.[0].cidr && Address4.isValid(values[0].cidr);
+      },
     );
 
 export const IPv4ValidationSchema = Yup.array().test(

package/lib/common/config/constants.ts

@@ -5,12 +5,10 @@ import {
   ClusterValidationId,
   DiskRole,
   Event,
-  HostRoleUpdateParams,
   HostValidationId,
 } from '@openshift-assisted/types/assisted-installer-service';
 import { ValidationGroup as ClusterValidationGroup } from '../types/clusters';
 import buildManifest from '@openshift-assisted/ui-lib/package.json';
-import { isInOcm } from '../api/axiosClient';
 
 export const DEFAULT_POLLING_INTERVAL = 10 * 1000;
 export const REDUCED_POLLING_INTERVAL = 10 * 1000 * 6;
@@ -35,15 +33,11 @@ export const hostRoles = (t: TFunction): HostRole[] => [
       'ai:Runs application workloads. Connect at least 5 hosts to enable dedicated workers.',
     ),
   },
-  ...(isInOcm
-    ? [
-        {
-          value: 'arbiter' as HostRoleUpdateParams,
-          label: t('ai:Arbiter'),
-          description: t('ai:Prevents split-brain scenarios and maintains quorum.'),
-        },
-      ]
-    : []),
+  {
+    value: 'arbiter',
+    label: t('ai:Arbiter'),
+    description: t('ai:Prevents split-brain scenarios and maintains quorum.'),
+  },
 ];
 
 export const clusterStatusLabels = (t: TFunction): { [key in Cluster['status']]: string } => ({

package/lib/ocm/components/AddHosts/InventoryAddHost.tsx

@@ -17,14 +17,12 @@ const InventoryAddHosts = ({ cluster }: { cluster?: Cluster }) => {
   return (
     <Stack hasGutter>
       <StackItem>
-        <Content>
+        <Day2WizardContextProvider>
           <Content component="p">
-            <Day2WizardContextProvider>
-              <Day2DiscoveryImageModalButton cluster={cluster} />
-              <Day2Wizard />
-            </Day2WizardContextProvider>
+            <Day2DiscoveryImageModalButton cluster={cluster} />
           </Content>
-        </Content>
+          <Day2Wizard />
+        </Day2WizardContextProvider>
       </StackItem>
       <StackItem>
         <InformationAndAlerts cluster={cluster} />

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

@@ -23,11 +23,7 @@ const Day2HostStaticIpConfigurations = ({ isDisabled }: { isDisabled: boolean })
 
   return (
     <FormGroup
-      label={
-        <Content>
-          <Content component={ContentVariants.h4}>Hosts' network configuration</Content>
-        </Content>
-      }
+      label={<Content component={ContentVariants.h4}>Hosts' network configuration</Content>}
       fieldId={getFieldId(GROUP_NAME, 'radio')}
       isInline
       onChange={onChangeNetworkType}

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

@@ -1,6 +1,5 @@
 import React from 'react';
-import { Modal, ModalVariant } from '@patternfly/react-core/deprecated';
-import { WizardHeader } from '@patternfly/react-core';
+import { Modal, ModalVariant, WizardHeader } from '@patternfly/react-core';
 import classNames from 'classnames';
 import { ClusterWizardStep } from '../../../../common';
 import { useModalDialogsContext } from '../../hosts/ModalDialogsContext';
@@ -40,8 +39,7 @@ const Day2Wizard = () => {
       aria-label={'Day 2 Wizard'}
       isOpen={isOpen}
       variant={ModalVariant.large}
-      showClose={false}
-      hasNoBodyWrapper
+      onClose={undefined}
       id="generate-discovery-iso-modal"
     >
       <div className={classNames('pf-v6-c-wizard', 'cluster-wizard')}>

package/lib/ocm/components/clusterConfiguration/ControlPlaneNodesDropdown.tsx

@@ -17,7 +17,7 @@ import {
   useNewFeatureSupportLevel,
 } from '../../../common/components/newFeatureSupportLevels';
 import { isFeatureSupportedAndAvailable } from '../featureSupportLevels/featureStateUtils';
-import OcmTNADisclaimer from './OcmTNADisclaimer';
+import OcmTNADisclaimer from '../../../common/components/clusterConfiguration/OcmTNADisclaimer';
 import OcmSNODisclaimer from './OcmSNODisclaimer';
 
 const INPUT_NAME = 'controlPlaneCount';

package/lib/ocm/components/clusterConfiguration/DiscoveryImageModal.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
-import { Button, ButtonVariant } from '@patternfly/react-core';
-import { Modal, ModalVariant } from '@patternfly/react-core/deprecated';
+import { Button, ButtonVariant, Modal, ModalHeader, ModalVariant } from '@patternfly/react-core';
 import { pluralize } from 'humanize-plus';
 import {
   AI_CISCO_INTERSIGHT_TAG,
@@ -105,17 +104,17 @@ export const DiscoveryImageModal = () => {
   return (
     <Modal
       aria-label="Add hosts dialog"
-      title={
-        <span data-testid="discovery-modal-title">{`Add ${pluralize(+isSNOCluster, 'host')}`}</span>
-      }
       isOpen={isOpen}
       onClose={close}
       variant={ModalVariant.small}
-      hasNoBodyWrapper
       id="generate-discovery-iso-modal"
-      tabIndex={0}
       ouiaId="discovery-image-modal"
+      tabIndex={0}
     >
+      <ModalHeader
+        data-testid="discovery-modal-title"
+        title={`Add ${pluralize(+isSNOCluster, 'host')}`}
+      />
       {(isoDownloadError || ipxeDownloadError) && <ErrorState />}
       {isoDownloadUrl ? (
         <DownloadIso

package/lib/ocm/components/clusterConfiguration/HostInventory.tsx

@@ -37,14 +37,12 @@ const HostInventory = ({ cluster }: { cluster: Cluster }) => {
       </StackItem>
       <StackItem data-testid="discovery-image-modal-section">
         {!isViewerMode && !isSingleClusterFeatureEnabled && (
-          <Content>
-            <Content component="p">
-              <DiscoveryImageModalButton
-                ButtonComponent={Button}
-                cluster={cluster}
-                idPrefix="host-inventory"
-              />
-            </Content>
+          <Content component="p">
+            <DiscoveryImageModalButton
+              ButtonComponent={Button}
+              cluster={cluster}
+              idPrefix="host-inventory"
+            />
           </Content>
         )}
       </StackItem>
@@ -77,9 +75,7 @@ const HostInventory = ({ cluster }: { cluster: Cluster }) => {
         <InformationAndAlerts cluster={cluster} />
       </StackItem>
       <StackItem data-testid="host-inventory-title">
-        <Content>
-          <Content component="h3">Host Inventory</Content>
-        </Content>
+        <Content component="h3">Host Inventory</Content>
       </StackItem>
       <StackItem data-testid="hosts-discovery-table-wrapper">
         <HostsDiscoveryTable cluster={cluster} />

package/lib/ocm/components/clusterConfiguration/OcmDiscoveryImageConfigForm.tsx

@@ -1,7 +1,17 @@
 import React from 'react';
 import * as Yup from 'yup';
-import { Button, Form, AlertVariant, Alert, Stack, StackItem } from '@patternfly/react-core';
-import { ModalBoxBody, ModalBoxFooter } from '@patternfly/react-core/deprecated';
+import {
+  Button,
+  Form,
+  AlertVariant,
+  Alert,
+  Stack,
+  StackItem,
+  ModalBody,
+  ModalFooter,
+  Flex,
+  FlexItem,
+} from '@patternfly/react-core';
 import { Formik, FormikHelpers } from 'formik';
 import {
   HostStaticNetworkConfig,
@@ -133,7 +143,7 @@ export const OcmDiscoveryImageConfigForm = ({
       {({ submitForm, isSubmitting, status, setStatus }) => {
         return (
           <>
-            <ModalBoxBody>
+            <ModalBody>
               <Stack hasGutter>
                 <StackItem>
                   <Alert variant={AlertVariant.info} isInline title={alertDiscoveryText} />
@@ -158,32 +168,40 @@ export const OcmDiscoveryImageConfigForm = ({
                   </Form>
                 </StackItem>
               </Stack>
-            </ModalBoxBody>
-            <ModalBoxFooter>
+            </ModalBody>
+            <ModalFooter>
               <Stack hasGutter style={{ width: '100%' }}>
+                {(status as StatusErrorType)?.error && (
+                  <StackItem>
+                    <AlertFormikError
+                      status={status as StatusErrorType}
+                      onClose={() => setStatus(undefined)}
+                    />
+                  </StackItem>
+                )}
                 <StackItem>
-                  <AlertFormikError
-                    status={status as StatusErrorType}
-                    onClose={() => setStatus(undefined)}
-                  />
-                </StackItem>
-                <StackItem>
-                  <Button
-                    onClick={() => {
-                      void submitForm();
-                    }}
-                    isDisabled={isSubmitting}
-                    isLoading={isSubmitting}
-                    data-testid="generate-discovery-iso-button"
-                  >
-                    {isSubmitting ? t('ai:Generating') : buttonText}
-                  </Button>
-                  <Button key="cancel" variant="link" onClick={onCancel}>
-                    {t('ai:Cancel')}
-                  </Button>
+                  <Flex>
+                    <FlexItem>
+                      <Button
+                        onClick={() => {
+                          void submitForm();
+                        }}
+                        isDisabled={isSubmitting}
+                        isLoading={isSubmitting}
+                        data-testid="generate-discovery-iso-button"
+                      >
+                        {isSubmitting ? t('ai:Generating') : buttonText}
+                      </Button>
+                    </FlexItem>
+                    <FlexItem>
+                      <Button key="cancel" variant="link" onClick={onCancel}>
+                        {t('ai:Cancel')}
+                      </Button>
+                    </FlexItem>
+                  </Flex>
                 </StackItem>
               </Stack>
-            </ModalBoxFooter>
+            </ModalFooter>
           </>
         );
       }}

package/lib/ocm/components/clusterConfiguration/manifestsConfiguration/DeleteCustomManifestModal.tsx

@@ -1,6 +1,13 @@
 import * as React from 'react';
-import { Button } from '@patternfly/react-core';
-import { Modal, ModalVariant } from '@patternfly/react-core/deprecated';
+import {
+  Button,
+  Content,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  ModalVariant,
+} from '@patternfly/react-core';
 
 const DeleteCustomManifestModal = ({
   isOpen,
@@ -11,28 +18,27 @@ const DeleteCustomManifestModal = ({
   onClose: () => void;
   onDelete: () => void;
 }) => (
-  <Modal
-    title={'Remove custom manifests'}
-    isOpen={isOpen}
-    onClose={onClose}
-    variant={ModalVariant.small}
-    actions={[
+  <Modal isOpen={isOpen} onClose={onClose} variant={ModalVariant.small}>
+    <ModalHeader title={'Remove custom manifests'} />
+    <ModalBody>
+      <Content>
+        All the data entered for custom manifests will be lost and there will not be any custom
+        manifests included in the installation.
+      </Content>
+    </ModalBody>
+    <ModalFooter>
       <Button
         data-testid="delete-manifest-submit"
         key="confirm"
         variant="danger"
         onClick={onDelete}
       >
-        {'Remove'}{' '}
-      </Button>,
+        Remove
+      </Button>
       <Button key="cancel" variant="link" onClick={onClose}>
         Cancel
-      </Button>,
-    ]}
-  >
-    {
-      'All the data entered for custom manifests will be lost and there will not be any custom manifests included in the installation.'
-    }
+      </Button>
+    </ModalFooter>
   </Modal>
 );
 

package/lib/ocm/components/clusterConfiguration/manifestsConfiguration/components/ExpandedManifest.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Language } from '@patternfly/react-code-editor';
-import { ExpandableSection, Grid, GridItem, TextInput } from '@patternfly/react-core';
+import { ExpandableSection, Grid, GridItem } from '@patternfly/react-core';
 import { useField } from 'formik';
 import { OcmInputField, OcmCodeField } from '../../../ui/OcmFormFields';
 import { CustomManifestValues } from '../data/dataTypes';
@@ -30,12 +30,6 @@ const ExpandedManifest = ({ fieldName, manifestIdx }: CustomManifestComponentPro
     >
       <Grid hasGutter span={12}>
         <GridItem span={6}>
-          <TextInput
-            hidden={true}
-            name={`${fieldName}.fakeId`}
-            data-testid={`fakeId-${manifestIdx}`}
-            id={`fakeId-${manifestIdx}`}
-          />
           <FolderDropdown name={`${fieldName}.folder`} data-testid={`folder-${manifestIdx}`} />
         </GridItem>
         <GridItem span={6}>

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

@@ -8,6 +8,7 @@ import {
   Grid,
 } from '@patternfly/react-core';
 import { FieldArray, useFormikContext } from 'formik';
+import { Address6 } from 'ip-address';
 import {
   DUAL_STACK,
   PREFIX_MAX_RESTRICTION,
@@ -16,10 +17,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.';
 
@@ -36,10 +33,62 @@ 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.';
 
 const AdvancedNetworkFields = () => {
-  const { values, errors } = useFormikContext<NetworkConfigurationValues>();
+  const { values, errors, setFieldValue } = useFormikContext<NetworkConfigurationValues>();
 
   const isDualStack = values.stackType === DUAL_STACK;
 
+  // Reorder Cluster Networks and Service Networks when Machine Network primary changes
+  React.useEffect(() => {
+    if (!isDualStack || !values.machineNetworks?.[0]?.cidr) return;
+
+    const primaryMachineNetworkCidr = values.machineNetworks[0].cidr;
+    const isPrimaryIPv6 = Address6.isValid(primaryMachineNetworkCidr);
+
+    // Check Cluster Networks
+    if (values.clusterNetworks && values.clusterNetworks.length >= 2) {
+      const firstClusterCidr = values.clusterNetworks[0].cidr;
+      if (!firstClusterCidr) return;
+
+      const isFirstClusterIPv6 = Address6.isValid(firstClusterCidr);
+
+      // If primary machine is IPv6 but first cluster is IPv4, swap them
+      if (isPrimaryIPv6 && !isFirstClusterIPv6) {
+        const reordered = [values.clusterNetworks[1], values.clusterNetworks[0]];
+        setFieldValue('clusterNetworks', reordered, false);
+      }
+      // If primary machine is IPv4 but first cluster is IPv6, swap them
+      else if (!isPrimaryIPv6 && isFirstClusterIPv6) {
+        const reordered = [values.clusterNetworks[1], values.clusterNetworks[0]];
+        setFieldValue('clusterNetworks', reordered, false);
+      }
+    }
+
+    // Check Service Networks
+    if (values.serviceNetworks && values.serviceNetworks.length >= 2) {
+      const firstServiceCidr = values.serviceNetworks[0].cidr;
+      if (!firstServiceCidr) return;
+
+      const isFirstServiceIPv6 = Address6.isValid(firstServiceCidr);
+
+      // If primary machine is IPv6 but first service is IPv4, swap them
+      if (isPrimaryIPv6 && !isFirstServiceIPv6) {
+        const reordered = [values.serviceNetworks[1], values.serviceNetworks[0]];
+        setFieldValue('serviceNetworks', reordered, false);
+      }
+      // If primary machine is IPv4 but first service is IPv6, swap them
+      else if (!isPrimaryIPv6 && isFirstServiceIPv6) {
+        const reordered = [values.serviceNetworks[1], values.serviceNetworks[0]];
+        setFieldValue('serviceNetworks', reordered, false);
+      }
+    }
+  }, [
+    isDualStack,
+    values.machineNetworks,
+    values.clusterNetworks,
+    values.serviceNetworks,
+    setFieldValue,
+  ]);
+
   const clusterNetworkCidrPrefix = (index: number) =>
     parseInt(
       ((values.clusterNetworks && values.clusterNetworks[index].cidr) || '').split('/')[1],
@@ -61,20 +110,19 @@ const AdvancedNetworkFields = () => {
   );
 
   return (
-    <Grid hasGutter className="pf-v6-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 (
-                <Grid hasGutter key={index}>
-                  <GridItem className={'network-field-group pf-v6-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.'}
                           />
@@ -82,15 +130,15 @@ const AdvancedNetworkFields = () => {
                       }
                       helperText={clusterCidrHelperText}
                       isRequired
-                      labelInfo={index === 0 && isDualStack ? 'Primary' : ''}
+                      labelInfo={isDualStack ? (index === 0 ? 'Primary' : 'Secondary') : ''}
                     />
                   </GridItem>
-                  <GridItem className={'network-field-group pf-v6-u-pb-md'}>
+                  <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"
@@ -123,14 +171,12 @@ const AdvancedNetworkFields = () => {
         {() => (
           <FormGroup fieldId="serviceNetworks" labelInfo={isDualStack && 'Primary'}>
             {values.serviceNetworks?.map((_, index) => (
-              <GridItem key={index} className={'network-field-group pf-v6-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.'}
                       />
@@ -138,7 +184,7 @@ const AdvancedNetworkFields = () => {
                   }
                   helperText={serviceCidrHelperText}
                   isRequired
-                  labelInfo={index === 0 && isDualStack ? 'Primary' : ''}
+                  labelInfo={isDualStack ? (index === 0 ? 'Primary' : 'Secondary') : ''}
                 />
               </GridItem>
             ))}