Support for clone object (#946)

Author: dplewis

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

@@ -18,6 +18,7 @@ import EmptyState                         from 'components/EmptyState/EmptyState
 import ExportDialog                       from 'dashboard/Data/Browser/ExportDialog.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';
 import history                            from 'dashboard/history';
 import { List, Map }                      from 'immutable';
 import Notification                       from 'dashboard/Data/Browser/Notification.react';
@@ -86,6 +87,9 @@ class Browser extends DashboardView {
     this.showAttachSelectedRowsDialog = this.showAttachSelectedRowsDialog.bind(this);
     this.confirmAttachSelectedRows = this.confirmAttachSelectedRows.bind(this);
     this.cancelAttachSelectedRows = this.cancelAttachSelectedRows.bind(this);
+    this.showCloneSelectedRowsDialog = this.showCloneSelectedRowsDialog.bind(this);
+    this.confirmCloneSelectedRows = this.confirmCloneSelectedRows.bind(this);
+    this.cancelCloneSelectedRows = this.cancelCloneSelectedRows.bind(this);
     this.getClassRelationColumns = this.getClassRelationColumns.bind(this);
     this.showCreateClass = this.showCreateClass.bind(this);
     this.refresh = this.refresh.bind(this);
@@ -656,7 +660,8 @@ class Browser extends DashboardView {
       this.state.showExportDialog ||
       this.state.rowsToDelete ||
       this.state.showAttachRowsDialog ||
-      this.state.showAttachSelectedRowsDialog
+      this.state.showAttachSelectedRowsDialog ||
+      this.state.showCloneSelectedRowsDialog
     );
   }
 
@@ -732,6 +737,41 @@ class Browser extends DashboardView {
     });
   }
 
+  showCloneSelectedRowsDialog() {
+    this.setState({
+      showCloneSelectedRowsDialog: true,
+    });
+  }
+
+  cancelCloneSelectedRows() {
+    this.setState({
+      showCloneSelectedRowsDialog: false,
+    });
+  }
+
+  async confirmCloneSelectedRows() {
+    const objectIds = [];
+    for (const objectId in this.state.selection) {
+      objectIds.push(objectId);
+    }
+    const query = new Parse.Query(this.props.params.className);
+    query.containedIn('objectId', objectIds);
+    const objects = await query.find({ useMasterKey: true });
+    const toClone = [];
+    for (const object of objects) {
+      toClone.push(object.clone());
+    }
+    await Parse.Object.saveAll(toClone, { useMasterKey: true });
+    this.setState({
+      selection: {},
+      data: [
+        ...toClone,
+        ...this.state.data,
+      ],
+      showCloneSelectedRowsDialog: false,
+    });
+  }
+
   getClassRelationColumns(className) {
     const currentClassName = this.props.params.className;
     return this.getClassColumns(className, false)
@@ -883,6 +923,7 @@ class Browser extends DashboardView {
             onRefresh={this.refresh}
             onAttachRows={this.showAttachRowsDialog}
             onAttachSelectedRows={this.showAttachSelectedRowsDialog}
+            onCloneSelectedRows={this.showCloneSelectedRowsDialog}
 
             columns={columns}
             className={className}
@@ -978,6 +1019,15 @@ class Browser extends DashboardView {
           onConfirm={this.confirmAttachSelectedRows}
         />
       );
+    } else if (this.state.showCloneSelectedRowsDialog) {
+      extras = (
+        <CloneSelectedRowsDialog
+          className={className}
+          selection={this.state.selection}
+          onCancel={this.cancelCloneSelectedRows}
+          onConfirm={this.confirmCloneSelectedRows}
+        />
+      );
     }
 
     let notification = null;

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

@@ -33,6 +33,7 @@ let BrowserToolbar = ({
   onAddClass,
   onAttachRows,
   onAttachSelectedRows,
+  onCloneSelectedRows,
   onExport,
   onRemoveColumn,
   onDeleteRows,
@@ -101,6 +102,12 @@ let BrowserToolbar = ({
           onClick={onAttachSelectedRows}
         />
         <Separator />
+        <MenuItem
+          disabled={!selectionLength}
+          text={`Clone ${selectionLength <= 1 ? 'this row' : 'these rows'}`}
+          onClick={onCloneSelectedRows}
+        />
+        <Separator />
         <MenuItem
           disabled={selectionLength === 0}
           text={selectionLength === 1 && !selection['*'] ? 'Delete this row' : 'Delete these rows'}

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

@@ -0,0 +1,67 @@
+/*
+ * 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 Field     from 'components/Field/Field.react';
+import Label     from 'components/Label/Label.react';
+import Modal     from 'components/Modal/Modal.react';
+import React     from 'react';
+import TextInput from 'components/TextInput/TextInput.react';
+
+export default class CloneSelectedRowsDialog extends React.Component {
+  constructor() {
+    super();
+
+    this.state = {
+      confirmation: ''
+    };
+  }
+
+  valid() {
+    if (this.state.confirmation === this.props.className) {
+      return true;
+    }
+    if (!this.props.selection['*'] && Object.keys(this.props.selection).length < 10) {
+      return true;
+    }
+    return false;
+  }
+
+  render() {
+    let content = null;
+    let selectionLength = Object.keys(this.props.selection).length;
+    if (this.props.selection['*'] || selectionLength >= 10) {
+      content = (
+        <Field
+          label={
+            <Label
+              text='Confirm this action'
+              description='Enter the current class name to continue.' />
+          }
+          input={
+            <TextInput
+              placeholder='Current class name'
+              value={this.state.confirmation}
+              onChange={(confirmation) => this.setState({ confirmation })} />
+          } />
+      );
+    }
+    return (
+      <Modal
+        type={Modal.Types.DANGER}
+        icon='warn-outline'
+        title={this.props.selection['*'] ? 'Clone all rows?' : (selectionLength === 1 ? 'Clone this row?' : `Clone ${selectionLength} rows?`)}
+        subtitle={''}
+        disabled={!this.valid()}
+        confirmText={'Yes clone'}
+        cancelText={'Never mind, don\u2019t.'}
+        onCancel={this.props.onCancel}
+        onConfirm={this.props.onConfirm}>
+        {content}
+      </Modal>
+    );
+  }
+}