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

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

@@ -1,7 +1,7 @@
 import React, { PropsWithChildren } from 'react';
 import { useSelector } from 'react-redux';
 import { Form } from '@patternfly/react-core';
-import { Formik, FormikConfig, useFormikContext, yupToFormErrors } from 'formik';
+import { Formik, useFormikContext, yupToFormErrors } from 'formik';
 import isEqual from 'lodash-es/isEqual.js';
 import { useAlerts, useFormikAutoSave } from '../../../../../common';
 import { useErrorMonitor } from '../../../../../common/components/ErrorHandling/ErrorMonitorContext';
@@ -9,6 +9,7 @@ import { getApiErrorMessage } from '../../../../../common/api';
 import { StaticIpFormProps } from './propTypes';
 import { selectCurrentClusterPermissionsState } from '../../../../store/slices/current-cluster/selectors';
 
+/** Reports form state and triggers save on every value change (useFormikAutoSave) */
 const AutosaveWithParentUpdate = <StaticIpFormValues extends object>({
   onFormStateChange,
   getEmptyValues,
@@ -16,28 +17,41 @@ const AutosaveWithParentUpdate = <StaticIpFormValues extends object>({
   onFormStateChange: StaticIpFormProps<StaticIpFormValues>['onFormStateChange'];
   getEmptyValues: StaticIpFormProps<StaticIpFormValues>['getEmptyValues'];
 }) => {
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const emptyValues = React.useMemo(() => getEmptyValues(), []);
+  const emptyValues = React.useMemo(() => getEmptyValues(), [getEmptyValues]);
   const { isSubmitting, isValid, touched, errors, values, initialValues, submitForm } =
     useFormikContext<StaticIpFormValues>();
 
-  const isEmpty = React.useMemo<boolean>(() => {
-    return isEqual(values, emptyValues);
-  }, [values, emptyValues]);
-
-  const isAutoSaveRunning = useFormikAutoSave();
+  const isEmpty = React.useMemo(() => isEqual(values, emptyValues), [values, emptyValues]);
+  const isAutoSaveRunning = useFormikAutoSave(0);
 
+  // Submit once on mount when form was opened with existing data (so it gets persisted).
   React.useEffect(() => {
     if (!isEqual(emptyValues, initialValues)) {
       void submitForm();
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- intentional: run only on mount.
   }, []);
 
   React.useEffect(() => {
-    onFormStateChange({ isSubmitting, isAutoSaveRunning, isValid, touched, errors, isEmpty });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isSubmitting, isValid, isAutoSaveRunning, touched, errors]);
+    onFormStateChange({
+      isSubmitting,
+      isAutoSaveRunning,
+      isValid,
+      touched,
+      errors,
+      isEmpty,
+      values: values as Record<string, unknown>,
+    });
+  }, [
+    isSubmitting,
+    isValid,
+    isAutoSaveRunning,
+    touched,
+    errors,
+    values,
+    isEmpty,
+    onFormStateChange,
+  ]);
   return null;
 };
 
@@ -55,27 +69,13 @@ export const StaticIpForm = <StaticIpFormValues extends object>({
   const { clearAlerts, addAlert } = useAlerts();
   const { captureException } = useErrorMonitor();
   const { isViewerMode } = useSelector(selectCurrentClusterPermissionsState);
-  const [initialValues, setInitialValues] = React.useState<StaticIpFormValues | undefined>();
-  React.useEffect(() => {
-    if (showEmptyValues) {
-      //after view changed the formik should be rendered with empty values
-      setInitialValues(getEmptyValues());
-    } else {
-      setInitialValues(getInitialValues(infraEnv));
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  if (!initialValues) {
-    return null;
-  }
+  const initialValues = showEmptyValues ? getEmptyValues() : getInitialValues(infraEnv);
 
-  const handleSubmit: FormikConfig<StaticIpFormValues>['onSubmit'] = async (values) => {
+  const handleSubmit = async (values: StaticIpFormValues) => {
     clearAlerts();
     try {
-      const staticNetworkConfig = getUpdateParams(infraEnv, values);
       await updateInfraEnv({
-        staticNetworkConfig: staticNetworkConfig,
+        staticNetworkConfig: getUpdateParams(infraEnv, values),
       });
     } catch (error) {
       captureException(error);
@@ -98,6 +98,10 @@ export const StaticIpForm = <StaticIpFormValues extends object>({
     }
   };
 
+  if (!initialValues) {
+    return null;
+  }
+
   const onSubmit = isViewerMode ? () => Promise.resolve() : handleSubmit;
   return (
     <Formik initialValues={initialValues} onSubmit={onSubmit} validate={validate} validateOnMount>

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

@@ -16,6 +16,7 @@ import { useClusterWizardContext } from '../../../clusterWizard/ClusterWizardCon
 import { FormViewHosts } from './FormViewHosts/FormViewHosts';
 import { FormViewNetworkWide } from './FormViewNetworkWide/FormViewNetworkWide';
 import './staticIp.css';
+import { ClusterWizardStepHeader } from '../../../../../common';
 
 const isoRegenerationAlert = (
   <Alert
@@ -48,15 +49,17 @@ export const StaticIpPage: React.FC<StaticIpPageProps> = ({
     return getStaticIpInfo(infraEnv);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  if (!initialStaticIpInfo) {
-    return null;
-  }
-  const onFormStateChange = (formState: StaticIpFormState) => {
-    const hasFilledData =
-      clusterWizardContext.currentStepId === 'static-ip-host-configurations' || !formState.isEmpty;
-    setConfirmOnChangeView(hasFilledData);
-    onFormStateChangeParent(formState);
-  };
+
+  const onFormStateChange = React.useCallback(
+    (formState: StaticIpFormState) => {
+      const hasFilledData =
+        clusterWizardContext.currentStepId === 'static-ip-host-configurations' ||
+        !formState.isEmpty;
+      setConfirmOnChangeView(hasFilledData);
+      onFormStateChangeParent(formState);
+    },
+    [clusterWizardContext.currentStepId, onFormStateChangeParent],
+  );
 
   const viewProps: StaticIpViewProps = {
     onFormStateChange,
@@ -65,7 +68,7 @@ export const StaticIpPage: React.FC<StaticIpPageProps> = ({
     showEmptyValues: viewChanged,
   };
 
-  const getContent = () => {
+  const content = (() => {
     switch (clusterWizardContext.currentStepId) {
       case 'static-ip-yaml-view':
         return <YamlView {...viewProps} />;
@@ -74,18 +77,20 @@ export const StaticIpPage: React.FC<StaticIpPageProps> = ({
       case 'static-ip-host-configurations':
         return <FormViewHosts {...viewProps} />;
       default:
-        throw `Unexpected wizard step id ${clusterWizardContext.currentStepId} when entering static ip page`;
+        throw new Error(
+          `Unexpected wizard step id ${clusterWizardContext.currentStepId} when entering static ip page`,
+        );
     }
-  };
+  })();
 
-  const content = getContent();
-  if (!content) {
+  if (!initialStaticIpInfo) {
     return null;
   }
+
   return (
     <Grid hasGutter>
       <GridItem>
-        <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/clusterConfiguration/staticIp/components/YamlView/YamlView.tsx

@@ -7,17 +7,21 @@ import { YamlViewFields } from './YamlViewFields';
 import { getEmptyYamlValues } from '../../data/emptyData';
 import { InfraEnv } from '@openshift-assisted/types/assisted-installer-service';
 import { getYamlViewValues } from '../../data/fromInfraEnv';
+import { useTranslation } from '../../../../../../common';
 
 export const YamlView: React.FC<StaticIpViewProps> = ({ ...props }) => {
+  const { t } = useTranslation();
+
   const formProps: StaticIpFormProps<YamlViewValues> = {
     ...props,
-    validationSchema: yamlViewValidationSchema,
+    validationSchema: yamlViewValidationSchema(t),
     getInitialValues: (infraEnv: InfraEnv) => {
       return getYamlViewValues(infraEnv);
     },
     getUpdateParams: (currentInfraEnv: InfraEnv, values: YamlViewValues) => values.hosts,
     getEmptyValues: () => getEmptyYamlValues(),
   };
+
   return (
     <StaticIpForm<YamlViewValues> {...formProps}>
       <YamlViewFields />

package/lib/ocm/components/clusterConfiguration/staticIp/components/YamlView/yamlViewValidationSchema.tsx

@@ -1,12 +1,15 @@
 import * as Yup from 'yup';
-import { ArrayElementType, macAddressValidationSchema } from '../../../../../../common';
+import {
+  ArrayElementType,
+  getIncorrectFileTypeMessage,
+  macAddressValidationSchema,
+} from '../../../../../../common';
 import { YamlViewValues } from '../../data/dataTypes';
 import {
   getUniqueValidationSchema,
   UniqueStringArrayExtractor,
 } from '../../commonValidationSchemas';
 import {
-  INCORRECT_TYPE_FILE_MESSAGE,
   getMaxFileSizeMessage,
   validateFileSize,
   validateFileType,
@@ -15,13 +18,13 @@ import {
   HostStaticNetworkConfig,
   MacInterfaceMap,
 } from '@openshift-assisted/types/assisted-installer-service';
+import { TFunction } from 'i18next';
 
-const requiredMsg = 'A value is required';
-
-const networkYamlValidationSchema = Yup.string()
-  .required(requiredMsg)
-  .test('file-size-limit', getMaxFileSizeMessage, validateFileSize)
-  .test('file-type-yaml', INCORRECT_TYPE_FILE_MESSAGE, validateFileType);
+const networkYamlValidationSchema = (t: TFunction) =>
+  Yup.string()
+    .required('Required field')
+    .test('file-size-limit', getMaxFileSizeMessage(t), validateFileSize)
+    .test('file-type-yaml', getIncorrectFileTypeMessage(t), validateFileType);
 
 const getAllMacAddresses: UniqueStringArrayExtractor<YamlViewValues> = (
   values: YamlViewValues,
@@ -59,24 +62,26 @@ const getInterfaceNamesInCurrentHost: UniqueStringArrayExtractor<YamlViewValues>
   });
 };
 
-const macInterfaceMapValidationSchema = Yup.array<MacInterfaceMap>().of(
-  Yup.object({
-    macAddress: macAddressValidationSchema
-      .required(requiredMsg)
-      .concat(getUniqueValidationSchema(getAllMacAddresses)),
-    logicalNicName: Yup.string()
-      .required(requiredMsg)
-      .concat(getUniqueValidationSchema(getInterfaceNamesInCurrentHost))
-      .max(15, 'Interface name must be 15 characters at most.')
-      .matches(/^\S+$/, 'Interface name can not contain spaces.'),
-  }),
-);
-
-export const yamlViewValidationSchema = Yup.object({
-  hosts: Yup.array<HostStaticNetworkConfig>().of(
-    Yup.object().shape({
-      networkYaml: networkYamlValidationSchema,
-      macInterfaceMap: macInterfaceMapValidationSchema,
+const macInterfaceMapValidationSchema = (t: TFunction) =>
+  Yup.array<MacInterfaceMap>().of(
+    Yup.object({
+      macAddress: macAddressValidationSchema(t)
+        .required('Required field')
+        .concat(getUniqueValidationSchema(getAllMacAddresses)),
+      logicalNicName: Yup.string()
+        .required('Required field')
+        .concat(getUniqueValidationSchema(getInterfaceNamesInCurrentHost))
+        .max(15, 'Interface name must be 15 characters at most.')
+        .matches(/^\S+$/, 'Interface name can not contain spaces.'),
     }),
-  ),
-});
+  );
+
+export const yamlViewValidationSchema = (t: TFunction) =>
+  Yup.object({
+    hosts: Yup.array<HostStaticNetworkConfig>().of(
+      Yup.object().shape({
+        networkYaml: networkYamlValidationSchema(t),
+        macInterfaceMap: macInterfaceMapValidationSchema(t),
+      }),
+    ),
+  });

package/lib/ocm/components/clusterConfiguration/staticIp/components/propTypes.ts

@@ -13,6 +13,7 @@ export type StaticIpFormState = {
   touched: FormikTouched<object>;
   errors: FormikErrors<object>;
   isEmpty: boolean;
+  values?: Record<string, unknown>;
 };
 
 export type StaticIpProps = {
@@ -29,7 +30,6 @@ export type StaticIpViewProps = StaticIpPageProps & {
 };
 
 export type StaticIpFormProps<StaticIpViewValues extends object> = StaticIpViewProps & {
-  showEmptyValues: boolean;
   getInitialValues(infraEnv: InfraEnv): StaticIpViewValues;
   getUpdateParams(currentInfraEnv: InfraEnv, values: StaticIpViewValues): HostStaticNetworkConfig[];
   validationSchema: Yup.ObjectSchema<Yup.AnyObject> | Yup.Lazy<Yup.AnyObject>;

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,10 @@ const ClusterDetails = ({ cluster, infraEnv }: ClusterDetailsProps) => {
   } = useOpenShiftVersionsContext();
   const location = useLocation();
   const isSingleClusterFeatureEnabled = useFeature('ASSISTED_INSTALLER_SINGLE_CLUSTER_FEATURE');
+  const pullSecret = usePullSecret(isSingleClusterFeatureEnabled);
 
   const handleClusterUpdate = React.useCallback(
-    async (
-      clusterId: Cluster['id'],
-      params: ClusterDetailsUpdateParams,
-      addCustomManifests: boolean,
-    ) => {
+    async (clusterId: Cluster['id'], params: ClusterDetailsUpdateParams) => {
       clearAlerts();
 
       try {
@@ -62,7 +58,6 @@ const ClusterDetails = ({ cluster, infraEnv }: ClusterDetailsProps) => {
           cluster?.tags,
           params,
         );
-        await clusterWizardContext.updateUISettings({ addCustomManifests });
         dispatch(updateCluster(updatedCluster));
 
         canNextClusterDetails({ cluster: updatedCluster }) && clusterWizardContext.moveNext();
@@ -79,7 +74,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 +102,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) }),
@@ -147,7 +151,10 @@ const ClusterDetails = ({ cluster, infraEnv }: ClusterDetailsProps) => {
   if (!cluster && errorOCPVersions) {
     return (
       <ClusterWizardStep navigation={navigation}>
-        <ErrorState title="Failed to retrieve OpenShift versions" />
+        <ErrorState
+          title={errorOCPVersions.title || 'Failed to retrieve OpenShift versions'}
+          content={errorOCPVersions.message || 'No OpenShift versions available.'}
+        />
       </ClusterWizardStep>
     );
   }

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

@@ -9,12 +9,12 @@ import {
   ClusterWizardStepHeader,
   getClusterDetailsValidationSchema,
   getRichTextValidation,
-  CpuArchitecture,
   useAlerts,
   TechnologyPreview,
+  OpenshiftVersionOptionType,
+  getFormikErrorFields,
 } from '../../../common';
 import { canNextClusterDetails } from './wizardTransition';
-import { OpenshiftVersionOptionType, getFormikErrorFields } from '../../../common';
 import ClusterWizardFooter from './ClusterWizardFooter';
 import { isInOcm } from '../../../common/api';
 import {
@@ -43,11 +43,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>;
 };
 
@@ -64,7 +63,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,14 +81,19 @@ const ClusterDetailsForm = (props: ClusterDetailsFormProps) => {
         ) {
           resetPlatform = 'baremetal';
         }
-        const params = ClusterDetailsService.getClusterUpdateParams(values, resetPlatform);
-        await handleClusterUpdate(cluster.id, params, values.addCustomManifest);
+        const params = ClusterDetailsService.getClusterUpdateParams(
+          values,
+          resetPlatform,
+          cluster,
+          infraEnv,
+        );
+        await handleClusterUpdate(cluster.id, params);
       } else {
-        const params = ClusterDetailsService.getClusterCreateParams(values);
-        await handleClusterCreate(params, values.addCustomManifest);
+        const params = ClusterDetailsService.getClusterCreateParams(values, infraEnv);
+        await handleClusterCreate(params);
       }
     },
-    [cluster, handleClusterCreate, handleClusterUpdate],
+    [cluster, infraEnv, handleClusterCreate, handleClusterUpdate],
   );
 
   const handleOnNext = React.useCallback(
@@ -119,9 +123,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();
@@ -168,29 +171,21 @@ const ClusterDetailsForm = (props: ClusterDetailsFormProps) => {
               {!isSingleClusterFeatureEnabled && (
                 <GridItem>
                   <Flex alignItems={{ default: 'alignItemsCenter' }} gap={{ default: 'gapSm' }}>
-                    <TechnologyPreview />
                     <InstallDisconnectedSwitch isDisabled={!!cluster} />
                     <span>
                       {t("ai:I'm installing on a disconnected/air-gapped/secured environment")}
                     </span>
+                    <TechnologyPreview />
                   </Flex>
                 </GridItem>
               )}
               <GridItem span={12} lg={10} xl={9} xl2={7}>
                 <OcmClusterDetailsFormFields
                   versions={ocpVersions}
-                  forceOpenshiftVersion={
-                    isSingleClusterFeatureEnabled
-                      ? ocpVersions[0].version
-                      : cluster?.openshiftVersion
-                  }
-                  isPullSecretSet={!!cluster?.pullSecretSet}
                   defaultPullSecret={pullSecret}
                   isOcm={isInOcm}
                   managedDomains={managedDomains}
-                  clusterExists={!!cluster}
-                  clusterCpuArchitecture={cluster?.cpuArchitecture as CpuArchitecture}
-                  clusterId={cluster?.id}
+                  cluster={cluster}
                 />
               </GridItem>
             </Grid>

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

@@ -3,7 +3,6 @@ import { HostsNetworkConfigurationType } from '../../services';
 import { StaticIpView } from '../clusterConfiguration/staticIp/data/dataTypes';
 import { ClusterWizardStepsType } from './wizardTransition';
 import { UISettingsValues } from '../../../common';
-import { InfraEnv } from '@openshift-assisted/types/assisted-installer-service';
 
 export type ClusterWizardContextType = {
   currentStepId: ClusterWizardStepsType;
@@ -13,16 +12,12 @@ export type ClusterWizardContextType = {
   wizardStepIds: ClusterWizardStepsType[];
   onUpdateStaticIpView(view: StaticIpView): void;
   onUpdateHostNetworkConfigType(type: HostsNetworkConfigurationType): void;
-  setCustomManifestsStep(addCustomManifest: boolean): void;
-  customManifestsStep: boolean;
   wizardPerPage: number;
   setWizardPerPage: (perPage: number) => void;
   updateUISettings: (data: UISettingsValues) => Promise<void>;
   uiSettings?: UISettingsValues;
   installDisconnected: boolean;
   setInstallDisconnected: (enabled: boolean) => void;
-  disconnectedInfraEnv?: InfraEnv;
-  setDisconnectedInfraEnv: (infraEnv: InfraEnv | undefined) => void;
 };
 
 export const ClusterWizardContext = React.createContext<ClusterWizardContextType | null>(null);