feat: Add support for confirmation dialog before script execution in data browser

src/components/BrowserCell/BrowserCell.react.js

@@ -15,16 +15,20 @@ import React, { Component }      from 'react';
 import styles                    from 'components/BrowserCell/BrowserCell.scss';
 import baseStyles                from 'stylesheets/base.scss';
 import * as ColumnPreferences    from 'lib/ColumnPreferences';
+import ExecuteScriptDialog       from 'dashboard/Data/Browser/ExecuteScriptDialog.react';
+
 export default class BrowserCell extends Component {
   constructor() {
     super();
 
     this.cellRef = React.createRef();
     this.copyableValue = undefined;
+    this.selectedScript = null;
     this.state = {
       showTooltip: false,
       content: null,
-      classes: []
+      classes: [],
+      showExecuteScriptDialog: false,
     };
   }
 
@@ -208,7 +212,7 @@ export default class BrowserCell extends Component {
   }
 
   shouldComponentUpdate(nextProps, nextState) {
-    if (nextState.showTooltip !== this.state.showTooltip || nextState.content !== this.state.content ) {
+    if (nextState.showTooltip !== this.state.showTooltip || nextState.content !== this.state.content || nextState.showExecuteScriptDialog !== this.state.showExecuteScriptDialog) {
       return true;
     }
     const shallowVerifyProps = [...new Set(Object.keys(this.props).concat(Object.keys(nextProps)))]
@@ -278,23 +282,20 @@ export default class BrowserCell extends Component {
       });
     }
 
+    const { className, objectId } = this.props;
     const validScripts = (this.props.scripts || []).filter(script => script.classes?.includes(this.props.className));
     if (validScripts.length) {
       onEditSelectedRow && contextMenuOptions.push({
         text: 'Scripts',
         items: validScripts.map(script => {
           return {
             text: script.title,
-            callback: async () => {
-              try {
-                const object = Parse.Object.extend(this.props.className).createWithoutData(this.props.objectId);
-                const response = await Parse.Cloud.run(script.cloudCodeFunction, {object: object.toPointer()}, {useMasterKey: true});
-                this.props.showNote(response || `${script.title} ran with object ${object.id}}`);
-                this.props.onRefresh();
-              } catch (e) {
-                this.props.showNote(e.message, true);
-                console.log(`Could not run ${script.title}: ${e}`);
-              }
+            callback: () => {
+              this.selectedScript = { ...script, className, objectId };
+              if(script.showConfirmationDialog)
+                this.toggleExecuteScriptDialog();
+              else
+                this.executeSript(script);
             }
           }
         })
@@ -304,6 +305,30 @@ export default class BrowserCell extends Component {
     return contextMenuOptions;
   }
 
+  async executeSript(script) {
+      try {
+        const object = Parse.Object.extend(
+          this.props.className
+        ).createWithoutData(this.props.objectId);
+        const response = await Parse.Cloud.run(
+          script.cloudCodeFunction,
+          { object: object.toPointer() },
+          { useMasterKey: true }
+        );
+        this.props.showNote(
+          response || `${script.title} ran with object ${object.id}}`
+        );
+        this.props.onRefresh();
+      } catch (e) {
+        this.props.showNote(e.message, true);
+        console.log(`Could not run ${script.title}: ${e}`);
+      }
+  }
+
+  toggleExecuteScriptDialog(){
+    this.setState((prevState) => ({ showExecuteScriptDialog: !prevState.showExecuteScriptDialog }));
+  }
+
   getSetFilterContextMenuOption(constraints) {
     if (constraints) {
       return {
@@ -423,6 +448,22 @@ export default class BrowserCell extends Component {
       classes.push(styles.required);
     }
 
+    let extras = null;
+    if (this.state.showExecuteScriptDialog)
+      extras = (
+        <ExecuteScriptDialog
+          className={this.selectedScript.className}
+          objectId={this.selectedScript.objectId}
+          scriptName={this.selectedScript.title}
+          type={this.selectedScript.confirmationDialogStyle}
+          onCancel={() => this.toggleExecuteScriptDialog()}
+          onConfirm={() => {
+            this.executeSript(this.selectedScript);
+            this.toggleExecuteScriptDialog();
+          }}
+        />
+      );
+
     return <span
       ref={this.cellRef}
       className={classes.join(' ')}
@@ -454,6 +495,7 @@ export default class BrowserCell extends Component {
       onContextMenu={this.onContextMenu.bind(this)}
       >
         {this.state.content}
+        {extras}
     </span>
   }
 }

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

@@ -0,0 +1,36 @@
+/*
+ * 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 labelStyles  from 'components/Label/Label.scss';
+import styles       from 'dashboard/Data/Browser/ExecuteScriptDialog.scss';
+
+export default class ExecuteScriptDialog extends React.Component {
+  constructor() {
+    super();
+  }
+
+  render() {
+    return (
+      <Modal
+        type={this.props.type === 'info' ? Modal.Types.INFO : Modal.Types.DANGER}
+        icon="warn-outline"
+        title={this.props.scriptName}
+        subtitle="Confirm that you want to run this script."
+        confirmText="Continue"
+        cancelText="Cancel"
+        onCancel={this.props.onCancel}
+        onConfirm={this.props.onConfirm}
+      >
+        <div className={[labelStyles.label, labelStyles.text, styles.action].join(' ')}>
+          {`Do you want to run script "${this.props.scriptName}" on "${this.props.className}" object "${this.props.objectId}"?`}
+        </div>
+      </Modal>
+    );
+  }
+}

src/dashboard/Data/Browser/ExecuteScriptDialog.scss

@@ -0,0 +1,13 @@
+/*
+ * 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 'stylesheets/globals.scss';
+
+ .action {
+  padding: 28px;
+  border-style: solid;
+ }