fix(client): Save step template form on unmount to handle esc key (#7444

)
novuhq · Jan 7, 2025 · 6606f6e · 6606f6e
1 parent 9d05a6f
commit 6606f6e
Showing 1 changed file with 16 additions and 6 deletions.
diff --git a/apps/dashboard/src/components/workflow-editor/steps/configure-step-template-form.tsx b/apps/dashboard/src/components/workflow-editor/steps/configure-step-template-form.tsx
@@ -1,24 +1,25 @@
-import { useCallback, useEffect, useMemo } from 'react';
-import { useForm } from 'react-hook-form';
 import {
   type StepDataDto,
   StepTypeEnum,
   StepUpdateDto,
   UpdateWorkflowDto,
   type WorkflowResponseDto,
 } from '@novu/shared';
+import { useCallback, useEffect, useMemo } from 'react';
+import { useForm } from 'react-hook-form';
 
-import { flattenIssues, updateStepInWorkflow } from '@/components/workflow-editor/step-utils';
 import { Form } from '@/components/primitives/form/form';
-import { EmailTabs } from '@/components/workflow-editor/steps/email/email-tabs';
 import { getStepDefaultValues } from '@/components/workflow-editor/step-default-values';
+import { flattenIssues, updateStepInWorkflow } from '@/components/workflow-editor/step-utils';
+import { ChatTabs } from '@/components/workflow-editor/steps/chat/chat-tabs';
+import { CommonCustomControlValues } from '@/components/workflow-editor/steps/common/common-custom-control-values';
+import { EmailTabs } from '@/components/workflow-editor/steps/email/email-tabs';
 import { InAppTabs } from '@/components/workflow-editor/steps/in-app/in-app-tabs';
 import { PushTabs } from '@/components/workflow-editor/steps/push/push-tabs';
 import { SaveFormContext } from '@/components/workflow-editor/steps/save-form-context';
 import { SmsTabs } from '@/components/workflow-editor/steps/sms/sms-tabs';
-import { ChatTabs } from '@/components/workflow-editor/steps/chat/chat-tabs';
+import { useDataRef } from '@/hooks/use-data-ref';
 import { useFormAutosave } from '@/hooks/use-form-autosave';
-import { CommonCustomControlValues } from '@/components/workflow-editor/steps/common/common-custom-control-values';
 
 const STEP_TYPE_TO_TEMPLATE_FORM: Record<StepTypeEnum, (args: StepEditorProps) => React.JSX.Element | null> = {
   [StepTypeEnum.EMAIL]: EmailTabs,
@@ -62,6 +63,15 @@ export const ConfigureStepTemplateForm = (props: ConfigureStepTemplateFormProps)
     },
   });
 
+  // Run saveForm on unmount
+  const saveFormRef = useDataRef(saveForm);
+  useEffect(() => {
+    return () => {
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      saveFormRef.current();
+    };
+  }, [saveFormRef]);
+
   const setIssuesFromStep = useCallback(() => {
     const stepIssues = flattenIssues(step.issues?.controls);
     const currentErrors = form.formState.errors;