@openshift-assisted/ui-lib 2.9.8-cim → 2.9.9-cim

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

@@ -9,7 +9,7 @@ import ConfirmationModal from '../../../../../common/components/ui/ConfirmationM
 import { ClustersAPI } from '../../../../services/apis';
 import { getApiErrorMessage, handleApiError } from '../../../../api';
 import { CustomManifest } from './CustomManifest';
-import { getEmptyFormViewManifest, getManifestName } from './utils';
+import { getEmptyManifest, getManifestName } from './utils';
 import { CustomManifestValues } from '../data/dataTypes';
 import { selectCurrentClusterPermissionsState } from '../../../../store/slices/current-cluster/selectors';
 
@@ -54,7 +54,7 @@ export const CustomManifestsArray = ({
     const newExpandedManifests = getExpandedManifestsInitialValue(field.value.length + 1);
     newExpandedManifests[field.value.length] = true;
     setExpandedManifests(newExpandedManifests);
-    push(getEmptyFormViewManifest());
+    push(getEmptyManifest());
   }, [field.value.length, push]);
 
   const removeManifest = React.useCallback(

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

@@ -6,27 +6,26 @@ import {
   FieldArrayRenderProps,
   Formik,
   FormikConfig,
-  FormikErrors,
-  FormikHelpers,
   useFormikContext,
   yupToFormErrors,
 } from 'formik';
 import isEqual from 'lodash-es/isEqual.js';
-import { ErrorState, LoadingState, useAlerts, useFormikAutoSave } from '../../../../../common';
-import { CustomManifestsFormProps } from './propTypes';
 import {
-  CustomManifestValues,
-  FormViewManifestFolder,
-  ListManifestsExtended,
-  ManifestExtended,
-  ManifestFormData,
-} from '../data/dataTypes';
-import { getApiErrorMessage, handleApiError } from '../../../../api';
+  ErrorState,
+  LoadingState,
+  getApiErrorMessage,
+  handleApiError,
+  useAlerts,
+  useFormikAutoSave,
+} from '../../../../../common';
+import { CustomManifestsFormProps } from './propTypes';
+import { CustomManifestValues, ManifestFormData } from '../data/dataTypes';
 import useClusterCustomManifests from '../../../../hooks/useClusterCustomManifests';
 import { ClustersService } from '../../../../services';
 import { CustomManifestsArray } from './CustomManifestsArray';
-import { getManifestFakeId } from './utils';
 import { selectCurrentClusterPermissionsState } from '../../../../store/slices/current-cluster/selectors';
+import { useClusterWizardContext } from '../../../clusterWizard/ClusterWizardContext';
+import { ClustersAPI } from '../../../../services/apis';
 
 const fieldName = 'manifests';
 
@@ -53,55 +52,12 @@ const AutosaveWithParentUpdate = ({
   return null;
 };
 
-const getManifestDetails = (
-  updatedManifest: CustomManifestValues,
-): {
-  folderName: FormViewManifestFolder;
-  fileName: string | undefined;
-} => {
-  const existingFolderByFakeId = updatedManifest.fakeId?.substring(
-    0,
-    updatedManifest.fakeId.indexOf('#'),
-  );
-  const existingFolder: FormViewManifestFolder =
-    existingFolderByFakeId === 'manifests' || existingFolderByFakeId === 'openshift'
-      ? existingFolderByFakeId
-      : 'manifests';
-  const existingFileName = updatedManifest.fakeId?.substring(
-    updatedManifest.fakeId.indexOf('#') + 1,
+const manifestUpdated = (manifest: CustomManifestValues, oldManifest: CustomManifestValues) => {
+  return (
+    oldManifest.filename !== manifest.filename ||
+    oldManifest.folder !== manifest.folder ||
+    oldManifest.manifestYaml !== manifest.manifestYaml
   );
-
-  return {
-    folderName: existingFolder,
-    fileName: existingFileName,
-  };
-};
-
-const handleApiErrorInForm = (
-  manifests: CustomManifestValues[],
-  manifestsThatExists: CustomManifestValues[],
-  actions: FormikHelpers<ManifestFormData>,
-) => {
-  const errors: FormikErrors<ManifestFormData> = {};
-  errors.manifests = [];
-  manifests.forEach((manifest) => {
-    (errors.manifests as FormikErrors<CustomManifestValues>[]).push({
-      fakeId: manifest.fakeId,
-      folder: '',
-      filename: '',
-      manifestYaml: '',
-    });
-  });
-  errors.manifests.forEach((errorManifest) => {
-    manifestsThatExists.forEach((updatedManifest) => {
-      if ((errorManifest as CustomManifestValues).fakeId === updatedManifest.fakeId) {
-        (errorManifest as CustomManifestValues).manifestYaml =
-          'Failed to update the existing manifest';
-      }
-    });
-  });
-
-  actions.setErrors(errors);
 };
 
 export const CustomManifestsForm = ({
@@ -115,142 +71,73 @@ export const CustomManifestsForm = ({
   const [initialValues, setInitialValues] = React.useState<ManifestFormData | undefined>();
   const { addAlert, clearAlerts } = useAlerts();
   const { customManifests, isLoading, error } = useClusterCustomManifests(cluster.id || '', true);
-  const customManifestsLocalRef = React.useRef<ListManifestsExtended | undefined>();
+  const customManifestsLocalRef = React.useRef<CustomManifestValues[]>([]);
+  const { updateUISettings, uiSettings } = useClusterWizardContext();
 
   React.useEffect(() => {
-    if (customManifests) {
-      setInitialValues(getInitialValues(customManifests));
-      customManifestsLocalRef.current = customManifests;
+    if (customManifests && !customManifestsLocalRef.current.length) {
+      const initValues = getInitialValues(customManifests);
+      setInitialValues(initValues);
+      customManifestsLocalRef.current = !!customManifests.length ? initValues.manifests : [];
     }
   }, [customManifests, getInitialValues]);
 
-  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) =>
-          !customManifestsLocalRef.current?.some(
-            (customManifest) =>
-              customManifest.folder === manifest.folder &&
-              customManifest.fileName === manifest.filename &&
-              customManifest.yamlContent === manifest.manifestYaml,
-          ),
-      );
-      if (cluster && manifestsModified.length > 0) {
-        //See if manifests exists previously to make a patch or create a new one
-        const manifestsThatExists = manifestsModified.filter((manifest) => manifest.fakeId !== '');
-        const newManifestsToCreate = manifestsModified.filter((manifest) => manifest.fakeId === '');
-        try {
-          const manifestsRequests = manifestsThatExists.map((updatedManifest) => {
-            const { folderName, fileName } = getManifestDetails(updatedManifest);
+    async ({ manifests }, actions) => {
+      if (manifests.length < customManifestsLocalRef.current.length) {
+        // submit was triggered by deleting a manifest
 
-            const existingManifest: CustomManifestValues = {
-              folder: folderName,
-              filename: fileName || '',
-              manifestYaml: '',
+        customManifestsLocalRef.current = manifests;
+        return;
+      } else {
+        clearAlerts();
+        actions.setSubmitting(true);
+
+        for (let index = 0; index < manifests.length; index++) {
+          try {
+            const manifest = manifests[index];
+            if (index >= (customManifestsLocalRef.current?.length || 0)) {
+              // manifest added
+              await ClustersAPI.createCustomManifest(
+                cluster.id,
+                ClustersService.transformFormViewManifest(manifest),
+              );
+            } else {
+              // manifest updated
+              const oldManifest = customManifestsLocalRef.current[index];
+
+              if (manifestUpdated(manifest, oldManifest)) {
+                await ClustersService.updateCustomManifest(oldManifest, manifest, cluster.id);
+              }
+            }
+          } catch (error) {
+            const errorArray = new Array(manifests.length).fill(undefined);
+            errorArray.splice(index, 1, { manifestYaml: 'Failed to save changes' });
+
+            const errors = {
+              manifests: errorArray,
             };
-
-            return ClustersService.updateCustomManifest(
-              existingManifest,
-              updatedManifest,
-              cluster?.id,
+            actions.setErrors(errors);
+
+            // handleApiErrorInForm(manifests, customManifestsLocalRef.current, actions);
+            handleApiError(error, () =>
+              addAlert({
+                title: 'Failed to update the custom manifests',
+                message: getApiErrorMessage(error),
+              }),
             );
-          });
-          await Promise.all(manifestsRequests);
-          if (newManifestsToCreate.length > 0) {
-            await ClustersService.createClusterManifests(newManifestsToCreate, cluster?.id);
-            updateCustomManifestsLocal(newManifestsToCreate, true);
           }
+        }
 
-          if (customManifestsLocalRef.current && manifestsThatExists.length > 0) {
-            updateCustomManifestsLocal(manifestsThatExists, false);
-          }
-        } catch (e) {
-          handleApiErrorInForm(manifests, manifestsThatExists, actions);
-          handleApiError(e, () =>
-            addAlert({
-              title: 'Failed to update the custom manifests',
-              message: getApiErrorMessage(e),
-            }),
-          );
-        } finally {
-          actions.setSubmitting(false);
+        customManifestsLocalRef.current = manifests;
+        if (!uiSettings?.customManifestsAdded) {
+          await updateUISettings({ customManifestsAdded: true });
         }
-      } else {
-        removeCustomManifestFromLocal(manifests);
+
+        actions.setSubmitting(false);
       }
     },
-    [
-      addAlert,
-      clearAlerts,
-      cluster,
-      customManifestsLocalRef,
-      updateCustomManifestsLocal,
-      removeCustomManifestFromLocal,
-    ],
+    [clearAlerts, uiSettings?.customManifestsAdded, cluster.id, addAlert, updateUISettings],
   );
 
   const onSubmit = isViewerMode ? () => Promise.resolve() : handleSubmit;

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

@@ -50,7 +50,7 @@ const ExpandedManifest = ({ fieldName, manifestIdx }: CustomManifestComponentPro
             )}.`}
             label={
               <>
-                <span>File name</span>
+                <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"'

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

@@ -8,25 +8,24 @@ export const getFormData = (manifests: ListManifestsExtended): ManifestFormData
   };
 };
 
-export const getEmptyFormViewManifest = (): CustomManifestValues => {
+export const getEmptyManifest = (): CustomManifestValues => {
   return {
     folder: 'manifests',
     filename: '',
     manifestYaml: '',
-    fakeId: '',
   };
 };
 
-export const getFormViewManifestValues = (manifests: ListManifestsExtended): ManifestFormData => {
-  const formData = getFormData(manifests);
-  if (!formData.manifests.length) {
-    return { manifests: [getEmptyFormViewManifest()] };
+export const getManifestValues = (manifests: ListManifestsExtended): ManifestFormData => {
+  if (!!manifests.length) {
+    return getFormData(manifests);
+  } else {
+    return getEmptyManifestsValues();
   }
-  return { manifests: formData.manifests };
 };
 
-export const getEmptyFormViewManifestsValues = (): ManifestFormData => {
-  return { manifests: [getEmptyFormViewManifest()] };
+export const getEmptyManifestsValues = (): ManifestFormData => {
+  return { manifests: [getEmptyManifest()] };
 };
 
 export const getClusterCustomManifests = (
@@ -37,13 +36,8 @@ export const getClusterCustomManifests = (
       folder: manifest.folder || 'manifests',
       filename: manifest.fileName || '',
       manifestYaml: manifest.yamlContent || '',
-      fakeId: getManifestFakeId(manifest.folder || 'manifests', manifest.fileName || ''),
     }));
   } else {
-    return [getEmptyFormViewManifest()];
+    return [getEmptyManifest()];
   }
 };
-
-export const getManifestFakeId = (folder: string, fileName: string): string => {
-  return `${folder}#${fileName}`;
-};

package/lib/ocm/components/clusterConfiguration/manifestsConfiguration/data/dataTypes.ts

@@ -6,7 +6,6 @@ export type CustomManifestValues = {
   folder: FormViewManifestFolder;
   filename: string;
   manifestYaml: string;
-  fakeId?: string;
 };
 
 export interface ManifestFormData {

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

@@ -15,6 +15,7 @@ import { isInOcm } from '../../api';
 import { ExternalPlatformLinks } from '../clusterConfiguration/platformIntegration/constants';
 import { useNewFeatureSupportLevel } from '../../../common/components/newFeatureSupportLevels';
 import { Cluster, PlatformType } from '@openshift-assisted/types/assisted-installer-service';
+import PostInstallAlert from '../../../common/components/clusterDetail/PostInstallAlert';
 
 type ClusterDetailStatusMessagesProps = {
   cluster: Cluster;
@@ -76,22 +77,7 @@ const ClusterDetailStatusMessages = ({
           }
         />
       </RenderIf>
-      <RenderIf condition={!!platformLink}>
-        <Alert
-          variant="warning"
-          isInline
-          data-testid="alert-modify-platform-config"
-          title={
-            <p>
-              Modify your platform configuration to access your platform's features directly in
-              OpenShift.{' '}
-              <a href={platformLink} target="_blank" rel="noopener noreferrer">
-                Learn more about configuration <i className="fas fa-external-link-alt" />
-              </a>
-            </p>
-          }
-        />
-      </RenderIf>
+      {platformLink && <PostInstallAlert link={platformLink} />}
     </>
   );
 };

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

@@ -15,8 +15,8 @@ import {
   ClusterDetailsUpdateParams,
   ClustersService,
   ClusterCreateParamsWithStaticNetworking,
+  UISettingService,
 } from '../../services';
-import useClusterCustomManifests from '../../hooks/useClusterCustomManifests';
 import { Cluster, InfraEnv } from '@openshift-assisted/types/assisted-installer-service';
 
 type ClusterDetailsProps = {
@@ -33,10 +33,13 @@ const ClusterDetails = ({ cluster, infraEnv }: ClusterDetailsProps) => {
   const { usedClusterNames } = useUsedClusterNames(cluster?.id || '');
   const pullSecret = usePullSecret();
   const { error: errorOCPVersions, loading: loadingOCPVersions, versions } = useOpenshiftVersions();
-  const { customManifests } = useClusterCustomManifests(cluster?.id || '', false);
 
   const handleClusterUpdate = React.useCallback(
-    async (clusterId: Cluster['id'], params: ClusterDetailsUpdateParams) => {
+    async (
+      clusterId: Cluster['id'],
+      params: ClusterDetailsUpdateParams,
+      addCustomManifests: boolean,
+    ) => {
       clearAlerts();
 
       try {
@@ -45,6 +48,7 @@ const ClusterDetails = ({ cluster, infraEnv }: ClusterDetailsProps) => {
           cluster?.tags,
           params,
         );
+        await clusterWizardContext.updateUISettings({ addCustomManifests });
         dispatch(updateCluster(updatedCluster));
 
         canNextClusterDetails({ cluster: updatedCluster }) && clusterWizardContext.moveNext();
@@ -60,23 +64,13 @@ const ClusterDetails = ({ cluster, infraEnv }: ClusterDetailsProps) => {
     [clearAlerts, addAlert, dispatch, cluster?.tags, clusterWizardContext],
   );
 
-  const handleCustomManifestsChange = React.useCallback(
-    async (clusterId: string, addCustomManifests: boolean) => {
-      const addCustomManifestsNew = customManifests ? customManifests.length === 0 : true;
-      if (addCustomManifests && addCustomManifestsNew && clusterId) {
-        await ClustersService.createDummyManifest(clusterId);
-      }
-    },
-    [customManifests],
-  );
-
   const handleClusterCreate = React.useCallback(
     async (params: ClusterCreateParamsWithStaticNetworking, addCustomManifests: boolean) => {
       clearAlerts();
       try {
         const cluster = await ClustersService.create(params);
         history.push(`${routeBasePath}/clusters/${cluster.id}`, ClusterWizardFlowStateNew);
-        await handleCustomManifestsChange(cluster.id, addCustomManifests);
+        await UISettingService.update(cluster.id, { addCustomManifests });
       } catch (e) {
         handleApiError(e, () =>
           addAlert({ title: 'Failed to create new cluster', message: getApiErrorMessage(e) }),
@@ -86,7 +80,7 @@ const ClusterDetails = ({ cluster, infraEnv }: ClusterDetailsProps) => {
         }
       }
     },
-    [clearAlerts, addAlert, dispatch, history, handleCustomManifestsChange],
+    [clearAlerts, history, addAlert, dispatch],
   );
 
   const navigation = <ClusterWizardNavigation cluster={cluster} />;
@@ -116,7 +110,6 @@ const ClusterDetails = ({ cluster, infraEnv }: ClusterDetailsProps) => {
       moveNext={() => clusterWizardContext.moveNext()}
       handleClusterUpdate={handleClusterUpdate}
       handleClusterCreate={handleClusterCreate}
-      handleCustomManifestsChange={handleCustomManifestsChange}
       navigation={navigation}
       infraEnv={infraEnv}
     />

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

@@ -46,9 +46,6 @@ type ClusterDetailsFormProps = {
   handleClusterUpdate: (
     clusterId: Cluster['id'],
     params: ClusterDetailsUpdateParams,
-  ) => Promise<void>;
-  handleCustomManifestsChange: (
-    clusterId: Cluster['id'],
     addCustomManifests: boolean,
   ) => Promise<void>;
 };
@@ -64,7 +61,6 @@ const ClusterDetailsForm = (props: ClusterDetailsFormProps) => {
     moveNext,
     handleClusterUpdate,
     handleClusterCreate,
-    handleCustomManifestsChange,
     navigation,
   } = props;
 
@@ -73,6 +69,7 @@ const ClusterDetailsForm = (props: ClusterDetailsFormProps) => {
   const { isViewerMode } = useSelector(selectCurrentClusterPermissionsState);
   const featureSupportLevels = useNewFeatureSupportLevel();
   const { clearAlerts } = useAlerts();
+
   const handleSubmit = React.useCallback(
     async (values: OcmClusterDetailsValues) => {
       if (cluster) {
@@ -86,20 +83,13 @@ const ClusterDetailsForm = (props: ClusterDetailsFormProps) => {
           resetPlatform = 'baremetal';
         }
         const params = ClusterDetailsService.getClusterUpdateParams(values, resetPlatform);
-        await handleClusterUpdate(cluster.id, params);
-        await handleCustomManifestsChange(cluster.id, clusterWizardContext.addCustomManifests);
+        await handleClusterUpdate(cluster.id, params, values.addCustomManifest);
       } else {
         const params = ClusterDetailsService.getClusterCreateParams(values);
-        await handleClusterCreate(params, clusterWizardContext.addCustomManifests);
+        await handleClusterCreate(params, values.addCustomManifest);
       }
     },
-    [
-      cluster,
-      handleClusterCreate,
-      handleClusterUpdate,
-      handleCustomManifestsChange,
-      clusterWizardContext.addCustomManifests,
-    ],
+    [cluster, handleClusterCreate, handleClusterUpdate],
   );
 
   const handleOnNext = React.useCallback(
@@ -129,8 +119,17 @@ const ClusterDetailsForm = (props: ClusterDetailsFormProps) => {
         managedDomains,
         ocpVersions,
         urlSearchParams: search,
+        addCustomManifests: clusterWizardContext.customManifestsStep,
       }),
-    [infraEnv, cluster, pullSecret, managedDomains, ocpVersions, search],
+    [
+      infraEnv,
+      cluster,
+      pullSecret,
+      managedDomains,
+      ocpVersions,
+      search,
+      clusterWizardContext.customManifestsStep,
+    ],
   );
 
   const { t } = useTranslation();
@@ -146,7 +145,10 @@ const ClusterDetailsForm = (props: ClusterDetailsFormProps) => {
   return (
     <Formik
       initialValues={initialValues}
-      validate={getRichTextValidation(validationSchema)}
+      validate={(values) => {
+        clearAlerts();
+        return getRichTextValidation(validationSchema)(values);
+      }}
       onSubmit={handleSubmit}
     >
       {({ submitForm, isSubmitting, isValid, dirty, errors, touched }) => {

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { HostsNetworkConfigurationType } from '../../services';
+import { HostsNetworkConfigurationType, UISettingsValues } from '../../services';
 import { StaticIpView } from '../clusterConfiguration/staticIp/data/dataTypes';
 import { ClusterWizardStepsType } from './wizardTransition';
 
@@ -11,10 +11,12 @@ export type ClusterWizardContextType = {
   wizardStepIds: ClusterWizardStepsType[];
   onUpdateStaticIpView(view: StaticIpView): void;
   onUpdateHostNetworkConfigType(type: HostsNetworkConfigurationType): void;
-  setAddCustomManifests(addCustomManifest: boolean): void;
-  addCustomManifests: boolean;
+  setCustomManifestsStep(addCustomManifest: boolean): void;
+  customManifestsStep: boolean;
   wizardPerPage: number;
   setWizardPerPage: (perPage: number) => void;
+  updateUISettings: (data: UISettingsValues) => Promise<void>;
+  uiSettings?: UISettingsValues;
 };
 
 export const ClusterWizardContext = React.createContext<ClusterWizardContextType | null>(null);