Save changes / discard changes dialohg

client/coral-admin/src/routes/Configure/components/Configure.js

@@ -33,7 +33,9 @@ class Configure extends React.Component {
           onCancel={this.props.hideSaveDialog}
           title={t('bandialog.ban_user')}
         >
-          Are you sure?
+          There are unsaved changes, Are you sure you want to continue?
+          <Button onClick={this.props.saveChanges}>Save Settings</Button>
+          <Button onClick={this.props.discardChanges}>Discard changes</Button>
         </Dialog>
         <div className={styles.leftColumn}>
           <List
@@ -78,6 +80,8 @@ class Configure extends React.Component {
 
 Configure.propTypes = {
   savePending: PropTypes.func.isRequired,
+  saveChanges: PropTypes.func.isRequired,
+  discardChanges: PropTypes.func.isRequired,
   currentUser: PropTypes.object.isRequired,
   root: PropTypes.object.isRequired,
   settings: PropTypes.object.isRequired,

client/coral-admin/src/routes/Configure/containers/Configure.js

@@ -3,6 +3,7 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import { compose, gql } from 'react-apollo';
 import { withQuery, withMergedSettings } from 'coral-framework/hocs';
+import ClickOutside from 'coral-framework/components/ClickOutside';
 import { Spinner } from 'coral-ui';
 import PropTypes from 'prop-types';
 import { withUpdateSettings } from 'coral-framework/graphql/mutations';
@@ -25,11 +26,33 @@ class ConfigureContainer extends React.Component {
     this.props.clearPending();
   };
 
+  saveChanges = async () => {
+    await this.savePending();
+    this.props.hideSaveDialog();
+  };
+
+  discardChanges = () => {
+    this.props.clearPending();
+    this.props.hideSaveDialog();
+  };
+
   setActiveSection = section => {
-    // Check if pending
-    console.log('pending', this.props.pending);
-    this.props.setActiveSection(section);
-    this.props.router.push(`/admin/configure/${section}`);
+    if (this.shouldShowSaveDialog()) {
+      this.props.showSaveDialog();
+    } else {
+      this.props.setActiveSection(section);
+      this.props.router.push(`/admin/configure/${section}`);
+    }
+  };
+
+  shouldShowSaveDialog = () => {
+    return !!Object.keys(this.props.pending).length;
+  };
+
+  onClickOutside = () => {
+    if (this.shouldShowSaveDialog()) {
+      this.props.showSaveDialog();
+    }
   };
 
   render() {
@@ -42,19 +65,23 @@ class ConfigureContainer extends React.Component {
     }
 
     return (
-      <Configure
-        saveDialog={this.props.saveDialog}
-        activeSection={this.props.activeSection}
-        hideSaveDialog={this.props.hideSaveDialog}
-        canSave={this.props.canSave}
-        currentUser={this.props.currentUser}
-        root={this.props.root}
-        settings={this.props.mergedSettings}
-        setActiveSection={this.setActiveSection}
-        savePending={this.savePending}
-      >
-        {this.props.children}
-      </Configure>
+      <ClickOutside onClickOutside={this.onClickOutside}>
+        <Configure
+          saveChanges={this.saveChanges}
+          discardChanges={this.discardChanges}
+          saveDialog={this.props.saveDialog}
+          activeSection={this.props.activeSection}
+          hideSaveDialog={this.props.hideSaveDialog}
+          canSave={this.props.canSave}
+          currentUser={this.props.currentUser}
+          root={this.props.root}
+          settings={this.props.mergedSettings}
+          setActiveSection={this.setActiveSection}
+          savePending={this.savePending}
+        >
+          {this.props.children}
+        </Configure>
+      </ClickOutside>
     );
   }
 }