feat(config): modal add array entry

Author: mtrezza

src/dashboard/Data/Config/AddArrayEntryDialog.react.js

@@ -0,0 +1,51 @@
+/*
+ * 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 AddArrayEntryDialog extends React.Component {
+  constructor() {
+    super();
+    this.state = { value: '' };
+  }
+
+  valid() {
+    return this.state.value !== '';
+  }
+
+  getValue() {
+    try {
+      return JSON.parse(this.state.value);
+    } catch {
+      return this.state.value;
+    }
+  }
+
+  render() {
+    return (
+      <Modal
+        type={Modal.Types.INFO}
+        icon="plus-solid"
+        title="Add entry"
+        confirmText="Add"
+        cancelText="Cancel"
+        onCancel={this.props.onCancel}
+        onConfirm={() => this.props.onConfirm(this.getValue())}
+        disabled={!this.valid()}
+      >
+        <Field
+          label={<Label text="Value" />}
+          input={<TextInput autofocus={true} value={this.state.value} onChange={value => this.setState({ value })} />}
+        />
+      </Modal>
+    );
+  }
+}

src/dashboard/Data/Config/Config.react.js

@@ -9,6 +9,7 @@ import { ActionTypes } from 'lib/stores/ConfigStore';
 import Button from 'components/Button/Button.react';
 import ConfigDialog from 'dashboard/Data/Config/ConfigDialog.react';
 import DeleteParameterDialog from 'dashboard/Data/Config/DeleteParameterDialog.react';
+import AddArrayEntryDialog from 'dashboard/Data/Config/AddArrayEntryDialog.react';
 import EmptyState from 'components/EmptyState/EmptyState.react';
 import Icon from 'components/Icon/Icon.react';
 import { isDate } from 'lib/DateUtils';
@@ -44,6 +45,8 @@ class Config extends TableView {
       confirmModalOpen: false,
       lastError: null,
       lastNote: null,
+      showAddEntryDialog: false,
+      addEntryParam: '',
     };
     this.noteTimeout = null;
   }
@@ -111,6 +114,15 @@ class Config extends TableView {
           onConfirm={this.deleteParam.bind(this, this.state.modalParam)}
         />
       );
+    } else if (this.state.showAddEntryDialog) {
+      extras = (
+        <AddArrayEntryDialog
+          onCancel={this.closeAddEntryDialog.bind(this)}
+          onConfirm={value =>
+            this.addArrayEntry(this.state.addEntryParam, value)
+          }
+        />
+      );
     }
 
     if (this.state.confirmModalOpen) {
@@ -235,7 +247,8 @@ class Config extends TableView {
     // Define column styles
     const columnStyleLarge = { width: '30%', cursor: 'pointer' };
     const columnStyleSmall = { width: '15%', cursor: 'pointer' };
-    const columnStyleAction = { width: '10%', textAlign: 'center' };
+    const columnStyleValue = { width: '25%', cursor: 'pointer' };
+    const columnStyleAction = { width: '10%' };
 
     const openModalValueColumn = () => {
       if (data.value instanceof Parse.File) {
@@ -258,20 +271,20 @@ class Config extends TableView {
         <td style={columnStyleSmall} onClick={openModal}>
           {type}
         </td>
-        <td style={columnStyleLarge} onClick={openModalValueColumn}>
+        <td style={columnStyleValue} onClick={openModalValueColumn}>
           {value}
         </td>
         <td style={columnStyleAction}>
           {type === 'Array' && (
-            <a onClick={() => this.addArrayEntry(data.param)}>
+            <a onClick={() => this.openAddEntryDialog(data.param)}>
               <Icon width={16} height={16} name="plus-solid" />
             </a>
           )}
         </td>
         <td style={columnStyleSmall} onClick={openModal}>
           {data.masterKeyOnly.toString()}
         </td>
-        <td style={{ textAlign: 'center' }}>
+        <td style={{ textAlign: 'center', width: '5%' }}>
           <a onClick={openDeleteParameterDialog}>
             <Icon width={16} height={16} name="trash-solid" fill="#ff395e" />
           </a>
@@ -473,17 +486,15 @@ class Config extends TableView {
     }, 3500);
   }
 
-  async addArrayEntry(param) {
-    const input = window.prompt('New array entry (JSON supported)');
-    if (input === null) {
-      return;
-    }
-    let value;
-    try {
-      value = JSON.parse(input);
-    } catch (e) {
-      value = input;
-    }
+  openAddEntryDialog(param) {
+    this.setState({ showAddEntryDialog: true, addEntryParam: param });
+  }
+
+  closeAddEntryDialog() {
+    this.setState({ showAddEntryDialog: false, addEntryParam: '' });
+  }
+
+  async addArrayEntry(param, value) {
     try {
       this.setState({ loading: true });
       await Parse._request(
@@ -503,6 +514,7 @@ class Config extends TableView {
     } finally {
       this.setState({ loading: false });
     }
+    this.closeAddEntryDialog();
   }
 }