@openshift-assisted/ui-lib 2.17.3-cim → 2.18.0-cim

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

@@ -7,7 +7,12 @@ import {
   Button,
   ButtonVariant,
 } from '@patternfly/react-core';
-import { ClusterWizardStep, ErrorState, LoadingState } from '../../../../common';
+import {
+  ClusterWizardStep,
+  ClusterWizardStepHeader,
+  ErrorState,
+  LoadingState,
+} from '../../../../common';
 import { HostsNetworkConfigurationType, InfraEnvsService } from '../../../services';
 import { FormViewHosts } from '../../clusterConfiguration/staticIp/components/FormViewHosts/FormViewHosts';
 import { FormViewNetworkWide } from '../../clusterConfiguration/staticIp/components/FormViewNetworkWide/FormViewNetworkWide';
@@ -164,7 +169,7 @@ const Day2StaticIP = () => {
     >
       <Grid hasGutter>
         <Content>
-          <Content component={ContentVariants.h2}>Static network configurations</Content>
+          <ClusterWizardStepHeader>Static network configurations</ClusterWizardStepHeader>
           <Content component={ContentVariants.small}>
             Network configuration can be done using either the form view or YAML view.
             Configurations done in this step are for discovering hosts.

package/lib/ocm/components/Routes.tsx

@@ -20,7 +20,6 @@ type UILibRoutesProps = {
   children?: React.ReactNode;
   history?: HistoryRouterProps['history'];
   basename?: string;
-  additionalComponents?: React.ReactNode;
 };
 
 export const UILibRoutes = ({
@@ -28,7 +27,6 @@ export const UILibRoutes = ({
   children,
   history,
   basename,
-  additionalComponents,
 }: UILibRoutesProps) => {
   useFeatureDetection(allEnabledFeatures);
 
@@ -36,16 +34,13 @@ export const UILibRoutes = ({
     <>
       <Routes>
         <Route path="assisted-installer/clusters" element={<Outlet />}>
-          <Route path="~new" element={<NewClusterPage />}>
-            <Route path=":clusterId" element={<NewClusterPage />} />
-          </Route>
+          <Route path="~new" element={<NewClusterPage />} />
           <Route path=":clusterId" element={<ClusterPage />} />
           <Route index element={<Clusters />} />
         </Route>
         {children}
         <Route path="*" element={<Navigate to="assisted-installer/clusters" />} />
       </Routes>
-      {additionalComponents}
     </>
   );
 

package/lib/ocm/components/SentryErrorMonitorContextProvider.tsx

@@ -8,7 +8,9 @@ import { handleApiError } from '../../common/api';
 import { isApiError } from '../../common/api/utils';
 import { captureException } from '../sentry';
 
-export const SentryErrorMonitorContextProvider: React.FC = ({ children }) => {
+export const SentryErrorMonitorContextProvider: React.FC<React.PropsWithChildren> = ({
+  children,
+}) => {
   const exceptionReporter: ExceptionReporter = (
     error: unknown,
     message?: string,

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';
@@ -30,8 +29,11 @@ import { ExternalPlatformDropdown } from './platformIntegration/ExternalPlatform
 import { HostsNetworkConfigurationType } from '../../services/types';
 import { useNewFeatureSupportLevel } from '../../../common/components/newFeatureSupportLevels';
 import { ExternalPlatformLabels } from './platformIntegration/constants';
-import { ManagedDomain, PlatformType } from '@openshift-assisted/types/assisted-installer-service';
-import { useClusterWizardContext } from '../clusterWizard/ClusterWizardContext';
+import {
+  Cluster,
+  ManagedDomain,
+  PlatformType,
+} from '@openshift-assisted/types/assisted-installer-service';
 import { useFeature } from '../../hooks/use-feature';
 import ControlPlaneNodesDropdown, {
   ControlPlaneNodesLabel,
@@ -40,28 +42,21 @@ import ControlPlaneNodesDropdown, {
 } from './ControlPlaneNodesDropdown';
 
 export type OcmClusterDetailsFormFieldsProps = {
-  forceOpenshiftVersion?: string;
+  cluster?: Cluster;
   defaultPullSecret?: string;
   isOcm: boolean;
   managedDomains?: ManagedDomain[];
   versions: OpenshiftVersionOptionType[];
-  isPullSecretSet: boolean;
-  clusterExists: boolean;
-  clusterCpuArchitecture?: string;
-  clusterId?: string;
 };
 
 export const OcmClusterDetailsFormFields = ({
   managedDomains = [],
   versions,
-  isPullSecretSet,
   defaultPullSecret,
-  forceOpenshiftVersion,
   isOcm,
-  clusterExists,
-  clusterCpuArchitecture,
-  clusterId,
+  cluster,
 }: OcmClusterDetailsFormFieldsProps) => {
+  const clusterExists = !!cluster;
   const { values, setFieldValue } = useFormikContext<ClusterDetailsValues>();
   const { useRedHatDnsService } = values;
   const nameInputRef = React.useRef<HTMLInputElement>();
@@ -71,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,
@@ -94,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(() => {
@@ -165,16 +157,16 @@ export const OcmClusterDetailsFormFields = ({
 
       <OcmBaseDomainField managedDomains={managedDomains} clusterExists={clusterExists} />
 
-      {forceOpenshiftVersion ? (
+      {clusterExists || isSingleClusterFeatureEnabled ? (
         <OcmOpenShiftVersion
           versions={versions}
-          openshiftVersion={forceOpenshiftVersion}
-          clusterCpuArchitecture={clusterCpuArchitecture}
+          openshiftVersion={values.openshiftVersion}
+          clusterCpuArchitecture={values.cpuArchitecture}
           withPreviewText
           withMultiText
         />
       ) : (
-        <OcmOpenShiftVersionSelect versions={versions} />
+        <OcmOpenShiftVersionSelect />
       )}
       {clusterExists || isSingleClusterFeatureEnabled ? (
         <StaticTextField name="cpuArchitecture" label="CPU architecture" isRequired>
@@ -187,7 +179,12 @@ export const OcmClusterDetailsFormFields = ({
         />
       )}
 
-      {!isPullSecretSet && <PullSecret isOcm={isOcm} defaultPullSecret={defaultPullSecret} />}
+      <PullSecret
+        isOcm={isOcm}
+        defaultPullSecret={defaultPullSecret}
+        isPullSecretSet={!!cluster?.pullSecretSet}
+        isSingleClusterFeatureEnabled={isSingleClusterFeatureEnabled}
+      />
 
       {!isSingleClusterFeatureEnabled &&
         (clusterExists ? (
@@ -214,8 +211,6 @@ export const OcmClusterDetailsFormFields = ({
       ) : (
         <ControlPlaneNodesDropdown featureSupportLevelData={featureSupportLevelData} />
       )}
-      <CustomManifestCheckbox clusterId={clusterId || ''} isDisabled={platform === 'external'} />
-
       {!isSingleClusterFeatureEnabled && (
         <HostsNetworkConfigurationControlGroup
           clusterExists={clusterExists}
@@ -225,7 +220,7 @@ export const OcmClusterDetailsFormFields = ({
 
       <DiskEncryptionControlGroup
         values={values}
-        isDisabled={isPullSecretSet}
+        isDisabled={cluster?.pullSecretSet}
         isSNO={values.controlPlaneCount === 1}
         docVersion={openshiftVersion}
       />

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

@@ -5,70 +5,63 @@ import {
   ClusterDetailsValues,
   OpenShiftVersionDropdown,
   OpenShiftVersionModal,
+  getComparableVersionInt,
 } from '../../../common';
 import { isInOcm } from '../../../common/api';
 import { useFormikContext } from 'formik';
 import { getOpenshiftVersionHelperText } from './OpenshiftVersionHelperText';
 import { useOpenShiftVersionsContext } from '../clusterWizard/OpenShiftVersionsContext';
 
+const filterMinVersions = (versions: OpenshiftVersionOptionType[], minVersion: number) =>
+  versions.filter((v) => getComparableVersionInt(v.value) >= minVersion);
+
 type OcmOpenShiftVersionSelectProps = {
-  versions: OpenshiftVersionOptionType[];
+  minVersionAllowed?: number;
 };
-const OcmOpenShiftVersionSelect = ({ versions }: OcmOpenShiftVersionSelectProps) => {
+const OcmOpenShiftVersionSelect = ({ minVersionAllowed }: OcmOpenShiftVersionSelectProps) => {
   const { t } = useTranslation();
   const {
     values: { customOpenshiftSelect },
   } = useFormikContext<ClusterDetailsValues>();
-  const { allVersions } = useOpenShiftVersionsContext();
-  const [isOpenshiftVersionModalOpen, setIsOpenshiftVersionModalOpen] = React.useState(false);
+  const { allVersions: allVersionsCtx, latestVersions } = useOpenShiftVersionsContext();
 
-  const selectOptions = React.useMemo(
-    () =>
-      versions.map((version) => ({
-        label:
-          version.supportLevel === 'beta'
-            ? version.label + ' - ' + t('ai:Developer preview release')
-            : version.label,
-        // This is the "key" from openshift-versions API response
-        // It can either be in the long or short (for default versions) form
-        value: version.value,
-      })),
-    [versions, t],
-  );
+  const allVersions = minVersionAllowed
+    ? filterMinVersions(allVersionsCtx, minVersionAllowed)
+    : allVersionsCtx;
+  const versions = minVersionAllowed
+    ? filterMinVersions(latestVersions, minVersionAllowed)
+    : latestVersions;
 
-  const updatedSelectOptions = React.useMemo(() => {
+  const [isOpenshiftVersionModalOpen, setIsOpenshiftVersionModalOpen] = React.useState(false);
+
+  const customItem = React.useMemo(() => {
     if (
       customOpenshiftSelect &&
-      !selectOptions.some((version) => version.value === customOpenshiftSelect)
+      !versions.some((version) => version.value === customOpenshiftSelect)
     ) {
       return allVersions.find((version) => version.value === customOpenshiftSelect);
     }
     return undefined;
-  }, [allVersions, customOpenshiftSelect, selectOptions]);
+  }, [allVersions, customOpenshiftSelect, versions]);
 
   const getHelperText = (value: string | null, inModal?: boolean) => {
     return getOpenshiftVersionHelperText(allVersions, value, t, inModal);
   };
 
-  const showOpenshiftVersionModal = () => {
-    setIsOpenshiftVersionModalOpen(true);
-  };
-
   return (
     <>
       <OpenShiftVersionDropdown
         name="openshiftVersion"
-        items={selectOptions}
         versions={versions}
         getHelperText={getHelperText}
         showReleasesLink={isInOcm}
-        showOpenshiftVersionModal={showOpenshiftVersionModal}
-        customItem={updatedSelectOptions}
+        showOpenshiftVersionModal={() => setIsOpenshiftVersionModalOpen(true)}
+        customVersion={customItem}
       />
       {isOpenshiftVersionModalOpen && (
         <OpenShiftVersionModal
           allVersions={allVersions}
-          setOpenshiftVersionModalOpen={setIsOpenshiftVersionModalOpen}
+          onClose={() => setIsOpenshiftVersionModalOpen(false)}
           getHelperText={getHelperText}
         />
       )}

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,9 +1,26 @@
 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 { ClustersAPI, ClusterWizardStepHeader, isThirdPartyCNI } from '../../../../common';
+import { getFieldId } from '../../../../common/components/ui/formik';
+import { isOciPlatformType } from '../../utils';
+import DeleteCustomManifestModal from './DeleteCustomManifestModal';
+import { ClustersService } from '../../../services';
+import { useClusterWizardContext } from '../../clusterWizard/ClusterWizardContext';
 
 export const CustomManifestsPage = ({
   cluster,
@@ -11,22 +28,149 @@ export const CustomManifestsPage = ({
 }: {
   cluster: Cluster;
   onFormStateChange(formState: CustomManifestFormState): void;
-}) => (
-  <Grid hasGutter>
-    <Content>
-      <Content component={ContentVariants.h2}>Custom manifests</Content>
-      <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,
+      customManifestsUpdated: true,
+    });
+  }, [cluster.id, clusterWizardContext]);
+
+  const fieldId = getFieldId('use-custom-manifests', 'switch');
+
+  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={fieldId} label="">
+        <Tooltip content={tooltipWhenDisabled} hidden={!isRequired}>
+          <span style={{ display: 'inline-block', cursor: isRequired ? 'not-allowed' : undefined }}>
+            <Switch
+              id={fieldId}
+              data-testid={fieldId}
+              data-checked={useCustomManifests}
+              isChecked={useCustomManifests}
+              isDisabled={isRequired}
+              onChange={handleSwitchChange}
+              label="Use custom manifests"
+            />
+          </span>
+        </Tooltip>
+      </FormGroup>
+      {!useCustomManifests && <div style={{ minHeight: '250px' }} 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/manifestsConfiguration/components/CustomManifestsArray.tsx

@@ -12,6 +12,7 @@ import { CustomManifest } from './CustomManifest';
 import { getEmptyManifest, getManifestName } from './utils';
 import { CustomManifestValues } from '../data/dataTypes';
 import { selectCurrentClusterPermissionsState } from '../../../../store/slices/current-cluster/selectors';
+import { useClusterWizardContext } from '../../../clusterWizard/ClusterWizardContext';
 
 const fieldName = 'manifests';
 
@@ -40,6 +41,8 @@ export const CustomManifestsArray = ({
   clusterId,
   ...props
 }: CustomManifestsArrayProps) => {
+  const { updateUISettings } = useClusterWizardContext();
+
   const [field, { error }] = useField<CustomManifestValues[]>({
     name: fieldName,
   });
@@ -67,6 +70,7 @@ export const CustomManifestsArray = ({
             manifestToRemove['folder'] as string,
             manifestToRemove['filename'],
           );
+          await updateUISettings({ customManifestsUpdated: true });
         } catch (e) {
           handleApiError(e, () =>
             addAlert({
@@ -77,7 +81,7 @@ export const CustomManifestsArray = ({
         }
       }
     },
-    [addAlert, field.value],
+    [addAlert, field.value, updateUISettings],
   );
 
   const onConfirm = React.useCallback(async (): Promise<void> => {

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

@@ -4,7 +4,6 @@ import { useSelector } from 'react-redux';
 import { Stack, StackItem, Tooltip } from '@patternfly/react-core';
 import {
   canBeDualStack,
-  canSelectNetworkTypeSDN,
   CpuArchitecture,
   DUAL_STACK,
   HostSubnets,
@@ -23,9 +22,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,
@@ -144,9 +143,6 @@ const NetworkConfiguration = ({
   const isDualStack = values.stackType === DUAL_STACK;
 
   const isDualStackSelectable = React.useMemo(() => canBeDualStack(hostSubnets), [hostSubnets]);
-  const isSDNSelectable = React.useMemo(() => {
-    return canSelectNetworkTypeSDN(isSNOCluster, isDualStack);
-  }, [isSNOCluster, isDualStack]);
 
   const [isAdvanced, setAdvanced] = React.useState(
     isDualStack || isAdvNetworkConf(cluster, defaultNetworkSettings),
@@ -259,11 +255,12 @@ const NetworkConfiguration = ({
           />
         </StackItem>
       )}
-      {isSDNSupported && (
-        <StackItem>
-          <NetworkTypeControlGroup isDisabled={isViewerMode} isSDNSelectable={isSDNSelectable} />
-        </StackItem>
-      )}
+      <StackItem>
+        <NetworkTypeDropDown
+          isDisabled={isViewerMode}
+          featureSupportLevelData={featureSupportLevelData}
+        />
+      </StackItem>
 
       {!(isUserManagedNetworking && !isSNOCluster) && (
         <StackItem>

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

@@ -236,9 +236,13 @@ const NetworkConfigurationPage = ({ cluster }: { cluster: Cluster }) => {
       const isMultiNodeCluster = !isSNO(cluster);
       const isUserManagedNetworking = values.managedNetworkingType === 'userManaged';
 
+      // Only send VIPs that have a non-empty IP;
+      const apiVips = (values.apiVips || []).filter((v) => (v?.ip ?? '').trim() !== '');
+      const ingressVips = (values.ingressVips || []).filter((v) => (v?.ip ?? '').trim() !== '');
+
       const params: V2ClusterUpdateParams = {
-        apiVips: values.apiVips,
-        ingressVips: values.ingressVips,
+        apiVips,
+        ingressVips,
         sshPublicKey: values.sshPublicKey,
         vipDhcpAllocation: values.vipDhcpAllocation,
         networkType: values.networkType,
@@ -247,7 +251,6 @@ const NetworkConfigurationPage = ({ cluster }: { cluster: Cluster }) => {
         serviceNetworks: values.serviceNetworks,
         userManagedNetworking: isUserManagedNetworking,
       };
-
       if (params.userManagedNetworking) {
         params.apiVips = [];
         params.ingressVips = [];