Add/relation viewer (#452)

* Update improve Browser for relation

* update: DataBrowser relation viewer has url
* update: DataBrowser relation viewer can add row
* update: DataBrowser relation viewer can go back

* Add DataBrowser attach existing one to relation

* update: DeleteRowsDialog messsage is more clear
* update: AttachRowsDialog can add existing row by objectId

* Lint unnecessary

* Update attach rows to relation logic

* update: after attaching, it will not refetch the relation and add state.data.
* lint: remove direct mutating state, make const var to let

* Update data fetching logic

* update: merge data fetching logic of `componentWillMount` and `componentWillReceiveProps`.
* shows back button if filter applied
* lint many things. (you can blame it)

* Update AttachRowsDialog changed FormModal from Modal

* fixed: typos
* added: create and attach buttons for relation viewer

Author: ellemedit

src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.react.js

@@ -61,17 +61,17 @@ export default class DataBrowserHeaderBar extends React.Component {
       finalStyle.background = 'rgba(224,224,234,0.10)';
     }
     elements.push(
-      <div key='add' className={styles.addColumn} style={finalStyle}>
-        {readonly ?
-          null :
+      readonly ? 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>
+          </a>
+        </div>
+      )
     );
 
     return <div className={styles.bar}>{elements}</div>;

src/components/EmptyState/EmptyState.react.js

@@ -35,7 +35,15 @@ let ctaButton = (cta, action) => {
   }
 }
 
-let EmptyState = ({ icon='', title='', description='', cta='', action=()=>{}}) => (
+let EmptyState = ({
+  icon='',
+  title='',
+  description='',
+  cta='',
+  action=() => {},
+  secondaryCta='',
+  secondaryAction=() => {},
+}) => (
   <div className={center}>
     <div className={styles.icon}>
       <Icon
@@ -47,6 +55,8 @@ let EmptyState = ({ icon='', title='', description='', cta='', action=()=>{}}) =
     <div className={styles.title}>{title}</div>
     <div className={styles.description}>{description}</div>
     {ctaButton(cta, action)}
+    {secondaryCta && ' '}
+    {ctaButton(secondaryCta, secondaryAction)}
   </div>
 );
 
@@ -68,6 +78,12 @@ EmptyState.propTypes = {
   action: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).describe(
     'An href link or a click handler that is forwarded to the CTA button.'
   ),
+  secondaryCta: PropTypes.string.describe(
+    'The text that appears in the secondary CTA button.'
+  ),
+  secondaryAction: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).describe(
+    'An href link or a click handler that is forwarded to the secondary CTA button.'
+  ),
 };
 
 export default EmptyState;

src/components/Toolbar/Toolbar.react.js

@@ -7,31 +7,59 @@
  */
 import PropTypes from 'lib/PropTypes';
 import React     from 'react';
+import Icon      from 'components/Icon/Icon.react';
 import styles    from 'components/Toolbar/Toolbar.scss';
+import history   from 'dashboard/history';
 
-let Toolbar = (props) => (
-  <div className={styles.toolbar}>
-    <div className={styles.title}>
-      <div className={styles.section}>{props.section}</div>
-      <div>
-        <span className={styles.subsection}>
-          {props.subsection}
-        </span>
-        <span className={styles.details}>
-          {props.details}
-        </span>
+const goBack = () => history.goBack();
+
+let Toolbar = (props) => {
+  let backButton;
+  if (props.relation || (props.filters && props.filters.size)) {
+    backButton = (
+      <a
+        className={styles.iconButton}
+        onClick={goBack}
+      >
+        <Icon
+          width={32}
+          height={32}
+          fill="#ffffff"
+          name="left-outline"
+        />
+      </a>
+    );
+  }
+  return (
+    <div className={styles.toolbar}>
+      <div className={styles.title}>
+        <div className={styles.nav}>
+          {backButton}
+        </div>
+        <div className={styles.titleText}>
+          <div className={styles.section}>{props.section}</div>
+          <div>
+            <span className={styles.subsection}>
+              {props.subsection}
+            </span>
+            <span className={styles.details}>
+              {props.details}
+            </span>
+          </div>
+        </div>
+      </div>
+      <div className={styles.actions}>
+        {props.children}
       </div>
     </div>
-    <div className={styles.actions}>
-      {props.children}
-    </div>
-  </div>
-);
+  );
+};
 
 Toolbar.propTypes = {
   section: PropTypes.string,
   subsection: PropTypes.string,
-  details: PropTypes.string
+  details: PropTypes.string,
+  relation: PropTypes.object,
 };
 
 export default Toolbar;

src/components/Toolbar/Toolbar.scss

@@ -24,13 +24,27 @@
   }
 }
 
-
 .title {
   position: absolute;
   left: 14px;
   bottom: 10px;
 }
 
+.nav {
+  display: inline-block;
+}
+
+.iconButton {
+  display: block;
+  padding-top: 10px;
+  padding-right: 10px;
+  cursor: pointer;
+}
+
+.titleText {
+  display: inline-block;
+}
+
 .section {
   @include DosisFont;
   color: #757985;

src/dashboard/Dashboard.js

@@ -212,6 +212,7 @@ class Dashboard extends React.Component {
 
           <Route path='browser' component={false ? SchemaOverview : Browser} /> //In progress features. Change false to true to work on this feature.
           <Route path='browser/:className' component={Browser} />
+          <Route path='browser/:className/:entityId/:relationName' component={Browser} />
 
           <Route path='cloud_code' component={CloudCode} />
           <Route path='cloud_code/*' component={CloudCode} />

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

@@ -0,0 +1,78 @@
+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 Parse from 'parse';
+
+export default class AttachRowsDialog extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      objectIds: '',
+    };
+
+    this.handleObjectIdsChange = this.handleObjectIdsChange.bind(this);
+    this.handleConfirm = this.handleConfirm.bind(this);
+  }
+
+  handleObjectIdsChange(objectIds) {
+    this.setState({ objectIds });
+  }
+
+  handleConfirm() {
+    const objectIds = this.state.objectIds.split(',').reduce((resourceIds, targetResourceId) => {
+      const objectId = targetResourceId && targetResourceId.trim();
+      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;
+  }
+
+  render() {
+    const {
+      relation,
+      onCancel,
+      onConfirm,
+    } = this.props;
+    return (
+      <FormModal
+        icon="plus"
+        iconSize={40}
+        title="Attach Rows"
+        subtitle={`Attach existing rows from ${relation.targetClassName}`}
+        onClose={this.props.onCancel}
+        onSubmit={this.handleConfirm}
+        open
+        submitText="Attach"
+        inProgressText="Attaching ..."
+      >
+        <Field
+          label={
+            <Label
+              text="objectIds"
+              description={`IDs of ${relation.targetClassName} rows to attach`}
+            />
+          }
+          input={
+            <TextInput
+              placeholder="ox0QZFl7eg, qs81Q72lTL, etc..."
+              value={this.state.objectIds}
+              onChange={this.handleObjectIdsChange}
+            />
+          }
+        />
+      </FormModal>
+    );
+  }
+}