chore: add a feature flag to unsaved changes provider

bcgov · Nov 1, 2024 · 774b284 · 774b284
1 parent 3485267
commit 774b284
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 7 deletions.
diff --git a/app/components/Analyst/Project/ProjectForm.tsx b/app/components/Analyst/Project/ProjectForm.tsx
@@ -6,6 +6,8 @@ import Accordion from 'components/Accordion';
 import { FormBase } from 'components/Form';
 import CircularProgress from '@mui/material/CircularProgress';
 import { Collapse } from '@mui/material';
+import { FormBaseRef } from 'components/Form/FormBase';
+import { useRef } from 'react';
 import ProjectTheme from './ProjectTheme';
 import { ProjectFormProps } from './ProjectFormProps';
 
@@ -89,6 +91,7 @@ const ProjectForm: React.FC<ProjectFormProps> = ({
   ...rest
 }) => {
   const stopPropagation = (e) => e.stopPropagation();
+  const formRef = useRef<FormBaseRef>(null);
 
   return (
     <Accordion
@@ -102,7 +105,10 @@ const ProjectForm: React.FC<ProjectFormProps> = ({
                 id={`${title.toLowerCase().split(' ').join('-')}-save-button`}
                 size="small"
                 disabled={saveBtnDisabled}
-                onClick={onSubmit}
+                onClick={(e) => {
+                  onSubmit(e);
+                  formRef.current?.resetFormState(e.formData);
+                }}
               >
                 {saveBtnText || 'Save'}
               </StyledBtn>
@@ -111,8 +117,9 @@ const ProjectForm: React.FC<ProjectFormProps> = ({
                 variant="secondary"
                 disabled={cancelBtnDisabled}
                 onClick={() => {
-                  setFormData();
+                  setFormData({});
                   setIsFormEditMode(false);
+                  formRef.current?.resetFormState({});
                 }}
               >
                 Cancel
@@ -158,6 +165,7 @@ const ProjectForm: React.FC<ProjectFormProps> = ({
         {formHeader}
         <FormBase
           // setting a key here will reset the form
+          ref={formRef}
           key={isFormEditMode ? 'edit' : 'view'}
           schema={schema}
           uiSchema={uiSchema}

diff --git a/app/components/Analyst/Project/ProjectInformation/ProjectInformationForm.tsx b/app/components/Analyst/Project/ProjectInformation/ProjectInformationForm.tsx
@@ -425,9 +425,7 @@ const ProjectInformationForm: React.FC<Props> = ({
       handleChange={(e) => {
         setHasFormSaved(false);
         if (!isChangeRequest && !e.formData.hasFundingAgreementBeenSigned) {
-          setFormData({
-            hasFundingAgreementBeenSigned: false,
-          });
+          setFormData({});
         } else {
           setFormData({ ...e.formData });
         }

diff --git a/app/components/UnsavedChangesProvider.tsx b/app/components/UnsavedChangesProvider.tsx
@@ -9,6 +9,7 @@ import React, {
   type PropsWithChildren,
 } from 'react';
 import { useRouter } from 'next/router';
+import { useFeature } from '@growthbook/growthbook-react';
 import UnsavedChangesWarningModal from './Modal/UnsavedChangesWarningModal';
 
 type IUnsavedChangesContext = {
@@ -24,6 +25,9 @@ const UnsavedChangesProvider: React.FC<PropsWithChildren> = ({ children }) => {
   const [leavingPage, setLeavingPage] = useState(false);
   const [isDirty, setIsDirty] = useState(false);
   const confirmLeavePage = useRef<() => void>(() => {});
+  const enableUnsavedChangesWarning = useFeature(
+    'enable_unsaved_changes_warning'
+  ).value;
 
   const updateDirtyState = useCallback((dirty: boolean) => {
     setIsDirty(dirty);
@@ -54,7 +58,7 @@ const UnsavedChangesProvider: React.FC<PropsWithChildren> = ({ children }) => {
 
   useEffect(() => {
     const handleClick = (event: MouseEvent | SubmitEvent) => {
-      if (!isDirty) return;
+      if (!isDirty || !enableUnsavedChangesWarning) return;
 
       let target: HTMLElement | null = null;
       if (event instanceof MouseEvent) {
@@ -95,7 +99,13 @@ const UnsavedChangesProvider: React.FC<PropsWithChildren> = ({ children }) => {
         element.removeEventListener('submit', handleClick);
       });
     };
-  }, [handleLinkNavigation, handleLogoutAction, isDirty, router]);
+  }, [
+    enableUnsavedChangesWarning,
+    handleLinkNavigation,
+    handleLogoutAction,
+    isDirty,
+    router,
+  ]);
 
   const handleModalCallback = () => {
     setLeavingPage(false);

diff --git a/app/tests/components/Form/UnsavedChangesWarning.test.tsx b/app/tests/components/Form/UnsavedChangesWarning.test.tsx
@@ -6,6 +6,7 @@ import {
   act,
   waitFor,
 } from '@testing-library/react';
+import * as moduleApi from '@growthbook/growthbook-react';
 import FormTestRenderer from '../../utils/formTestRenderer';
 
 const schema = {
@@ -31,6 +32,16 @@ const uiSchema = {
   },
 };
 
+const mockEnableUnsavedChangesWarning = (
+  value: boolean
+): moduleApi.FeatureResult<boolean> => ({
+  value,
+  source: 'defaultValue',
+  on: null,
+  off: null,
+  ruleId: 'enable_unsaved_changes_warning',
+});
+
 const renderStaticLayout = (
   rjsfSchema: RJSFSchema,
   rjsfUiSchema: RJSFSchema
@@ -50,6 +61,9 @@ const renderStaticLayout = (
 
 describe('Unsaved Changes Handling', () => {
   beforeEach(() => {
+    jest
+      .spyOn(moduleApi, 'useFeature')
+      .mockReturnValue(mockEnableUnsavedChangesWarning(true));
     renderStaticLayout(
       {
         ...schema,