UI for importing and exporting data

davimacedo · davimacedo · commit 0482e4da9995 · 2016-11-13T20:25:24.000-02:00
diff --git a/.gitignore b/.gitignore
@@ -9,4 +9,5 @@ npm-debug.log
 // vim .swp
 *.swp
 .env
+
 .idea/
diff --git a/src/dashboard/Data/Browser/Browser.react.js b/src/dashboard/Data/Browser/Browser.react.js
@@ -15,6 +15,8 @@ import { DefaultColumns, SpecialClasses } from 'lib/Constants';
 import DeleteRowsDialog                   from 'dashboard/Data/Browser/DeleteRowsDialog.react';
 import DropClassDialog                    from 'dashboard/Data/Browser/DropClassDialog.react';
 import EmptyState                         from 'components/EmptyState/EmptyState.react';
+import ImportDialog                       from 'dashboard/Data/Browser/ImportDialog.react';
+import ImportRelationDialog               from 'dashboard/Data/Browser/ImportRelationDialog.react';
 import ExportDialog                       from 'dashboard/Data/Browser/ExportDialog.react';
 import AttachRowsDialog                   from 'dashboard/Data/Browser/AttachRowsDialog.react';
 import AttachSelectedRowsDialog           from 'dashboard/Data/Browser/AttachSelectedRowsDialog.react';
@@ -45,6 +47,8 @@ export default class Browser extends DashboardView {
       showAddColumnDialog: false,
       showRemoveColumnDialog: false,
       showDropClassDialog: false,
+      showImportDialog: false,
+      showImportRelationDialog: false,
       showExportDialog: false,
       showAttachRowsDialog: false,
       rowsToDelete: null,
@@ -74,6 +78,8 @@ export default class Browser extends DashboardView {
     this.showDeleteRows = this.showDeleteRows.bind(this);
     this.showDropClass = this.showDropClass.bind(this);
     this.showExport = this.showExport.bind(this);
+    this.showImport = this.showImport.bind(this);
+    this.showImportRelation = this.showImportRelation.bind(this);
     this.showAttachRowsDialog = this.showAttachRowsDialog.bind(this);
     this.cancelAttachRows = this.cancelAttachRows.bind(this);
     this.confirmAttachRows = this.confirmAttachRows.bind(this);
@@ -201,6 +207,14 @@ export default class Browser extends DashboardView {
     this.setState({ showDropClassDialog: true });
   }
 
+  showImport() {
+    this.setState({ showImportDialog: true });
+  }
+
+  showImportRelation() {
+    this.setState({ showImportRelationDialog: true });
+  }
+
   showExport() {
     this.setState({ showExportDialog: true });
   }
@@ -228,6 +242,32 @@ export default class Browser extends DashboardView {
     });
   }
 
+  importClass(className, file) {
+    return this.context.currentApp.importData(className, file)
+      .then((res) => {
+        return res;
+      }, (error) => {
+        console.log(error);
+        return Promise.resolve({
+          error: true,
+          message: error.message
+        });
+      });
+  }
+
+  importRelation(className, relationName, file) {
+    return this.context.currentApp.importRelationData(className, relationName, file)
+      .then((res) => {
+        return res;
+      }, (error) => {
+        console.log(error);
+        return Promise.resolve({
+          error: true,
+          message: error.message
+        });
+      });
+  }
+
   exportClass(className) {
     this.context.currentApp.exportClass(className).always(() => {
       this.setState({ showExportDialog: false });
@@ -287,6 +327,7 @@ export default class Browser extends DashboardView {
       newObject: null,
       lastMax: -1,
       selection: {},
+      relation: null
     };
     if (relation) {
       await this.setState(initialState);
@@ -424,6 +465,8 @@ export default class Browser extends DashboardView {
   setRelation(relation, filters) {
     this.setState({
       relation: relation,
+      relationCount: 0,
+      selection: {},
     }, () => {
       let filterQueryString;
       if (filters && filters.size) {
@@ -595,6 +638,8 @@ export default class Browser extends DashboardView {
       this.state.showAddColumnDialog ||
       this.state.showRemoveColumnDialog ||
       this.state.showDropClassDialog ||
+      this.state.showImportDialog ||
+      this.state.showImportRelationDialog ||
       this.state.showExportDialog ||
       this.state.rowsToDelete ||
       this.state.showAttachRowsDialog ||
@@ -793,6 +838,8 @@ export default class Browser extends DashboardView {
             onDeleteRows={this.showDeleteRows}
             onDropClass={this.showDropClass}
             onExport={this.showExport}
+            onImport={this.showImport}
+            onImportRelation={this.showImportRelation}
             onChangeCLP={this.handleCLPChange}
             onRefresh={this.refresh}
             onAttachRows={this.showAttachRowsDialog}
@@ -866,6 +913,20 @@ export default class Browser extends DashboardView {
           })}
           onConfirm={() => this.dropClass(className)} />
       );
+    } else if (this.state.showImportDialog) {
+      extras = (
+          <ImportDialog
+              className={className}
+              onCancel={() => this.setState({ showImportDialog: false })}
+              onConfirm={(file) => this.importClass(className, file)} />
+      );
+    } else if (this.state.showImportRelationDialog) {
+      extras = (
+          <ImportRelationDialog
+              className={className}
+              onCancel={() => this.setState({ showImportRelationDialog: false })}
+              onConfirm={(relationName, file) => this.importRelation(className, relationName, file)} />
+      );
     } else if (this.state.showExportDialog) {
       extras = (
         <ExportDialog
diff --git a/src/dashboard/Data/Browser/BrowserToolbar.react.js b/src/dashboard/Data/Browser/BrowserToolbar.react.js
@@ -33,6 +33,8 @@ let BrowserToolbar = ({
   onAddClass,
   onAttachRows,
   onAttachSelectedRows,
+  onImport,
+  onImportRelation,
   onExport,
   onRemoveColumn,
   onDeleteRows,
@@ -42,6 +44,7 @@ let BrowserToolbar = ({
   hidePerms,
 
   enableDeleteAllRows,
+  enableImport,
   enableExportClass,
   enableSecurityDialog,
 }) => {
@@ -108,7 +111,9 @@ let BrowserToolbar = ({
         <MenuItem text='Delete a column' onClick={onRemoveColumn} />
         {enableDeleteAllRows ? <MenuItem text='Delete all rows' onClick={() => onDeleteRows({ '*': true })} /> : <noscript />}
         <MenuItem text='Delete this class' onClick={onDropClass} />
-        {enableExportClass ? <Separator /> : <noscript />}
+        {enableImport || enableExportClass ? <Separator /> : <noscript />}
+        {enableImport ? <MenuItem text='Import data' onClick={onImport} /> : <noscript />}
+        {enableImport ? <MenuItem text='Import relation data' onClick={onImportRelation} /> : <noscript />}
         {enableExportClass ? <MenuItem text='Export this data' onClick={onExport} /> : <noscript />}
       </BrowserMenu>
     );
diff --git a/src/dashboard/Data/Browser/DataBrowser.react.js b/src/dashboard/Data/Browser/DataBrowser.react.js
@@ -207,6 +207,7 @@ export default class DataBrowser extends React.Component {
           setCurrent={this.setCurrent.bind(this)}
           enableDeleteAllRows={this.context.currentApp.serverInfo.features.schemas.clearAllDataFromClass}
           enableExportClass={this.context.currentApp.serverInfo.features.schemas.exportClass}
+          enableImport={this.context.currentApp.serverInfo.features.schemas.import}
           enableSecurityDialog={this.context.currentApp.serverInfo.features.schemas.editClassLevelPermissions}
           {...other}/>
       </div>
diff --git a/src/dashboard/Data/Browser/ImportDialog.react.js b/src/dashboard/Data/Browser/ImportDialog.react.js
@@ -0,0 +1,77 @@
+/*
+ * 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 ParseApp from 'lib/ParseApp';
+import Modal    from 'components/Modal/Modal.react';
+import Field    from 'components/Field/Field.react';
+import TextInput from 'components/TextInput/TextInput.react';
+import FileInput from 'components/FileInput/FileInput.react';
+import Label    from 'components/Label/Label.react';
+
+export default class ImportDialog extends React.Component {
+  constructor() {
+      super();
+      this.state = {
+        file: undefined,
+        startedImport: false,
+        errorMessage: null
+      };
+  }
+
+  valid() {
+    if (this.state.file != undefined && !this.state.startedImport) {
+      return true;
+    }
+    return false;
+  }
+
+  render() {
+    return (
+      <Modal
+        type={Modal.Types.INFO}
+        icon='down-outline'
+        iconSize={40}
+        title='Import data'
+        subtitle={'You will receive an e-mail once your data is imported'}
+        confirmText='Import'
+        cancelText='Cancel'
+        disabled={!this.valid()}
+        buttonsInCenter={true}
+        onCancel={this.props.onCancel}
+        onConfirm={() => {
+            this.props.onConfirm(this.state.file)
+            .then((res) => {
+              if (res.error) {
+                this.setState({ errorMessage: res.message });
+              } else {
+                this.props.onCancel();
+              }
+            });
+        }}>
+
+        <Field
+            label={
+                <Label
+                    text='Select a JSON file with your class data' />}
+            input={
+                <FileInput
+                    onChange={(file) => {this.setState({ file: file });}} />}
+        />
+        {this.state.startedImport ?
+          <div style={{ padding: 20 }}>We are importing your data. You will be notified by e-mail once it is completed.</div> : null }
+        {this.state.errorMessage ?
+          <div style={{ padding: 20, color: '#ff395e' }}>Import Request failed with the following error: "{ this.state.errorMessage }".</div> : null }
+      </Modal>
+
+    );
+  }
+}
+
+ImportDialog.contextTypes = {
+  currentApp: React.PropTypes.instanceOf(ParseApp)
+};
diff --git a/src/dashboard/Data/Browser/ImportRelationDialog.react.js b/src/dashboard/Data/Browser/ImportRelationDialog.react.js
@@ -0,0 +1,83 @@
+/*
+ * 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 ParseApp from 'lib/ParseApp';
+import Modal    from 'components/Modal/Modal.react';
+import Field    from 'components/Field/Field.react';
+import TextInput from 'components/TextInput/TextInput.react';
+import FileInput from 'components/FileInput/FileInput.react';
+import Label    from 'components/Label/Label.react';
+
+export default class ImportRelationDialog extends React.Component {
+  constructor() {
+      super();
+      this.state = {
+        relationName: '',
+        file: undefined,
+        startedImport: false
+      };
+  }
+
+  valid() {
+    if (this.state.relationName != '' && this.state.file != undefined && !this.state.startedImport) {
+      return true;
+    }
+    return false;
+  }
+
+  render() {
+    return (
+      <Modal
+        type={Modal.Types.INFO}
+        icon='down-outline'
+        iconSize={40}
+        title='Import relation data'
+        subtitle={'You will receive an e-mail once your data is imported'}
+        confirmText='Import'
+        cancelText='Cancel'
+        disabled={!this.valid()}
+        buttonsInCenter={true}
+        onCancel={this.props.onCancel}
+        onConfirm={() => {
+            this.props.onConfirm(this.state.relationName, this.state.file)
+              .then((res) => {
+                this.props.onCancel();
+            });
+        }}>
+
+        <Field
+            label={
+              <Label
+                  text='Enter the relation name' />
+            }
+            input={
+              <TextInput
+                  placeholder='Relation name'
+                  value={this.state.relationName}
+                  onChange={(relationName) => this.setState({ relationName: relationName })} />
+            } />
+        <Field
+            label={
+                <Label
+                    text='Select a JSON file with your relation data' />}
+            input={
+                <FileInput
+                    onChange={(file) => {this.setState({ file: file });}} />}
+        />
+        {this.state.startedImport ?
+          <div style={{ padding: 20 }}>We are importing your data. You will be notified by e-mail once it is completed.</div> : null }
+        {this.state.errorMessage ?
+          <div style={{ padding: 20, color: '#ff395e' }}>Import Request failed with the following error: "{ this.state.errorMessage }".</div> : null }
+      </Modal>
+    );
+  }
+}
+
+ImportRelationDialog.contextTypes = {
+  currentApp: React.PropTypes.instanceOf(ParseApp)
+};
diff --git a/src/lib/ParseApp.js b/src/lib/ParseApp.js

-Original file line number
+Diff line change
 // vim .swp
 *.swp
 .env
++
 .idea/