Cloning Rows (#1697)

* disabled clone rows option for standard classes

* providing a way to edit clone rows on error 137

* allowing user to clone rows for standard classes

* checking dirty clone objects on failed clone

* giving option to clone or cancel per row for failed clone rows

* fixed wrapTop for data rows when edit clone row

* showing modal Clone menu

* disabling other menu item on modal state

* clone rows for requried field

* showing cloned rows for missing required field error

* removing username & authData for User class object

* removed null initialization var

* removing username while cloning User obj

* added clone icon attribution note

* added required placehlder text for edit clone rows

* clearing required field row after abort add

* udpating config file

* dynamic update required fields from BrowserRow new

* remove requiredColumnFields state var from Browser

* Update package-lock.json

* disabling all menu options on edit clone row modal state

Co-authored-by: Manuel Trezza <[email protected]>

Author: sadakchap

src/components/BrowserCell/BrowserCell.react.js

@@ -214,7 +214,7 @@ export default class BrowserCell extends Component {
   //#endregion
 
   render() {
-    let { type, value, hidden, width, current, onSelect, onEditChange, setCopyableValue, setRelation, onPointerClick, row, col, field, onEditSelectedRow, readonly, isRequired, markRequiredField } = this.props;
+    let { type, value, hidden, width, current, onSelect, onEditChange, setCopyableValue, setRelation, onPointerClick, row, col, field, onEditSelectedRow, readonly, isRequired, markRequiredFieldRow } = this.props;
     let content = value;
     let isNewRow = row < 0;
     this.copyableValue = content;
@@ -333,7 +333,7 @@ export default class BrowserCell extends Component {
       classes.push(styles.current);
     }
 
-    if (markRequiredField && isRequired && !value) {
+    if (markRequiredFieldRow === row && isRequired && !value) {
       classes.push(styles.required);
     }
 

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/BrowserRow/BrowserRow.react.js

@@ -19,8 +19,21 @@ export default class BrowserRow extends Component {
   }
 
   render() {
-    const { className, columns, currentCol, isUnique, obj, onPointerClick, order, readOnlyFields, row, rowWidth, selection, selectRow, setCopyableValue, setCurrent, setEditing, setRelation, onEditSelectedRow, setContextMenu, onFilterChange, markRequiredField, requiredColumnFields } = this.props;
+    const { className, columns, currentCol, isUnique, obj, onPointerClick, order, readOnlyFields, row, rowWidth, selection, selectRow, setCopyableValue, setCurrent, setEditing, setRelation, onEditSelectedRow, setContextMenu, onFilterChange, markRequiredFieldRow } = this.props;
     let attributes = obj.attributes;
+    let requiredCols = [];
+    Object.entries(columns).reduce((acc, cur) => {
+      if (cur[1].required) {
+        acc.push(cur[0]);
+      }
+      return acc;
+    }, requiredCols);
+    // for dynamically changing required field on _User class
+    if (obj.className === '_User' && (obj.get('username') !== undefined || obj.get('password') !== undefined)) {
+      requiredCols = ['username', 'password'];
+    } else if (obj.className === '_User' && obj.get('authData') !== undefined) {
+      requiredCols = ['authData'];
+    }
     return (
       <div className={styles.tableRow} style={{ minWidth: rowWidth }}>
         <span className={styles.checkCell}>
@@ -58,7 +71,7 @@ export default class BrowserRow extends Component {
               hidden = true;
             }
           }
-          let isRequired = requiredColumnFields && requiredColumnFields.includes(name);
+          let isRequired = requiredCols.includes(name);
           return (
             <BrowserCell
               key={name}
@@ -82,7 +95,7 @@ export default class BrowserRow extends Component {
               value={attr}
               hidden={hidden}
               isRequired={isRequired}
-              markRequiredField={markRequiredField}
+              markRequiredFieldRow={markRequiredFieldRow}
               setCopyableValue={setCopyableValue}
               setContextMenu={setContextMenu}
               onEditSelectedRow={onEditSelectedRow} />

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 {