CSV Export of class data

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

@@ -20,6 +20,7 @@ import AttachRowsDialog                   from 'dashboard/Data/Browser/AttachRow
 import AttachSelectedRowsDialog           from 'dashboard/Data/Browser/AttachSelectedRowsDialog.react';
 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 history                            from 'dashboard/history';
 import { List, Map }                      from 'immutable';
 import Notification                       from 'dashboard/Data/Browser/Notification.react';
@@ -59,6 +60,7 @@ class Browser extends DashboardView {
       showAttachRowsDialog: false,
       showEditRowDialog: false,
       rowsToDelete: null,
+      rowsToExport: null,
 
       relation: null,
       counts: {},
@@ -100,6 +102,9 @@ class Browser extends DashboardView {
     this.showCloneSelectedRowsDialog = this.showCloneSelectedRowsDialog.bind(this);
     this.confirmCloneSelectedRows = this.confirmCloneSelectedRows.bind(this);
     this.cancelCloneSelectedRows = this.cancelCloneSelectedRows.bind(this);
+    this.showExportSelectedRowsDialog = this.showExportSelectedRowsDialog.bind(this);
+    this.confirmExportSelectedRows = this.confirmExportSelectedRows.bind(this);
+    this.cancelExportSelectedRows = this.cancelExportSelectedRows.bind(this);
     this.getClassRelationColumns = this.getClassRelationColumns.bind(this);
     this.showCreateClass = this.showCreateClass.bind(this);
     this.refresh = this.refresh.bind(this);
@@ -720,7 +725,8 @@ class Browser extends DashboardView {
       this.state.showAttachSelectedRowsDialog ||
       this.state.showCloneSelectedRowsDialog ||
       this.state.showEditRowDialog ||
-      this.state.showPermissionsDialog
+      this.state.showPermissionsDialog ||
+      this.state.showExportSelectedRowsDialog
     );
   }
 
@@ -831,6 +837,74 @@ class Browser extends DashboardView {
     });
   }
 
+  showExportSelectedRowsDialog(rows) {
+    this.setState({
+      rowsToExport: rows
+    });
+  }
+
+  cancelExportSelectedRows() {
+    this.setState({
+      rowsToExport: null
+    });
+  }
+
+  async confirmExportSelectedRows(rows) {
+    this.setState({ rowsToExport: null });
+    const className = this.props.params.className;
+    const query = new Parse.Query(className);
+
+    if (rows['*']) {
+      // Export all
+      query.limit(10000);
+    } else {
+      // Export selected
+      const objectIds = [];
+      for (const objectId in this.state.rowsToExport) {
+        objectIds.push(objectId);
+      }
+      query.containedIn('objectId', objectIds);
+    }
+
+    const classColumns = this.getClassColumns(className, false);
+    // create object with classColumns as property keys needed for ColumnPreferences.getOrder function
+    const columnsObject = {};
+    classColumns.forEach((column) => {
+      columnsObject[column.name] = column;
+    });
+    // get ordered list of class columns
+    const columns = ColumnPreferences.getOrder(
+      columnsObject,
+      this.context.currentApp.applicationId,
+      className
+    ).filter(column => column.visible);
+
+    const objects = await query.find({ useMasterKey: true });
+    let csvString = columns.map(column => column.name).join(',') + '\n';
+    for (const object of objects) {
+      const row = columns.map(column => {
+        const type = columnsObject[column.name].type;
+        if (column.name === 'objectId') {
+          return object.id;
+        } else if (type === 'Relation' || type === 'Pointer') {
+          return object.get(column.name).id;
+        } else {
+          return `"${object.get(column.name)}"`;
+        }
+      }).join(',');
+      csvString += row + '\n';
+    }
+
+    // Deliver to browser to download file
+    const element = document.createElement('a');
+    const file = new Blob([csvString], { type: 'text/csv' });
+    element.href = URL.createObjectURL(file);
+    element.download = `${className}.csv`;
+    document.body.appendChild(element); // Required for this to work in FireFox
+    element.click();
+    document.body.removeChild(element);
+  }
+
   getClassRelationColumns(className) {
     const currentClassName = this.props.params.className;
     return this.getClassColumns(className, false)
@@ -937,7 +1011,7 @@ class Browser extends DashboardView {
   onDialogToggle(opened){
     this.setState({showPermissionsDialog: opened});
   }
-  
+
   renderContent() {
     let browser = null;
     let className = this.props.params.className;
@@ -1007,6 +1081,7 @@ class Browser extends DashboardView {
             onCloneSelectedRows={this.showCloneSelectedRowsDialog}
             onEditSelectedRow={this.showEditRowDialog}
             onEditPermissions={this.onDialogToggle}
+            onExportSelectedRows={this.showExportSelectedRowsDialog}
 
             columns={columns}
             className={className}
@@ -1175,6 +1250,15 @@ class Browser extends DashboardView {
           schema={this.props.schema}
         />
       )
+    } else if (this.state.rowsToExport) {
+      extras = (
+        <ExportSelectedRowsDialog
+          className={SpecialClasses[className] || className}
+          selection={this.state.rowsToExport}
+          onCancel={this.cancelExportSelectedRows}
+          onConfirm={() => this.confirmExportSelectedRows(this.state.rowsToExport)}
+        />
+      );
     }
 
     let notification = null;

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

@@ -37,6 +37,7 @@ let BrowserToolbar = ({
   onAttachRows,
   onAttachSelectedRows,
   onCloneSelectedRows,
+  onExportSelectedRows,
   onExport,
   onRemoveColumn,
   onDeleteRows,
@@ -127,6 +128,16 @@ let BrowserToolbar = ({
           onClick={onCloneSelectedRows}
         />
         <Separator />
+        <MenuItem
+          disabled={!selectionLength}
+          text={`Export ${selectionLength <= 1 ? 'this row' : 'these rows'} to CSV`}
+          onClick={() => onExportSelectedRows(selection)}
+        />
+        <MenuItem
+          text={'Export all rows to CSV'}
+          onClick={() => onExportSelectedRows({ '*': true })}
+        />
+        <Separator />
         <MenuItem
           disabled={selectionLength === 0}
           text={selectionLength === 1 && !selection['*'] ? 'Delete this row' : 'Delete these rows'}

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

@@ -0,0 +1,41 @@
+/*
+ * 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';
+
+export default class ExportSelectedRowsDialog extends React.Component {
+  constructor() {
+    super();
+
+    this.state = {
+      confirmation: ''
+    };
+  }
+
+  valid() {
+    return true;
+  }
+
+  render() {
+    let selectionLength = Object.keys(this.props.selection).length;
+    return (
+      <Modal
+        type={Modal.Types.INFO}
+        icon='warn-outline'
+        title={this.props.selection['*'] ? 'Export all rows?' : (selectionLength === 1 ? 'Export this row?' : `Export ${selectionLength} rows?`)}
+        subtitle={this.props.selection['*'] ? 'INFO: Export to CSV has a limit of 10,000 rows.' : ''}
+        disabled={!this.valid()}
+        confirmText={'Yes export'}
+        cancelText={'Never mind, don\u2019t.'}
+        onCancel={this.props.onCancel}
+        onConfirm={this.props.onConfirm}>
+        {}
+      </Modal>
+    );
+  }
+}