Add masterkey parameters (#1233)

mtrezza · davimacedo · commit 72608169b6f4 · 2019-08-22T14:56:37.000-07:00
* add master key only UI

* added saving, retrieving

* fixed style and wording

* Improved parameter explanation

Co-Authored-By: Tom Fox &lt;tomfox@surprises.io&gt;

* added show new field only for parse server &gt;= 3.8.0
diff --git a/src/dashboard/Data/Config/Config.react.js b/src/dashboard/Data/Config/Config.react.js
@@ -30,7 +30,8 @@ class Config extends TableView {
       modalOpen: false,
       modalParam: '',
       modalType: 'String',
-      modalValue: ''
+      modalValue: '',
+      modalMasterKeyOnly: false
     };
   }
 
@@ -58,13 +59,16 @@ class Config extends TableView {
     if (!this.state.modalOpen) {
       return null;
     }
+    const { currentApp = {} } = this.context;
     return (
       <ConfigDialog
         onConfirm={this.saveParam.bind(this)}
         onCancel={() => this.setState({ modalOpen: false })}
         param={this.state.modalParam}
         type={this.state.modalType}
-        value={this.state.modalValue} />
+        value={this.state.modalValue}
+        masterKeyOnly={this.state.modalMasterKeyOnly}
+        parseServerVersion={currentApp.serverInfo && currentApp.serverInfo.parseServerVersion} />
     );
   }
 
@@ -103,9 +107,11 @@ class Config extends TableView {
       modalOpen: true,
       modalParam: data.param,
       modalType: type,
-      modalValue: modalValue
+      modalValue: modalValue,
+      modalMasterKeyOnly: data.masterKeyOnly
     });
-    let columnStyle = { width: '30%', cursor: 'pointer' };
+    let columnStyleLarge = { width: '30%', cursor: 'pointer' };
+    let columnStyleSmall = { width: '15%', cursor: 'pointer' };
 
     let openModalValueColumn = () => {
       if (data.value instanceof Parse.File) {
@@ -116,9 +122,10 @@ class Config extends TableView {
 
     return (
       <tr key={data.param}>
-        <td style={columnStyle} onClick={openModal}>{data.param}</td>
-        <td style={columnStyle} onClick={openModal}>{type}</td>
-        <td style={columnStyle} onClick={openModalValueColumn}>{value}</td>
+        <td style={columnStyleLarge} onClick={openModal}>{data.param}</td>
+        <td style={columnStyleSmall} onClick={openModal}>{type}</td>
+        <td style={columnStyleLarge} onClick={openModalValueColumn}>{value}</td>
+        <td style={columnStyleSmall} onClick={openModal}>{data.masterKeyOnly.toString()}</td>
         <td style={{ textAlign: 'center' }}>
           <a onClick={this.deleteParam.bind(this, data.param)}>
             <Icon width={16} height={16} name='trash-solid' fill='#ff395e' />
@@ -131,8 +138,9 @@ class Config extends TableView {
   renderHeaders() {
     return [
       <TableHeader key='parameter' width={30}>Parameter</TableHeader>,
-      <TableHeader key='type' width={30}>Type</TableHeader>,
-      <TableHeader key='value' width={30}>Value</TableHeader>
+      <TableHeader key='type' width={15}>Type</TableHeader>,
+      <TableHeader key='value' width={30}>Value</TableHeader>,
+      <TableHeader key='masterKeyOnly' width={15}>Master key only</TableHeader>
     ];
   }
 
@@ -151,20 +159,20 @@ class Config extends TableView {
     let data = undefined;
     if (this.props.config.data) {
       let params = this.props.config.data.get('params');
+      let masterKeyOnlyParams = this.props.config.data.get('masterKeyOnly') || {};
       if (params) {
         data = [];
         params.forEach((value, param) => {
+          let masterKeyOnly = masterKeyOnlyParams.get(param) || false;
           let type = typeof value;
           if (type === 'object' && value.__type == 'File') {
             value = Parse.File.fromJSON(value);
           }
           else if (type === 'object' && value.__type == 'GeoPoint') {
             value = new Parse.GeoPoint(value);
           }
-
-          data.push({ param: param, value: value })
+          data.push({ param: param, value: value, masterKeyOnly: masterKeyOnly })
         });
-
         data.sort((object1, object2) => {
           return object1.param.localeCompare(object2.param);
         });
@@ -173,10 +181,10 @@ class Config extends TableView {
     return data;
   }
 
-  saveParam({ name, value }) {
+  saveParam({ name, value, masterKeyOnly }) {
     this.props.config.dispatch(
       ActionTypes.SET,
-      { param: name, value: value }
+      { param: name, value: value, masterKeyOnly: masterKeyOnly }
     ).then(() => {
       this.setState({ modalOpen: false });
     }, () => {
@@ -196,7 +204,8 @@ class Config extends TableView {
       modalOpen: true,
       modalParam: '',
       modalType: 'String',
-      modalValue: ''
+      modalValue: '',
+      modalMasterKeyOnly: false
     });
   }
 }
diff --git a/src/dashboard/Data/Config/ConfigDialog.react.js b/src/dashboard/Data/Config/ConfigDialog.react.js
@@ -18,6 +18,8 @@ import React           from 'react';
 import TextInput       from 'components/TextInput/TextInput.react';
 import Toggle          from 'components/Toggle/Toggle.react';
 import validateNumeric from 'lib/validateNumeric';
+import styles          from 'dashboard/Data/Browser/Browser.scss';
+import semver          from 'semver';
 
 const PARAM_TYPES = [
   'Boolean',
@@ -108,13 +110,15 @@ export default class ConfigDialog extends React.Component {
     this.state = {
       value: null,
       type: 'String',
-      name: ''
+      name: '',
+      masterKeyOnly: false
     };
     if (props.param.length > 0) {
       this.state = {
         name: props.param,
         type: props.type,
         value: props.value,
+        masterKeyOnly: props.masterKeyOnly
       };
     }
   }
@@ -176,6 +180,7 @@ export default class ConfigDialog extends React.Component {
     this.props.onConfirm({
       name: this.state.name,
       value: GET_VALUE[this.state.type](this.state.value),
+      masterKeyOnly: this.state.masterKeyOnly
     });
   }
 
@@ -228,6 +233,30 @@ export default class ConfigDialog extends React.Component {
               description='Use this to configure your app. You can change it at any time.' />
           }
           input={EDITORS[this.state.type](this.state.value, (value) => { this.setState({ value }) })} />
+        
+        {
+          /*
+            Add `Requires master key` field if parse-server version >= 3.8.0,
+            that is the minimum version that supports this feature.
+          */
+          semver.valid(this.props.parseServerVersion) && semver.gte(this.props.parseServerVersion, '3.8.0') 
+          ? <Field
+              label={
+                <Label
+                  text='Requires master key?'
+                  description='When set to yes the parameter is returned only when requested with the master key. You can change it at any time.' />
+              }
+              input={
+                <Toggle
+                  type={Toggle.Types.YES_NO}
+                  value={this.state.masterKeyOnly}
+                  onChange={(masterKeyOnly) => this.setState({ masterKeyOnly })} 
+                  additionalStyles={{ margin: '0px' }} />
+              }
+              className={styles.addColumnToggleWrapper}
+            />
+          : null
+        }
       </Modal>
     );
   }
diff --git a/src/lib/stores/ConfigStore.js b/src/lib/stores/ConfigStore.js
@@ -16,6 +16,7 @@ export const ActionTypes = keyMirror(['FETCH', 'SET', 'DELETE']);
 // Config state should be an Immutable Map with the following fields:
 //   - lastFetch: the last time all data was fetched from the server
 //   - params: An Immutable Map of parameter strings to values
+//   - masterKeyOnly: An Immutable Map of parameter properties for read with master key only
 
 function ConfigStore(state, action) {
   action.app.setParseKeys();
@@ -27,22 +28,24 @@ function ConfigStore(state, action) {
         {},
         { useMasterKey: true }
       ).then((result) => {
-        return Map({ lastFetch: new Date(), params: Map(result.params) });
+        return Map({ lastFetch: new Date(), params: Map(result.params), masterKeyOnly: Map(result.masterKeyOnly) });
       });
     case ActionTypes.SET:
       return Parse._request(
         'PUT',
         'config',
-        { params: { [action.param]: Parse._encode(action.value) } },
+        { params: { [action.param]: Parse._encode(action.value) }, masterKeyOnly: { [action.param]: action.masterKeyOnly} },
         { useMasterKey: true }
       ).then(() => {
-        return state.setIn(['params', action.param], action.value);
+        return state
+        .setIn(['params', action.param], action.value)
+        .setIn(['masterKeyOnly', action.param], action.masterKeyOnly);
       });
     case ActionTypes.DELETE:
       return Parse._request(
         'PUT',
         'config',
-        { params: { [action.param]: { __op: 'Delete' } } },
+        { params: { [action.param]: { __op: 'Delete' } }, masterKeyOnly: { [action.param]: { __op: 'Delete' } } },
         { useMasterKey: true }
       ).then(() => {
         return state.deleteIn(['params', action.param]);
