From b4f4eb828ad4929ecb4621acb0c5a11e4d414aa4 Mon Sep 17 00:00:00 2001 From: Tyler Ohlsen Date: Thu, 7 Nov 2024 10:23:05 -0800 Subject: [PATCH] Warn users on browser refresh if unsaved changes Signed-off-by: Tyler Ohlsen --- .../pages/workflow_detail/components/header.tsx | 17 +++++++++++++++++ .../new_workflow/quick_configure_modal.tsx | 1 - 2 files changed, 17 insertions(+), 1 deletion(-) diff --git a/public/pages/workflow_detail/components/header.tsx b/public/pages/workflow_detail/components/header.tsx index a9853faf..77541620 100644 --- 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 index 56db5852..d2bac5fc 100644 --- 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 )