Warn users on browser refresh if unsaved changes (#470) (#471)

(cherry picked from commit 8c20543) Signed-off-by: Tyler Ohlsen <[email protected]> Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
opensearch-project · Nov 7, 2024 · 0365306 · 0365306
1 parent 55e51bc
commit 0365306
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 1 deletion.
diff --git a/public/pages/workflow_detail/components/header.tsx b/public/pages/workflow_detail/components/header.tsx
@@ -195,6 +195,23 @@ export function WorkflowDetailHeader(props: WorkflowDetailHeaderProps) {
       ? ingestSaveButtonDisabled
       : searchSaveButtonDisabled;
 
+  // Add warning when exiting with unsaved changes
+  function alertFn(e: BeforeUnloadEvent) {
+    e.preventDefault();
+  }
+
+  // Hook for warning of unsaved changes if a browser refresh is detected
+  useEffect(() => {
+    if (!saveDisabled) {
+      window.addEventListener('beforeunload', alertFn);
+    } else {
+      window.removeEventListener('beforeunload', alertFn);
+    }
+    return () => {
+      window.removeEventListener('beforeunload', alertFn);
+    };
+  }, [saveDisabled]);
+
   // Utility fn to update the workflow UI config only, based on the current form values.
   // A get workflow API call is subsequently run to fetch the updated state.
   async function updateWorkflowUiConfig() {

diff --git a/public/pages/workflows/new_workflow/quick_configure_modal.tsx b/public/pages/workflows/new_workflow/quick_configure_modal.tsx
@@ -160,7 +160,6 @@ export function QuickConfigureModal(props: QuickConfigureModalProps) {
                 history.replace(
                   constructUrlWithParams(
                     APP_PATH.WORKFLOWS,
-
                     workflow.id,
                     dataSourceId
                   )