From 1c6a946b14044e973bb2cda0a42255c4980c5b5b Mon Sep 17 00:00:00 2001
From: Praveen D <praveen@hasura.io>
Date: Wed, 8 Aug 2018 16:00:43 +0530
Subject: [PATCH 1/8] console: remove permission for a role in a table

---
 .../Services/Data/TableModify/Modify.scss     | 18 ++++-
 .../Services/Data/TablePermissions/Actions.js | 72 +++++++++++++++++++
 .../Data/TablePermissions/Permissions.js      | 35 +++++++--
 3 files changed, 118 insertions(+), 7 deletions(-)

diff --git a/console/src/components/Services/Data/TableModify/Modify.scss b/console/src/components/Services/Data/TableModify/Modify.scss
index 9d99e07706fc2..3764a14f9edee 100644
--- a/console/src/components/Services/Data/TableModify/Modify.scss
+++ b/console/src/components/Services/Data/TableModify/Modify.scss
@@ -41,7 +41,7 @@
 
 .newRoleInput {
   margin-left: 20px;
-  width: 80%;
+  width: calc(100% - 40px);
   height: 30px;
 }
 
@@ -173,7 +173,18 @@ hr
   td:first-child, th:first-child {
     border-right: 4px double #ddd;
     font-weight: bold;
-    width: 20%;
+    width: 10%;
+  }
+  td:nth-child(2) {
+    overflow: auto;
+    max-width: 250px;
+    width: 250px;
+  }
+  .newRoleTd {
+    padding-top: 13px;
+  }
+  .permissionDelete {
+    cursor: pointer;
   }
 
   .editPermissionLink {
@@ -209,17 +220,18 @@ hr
   }
 }
 
-
 .activeEdit {
   .editPermissionsHeading {
     font-weight: bold;
     font-size: 16px;
     margin-bottom: 5px;
+    word-wrap: break-word;
   }
 
   .editPermissionsSection {
     margin: 5px;
     padding: 10px;
+    word-wrap: break-word;
 
     .columnListElement {
       float: left;
diff --git a/console/src/components/Services/Data/TablePermissions/Actions.js b/console/src/components/Services/Data/TablePermissions/Actions.js
index 06905fb09a924..9e6492c5ca779 100644
--- a/console/src/components/Services/Data/TablePermissions/Actions.js
+++ b/console/src/components/Services/Data/TablePermissions/Actions.js
@@ -132,6 +132,77 @@ const toggleColumn = (permissions, column) => {
   return _newColumns;
 };
 
+const permRemoveRole = (tableSchema, roleName) => {
+  return (dispatch, getState) => {
+    const currentSchema = getState().tables.currentSchema;
+    const permissionsState = getState().tables.modify.permissionsState;
+
+    const table = tableSchema.table_name;
+    const role = roleName;
+
+    const currRolePermissions = tableSchema.permissions.find(
+      p => p.role_name === role
+    );
+
+    const permissionsUpQueries = [];
+    const permissionsDownQueries = [];
+    console.log(permissionsState);
+    console.log(currRolePermissions);
+
+    if (currRolePermissions && currRolePermissions.permissions) {
+      Object.keys(currRolePermissions.permissions).forEach(type => {
+        const deleteQuery = {
+          type: 'drop_' + type + '_permission',
+          args: {
+            table: { name: table, schema: currentSchema },
+            role: role,
+          },
+        };
+        const createQuery = {
+          type: 'create_' + type + '_permission',
+          args: {
+            table: { name: table, schema: currentSchema },
+            role: role,
+            permission: currRolePermissions.permissions[type],
+          },
+        };
+        permissionsUpQueries.push(deleteQuery);
+        permissionsDownQueries.push(createQuery);
+      });
+    }
+
+    // Apply migration
+    const migrationName =
+      'remove_permission_' + role + '_' + currentSchema + '_table_' + table;
+
+    const requestMsg = 'Removing permissions...';
+    const successMsg = 'Permission removed';
+    const errorMsg = 'Removing permissions failed';
+
+    const customOnSuccess = () => {
+      dispatch(_permRemoveAccess());
+      // reset new role name
+      dispatch(permSetRoleName(''));
+      // close edit box
+      dispatch(permCloseEdit());
+    };
+    const customOnError = () => {};
+
+    makeMigrationCall(
+      dispatch,
+      getState,
+      permissionsUpQueries,
+      permissionsDownQueries,
+      migrationName,
+      customOnSuccess,
+      customOnError,
+      requestMsg,
+      successMsg,
+      errorMsg
+    );
+  };
+};
+
 const permChangePermissions = changeType => {
   return (dispatch, getState) => {
     const allSchemas = getState().tables.allSchemas;
@@ -252,6 +323,7 @@ export {
   permToggleEnableLimit,
   permToggleModifyLimit,
   permCustomChecked,
+  permRemoveRole,
   toggleColumn,
   toggleAllColumns,
   queriesWithPermColumns,
diff --git a/console/src/components/Services/Data/TablePermissions/Permissions.js b/console/src/components/Services/Data/TablePermissions/Permissions.js
index 6f0d0c0670caf..a2b803951704a 100644
--- a/console/src/components/Services/Data/TablePermissions/Permissions.js
+++ b/console/src/components/Services/Data/TablePermissions/Permissions.js
@@ -23,6 +23,7 @@ import {
   permToggleEnableLimit,
   permToggleModifyLimit,
   permCustomChecked,
+  permRemoveRole,
 } from './Actions';
 import PermissionBuilder from './PermissionBuilder/PermissionBuilder';
 import TableHeader from '../TableCommon/TableHeader';
@@ -181,12 +182,35 @@ class Permissions extends Component {
       const dispatchRoleNameChange = e => {
         dispatch(permSetRoleName(e.target.value));
       };
+      const dispatchDeletePermission = () => {
+        const isConfirm = window.confirm(
+          'Are you sure you want to delete the permission for role ' +
+            role +
+            '?'
+        );
+        if (isConfirm) {
+          dispatch(permRemoveRole(tableSchema, role));
+        }
+      };
 
       const _permissionsRowHtml = [];
+      if (role === 'admin' || role === '') {
+        _permissionsRowHtml.push(<td key={-1} />);
+      } else {
+        _permissionsRowHtml.push(
+          <td key={-1}>
+            <i
+              onClick={dispatchDeletePermission}
+              className={styles.permissionDelete + ' fa fa-trash'}
+              aria-hidden="true"
+            />
+          </td>
+        );
+      }
 
       if (isNewPerm) {
         _permissionsRowHtml.push(
-          <td key={-1}>
+          <td key={-2}>
             <input
               className={`form-control ${styles.newRoleInput}`}
               onChange={dispatchRoleNameChange}
@@ -198,7 +222,7 @@ class Permissions extends Component {
           </td>
         );
       } else {
-        _permissionsRowHtml.push(<td key={-1}>{role}</td>);
+        _permissionsRowHtml.push(<td key={-2}>{role}</td>);
       }
 
       queryTypes.forEach((queryType, i) => {
@@ -223,7 +247,9 @@ class Permissions extends Component {
         _permissionsRowHtml.push(
           <td
             key={i}
-            className={className}
+            className={
+              className + (role === '' ? ' ' + styles.newRoleTd : null)
+            }
             onClick={onClick}
             title="Click to edit permissions"
             data-test={`${role}-${queryType}`}
@@ -294,7 +320,8 @@ class Permissions extends Component {
     const getPermissionsTableHead = queryTypes => {
       const _permissionsHead = [];
 
-      _permissionsHead.push(<td key={-1}>Role</td>);
+      _permissionsHead.push(<td key={-1}>Actions</td>);
+      _permissionsHead.push(<td key={-2}>Role</td>);
 
       queryTypes.forEach((queryType, i) => {
         _permissionsHead.push(<td key={i}>{queryType}</td>);

From b521bdcfe417b4fb60c45d5e04d5d769f9e1bed2 Mon Sep 17 00:00:00 2001
From: Praveen D <praveen@hasura.io>
Date: Mon, 13 Aug 2018 11:50:07 +0530
Subject: [PATCH 2/8] console: add bulk checkbox wip

---
 .../Data/TablePermissions/Permissions.js      | 21 ++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/console/src/components/Services/Data/TablePermissions/Permissions.js b/console/src/components/Services/Data/TablePermissions/Permissions.js
index a2b803951704a..79b04fd9bd0cc 100644
--- a/console/src/components/Services/Data/TablePermissions/Permissions.js
+++ b/console/src/components/Services/Data/TablePermissions/Permissions.js
@@ -199,6 +199,15 @@ class Permissions extends Component {
       } else {
         _permissionsRowHtml.push(
           <td key={-1}>
+            <i
+              onClick={dispatchDeletePermission}
+              className={
+                styles.permissionDelete +
+                ' fa fa-pencil ' +
+                styles.add_mar_small
+              }
+              aria-hidden="true"
+            />
             <i
               onClick={dispatchDeletePermission}
               className={styles.permissionDelete + ' fa fa-trash'}
@@ -785,7 +794,7 @@ class Permissions extends Component {
       );
 
       const removeAccessButton = getButton(
-        'Remove all access',
+        'Remove',
         'btn-danger',
         dispatchRemoveAccess,
         disableRemoveAccess
@@ -829,6 +838,16 @@ class Permissions extends Component {
       return _editSection;
     };
 
+    const getEditRoleSection = (tableSchema, permsState) => {
+      let _editSection = '';
+
+      if (permsState.role && permsState.query) {
+        _editSection = getEditPermissions(tableSchema, permsState);
+      }
+
+      return _editSection;
+    };
+
     const getHeader = tableSchema => {
       let _header;
 

From b51fd96c929674d356c648ec5d2ab8ec02e2fbef Mon Sep 17 00:00:00 2001
From: Praveen D <praveen@hasura.io>
Date: Mon, 20 Aug 2018 12:34:08 +0530
Subject: [PATCH 3/8] console: permissions ux wip

---
 .../src/components/Services/Data/DataState.js |  1 +
 .../Services/Data/TableCommon/TableReducer.js | 38 ++++++--
 .../Services/Data/TableModify/Modify.scss     |  5 +
 .../Services/Data/TablePermissions/Actions.js | 28 +++++-
 .../Data/TablePermissions/Permissions.js      | 91 ++++++++++---------
 5 files changed, 107 insertions(+), 56 deletions(-)

diff --git a/console/src/components/Services/Data/DataState.js b/console/src/components/Services/Data/DataState.js
index 94979c5a1b73e..07a65db4d1818 100644
--- a/console/src/components/Services/Data/DataState.js
+++ b/console/src/components/Services/Data/DataState.js
@@ -28,6 +28,7 @@ const defaultPermissionsState = {
   custom_checked: false,
   newRole: '',
   limitEnabled: true,
+  bulkSelect: [],
 };
 
 const defaultQueryPermissions = {
diff --git a/console/src/components/Services/Data/TableCommon/TableReducer.js b/console/src/components/Services/Data/TableCommon/TableReducer.js
index 7d4e9f3f92ec6..6015ed5a637ea 100644
--- a/console/src/components/Services/Data/TableCommon/TableReducer.js
+++ b/console/src/components/Services/Data/TableCommon/TableReducer.js
@@ -43,7 +43,6 @@ import {
   PERM_TOGGLE_COLUMN,
   PERM_TOGGLE_ALL_COLUMNS,
   PERM_ALLOW_ALL,
-  PERM_TOGGLE_ENABLE_LIMIT,
   PERM_TOGGLE_MODIFY_LIMIT,
   PERM_TOGGLE_ALLOW_UPSERT,
   PERM_CUSTOM_CHECKED,
@@ -51,12 +50,15 @@ import {
   PERM_SAVE_PERMISSIONS,
   PERM_CLOSE_EDIT,
   PERM_SET_ROLE_NAME,
+  PERM_SELECT_BULK,
+  PERM_DESELECT_BULK,
   toggleColumn,
   toggleAllColumns,
   getFilterKey,
   getBasePermissionsState,
   updatePermissionsState,
   deleteFromPermissionsState,
+  updateBulkSelect,
 } from '../TablePermissions/Actions';
 
 const modifyReducer = (tableName, schemas, modifyStateOrig, action) => {
@@ -306,15 +308,6 @@ const modifyReducer = (tableName, schemas, modifyStateOrig, action) => {
         },
       };
 
-    case PERM_TOGGLE_ENABLE_LIMIT:
-      return {
-        ...modifyState,
-        permissionsState: {
-          ...modifyState.permissionsState,
-          limitEnabled: action.data,
-        },
-      };
-
     case PERM_TOGGLE_MODIFY_LIMIT:
       return {
         ...modifyState,
@@ -406,6 +399,31 @@ const modifyReducer = (tableName, schemas, modifyStateOrig, action) => {
         ...modifyState,
       };
 
+    case PERM_SELECT_BULK:
+      return {
+        ...modifyState,
+        permissionsState: {
+          ...modifyState.permissionsState,
+          bulkSelect: updateBulkSelect(
+            modifyState.permissionsState,
+            action.data,
+            true
+          ),
+        },
+      };
+    case PERM_DESELECT_BULK:
+      return {
+        ...modifyState,
+        permissionsState: {
+          ...modifyState.permissionsState,
+          bulkSelect: updateBulkSelect(
+            modifyState.permissionsState,
+            action.data,
+            false
+          ),
+        },
+      };
+
     case TOGGLE_ACTIVE_COLUMN:
       const newCol =
         modifyState.activeEdit.column === action.column ? '' : action.column;
diff --git a/console/src/components/Services/Data/TableModify/Modify.scss b/console/src/components/Services/Data/TableModify/Modify.scss
index 3764a14f9edee..bf9bcc7d18c43 100644
--- a/console/src/components/Services/Data/TableModify/Modify.scss
+++ b/console/src/components/Services/Data/TableModify/Modify.scss
@@ -192,6 +192,11 @@ hr
     position: absolute;
     right: 10px;
     color: #337ab7;
+    cursor: pointer;
+  }
+
+  .bulkSelect {
+    margin-right: 10px !important;
   }
 
   .clickableCell {
diff --git a/console/src/components/Services/Data/TablePermissions/Actions.js b/console/src/components/Services/Data/TablePermissions/Actions.js
index 9e6492c5ca779..021231f98ef3e 100644
--- a/console/src/components/Services/Data/TablePermissions/Actions.js
+++ b/console/src/components/Services/Data/TablePermissions/Actions.js
@@ -17,6 +17,8 @@ export const PERM_REMOVE_ACCESS = 'ModifyTable/PERM_REMOVE_ACCESS';
 export const PERM_SAVE_PERMISSIONS = 'ModifyTable/PERM_SAVE_PERMISSIONS';
 export const PERM_CLOSE_EDIT = 'ModifyTable/PERM_CLOSE_EDIT';
 export const PERM_SET_ROLE_NAME = 'ModifyTable/PERM_SET_ROLE_NAME';
+export const PERM_SELECT_BULK = 'ModifyTable/PERM_SELECT_BULK';
+export const PERM_DESELECT_BULK = 'ModifyTable/PERM_DESELECT_BULK';
 
 const queriesWithPermColumns = ['select', 'update'];
 const permChangeTypes = {
@@ -52,14 +54,19 @@ const permToggleAllowUpsert = checked => ({
   type: PERM_TOGGLE_ALLOW_UPSERT,
   data: checked,
 });
-const permToggleEnableLimit = checked => ({
-  type: PERM_TOGGLE_ENABLE_LIMIT,
-  data: checked,
-});
 const permToggleModifyLimit = limit => ({
   type: PERM_TOGGLE_MODIFY_LIMIT,
   data: limit,
 });
+const permSetBulkSelect = (isChecked, selectedRole) => {
+  return dispatch => {
+    if (isChecked) {
+      dispatch({ type: PERM_SELECT_BULK, data: selectedRole });
+    } else {
+      dispatch({ type: PERM_DESELECT_BULK, data: selectedRole });
+    }
+  };
+};
 const permCustomChecked = () => ({ type: PERM_CUSTOM_CHECKED });
 
 const getFilterKey = query => {
@@ -100,6 +107,16 @@ const updatePermissionsState = (permissions, key, value) => {
   return _permissions;
 };
 
+const updateBulkSelect = (permissionsState, selectedRole, isAdd) => {
+  let bulkRes = permissionsState.bulkSelect;
+  if (isAdd) {
+    bulkRes.push(selectedRole);
+  } else {
+    bulkRes = bulkRes.filter(e => e !== selectedRole);
+  }
+  return bulkRes;
+};
+
 const deleteFromPermissionsState = permissions => {
   const _permissions = JSON.parse(JSON.stringify(permissions));
 
@@ -320,10 +337,10 @@ export {
   permChangePermissions,
   permAllowAll,
   permToggleAllowUpsert,
-  permToggleEnableLimit,
   permToggleModifyLimit,
   permCustomChecked,
   permRemoveRole,
+  permSetBulkSelect,
   toggleColumn,
   toggleAllColumns,
   queriesWithPermColumns,
@@ -331,4 +348,5 @@ export {
   getBasePermissionsState,
   updatePermissionsState,
   deleteFromPermissionsState,
+  updateBulkSelect,
 };
diff --git a/console/src/components/Services/Data/TablePermissions/Permissions.js b/console/src/components/Services/Data/TablePermissions/Permissions.js
index 79b04fd9bd0cc..d866fbe527885 100644
--- a/console/src/components/Services/Data/TablePermissions/Permissions.js
+++ b/console/src/components/Services/Data/TablePermissions/Permissions.js
@@ -20,10 +20,10 @@ import {
   permSetRoleName,
   permChangePermissions,
   permToggleAllowUpsert,
-  permToggleEnableLimit,
   permToggleModifyLimit,
   permCustomChecked,
   permRemoveRole,
+  permSetBulkSelect,
 } from './Actions';
 import PermissionBuilder from './PermissionBuilder/PermissionBuilder';
 import TableHeader from '../TableCommon/TableHeader';
@@ -182,6 +182,11 @@ class Permissions extends Component {
       const dispatchRoleNameChange = e => {
         dispatch(permSetRoleName(e.target.value));
       };
+      const dispatchBulkSelect = e => {
+        const isChecked = e.target.checked;
+        const selectedRole = e.target.getAttribute('data-role');
+        dispatch(permSetBulkSelect(isChecked, selectedRole));
+      };
       const dispatchDeletePermission = () => {
         const isConfirm = window.confirm(
           'Are you sure you want to delete the permission for role ' +
@@ -199,20 +204,19 @@ class Permissions extends Component {
       } else {
         _permissionsRowHtml.push(
           <td key={-1}>
-            <i
-              onClick={dispatchDeletePermission}
-              className={
-                styles.permissionDelete +
-                ' fa fa-pencil ' +
-                styles.add_mar_small
-              }
-              aria-hidden="true"
-            />
-            <i
-              onClick={dispatchDeletePermission}
-              className={styles.permissionDelete + ' fa fa-trash'}
-              aria-hidden="true"
-            />
+            <div>
+              <input
+                onChange={dispatchBulkSelect}
+                data-role={role}
+                className={styles.bulkSelect}
+                type="checkbox"
+              />
+              <i
+                onClick={dispatchDeletePermission}
+                className={styles.permissionDelete + ' fa fa-trash'}
+                aria-hidden="true"
+              />
+            </div>
           </td>
         );
       }
@@ -487,47 +491,21 @@ class Permissions extends Component {
     };
 
     const getLimitSection = permsState => {
-      const dispatchToggleEnableLimit = checked => {
-        dispatch(permToggleEnableLimit(checked));
-      };
       const dispatchLimit = limit => {
         const parsedLimit = parseInt(limit, 10);
         dispatch(permToggleModifyLimit(parsedLimit));
       };
-      const limitEnabled = permsState.limitEnabled
-        ? permsState.limitEnabled
-        : false;
       const query = permsState.query;
       const limitValue =
         permsState.select && permsState.select.limit
           ? permsState.select.limit
           : '';
 
-      let limitInputHtml;
       if (query === 'select') {
-        if (limitEnabled) {
-          limitInputHtml = (
-            <input
-              type="checkbox"
-              checked="checked"
-              value="toggle_upsert"
-              onClick={e => dispatchToggleEnableLimit(e.target.checked)}
-            />
-          );
-        } else {
-          limitInputHtml = (
-            <input
-              type="checkbox"
-              value="toggle_upsert"
-              onClick={e => dispatchToggleEnableLimit(e.target.checked)}
-            />
-          );
-        }
         const _limitSection = (
           <div className={styles.mar_small_neg_left}>
             <div className="radio">
               <label>
-                {limitInputHtml}
                 <span className={styles.mar_small_left}>
                   Limit the no of rows
                 </span>
@@ -838,6 +816,36 @@ class Permissions extends Component {
       return _editSection;
     };
 
+    const getBulkSection = (tableSchema, queryTypes, permsState) => {
+      if (!permsState.bulkSelect.length) {
+        return null;
+      }
+      console.log(tableSchema);
+      console.log(queryTypes);
+      const currentPermissions = tableSchema.permissions;
+      const bulkSelect = permsState.bulkSelect;
+      const _bulkSection = (
+        <div className={styles.activeEdit}>
+          <div className={styles.editPermissionsHeading}>
+            Apply Bulk Actions
+          </div>
+          <hr className={styles.remove_margin} />
+          <div className={styles.padd_top + ' ' + styles.padd_bottom}>
+            <span className={styles.selectedRoles + ' ' + styles.add_pad_right}>
+              Selected Roles
+            </span>
+            {bulkSelect.map(r => {
+              return <span className={styles.add_pad_right}>{r} </span>;
+            })}
+          </div>
+          <div className={styles.padd_bottom}>
+            <button className={'btn btn-sm btn-default'}>Bulk Delete</button>
+          </div>
+        </div>
+      );
+      return _bulkSection;
+    };
+
     const getEditRoleSection = (tableSchema, permsState) => {
       let _editSection = '';
 
@@ -886,6 +894,7 @@ class Permissions extends Component {
             <h4 className={styles.subheading_text}>Permissions</h4>
             {getPermissionsTable(tSchema, qTypes, permissionsState)}
             {getEditSection(tSchema, qTypes, permissionsState)}
+            {getBulkSection(tSchema, qTypes, permissionsState)}
           </div>
         </div>
         <div className={`${styles.fixed} hidden`}>

From 33e77e4f725353f36d6f66d77ee7919743a0afbb Mon Sep 17 00:00:00 2001
From: Praveen D <praveen@hasura.io>
Date: Mon, 20 Aug 2018 16:31:25 +0530
Subject: [PATCH 4/8] console: bulk delete roles in permissions

---
 .../Services/Data/TableCommon/TableReducer.js | 10 +++
 .../Services/Data/TablePermissions/Actions.js | 76 ++++++++++++++++++-
 .../Data/TablePermissions/Permissions.js      | 48 +++++++++---
 3 files changed, 120 insertions(+), 14 deletions(-)

diff --git a/console/src/components/Services/Data/TableCommon/TableReducer.js b/console/src/components/Services/Data/TableCommon/TableReducer.js
index 6015ed5a637ea..2ae4c9db02b06 100644
--- a/console/src/components/Services/Data/TableCommon/TableReducer.js
+++ b/console/src/components/Services/Data/TableCommon/TableReducer.js
@@ -52,6 +52,7 @@ import {
   PERM_SET_ROLE_NAME,
   PERM_SELECT_BULK,
   PERM_DESELECT_BULK,
+  PERM_RESET_BULK_SELECT,
   toggleColumn,
   toggleAllColumns,
   getFilterKey,
@@ -424,6 +425,15 @@ const modifyReducer = (tableName, schemas, modifyStateOrig, action) => {
         },
       };
 
+    case PERM_RESET_BULK_SELECT:
+      return {
+        ...modifyState,
+        permissionsState: {
+          ...modifyState.permissionsState,
+          bulkSelect: [],
+        },
+      };
+
     case TOGGLE_ACTIVE_COLUMN:
       const newCol =
         modifyState.activeEdit.column === action.column ? '' : action.column;
diff --git a/console/src/components/Services/Data/TablePermissions/Actions.js b/console/src/components/Services/Data/TablePermissions/Actions.js
index 021231f98ef3e..69204deef9232 100644
--- a/console/src/components/Services/Data/TablePermissions/Actions.js
+++ b/console/src/components/Services/Data/TablePermissions/Actions.js
@@ -19,6 +19,7 @@ export const PERM_CLOSE_EDIT = 'ModifyTable/PERM_CLOSE_EDIT';
 export const PERM_SET_ROLE_NAME = 'ModifyTable/PERM_SET_ROLE_NAME';
 export const PERM_SELECT_BULK = 'ModifyTable/PERM_SELECT_BULK';
 export const PERM_DESELECT_BULK = 'ModifyTable/PERM_DESELECT_BULK';
+export const PERM_RESET_BULK_SELECT = 'ModifyTable/PERM_RESET_BULK_SELECT';
 
 const queriesWithPermColumns = ['select', 'update'];
 const permChangeTypes = {
@@ -152,7 +153,6 @@ const toggleColumn = (permissions, column) => {
 const permRemoveRole = (tableSchema, roleName) => {
   return (dispatch, getState) => {
     const currentSchema = getState().tables.currentSchema;
-    const permissionsState = getState().tables.modify.permissionsState;
 
     const table = tableSchema.table_name;
     const role = roleName;
@@ -163,8 +163,6 @@ const permRemoveRole = (tableSchema, roleName) => {
 
     const permissionsUpQueries = [];
     const permissionsDownQueries = [];
-    console.log(permissionsState);
-    console.log(currRolePermissions);
 
     if (currRolePermissions && currRolePermissions.permissions) {
       Object.keys(currRolePermissions.permissions).forEach(type => {
@@ -220,6 +218,77 @@ const permRemoveRole = (tableSchema, roleName) => {
   };
 };
 
+const permRemoveMultipleRoles = tableSchema => {
+  return (dispatch, getState) => {
+    const currentSchema = getState().tables.currentSchema;
+    const permissionsState = getState().tables.modify.permissionsState;
+
+    const table = tableSchema.table_name;
+    const roles = permissionsState.bulkSelect;
+
+    const permissionsUpQueries = [];
+    const permissionsDownQueries = [];
+    const currentPermissions = tableSchema.permissions;
+
+    roles.map(role => {
+      const currentRolePermission = currentPermissions.filter(el => {
+        return el.role_name === role;
+      });
+      Object.keys(currentRolePermission[0].permissions).forEach(type => {
+        const deleteQuery = {
+          type: 'drop_' + type + '_permission',
+          args: {
+            table: { name: table, schema: currentSchema },
+            role: role,
+          },
+        };
+        const createQuery = {
+          type: 'create_' + type + '_permission',
+          args: {
+            table: { name: table, schema: currentSchema },
+            role: role,
+            permission: currentRolePermission[0].permissions[type],
+          },
+        };
+        permissionsUpQueries.push(deleteQuery);
+        permissionsDownQueries.push(createQuery);
+      });
+    });
+
+    // Apply migration
+    const migrationName = 'remove_roles_' + currentSchema + '_table_' + table;
+
+    const requestMsg = 'Removing roles...';
+    const successMsg = 'Roles removed';
+    const errorMsg = 'Removing roles failed';
+
+    const customOnSuccess = () => {
+      // reset new role name
+      dispatch(permSetRoleName(''));
+      // close edit box
+      dispatch(permCloseEdit());
+      // reset checkbox selections
+      dispatch({ type: PERM_RESET_BULK_SELECT });
+    };
+    const customOnError = () => {};
+    console.log(permissionsUpQueries);
+    console.log(permissionsDownQueries);
+
+    makeMigrationCall(
+      dispatch,
+      getState,
+      permissionsUpQueries,
+      permissionsDownQueries,
+      migrationName,
+      customOnSuccess,
+      customOnError,
+      requestMsg,
+      successMsg,
+      errorMsg
+    );
+  };
+};
+
 const permChangePermissions = changeType => {
   return (dispatch, getState) => {
     const allSchemas = getState().tables.allSchemas;
@@ -349,4 +418,5 @@ export {
   updatePermissionsState,
   deleteFromPermissionsState,
   updateBulkSelect,
+  permRemoveMultipleRoles,
 };
diff --git a/console/src/components/Services/Data/TablePermissions/Permissions.js b/console/src/components/Services/Data/TablePermissions/Permissions.js
index d866fbe527885..0a21a33f66b64 100644
--- a/console/src/components/Services/Data/TablePermissions/Permissions.js
+++ b/console/src/components/Services/Data/TablePermissions/Permissions.js
@@ -24,6 +24,7 @@ import {
   permCustomChecked,
   permRemoveRole,
   permSetBulkSelect,
+  permRemoveMultipleRoles,
 } from './Actions';
 import PermissionBuilder from './PermissionBuilder/PermissionBuilder';
 import TableHeader from '../TableCommon/TableHeader';
@@ -202,15 +203,28 @@ class Permissions extends Component {
       if (role === 'admin' || role === '') {
         _permissionsRowHtml.push(<td key={-1} />);
       } else {
+        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"
+            />
+          );
         _permissionsRowHtml.push(
           <td key={-1}>
             <div>
-              <input
-                onChange={dispatchBulkSelect}
-                data-role={role}
-                className={styles.bulkSelect}
-                type="checkbox"
-              />
+              {currentInputSelection}
               <i
                 onClick={dispatchDeletePermission}
                 className={styles.permissionDelete + ' fa fa-trash'}
@@ -820,10 +834,11 @@ class Permissions extends Component {
       if (!permsState.bulkSelect.length) {
         return null;
       }
-      console.log(tableSchema);
-      console.log(queryTypes);
-      const currentPermissions = tableSchema.permissions;
+      // const currentPermissions = tableSchema.permissions;
       const bulkSelect = permsState.bulkSelect;
+      const bulkDeleteClicked = () => {
+        dispatch(permRemoveMultipleRoles(tableSchema));
+      };
       const _bulkSection = (
         <div className={styles.activeEdit}>
           <div className={styles.editPermissionsHeading}>
@@ -835,17 +850,27 @@ class Permissions extends Component {
               Selected Roles
             </span>
             {bulkSelect.map(r => {
-              return <span className={styles.add_pad_right}>{r} </span>;
+              return (
+                <span key={r} className={styles.add_pad_right}>
+                  <b>{r}</b>{' '}
+                </span>
+              );
             })}
           </div>
           <div className={styles.padd_bottom}>
-            <button className={'btn btn-sm btn-default'}>Bulk Delete</button>
+            <button
+              onClick={bulkDeleteClicked}
+              className={'btn btn-sm btn-default'}
+            >
+              Delete
+            </button>
           </div>
         </div>
       );
       return _bulkSection;
     };
 
+    /*
     const getEditRoleSection = (tableSchema, permsState) => {
       let _editSection = '';
 
@@ -855,6 +880,7 @@ class Permissions extends Component {
 
       return _editSection;
     };
+    */
 
     const getHeader = tableSchema => {
       let _header;

From dcd217bcfa5b30a585940d17660587ca9f933db3 Mon Sep 17 00:00:00 2001
From: Praveen D <praveen@hasura.io>
Date: Tue, 21 Aug 2018 14:15:08 +0530
Subject: [PATCH 5/8] console: apply same permission type to multiple roles

---
 console/src/components/Common/Common.scss     |   2 +-
 .../src/components/Services/Data/DataState.js |   1 +
 .../Services/Data/TableCommon/TableReducer.js |  37 ++++++
 .../Services/Data/TableModify/Modify.scss     |  16 +++
 .../Services/Data/TablePermissions/Actions.js | 123 +++++++++++++++++-
 .../Data/TablePermissions/Permissions.js      | 103 ++++++++++++---
 6 files changed, 263 insertions(+), 19 deletions(-)

diff --git a/console/src/components/Common/Common.scss b/console/src/components/Common/Common.scss
index 0581d5dce837b..b2b6d1363fc7d 100644
--- a/console/src/components/Common/Common.scss
+++ b/console/src/components/Common/Common.scss
@@ -480,7 +480,7 @@ input {
 }
 .add_mar_small
 {
-  margin-right: 10px;
+  margin-right: 10px !important;
 }
 .code_space
 {
diff --git a/console/src/components/Services/Data/DataState.js b/console/src/components/Services/Data/DataState.js
index 07a65db4d1818..9f7e4fa3aab6a 100644
--- a/console/src/components/Services/Data/DataState.js
+++ b/console/src/components/Services/Data/DataState.js
@@ -29,6 +29,7 @@ const defaultPermissionsState = {
   newRole: '',
   limitEnabled: true,
   bulkSelect: [],
+  applySamePermissions: [],
 };
 
 const defaultQueryPermissions = {
diff --git a/console/src/components/Services/Data/TableCommon/TableReducer.js b/console/src/components/Services/Data/TableCommon/TableReducer.js
index 2ae4c9db02b06..40aca0dade161 100644
--- a/console/src/components/Services/Data/TableCommon/TableReducer.js
+++ b/console/src/components/Services/Data/TableCommon/TableReducer.js
@@ -53,6 +53,9 @@ import {
   PERM_SELECT_BULK,
   PERM_DESELECT_BULK,
   PERM_RESET_BULK_SELECT,
+  PERM_RESET_BULK_SAME_SELECT,
+  PERM_SAME_APPLY_BULK,
+  PERM_DESELECT_SAME_APPLY_BULK,
   toggleColumn,
   toggleAllColumns,
   getFilterKey,
@@ -60,6 +63,7 @@ import {
   updatePermissionsState,
   deleteFromPermissionsState,
   updateBulkSelect,
+  updateBulkSameSelect,
 } from '../TablePermissions/Actions';
 
 const modifyReducer = (tableName, schemas, modifyStateOrig, action) => {
@@ -424,6 +428,30 @@ const modifyReducer = (tableName, schemas, modifyStateOrig, action) => {
           ),
         },
       };
+    case PERM_SAME_APPLY_BULK:
+      return {
+        ...modifyState,
+        permissionsState: {
+          ...modifyState.permissionsState,
+          applySamePermissions: updateBulkSameSelect(
+            modifyState.permissionsState,
+            action.data,
+            true
+          ),
+        },
+      };
+    case PERM_DESELECT_SAME_APPLY_BULK:
+      return {
+        ...modifyState,
+        permissionsState: {
+          ...modifyState.permissionsState,
+          applySamePermissions: updateBulkSameSelect(
+            modifyState.permissionsState,
+            action.data,
+            false
+          ),
+        },
+      };
 
     case PERM_RESET_BULK_SELECT:
       return {
@@ -434,6 +462,15 @@ const modifyReducer = (tableName, schemas, modifyStateOrig, action) => {
         },
       };
 
+    case PERM_RESET_BULK_SAME_SELECT:
+      return {
+        ...modifyState,
+        permissionsState: {
+          ...modifyState.permissionsState,
+          applySamePermissions: [],
+        },
+      };
+
     case TOGGLE_ACTIVE_COLUMN:
       const newCol =
         modifyState.activeEdit.column === action.column ? '' : action.column;
diff --git a/console/src/components/Services/Data/TableModify/Modify.scss b/console/src/components/Services/Data/TableModify/Modify.scss
index bf9bcc7d18c43..b62cf1eee0266 100644
--- a/console/src/components/Services/Data/TableModify/Modify.scss
+++ b/console/src/components/Services/Data/TableModify/Modify.scss
@@ -225,6 +225,22 @@ hr
   }
 }
 
+.applyBulkPermissions {
+  display: inline-block;
+}
+
+.samePermissionRole {
+  display: inline-block;
+  width: auto;
+  height: auto;
+}
+
+.bulkApplyBtn {
+  display: block;
+  margin-top: 10px;
+  clear: both;
+}
+
 .activeEdit {
   .editPermissionsHeading {
     font-weight: bold;
diff --git a/console/src/components/Services/Data/TablePermissions/Actions.js b/console/src/components/Services/Data/TablePermissions/Actions.js
index 69204deef9232..3a763ee6542d2 100644
--- a/console/src/components/Services/Data/TablePermissions/Actions.js
+++ b/console/src/components/Services/Data/TablePermissions/Actions.js
@@ -20,6 +20,11 @@ export const PERM_SET_ROLE_NAME = 'ModifyTable/PERM_SET_ROLE_NAME';
 export const PERM_SELECT_BULK = 'ModifyTable/PERM_SELECT_BULK';
 export const PERM_DESELECT_BULK = 'ModifyTable/PERM_DESELECT_BULK';
 export const PERM_RESET_BULK_SELECT = 'ModifyTable/PERM_RESET_BULK_SELECT';
+export const PERM_RESET_BULK_SAME_SELECT =
+  'ModifyTable/PERM_RESET_BULK_SAME_SELECT';
+export const PERM_SAME_APPLY_BULK = 'ModifyTable/PERM_SAME_APPLY_BULK';
+export const PERM_DESELECT_SAME_APPLY_BULK =
+  'ModifyTable/PERM_DESELECT_SAME_APPLY_BULK';
 
 const queriesWithPermColumns = ['select', 'update'];
 const permChangeTypes = {
@@ -68,6 +73,15 @@ const permSetBulkSelect = (isChecked, selectedRole) => {
     }
   };
 };
+const permSetSameSelect = (isChecked, selectedRole) => {
+  return dispatch => {
+    if (isChecked) {
+      dispatch({ type: PERM_SAME_APPLY_BULK, data: selectedRole });
+    } else {
+      dispatch({ type: PERM_DESELECT_SAME_APPLY_BULK, data: selectedRole });
+    }
+  };
+};
 const permCustomChecked = () => ({ type: PERM_CUSTOM_CHECKED });
 
 const getFilterKey = query => {
@@ -118,6 +132,16 @@ const updateBulkSelect = (permissionsState, selectedRole, isAdd) => {
   return bulkRes;
 };
 
+const updateBulkSameSelect = (permissionsState, selectedRole, isAdd) => {
+  let bulkRes = permissionsState.applySamePermissions;
+  if (isAdd) {
+    bulkRes.push(selectedRole);
+  } else {
+    bulkRes = bulkRes.filter(e => e !== selectedRole);
+  }
+  return bulkRes;
+};
+
 const deleteFromPermissionsState = permissions => {
   const _permissions = JSON.parse(JSON.stringify(permissions));
 
@@ -271,8 +295,100 @@ const permRemoveMultipleRoles = tableSchema => {
       dispatch({ type: PERM_RESET_BULK_SELECT });
     };
     const customOnError = () => {};
-    console.log(permissionsUpQueries);
-    console.log(permissionsDownQueries);
+
+    makeMigrationCall(
+      dispatch,
+      getState,
+      permissionsUpQueries,
+      permissionsDownQueries,
+      migrationName,
+      customOnSuccess,
+      customOnError,
+      requestMsg,
+      successMsg,
+      errorMsg
+    );
+  };
+};
+
+const applySamePermissionsBulk = tableSchema => {
+  return (dispatch, getState) => {
+    const currentSchema = getState().tables.currentSchema;
+    const permissionsState = getState().tables.modify.permissionsState;
+
+    const table = tableSchema.table_name;
+    const currentQueryType = permissionsState.query;
+    const toBeAppliedPermission = permissionsState[currentQueryType];
+    const selectedRoles = permissionsState.applySamePermissions;
+
+    const permissionsUpQueries = [];
+    const permissionsDownQueries = [];
+    const currentPermissions = tableSchema.permissions;
+
+    selectedRoles.map(role => {
+      // find out if selected role has an existing permission of the same query type.
+      // if so add a drop permission and then create the new permission.
+
+      const currentRolePermission = currentPermissions.filter(el => {
+        return el.role_name === role;
+      });
+      if (currentRolePermission[0].permissions[currentQueryType]) {
+        // existing permission is there. so drop and recreate.
+        const deleteQuery = {
+          type: 'drop_' + currentQueryType + '_permission',
+          args: {
+            table: { name: table, schema: currentSchema },
+            role: role,
+          },
+        };
+        const createQuery = {
+          type: 'create_' + currentQueryType + '_permission',
+          args: {
+            table: { name: table, schema: currentSchema },
+            role: role,
+            permission: currentRolePermission[0].permissions[currentQueryType],
+          },
+        };
+        permissionsUpQueries.push(deleteQuery);
+        permissionsDownQueries.push(createQuery);
+      }
+      // now add normal create and drop permissions
+      const createQuery = {
+        type: 'create_' + currentQueryType + '_permission',
+        args: {
+          table: { name: table, schema: currentSchema },
+          role: role,
+          permission: toBeAppliedPermission,
+        },
+      };
+      const deleteQuery = {
+        type: 'drop_' + currentQueryType + '_permission',
+        args: {
+          table: { name: table, schema: currentSchema },
+          role: role,
+        },
+      };
+      permissionsUpQueries.push(createQuery);
+      permissionsDownQueries.push(deleteQuery);
+    });
+
+    // Apply migration
+    const migrationName =
+      'apply_same_permissions_' + currentSchema + '_table_' + table;
+
+    const requestMsg = 'Applying Same Permissions';
+    const successMsg = 'Permission Changes Applied';
+    const errorMsg = 'Permisison Changes Failed';
+
+    const customOnSuccess = () => {
+      // reset new role name
+      dispatch(permSetRoleName(''));
+      // close edit box
+      dispatch(permCloseEdit());
+      // reset checkbox selections
+      dispatch({ type: PERM_RESET_BULK_SAME_SELECT });
+    };
+    const customOnError = () => {};
 
     makeMigrationCall(
       dispatch,
@@ -418,5 +534,8 @@ export {
   updatePermissionsState,
   deleteFromPermissionsState,
   updateBulkSelect,
+  updateBulkSameSelect,
   permRemoveMultipleRoles,
+  permSetSameSelect,
+  applySamePermissionsBulk,
 };
diff --git a/console/src/components/Services/Data/TablePermissions/Permissions.js b/console/src/components/Services/Data/TablePermissions/Permissions.js
index 0a21a33f66b64..58a17ded148b0 100644
--- a/console/src/components/Services/Data/TablePermissions/Permissions.js
+++ b/console/src/components/Services/Data/TablePermissions/Permissions.js
@@ -25,6 +25,8 @@ import {
   permRemoveRole,
   permSetBulkSelect,
   permRemoveMultipleRoles,
+  permSetSameSelect,
+  applySamePermissionsBulk,
 } from './Actions';
 import PermissionBuilder from './PermissionBuilder/PermissionBuilder';
 import TableHeader from '../TableCommon/TableHeader';
@@ -206,21 +208,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>
@@ -793,12 +795,79 @@ class Permissions extends Component {
       );
 
       const closeButton = getButton('Close', 'btn-warning', dispatchCloseEdit);
+      const currentPermissions = tableSchema.permissions;
+      const applySameSelected = e => {
+        const isChecked = e.target.checked;
+        const selectedRole = e.target.getAttribute('data-role');
+        dispatch(permSetSameSelect(isChecked, selectedRole));
+      };
+      const applySameBulk = () => {
+        if (window.confirm('Are you sure?')) {
+          dispatch(applySamePermissionsBulk(tableSchema));
+        }
+      };
+      const roleList = [];
+      currentPermissions.map(perm => {
+        if (roleList.indexOf(perm.role_name) === -1) {
+          roleList.push(perm.role_name);
+        }
+      });
+      // get list of unique names
+      const roleListHtml = [];
+      roleList.map(role => {
+        if (role !== permsState.role && currQueryPermissions) {
+          roleListHtml.push(
+            <div
+              key={role}
+              className={styles.display_inline + ' ' + styles.add_mar_right}
+            >
+              <input
+                data-role={role}
+                onChange={applySameSelected}
+                className={
+                  'form-control ' +
+                  styles.samePermissionRole +
+                  ' ' +
+                  styles.add_mar_small
+                }
+                type="checkbox"
+              />
+              <label className={styles.display_inline}>{role}</label>
+            </div>
+          );
+        }
+      });
+      let applyBulkPermissions = null;
+      if (roleListHtml.length) {
+        applyBulkPermissions = (
+          <div className={styles.add_mar_top}>
+            <div>Apply same {permsState.query} permissions to</div>
+            <div className={styles.add_mar_top_small}>{roleListHtml}</div>
+            {permsState.applySamePermissions.length ? (
+              <button
+                onClick={applySameBulk}
+                className={'btn btn-default ' + styles.bulkApplyBtn}
+              >
+                Bulk Apply
+              </button>
+            ) : (
+              <button
+                className={'btn btn-default ' + styles.bulkApplyBtn}
+                disabled
+              >
+                Bulk Apply
+              </button>
+            )}
+          </div>
+        );
+      }
 
       return (
         <div className={styles.editPermissionsSection}>
           {saveButton}
           {removeAccessButton}
           {closeButton}
+          {applyBulkPermissions}
         </div>
       );
     };
@@ -837,7 +906,9 @@ class Permissions extends Component {
       // const currentPermissions = tableSchema.permissions;
       const bulkSelect = permsState.bulkSelect;
       const bulkDeleteClicked = () => {
-        dispatch(permRemoveMultipleRoles(tableSchema));
+        if (window.confirm('Are you sure?')) {
+          dispatch(permRemoveMultipleRoles(tableSchema));
+        }
       };
       const _bulkSection = (
         <div className={styles.activeEdit}>

From d51e8243da03747e9abeb75bcbfa47b8cd29110e Mon Sep 17 00:00:00 2001
From: Praveen D <praveen@hasura.io>
Date: Tue, 21 Aug 2018 14:16:39 +0530
Subject: [PATCH 6/8] console: change apply button text

---
 .../Data/TablePermissions/Permissions.js      | 34 +++++++++----------
 1 file changed, 17 insertions(+), 17 deletions(-)

diff --git a/console/src/components/Services/Data/TablePermissions/Permissions.js b/console/src/components/Services/Data/TablePermissions/Permissions.js
index 58a17ded148b0..4dcd6e8b5b8a3 100644
--- a/console/src/components/Services/Data/TablePermissions/Permissions.js
+++ b/console/src/components/Services/Data/TablePermissions/Permissions.js
@@ -208,21 +208,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>
@@ -848,14 +848,14 @@ class Permissions extends Component {
                 onClick={applySameBulk}
                 className={'btn btn-default ' + styles.bulkApplyBtn}
               >
-                Bulk Apply
+                Apply
               </button>
             ) : (
               <button
                 className={'btn btn-default ' + styles.bulkApplyBtn}
                 disabled
               >
-                Bulk Apply
+                Apply
               </button>
             )}
           </div>

From 9e35844e5c7bb49fada9e9a3ef5b3c3c1e45adf8 Mon Sep 17 00:00:00 2001
From: Praveen D <praveen@hasura.io>
Date: Tue, 21 Aug 2018 15:30:39 +0530
Subject: [PATCH 7/8] console: update tests

---
 console/cypress/integration/data/permissions/utils.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/console/cypress/integration/data/permissions/utils.js b/console/cypress/integration/data/permissions/utils.js
index 58163f04dd3b7..5050a9856bcc4 100644
--- a/console/cypress/integration/data/permissions/utils.js
+++ b/console/cypress/integration/data/permissions/utils.js
@@ -91,7 +91,7 @@ export const permRemove = (tableName, query) => {
   // click on the query type to edit permission
   cy.get(getElementFromAlias(`role0-${query}`)).click();
   // Remove permission
-  cy.get(getElementFromAlias('Remove-all-access-button')).click();
+  cy.get(getElementFromAlias('Remove-button')).click();
   cy.wait(2500);
   // Check for notif
   // cy.get('.notification-success').click();

From 598976a2bf91c2c6519476393dae32ed05bcd047 Mon Sep 17 00:00:00 2001
From: Praveen D <praveen@hasura.io>
Date: Wed, 22 Aug 2018 11:40:31 +0530
Subject: [PATCH 8/8] console: update close button, add hr

---
 .../Data/TablePermissions/Permissions.js      | 35 ++++++++++---------
 1 file changed, 18 insertions(+), 17 deletions(-)

diff --git a/console/src/components/Services/Data/TablePermissions/Permissions.js b/console/src/components/Services/Data/TablePermissions/Permissions.js
index 4dcd6e8b5b8a3..c1162c72ecdb1 100644
--- a/console/src/components/Services/Data/TablePermissions/Permissions.js
+++ b/console/src/components/Services/Data/TablePermissions/Permissions.js
@@ -208,21 +208,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>
@@ -794,7 +794,7 @@ class Permissions extends Component {
         disableRemoveAccess
       );
 
-      const closeButton = getButton('Close', 'btn-warning', dispatchCloseEdit);
+      const closeButton = getButton('Close', 'btn-default', dispatchCloseEdit);
       const currentPermissions = tableSchema.permissions;
       const applySameSelected = e => {
         const isChecked = e.target.checked;
@@ -841,7 +841,8 @@ class Permissions extends Component {
       if (roleListHtml.length) {
         applyBulkPermissions = (
           <div className={styles.add_mar_top}>
-            <div>Apply same {permsState.query} permissions to</div>
+            <hr />
+            <div>Apply same {permsState.query} permissions to other roles</div>
             <div className={styles.add_mar_top_small}>{roleListHtml}</div>
             {permsState.applySamePermissions.length ? (
               <button