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

(cherry picked from commit 8c20543)

Signed-off-by: Tyler Ohlsen <ohltyler@amazon.com>
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>

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() {

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
                   )