From 4d4991d96381ad267ffe27f782f1dff142144468 Mon Sep 17 00:00:00 2001
From: Aravind Shankar <aravind@hasura.io>
Date: Thu, 13 Dec 2018 16:16:00 +0530
Subject: [PATCH] permissions UI improvments, close #1068

---
 .../Data/TablePermissions/Permissions.js      | 268 +++++++++---------
 1 file changed, 138 insertions(+), 130 deletions(-)

diff --git a/console/src/components/Services/Data/TablePermissions/Permissions.js b/console/src/components/Services/Data/TablePermissions/Permissions.js
index 7813d8aa520f8..b59cfcab6d154 100644
--- a/console/src/components/Services/Data/TablePermissions/Permissions.js
+++ b/console/src/components/Services/Data/TablePermissions/Permissions.js
@@ -460,21 +460,21 @@ class Permissions extends Component {
         const bulkSelect = permsState.bulkSelect;
         const currentInputSelection = bulkSelect.filter(e => e === role)
           .length ? (
-          <input
-            onChange={dispatchBulkSelect}
-            checked="checked"
-            data-role={role}
-            className={styles.bulkSelect}
-            type="checkbox"
-          />
-        ) : (
-          <input
-            onChange={dispatchBulkSelect}
-            data-role={role}
-            className={styles.bulkSelect}
-            type="checkbox"
-          />
-        );
+            <input
+              onChange={dispatchBulkSelect}
+              checked="checked"
+              data-role={role}
+              className={styles.bulkSelect}
+              type="checkbox"
+            />
+          ) : (
+            <input
+              onChange={dispatchBulkSelect}
+              data-role={role}
+              className={styles.bulkSelect}
+              type="checkbox"
+            />
+          );
         _permissionsRowHtml.push(
           <td key={-1}>
             <div>
@@ -770,164 +770,164 @@ class Permissions extends Component {
         const setOptions =
           insertState && insertState.localSet && insertState.localSet.length > 0
             ? insertState.localSet.map((s, i) => {
-                return (
-                  <div className={styles.insertSetConfigRow} key={i}>
-                    <div
-                      className={
-                        styles.display_inline +
+              return (
+                <div className={styles.insertSetConfigRow} key={i}>
+                  <div
+                    className={
+                      styles.display_inline +
                         ' ' +
                         styles.add_mar_right +
                         ' ' +
                         styles.input_element_wrapper
-                      }
+                    }
+                  >
+                    <select
+                      className="input-sm form-control"
+                      value={s.key}
+                      onChange={this.onSetKeyChange.bind(this)}
+                      data-index-id={i}
+                      disabled={disableInput}
                     >
-                      <select
-                        className="input-sm form-control"
-                        value={s.key}
-                        onChange={this.onSetKeyChange.bind(this)}
-                        data-index-id={i}
-                        disabled={disableInput}
-                      >
-                        <option value="" disabled>
+                      <option value="" disabled>
                           Column Name
-                        </option>
-                        {columns && columns.length > 0
-                          ? columns.map((c, key) => (
-                              <option
-                                value={c.column_name}
-                                data-column-type={c.data_type}
-                                key={key}
-                              >
-                                {c.column_name}
-                              </option>
-                            ))
-                          : null}
-                      </select>
-                    </div>
-                    <div
-                      className={
-                        styles.display_inline +
+                      </option>
+                      {columns && columns.length > 0
+                        ? columns.map((c, key) => (
+                          <option
+                            value={c.column_name}
+                            data-column-type={c.data_type}
+                            key={key}
+                          >
+                            {c.column_name}
+                          </option>
+                        ))
+                        : null}
+                    </select>
+                  </div>
+                  <div
+                    className={
+                      styles.display_inline +
                         ' ' +
                         styles.add_mar_right +
                         ' ' +
                         styles.input_element_wrapper
-                      }
+                    }
+                  >
+                    <select
+                      className="input-sm form-control"
+                      onChange={this.onSetTypeChange.bind(this)}
+                      data-index-id={i}
+                      value={setConfigValueType(s.value) || ''}
+                      disabled={disableInput}
                     >
-                      <select
-                        className="input-sm form-control"
-                        onChange={this.onSetTypeChange.bind(this)}
-                        data-index-id={i}
-                        value={setConfigValueType(s.value) || ''}
-                        disabled={disableInput}
-                      >
-                        <option value="" disabled>
+                      <option value="" disabled>
                           Select Preset Type
-                        </option>
-                        <option value="static">static</option>
-                        <option value="session">from session variable</option>
-                      </select>
-                    </div>
-                    <div
-                      className={
-                        styles.display_inline +
+                      </option>
+                      <option value="static">static</option>
+                      <option value="session">from session variable</option>
+                    </select>
+                  </div>
+                  <div
+                    className={
+                      styles.display_inline +
                         ' ' +
                         styles.add_mar_right +
                         ' ' +
                         styles.input_element_wrapper
-                      }
-                    >
-                      {setConfigValueType(s.value) === 'session' ? (
-                        <InputGroup>
-                          <InputGroup.Addon>X-Hasura-</InputGroup.Addon>
-                          <input
-                            className={'input-sm form-control '}
-                            placeholder="column_value"
-                            value={s.value.slice(X_HASURA_CONST.length)}
-                            onChange={this.onSetValueChange.bind(this)}
-                            onBlur={e => this.onSetValueBlur(e, i, null)}
-                            data-index-id={i}
-                            data-prefix-val={X_HASURA_CONST}
-                            disabled={disableInput}
-                          />
-                        </InputGroup>
-                      ) : (
-                        <EnhancedInput
+                    }
+                  >
+                    {setConfigValueType(s.value) === 'session' ? (
+                      <InputGroup>
+                        <InputGroup.Addon>X-Hasura-</InputGroup.Addon>
+                        <input
+                          className={'input-sm form-control '}
                           placeholder="column_value"
-                          type={
-                            i in this.state.insertSetOperations.columnTypeMap
-                              ? this.state.insertSetOperations.columnTypeMap[i]
-                              : ''
-                          }
-                          value={s.value}
+                          value={s.value.slice(X_HASURA_CONST.length)}
                           onChange={this.onSetValueChange.bind(this)}
-                          onBlur={this.onSetValueBlur}
-                          indexId={i}
+                          onBlur={e => this.onSetValueBlur(e, i, null)}
+                          data-index-id={i}
                           data-prefix-val={X_HASURA_CONST}
                           disabled={disableInput}
                         />
-                      )}
-                    </div>
-                    {setConfigValueType(s.value) === 'session' ? (
-                      <div
-                        className={
-                          styles.display_inline +
+                      </InputGroup>
+                    ) : (
+                      <EnhancedInput
+                        placeholder="column_value"
+                        type={
+                          i in this.state.insertSetOperations.columnTypeMap
+                            ? this.state.insertSetOperations.columnTypeMap[i]
+                            : ''
+                        }
+                        value={s.value}
+                        onChange={this.onSetValueChange.bind(this)}
+                        onBlur={this.onSetValueBlur}
+                        indexId={i}
+                        data-prefix-val={X_HASURA_CONST}
+                        disabled={disableInput}
+                      />
+                    )}
+                  </div>
+                  {setConfigValueType(s.value) === 'session' ? (
+                    <div
+                      className={
+                        styles.display_inline +
                           ' ' +
                           styles.add_mar_right +
                           ' ' +
                           styles.input_element_wrapper +
                           ' ' +
                           styles.e_g_text
-                        }
-                      >
+                      }
+                    >
                         e.g. X-Hasura-User-Id
-                      </div>
-                    ) : (
-                      <div
-                        className={
-                          styles.display_inline +
+                    </div>
+                  ) : (
+                    <div
+                      className={
+                        styles.display_inline +
                           ' ' +
                           styles.add_mar_right +
                           ' ' +
                           styles.input_element_wrapper +
                           ' ' +
                           styles.e_g_text
-                        }
-                      >
+                      }
+                    >
                         e.g. false, 1, some-text
-                      </div>
-                    )}
-                    {i !== insertState.localSet.length - 1 ? (
-                      <div
-                        className={
-                          styles.display_inline +
+                    </div>
+                  )}
+                  {i !== insertState.localSet.length - 1 ? (
+                    <div
+                      className={
+                        styles.display_inline +
                           ' ' +
                           styles.add_mar_right +
                           ' ' +
                           styles.input_element_wrapper
+                      }
+                    >
+                      <i
+                        className="fa-lg fa fa-times"
+                        onClick={
+                          !disableInput ? this.deleteSetKeyVal.bind(this) : ''
                         }
-                      >
-                        <i
-                          className="fa-lg fa fa-times"
-                          onClick={
-                            !disableInput ? this.deleteSetKeyVal.bind(this) : ''
-                          }
-                          data-index-id={i}
-                        />
-                      </div>
-                    ) : (
-                      <div
-                        className={
-                          styles.display_inline +
+                        data-index-id={i}
+                      />
+                    </div>
+                  ) : (
+                    <div
+                      className={
+                        styles.display_inline +
                           ' ' +
                           styles.add_mar_right +
                           ' ' +
                           styles.input_element_wrapper
-                        }
-                      />
-                    )}
-                  </div>
-                );
-              })
+                      }
+                    />
+                  )}
+                </div>
+              );
+            })
             : null;
 
         return (
@@ -1069,10 +1069,18 @@ class Permissions extends Component {
           const allColumns = tableSchema.columns.map(c => c.column_name);
           dispatch(permToggleAllColumns(allColumns));
         };
+        let accessText;
+        if (query === 'insert') {
+          accessText = 'Allow input for';
+        } else if (query === 'select') {
+          accessText = 'Allow access to';
+        } else {
+          accessText = 'Allow updates to';
+        }
         _columnSection = (
           <div className={styles.editPermissionsSection}>
             <div>
-              With access to <b>columns</b>:
+              {accessText} these <b>columns</b>:
               <span
                 className={styles.toggleAll}
                 onClick={dispatchToggleAllColumns}