feat: Add schema export (#2362)

Author: dblythy

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

@@ -21,6 +21,7 @@ import AttachSelectedRowsDialog           from 'dashboard/Data/Browser/AttachSel
 import CloneSelectedRowsDialog            from 'dashboard/Data/Browser/CloneSelectedRowsDialog.react';
 import EditRowDialog                      from 'dashboard/Data/Browser/EditRowDialog.react';
 import ExportSelectedRowsDialog           from 'dashboard/Data/Browser/ExportSelectedRowsDialog.react';
+import ExportSchemaDialog                 from 'dashboard/Data/Browser/ExportSchemaDialog.react';
 import { List, Map }                      from 'immutable';
 import Notification                       from 'dashboard/Data/Browser/Notification.react';
 import Parse                              from 'parse';
@@ -56,6 +57,7 @@ class Browser extends DashboardView {
       showRemoveColumnDialog: false,
       showDropClassDialog: false,
       showExportDialog: false,
+      showExportSchemaDialog: false,
       showAttachRowsDialog: false,
       showEditRowDialog: false,
       showPointerKeyDialog: false,
@@ -88,7 +90,7 @@ class Browser extends DashboardView {
       requiredColumnFields: [],
 
       useMasterKey: true,
-      currentUser: Parse.User.current()
+      currentUser: Parse.User.current(),
     };
 
     this.prefetchData = this.prefetchData.bind(this);
@@ -114,6 +116,7 @@ class Browser extends DashboardView {
     this.confirmCloneSelectedRows = this.confirmCloneSelectedRows.bind(this);
     this.cancelCloneSelectedRows = this.cancelCloneSelectedRows.bind(this);
     this.showExportSelectedRowsDialog = this.showExportSelectedRowsDialog.bind(this);
+    this.showExportSchemaDialog = this.showExportSchemaDialog.bind(this);
     this.confirmExportSelectedRows = this.confirmExportSelectedRows.bind(this);
     this.cancelExportSelectedRows = this.cancelExportSelectedRows.bind(this);
     this.getClassRelationColumns = this.getClassRelationColumns.bind(this);
@@ -326,6 +329,37 @@ class Browser extends DashboardView {
     });
   }
 
+  async exportSchema(className, all) {
+    try {
+      this.showNote('Exporting schema...');
+      this.setState({ showExportSchemaDialog: false });
+      let schema = [];
+      if (all) {
+        schema = await Parse.Schema.all();
+      } else {
+        schema = await new Parse.Schema(className).get();
+      }
+      const element = document.createElement('a');
+      const file = new Blob(
+        [
+          JSON.stringify(
+            schema,
+            null,
+            2,
+          ),
+        ],
+        { type: 'application/json' }
+      );
+      element.href = URL.createObjectURL(file);
+      element.download = `${all ? 'schema' : className}.json`;
+      document.body.appendChild(element); // Required for this to work in FireFox
+      element.click();
+      document.body.removeChild(element);
+    } catch (msg) {
+      this.showNote(msg, true);
+    }
+  }
+
   newColumn(payload, required) {
     return this.props.schema.dispatch(ActionTypes.ADD_COLUMN, payload)
       .then(() => {
@@ -1089,6 +1123,7 @@ class Browser extends DashboardView {
       this.state.showRemoveColumnDialog ||
       this.state.showDropClassDialog ||
       this.state.showExportDialog ||
+      this.state.showExportSchema ||
       this.state.rowsToDelete ||
       this.state.showAttachRowsDialog ||
       this.state.showAttachSelectedRowsDialog ||
@@ -1249,6 +1284,12 @@ class Browser extends DashboardView {
     });
   }
 
+  showExportSchemaDialog() {
+    this.setState({
+      showExportSchemaDialog: true
+    })
+  }
+
   cancelExportSelectedRows() {
     this.setState({
       rowsToExport: null
@@ -1545,6 +1586,7 @@ class Browser extends DashboardView {
             onEditSelectedRow={this.showEditRowDialog}
             onEditPermissions={this.onDialogToggle}
             onExportSelectedRows={this.showExportSelectedRowsDialog}
+            onExportSchema={this.showExportSchemaDialog}
 
             onSaveNewRow={this.saveNewRow}
             onShowPointerKey={this.showPointerKeyDialog}
@@ -1659,6 +1701,14 @@ class Browser extends DashboardView {
           onCancel={() => this.setState({ showExportDialog: false })}
           onConfirm={() => this.exportClass(className)} />
       );
+    } else if (this.state.showExportSchemaDialog) {
+      extras = (
+        <ExportSchemaDialog
+          className={className}
+          schema={this.props.schema.data.get('classes')}
+          onCancel={() => this.setState({ showExportSchemaDialog: false })}
+          onConfirm={(...args) => this.exportSchema(...args)} />
+      );
     } else if (this.state.showAttachRowsDialog) {
       extras = (
         <AttachRowsDialog

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

@@ -40,6 +40,7 @@ let BrowserToolbar = ({
   onAttachSelectedRows,
   onCloneSelectedRows,
   onExportSelectedRows,
+  onExportSchema,
   onExport,
   onRemoveColumn,
   onDeleteRows,
@@ -257,6 +258,10 @@ let BrowserToolbar = ({
             text={'Export all rows'}
             onClick={() => onExportSelectedRows({ '*': true })}
           />
+          <MenuItem
+            text={'Export schema'}
+            onClick={() => onExportSchema()}
+          />
         </BrowserMenu>
       )}
       {onAddRow && <div className={styles.toolbarSeparator} />}

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

@@ -0,0 +1,65 @@
+/*
+ * 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 React       from 'react';
+import Dropdown    from 'components/Dropdown/Dropdown.react';
+import Field       from 'components/Field/Field.react';
+import Label       from 'components/Label/Label.react';
+import Option      from 'components/Dropdown/Option.react';
+import Toggle      from 'components/Toggle/Toggle.react';
+
+export default class ExportSchemaDialog extends React.Component {
+  constructor(props) {
+    super();
+    const classes = Object.keys(props.schema.toObject()).sort();
+    classes.sort((a, b) => {
+      if (a[0] === '_' && b[0] !== '_') {
+        return -1;
+      }
+      if (b[0] === '_' && a[0] !== '_') {
+        return 1;
+      }
+      return a.toUpperCase() < b.toUpperCase() ? -1 : 1;
+    });
+    this.state = {
+      all: false,
+      className: props.className,
+      classes
+    };
+  }
+
+
+  render() {
+    return (
+      <Modal
+        type={Modal.Types.INFO}
+        icon='down-outline'
+        iconSize={40}
+        title={`Export SCHEMA for ${this.state.className}`}
+        confirmText='Export'
+        cancelText='Cancel'
+        onCancel={this.props.onCancel}
+        onConfirm={() => this.props.onConfirm(this.state.className, this.state.all)}>
+        {!this.state.all &&
+          <Field
+            label={<Label text='Select class' />}
+            input={
+              <Dropdown
+                value={this.state.className}
+                onChange={(className) => this.setState({ className })}>
+                {this.state.classes.map(schema => <Option value={schema} key={schema}>{schema}</Option>)}
+              </Dropdown>
+            } />
+        }
+        <Field
+          label={<Label text='Export all classes' />}
+          input={<Toggle value={this.state.all} type={Toggle.Types.YES_NO} onChange={(all) => {this.setState({all})}} />} />
+      </Modal>
+    );
+  }
+}