SHIBUI-1941 Modal if navigating away from form

TIER · Jun 9, 2021 · 9ee68ba · 9ee68ba
1 parent 52f3f6c
commit 9ee68ba
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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} />