disabling other menu item on modal state

Author: sadakchap

src/components/BrowserFilter/BrowserFilter.react.js

@@ -144,6 +144,9 @@ export default class BrowserFilter extends React.Component {
     if (this.props.filters.size) {
       buttonStyle.push(styles.active);
     }
+    if (this.props.disabled) {
+      buttonStyle.push(styles.disabled);
+    }
     return (
       <div className={styles.wrap}>
         <div className={buttonStyle.join(' ')} onClick={this.toggle}>

src/components/BrowserFilter/BrowserFilter.scss

@@ -22,6 +22,15 @@
   &:hover svg {
     fill: white;
   }
+  
+  &.disabled {
+    cursor: not-allowed;
+    color: #66637A;
+
+    &:hover svg {
+      fill: #66637A;
+    }
+  }
 }
 
 .entry.active {

src/components/ColumnsConfiguration/ColumnsConfiguration.react.js

@@ -48,13 +48,19 @@ export default class ColumnsConfiguration extends React.Component {
   }
 
   render() {
-    const { handleColumnDragDrop, handleColumnsOrder, order } = this.props;
-    const [ title, entry ] = [styles.title, styles.entry ].map(className => (
+    const { handleColumnDragDrop, handleColumnsOrder, order, disabled } = this.props;
+    let [ title, entry ] = [styles.title, styles.entry ].map(className => (
       <div className={className} onClick={this.toggle.bind(this)}>
         <Icon name='manage-columns' width={14} height={14} />
         <span>Manage Columns</span>
       </div>
     ));
+    if (disabled) {
+      entry = <div className={styles.entry + ' ' + styles.disabled} onClick={null}>
+        <Icon name='manage-columns' width={14} height={14} />
+        <span>Manage Columns</span>
+      </div>;
+    }
 
     let popover = null;
     if (this.state.open) {

src/components/ColumnsConfiguration/ColumnsConfiguration.scss

@@ -12,6 +12,15 @@
   &:hover svg {
     fill: white;
   }
+
+  &.disabled {
+    cursor: not-allowed;
+    color: #66637A;
+
+    &:hover svg {
+      fill: #66637A;
+    }
+  }
 }
 
 .title {

src/dashboard/Data/Browser/BrowserToolbar.react.js

@@ -15,7 +15,7 @@ import Separator            from 'components/BrowserMenu/Separator.react';
 import styles               from 'dashboard/Data/Browser/Browser.scss';
 import Toolbar              from 'components/Toolbar/Toolbar.react';
 import SecurityDialog       from 'dashboard/Data/Browser/SecurityDialog.react';
-import ColumnsConfiguration  from 'components/ColumnsConfiguration/ColumnsConfiguration.react'
+import ColumnsConfiguration from 'components/ColumnsConfiguration/ColumnsConfiguration.react'
 import SecureFieldsDialog   from 'dashboard/Data/Browser/SecureFieldsDialog.react';
 
 let BrowserToolbar = ({
@@ -155,6 +155,10 @@ let BrowserToolbar = ({
     classes.push(styles.toolbarButtonDisabled);
     onClick = null;
   }
+  if (isPendingEditCloneRows) {
+    classes.push(styles.toolbarButtonDisabled);
+    onClick = null;
+  }
 
   const columns = {};
   const userPointers = [];
@@ -203,9 +207,10 @@ let BrowserToolbar = ({
         handleColumnsOrder={handleColumnsOrder}
         handleColumnDragDrop={handleColumnDragDrop}
         order={order}
+        disabled={isPendingEditCloneRows}
       />
       <div className={styles.toolbarSeparator} />
-      <a className={styles.toolbarButton} onClick={onRefresh}>
+      <a className={classes.join(' ')} onClick={ isPendingEditCloneRows ? null : onRefresh}>
         <Icon name="refresh-solid" width={14} height={14} />
         <span>Refresh</span>
       </a>
@@ -217,6 +222,7 @@ let BrowserToolbar = ({
         onChange={onFilterChange}
         className={classNameForEditors}
         blacklistedFilters={onAddRow ? [] : ['unique']}
+        disabled={isPendingEditCloneRows}
       />
       {onAddRow && <div className={styles.toolbarSeparator} />}
       {perms && enableSecurityDialog ? (
@@ -270,7 +276,7 @@ let BrowserToolbar = ({
       {editCloneRows && editCloneRows.length > 0 && (
         <BrowserMenu title="Clone" icon="clone-icon">
           <MenuItem
-            text={"Cancel All Pending Rows"}
+            text={"Cancel all pending rows"}
             onClick={onCancelPendingEditRows}
           />
         </BrowserMenu>