From 9ee68ba9e395b3edf7802aa64c2d15622e2a6091 Mon Sep 17 00:00:00 2001
From: Ryan Mathis <rmathis@unicon.net>
Date: Wed, 9 Jun 2021 13:25:40 -0700
Subject: [PATCH] SHIBUI-1941 Modal if navigating away from form

---
 ui/src/app/metadata/editor/MetadataEditor.js         |  3 ++-
 ui/src/app/metadata/wizard/MetadataProviderWizard.js | 12 ++++++++++--
 ui/src/app/metadata/wizard/MetadataSourceWizard.js   | 12 ++++++++++--
 3 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/ui/src/app/metadata/editor/MetadataEditor.js b/ui/src/app/metadata/editor/MetadataEditor.js
index 5fe133954..80cb65016 100644
--- a/ui/src/app/metadata/editor/MetadataEditor.js
+++ b/ui/src/app/metadata/editor/MetadataEditor.js
@@ -37,7 +37,7 @@ export function MetadataEditor ({ current }) {
     const onChange = (changes) => {
         dispatch(setFormDataAction(changes.formData));
         dispatch(setFormErrorAction(changes.errors));
-        // setBlocking(true);
+        setBlocking(true);
     };
 
     function save(metadata) {
@@ -51,6 +51,7 @@ export function MetadataEditor ({ current }) {
     };
 
     const cancel = () => {
+        setBlocking(false);
         gotoDetail();
     };
 
diff --git a/ui/src/app/metadata/wizard/MetadataProviderWizard.js b/ui/src/app/metadata/wizard/MetadataProviderWizard.js
index 891023e8c..752a9be67 100644
--- a/ui/src/app/metadata/wizard/MetadataProviderWizard.js
+++ b/ui/src/app/metadata/wizard/MetadataProviderWizard.js
@@ -8,7 +8,7 @@ import { useMetadataFormDispatcher, setFormDataAction, setFormErrorAction, useMe
 import { MetadataConfiguration } from '../component/MetadataConfiguration';
 import { Configuration } from '../hoc/Configuration';
 import { useMetadataEntity, useMetadataProviders } from '../hooks/api';
-import { useHistory } from 'react-router';
+import { Prompt, useHistory } from 'react-router';
 import { removeNull } from '../../core/utility/remove_null';
 
 import { useNotificationDispatcher, createNotificationAction, NotificationTypes } from '../../notifications/hoc/Notifications';
@@ -40,7 +40,7 @@ export function MetadataProviderWizard({onRestart}) {
     const onChange = (changes) => {
         formDispatch(setFormDataAction(changes.formData));
         formDispatch(setFormErrorAction(changes.errors));
-        // console.log('change', changes);
+        setBlocking(true);
     };
 
     const onEditFromSummary = (idx) => {
@@ -67,8 +67,16 @@ export function MetadataProviderWizard({onRestart}) {
         }
     }
 
+    const [blocking, setBlocking] = React.useState(false);
+
     return (
         <>
+            <Prompt
+                when={blocking}
+                message={location =>
+                    `message.unsaved-editor`
+                }
+            />
             <div className="row mb-4">
                 <div className="col-12">
                     <WizardNav onSave={save}
diff --git a/ui/src/app/metadata/wizard/MetadataSourceWizard.js b/ui/src/app/metadata/wizard/MetadataSourceWizard.js
index 1ac8f5bb2..b329f1e36 100644
--- a/ui/src/app/metadata/wizard/MetadataSourceWizard.js
+++ b/ui/src/app/metadata/wizard/MetadataSourceWizard.js
@@ -7,7 +7,7 @@ import { useMetadataFormDispatcher, setFormDataAction, setFormErrorAction, useMe
 import { MetadataConfiguration } from '../component/MetadataConfiguration';
 import { Configuration } from '../hoc/Configuration';
 import { useMetadataEntity, useMetadataSources } from '../hooks/api';
-import { useHistory } from 'react-router';
+import { Prompt, useHistory } from 'react-router';
 import { removeNull } from '../../core/utility/remove_null';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
@@ -46,7 +46,7 @@ export function MetadataSourceWizard ({ onShowNav }) {
     const onChange = (changes) => {
         formDispatch(setFormDataAction(changes.formData));
         formDispatch(setFormErrorAction(changes.errors));
-        // console.log('change', changes);
+        setBlocking(true);
     };
 
     const onEditFromSummary = (idx) => {
@@ -67,11 +67,19 @@ export function MetadataSourceWizard ({ onShowNav }) {
         }
     }
 
+    const [blocking, setBlocking] = React.useState(false);
+
     const validator = definition.validator(data);
     const warnings = definition.warnings && definition.warnings(metadata);
 
     return (
         <>
+            <Prompt
+                when={blocking}
+                message={location =>
+                    `message.unsaved-editor`
+                }
+            />
             <div className="row mb-4">
                 <div className="col-12">
                     <WizardNav onSave={save} disabled={ errors.length > 0 || loading } saving={loading} />