@openshift-assisted/ui-lib 2.8.3-cim → 2.9.5-cim

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

@@ -6,7 +6,6 @@ import { HostsNetworkConfigurationControlGroup } from './HostsNetworkConfigurati
 import {
   ClusterDetailsValues,
   isSNO,
-  ManagedDomain,
   OpenshiftVersionOptionType,
   PullSecret,
   ocmClusterNameValidationMessages,
@@ -14,17 +13,11 @@ import {
   CLUSTER_NAME_MAX_LENGTH,
   StaticTextField,
   useFeature,
-  ClusterCreateParams,
   getSupportedCpuArchitectures,
 } from '../../../common';
 import DiskEncryptionControlGroup from '../../../common/components/clusterConfiguration/DiskEncryptionFields/DiskEncryptionControlGroup';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
-import {
-  OcmCheckboxField,
-  OcmInputField,
-  OcmRichInputField,
-  OcmSelectField,
-} from '../ui/OcmFormFields';
+import { OcmRichInputField } from '../ui/OcmFormFields';
 import OcmOpenShiftVersion from './OcmOpenShiftVersion';
 import OcmOpenShiftVersionSelect from './OcmOpenShiftVersionSelect';
 import CustomManifestCheckbox from './CustomManifestCheckbox';
@@ -32,38 +25,32 @@ import CpuArchitectureDropdown, {
   architectureData,
   CpuArchitectureItem,
 } from './CpuArchitectureDropdown';
+import { OcmBaseDomainField } from './OcmBaseDomainField';
 import OcmSNOControlGroup from './OcmSNOControlGroup';
 import useSupportLevelsAPI from '../../hooks/useSupportLevelsAPI';
 import { useOpenshiftVersions } from '../../hooks';
+import { ExternalPlatformDropdown } from './platformIntegration/ExternalPlatformDropdown';
+import { useOracleDropdownItemState } from '../../hooks/useOracleDropdownItemState';
+import { useClusterWizardContext } from '../clusterWizard/ClusterWizardContext';
+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';
 
 export type OcmClusterDetailsFormFieldsProps = {
   forceOpenshiftVersion?: string;
-  isBaseDnsDomainDisabled?: boolean;
   defaultPullSecret?: string;
   isOcm: boolean;
   managedDomains?: ManagedDomain[];
   versions: OpenshiftVersionOptionType[];
-  toggleRedHatDnsService?: (checked: boolean) => void;
   isPullSecretSet: boolean;
   clusterExists: boolean;
   clusterCpuArchitecture?: string;
   clusterId?: string;
 };
 
-const BaseDnsHelperText = ({ name, baseDnsDomain }: { name?: string; baseDnsDomain?: string }) => (
-  <>
-    All DNS records must be subdomains of this base and include the cluster name. This cannot be
-    changed after cluster installation. The full cluster address will be: <br />
-    <strong>
-      {name || '[Cluster Name]'}.{baseDnsDomain || '[example.com]'}
-    </strong>
-  </>
-);
-
 export const OcmClusterDetailsFormFields = ({
   managedDomains = [],
-  toggleRedHatDnsService,
-  isBaseDnsDomainDisabled,
   versions,
   isPullSecretSet,
   defaultPullSecret,
@@ -73,22 +60,18 @@ export const OcmClusterDetailsFormFields = ({
   clusterCpuArchitecture,
   clusterId,
 }: OcmClusterDetailsFormFieldsProps) => {
-  const { values } = useFormikContext<ClusterDetailsValues>();
-  const { name, baseDnsDomain, highAvailabilityMode, useRedHatDnsService } = values;
+  const { values, setFieldValue } = useFormikContext<ClusterDetailsValues>();
+  const { highAvailabilityMode, useRedHatDnsService } = values;
   const nameInputRef = React.useRef<HTMLInputElement>();
-  React.useEffect(() => {
-    nameInputRef.current?.focus();
-  }, []);
 
-  const isSingleClusterFeatureEnabled = useFeature('ASSISTED_INSTALLER_SINGLE_CLUSTER_FEATURE');
   const { t } = useTranslation();
-  const {
-    values: { openshiftVersion },
-  } = useFormikContext<ClusterCreateParams>();
+  const isSingleClusterFeatureEnabled = useFeature('ASSISTED_INSTALLER_SINGLE_CLUSTER_FEATURE');
   const isMultiArchSupported = useFeature('ASSISTED_INSTALLER_MULTIARCH_SUPPORTED');
+  const isOracleCloudPlatformIntegrationEnabled = useFeature('ASSISTED_INSTALLER_PLATFORM_OCI');
+  const { openshiftVersion, platform } = values;
   const { getCpuArchitectures } = useOpenshiftVersions();
   const cpuArchitecturesByVersionImage = getCpuArchitectures(openshiftVersion);
-
+  const clusterWizardContext = useClusterWizardContext();
   const featureSupportLevelData = useSupportLevelsAPI(
     'features',
     values.openshiftVersion,
@@ -98,10 +81,42 @@ export const OcmClusterDetailsFormFields = ({
     () => getSupportedCpuArchitectures(isMultiArchSupported, cpuArchitecturesByVersionImage),
     [cpuArchitecturesByVersionImage, isMultiArchSupported],
   );
-
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore
   const cpuArchitecture = (architectureData[values.cpuArchitecture] as CpuArchitectureItem).label;
+  const oracleDropdownItemState = useOracleDropdownItemState(
+    clusterExists,
+    featureSupportLevelData,
+    values.cpuArchitecture,
+  );
+  const featureSupportLevelContext = useNewFeatureSupportLevel();
+
+  React.useEffect(() => {
+    nameInputRef.current?.focus();
+  }, []);
+
+  const handleExternalPartnerIntegrationsChange = React.useCallback(
+    (selectedPlatform: PlatformType) => {
+      const isOracleSelected = selectedPlatform === 'oci';
+      if (isOracleSelected) {
+        setFieldValue('addCustomManifest', isOracleSelected, false);
+        clusterWizardContext.setAddCustomManifests(isOracleSelected);
+        setFieldValue('hostsNetworkConfigurationType', HostsNetworkConfigurationType.DHCP);
+      }
+    },
+    [clusterWizardContext, setFieldValue],
+  );
+
+  React.useEffect(() => {
+    setFieldValue(
+      'isCMNSupported',
+      featureSupportLevelContext.isFeatureSupported(
+        'CLUSTER_MANAGED_NETWORKING',
+        featureSupportLevelData ?? undefined,
+      ),
+      false,
+    );
+  }, [setFieldValue, featureSupportLevelContext, featureSupportLevelData]);
 
   return (
     <Form id="wizard-cluster-details__form">
@@ -118,35 +133,9 @@ export const OcmClusterDetailsFormFields = ({
         }
         maxLength={CLUSTER_NAME_MAX_LENGTH}
       />
-      {!!managedDomains.length && toggleRedHatDnsService && (
-        <OcmCheckboxField
-          name="useRedHatDnsService"
-          label="Use a temporary 60-day domain"
-          helperText="A base domain will be provided for temporary, non-production clusters."
-          onChange={toggleRedHatDnsService}
-        />
-      )}
-      {useRedHatDnsService ? (
-        <OcmSelectField
-          label="Base domain"
-          name="baseDnsDomain"
-          helperText={<BaseDnsHelperText name={name} baseDnsDomain={baseDnsDomain} />}
-          options={managedDomains.map((d) => ({
-            label: `${d.domain || ''} (${d.provider || ''})`,
-            value: d.domain,
-          }))}
-          isRequired
-        />
-      ) : (
-        <OcmInputField
-          label="Base domain"
-          name="baseDnsDomain"
-          helperText={<BaseDnsHelperText name={name} baseDnsDomain={baseDnsDomain} />}
-          placeholder="example.com"
-          isDisabled={isBaseDnsDomainDisabled || useRedHatDnsService}
-          isRequired
-        />
-      )}
+
+      <OcmBaseDomainField managedDomains={managedDomains} />
+
       {/* TODO(mlibra): For single-cluster: We will probably change this to just a static text */}
       {forceOpenshiftVersion ? (
         <OcmOpenShiftVersion
@@ -175,12 +164,33 @@ export const OcmClusterDetailsFormFields = ({
       />
 
       {!isPullSecretSet && <PullSecret isOcm={isOcm} defaultPullSecret={defaultPullSecret} />}
-      <CustomManifestCheckbox clusterId={clusterId || ''} />
+
+      {clusterExists ? (
+        <StaticTextField
+          name="platform"
+          label="Integrate with external partner platforms"
+          isRequired
+        >
+          {ExternalPlatformLabels[values.platform]}
+        </StaticTextField>
+      ) : (
+        <ExternalPlatformDropdown
+          showOciOption={isOracleCloudPlatformIntegrationEnabled}
+          disabledOciTooltipContent={oracleDropdownItemState?.disabledReason}
+          isOciDisabled={oracleDropdownItemState?.isDisabled || false}
+          onChange={handleExternalPartnerIntegrationsChange}
+        />
+      )}
+
+      <CustomManifestCheckbox clusterId={clusterId || ''} isDisabled={platform === 'oci'} />
 
       {
         // Reason: In the single-cluster flow, the Host discovery phase is replaced by a single one-fits-all ISO download
         !isSingleClusterFeatureEnabled && (
-          <HostsNetworkConfigurationControlGroup clusterExists={clusterExists} />
+          <HostsNetworkConfigurationControlGroup
+            clusterExists={clusterExists}
+            isDisabled={platform === 'oci'}
+          />
         )
       }
 

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

@@ -1,7 +1,6 @@
 import { Grid, GridItem } from '@patternfly/react-core';
 import React from 'react';
 import {
-  Cluster,
   EventListFetchProps,
   getEnabledHosts,
   RenderIf,
@@ -10,6 +9,7 @@ import {
 import { FinalizingProgress } from '../../../common/components/clusterDetail/FinalizingProgress';
 import { ProgressBarTexts } from '../../../common/components/clusterDetail/ProgressBarTexts';
 import OcmOperatorsProgressItem from './OcmOperatorProgressItem';
+import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
 
 type OcmClusterProgressItemsProps = {
   cluster: Cluster;

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

@@ -11,7 +11,12 @@ import {
   StackItem,
 } from '@patternfly/react-core';
 import { Formik, FormikHelpers } from 'formik';
-import { HostStaticNetworkConfig, ImageType, InfraEnv, Proxy } from '../../../common/api';
+import {
+  HostStaticNetworkConfig,
+  ImageType,
+  InfraEnv,
+  Proxy,
+} from '@openshift-assisted/types/assisted-installer-service';
 import {
   AlertFormikError,
   httpProxyValidationSchema,
@@ -68,6 +73,7 @@ type OcmDiscoveryImageConfigFormProps = Proxy & {
   enableCertificate?: boolean;
   trustBundle?: InfraEnv['additionalTrustBundle'];
   selectedCpuArchitecture?: SupportedCpuArchitecture;
+  isOracleCloudInfrastructure?: boolean;
 };
 
 export const OcmDiscoveryImageConfigForm = ({
@@ -82,6 +88,7 @@ export const OcmDiscoveryImageConfigForm = ({
   enableCertificate,
   trustBundle,
   selectedCpuArchitecture,
+  isOracleCloudInfrastructure = false,
 }: OcmDiscoveryImageConfigFormProps) => {
   const imageTypeValue = isIpxeSelected
     ? 'discovery-image-ipxe'
@@ -147,6 +154,7 @@ export const OcmDiscoveryImageConfigForm = ({
                       defaultValue={discoveryImageTypes[imageTypeValue]}
                       onChange={updateDiscoveryButtonAndAlertText}
                       selectedCpuArchitecture={selectedCpuArchitecture}
+                      isDisabled={isOracleCloudInfrastructure}
                     />
                     <UploadSSH
                       labelText={t(

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

@@ -12,7 +12,7 @@ import { TFunction } from 'i18next';
 import { OpenShiftVersionDropdown } from '../../../common/components/ui/OpenShiftVersionDropdown';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 import { OPENSHIFT_LIFE_CYCLE_DATES_LINK, OpenshiftVersionOptionType } from '../../../common';
-import { ocmClient } from '../../api';
+import { isInOcm } from '../../api';
 
 const OpenShiftLifeCycleDatesLink = () => {
   const { t } = useTranslation();
@@ -81,7 +81,7 @@ const OcmOpenShiftVersionSelect = ({ versions }: OcmOpenShiftVersionSelectProps)
       items={selectOptions}
       versions={versions}
       getHelperText={getOpenshiftVersionHelperText}
-      showReleasesLink={ocmClient !== undefined}
+      showReleasesLink={isInOcm}
     />
   );
 };

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

@@ -16,15 +16,14 @@ import { TFunction } from 'i18next';
 import './OcmOperatorsProgressItem.css';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 import ClusterProgressItem from '../../../common/components/clusterDetail/ClusterProgressItem';
+import { operatorLabels, OperatorName } from '../../../common';
+import { useNewFeatureSupportLevel } from '../../../common/components/newFeatureSupportLevels';
 import {
   Cluster,
   MonitoredOperator,
   MonitoredOperatorsList,
-  operatorLabels,
-  OperatorName,
   OperatorStatus,
-} from '../../../common';
-import { useNewFeatureSupportLevel } from '../../../common/components/newFeatureSupportLevels';
+} from '@openshift-assisted/types/assisted-installer-service';
 
 export function getAggregatedStatus(operators: MonitoredOperatorsList) {
   const operatorStates: (OperatorStatus | 'pending')[] = operators.map(

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

@@ -6,7 +6,6 @@ import {
   useNewFeatureSupportLevel,
 } from '../../../common/components/newFeatureSupportLevels';
 import OcmSNODisclaimer from './OcmSNODisclaimer';
-import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 
 type OcmSNOControlGroupProps = {
   highAvailabilityMode: ClusterDetailsValues['highAvailabilityMode'];
@@ -17,7 +16,6 @@ const OcmSNOControlGroup = ({
   highAvailabilityMode,
   featureSupportLevelData,
 }: OcmSNOControlGroupProps) => {
-  const { t } = useTranslation();
   const newFeatureSupportLevelContext = useNewFeatureSupportLevel();
 
   const snoSupportLevel = newFeatureSupportLevelContext.getFeatureSupportLevel(
@@ -34,7 +32,6 @@ const OcmSNOControlGroup = ({
   );
   const disabledReason = newFeatureSupportLevelContext.getFeatureDisabledReason(
     'SNO',
-    t,
     featureSupportLevelData,
   );
 

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

@@ -1,7 +1,8 @@
 import React from 'react';
 import { Alert, AlertVariant, List, ListItem, Stack, StackItem } from '@patternfly/react-core';
-import { CheckboxField, SupportLevel } from '../../../common';
+import { CheckboxField } from '../../../common';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
+import { SupportLevel } from '@openshift-assisted/types/assisted-installer-service';
 
 type OcmSNODisclaimerProps = {
   snoSupportLevel: SupportLevel;

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

@@ -1,17 +1,15 @@
 import * as React from 'react';
 import { useField, useFormikContext } from 'formik';
 import { Checkbox, FormGroup, Tooltip } from '@patternfly/react-core';
-import {
-  ClusterCreateParams,
-  getFieldId,
-  HelperText,
-  SupportLevel,
-  useFeature,
-} from '../../../common';
+import { getFieldId, HelperText, useFeature } from '../../../common';
 import { useNewFeatureSupportLevel } from '../../../common/components/newFeatureSupportLevels';
 import { CheckboxFieldProps } from '../../../common/components/ui/formik/types';
 import NewFeatureSupportLevelBadge from '../../../common/components/newFeatureSupportLevels/NewFeatureSupportLevelBadge';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
+import {
+  ClusterCreateParams,
+  SupportLevel,
+} from '@openshift-assisted/types/assisted-installer-service';
 
 export interface OcmCheckboxProps extends CheckboxFieldProps {
   disabledReason?: string;
@@ -65,7 +63,7 @@ const OcmSingleNodeCheckbox: React.FC<OcmCheckboxProps> = ({
 
   if (isSingleNodeOpenshiftEnabled && isSupportedVersionAvailable) {
     return (
-      <FormGroup isInline fieldId={fieldId}>
+      <FormGroup id={`form-control__${fieldId}`} isInline fieldId={fieldId}>
         <Tooltip hidden={!disabledReason} content={disabledReason}>
           <Checkbox
             {...field}

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { Text, TextContent, TextVariants, Alert, Grid } from '@patternfly/react-core';
 
 import { CustomManifests } from './components/CustomManifests';
-import { Cluster } from '../../../../common';
+import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
 import { CustomManifestFormState } from './components/propTypes';
 
 export const CustomManifestsPage = ({

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

@@ -26,11 +26,12 @@ export const RemoveItemButton = ({
   dataTestId: string;
 }) => (
   <Button
+    data-testid={dataTestId}
     aria-label="remove manifest"
     style={{ visibility: showRemoveButton ? 'visible' : 'hidden' }}
     variant="plain"
   >
-    <MinusCircleIcon onClick={onRemove} data-testid={dataTestId} />
+    <MinusCircleIcon onClick={onRemove} />
   </Button>
 );
 

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

@@ -2,9 +2,9 @@ import React from 'react';
 import { ListManifestsExtended } from '../data/dataTypes';
 import { CustomManifestsFormProps, CustomManifestFormState } from './propTypes';
 import { getFormViewManifestsValidationSchema } from './customManifestsValidationSchema';
-import { Cluster } from '../../../../../common';
 import { CustomManifestsForm } from './CustomManifestsForm';
 import { getEmptyFormViewManifestsValues, getFormViewManifestValues } from './utils';
+import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
 
 export const CustomManifests = ({
   cluster,

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

@@ -1,6 +1,6 @@
 import React, { PropsWithChildren } from 'react';
 import { useSelector } from 'react-redux';
-import { Form, debounce } from '@patternfly/react-core';
+import { Form } from '@patternfly/react-core';
 import {
   FieldArray,
   FieldArrayRenderProps,
@@ -15,11 +15,18 @@ import isEqual from 'lodash-es/isEqual.js';
 import { ErrorState, LoadingState, useAlerts, useFormikAutoSave } from '../../../../../common';
 import { selectCurrentClusterPermissionsState } from '../../../../selectors';
 import { CustomManifestsFormProps } from './propTypes';
-import { CustomManifestValues, FormViewManifestFolder, ManifestFormData } from '../data/dataTypes';
+import {
+  CustomManifestValues,
+  FormViewManifestFolder,
+  ListManifestsExtended,
+  ManifestExtended,
+  ManifestFormData,
+} from '../data/dataTypes';
 import { getApiErrorMessage, handleApiError } from '../../../../api';
 import useClusterCustomManifests from '../../../../hooks/useClusterCustomManifests';
 import { ClustersService } from '../../../../services';
 import { CustomManifestsArray } from './CustomManifestsArray';
+import { getManifestFakeId } from './utils';
 
 const fieldName = 'manifests';
 
@@ -107,31 +114,85 @@ export const CustomManifestsForm = ({
   const { isViewerMode } = useSelector(selectCurrentClusterPermissionsState);
   const [initialValues, setInitialValues] = React.useState<ManifestFormData | undefined>();
   const { addAlert, clearAlerts } = useAlerts();
-  const [refreshFlag, setRefreshFlag] = React.useState<boolean>(true);
-  const { customManifests, isLoading, error } = useClusterCustomManifests(
-    cluster.id || '',
-    true,
-    refreshFlag,
-  );
+  const { customManifests, isLoading, error } = useClusterCustomManifests(cluster.id || '', true);
+  const customManifestsLocalRef = React.useRef<ListManifestsExtended | undefined>();
+
   React.useEffect(() => {
     if (customManifests) {
       setInitialValues(getInitialValues(customManifests));
+      customManifestsLocalRef.current = customManifests;
     }
   }, [customManifests, getInitialValues]);
 
-  const refreshCustomManifests = () => {
-    setRefreshFlag((refreshFlag) => !refreshFlag);
-  };
+  const updateCustomManifestsLocal = React.useCallback(
+    (updatedManifests: CustomManifestValues[], newValuesAdded: boolean) => {
+      if (newValuesAdded) {
+        updatedManifests.forEach((updatedManifest) => {
+          const customManifest: ManifestExtended = {
+            folder: updatedManifest.folder,
+            fileName: updatedManifest.filename,
+            yamlContent: updatedManifest.manifestYaml,
+          };
+          customManifestsLocalRef.current?.push(customManifest);
+        });
+      } else {
+        customManifestsLocalRef.current?.forEach((customManifest) => {
+          const updatedManifest: CustomManifestValues | undefined = updatedManifests.find(
+            (updatedManifest) =>
+              getManifestFakeId(
+                customManifest.folder || 'manifests',
+                customManifest.fileName || '',
+              ) === updatedManifest.fakeId || '',
+          );
+
+          if (updatedManifest) {
+            customManifest.folder = updatedManifest.folder;
+            customManifest.fileName = updatedManifest.filename;
+            customManifest.yamlContent = updatedManifest.manifestYaml;
+          }
+        });
+      }
+    },
+    [customManifestsLocalRef],
+  );
+
+  const removeCustomManifestFromLocal = React.useCallback(
+    (manifests: CustomManifestValues[]) => {
+      if (customManifestsLocalRef.current) {
+        const customManifestsLocalCopy = [...customManifestsLocalRef.current].filter(
+          (customManifest) => {
+            return !manifests.some((manifest) => {
+              return (
+                customManifest.folder === manifest.folder &&
+                customManifest.fileName === manifest.filename &&
+                customManifest.yamlContent === manifest.manifestYaml
+              );
+            });
+          },
+        );
+        if (customManifestsLocalCopy.length > 0) {
+          customManifestsLocalRef.current.splice(
+            customManifestsLocalRef.current.findIndex(
+              (manifest) =>
+                manifest.folder === customManifestsLocalCopy[0].folder &&
+                manifest.fileName === customManifestsLocalCopy[0].fileName,
+            ),
+            1,
+          );
+        }
+      }
+    },
+    [customManifestsLocalRef],
+  );
 
   const handleSubmit: FormikConfig<ManifestFormData>['onSubmit'] = React.useCallback(
     async (values, actions) => {
       clearAlerts();
       actions.setSubmitting(true);
-
       const manifests = values.manifests;
       const manifestsModified = manifests.filter(
         (manifest) =>
-          !customManifests?.some(
+          !customManifestsLocalRef.current?.some(
             (customManifest) =>
               customManifest.folder === manifest.folder &&
               customManifest.fileName === manifest.filename &&
@@ -159,10 +220,13 @@ export const CustomManifestsForm = ({
             );
           });
           await Promise.all(manifestsRequests);
-          refreshCustomManifests();
           if (newManifestsToCreate.length > 0) {
             await ClustersService.createClusterManifests(newManifestsToCreate, cluster?.id);
-            refreshCustomManifests();
+            updateCustomManifestsLocal(newManifestsToCreate, true);
+          }
+
+          if (customManifestsLocalRef.current && manifestsThatExists.length > 0) {
+            updateCustomManifestsLocal(manifestsThatExists, false);
           }
         } catch (e) {
           handleApiErrorInForm(manifests, manifestsThatExists, actions);
@@ -175,12 +239,21 @@ export const CustomManifestsForm = ({
         } finally {
           actions.setSubmitting(false);
         }
+      } else {
+        removeCustomManifestFromLocal(manifests);
       }
     },
-    [addAlert, clearAlerts, cluster, customManifests],
+    [
+      addAlert,
+      clearAlerts,
+      cluster,
+      customManifestsLocalRef,
+      updateCustomManifestsLocal,
+      removeCustomManifestFromLocal,
+    ],
   );
 
-  const onSubmit = isViewerMode ? () => Promise.resolve() : debounce(handleSubmit, 1000);
+  const onSubmit = isViewerMode ? () => Promise.resolve() : handleSubmit;
 
   const validate = (values: ManifestFormData) => {
     try {

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

@@ -6,6 +6,9 @@ import { OcmInputField, OcmCodeField } from '../../../ui/OcmFormFields';
 import { CustomManifestValues } from '../data/dataTypes';
 import { FolderDropdown } from './FolderDropdown';
 import { CustomManifestComponentProps } from './propTypes';
+import { PopoverIcon } from '../../../../../common';
+import { MAX_FILE_SIZE_BYTES } from '../../../../../common/configurations';
+import { fileSize } from '../../../../../common/utils';
 
 const getDownloadFileName = (manifestIdx: number, value: CustomManifestValues) => {
   return value.folder && value.filename
@@ -19,7 +22,12 @@ const ExpandedManifest = ({ fieldName, manifestIdx }: CustomManifestComponentPro
   });
 
   return (
-    <ExpandableSection isDetached key={manifestIdx} isExpanded>
+    <ExpandableSection
+      isDetached
+      key={manifestIdx}
+      isExpanded
+      data-testid={`expanded-manifest-${manifestIdx}`}
+    >
       <Grid hasGutter span={12}>
         <GridItem span={6}>
           <TextInput
@@ -33,11 +41,22 @@ const ExpandedManifest = ({ fieldName, manifestIdx }: CustomManifestComponentPro
         <GridItem span={6}>
           <OcmInputField
             name={`${fieldName}.filename`}
-            label="File name"
             isRequired
             data-testid={`filename-${manifestIdx}`}
-            helperText={
-              'File name determines order of executing manifests during the installation. For example "manifest1.yaml" will be applied before "manifest2.yaml"'
+            helperText={`Use yaml, yml or JSON file types. File size must not exceed ${fileSize(
+              MAX_FILE_SIZE_BYTES,
+              0,
+              'si',
+            )}.`}
+            label={
+              <>
+                <span>File name</span>
+                <PopoverIcon
+                  bodyContent={
+                    'File name determines order of executing manifests during the installation. For example "manifest1.yaml" will be applied before "manifest2.yaml"'
+                  }
+                />
+              </>
             }
           />
         </GridItem>
@@ -45,10 +64,11 @@ const ExpandedManifest = ({ fieldName, manifestIdx }: CustomManifestComponentPro
           <OcmCodeField
             language={Language.yaml}
             name={`${fieldName}.manifestYaml`}
-            data-testid={`yaml-${manifestIdx}`}
+            dataTestid={`yamlContent-${manifestIdx}`}
             label="Content"
             isRequired
             downloadFileName={getDownloadFileName(manifestIdx, value)}
+            isReadOnly
           />
         </GridItem>
       </Grid>