Add AttachSelectedRowsDialog (#465)

* Add AttachSelectedRowsDialog

* fixed: <Icon /> href reference bug by relative path
* added: `Attach this/these rows to relation` button to `Edit` BrowserToolbar

* Update typo

* Update prevent filtering touchable columns

* fixed: base URL with update dependencies
* updated: `FormModal` uses ES6 Promise instead of Parse.Promise

Author: ellemedit

package.json

@@ -46,7 +46,7 @@
     "babel-runtime": "~5.8.25",
     "css-loader": "~0.18.0",
     "file-loader": "^0.8.5",
-    "history": "~1.9.1",
+    "history": "^2.1.2",
     "http-server": "~0.8.5",
     "immutable": "~3.7.5",
     "immutable-devtools": "~0.0.4",
@@ -61,7 +61,7 @@
     "react-dnd": "~2.1.4",
     "react-dnd-html5-backend": "~2.0.0",
     "react-dom": "^15.0.1",
-    "react-router": "2.3.0",
+    "react-router": "^2.6.0",
     "sass-loader": "~3.1.2",
     "style-loader": "~0.12.3",
     "svg-prep": "~1.0.0",

src/components/FormModal/FormModal.react.js

@@ -54,7 +54,7 @@ export default class FormModal extends React.Component {
           clearFields();
           onSuccess(result);
           this.setState({inProgress: false});
-        }).fail(({ message, error, notice, errors = [] }) => {
+        }).catch(({ message, error, notice, errors = [] }) => {
           this.setState({
             errorMessage: errors.join(' ') || message || error || notice || 'An error occurred',
             inProgress: false,

src/components/Icon/Icon.react.js

@@ -18,7 +18,7 @@ let Icon = ({ name, fill, width, height }) => {
   }
   return (
     <svg {...props} >
-      <use xlinkHref={`bundles/sprites.svg#${name}`} />
+      <use xlinkHref={`/bundles/sprites.svg#${name}`} />
     </svg>
   );
 };

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

@@ -27,33 +27,23 @@ export default class AttachRowsDialog extends React.Component {
       if (!objectId) return;
       return [...resourceIds, objectId];
     }, []);
-    const promise = new Parse.Promise();
-    console.log(promise);
-    this.props.onConfirm(objectIds)
-    .then(promise.resolve)
-    .catch((error) => {
-      promise.reject({
-        error,
-      });
-    });
-    return promise;
+    return this.props.onConfirm(objectIds);
   }
 
   render() {
     const {
       relation,
       onCancel,
-      onConfirm,
     } = this.props;
     return (
       <FormModal
+        open
         icon="plus"
         iconSize={40}
-        title="Attach Rows"
+        title="Attach Rows To Relation"
         subtitle={`Attach existing rows from ${relation.targetClassName}`}
         onClose={this.props.onCancel}
         onSubmit={this.handleConfirm}
-        open
         submitText="Attach"
         inProgressText="Attaching ..."
       >

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

@@ -0,0 +1,164 @@
+import React from 'react';
+import FormModal from 'components/FormModal/FormModal.react';
+import Field from 'components/Field/Field.react';
+import Label from 'components/Label/Label.react';
+import TextInput from 'components/TextInput/TextInput.react';
+import Dropdown from 'components/Dropdown/Dropdown.react';
+import Option from 'components/Dropdown/Option.react';
+import Parse from 'parse';
+import { SpecialClasses } from 'lib/Constants';
+
+export default class AttachSelectedRowsDialog extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      currentClass: null,
+      currentColumn: null,
+      touchableColumns: [],
+      targetObjectId: '',
+      objectIds: [],
+    };
+
+    this.handleConfirm = this.handleConfirm.bind(this);
+    this.handleClassChange = this.handleClassChange.bind(this);
+    this.handleColumnChange = this.handleColumnChange.bind(this);
+    this.handleTargetObjectIdChange = this.handleTargetObjectIdChange.bind(this);
+  }
+
+  componentWillMount() {
+    const { selection, classes, onSelectClass } = this.props;
+    if (selection) {
+      const currentClass = classes[0];
+      const objectIds = [];
+      for (const objectId in selection) {
+        objectIds.push(objectId);
+      }
+      const touchableColumns = onSelectClass(currentClass);
+      const currentColumn = touchableColumns[0];
+      this.setState({
+        currentClass: currentClass,
+        touchableColumns,
+        currentColumn,
+        objectIds,
+      });
+    }
+  }
+
+  handleTargetObjectIdChange(targetObjectId) {
+    this.setState({ targetObjectId });
+  }
+
+  handleConfirm() {
+    const {
+      currentClass,
+      currentColumn,
+      targetObjectId,
+      objectIds,
+    } = this.state;
+    return this.props.onConfirm(currentClass, targetObjectId, currentColumn, objectIds);
+  }
+
+  handleClassChange(className) {
+    const touchableColumns = this.props.onSelectClass(className);
+    this.setState({
+      currentClass: className,
+      touchableColumns,
+      currentColumn: touchableColumns[0],
+    });
+  }
+
+  handleColumnChange(column) {
+    this.setState({
+      currentColumn: column,
+    });
+  }
+
+  render() {
+    const {
+      relation,
+      onCancel,
+      classes,
+    } = this.props;
+    let targetRelationSelector;
+    let targetEntityIdInsert;
+      if (this.state.touchableColumns.length) {
+        targetRelationSelector = (
+          <Field
+            label={
+              <Label
+                text="Target Relation"
+                description="Target class's relation column"
+              />
+            }
+            input={
+              <Dropdown
+                value={this.state.currentColumn}
+                onChange={this.handleColumnChange}
+              >
+                {this.state.touchableColumns.map(column => (
+                  <Option key={column} value={column}>
+                    {column}
+                  </Option>
+                ))}
+              </Dropdown>
+            }
+          />
+        );
+      }
+      if (this.state.currentColumn) {
+        targetEntityIdInsert = (
+          <Field
+            label={
+              <Label
+                text="Target objectId"
+                description={`${this.state.currentClass} objectId`}
+              />
+            }
+            input={
+              <TextInput
+                placeholder="ox0QZFl7eg, qs81Q72lTL, etc..."
+                value={this.state.targetObjectId}
+                onChange={this.handleTargetObjectIdChange}
+              />
+            }
+          />
+        );
+      }
+    return (
+      <FormModal
+        open
+        icon="plus"
+        iconSize={40}
+        title="Attach Selected Rows to Relation"
+        submitText="Attach"
+        inProgressText="Attaching ..."
+        onClose={this.props.onCancel}
+        onSubmit={this.handleConfirm}
+      >
+        <Field
+          label={
+            <Label
+              text="Target Class"
+              description="Target relation's parent class"
+            />
+          }
+          input={
+            <Dropdown
+              value={this.state.currentClass}
+              onChange={this.handleClassChange}
+            >
+              {classes.map(className => (
+                <Option key={className} value={className}>
+                  {SpecialClasses[className] || className}
+                </Option>
+              ))}
+            </Dropdown>
+          }
+        />
+        {targetRelationSelector}
+        {targetEntityIdInsert}
+      </FormModal>
+    );
+  }
+}