Context menu with quick filters and links to related records in other Parse Objects 📃

Parse-Dashboard/parse-dashboard-config.json

@@ -11,4 +11,4 @@
     }
   ],
   "iconsFolder": "icons"
-}
+}

src/components/BrowserCell/BrowserCell.react.js

@@ -5,6 +5,8 @@
  * This source code is licensed under the license found in the LICENSE file in
  * the root directory of this source tree.
  */
+import * as Filters              from 'lib/Filters';
+import { List, Map }             from 'immutable';
 import { dateStringUTC }         from 'lib/DateUtils';
 import getFileName               from 'lib/getFileName';
 import Parse                     from 'parse';
@@ -64,8 +66,144 @@ export default class BrowserCell extends Component {
     return isRefDifferent;
   }
 
+  //#region Cell Context Menu related methods
+
+  onContextMenu(event) {
+    if (event.type !== 'contextmenu') { return; }
+    event.preventDefault();
+
+    const { field, hidden, onSelect, setCopyableValue, setContextMenu, row, col } = this.props;
+
+    onSelect({ row, col });
+    setCopyableValue(hidden ? undefined : this.copyableValue);
+
+    const available = Filters.availableFilters(this.props.simplifiedSchema, this.props.filters, Filters.BLACKLISTED_FILTERS);
+    const constraints = available && available[field];
+
+    const { pageX, pageY } = event;
+    const menuItems = this.getContextMenuOptions(constraints);
+    menuItems.length && setContextMenu(pageX, pageY, menuItems);
+  }
+
+  getContextMenuOptions(constraints) {
+    let { onEditSelectedRow } = this.props;
+    const contextMenuOptions = [];
+
+    const setFilterContextMenuOption = this.getSetFilterContextMenuOption(constraints);
+    setFilterContextMenuOption && contextMenuOptions.push(setFilterContextMenuOption);
+
+    const addFilterContextMenuOption = this.getAddFilterContextMenuOption(constraints);
+    addFilterContextMenuOption && contextMenuOptions.push(addFilterContextMenuOption);
+
+    const relatedObjectsContextMenuOption = this.getRelatedObjectsContextMenuOption();
+    relatedObjectsContextMenuOption && contextMenuOptions.push(relatedObjectsContextMenuOption);
+
+    onEditSelectedRow && contextMenuOptions.push({
+      text: 'Edit row',
+      callback: () => {
+        let { objectId, onEditSelectedRow } = this.props;
+        onEditSelectedRow(true, objectId);
+      }
+    });
+
+    return contextMenuOptions;
+  }
+
+  getSetFilterContextMenuOption(constraints) {
+    if (constraints) {
+      return {
+        text: 'Set filter...', items: constraints.map(constraint => {
+          const definition = Filters.Constraints[constraint];
+          const text = `${this.props.field} ${definition.name}${definition.comparable ? (' ' + this.copyableValue) : ''}`;
+          return {
+            text,
+            callback: this.pickFilter.bind(this, constraint)
+          };
+        })
+      };
+    }
+  }
+
+  getAddFilterContextMenuOption(constraints) {
+    if (constraints && this.props.filters && this.props.filters.size > 0) {
+      return {
+        text: 'Add filter...', items: constraints.map(constraint => {
+          const definition = Filters.Constraints[constraint];
+          const text = `${this.props.field} ${definition.name}${definition.comparable ? (' ' + this.copyableValue) : ''}`;
+          return {
+            text,
+            callback: this.pickFilter.bind(this, constraint, true)
+          };
+        })
+      };
+    }
+  }
+
+  /**
+   * Returns "Get related records from..." context menu item if cell holds a Pointer
+   * or objectId and there's a class in relation.
+   */
+  getRelatedObjectsContextMenuOption() {
+    const { value, schema, onPointerClick } = this.props;
+
+    const pointerClassName = (value && value.className)
+      || (this.props.field === 'objectId' && this.props.className);
+    if (pointerClassName) {
+      const relatedRecordsMenuItem = { text: 'Get related records from...', items: [] };
+      schema.data.get('classes').sortBy((v, k) => k).forEach((cl, className) => {
+        cl.forEach((column, field) => {
+          if (column.targetClass !== pointerClassName) { return; }
+          relatedRecordsMenuItem.items.push({
+            text: className, callback: () => {
+              let relatedObject = value;
+              if (this.props.field === 'objectId') {
+                relatedObject = new Parse.Object(pointerClassName);
+                relatedObject.id = value;
+              }
+              onPointerClick({ className, id: relatedObject.toPointer(), field })
+            }
+          })
+        });
+      });
+
+      return relatedRecordsMenuItem.items.length ? relatedRecordsMenuItem : undefined;
+    }
+  }
+
+  pickFilter(constraint, addToExistingFilter) {
+    const definition = Filters.Constraints[constraint];
+    const { filters, type, value, field } = this.props;
+    const newFilters = addToExistingFilter ? filters : new List();
+    let compareTo;
+    if (definition.comparable) {
+      switch (type) {
+        case 'Pointer':
+          compareTo = value.toPointer()
+          break;
+        case 'Date':
+          compareTo = value.__type ? value : {
+            __type: 'Date',
+            iso: value
+          };
+          break;
+
+        default:
+          compareTo = value;
+          break;
+      }
+    }
+
+    this.props.onFilterChange(newFilters.push(new Map({
+      field,
+      constraint,
+      compareTo
+    })));
+  }
+
+  //#endregion
+
   render() {
-    let { type, value, hidden, width, current, onSelect, onEditChange, setCopyableValue, setRelation, onPointerClick, row, col, name, onEditSelectedRow } = this.props;
+    let { type, value, hidden, width, current, onSelect, onEditChange, setCopyableValue, setRelation, onPointerClick, row, col, field, onEditSelectedRow } = this.props;
     let content = value;
     this.copyableValue = content;
     let classes = [styles.cell, unselectable];
@@ -96,8 +234,8 @@ export default class BrowserCell extends Component {
           <Pill value={value.id} />
         </a>
       ) : (
-        value.id
-      );
+          value.id
+        );
       this.copyableValue = value.id;
     } else if (type === 'Date') {
       if (typeof value === 'object' && value.__type) {
@@ -145,11 +283,11 @@ export default class BrowserCell extends Component {
           <Pill onClick={() => setRelation(value)} value='View relation' />
         </div>
       ) : (
-        'Relation'
-      );
+          'Relation'
+        );
       this.copyableValue = undefined;
     }
-  
+
     if (current) {
       classes.push(styles.current);
     }
@@ -164,7 +302,7 @@ export default class BrowserCell extends Component {
         }}
         onDoubleClick={() => {
           // Since objectId can't be edited, double click event opens edit row dialog
-          if (name === 'objectId' && onEditSelectedRow) {
+          if (field === 'objectId' && onEditSelectedRow) {
             onEditSelectedRow(true, value);
           } else if (type !== 'Relation') {
             onEditChange(true)
@@ -178,7 +316,9 @@ export default class BrowserCell extends Component {
             }
             onEditChange(true);
           }
-        }}>
+        }}
+        onContextMenu={this.onContextMenu.bind(this)}
+      >
         {content}
       </span>
     );

src/components/BrowserFilter/BrowserFilter.react.js

@@ -17,7 +17,6 @@ import ReactDOM      from 'react-dom';
 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 {
@@ -27,7 +26,7 @@ export default class BrowserFilter extends React.Component {
     this.state = {
       open: false,
       filters: new List(),
-      blacklistedFilters: BLACKLISTED_FILTERS.concat(props.blacklistedFilters)
+      blacklistedFilters: Filters.BLACKLISTED_FILTERS.concat(props.blacklistedFilters)
     };
     this.toggle = this.toggle.bind(this);
   }

src/components/BrowserRow/BrowserRow.react.js

@@ -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, onEditSelectedRow } = this.props;
+    const { className, columns, currentCol, isUnique, obj, onPointerClick, order, readOnlyFields, row, rowWidth, selection, selectRow, setCopyableValue, setCurrent, setEditing, setRelation, onEditSelectedRow, setContextMenu, onFilterChange } = this.props;
     let attributes = obj.attributes;
     return (
       <div className={styles.tableRow} style={{ minWidth: rowWidth }}>
@@ -61,7 +61,11 @@ export default class BrowserRow extends Component {
           return (
             <BrowserCell
               key={name}
-              name={name}
+              schema={this.props.schema}
+              simplifiedSchema={this.props.simplifiedSchema}
+              filters={this.props.filters}
+              className={className}
+              field={name}
               row={row}
               col={j}
               type={type}
@@ -71,10 +75,13 @@ export default class BrowserRow extends Component {
               onSelect={setCurrent}
               onEditChange={setEditing}
               onPointerClick={onPointerClick}
+              onFilterChange={onFilterChange}
               setRelation={setRelation}
+              objectId={obj.id}
               value={attr}
               hidden={hidden}
               setCopyableValue={setCopyableValue}
+              setContextMenu={setContextMenu}
               onEditSelectedRow={onEditSelectedRow} />
           );
         })}

src/components/ContextMenu/ContextMenu.example.js

@@ -0,0 +1,48 @@
+/*
+ * Copyright (c) 2016-present, Parse, LLC
+ * All rights reserved.
+ *
+ * This source code is licensed under the license found in the LICENSE file in
+ * the root directory of this source tree.
+ */
+import React from 'react';
+import ContextMenu from 'components/ContextMenu/ContextMenu.react';
+
+export const component = ContextMenu;
+
+export const demos = [
+  {
+    name: 'Context menu',
+    render: () => (
+      <div style={{
+        position: 'relative',
+        height: '100px'
+      }}>
+        <ContextMenu
+          x={0}
+          y={0}
+          items={[
+            {
+              text: 'Category 1', items: [
+                { text: 'C1 Item 1', callback: () => { alert('C1 Item 1 clicked!') } },
+                { text: 'C1 Item 2', callback: () => { alert('C1 Item 2 clicked!') } },
+                {
+                  text: 'Sub Category 1', items: [
+                    { text: 'SC1 Item 1', callback: () => { alert('SC1 Item 1 clicked!') } },
+                    { text: 'SC1 Item 2', callback: () => { alert('SC1 Item 2 clicked!') } },
+                  ]
+                }
+              ]
+            },
+            {
+              text: 'Category 2', items: [
+                { text: 'C2 Item 1', callback: () => { alert('C2 Item 1 clicked!') } },
+                { text: 'C2 Item 2', callback: () => { alert('C2 Item 2 clicked!') } }
+              ]
+            }
+          ]}
+        />
+      </div>
+    )
+  }
+];