fix(ui-commons): prompt form Form displayed on dialog validation (#2089)

AntaresSimulatorTeam · Jul 11, 2024 · 2b67de8 · 2b67de8
2 parents 2454456 + 5b46996
commit 2b67de8
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 13 deletions.
diff --git a/webapp/src/components/App/Singlestudy/HomeView/InformationView/CreateVariantDialog.tsx b/webapp/src/components/App/Singlestudy/HomeView/InformationView/CreateVariantDialog.tsx
@@ -58,7 +58,7 @@ function CreateVariantDialog(props: Props) {
 
   return (
     <FormDialog
-      maxWidth="sm"
+      maxWidth="sm" // Study name source can be long
       title={t("studies.createNewStudy")}
       titleIcon={AddCircleIcon}
       open={open}
@@ -68,7 +68,7 @@ function CreateVariantDialog(props: Props) {
       config={{ defaultValues }}
     >
       {({ control }) => (
-        <Fieldset fieldWidth={550}>
+        <Fieldset fullFieldWidth>
           <StringFE
             label={t("variants.newVariant")}
             name="name"
@@ -80,14 +80,14 @@ function CreateVariantDialog(props: Props) {
           />
           <SelectFE
             label={t("study.versionSource")}
+            name="sourceId"
             variant="outlined"
             options={sourceList.map((ver) => ({
               label: ver.name,
               value: ver.id,
             }))}
-            name="sourceId"
             control={control}
-            required
+            rules={{ required: true }}
           />
         </Fieldset>
       )}

diff --git a/webapp/src/components/common/Fieldset.tsx b/webapp/src/components/common/Fieldset.tsx
@@ -40,6 +40,10 @@ function Fieldset(props: FieldsetProps) {
               m: 0,
             },
           },
+          // Remove padding from the last child of the dialog content
+          ".MuiDialogContent-root .Form__Content > &:last-child": {
+            pb: 0,
+          },
         },
         sx,
       )}
@@ -59,7 +63,7 @@ function Fieldset(props: FieldsetProps) {
           <Divider sx={{ mt: 1 }} />
         </>
       )}
-      <Box {...contentProps} sx={mergeSxProp({ pt: 2 }, contentProps?.sx)}>
+      <Box {...contentProps} sx={mergeSxProp({ pt: 1 }, contentProps?.sx)}>
         {children}
       </Box>
     </Box>

diff --git a/webapp/src/components/common/Form/index.tsx b/webapp/src/components/common/Form/index.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { FormEvent, useEffect, useMemo, useRef } from "react";
+import { FormEvent, useEffect, useMemo, useRef, useState } from "react";
 import {
   DeepPartial,
   FieldPath,
@@ -116,6 +116,7 @@ function Form<TFieldValues extends FieldValues, TContext>(
   const { t } = useTranslation();
   const autoSubmitConfig = toAutoSubmitConfig(autoSubmit);
 
+  const [isInProgress, setIsInProgress] = useState(false);
   const [showAutoSubmitLoader, setShowAutoSubmitLoader] = useDebouncedState(
     false,
     750,
@@ -130,7 +131,6 @@ function Form<TFieldValues extends FieldValues, TContext>(
   const lastSubmittedData = useRef<TFieldValues>();
   // eslint-disable-next-line @typescript-eslint/no-empty-function
   const submitSuccessfulCb = useRef(() => {});
-  const preventClose = useRef(false);
 
   const contextValue = useMemo(
     () => ({ isAutoSubmitEnabled: autoSubmitConfig.enable }),
@@ -224,7 +224,7 @@ function Form<TFieldValues extends FieldValues, TContext>(
   // Prevent browser close if a submit is pending
   useEffect(() => {
     const listener = (event: BeforeUnloadEvent) => {
-      if (preventClose.current) {
+      if (isInProgress) {
         // eslint-disable-next-line no-param-reassign
         event.returnValue = t("form.submit.inProgress");
       } else if (isDirty) {
@@ -238,14 +238,14 @@ function Form<TFieldValues extends FieldValues, TContext>(
     return () => {
       window.removeEventListener("beforeunload", listener);
     };
-  }, [t, isDirty]);
+  }, [t, isInProgress, isDirty]);
 
   useUpdateEffect(() => onStateChange?.(formState), [formState]);
 
   useEffect(() => setRef(apiRef, formApiPlus));
 
-  usePrompt(t("form.submit.inProgress"), preventClose.current);
-  usePrompt(t("form.changeNotSaved"), isDirty);
+  usePrompt(t("form.submit.inProgress"), isInProgress);
+  usePrompt(t("form.changeNotSaved"), isDirty && !isInProgress);
 
   ////////////////////////////////////////////////////////////////
   // Submit
@@ -299,7 +299,7 @@ function Form<TFieldValues extends FieldValues, TContext>(
           });
         })
         .finally(() => {
-          preventClose.current = false;
+          setIsInProgress(false);
         });
     }, onInvalid);
 
@@ -309,7 +309,8 @@ function Form<TFieldValues extends FieldValues, TContext>(
   const submitDebounced = useDebounce(submit, autoSubmitConfig.wait);
 
   const requestSubmit = () => {
-    preventClose.current = true;
+    setIsInProgress(true);
+
     if (autoSubmitConfig.enable) {
       submitDebounced();
     } else {