@openshift-assisted/ui-lib 2.50.1 → 2.51.0

package/lib/common/components/ui/formik/RemovableField.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
-import { Button, ButtonVariant, Tooltip, TooltipProps } from '@patternfly/react-core';
+import { Button, ButtonVariant, Icon, Tooltip, TooltipProps } from '@patternfly/react-core';
 import { MinusCircleIcon } from '@patternfly/react-icons/dist/js/icons/minus-circle-icon';
-import './RemovableField.css';
 import classnames from 'classnames';
-import UiIcon from '../UiIcon';
+
+import './RemovableField.css';
 
 interface RemovableFieldProps {
   onRemove: VoidFunction;
@@ -30,7 +30,11 @@ const RemovableField: React.FC<RemovableFieldProps & Omit<TooltipProps, 'content
       distance={0}
       content={
         <Button
-          icon={<UiIcon size="sm" icon={<MinusCircleIcon />} />}
+          icon={
+            <Icon size="sm">
+              <MinusCircleIcon />
+            </Icon>
+          }
           variant={ButtonVariant.plain}
           onClick={onRemove}
           data-testid={removeButtonDataTestId}

package/lib/common/components/ui/formik/RichInputField.tsx

@@ -15,15 +15,13 @@ import {
   FormHelperText,
   HelperText,
   ButtonVariant,
+  Icon,
 } from '@patternfly/react-core';
 import { CheckCircleIcon } from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
 import { CheckIcon } from '@patternfly/react-icons/dist/js/icons/check-icon';
 import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
 import { InfoCircleIcon } from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
 import { TimesIcon } from '@patternfly/react-icons/dist/js/icons/times-icon';
-import { t_global_color_status_success_default as okColor } from '@patternfly/react-tokens/dist/js/t_global_color_status_success_default';
-import { t_global_icon_color_status_danger_default as dangerColor } from '@patternfly/react-tokens/dist/js/t_global_icon_color_status_danger_default';
-import { t_global_icon_color_status_info_default as blueInfoColor } from '@patternfly/react-tokens/dist/js/t_global_icon_color_status_info_default';
 
 import { InputFieldProps as BaseInputProps } from './types';
 import { getFieldId } from './utils';
@@ -164,11 +162,17 @@ const RichInputField: React.FC<RichInputFieldPropsProps> = React.forwardRef(
               <Button
                 icon={
                   !isValid ? (
-                    <ExclamationCircleIcon color={dangerColor.value} />
+                    <Icon status="danger">
+                      <ExclamationCircleIcon />
+                    </Icon>
                   ) : value ? (
-                    <CheckCircleIcon color={okColor.value} />
+                    <Icon status="success">
+                      <CheckCircleIcon />
+                    </Icon>
                   ) : (
-                    <InfoCircleIcon color={blueInfoColor.value} />
+                    <Icon status="info">
+                      <InfoCircleIcon />
+                    </Icon>
                   )
                 }
                 variant={ButtonVariant.control}

package/lib/common/components/ui/formik/TextAreaField.tsx

@@ -72,7 +72,7 @@ const TextAreaField: React.FC<React.PropsWithChildren<TextAreaFieldProps>> = ({
                 icon={<ExclamationCircleIcon />}
                 variant={'error'}
                 id={`${fieldId}-helper-error`}
-                data-testid={`input-textarea-${fieldId}-helper-text`}
+                data-testid={`input-textarea-${fieldId}-helper-text-error`}
               >
                 {errorMessage}
               </HelperTextItem>

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

@@ -28,5 +28,3 @@ export { default as ClusterEventsToolbar } from './ClusterEventsToolbar';
 export { default as ModalProgress } from './ModalProgress';
 export { default as ConfirmationModal } from './ConfirmationModal';
 export { default as NoPermissionsError } from './NoPermissionsError';
-
-export { default as UiIcon } from './UiIcon';

package/lib/common/config/constants.ts

@@ -53,6 +53,7 @@ export const clusterStatusLabels = (t: TFunction): { [key in Cluster['status']]:
   error: t('ai:Error'),
   installed: t('ai:Installed'),
   'adding-hosts': t('ai:Adding hosts'),
+  unmonitored: t('ai:Unmonitored'),
 });
 
 export const clusterFieldLabels = (t: TFunction): { [key in string]: string } => ({
@@ -73,6 +74,7 @@ export const clusterFieldLabels = (t: TFunction): { [key in string]: string } =>
   machineNetworks: t('ai:Machine networks'),
   clusterNetworks: t('ai:Cluster networks'),
   serviceNetworks: t('ai:Service networks'),
+  rendezvousIp: t('ai:Rendezvous IP'),
 });
 
 export const hostValidationGroupLabels = (
@@ -333,6 +335,19 @@ export const NO_SUBNET_SET = 'NO_SUBNET_SET';
 
 export const NETWORK_TYPE_OVN = 'OVNKubernetes';
 export const NETWORK_TYPE_SDN = 'OpenShiftSDN';
+export const NETWORK_TYPE_CISCO_ACI = 'CiscoACI';
+export const NETWORK_TYPE_CILIUM = 'Cilium';
+export const NETWORK_TYPE_CALICO = 'Calico';
+export const NETWORK_TYPE_NONE = '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 IPV4_STACK = 'singleStack';
 export const DUAL_STACK = 'dualStack';
@@ -379,6 +394,7 @@ export const OPERATOR_NAME_METALLB = 'metallb';
 
 export const singleClusterOperators = [
   OPERATOR_NAME_CNV,
+  OPERATOR_NAME_LSO,
   OPERATOR_NAME_MTV,
   OPERATOR_NAME_NMSTATE,
   OPERATOR_NAME_NODE_HEALTHCHECK,
@@ -388,6 +404,9 @@ export const singleClusterOperators = [
   OPERATOR_NAME_CLUSTER_OBSERVABILITY,
   OPERATOR_NAME_LOKI,
   OPERATOR_NAME_OPENSHIFT_LOGGING,
+  OPERATOR_NAME_NUMA_RESOURCES,
+  OPERATOR_NAME_OADP,
+  OPERATOR_NAME_METALLB,
 ];
 
 export const singleClusterBundles = ['virtualization'];

package/lib/common/config/docs_links.ts

@@ -54,6 +54,8 @@ export const getOpenShiftNetworkingDocsLink = (ocpVersion?: string) => {
   return `https://docs.redhat.com/en/documentation/openshift_container_platform/${validOcpVersion}/html/installing_on_bare_metal/${variant}#installation-network-user-infra_installing-bare-metal`;
 };
 
+export const RED_HAT_CNI_SUPPORT_MATRIX_LINK = 'https://access.redhat.com/articles/5436171';
+
 export const SSH_GENERATION_DOC_LINK = 'https://www.redhat.com/sysadmin/configure-ssh-keygen';
 
 //Hosts status

package/lib/common/types/ui-settings.ts

@@ -1,5 +1,4 @@
 export type UISettingsValues = {
-  addCustomManifests?: boolean;
   customManifestsAdded?: boolean;
   customManifestsUpdated?: boolean;
   bundlesSelected?: string[];

package/lib/common/validationSchemas/addressValidation.tsx

@@ -29,7 +29,10 @@ export const ipNoSuffixValidationSchema = (t: TFunction) =>
 
 export const macAddressValidationSchema = (t: TFunction) =>
   Yup.string().matches(MAC_REGEX, {
-    message: (value) => t('ai:Value "{{value}}" is not valid MAC address.', { value }),
+    message: (params: { value?: unknown }) =>
+      t('ai:Value "{{value}}" is not valid MAC address.', {
+        value: params?.value !== undefined ? String(params.value) : '',
+      }),
     excludeEmptyString: true,
   });
 

package/lib/common/validationSchemas/clusterDetailsValidation.tsx

@@ -123,23 +123,55 @@ export const dnsNameValidationSchema = (t: TFunction) =>
       excludeEmptyString: true,
     });
 
+const MAX_DNS_NAME_LENGTH = 253;
+/** Only letters, digits, hyphen, and dot (valid DNS/hostname characters). */
+const DNS_CHARS_REGEX = /^[a-z0-9.-]+$/i;
+
+/**
+ * Validates the full cluster address [clusterName].[baseDomain] as a single DNS/hostname
+ * (e.g. "doma.ca" is valid even though "ca" alone might not pass standalone base-domain rules).
+ */
+export const isValidFullClusterAddress = (full: string): boolean => {
+  if (!full || full === '.' || /\s/.test(full)) {
+    return false;
+  }
+  if (full.length > MAX_DNS_NAME_LENGTH) {
+    return false;
+  }
+  if (!DNS_CHARS_REGEX.test(full)) {
+    return false;
+  }
+  const labels = full.split('.');
+  if (labels.some((label) => label.length === 0 || label.length > 63)) {
+    return false;
+  }
+  return HOST_NAME_REGEX.test(full);
+};
+
 export const baseDomainValidationSchema = (t: TFunction) =>
-  Yup.string().test(
-    'dns-name-label-length',
-    t(
-      'ai:Every single host component in the base domain name cannot contain more than 63 characters and must not contain spaces.',
-    ),
-    (value?: string) => {
-      // Check if the value contains any spaces
-      if (/\s/.test(value as string)) {
-        return false; // Value contains spaces, validation fails
-      }
+  Yup.string()
+    .test(
+      'dns-name-label-length',
+      t(
+        'ai:Every single host component in the base domain name cannot contain more than 63 characters and must not contain spaces.',
+      ),
+      (value?: string) => {
+        // Check if the value contains any spaces
+        if (/\s/.test(value as string)) {
+          return false; // Value contains spaces, validation fails
+        }
 
-      // Check the label lengths
-      const labels = (value || '').split('.');
-      return labels.every((label: string) => label.length <= 63);
-    },
-  );
+        // Check the label lengths
+        const labels = (value || '').split('.');
+        return labels.every((label: string) => label.length <= 63);
+      },
+    )
+    .matches(NAME_CHARS_REGEX, {
+      message: t(
+        'ai:Base domain can only contain letters, digits, hyphens, and dots. Example: example.com',
+      ),
+      excludeEmptyString: true,
+    });
 
 export const locationValidationSchema = (t: TFunction) =>
   Yup.string()

package/lib/ocm/components/Routes.tsx

@@ -34,7 +34,9 @@ export const UILibRoutes = ({
     <>
       <Routes>
         <Route path="assisted-installer/clusters" element={<Outlet />}>
-          <Route path="~new" element={<NewClusterPage />} />
+          <Route path="~new" element={<NewClusterPage />}>
+            <Route path=":clusterId" element={<NewClusterPage />} />
+          </Route>
           <Route path=":clusterId" element={<ClusterPage />} />
           <Route index element={<Clusters />} />
         </Route>

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

@@ -20,6 +20,7 @@ export const discoveryImageTypes: Record<DiscoveryImageType, string> = {
   'minimal-iso': 'Minimal image file - Download an ISO that fetches content on boot',
   'full-iso': 'Full image file - Download a self-contained ISO',
   'discovery-image-ipxe': 'iPXE - Provision from your network server',
+  'disconnected-iso': 'Disconnected ISO - Provision from a local file',
 };
 
 type DiscoveryImageTypeDropdownProps = {

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

@@ -21,7 +21,6 @@ import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 import { OcmRichInputField } from '../ui/OcmFormFields';
 import OcmOpenShiftVersion from './OcmOpenShiftVersion';
 import OcmOpenShiftVersionSelect from './OcmOpenShiftVersionSelect';
-import CustomManifestCheckbox from './CustomManifestCheckbox';
 import CpuArchitectureDropdown from './CpuArchitectureDropdown';
 import { OcmBaseDomainField } from './OcmBaseDomainField';
 import useSupportLevelsAPI from '../../hooks/useSupportLevelsAPI';
@@ -35,7 +34,6 @@ import {
   ManagedDomain,
   PlatformType,
 } from '@openshift-assisted/types/assisted-installer-service';
-import { useClusterWizardContext } from '../clusterWizard/ClusterWizardContext';
 import { useFeature } from '../../hooks/use-feature';
 import ControlPlaneNodesDropdown, {
   ControlPlaneNodesLabel,
@@ -68,7 +66,6 @@ export const OcmClusterDetailsFormFields = ({
   const { openshiftVersion, platform } = values;
   const { getCpuArchitectures } = useOpenShiftVersionsContext();
   const cpuArchitecturesByVersionImage = getCpuArchitectures(openshiftVersion);
-  const clusterWizardContext = useClusterWizardContext();
   const featureSupportLevelData = useSupportLevelsAPI(
     'features',
     values.openshiftVersion,
@@ -91,12 +88,10 @@ export const OcmClusterDetailsFormFields = ({
     (selectedPlatform: PlatformType) => {
       const isOracleSelected = selectedPlatform === 'external';
       if (isOracleSelected) {
-        setFieldValue('addCustomManifest', isOracleSelected, false);
-        clusterWizardContext.setCustomManifestsStep(isOracleSelected);
         setFieldValue('hostsNetworkConfigurationType', HostsNetworkConfigurationType.DHCP);
       }
     },
-    [clusterWizardContext, setFieldValue],
+    [setFieldValue],
   );
 
   React.useEffect(() => {
@@ -213,8 +208,6 @@ export const OcmClusterDetailsFormFields = ({
       ) : (
         <ControlPlaneNodesDropdown featureSupportLevelData={featureSupportLevelData} />
       )}
-      <CustomManifestCheckbox clusterId={cluster?.id || ''} isDisabled={platform === 'external'} />
-
       {!isSingleClusterFeatureEnabled && (
         <HostsNetworkConfigurationControlGroup
           clusterExists={clusterExists}

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

@@ -16,7 +16,6 @@ import { Formik, FormikHelpers } from 'formik';
 import { TFunction } from 'i18next';
 import {
   HostStaticNetworkConfig,
-  ImageType,
   InfraEnv,
   Proxy,
 } from '@openshift-assisted/types/assisted-installer-service';
@@ -72,7 +71,7 @@ type OcmDiscoveryImageConfigFormProps = Proxy & {
     formikActions: FormikHelpers<OcmDiscoveryImageFormValues>,
   ) => Promise<void>;
   sshPublicKey?: string;
-  imageType?: ImageType;
+  imageType?: DiscoveryImageType;
   isIpxeSelected?: boolean;
   enableCertificate?: boolean;
   trustBundle?: InfraEnv['additionalTrustBundle'];
@@ -106,7 +105,7 @@ export const OcmDiscoveryImageConfigForm = ({
     httpsProxy: httpsProxy || '',
     noProxy: noProxy || '',
     enableProxy: !!(httpProxy || httpsProxy || noProxy),
-    imageType: imageTypeValue as ImageType,
+    imageType: imageType,
     enableCertificate: enableCertificate || false,
     trustBundle: trustBundle || '',
   };

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

@@ -1,11 +1,9 @@
 import React from 'react';
-import { Button, ButtonVariant, List, ListItem, Popover } from '@patternfly/react-core';
+import { Button, ButtonVariant, Icon, List, ListItem, Popover } from '@patternfly/react-core';
 import { CheckCircleIcon } from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
 import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
 import { InProgressIcon } from '@patternfly/react-icons/dist/js/icons/in-progress-icon';
 import { PendingIcon } from '@patternfly/react-icons/dist/js/icons/pending-icon';
-import { t_global_icon_color_status_danger_default as dangerColor } from '@patternfly/react-tokens/dist/js/t_global_icon_color_status_danger_default';
-import { t_global_color_status_success_default as okColor } from '@patternfly/react-tokens/dist/js/t_global_color_status_success_default';
 import { pluralize } from 'humanize-plus';
 import { TFunction } from 'i18next';
 
@@ -60,9 +58,17 @@ export function getOperatorsLabel(operators: MonitoredOperatorsList, t: TFunctio
 export function getOperatorsIcon(status: OperatorStatus | 'pending') {
   switch (status) {
     case 'available':
-      return <CheckCircleIcon color={okColor.value} />;
+      return (
+        <Icon status="success">
+          <CheckCircleIcon />
+        </Icon>
+      );
     case 'failed':
-      return <ExclamationCircleIcon color={dangerColor.value} />;
+      return (
+        <Icon status="danger">
+          <ExclamationCircleIcon />
+        </Icon>
+      );
     case 'progressing':
       return <InProgressIcon />;
     default:

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

@@ -1,9 +1,6 @@
 import * as React from 'react';
-import {
-  OPENSHIFT_LIFE_CYCLE_DATES_LINK,
-  OpenshiftVersionOptionType,
-  UiIcon,
-} from '../../../common';
+import { Icon } from '@patternfly/react-core';
+import { OPENSHIFT_LIFE_CYCLE_DATES_LINK, OpenshiftVersionOptionType } from '../../../common';
 import { TFunction } from 'i18next';
 import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
 import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
@@ -29,7 +26,9 @@ export const getOpenshiftVersionHelperText = (
   if (!versions.length && !isModal) {
     return (
       <>
-        <UiIcon status="danger" size="sm" icon={<ExclamationCircleIcon />} />
+        <Icon status="danger" size="sm">
+          <ExclamationCircleIcon />
+        </Icon>
         &nbsp; {t('ai:No release image is available.')}
       </>
     );
@@ -50,7 +49,9 @@ export const getOpenshiftVersionHelperText = (
     }
     return (
       <>
-        <UiIcon status="warning" icon={<ExclamationTriangleIcon />} />
+        <Icon status="warning">
+          <ExclamationTriangleIcon />
+        </Icon>
         &nbsp;
         {messageSelectedVersion}&nbsp;
         <OpenShiftLifeCycleDatesLink />

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

@@ -1,10 +1,25 @@
 import React from 'react';
-import { Content, ContentVariants, Alert, Grid } from '@patternfly/react-core';
+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 { ClusterWizardStepHeader } from '../../../../common';
+import { ClustersAPI, ClusterWizardStepHeader } from '../../../../common';
+import { isOciPlatformType, isThirdPartyCNI } from '../../utils';
+import DeleteCustomManifestModal from './DeleteCustomManifestModal';
+import { ClustersService } from '../../../services';
+import { useClusterWizardContext } from '../../clusterWizard/ClusterWizardContext';
 
 export const CustomManifestsPage = ({
   cluster,
@@ -12,22 +27,142 @@ export const CustomManifestsPage = ({
 }: {
   cluster: Cluster;
   onFormStateChange(formState: CustomManifestFormState): void;
-}) => (
-  <Grid hasGutter>
-    <Content>
-      <ClusterWizardStepHeader>Custom manifests</ClusterWizardStepHeader>
-      <Content component={ContentVariants.small}>
-        Upload additional manifests that will be applied at the install time for advanced
-        configuration of the cluster.
-      </Content>
-    </Content>
-    <Alert
-      isInline
-      variant="warning"
-      title={
-        'No validation is performed for the custom manifest contents. Only include resources that are necessary for initial setup to reduce the chance of installation failures.'
+}) => {
+  const clusterWizardContext = useClusterWizardContext();
+  const isRequired = isThirdPartyCNI(cluster.networkType) || isOciPlatformType(cluster);
+  const [useCustomManifests, setUseCustomManifests] = React.useState(isRequired);
+  const [isDeleteModalOpen, setDeleteModalOpen] = React.useState(false);
+
+  React.useEffect(() => {
+    if (isRequired || clusterWizardContext.uiSettings?.customManifestsAdded) {
+      setUseCustomManifests(true);
+    }
+  }, [isRequired, clusterWizardContext]);
+
+  // The form unmounts when the switch is off, but its last state persists in the parent.
+  React.useEffect(() => {
+    if (!useCustomManifests) {
+      onFormStateChange({
+        isValid: true,
+        isSubmitting: false,
+        isAutoSaveRunning: false,
+        errors: {},
+        touched: {},
+        isEmpty: true,
+      });
+    }
+  }, [useCustomManifests, onFormStateChange]);
+
+  const handleSwitchChange = React.useCallback(
+    (_event: React.FormEvent<HTMLInputElement>, on: boolean) => {
+      if (!on && clusterWizardContext.uiSettings?.customManifestsAdded) {
+        setDeleteModalOpen(true);
+      } else {
+        setUseCustomManifests(on);
+        if (!on) {
+          void clusterWizardContext.updateUISettings({ customManifestsAdded: false });
+        }
       }
-    />
-    <CustomManifests cluster={cluster} onFormStateChange={onFormStateChange} />
-  </Grid>
-);
+    },
+    [clusterWizardContext],
+  );
+
+  const handleCloseDeleteModal = React.useCallback(() => {
+    setDeleteModalOpen(false);
+  }, []);
+
+  const cleanCustomManifests = React.useCallback(async () => {
+    if (!clusterWizardContext.uiSettings?.customManifestsAdded || !cluster.id) return;
+    const { data: manifests } = await ClustersAPI.getManifests(cluster.id);
+    await ClustersService.removeClusterManifests(manifests, cluster.id);
+    setUseCustomManifests(false);
+    setDeleteModalOpen(false);
+    await clusterWizardContext.updateUISettings({ customManifestsAdded: false });
+  }, [cluster.id, clusterWizardContext]);
+
+  const tooltipWhenDisabled = isRequired
+    ? '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>
+        <ClusterWizardStepHeader>Custom manifests</ClusterWizardStepHeader>
+        <Content component={ContentVariants.small}>
+          Upload additional manifests that will be applied at the install time for advanced
+          configuration of the cluster.
+        </Content>
+      </Content>
+      <FormGroup fieldId="use-custom-manifests" label="">
+        <Tooltip content={tooltipWhenDisabled} hidden={!isRequired}>
+          <span style={{ display: 'inline-block', cursor: isRequired ? 'not-allowed' : undefined }}>
+            <Switch
+              id="use-custom-manifests"
+              isChecked={useCustomManifests}
+              isDisabled={isRequired}
+              onChange={handleSwitchChange}
+              label="Use custom manifests"
+            />
+          </span>
+        </Tooltip>
+      </FormGroup>
+      {!useCustomManifests && <div style={{ minHeight: '120px' }} aria-hidden="true" />}
+      {useCustomManifests && (
+        <>
+          {reminderAlerts}
+          <Alert
+            isInline
+            variant="warning"
+            title="No validation is performed for the custom manifest contents. Only include resources that are necessary for initial setup to reduce the chance of installation failures."
+          />
+          <CustomManifests cluster={cluster} onFormStateChange={onFormStateChange} />
+        </>
+      )}
+      <DeleteCustomManifestModal
+        isOpen={isDeleteModalOpen}
+        onClose={handleCloseDeleteModal}
+        onDelete={() => void cleanCustomManifests()}
+      />
+    </Grid>
+  );
+};

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

@@ -23,9 +23,9 @@ import {
   VirtualIPControlGroupProps,
   AdvancedNetworkFields,
 } from '../../../../common/components/clusterWizard/networkingSteps';
+import { NetworkTypeDropDown } from './NetworkTypeDropdown';
 import { selectCurrentClusterPermissionsState } from '../../../store/slices/current-cluster/selectors';
 import { OcmCheckbox } from '../../ui/OcmFormFields';
-import { NetworkTypeControlGroup } from '../../../../common/components/clusterWizard/networkingSteps/NetworkTypeControlGroup';
 import {
   NewFeatureSupportLevelData,
   NewFeatureSupportLevelMap,
@@ -259,11 +259,13 @@ const NetworkConfiguration = ({
           />
         </StackItem>
       )}
-      {isSDNSupported && (
-        <StackItem>
-          <NetworkTypeControlGroup isDisabled={isViewerMode} isSDNSelectable={isSDNSelectable} />
-        </StackItem>
-      )}
+      <StackItem>
+        <NetworkTypeDropDown
+          isDisabled={isViewerMode}
+          isSDNSelectable={isSDNSelectable}
+          featureSupportLevelData={featureSupportLevelData}
+        />
+      </StackItem>
 
       {!(isUserManagedNetworking && !isSNOCluster) && (
         <StackItem>