Merge pull request #1555 from coralproject/configure-enh

Configure enhancements

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

@@ -84,7 +84,6 @@ class OrganizationSettings extends React.Component {
   render() {
     const { settings, slotPassthrough, canSave } = this.props;
     const hasErrors = this.state.errors.length;
-
     return (
       <ConfigurePage title={t('configure.organization_information')}>
         <p>{t('configure.organization_info_copy')}</p>
@@ -125,7 +124,7 @@ class OrganizationSettings extends React.Component {
                       [styles.editable]: this.state.editing,
                     })}
                     onChange={this.updateEmail}
-                    value={settings.organizationContactEmail}
+                    value={settings.organizationContactEmail || ''}
                     id={t('configure.organization_contact_email')}
                     readOnly={!this.state.editing}
                   />

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

@@ -20,7 +20,8 @@ import OrganizationSettings from './OrganizationSettings';
 import { withRouter } from 'react-router';
 
 class ConfigureContainer extends React.Component {
-  state = { nextRoute: '' };
+  nextRoute = '';
+  unregisterLeaveHook = null;
 
   savePending = async () => {
     await this.props.updateSettings(this.props.pending);
@@ -40,18 +41,16 @@ class ConfigureContainer extends React.Component {
   };
 
   gotoNextRoute = () => {
-    const { nextRoute } = this.state;
-    if (nextRoute) {
-      this.props.router.push(nextRoute);
-      this.setState({ nextRoute: '' });
+    if (this.nextRoute) {
+      this.props.router.push(this.nextRoute);
+      this.nextRoute = '';
     }
   };
 
   handleSectionChange = async section => {
     const nextRoute = `/admin/configure/${section}`;
-
-    if (this.shouldShowSaveDialog()) {
-      await this.setState({ nextRoute });
+    if (this.hasPendingData()) {
+      this.nextRoute = nextRoute;
       this.props.showSaveDialog();
     } else {
       // Just go to the section
@@ -59,20 +58,37 @@ class ConfigureContainer extends React.Component {
     }
   };
 
-  shouldShowSaveDialog = () => {
+  navigationPrompt = e => {
+    if (this.hasPendingData()) {
+      const confirmationMessage = 'Changes that you made may not be saved.';
+      e.returnValue = confirmationMessage; // Gecko, Trident, Chrome 34+
+      return confirmationMessage; // Gecko, WebKit, Chrome <34
+    }
+  };
+
+  hasPendingData = () => {
     return !!Object.keys(this.props.pending).length;
   };
 
   routeLeave = ({ pathname }) => {
-    if (this.shouldShowSaveDialog()) {
-      this.setState({ nextRoute: pathname });
+    if (this.hasPendingData()) {
+      this.nextRoute = pathname;
       this.props.showSaveDialog();
       return false;
     }
   };
 
   componentDidMount() {
-    this.props.router.setRouteLeaveHook(this.props.route, this.routeLeave);
+    this.unregisterLeaveHook = this.props.router.setRouteLeaveHook(
+      this.props.route,
+      this.routeLeave
+    );
+    window.addEventListener('beforeunload', this.navigationPrompt);
+  }
+
+  componentWillUnmount() {
+    this.unregisterLeaveHook();
+    window.removeEventListener('beforeunload', this.navigationPrompt);
   }
 
   render() {

client/coral-framework/utils/index.js

@@ -237,7 +237,11 @@ export function getTotalReactionsCount(actionSummaries) {
 
 // Like lodash merge but does not recurse into arrays.
 export function mergeExcludingArrays(objValue, srcValue) {
-  if (typeof srcValue === 'object' && !Array.isArray(srcValue)) {
+  if (
+    typeof srcValue === 'object' &&
+    !Array.isArray(srcValue) &&
+    srcValue !== null
+  ) {
     return assignWith({}, objValue, srcValue, mergeExcludingArrays);
   }
   return srcValue;

locales/en.yml

@@ -250,7 +250,7 @@ en:
     ALREADY_EXISTS: "Resource already exists"
     INVALID_ASSET_URL: "Assert URL is invalid"
     CANNOT_IGNORE_STAFF: "Cannot ignore Staff members."
-    email: "Not a valid E-Mail"
+    email: "Please enter a valid email."
     confirm_password: "Passwords don't match. Please check again"
     network_error: "Failed to connect to server. Check your internet connection and try again."
     email_not_verified: "Email address {0} not verified."