@openshift-assisted/ui-lib 2.50.1 → 2.51.0

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

@@ -0,0 +1,157 @@
+import React from 'react';
+import { useField, useFormikContext } from 'formik';
+import {
+  Alert,
+  AlertVariant,
+  Dropdown,
+  DropdownItem,
+  FormGroup,
+  MenuToggle,
+  MenuToggleElement,
+  Stack,
+  StackItem,
+  Tooltip,
+} from '@patternfly/react-core';
+import {
+  NETWORK_TYPE_CALICO,
+  NETWORK_TYPE_CILIUM,
+  NETWORK_TYPE_CISCO_ACI,
+  NETWORK_TYPE_LABELS,
+  NETWORK_TYPE_NONE,
+  NETWORK_TYPE_OVN,
+  NETWORK_TYPE_SDN,
+} from '../../../../common/config';
+import { getFieldId, ExternalLink } from '../../../../common/components/ui';
+import {
+  NewFeatureSupportLevelMap,
+  useNewFeatureSupportLevel,
+} from '../../../../common/components/newFeatureSupportLevels';
+import { TechnologyPreview } from '../../../../common/components/ui/TechnologyPreview';
+import type { NetworkConfigurationValues } from '../../../../common/types/clusters';
+import { isThirdPartyCNI } from '../../utils';
+import { RED_HAT_CNI_SUPPORT_MATRIX_LINK } from '../../../../common/config/docs_links';
+
+export interface NetworkTypeDropDownProps {
+  isDisabled?: boolean;
+  isSDNSelectable: boolean;
+  featureSupportLevelData: NewFeatureSupportLevelMap | null;
+}
+
+export const NetworkTypeDropDown = ({
+  isDisabled = false,
+  isSDNSelectable,
+  featureSupportLevelData,
+}: NetworkTypeDropDownProps) => {
+  const [field, , { setValue }] = useField<string>('networkType');
+  const [isOpen, setOpen] = React.useState(false);
+  const { values } = useFormikContext<NetworkConfigurationValues>();
+  const { getFeatureDisabledReason } = useNewFeatureSupportLevel();
+  const fieldId = getFieldId('networkType', 'input');
+  const showThirdPartyBanner = isThirdPartyCNI(values.networkType);
+
+  const sdnDisabledReason = React.useMemo(() => {
+    if (!isSDNSelectable) {
+      return 'SDN is not supported for SNO clusters or when IPv6 is detected.';
+    }
+    return getFeatureDisabledReason('SDN_NETWORK_TYPE', featureSupportLevelData ?? undefined);
+  }, [isSDNSelectable, featureSupportLevelData, getFeatureDisabledReason]);
+
+  React.useEffect(() => {
+    if (field.value === NETWORK_TYPE_SDN && sdnDisabledReason) {
+      setValue(NETWORK_TYPE_OVN);
+    }
+  }, [sdnDisabledReason, field.value, setValue]);
+
+  const currentDisplayValue = NETWORK_TYPE_LABELS[field.value];
+
+  const dropdownItems = Object.entries(NETWORK_TYPE_LABELS).map(([value, label]) => {
+    const isSDN = value === NETWORK_TYPE_SDN;
+    const disabledReason = isSDN ? sdnDisabledReason : undefined;
+    const isTechPreview = [
+      NETWORK_TYPE_CISCO_ACI,
+      NETWORK_TYPE_CILIUM,
+      NETWORK_TYPE_CALICO,
+      NETWORK_TYPE_NONE,
+    ].includes(value);
+    return (
+      <DropdownItem
+        key={value}
+        id={value}
+        value={value}
+        isAriaDisabled={disabledReason !== undefined}
+      >
+        <Tooltip hidden={!disabledReason} content={disabledReason} position="top">
+          <div>
+            {label}
+            {isTechPreview && (
+              <span onClick={(event) => event.stopPropagation()}>
+                <TechnologyPreview testId={`${value}-support-level`} />
+              </span>
+            )}
+          </div>
+        </Tooltip>
+      </DropdownItem>
+    );
+  });
+
+  const onSelect = (event?: React.MouseEvent<Element, MouseEvent>, nextValue?: string): void => {
+    if (nextValue) {
+      setValue(nextValue);
+    }
+    setOpen(false);
+  };
+
+  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
+    <MenuToggle
+      ref={toggleRef}
+      onClick={() => setOpen(!isOpen)}
+      isExpanded={isOpen}
+      isDisabled={isDisabled}
+      id={fieldId}
+      className="pf-v6-u-w-100"
+      style={{ minWidth: '100%' }}
+    >
+      {currentDisplayValue}
+    </MenuToggle>
+  );
+
+  return (
+    <Stack hasGutter>
+      <StackItem>
+        <FormGroup fieldId={fieldId} label="Network type" id={`form-control__${fieldId}`}>
+          <Dropdown
+            id={`${fieldId}-dropdown`}
+            onOpenChange={(open: boolean) => setOpen(open)}
+            onSelect={onSelect}
+            toggle={toggle}
+            isOpen={isOpen}
+          >
+            {dropdownItems}
+          </Dropdown>
+        </FormGroup>
+      </StackItem>
+      {showThirdPartyBanner && (
+        <StackItem>
+          <Alert
+            variant={AlertVariant.warning}
+            isInline
+            title="Third-party CNI (Technology Preview)"
+          >
+            <Stack hasGutter>
+              <StackItem>
+                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}>
+                  Red Hat CNI Support Matrix
+                </ExternalLink>
+              </StackItem>
+            </Stack>
+          </Alert>
+        </StackItem>
+      )}
+    </Stack>
+  );
+};

package/lib/ocm/components/clusterConfiguration/platformIntegration/PlatformIntegrationNote.tsx

@@ -1,14 +1,17 @@
 import React from 'react';
+import { Icon } from '@patternfly/react-core';
 import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
-import { UiIcon, SupportedPlatformType } from '../../../../common';
+import { SupportedPlatformType } from '../../../../common';
 import { ExternalPlatformLinks } from './constants';
 
 const PlatformIntegrationNote = ({ platformType }: { platformType: SupportedPlatformType }) => {
   const integrationPlatformLink = ExternalPlatformLinks[platformType];
   return (
     <p>
-      <UiIcon status="warning" icon={<ExclamationTriangleIcon />} /> You will need to modify your
-      platform configuration after cluster installation is completed.{' '}
+      <Icon status="warning">
+        <ExclamationTriangleIcon />
+      </Icon>{' '}
+      You will need to modify your platform configuration after cluster installation is completed.{' '}
       {!!integrationPlatformLink && (
         <a
           href={integrationPlatformLink || ''}

package/lib/ocm/components/clusterConfiguration/review/ReviewNetworkingTable.tsx

@@ -1,12 +1,8 @@
 import { Title } from '@patternfly/react-core';
 import { Table, TableVariant, Tbody, Td, Tr } from '@patternfly/react-table';
 import React from 'react';
-import { genericTableRowKey, isDualStack } from '../../../../common';
-import {
-  getManagementType,
-  getStackTypeLabel,
-  getNetworkType,
-} from '../../clusterDetail/ClusterProperties';
+import { genericTableRowKey, isDualStack, NETWORK_TYPE_LABELS } from '../../../../common';
+import { getManagementType, getStackTypeLabel } from '../../clusterDetail/ClusterProperties';
 import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
 
 type ReviewTableRowsType = {
@@ -201,7 +197,7 @@ export const ReviewNetworkingTable = ({ cluster }: { cluster: Cluster }) => {
         cells: [
           { title: 'Networking type' },
           {
-            title: getNetworkType(cluster.networkType),
+            title: cluster.networkType ? NETWORK_TYPE_LABELS[cluster.networkType] : '-',
             props: { 'data-testid': 'networking-type', colSpan: 2 },
           },
         ],

package/lib/ocm/components/clusterConfiguration/review/ReviewPreflightChecks.tsx

@@ -6,20 +6,13 @@ import {
   Grid,
   GridItem,
   gridSpans,
+  Icon,
 } 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 { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
 import { InfoCircleIcon } from '@patternfly/react-icons/dist/js/icons/info-circle-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_color_status_info_100 as infoColor } from '@patternfly/react-tokens/dist/js/t_global_color_status_info_100';
-import {
-  ClusterValidations,
-  DetailItem,
-  DetailList,
-  HostsValidations,
-  UiIcon,
-} from '../../../../common';
+import { ClusterValidations, DetailItem, DetailList, HostsValidations } from '../../../../common';
 import { useClusterWizardContext } from '../../clusterWizard/ClusterWizardContext';
 import { useOpenShiftVersionsContext } from '../../clusterWizard/OpenShiftVersionsContext';
 import { wizardStepNames } from '../../clusterWizard/constants';
@@ -102,13 +95,29 @@ const PreflightCheckInfo = ({
 
 const getCheckIcon = (validationStatuses: string[]) => {
   if (validationStatuses.includes('failure') || validationStatuses.includes('error')) {
-    return <UiIcon size="sm" status="danger" icon={<ExclamationCircleIcon />} />;
+    return (
+      <Icon size="sm" status="danger">
+        <ExclamationCircleIcon />
+      </Icon>
+    );
   } else if (validationStatuses.includes('warning')) {
-    return <UiIcon size="sm" status="warning" icon={<ExclamationTriangleIcon />} />;
+    return (
+      <Icon size="sm" status="warning">
+        <ExclamationTriangleIcon />
+      </Icon>
+    );
   } else if (validationStatuses.includes('pending')) {
-    return <UiIcon size="sm" status="info" icon={<InfoCircleIcon />} />;
+    return (
+      <Icon size="sm" status="info">
+        <InfoCircleIcon />
+      </Icon>
+    );
   }
-  return <UiIcon size="sm" icon={<CheckCircleIcon color={okColor.value} />} />;
+  return (
+    <Icon status="success" size="sm">
+      <CheckCircleIcon />
+    </Icon>
+  );
 };
 
 const PreflightChecksDetailCollapsed = ({ cluster }: { cluster: Cluster }) => {
@@ -122,9 +131,13 @@ const PreflightChecksDetailCollapsed = ({ cluster }: { cluster: Cluster }) => {
   );
 
   const supportLevelIcon = isFullySupported ? (
-    <UiIcon size="sm" icon={<CheckCircleIcon color={okColor.value} />} />
+    <Icon status="success" size="sm">
+      <CheckCircleIcon />
+    </Icon>
   ) : (
-    <UiIcon size="sm" icon={<InfoCircleIcon color={infoColor.value} />} />
+    <Icon status="info" size="sm">
+      <InfoCircleIcon />
+    </Icon>
   );
 
   const clusterValidations = React.useMemo(

package/lib/ocm/components/clusterConfiguration/staticIp/commonValidationSchemas.tsx

@@ -92,11 +92,17 @@ export const getIpAddressValidationSchema = (protocolVersion: ProtocolVersion) =
   const protocolVersionLabel = protocolVersion === ProtocolVersion.ipv4 ? 'IPv4' : 'IPv6';
   return Yup.string().test(
     protocolVersion,
-    `Value \${value} is not a valid ${protocolVersionLabel} address`,
+    (params: { value?: unknown }) =>
+      `Value "${
+        params?.value !== undefined ? String(params.value) : ''
+      }" is not a valid ${protocolVersionLabel} address`,
     (value?: string) => {
-      if (!value) {
+      if (value === undefined || value === '') {
         return true;
       }
+      if (typeof value !== 'string') {
+        return false;
+      }
       return isValidAddress(value, protocolVersion);
     },
   );

package/lib/ocm/components/clusterConfiguration/staticIp/components/FormViewHosts/FormViewHostsFields.tsx

@@ -96,6 +96,7 @@ const getExpandedHostComponent = (protocolType: StaticProtocolType) => {
               label={`IP address (${getProtocolVersionLabel(protocolVersion)})`}
               fieldId={getFieldId(`${fieldName}.ips.${protocolVersion}`, 'input')}
               key={protocolVersion}
+              isRequired
             >
               <OcmInputField
                 name={`${fieldName}.ips.${protocolVersion}`}

package/lib/ocm/components/clusterConfiguration/staticIp/components/FormViewNetworkWide/FormViewNetworkWide.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { StaticIpForm } from '../StaticIpForm';
 import { StaticIpFormProps, StaticIpViewProps } from '../propTypes';
 import { FormViewHost, FormViewNetworkWideValues } from '../../data/dataTypes';
-import { networkWideValidationSchema } from './formViewNetworkWideValidationSchema';
+import { getNetworkWideValidationSchema } from './formViewNetworkWideValidationSchema';
 import { networkWideToInfraEnvField } from '../../data/formDataToInfraEnvField';
 import { FormViewNetworkWideFields } from './FormViewNetworkWideFields';
 import { getFormData, getFormViewNetworkWideValues } from '../../data/fromInfraEnv';
@@ -22,7 +22,7 @@ export const FormViewNetworkWide: React.FC<StaticIpViewProps> = ({ infraEnv, ...
     setFormProps({
       infraEnv,
       ...props,
-      validationSchema: networkWideValidationSchema,
+      validationSchema: getNetworkWideValidationSchema(infraEnv.rendezvousIp),
       getInitialValues: (infraEnv: InfraEnv) => {
         return getFormViewNetworkWideValues(infraEnv);
       },

package/lib/ocm/components/clusterConfiguration/staticIp/components/FormViewNetworkWide/formViewNetworkWideValidationSchema.tsx

@@ -95,32 +95,71 @@ const getAddressDataValidationSchema = (protocolVersion: ProtocolVersion, ipConf
   });
 };
 
-export const networkWideValidationSchema = Yup.lazy((values: FormViewNetworkWideValues) => {
-  const ipConfigsValidationSchemas = Yup.object({
-    ipv4: getAddressDataValidationSchema(ProtocolVersion.ipv4, values.ipConfigs.ipv4),
-    ipv6: showProtocolVersion(values.protocolType, ProtocolVersion.ipv6)
-      ? getAddressDataValidationSchema(ProtocolVersion.ipv6, values.ipConfigs.ipv6)
-      : Yup.object<IpConfig>(),
-  });
+/**
+ * Validates that Rendezvous IP (when set) is within the IPv4 subnet.
+ * Default gateway is already validated by getAddressDataValidationSchema (getInMachineNetworkValidationSchema).
+ */
+const getRendezvousIpCoherenceTest = (rendezvousIp: string | undefined) => {
+  return Yup.object().test(
+    'rendezvous-ip-in-subnet',
+    'Rendezvous IP must be within the IPv4 subnet.',
+    (value: unknown, context: Yup.TestContext) => {
+      const values = value as FormViewNetworkWideValues | undefined;
+      const machineNetwork = values?.ipConfigs?.ipv4?.machineNetwork;
+      if (
+        !rendezvousIp?.trim() ||
+        !machineNetwork?.ip?.trim() ||
+        machineNetwork.prefixLength === '' ||
+        typeof machineNetwork.prefixLength !== 'number'
+      ) {
+        return true;
+      }
+      const inSubnetSchema = getInMachineNetworkValidationSchema(
+        ProtocolVersion.ipv4,
+        machineNetwork,
+      );
+      if (!inSubnetSchema.isValidSync(rendezvousIp)) {
+        return context.createError({
+          path: 'ipConfigs.ipv4.machineNetwork.ip',
+          message: 'Rendezvous IP must be within the IPv4 subnet.',
+        });
+      }
+      return true;
+    },
+  );
+};
 
-  return Yup.object({
-    useVlan: Yup.boolean(),
-    vlanId: Yup.mixed().when('useVlan', {
-      is: (useVlan: boolean) => useVlan,
-      then: () =>
-        Yup.number()
-          .required(MUST_BE_A_NUMBER)
-          .min(1, `Must be more than or equal to 1`)
-          .max(MAX_VLAN_ID, `Must be less than or equal to ${MAX_VLAN_ID}`)
-          .test('not-number', MUST_BE_A_NUMBER, () => validateNumber(values.vlanId))
-          .nullable()
-          .transform(transformNumber) as Yup.NumberSchema,
-    }),
-    protocolType: Yup.string(),
-    dns: getDNSValidationSchema(values.protocolType),
-    ipConfigs: ipConfigsValidationSchemas,
+export const getNetworkWideValidationSchema = (rendezvousIp?: string) =>
+  Yup.lazy((values: FormViewNetworkWideValues) => {
+    const ipConfigsValidationSchemas = Yup.object({
+      ipv4: getAddressDataValidationSchema(ProtocolVersion.ipv4, values.ipConfigs.ipv4),
+      ipv6: showProtocolVersion(values.protocolType, ProtocolVersion.ipv6)
+        ? getAddressDataValidationSchema(ProtocolVersion.ipv6, values.ipConfigs.ipv6)
+        : Yup.object<IpConfig>(),
+    });
+
+    const baseSchema = Yup.object({
+      useVlan: Yup.boolean(),
+      vlanId: Yup.mixed().when('useVlan', {
+        is: (useVlan: boolean) => useVlan,
+        then: () =>
+          Yup.number()
+            .required(MUST_BE_A_NUMBER)
+            .min(1, `Must be more than or equal to 1`)
+            .max(MAX_VLAN_ID, `Must be less than or equal to ${MAX_VLAN_ID}`)
+            .test('not-number', MUST_BE_A_NUMBER, () => validateNumber(values.vlanId))
+            .nullable()
+            .transform(transformNumber) as Yup.NumberSchema,
+      }),
+      protocolType: Yup.string(),
+      dns: getDNSValidationSchema(values.protocolType),
+      ipConfigs: ipConfigsValidationSchemas,
+    });
+
+    return baseSchema.concat(getRendezvousIpCoherenceTest(rendezvousIp));
   });
-});
+
+export const networkWideValidationSchema = getNetworkWideValidationSchema();
 
 export const validateNumber = (vlanId: FormViewNetworkWideValues['vlanId']) => {
   //We need to validate that value is a number(without letters) and is not an exponential number (ex: 1e2)

package/lib/ocm/components/clusterDetail/ClusterProperties.tsx

@@ -5,7 +5,7 @@ import {
   DetailList,
   getDefaultCpuArchitecture,
   isDualStack,
-  NETWORK_TYPE_SDN,
+  NETWORK_TYPE_LABELS,
   selectApiVip,
   selectIngressVip,
   selectIpv4Cidr,
@@ -25,11 +25,7 @@ type ClusterPropertiesProps = {
 };
 
 export const getNetworkType = (clusterNetworkType: Cluster['networkType']): string => {
-  let networkType: string;
-  clusterNetworkType === NETWORK_TYPE_SDN
-    ? (networkType = 'Software-Defined Networking (SDN)')
-    : (networkType = 'Open Virtual Network (OVN)');
-  return networkType;
+  return NETWORK_TYPE_LABELS[clusterNetworkType || ''];
 };
 
 export const getManagementType = ({ userManagedNetworking }: Cluster): string => {

package/lib/ocm/components/clusterDetail/HostInventoryExpandable.tsx

@@ -1,12 +1,14 @@
 import React, { useState } from 'react';
-import { UiIcon, hostStatus } from '../../../common';
+import { ExpandableSection, Icon } from '@patternfly/react-core';
+import ExclamationTriangleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
+
+import { hostStatus } from '../../../common';
 import ClusterHostsTable from '../hosts/ClusterHostsTable';
 import { getHostsWithTimeout, getMostSevereHostStatus } from './utils';
-import { ExpandableSection } from '@patternfly/react-core';
-import './HostInventoryExpandable.css';
 import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
-import ExclamationTriangleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
+
+import './HostInventoryExpandable.css';
 
 type HostInventoryExpandableProps = {
   cluster: Cluster;
@@ -33,7 +35,11 @@ const HostInventoryExpandable = ({ cluster }: HostInventoryExpandableProps) => {
   const mostSevereHostStatus = getMostSevereHostStatus(hosts);
   const hostStatusDef = mostSevereHostStatus ? hostStatus(t)[mostSevereHostStatus] : null;
   const someHostHasTimeout = getHostsWithTimeout(hosts);
-  const warningIcon = <UiIcon size="sm" status="warning" icon={<ExclamationTriangleIcon />} />;
+  const warningIcon = (
+    <Icon size="sm" status="warning">
+      <ExclamationTriangleIcon />
+    </Icon>
+  );
   return (
     <ExpandableSection
       toggleContent={

package/lib/ocm/components/clusterDetail/OpenShiftVersionDetail.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
-import { UiIcon, getOpenshiftVersionText } from '../../../common';
-import { useOpenShiftVersionsContext } from '../clusterWizard/OpenShiftVersionsContext';
+import { Popover, Content, ContentVariants, Icon } from '@patternfly/react-core';
 import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
-import { Popover, Content, ContentVariants } from '@patternfly/react-core';
-import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
+
 import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
+import { getOpenshiftVersionText } from '../../../common';
+import { useOpenShiftVersionsContext } from '../clusterWizard/OpenShiftVersionsContext';
+import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 
 const UnsupportedVersion = ({ version }: { version: string }) => {
   const { t } = useTranslation();
@@ -18,7 +19,9 @@ const UnsupportedVersion = ({ version }: { version: string }) => {
     <Content component="p">
       {version} &nbsp;
       <Popover bodyContent={hint}>
-        <UiIcon size="sm" status="warning" icon={<ExclamationTriangleIcon />} />
+        <Icon size="sm" status="warning">
+          <ExclamationTriangleIcon />
+        </Icon>
       </Popover>
     </Content>
   );

package/lib/ocm/components/clusterDetail/ResetClusterModal.tsx

@@ -4,6 +4,7 @@ import {
   Button,
   ButtonVariant,
   Content,
+  Icon,
   Modal,
   ModalBody,
   ModalFooter,
@@ -16,7 +17,7 @@ import { getApiErrorMessage, handleApiError } from '../../../common/api';
 import { updateCluster } from '../../store/slices/current-cluster/slice';
 import { calculateCollectedLogsCount } from '../clusters/utils';
 import { useModalDialogsContext } from '../hosts/ModalDialogsContext';
-import { ErrorState, LoadingState, UiIcon } from '../../../common';
+import { ErrorState, LoadingState } from '../../../common';
 import { ClustersAPI } from '../../services/apis';
 
 const ResetClusterModal: React.FC = () => {
@@ -87,8 +88,10 @@ const ResetClusterModal: React.FC = () => {
         </Content>
 
         <Content component="p">
-          <UiIcon size="sm" status="warning" icon={<ExclamationTriangleIcon />} /> Logs won't be
-          available after the installation is reset.
+          <Icon size="sm" status="warning">
+            <ExclamationTriangleIcon />
+          </Icon>{' '}
+          Logs won't be available after the installation is reset.
         </Content>
 
         <Content component="p">Are you sure you want to reset the cluster?</Content>

package/lib/ocm/components/clusterWizard/ClusterDetails.tsx

@@ -39,7 +39,6 @@ const ClusterDetails = ({ cluster, infraEnv }: ClusterDetailsProps) => {
   const navigate = useNavigate();
   const dispatch = useDispatch();
   const { usedClusterNames } = useUsedClusterNames(cluster?.id || '');
-  const pullSecret = usePullSecret();
   const {
     error: errorOCPVersions,
     loading: loadingOCPVersions,
@@ -47,13 +46,11 @@ const ClusterDetails = ({ cluster, infraEnv }: ClusterDetailsProps) => {
   } = useOpenShiftVersionsContext();
   const location = useLocation();
   const isSingleClusterFeatureEnabled = useFeature('ASSISTED_INSTALLER_SINGLE_CLUSTER_FEATURE');
+  const defaultPullSecret = usePullSecret();
+  const pullSecret = isSingleClusterFeatureEnabled ? infraEnv?.pullSecret || '' : defaultPullSecret;
 
   const handleClusterUpdate = React.useCallback(
-    async (
-      clusterId: Cluster['id'],
-      params: ClusterDetailsUpdateParams,
-      addCustomManifests: boolean,
-    ) => {
+    async (clusterId: Cluster['id'], params: ClusterDetailsUpdateParams) => {
       clearAlerts();
 
       try {
@@ -62,7 +59,6 @@ const ClusterDetails = ({ cluster, infraEnv }: ClusterDetailsProps) => {
           cluster?.tags,
           params,
         );
-        await clusterWizardContext.updateUISettings({ addCustomManifests });
         dispatch(updateCluster(updatedCluster));
 
         canNextClusterDetails({ cluster: updatedCluster }) && clusterWizardContext.moveNext();
@@ -79,7 +75,7 @@ const ClusterDetails = ({ cluster, infraEnv }: ClusterDetailsProps) => {
   );
 
   const handleClusterCreate = React.useCallback(
-    async (params: ClusterCreateParamsWithStaticNetworking, addCustomManifests: boolean) => {
+    async (params: ClusterCreateParamsWithStaticNetworking) => {
       clearAlerts();
       try {
         const searchParams = new URLSearchParams(location.search);
@@ -107,14 +103,23 @@ const ClusterDetails = ({ cluster, infraEnv }: ClusterDetailsProps) => {
         );
         navigate(`../${cluster.id}`, { state: ClusterWizardFlowStateNew });
 
-        const uiPatch: UISettingsValues = { addCustomManifests };
         if (isAssistedMigration) {
-          //For Assisted Migration we need to enable virtualization bundle
-          uiPatch.bundlesSelected = ['virtualization'];
-          uiPatch.isAssistedMigration = true;
+          try {
+            const uiPatch: UISettingsValues = {
+              bundlesSelected: ['virtualization'],
+              isAssistedMigration: true,
+            };
+            await UISettingService.update(cluster.id, uiPatch);
+            await clusterWizardContext.updateUISettings(uiPatch);
+          } catch (uiError) {
+            handleApiError(uiError, () =>
+              addAlert({
+                title: 'Failed to update UI settings',
+                message: getApiErrorMessage(uiError),
+              }),
+            );
+          }
         }
-        await UISettingService.update(cluster.id, uiPatch);
-        await clusterWizardContext.updateUISettings(uiPatch); // keeps local state current
       } catch (e) {
         handleApiError(e, () =>
           addAlert({ title: 'Failed to create new cluster', message: getApiErrorMessage(e) }),

package/lib/ocm/components/clusterWizard/ClusterDetailsForm.tsx

@@ -42,11 +42,10 @@ type ClusterDetailsFormProps = {
   ocpVersions: OpenshiftVersionOptionType[];
   usedClusterNames: string[];
   navigation: React.ReactNode;
-  handleClusterCreate: (params: ClusterCreateParams, addCustomManifests: boolean) => Promise<void>;
+  handleClusterCreate: (params: ClusterCreateParams) => Promise<void>;
   handleClusterUpdate: (
     clusterId: Cluster['id'],
     params: ClusterDetailsUpdateParams,
-    addCustomManifests: boolean,
   ) => Promise<void>;
 };
 
@@ -63,7 +62,7 @@ const ClusterDetailsForm = (props: ClusterDetailsFormProps) => {
     navigation,
   } = props;
 
-  const { customManifestsStep, moveNext } = useClusterWizardContext();
+  const { moveNext } = useClusterWizardContext();
   const { search } = useLocation();
   const { isViewerMode } = useSelector(selectCurrentClusterPermissionsState);
   const { clearAlerts } = useAlerts();
@@ -82,10 +81,10 @@ const ClusterDetailsForm = (props: ClusterDetailsFormProps) => {
           resetPlatform = 'baremetal';
         }
         const params = ClusterDetailsService.getClusterUpdateParams(values, resetPlatform);
-        await handleClusterUpdate(cluster.id, params, values.addCustomManifest);
+        await handleClusterUpdate(cluster.id, params);
       } else {
         const params = ClusterDetailsService.getClusterCreateParams(values);
-        await handleClusterCreate(params, values.addCustomManifest);
+        await handleClusterCreate(params);
       }
     },
     [cluster, handleClusterCreate, handleClusterUpdate],
@@ -118,9 +117,8 @@ const ClusterDetailsForm = (props: ClusterDetailsFormProps) => {
         managedDomains,
         ocpVersions,
         urlSearchParams: search,
-        addCustomManifests: customManifestsStep,
       }),
-    [infraEnv, cluster, pullSecret, managedDomains, ocpVersions, search, customManifestsStep],
+    [infraEnv, cluster, pullSecret, managedDomains, ocpVersions, search],
   );
 
   const { t } = useTranslation();