MGMT-19593: When choose User-Managed-Networking and going back to default Cluster-managed Networking - error preventing the following flow

libs/ui-lib/lib/cim/components/ClusterDeployment/ClusterDeploymentNetworkingStep.tsx

@@ -88,7 +88,7 @@ const NetworkingForm: React.FC<NetworkingFormProps> = ({
   React.useEffect(() => {
     setNextRequested(false);
     setShowClusterErrors(false);
-  }, [values.apiVip, values.ingressVip]);
+  }, [values.apiVips, values.ingressVips]);
 
   React.useEffect(() => {
     if (nextRequested) {

libs/ui-lib/lib/cim/components/ClusterDeployment/NetworkConfiguration.tsx

@@ -97,12 +97,12 @@ const NetworkConfiguration = ({
 
       // We need to reset these fields' values in order to align with the values the server sends
       setFieldValue('vipDhcpAllocation', false);
-      setFieldValue('ingressVip', '', shouldValidate);
-      setFieldValue('apiVip', '', shouldValidate);
+      setFieldValue('ingressVips', [], shouldValidate);
+      setFieldValue('apiVips', [], shouldValidate);
     } else {
-      if (!values.vipDhcpAllocation && touched.hostSubnet) {
-        validateField('ingressVip');
-        validateField('apiVip');
+      if (!values.vipDhcpAllocation) {
+        validateField('ingressVips');
+        validateField('apiVips');
       }
     }
   }, [

libs/ui-lib/lib/cim/components/ClusterDeployment/networkConfigurationValidation.ts

@@ -1,17 +1,8 @@
-import * as Yup from 'yup';
 import {
   Cluster,
   ClusterDefaultConfig,
 } from '@openshift-assisted/types/assisted-installer-service';
-import { HostSubnets, NetworkConfigurationValues } from '../../../common/types/clusters';
-import {
-  hostPrefixValidationSchema,
-  hostSubnetValidationSchema,
-  ipBlockValidationSchema,
-  sshPublicKeyValidationSchema,
-  vipValidationSchema,
-} from '../../../common/components/ui';
-
+import { NetworkConfigurationValues } from '../../../common/types/clusters';
 import {
   getSubnetFromMachineNetworkCidr,
   getHostSubnets,
@@ -63,19 +54,3 @@ export const getNetworkInitialValues = (
     networkType: cluster.networkType || NETWORK_TYPE_OVN,
   };
 };
-
-export const getNetworkConfigurationValidationSchema = (
-  initialValues: NetworkConfigurationValues,
-  hostSubnets: HostSubnets,
-) =>
-  Yup.lazy((values: NetworkConfigurationValues) =>
-    Yup.object<NetworkConfigurationValues>().shape({
-      clusterNetworkHostPrefix: hostPrefixValidationSchema(values.clusterNetworkCidr),
-      clusterNetworkCidr: ipBlockValidationSchema(values.serviceNetworkCidr),
-      serviceNetworkCidr: ipBlockValidationSchema(values.clusterNetworkCidr),
-      apiVip: vipValidationSchema(hostSubnets, values, initialValues.apiVip),
-      ingressVip: vipValidationSchema(hostSubnets, values, initialValues.ingressVip),
-      sshPublicKey: sshPublicKeyValidationSchema,
-      hostSubnet: hostSubnetValidationSchema,
-    }),
-  );

libs/ui-lib/lib/cim/components/ClusterDeployment/use-networking-formik.ts

@@ -17,7 +17,7 @@ import {
   HostSubnets,
   hostPrefixValidationSchema,
   ipBlockValidationSchema,
-  vipValidationSchema,
+  vipArrayValidationSchema,
   sshPublicKeyValidationSchema,
   hostSubnetValidationSchema,
   httpProxyValidationSchema,
@@ -50,8 +50,8 @@ const getNetworkConfigurationValidationSchema = (
       clusterNetworkHostPrefix: hostPrefixValidationSchema(values.clusterNetworkCidr),
       clusterNetworkCidr: ipBlockValidationSchema(values.serviceNetworkCidr),
       serviceNetworkCidr: ipBlockValidationSchema(values.clusterNetworkCidr),
-      apiVip: vipValidationSchema(hostSubnets, values, initialValues.apiVip),
-      ingressVip: vipValidationSchema(hostSubnets, values, initialValues.ingressVip),
+      apiVips: vipArrayValidationSchema(hostSubnets, values, initialValues.apiVips),
+      ingressVips: vipArrayValidationSchema(hostSubnets, values, initialValues.ingressVips),
       sshPublicKey: sshPublicKeyValidationSchema,
       hostSubnet: hostSubnetValidationSchema,
       httpProxy: httpProxyValidationSchema({ values, pairValueName: 'httpsProxy' }),

libs/ui-lib/lib/cim/components/helpers/toAssisted.ts

@@ -140,14 +140,18 @@ export const getAICluster = ({
     name: clusterDeployment.spec?.clusterName,
     baseDnsDomain: clusterDeployment.spec?.baseDomain,
     openshiftVersion: installVersion,
-    apiVips: [
-      {
-        ip: agentClusterInstall?.status?.apiVIP || agentClusterInstall?.spec?.apiVIP,
-      },
-    ],
-    ingressVips: [
-      { ip: agentClusterInstall?.status?.ingressVIP || agentClusterInstall?.spec?.apiVIP },
-    ],
+    apiVips:
+      agentClusterInstall?.status?.apiVIP || agentClusterInstall?.spec?.apiVIP
+        ? [
+            {
+              ip: agentClusterInstall?.status?.apiVIP || agentClusterInstall?.spec?.apiVIP,
+            },
+          ]
+        : [],
+    ingressVips:
+      agentClusterInstall?.status?.ingressVIP || agentClusterInstall?.spec?.ingressVIP
+        ? [{ ip: agentClusterInstall?.status?.ingressVIP || agentClusterInstall?.spec?.ingressVIP }]
+        : [],
     highAvailabilityMode:
       agentClusterInstall?.spec?.provisionRequirements?.controlPlaneAgents === 1 ? 'None' : 'Full',
     status,

libs/ui-lib/lib/common/components/clusterWizard/networkingSteps/AvailableSubnetsControl.tsx

@@ -1,68 +1,11 @@
 import React from 'react';
 import { Alert, AlertActionLink, AlertVariant, Popover } from '@patternfly/react-core';
-import { HostSubnet, HostSubnets } from '../../../types/clusters';
-import { Cluster, Host } from '@openshift-assisted/types/assisted-installer-service';
+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 { useTranslation } from '../../../hooks/use-translation-wrapper';
 
-interface SubnetHelperTextProps {
-  matchingSubnet: HostSubnet;
-  hosts: Cluster['hosts'];
-}
-
-const SubnetHelperText = ({ matchingSubnet, hosts }: SubnetHelperTextProps) => {
-  const { t } = useTranslation();
-  const excludedHosts =
-    hosts?.filter(
-      (host) =>
-        !['disabled', 'disconnected'].includes(host.status) &&
-        !matchingSubnet.hostIDs.includes(host.requestedHostname || ''),
-    ) || [];
-
-  // Workaround for bug in CIM backend. hostIDs are empty
-  if (excludedHosts.length === 0 || !matchingSubnet.hostIDs.length) {
-    return null;
-  }
-
-  const actionLinks = (
-    <Popover
-      position="right"
-      bodyContent={
-        <ul>
-          {excludedHosts
-            .sort(
-              (hostA, hostB) =>
-                hostA.requestedHostname?.localeCompare(hostB.requestedHostname || '') || 0,
-            )
-            .map((host) => (
-              <li key={host.id}>{host.requestedHostname || host.id}</li>
-            ))}
-        </ul>
-      }
-      minWidth="30rem"
-      maxWidth="50rem"
-    >
-      <AlertActionLink id="form-input-hostSubnet-field-helper-view-excluded">
-        {t('ai:View {{count}} affected host', {
-          count: excludedHosts.length,
-        })}
-      </AlertActionLink>
-    </Popover>
-  );
-
-  return (
-    <Alert
-      title={t('ai:This subnet range is not available on all hosts')}
-      variant={AlertVariant.warning}
-      actionLinks={actionLinks}
-      isInline
-    >
-      {t('ai:Hosts outside of this range will not be included in the new cluster.')}
-    </Alert>
-  );
-};
-
 export interface AvailableSubnetsControlProps {
   hostSubnets: HostSubnets;
   hosts: Host[];
@@ -79,14 +22,60 @@ export const AvailableSubnetsControl = ({
   const { t } = useTranslation();
   const getHelperText = (value: string) => {
     const matchingSubnet = hostSubnets.find((hn) => hn.subnet === value);
-    if (matchingSubnet) {
+    if (matchingSubnet && isMultiNodeCluster) {
+      const excludedHosts =
+        hosts?.filter(
+          (host) =>
+            !['disabled', 'disconnected'].includes(host.status) &&
+            !matchingSubnet.hostIDs.includes(host.requestedHostname || ''),
+        ) || [];
+
+      // Workaround for bug in CIM backend. hostIDs are empty
+      if (excludedHosts.length === 0 || !matchingSubnet.hostIDs.length) {
+        return undefined;
+      }
+
+      const actionLinks = (
+        <Popover
+          position="right"
+          bodyContent={
+            <ul>
+              {excludedHosts
+                .sort(
+                  (hostA, hostB) =>
+                    hostA.requestedHostname?.localeCompare(hostB.requestedHostname || '') || 0,
+                )
+                .map((host) => (
+                  <li key={host.id}>{host.requestedHostname || host.id}</li>
+                ))}
+            </ul>
+          }
+          minWidth="30rem"
+          maxWidth="50rem"
+        >
+          <AlertActionLink id="form-input-hostSubnet-field-helper-view-excluded">
+            {t('ai:View {{count}} affected host', {
+              count: excludedHosts.length,
+            })}
+          </AlertActionLink>
+        </Popover>
+      );
+
       return (
-        isMultiNodeCluster && <SubnetHelperText matchingSubnet={matchingSubnet} hosts={hosts} />
+        <Alert
+          title={t('ai:This subnet range is not available on all hosts')}
+          variant={AlertVariant.warning}
+          actionLinks={actionLinks}
+          isInline
+        >
+          {t('ai:Hosts outside of this range will not be included in the new cluster.')}
+        </Alert>
       );
     }
 
     return undefined;
   };
+
   const hostSubnetLength = hostSubnets.length;
   return (
     <SelectField

libs/ui-lib/lib/common/components/clusterWizard/networkingSteps/VirtualIPControlGroup.tsx

@@ -122,7 +122,7 @@ export const VirtualIPControlGroup = ({
         <>
           <FormikStaticField
             label={t('ai:API IP')}
-            name="apiVip"
+            name="apiVips.0.ip"
             helperText={apiVipHelperText}
             value={selectApiVip(cluster)}
             isValid={!apiVipFailedValidationMessage}
@@ -136,7 +136,7 @@ export const VirtualIPControlGroup = ({
           </FormikStaticField>
           <FormikStaticField
             label={t('ai:Ingress IP')}
-            name="ingressVip"
+            name="ingressVips.0.ip"
             helperText={ingressVipHelperText}
             value={selectIngressVip(cluster)}
             isValid={!ingressVipFailedValidationMessage}
@@ -153,13 +153,13 @@ export const VirtualIPControlGroup = ({
         <>
           <InputField
             label={t('ai:API IP')}
-            name="apiVip"
+            name="apiVips.0.ip"
             helperText={apiVipHelperText}
             isRequired
             isDisabled={!hostSubnets.length || values.hostSubnet === NO_SUBNET_SET}
           />
           <InputField
-            name="ingressVip"
+            name="ingressVips.0.ip"
             label={t('ai:Ingress IP')}
             helperText={ingressVipHelperText}
             isRequired

libs/ui-lib/lib/common/components/ui/formik/validationSchemas.ts

@@ -315,7 +315,7 @@ export const vipArrayValidationSchema = <T extends Yup.Maybe<Yup.AnyObject>>(
   values: NetworkConfigurationValues,
   initialValues?: ApiVip[] | IngressVip[],
 ) =>
-  (values.apiVips?.length && values.managedNetworkingType === 'clusterManaged'
+  (values.managedNetworkingType === 'clusterManaged'
     ? Yup.array<T>().of(
         Yup.object({
           clusterId: Yup.string(),