View/Edit single row modal (parse-community#1448)

* EditRowDialog - initial version

* TextInput - change focus to new input/textarea field when multiline props has changed

* EditRowDialg - removed custom FormModal width

* EditRowDialog - initial version

* TextInput - change focus to new input/textarea field when multiline props has changed

* EditRowDialg - removed custom FormModal width

* package-lock.json sync after rebase from master

* EditRowDialog - moved objectId, createdAt, updatedAt to dialog title. ACL added as confim button in footer. Also removed these fields from content

* EditRowDialog - creating new objects with modal implemented

* EditRowDialog:
- fixed bug when creating new objects with modal;
- ACL modal visible without closing editRowDialog;
- fixed bug when relation clicked after newly saved object
- FormModal replaced with Modal component

* EditRowDialog - picker for pointer and relation

Co-authored-by: Antonio Davi Macedo Coelho de Castro <adavimacedo@gmail.com>

Author: 2 people

package-lock.json

@@ -24,10 +24,12 @@ export default class BrowserCell extends Component {
   componentDidUpdate() {
     if (this.props.current) {
       const node = this.cellRef.current;
+      const { setRelation } = this.props;
       const { left, right, bottom, top } = node.getBoundingClientRect();
 
       // Takes into consideration Sidebar width when over 980px wide.
-      const leftBoundary = window.innerWidth > 980 ? 300 : 0;
+      // If setRelation is undefined, DataBrowser is used as ObjectPicker, so it does not have a sidebar.
+      const leftBoundary = window.innerWidth > 980 && setRelation ? 300 : 0;
 
       // BrowserToolbar + DataBrowserHeader height
       const topBoundary = 126;
@@ -63,7 +65,7 @@ export default class BrowserCell extends Component {
   }
 
   render() {
-    let { type, value, hidden, width, current, onSelect, onEditChange, setCopyableValue, setRelation, onPointerClick, row, col } = this.props;
+    let { type, value, hidden, width, current, onSelect, onEditChange, setCopyableValue, setRelation, onPointerClick, row, col, name, onEditSelectedRow } = this.props;
     let content = value;
     this.copyableValue = content;
     let classes = [styles.cell, unselectable];
@@ -89,10 +91,12 @@ export default class BrowserCell extends Component {
         object.id = value.objectId;
         value = object;
       }
-      content = (
+      content = onPointerClick ? (
         <a href='javascript:;' onClick={onPointerClick.bind(undefined, value)}>
           <Pill value={value.id} />
         </a>
+      ) : (
+        value.id
       );
       this.copyableValue = value.id;
     } else if (type === 'Date') {
@@ -136,10 +140,12 @@ export default class BrowserCell extends Component {
     } else if (type === 'Polygon') {
       this.copyableValue = content = value.coordinates.map(coord => `(${coord})`)
     } else if (type === 'Relation') {
-      content = (
+      content = setRelation ? (
         <div style={{ textAlign: 'center', cursor: 'pointer' }}>
           <Pill onClick={() => setRelation(value)} value='View relation' />
         </div>
+      ) : (
+        'Relation'
       );
       this.copyableValue = undefined;
     }
@@ -157,7 +163,10 @@ export default class BrowserCell extends Component {
           setCopyableValue(hidden ? undefined : this.copyableValue);
         }}
         onDoubleClick={() => {
-          if (type !== 'Relation') {
+          // Since objectId can't be edited, double click event opens edit row dialog
+          if (name === 'objectId' && onEditSelectedRow) {
+            onEditSelectedRow(true, value);
+          } else if (type !== 'Relation') {
             onEditChange(true)
           }
         }}

src/components/BrowserCell/BrowserCell.react.js

@@ -18,14 +18,16 @@ import styles        from 'components/BrowserFilter/BrowserFilter.scss';
 import { List, Map } from 'immutable';
 
 const BLACKLISTED_FILTERS = [ 'containsAny', 'doesNotContainAny' ];
+const POPOVER_CONTENT_ID = 'browserFilterPopover';
 
 export default class BrowserFilter extends React.Component {
-  constructor() {
-    super();
+  constructor(props) {
+    super(props);
 
     this.state = {
       open: false,
       filters: new List(),
+      blacklistedFilters: BLACKLISTED_FILTERS.concat(props.blacklistedFilters)
     };
     this.toggle = this.toggle.bind(this)
   }
@@ -43,7 +45,7 @@ export default class BrowserFilter extends React.Component {
   toggle() {
     let filters = this.props.filters;
     if (this.props.filters.size === 0) {
-      let available = Filters.availableFilters(this.props.schema, null, BLACKLISTED_FILTERS);
+      let available = Filters.availableFilters(this.props.schema, null, this.state.blacklistedFilters);
       let field = Object.keys(available)[0];
       filters = new List([new Map({ field: field, constraint: available[field][0] })]);
     }
@@ -55,7 +57,7 @@ export default class BrowserFilter extends React.Component {
   }
 
   addRow() {
-    let available = Filters.availableFilters(this.props.schema, this.state.filters, BLACKLISTED_FILTERS);
+    let available = Filters.availableFilters(this.props.schema, this.state.filters, this.state.blacklistedFilters);
     let field = Object.keys(available)[0];
     this.setState(({ filters }) => ({
       filters: filters.push(new Map({ field: field, constraint: available[field][0] })),
@@ -92,12 +94,12 @@ export default class BrowserFilter extends React.Component {
       }
       let available = Filters.availableFilters(this.props.schema, this.state.filters);
       popover = (
-        <Popover fixed={true} position={position} onExternalClick={this.toggle}>
-          <div className={popoverStyle.join(' ')} onClick={() => this.props.setCurrent(null)}>
+        <Popover fixed={true} position={position} onExternalClick={this.toggle} contentId={POPOVER_CONTENT_ID}>
+          <div className={popoverStyle.join(' ')} onClick={() => this.props.setCurrent(null)} id={POPOVER_CONTENT_ID}>
             <div onClick={this.toggle} style={{ cursor: 'pointer', width: this.node.clientWidth, height: this.node.clientHeight }}></div>
             <div className={styles.body}>
               <Filter
-                blacklist={BLACKLISTED_FILTERS}
+                blacklist={this.state.blacklistedFilters}
                 schema={this.props.schema}
                 filters={this.state.filters}
                 onChange={(filters) => this.setState({ filters: filters })}

src/components/BrowserFilter/BrowserFilter.react.js

@@ -68,6 +68,12 @@
   }
 }
 
+.objectPickerContent {
+  .entry svg {
+    fill: rgba(0, 0, 0, 0.3);
+  }
+}
+
 .body {
   position: absolute;
   top: 30px;

src/components/BrowserFilter/BrowserFilter.scss

@@ -19,7 +19,7 @@ export default class BrowserRow extends Component {
   }
 
   render() {
-    const { className, columns, currentCol, isUnique, obj, onPointerClick, order, readOnlyFields, row, rowWidth, selection, selectRow, setCopyableValue, setCurrent, setEditing, setRelation } = this.props;
+    const { className, columns, currentCol, isUnique, obj, onPointerClick, order, readOnlyFields, row, rowWidth, selection, selectRow, setCopyableValue, setCurrent, setEditing, setRelation, onEditSelectedRow } = this.props;
     let attributes = obj.attributes;
     return (
       <div className={styles.tableRow} style={{ minWidth: rowWidth }}>
@@ -61,6 +61,7 @@ export default class BrowserRow extends Component {
           return (
             <BrowserCell
               key={name}
+              name={name}
               row={row}
               col={j}
               type={type}
@@ -73,7 +74,8 @@ export default class BrowserRow extends Component {
               setRelation={setRelation}
               value={attr}
               hidden={hidden}
-              setCopyableValue={setCopyableValue} />
+              setCopyableValue={setCopyableValue}
+              onEditSelectedRow={onEditSelectedRow} />
           );
         })}
       </div>

src/components/BrowserRow/BrowserRow.react.js

@@ -77,7 +77,7 @@ export default class ChromeDropdown extends React.Component {
       widthStyle = { width: measuredWidth };
       content = (
         <Popover fixed={true} position={position} onExternalClick={() => this.setState({ open: false })}>
-          <div style={widthStyle} className={[styles.menu, styles[color]].join(' ')}>
+          <div style={widthStyle} className={[styles.menu, styles[color], "chromeDropdown"].join(' ')}>
             {this.props.options.map((o) => {
               let key = o;
               let value = o;

src/components/ChromeDropdown/ChromeDropdown.react.js

@@ -10,6 +10,8 @@ import Icon from 'components/Icon/Icon.react';
 import Popover from 'components/Popover/Popover.react';
 import Position from 'lib/Position';
 
+const POPOVER_CONTENT_ID = 'columnsConfigurationPopover';
+
 export default class ColumnsConfiguration extends React.Component {
   constructor() {
     super();
@@ -57,8 +59,8 @@ export default class ColumnsConfiguration extends React.Component {
     let popover = null;
     if (this.state.open) {
       popover = (
-        <Popover fixed={true} position={Position.inDocument(this.node)} onExternalClick={this.toggle.bind(this)}>
-          <div className={styles.popover}>
+        <Popover fixed={true} position={Position.inDocument(this.node)} onExternalClick={this.toggle.bind(this)} contentId={POPOVER_CONTENT_ID}>
+          <div className={styles.popover} id={POPOVER_CONTENT_ID}>
             {title}
             <div className={styles.body}>
               <div className={styles.columnConfigContainer}>

src/components/ColumnsConfiguration/ColumnsConfiguration.react.js

@@ -42,6 +42,12 @@
   }
 }
 
+.objectPickerContent {
+  .entry svg {
+    fill: rgba(0, 0, 0, 0.3);
+  }
+}
+
 .body {
   color: white;
   position: absolute;

src/components/ColumnsConfiguration/ColumnsConfiguration.scss

@@ -60,25 +60,27 @@ export default class DataBrowserHeaderBar extends React.Component {
       );
     });
 
-    let finalStyle = {};
-    if (headers.length % 2) {
-      finalStyle.background = 'rgba(224,224,234,0.10)';
+    if (onAddColumn) {
+      let finalStyle = {};
+      if (headers.length % 2) {
+        finalStyle.background = 'rgba(224,224,234,0.10)';
+      }
+  
+      elements.push(
+        readonly || preventSchemaEdits ? null : (
+          <div key='add' className={styles.addColumn} style={finalStyle}>
+            <a
+              href='javascript:;'
+              role='button'
+              className={styles.addColumnButton}
+              onClick={onAddColumn}>
+              Add a new column
+            </a>
+          </div>
+        )
+      );
     }
 
-    elements.push(
-      readonly || preventSchemaEdits ? null : (
-        <div key='add' className={styles.addColumn} style={finalStyle}>
-          <a
-            href='javascript:;'
-            role='button'
-            className={styles.addColumnButton}
-            onClick={onAddColumn}>
-            Add a new column
-          </a>
-        </div>
-      )
-    );
-
     return (
       <DndProvider backend={HTML5Backend}>
         <div className={styles.bar}>{elements}</div>

src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.react.js

@@ -64,3 +64,11 @@
   margin: 0 -4px;
   cursor: ew-resize;
 }
+
+.pickerPointer {
+  .check {
+    input {
+      display: none;
+    }
+  }
+}