feat: add import dialog

Author: dblythy

src/components/FileEditor/FileEditor.react.js

@@ -80,7 +80,7 @@ export default class FileEditor extends React.Component {
     return (
       <div ref={this.inputRef} style={{ minWidth: this.props.width, display: 'none' }} className={styles.editor}>
         <a className={styles.upload}>
-          <input ref={this.fileInputRef} id='fileInput' type='file' onChange={this.handleChange.bind(this)} />
+          <input ref={this.fileInputRef} id='fileInput' type='file' onChange={this.handleChange.bind(this)} accept={this.props.accept} />
           <span>{file ? 'Replace file' : 'Upload file'}</span>
         </a>
       </div>

src/components/Modal/Modal.scss

@@ -43,7 +43,7 @@
   position: absolute;
   font-size: 14px;
   color: white;
-  top: 52px;
+  top: 56px;
   left: 28px;
 }
 

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

@@ -16,6 +16,7 @@ import DeleteRowsDialog                   from 'dashboard/Data/Browser/DeleteRow
 import DropClassDialog                    from 'dashboard/Data/Browser/DropClassDialog.react';
 import EmptyState                         from 'components/EmptyState/EmptyState.react';
 import ExportDialog                       from 'dashboard/Data/Browser/ExportDialog.react';
+import ImportDialog                       from 'dashboard/Data/Browser/ImportDialog.react';
 import AttachRowsDialog                   from 'dashboard/Data/Browser/AttachRowsDialog.react';
 import AttachSelectedRowsDialog           from 'dashboard/Data/Browser/AttachSelectedRowsDialog.react';
 import CloneSelectedRowsDialog            from 'dashboard/Data/Browser/CloneSelectedRowsDialog.react';
@@ -56,6 +57,7 @@ class Browser extends DashboardView {
       showRemoveColumnDialog: false,
       showDropClassDialog: false,
       showExportDialog: false,
+      showImportDialog: false,
       showAttachRowsDialog: false,
       showEditRowDialog: false,
       showPointerKeyDialog: false,
@@ -101,6 +103,7 @@ 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.login = this.login.bind(this);
     this.logout = this.logout.bind(this);
     this.toggleMasterKeyUsage = this.toggleMasterKeyUsage.bind(this);
@@ -277,6 +280,10 @@ class Browser extends DashboardView {
     this.setState({ showExportDialog: true });
   }
 
+  showImport() {
+    this.setState({ showImportDialog: true });
+  }
+
   async login(username, password) {
     if (Parse.User.current()) {
       await Parse.User.logOut();
@@ -1089,6 +1096,7 @@ class Browser extends DashboardView {
       this.state.showRemoveColumnDialog ||
       this.state.showDropClassDialog ||
       this.state.showExportDialog ||
+      this.state.showImportDialog ||
       this.state.rowsToDelete ||
       this.state.showAttachRowsDialog ||
       this.state.showAttachSelectedRowsDialog ||
@@ -1539,6 +1547,7 @@ class Browser extends DashboardView {
             onExport={this.showExport}
             onChangeCLP={this.handleCLPChange}
             onRefresh={this.refresh}
+            onImport={this.showImport}
             onAttachRows={this.showAttachRowsDialog}
             onAttachSelectedRows={this.showAttachSelectedRowsDialog}
             onCloneSelectedRows={this.showCloneSelectedRowsDialog}
@@ -1659,7 +1668,15 @@ class Browser extends DashboardView {
           onCancel={() => this.setState({ showExportDialog: false })}
           onConfirm={() => this.exportClass(className)} />
       );
-    } else if (this.state.showAttachRowsDialog) {
+    }
+    else if (this.state.showImportDialog) {
+      extras = (
+        <ImportDialog
+          className={className}
+          onCancel={() => this.setState({ showImportDialog: false })}
+          onConfirm={() => this.exportClass(className)} />
+      );
+    }else if (this.state.showAttachRowsDialog) {
       extras = (
         <AttachRowsDialog
           relation={this.state.relation}

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

@@ -46,6 +46,7 @@ let BrowserToolbar = ({
   onDropClass,
   onChangeCLP,
   onRefresh,
+  onImport,
   onEditPermissions,
   hidePerms,
   isUnique,
@@ -260,6 +261,11 @@ let BrowserToolbar = ({
         </BrowserMenu>
       )}
       {onAddRow && <div className={styles.toolbarSeparator} />}
+      <a className={classes.join(' ')} onClick={isPendingEditCloneRows ? null : onImport}>
+        <Icon name="up-solid" width={14} height={14} />
+        <span>Import</span>
+      </a>
+      <div className={styles.toolbarSeparator} />
       <a className={classes.join(' ')} onClick={isPendingEditCloneRows ? null : onRefresh}>
         <Icon name="refresh-solid" width={14} height={14} />
         <span>Refresh</span>

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

@@ -0,0 +1,97 @@
+/*
+ * 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 Modal          from 'components/Modal/Modal.react';
+import FileEditor     from 'components/FileEditor/FileEditor.react';
+import React          from 'react';
+import Pill from 'components/Pill/Pill.react';
+import getFileName from 'lib/getFileName';
+import { CurrentApp } from 'context/currentApp';
+
+export default class ImportDialog extends React.Component {
+  static contextType = CurrentApp;
+  constructor() {
+    super();
+    this.state = {
+      progress: undefined,
+      file: null,
+      showFileEditor: false
+    };
+  }
+
+  componentWillMount() {
+    this.context.getExportProgress().then((progress) => {
+      this.setState({ progress });
+    });
+  }
+
+  inProgress() {
+    if (this.state.progress === undefined) {
+      return false;
+    }
+    let found = false;
+    if (Array.isArray(this.state.progress)) {
+      this.state.progress.forEach((obj) => {
+        if (obj.id === this.props.className) {
+          found = true;
+        }
+      });
+    }
+    return found;
+  }
+
+  openFileEditor() {
+    this.setState({
+      showFileEditor: true
+    });
+  }
+
+  hideFileEditor(file) {
+    this.setState({
+      showFileEditor: false,
+      file
+    });
+  }
+
+  render() {
+    let inProgress = this.inProgress();
+    return (
+      <div>
+      <Modal
+        type={Modal.Types.INFO}
+        icon='up-outline'
+        iconSize={40}
+        title={`Import Data into ${this.props.className}`}
+        subtitle='Note: If rows have a className, they will be imported into that class.'
+        confirmText='Import'
+        cancelText='Cancel'
+        disabled={!this.state.file}
+        buttonsInCenter={true}
+        onCancel={this.props.onCancel}
+        onConfirm={this.props.onConfirm}>
+          <div style={{ padding: '25px' }}>
+              {this.state.file && <Pill value={getFileName(this.state.file) }/>}
+              <div style={{ cursor: 'pointer' }}>
+                <Pill
+                  value={this.state.file ? 'Change file' : 'Select file'}
+                  onClick={() => this.openFileEditor()}
+                />
+                {this.state.showFileEditor && (
+                  <FileEditor
+                    value={this.state.file}
+                    accept='.json,.csv'
+                    onCommit={(file) => this.hideFileEditor(file)}
+                    onCancel={() => this.hideFileEditor()}
+                  />
+                )}
+              </div>
+            </div>
+      </Modal>
+        </div>
+    );
+  }
+}