fix: [PROD-14393] fix dataset creation form state after reopening the dialog

Form state validation only worked correctly the first time a data source type
was opened, because the form state is reset when the Dialog is closed. This
fix adds a ref in DatasetCreationParameters to store the default values used
when building the form input fields, and calls getValues() to keep track of
the form values while the Dialog stays open (e.g. when switching back to a
previously edited data source type). When the data source type changes in the
Dialog, the react-hook-form state is reset with a combination of form values
and default values, and the form validation is thus correctly managed.

Author: csm-thu

src/views/DatasetManager/components/CreateDatasetButton/components/DatasetCreationParameters/DatasetCreationParameters.js

@@ -1,6 +1,6 @@
 // Copyright (c) Cosmo Tech.
 // Licensed under the MIT license.
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { Controller, useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import PropTypes from 'prop-types';
@@ -18,7 +18,7 @@ const clone = rfdc();
 
 export const DatasetCreationParameters = ({ dataSourceRunTemplates, parentDataset, selectedRunner }) => {
   const { t } = useTranslation();
-  const { resetField } = useFormContext();
+  const { getValues, resetField } = useFormContext();
   const organizationId = useOrganizationId();
   const workspaceId = useWorkspaceId();
   const { datasourceParameterHelpers, getDataSourceTypeEnumValues, getUploadFileLabels, getDefaultFileTypeFilter } =
@@ -40,6 +40,7 @@ export const DatasetCreationParameters = ({ dataSourceRunTemplates, parentDatase
     if (dataSourceType == null) setDataSourceType(defaultDataSourceTypeKey);
   }, [dataSourceType, setDataSourceType, defaultDataSourceTypeKey]);
 
+  const defaultFormState = useRef({});
   const sourceParameters = useMemo(() => {
     const forgeParameterInput = (originalParameter) => {
       const parameterId = originalParameter.id;
@@ -70,6 +71,7 @@ export const DatasetCreationParameters = ({ dataSourceRunTemplates, parentDatase
         console.error(`VarType "${inputType}" is not supported for ETL runner parameters.`);
         return null;
       }
+      defaultFormState.current[fieldPath] = defaultValue;
 
       return (
         <Controller
@@ -155,6 +157,7 @@ export const DatasetCreationParameters = ({ dataSourceRunTemplates, parentDatase
     };
 
     const runTemplate = dataSourceRunTemplates[dataSourceType];
+    defaultFormState.current = {};
     return runTemplate?.parameters?.map((parameter) => forgeParameterInput(parameter));
   }, [
     organizationId,
@@ -169,6 +172,25 @@ export const DatasetCreationParameters = ({ dataSourceRunTemplates, parentDatase
     getDefaultFileTypeFilter,
   ]);
 
+  useEffect(() => {
+    // Do not reset form when updating an existing dataset (already done in a useEffect in UpdateDatasetDialog)
+    if (isDatasetParametersEditionDialog) return;
+
+    const formValues = getValues();
+    for (const [sourceType, parameters] of Object.entries(formValues)) {
+      // Ignore fields that are not source types
+      if (['name', 'tags', 'description', 'sourceType'].includes(sourceType)) continue;
+      for (const [parameterId, parameterValue] of Object.entries(parameters)) {
+        const escapedSourceType = SolutionsUtils.escapeRunTemplateId(sourceType);
+        const fieldPath = `${escapedSourceType}.${parameterId}`;
+        defaultFormState.current[fieldPath] = parameterValue;
+      }
+    }
+    for (const [key, defaultValue] of Object.entries(defaultFormState.current)) {
+      resetField(key, { defaultValue });
+    }
+  }, [getValues, isDatasetParametersEditionDialog, resetField, sourceParameters]);
+
   const labels = useMemo(() => {
     return isSubDatasetCreationWizard
       ? {

src/views/DatasetManager/components/CreateDatasetButton/components/DatasetWizard/DatasetWizard.js

@@ -28,13 +28,6 @@ export const DatasetWizard = ({ open, closeDialog, onConfirm, dataSourceRunTempl
   const { formState } = methods;
   const [activeStep, setActiveStep] = useState(0);
 
-  useEffect(() => {
-    if (open) {
-      methods.reset();
-      setActiveStep(0);
-    }
-  }, [open, methods, setActiveStep]);
-
   const confirm = (event) => {
     const values = methods.getValues();
     onConfirm(values);
@@ -62,6 +55,13 @@ export const DatasetWizard = ({ open, closeDialog, onConfirm, dataSourceRunTempl
     return `${parentDataset?.name} (subdataset)`;
   }, [parentDataset?.name, isSubDatasetCreationWizard]);
 
+  useEffect(() => {
+    if (open) {
+      methods.reset({ name: defaultName });
+      setActiveStep(0);
+    }
+  }, [defaultName, open, methods, setActiveStep]);
+
   const firstStep = (
     <>
       <Grid item xs={12}>