From 3da72c19d76261045bf0b82d149135bacdbb4643 Mon Sep 17 00:00:00 2001
From: Samir Kamal <1954121+skamril@users.noreply.github.com>
Date: Tue, 18 Jun 2024 10:58:49 +0200
Subject: [PATCH] fix(ui-commons): display a popup to warn of unsaved
 modifications on Form (#2071)

---
 webapp/public/locales/en/main.json          | 1 +
 webapp/public/locales/fr/main.json          | 1 +
 webapp/src/components/common/Form/index.tsx | 9 ++++++++-
 3 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/webapp/public/locales/en/main.json b/webapp/public/locales/en/main.json
index a274efec52..e1e1d053d3 100644
--- a/webapp/public/locales/en/main.json
+++ b/webapp/public/locales/en/main.json
@@ -123,6 +123,7 @@
   "maintenance.error.maintenanceError": "Unable to retrieve maintenance status",
   "form.submit.error": "Error while submitting",
   "form.submit.inProgress": "The form is being submitted. Are you sure you want to leave the page?",
+  "form.changeNotSaved": "The form has not been saved. Are you sure you want to leave the page?",
   "form.asyncDefaultValues.error": "Failed to get values",
   "form.field.required": "Field required",
   "form.field.duplicate": "Value already exists",
diff --git a/webapp/public/locales/fr/main.json b/webapp/public/locales/fr/main.json
index 27f92a3551..f14b30405a 100644
--- a/webapp/public/locales/fr/main.json
+++ b/webapp/public/locales/fr/main.json
@@ -123,6 +123,7 @@
   "maintenance.error.maintenanceError": "Impossible de récupérer le status de maintenance de l'application",
   "form.submit.error": "Erreur lors de la soumission",
   "form.submit.inProgress": "Le formulaire est en cours de soumission. Etes-vous sûr de vouloir quitter la page ?",
+  "form.changeNotSaved": "Le formulaire n'a pas été sauvegardé. Etes-vous sûr de vouloir quitter la page ?",
   "form.asyncDefaultValues.error": "Impossible d'obtenir les valeurs",
   "form.field.required": "Champ requis",
   "form.field.duplicate": "Cette valeur existe déjà",
diff --git a/webapp/src/components/common/Form/index.tsx b/webapp/src/components/common/Form/index.tsx
index 225063b720..7c4958bb7f 100644
--- a/webapp/src/components/common/Form/index.tsx
+++ b/webapp/src/components/common/Form/index.tsx
@@ -115,10 +115,12 @@ function Form<TFieldValues extends FieldValues, TContext>(
   const enqueueErrorSnackbar = useEnqueueErrorSnackbar();
   const { t } = useTranslation();
   const autoSubmitConfig = toAutoSubmitConfig(autoSubmit);
+
   const [showAutoSubmitLoader, setShowAutoSubmitLoader] = useDebouncedState(
     false,
     750,
   );
+
   const fieldAutoSubmitListeners = useRef<
     Record<string, ((v: any) => any | Promise<any>) | undefined>
   >({});
@@ -129,6 +131,7 @@ function Form<TFieldValues extends FieldValues, TContext>(
   // eslint-disable-next-line @typescript-eslint/no-empty-function
   const submitSuccessfulCb = useRef(() => {});
   const preventClose = useRef(false);
+
   const contextValue = useMemo(
     () => ({ isAutoSubmitEnabled: autoSubmitConfig.enable }),
     [autoSubmitConfig.enable],
@@ -224,6 +227,9 @@ function Form<TFieldValues extends FieldValues, TContext>(
       if (preventClose.current) {
         // eslint-disable-next-line no-param-reassign
         event.returnValue = t("form.submit.inProgress");
+      } else if (isDirty) {
+        // eslint-disable-next-line no-param-reassign
+        event.returnValue = t("form.changeNotSaved");
       }
     };
 
@@ -232,13 +238,14 @@ function Form<TFieldValues extends FieldValues, TContext>(
     return () => {
       window.removeEventListener("beforeunload", listener);
     };
-  }, [t]);
+  }, [t, isDirty]);
 
   useUpdateEffect(() => onStateChange?.(formState), [formState]);
 
   useEffect(() => setRef(apiRef, formApiPlus));
 
   usePrompt(t("form.submit.inProgress"), preventClose.current);
+  usePrompt(t("form.changeNotSaved"), isDirty);
 
   ////////////////////////////////////////////////////////////////
   // Submit