@openshift-assisted/ui-lib 2.52.2 → 2.53.0

package/lib/common/components/clusterWizard/customManifests/CustomManifestsAlert.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Alert, AlertVariant, Stack, StackItem } from '@patternfly/react-core';
+import { useTranslation } from '../../../hooks';
+
+export const CustomManifestsAlert = ({
+  usesExternalPlatform,
+  usesThirdPartyCNI,
+}: {
+  usesExternalPlatform: boolean;
+  usesThirdPartyCNI: boolean;
+}) => {
+  const { t } = useTranslation();
+
+  let title: string;
+  let body: string;
+
+  if (usesExternalPlatform && usesExternalPlatform) {
+    title = t("ai:You're using an external platform and a third-party CNI");
+    body = t('ai:Make sure to upload the required custom and CNI manifests in this step.');
+  } else if (usesExternalPlatform) {
+    title = t("ai:You're using an external platform");
+    body = t('ai:Make sure to upload the required custom manifests in this step.');
+  } else if (usesThirdPartyCNI) {
+    title = t("ai:You're using a third-party CNI");
+    body = t('ai:Make sure to upload the required CNI manifests in this step.');
+  } else {
+    return null;
+  }
+
+  return (
+    <Stack>
+      <StackItem>
+        <Alert variant={AlertVariant.info} isInline title={title}>
+          {body}
+        </Alert>
+      </StackItem>
+    </Stack>
+  );
+};

package/lib/common/components/clusterWizard/customManifests/index.tsx

@@ -0,0 +1 @@
+export * from './CustomManifestsAlert';

package/lib/common/components/clusterWizard/index.ts

@@ -7,3 +7,5 @@ export { ClusterValidations, HostsValidations } from './ReviewValidations';
 export * from './clusterDetailsValidation';
 export * from './types';
 export * from './validationsInfoUtils';
+export * from './customManifests';
+export * from './networkingSteps';

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

@@ -59,6 +59,7 @@ export interface AvailableSubnetsControlProps {
   isViewerMode?: boolean;
   hosts?: Host[];
   isMultiNodeCluster?: boolean;
+  allowSingleStackIPv6?: boolean;
 }
 
 export const AvailableSubnetsControl = ({
@@ -70,6 +71,7 @@ export const AvailableSubnetsControl = ({
   isViewerMode = false,
   hosts,
   isMultiNodeCluster = true,
+  allowSingleStackIPv6 = false,
 }: AvailableSubnetsControlProps) => {
   const { t } = useTranslation();
   const { values, errors, setFieldValue } = useFormikContext<NetworkConfigurationValues>();
@@ -207,7 +209,12 @@ export const AvailableSubnetsControl = ({
     isDualStack && values.machineNetworks && values.machineNetworks.length > 1;
 
   // Determine available subnets for primary dropdown
-  const primaryMachineSubnets = isDualStack && supportsIPv6Primary ? allSubnets : IPv4Subnets;
+  let primaryMachineSubnets: HostSubnet[];
+  if ((isDualStack && supportsIPv6Primary) || (!isDualStack && allowSingleStackIPv6)) {
+    primaryMachineSubnets = allSubnets;
+  } else {
+    primaryMachineSubnets = IPv4Subnets;
+  }
 
   // Determine available subnets for secondary dropdown
   const secondaryMachineSubnets = React.useMemo(() => {

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

@@ -55,10 +55,10 @@ export const ManagedNetworkingControlGroup = ({
             value={'userManaged'}
             label={
               <>
-                <span>{t('ai:User-Managed Networking')}</span>{' '}
+                <span>{t('ai:User-Managed networking')}</span>{' '}
                 <PopoverIcon
                   bodyContent={t(
-                    "ai:With User-Managed Networking, you'll need to provide and configure a load balancer for the API and ingress endpoints.",
+                    "ai:With User-Managed networking, you'll need to provide and configure a load balancer for the API and ingress endpoints.",
                   )}
                 />
               </>

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

@@ -10,9 +10,10 @@ import {
   NETWORK_TYPE_SDN,
 } from '../../../types';
 import { getFieldId } from '../../ui';
-import { DUAL_STACK, IPV4_STACK, NO_SUBNET_SET } from '../../../config';
+import { DUAL_STACK, NO_SUBNET_SET, SINGLE_STACK } from '../../../config';
 import { RadioField } from '../../ui/formik';
 import { ConfirmationModal, PopoverIcon } from '../../ui';
+import { useTranslation } from '../../../hooks/use-translation-wrapper';
 import { reorderNetworksByCurrentPrimary } from './reorderNetworks';
 import {
   Cluster,
@@ -36,6 +37,7 @@ export type StackTypeControlGroupProps = {
   hostSubnets: HostSubnets;
   defaultNetworkValues: StackTypeDefaultNetworkValues;
   isViewerMode?: boolean;
+  allowSingleStackIPv6?: boolean;
 };
 
 const hasDualStackConfigurationChanged = (
@@ -60,17 +62,21 @@ export const StackTypeControlGroup = ({
   hostSubnets,
   defaultNetworkValues,
   isViewerMode = false,
+  allowSingleStackIPv6 = false,
 }: StackTypeControlGroupProps) => {
+  const { t } = useTranslation();
   const { setFieldValue, values, validateForm } = useFormikContext<NetworkConfigurationValues>();
   const [openConfirmModal, setConfirmModal] = React.useState(false);
 
+  const singleStackLabel = allowSingleStackIPv6 ? t('ai:Single stack') : t('ai:IPv4');
+
   const IPv6Subnets = hostSubnets.filter((subnet) => Address6.isValid(subnet.subnet));
   const cidrIPv6 = IPv6Subnets.length >= 1 ? IPv6Subnets[0].subnet : NO_SUBNET_SET;
   const shouldSetSingleStack =
     !isViewerMode && !isDualStackSelectable && values.stackType === DUAL_STACK;
 
   const setSingleStack = React.useCallback(() => {
-    setFieldValue('stackType', IPV4_STACK);
+    setFieldValue('stackType', SINGLE_STACK);
 
     // Determine whether the first machine network is IPv4
     const firstNetwork = values.machineNetworks?.[0];
@@ -94,7 +100,8 @@ export const StackTypeControlGroup = ({
         }
       }
     }
-    // Ensure single-stack inputs are IPv4 after switching from dual-stack
+
+    // Set cluster/service to IPv4 defaults when switching to single-stack
     if (values.clusterNetworks && values.clusterNetworks.length >= 1) {
       const defaultCluster =
         defaultNetworkValues.clusterNetworksIpv4 && defaultNetworkValues.clusterNetworksIpv4[0];
@@ -196,28 +203,27 @@ export const StackTypeControlGroup = ({
       }
     }
     if (values.clusterNetworks && values.clusterNetworks?.length < 2) {
-      setFieldValue(
-        'clusterNetworks',
-        [
-          ...values.clusterNetworks,
-          defaultNetworkValues.clusterNetworksDualstack?.length
-            ? defaultNetworkValues.clusterNetworksDualstack[1]
-            : { cidr: '', hostPrefix: '', clusterId: clusterId },
-        ],
-        false,
-      );
+      const firstClusterCidr = values.clusterNetworks[0]?.cidr;
+      const isPrimaryIPv6 = firstClusterCidr && Address6.isValid(firstClusterCidr);
+      const missingFamilyNetworkDefault =
+        defaultNetworkValues.clusterNetworksDualstack?.[isPrimaryIPv6 ? 0 : 1];
+      const secondClusterNetwork = missingFamilyNetworkDefault ?? {
+        cidr: '',
+        hostPrefix: '',
+        clusterId: clusterId,
+      };
+      setFieldValue('clusterNetworks', [...values.clusterNetworks, secondClusterNetwork], false);
     }
     if (values.serviceNetworks && values.serviceNetworks?.length < 2) {
-      setFieldValue(
-        'serviceNetworks',
-        [
-          ...values.serviceNetworks,
-          defaultNetworkValues.serviceNetworksDualstack?.length
-            ? defaultNetworkValues.serviceNetworksDualstack[1]
-            : { cidr: '', clusterId: clusterId },
-        ],
-        false,
-      );
+      const firstServiceCidr = values.serviceNetworks[0]?.cidr;
+      const isPrimaryIPv6 = firstServiceCidr && Address6.isValid(firstServiceCidr);
+      const missingFamilyNetworkDefault =
+        defaultNetworkValues.serviceNetworksDualstack?.[isPrimaryIPv6 ? 0 : 1];
+      const secondServiceNetwork = missingFamilyNetworkDefault ?? {
+        cidr: '',
+        clusterId: clusterId,
+      };
+      setFieldValue('serviceNetworks', [...values.serviceNetworks, secondServiceNetwork], false);
     }
     // Initialize VIPs for dual-stack
     if (values.apiVips && values.apiVips.length < 2) {
@@ -290,14 +296,18 @@ export const StackTypeControlGroup = ({
           <SplitItem>
             <RadioField
               name={'stackType'}
-              value={IPV4_STACK}
+              value={SINGLE_STACK}
               isDisabled={!isDualStackSelectable || isViewerMode}
-              label="IPv4&nbsp;"
+              label={`${singleStackLabel}\u00A0`}
             />
           </SplitItem>
           <SplitItem>
             <PopoverIcon
-              bodyContent="Select this when your hosts are using only IPv4."
+              bodyContent={
+                allowSingleStackIPv6
+                  ? t('ai:Select a single address family (IPv4 or IPv6) for your machine network.')
+                  : t('ai:Select this when your hosts are using only IPv4.')
+              }
               buttonStyle={{ top: '-4px' }}
             />
           </SplitItem>

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

@@ -0,0 +1,28 @@
+import React from 'react';
+import { useTranslation } from '../../../hooks';
+import { Alert, AlertVariant, Stack, StackItem } from '@patternfly/react-core';
+import { RED_HAT_CNI_SUPPORT_MATRIX_LINK } from '../../../config';
+import { ExternalLink } from '../../ui';
+
+export const ThirdPartyCNIBanner = () => {
+  const { t } = useTranslation();
+
+  return (
+    <StackItem>
+      <Alert variant={AlertVariant.warning} isInline title={t('ai:Third-party CNI')}>
+        <Stack hasGutter>
+          <StackItem>
+            {t(
+              'ai:Third-party CNIs require uploading CNI manifests. Please verify you have the required manifests and that the chosen CNI is compatible with your platform and OpenShift version.',
+            )}
+          </StackItem>
+          <StackItem>
+            <ExternalLink href={RED_HAT_CNI_SUPPORT_MATRIX_LINK}>
+              {t('ai:Red Hat CNI Support Matrix')}
+            </ExternalLink>
+          </StackItem>
+        </Stack>
+      </Alert>
+    </StackItem>
+  );
+};

package/lib/common/components/clusterWizard/networkingSteps/index.ts

@@ -14,3 +14,4 @@ export { VirtualIPControlGroup } from './VirtualIPControlGroup';
 export type { VirtualIPControlGroupProps } from './VirtualIPControlGroup';
 export { default as AdvancedNetworkFields } from './AdvancedNetworkFields';
 export type { AdvancedNetworkFieldsProps } from './AdvancedNetworkFields';
+export * from './ThirdPartyCNIBanner';

package/lib/common/components/hosts/HostsTable.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { Spinner } from '@patternfly/react-core';
 import { ConnectedIcon } from '@patternfly/react-icons/dist/js/icons/connected-icon';
 import { HostsNotShowingLink, HostsNotShowingLinkProps } from '../clusterConfiguration';
 import { Host } from '@openshift-assisted/types/assisted-installer-service';
@@ -29,6 +30,7 @@ export const HostsTableEmptyState = ({
       icon={ConnectedIcon}
       title={t('ai:Waiting for host...', { count: +isSNO })}
       content={t('ai:Hosts may take a few minutes to appear here after booting.')}
+      primaryAction={<Spinner size="xl" />}
       secondaryActions={
         setDiscoveryHintModalOpen && [
           <HostsNotShowingLink

package/lib/common/components/ui/WizardFooter.tsx

@@ -27,6 +27,7 @@ export type WizardFooterGenericProps = {
   submittingText?: string;
   nextButtonText?: string;
   isNextButtonLoading?: boolean;
+  isWaitingForHosts?: boolean;
 };
 
 type WizardFooterProps = WizardFooterGenericProps & {
@@ -53,6 +54,7 @@ export const WizardFooter: React.FC<WizardFooterProps> = ({
   cluster,
   onFetchEvents,
   isNextButtonLoading,
+  isWaitingForHosts,
 }) => {
   const { t } = useTranslation();
   submittingText = submittingText || t('ai:Saving changes...');
@@ -119,6 +121,14 @@ export const WizardFooter: React.FC<WizardFooterProps> = ({
               </Content>
             </ActionListItem>
           )}
+          {isWaitingForHosts && !isSubmitting && (
+            <ActionListItem>
+              <Content component={ContentVariants.small}>
+                <Spinner size="sm" data-testid="wizard-footer-hosts-spinner" />{' '}
+                {t('ai:Waiting for hosts to be ready...')}
+              </Content>
+            </ActionListItem>
+          )}
           <SplitItem isFilled />
           {cluster && onFetchEvents && (
             <ActionListItem>

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

@@ -126,6 +126,12 @@ export const allSubnetsIPv4 = (
   return !!networks?.every((network) => network.cidr && Address4.isValid(network.cidr));
 };
 
+export const allSubnetsIPv6 = (
+  networks: (MachineNetwork | ClusterNetwork | ServiceNetwork)[] | undefined,
+) => {
+  return !!networks?.every((network) => network.cidr && Address6.isValid(network.cidr));
+};
+
 export const labelsToArray = (labels: { [key in string]: string } = {}): string[] => {
   const result: string[] = [];
   for (const key in labels) {

package/lib/common/config/constants.ts

@@ -289,8 +289,10 @@ export const CLUSTER_DEFAULT_NETWORK_SETTINGS_IPV6 = {
 export const CLUSTER_DEFAULT_NETWORK_SETTINGS: Pick<
   ClusterDefaultConfig,
   | 'clusterNetworksIpv4'
+  | 'clusterNetworksIpv6'
   | 'clusterNetworksDualstack'
   | 'serviceNetworksIpv4'
+  | 'serviceNetworksIpv6'
   | 'serviceNetworksDualstack'
 > = {
   clusterNetworksIpv4: [
@@ -299,6 +301,12 @@ export const CLUSTER_DEFAULT_NETWORK_SETTINGS: Pick<
       hostPrefix: CLUSTER_DEFAULT_NETWORK_SETTINGS_IPV4.clusterNetworkHostPrefix,
     },
   ],
+  clusterNetworksIpv6: [
+    {
+      cidr: CLUSTER_DEFAULT_NETWORK_SETTINGS_IPV6.clusterNetworkCidr,
+      hostPrefix: CLUSTER_DEFAULT_NETWORK_SETTINGS_IPV6.clusterNetworkHostPrefix,
+    },
+  ],
   clusterNetworksDualstack: [
     {
       cidr: CLUSTER_DEFAULT_NETWORK_SETTINGS_IPV4.clusterNetworkCidr,
@@ -310,6 +318,7 @@ export const CLUSTER_DEFAULT_NETWORK_SETTINGS: Pick<
     },
   ],
   serviceNetworksIpv4: [{ cidr: CLUSTER_DEFAULT_NETWORK_SETTINGS_IPV4.serviceNetworkCidr }],
+  serviceNetworksIpv6: [{ cidr: CLUSTER_DEFAULT_NETWORK_SETTINGS_IPV6.serviceNetworkCidr }],
   serviceNetworksDualstack: [
     { cidr: CLUSTER_DEFAULT_NETWORK_SETTINGS_IPV4.serviceNetworkCidr },
     { cidr: CLUSTER_DEFAULT_NETWORK_SETTINGS_IPV6.serviceNetworkCidr },
@@ -333,7 +342,7 @@ export const MS_PER_DAY = 1000 * 60 * 60 * 24;
 
 export const NO_SUBNET_SET = 'NO_SUBNET_SET';
 
-export const IPV4_STACK = 'singleStack';
+export const SINGLE_STACK = 'singleStack';
 export const DUAL_STACK = 'dualStack';
 
 export const PREFIX_MAX_RESTRICTION = {
@@ -384,7 +393,11 @@ export const singleClusterOperators = [
   OPERATOR_NAME_NODE_MAINTENANCE,
   OPERATOR_NAME_FENCE_AGENTS_REMEDIATION,
   OPERATOR_NAME_KUBE_DESCHEDULER,
+  OPERATOR_NAME_METALLB,
   OPERATOR_NAME_CLUSTER_OBSERVABILITY,
+  OPERATOR_NAME_OADP,
+  OPERATOR_NAME_LSO,
+  OPERATOR_NAME_NUMA_RESOURCES,
   OPERATOR_NAME_LOKI,
   OPERATOR_NAME_OPENSHIFT_LOGGING,
 ];

package/lib/common/types/networkType.ts

@@ -1,4 +1,5 @@
 import type { FeatureSupportLevelId } from '@openshift-assisted/types/assisted-installer-service';
+import { TFunction } from 'i18next';
 
 export type NetworkTypeKey =
   | 'OVNKubernetes'
@@ -15,14 +16,14 @@ export const NETWORK_TYPE_CILIUM: NetworkTypeKey = 'Cilium';
 export const NETWORK_TYPE_CALICO: NetworkTypeKey = 'Calico';
 export const NETWORK_TYPE_NONE: NetworkTypeKey = 'None';
 
-export const NETWORK_TYPE_LABELS: Record<string, string> = {
-  [NETWORK_TYPE_OVN]: 'Open Virtual Networking (OVN)',
-  [NETWORK_TYPE_SDN]: 'Software-Defined Networking (SDN)',
-  [NETWORK_TYPE_CISCO_ACI]: 'Cisco ACI',
-  [NETWORK_TYPE_CILIUM]: 'Isovalent Cilium',
-  [NETWORK_TYPE_CALICO]: 'Tigera Calico',
-  [NETWORK_TYPE_NONE]: 'None (Custom CNI)',
-};
+export const NETWORK_TYPE_LABELS = (t: TFunction): Record<string, string> => ({
+  [NETWORK_TYPE_OVN]: t('ai:Open Virtual Networking (OVN)'),
+  [NETWORK_TYPE_SDN]: t('ai:Software-Defined Networking (SDN)'),
+  [NETWORK_TYPE_CISCO_ACI]: t('ai:Cisco ACI'),
+  [NETWORK_TYPE_CILIUM]: t('ai:Isovalent Cilium'),
+  [NETWORK_TYPE_CALICO]: t('ai:Tigera Calico'),
+  [NETWORK_TYPE_NONE]: t('ai:None (Custom CNI)'),
+});
 
 export const NETWORK_TYPE_FEATURE_IDS: Record<string, FeatureSupportLevelId> = {
   [NETWORK_TYPE_OVN]: 'OVN_NETWORK_TYPE',

package/lib/common/validationSchemas/networkingValidation.tsx

@@ -13,7 +13,8 @@ import {
   ipBlockValidationSchema,
 } from './addressValidation';
 import { isMajorMinorVersionEqualOrGreater } from '../utils';
-import { allSubnetsIPv4 } from '../components/ui/formik/utils';
+import { allSubnetsIPv4, allSubnetsIPv6 } from '../components/ui/formik/utils';
+import { SINGLE_STACK } from '../config';
 
 export const machineNetworksValidationSchema = Yup.array().of(
   Yup.object({ cidr: hostSubnetValidationSchema, clusterId: Yup.string() }),
@@ -111,3 +112,40 @@ export const IPv4ValidationSchema = Yup.array().test(
   `All network subnets must be IPv4.`,
   (values?: (MachineNetwork | ClusterNetwork | ServiceNetwork)[]) => allSubnetsIPv4(values),
 );
+
+export const IPv6ValidationSchema = Yup.array().test(
+  'single-stack-ipv6',
+  'All network subnets must be IPv6.',
+  (values?: (MachineNetwork | ClusterNetwork | ServiceNetwork)[]) => allSubnetsIPv6(values),
+);
+
+export const clusterNetworksSchema = (
+  t: TFunction,
+  stackType: string,
+  primaryCidr: string | undefined,
+  openshiftVersion?: string,
+) => {
+  const singleStackFamilySchema =
+    primaryCidr && isCIDR.v6(primaryCidr) ? IPv6ValidationSchema : IPv4ValidationSchema;
+
+  const stackFamilySchema =
+    stackType === SINGLE_STACK
+      ? singleStackFamilySchema
+      : dualStackValidationSchema(t('ai:cluster network'), t, openshiftVersion);
+  return clusterNetworksValidationSchema(t).concat(stackFamilySchema);
+};
+
+export const serviceNetworksSchema = (
+  t: TFunction,
+  stackType: string,
+  primaryCidr: string | undefined,
+  openshiftVersion?: string,
+) => {
+  const singleStackFamilySchema =
+    primaryCidr && isCIDR.v6(primaryCidr) ? IPv6ValidationSchema : IPv4ValidationSchema;
+  const stackFamilySchema =
+    stackType === SINGLE_STACK
+      ? singleStackFamilySchema
+      : dualStackValidationSchema(t('ai:service network'), t, openshiftVersion);
+  return serviceNetworkValidationSchema(t).concat(stackFamilySchema);
+};

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

@@ -11,7 +11,7 @@ import {
 import { useField } from 'formik';
 import toNumber from 'lodash-es/toNumber';
 import { getFieldId, PopoverIcon, PreviewBadgePosition, TechnologyPreview } from '../../../common';
-
+import { useFeature } from '../../hooks/use-feature';
 import {
   NewFeatureSupportLevelMap,
   useNewFeatureSupportLevel,
@@ -45,6 +45,8 @@ interface ControlPlaneNodesOption {
   value: number;
   label: string;
   badge?: React.ReactNode;
+  /** When true, option is omitted from the list (e.g. product mode does not offer this topology). */
+  hidden?: boolean;
 }
 
 interface ControlPlaneNodesDropdownProps {
@@ -71,7 +73,7 @@ const ControlPlaneNodesDropdown: React.FC<ControlPlaneNodesDropdownProps> = ({
   const [field, , { setValue }] = useField<number>(INPUT_NAME);
   const [isOpen, setOpen] = React.useState<boolean>(false);
   const newFeatureSupportLevelContext = useNewFeatureSupportLevel();
-
+  const isSingleClusterFeatureEnabled = useFeature('ASSISTED_INSTALLER_SINGLE_CLUSTER_FEATURE');
   const snoExpansion = newFeatureSupportLevelContext.isFeatureSupported(
     'SINGLE_NODE_EXPANSION',
     featureSupportLevelData ?? undefined,
@@ -100,11 +102,12 @@ const ControlPlaneNodesDropdown: React.FC<ControlPlaneNodesDropdownProps> = ({
         tnaSupport === 'tech-preview' ? (
           <TechnologyPreview position={PreviewBadgePosition.default} />
         ) : undefined,
+      hidden: isSingleClusterFeatureEnabled,
     },
     { value: 3, label: '3 (highly available cluster)' },
     { value: 4, label: '4 (highly available cluster+)' },
     { value: 5, label: '5 (highly available cluster++)' },
-  ];
+  ].filter(({ hidden }) => !hidden);
 
   React.useEffect(() => {
     if (!field.value) {

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

@@ -3,19 +3,21 @@ import {
   Content,
   ContentVariants,
   Alert,
-  AlertVariant,
   Grid,
   FormGroup,
   Switch,
   Tooltip,
-  Stack,
-  StackItem,
 } from '@patternfly/react-core';
 
 import { CustomManifests } from './components/CustomManifests';
 import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
 import { CustomManifestFormState } from './components/propTypes';
-import { ClustersAPI, ClusterWizardStepHeader, isThirdPartyCNI } from '../../../../common';
+import {
+  ClustersAPI,
+  ClusterWizardStepHeader,
+  CustomManifestsAlert,
+  isThirdPartyCNI,
+} from '../../../../common';
 import { getFieldId } from '../../../../common/components/ui/formik';
 import { isOciPlatformType } from '../../utils';
 import DeleteCustomManifestModal from './DeleteCustomManifestModal';
@@ -90,46 +92,6 @@ export const CustomManifestsPage = ({
     ? 'Custom manifests are required when using a third-party CNI or Oracle Cloud Infrastructure.'
     : '';
 
-  const showExternalPlatformReminder = isOciPlatformType(cluster);
-  const showThirdPartyCnIReminder = isThirdPartyCNI(cluster.networkType);
-  const showCombinedReminder = showExternalPlatformReminder && showThirdPartyCnIReminder;
-  let reminderAlerts: React.ReactNode = null;
-  if (showCombinedReminder) {
-    reminderAlerts = (
-      <Stack>
-        <StackItem>
-          <Alert
-            variant={AlertVariant.info}
-            isInline
-            title="You're using an external platform and a third-party CNI"
-          >
-            Make sure to upload the required custom and CNI manifests in this step.
-          </Alert>
-        </StackItem>
-      </Stack>
-    );
-  } else if (showExternalPlatformReminder) {
-    reminderAlerts = (
-      <Stack>
-        <StackItem>
-          <Alert variant={AlertVariant.info} isInline title="You're using an external platform">
-            Make sure to upload the required custom manifests in this step.
-          </Alert>
-        </StackItem>
-      </Stack>
-    );
-  } else if (showThirdPartyCnIReminder) {
-    reminderAlerts = (
-      <Stack>
-        <StackItem>
-          <Alert variant={AlertVariant.info} isInline title="You're using a third-party CNI">
-            Make sure to upload the required CNI manifests in this step.
-          </Alert>
-        </StackItem>
-      </Stack>
-    );
-  }
-
   return (
     <Grid hasGutter>
       <Content>
@@ -157,7 +119,10 @@ export const CustomManifestsPage = ({
       {!useCustomManifests && <div style={{ minHeight: '250px' }} aria-hidden="true" />}
       {useCustomManifests && (
         <>
-          {reminderAlerts}
+          <CustomManifestsAlert
+            usesExternalPlatform={isOciPlatformType(cluster)}
+            usesThirdPartyCNI={isThirdPartyCNI(cluster.networkType)}
+          />
           <Alert
             isInline
             variant="warning"

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

@@ -9,7 +9,7 @@ import {
   getFormikErrorFields,
   getHostSubnets,
   HostSubnets,
-  IPV4_STACK,
+  SINGLE_STACK,
   isSNO,
   LoadingState,
   NetworkConfigurationValues,
@@ -113,18 +113,20 @@ const NetworkConfigurationForm: React.FC<{
     clusterWizardContext.moveNext();
   }, [addAlert, cluster.id, clusterWizardContext, dispatch, isSingleClusterFeatureEnabled]);
 
+  const isNextDisabled =
+    isSubmitting ||
+    isAutoSaveRunning ||
+    !!alerts.length ||
+    !isValid ||
+    !canNextNetwork({ cluster });
+
   const footer = (
     <ClusterWizardFooter
       cluster={cluster}
       errorFields={errorFields}
       isSubmitting={isSubmitting}
-      isNextDisabled={
-        isSubmitting ||
-        isAutoSaveRunning ||
-        !!alerts.length ||
-        !isValid ||
-        !canNextNetwork({ cluster })
-      }
+      isNextDisabled={isNextDisabled}
+      isWaitingForHosts={!canNextNetwork({ cluster })}
       onNext={() => void onNext()}
       onBack={() => clusterWizardContext.moveBack()}
       isBackDisabled={isSubmitting || isAutoSaveRunning}
@@ -262,7 +264,7 @@ const NetworkConfigurationPage = ({ cluster }: { cluster: Cluster }) => {
         if (values.vipDhcpAllocation) {
           delete params.apiVips;
           delete params.ingressVips;
-        } else if (values.stackType === IPV4_STACK) {
+        } else if (values.stackType === SINGLE_STACK) {
           // The API will rebuild the default machineNetwork
           params.machineNetworks = [];
         }