feat: add import dialog

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>
+ );
+ }
+}