showing modal Clone menu

Author: sadakchap

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

@@ -127,6 +127,7 @@ class Browser extends DashboardView {
     this.saveNewRow = this.saveNewRow.bind(this);
     this.saveEditCloneRow = this.saveEditCloneRow.bind(this);
     this.abortEditCloneRow = this.abortEditCloneRow.bind(this);
+    this.cancelPendingEditRows = this.cancelPendingEditRows.bind(this);
   }
 
   componentWillMount() {
@@ -426,6 +427,12 @@ class Browser extends DashboardView {
     this.showEditRowDialog();
   }
 
+  cancelPendingEditRows() {
+    this.setState({
+      editCloneRows: null
+    });
+  }
+
   addEditCloneRows(cloneRows) {
     this.setState({
       editCloneRows: cloneRows
@@ -1225,6 +1232,7 @@ class Browser extends DashboardView {
             onAbortAddRow={this.abortAddRow}
             onSaveEditCloneRow={this.saveEditCloneRow}
             onAbortEditCloneRow={this.abortEditCloneRow}
+            onCancelPendingEditRows={this.cancelPendingEditRows}
 
             columns={columns}
             className={className}

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

@@ -49,6 +49,8 @@ let BrowserToolbar = ({
   uniqueField,
   handleColumnDragDrop,
   handleColumnsOrder,
+  editCloneRows,
+  onCancelPendingEditRows,
   order,
 
   enableDeleteAllRows,
@@ -59,6 +61,7 @@ let BrowserToolbar = ({
   enableClassManipulation,
 }) => {
   let selectionLength = Object.keys(selection).length;
+  let isPendingEditCloneRows = editCloneRows && editCloneRows.length > 0;
   let details = [];
   if (count !== undefined) {
       if (count === 1) {
@@ -103,7 +106,7 @@ let BrowserToolbar = ({
     );
   } else if (onAddRow) {
     menu = (
-      <BrowserMenu title='Edit' icon='edit-solid' disabled={isUnique}>
+      <BrowserMenu title='Edit' icon='edit-solid' disabled={isUnique || isPendingEditCloneRows}>
         <MenuItem text='Add a row' onClick={onAddRow} />
         <MenuItem text='Add a row with modal' onClick={onAddRowWithModal} />
         {enableColumnManipulation ? <MenuItem text='Add a column' onClick={onAddColumn} /> : <noscript />}
@@ -249,7 +252,7 @@ let BrowserToolbar = ({
           setCurrent={setCurrent}
           title="Security"
           icon="locked-solid"
-          disabled={!!relation || !!isUnique}
+          disabled={!!relation || !!isUnique || isPendingEditCloneRows}
         >
           <MenuItem text={'Class Level Permissions'} onClick={showCLP} />
           <MenuItem text={'Protected Fields'} onClick={showProtected} />
@@ -263,6 +266,16 @@ let BrowserToolbar = ({
         <noscript />
       )}
       {menu}
+      {editCloneRows && editCloneRows.length > 0 && <div className={styles.toolbarSeparator} />}
+      {editCloneRows && editCloneRows.length > 0 && (
+        <BrowserMenu title="Clone" icon="clone-icon">
+          <MenuItem
+            text={"Cancel All Pending Rows"}
+            onClick={onCancelPendingEditRows}
+          />
+        </BrowserMenu>
+      )}
+      
     </Toolbar>
   );
 };

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

@@ -270,7 +270,7 @@ export default class DataBrowser extends React.Component {
   }
 
   render() {
-    let { className, count, disableSecurityDialog,  ...other } = this.props;
+    let { className, count, disableSecurityDialog, onCancelPendingEditRows, editCloneRows, ...other } = this.props;
     const { preventSchemaEdits } = this.context.currentApp;
     return (
       <div>
@@ -280,6 +280,7 @@ export default class DataBrowser extends React.Component {
           editing={this.state.editing}
           simplifiedSchema={this.state.simplifiedSchema}
           className={className}
+          editCloneRows={editCloneRows}
           handleHeaderDragDrop={this.handleHeaderDragDrop}
           handleResize={this.handleResize}
           setEditing={this.setEditing}
@@ -301,6 +302,8 @@ export default class DataBrowser extends React.Component {
           enableClassManipulation={!preventSchemaEdits}
           handleColumnDragDrop={this.handleHeaderDragDrop}
           handleColumnsOrder={this.handleColumnsOrder}
+          editCloneRows={editCloneRows}
+          onCancelPendingEditRows={onCancelPendingEditRows}
           order={this.state.order}
           {...other} />