Make admin permissions list scrollable

client/web/admin/src/components/Permissions/CPermissionList.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="h-100">
     <b-card
       class="shadow h-100"
       header-class="p-0"
@@ -22,8 +22,6 @@
           >
             <small>
               {{ $t('ui.click-on-cell-to-allow') }}
-              <br>
-              {{ $t('ui.alt-click-to-deny') }}
             </small>
           </b-col>
           <b-col
@@ -93,7 +91,7 @@
           :key="type"
         >
           <b-row
-            class="bg-light border-bottom text-primary"
+            class="bg-light border-bottom text-primary sticky-top"
             align-v="stretch"
             no-gutters
           >
@@ -429,18 +427,10 @@ export default {
         this.$set(this.permissionChanges.find(r => r.ID === ID).rules, key, access)
       }
 
-      if (event.altKey) {
-        if (access === 'deny') {
-          access = 'inherit'
-        } else {
-          access = 'deny'
-        }
+      if (access === 'allow') {
+        access = 'inherit'
       } else {
-        if (access === 'allow') {
-          access = 'inherit'
-        } else {
-          access = 'allow'
-        }
+        access = 'allow'
       }
 
       this.$set(this.rolePermissions.find(r => r.ID === ID).rules, key, access)

client/web/admin/src/mixins/permissionHelpers.js

@@ -69,7 +69,7 @@ export default {
           const roleIDs = this.allRoles.map(({ roleID }) => roleID)
 
           // We read permissions for included roles
-          return Promise.all(getIncludedRoles().filter(({ roleID }) => roleIDs.includes(roleID)).map(({ mode, name, roleID, userID }) => {
+          return Promise.all(getIncludedRoles().filter(({ roleID, mode }) => mode === 'eval' || roleIDs.includes(roleID)).map(({ mode, name, roleID, userID }) => {
             if (mode === 'edit') {
               return this.readPermissions({ name, roleID })
             } else {
@@ -149,6 +149,7 @@ export default {
 
         this.readPermissions({ roleID, name: [name] })
           .finally(() => {
+            setIncludedRoles(this.roles)
             this.loaded.roles = true
           })
       } else if (mode === 'eval') {
@@ -166,6 +167,7 @@ export default {
 
         this.evaluatePermissions({ name, roleID, userID })
           .finally(() => {
+            setIncludedRoles(this.roles)
             this.loaded.roles = true
           })
       }
@@ -195,9 +197,6 @@ export default {
           })
         })
         .catch(this.toastErrorHandler(this.$t('notification:permissions.role.error')))
-        .finally(() => {
-          setIncludedRoles(this.roles)
-        })
     },
 
     async evaluatePermissions ({ name, roleID, userID }) {
@@ -217,9 +216,6 @@ export default {
           })
         })
         .catch(this.toastErrorHandler(this.$t('notification:permissions.eval.error')))
-        .finally(() => {
-          setIncludedRoles(this.roles)
-        })
     },
 
     roleRules (rules, mode = 'edit') {

client/web/admin/src/views/Automation/Permissions/Index.vue

@@ -1,7 +1,7 @@
 <template>
   <b-container
     fluid
-    class="py-3"
+    class="d-flex flex-column h-100 py-3"
   >
     <c-content-header
       :title="$t('ui.title.automation')"
@@ -17,6 +17,7 @@
       :processing="permission.processing"
       :success="permission.success"
       component="automation"
+      class="flex-fill"
       @submit="onSubmit"
       @add="addRole"
       @hide="hideRole"

locale/en/corteza-webapp-admin/permissions.yaml

@@ -46,7 +46,6 @@ ui:
   #############################################################################
   # Inline permission table UI:
   click-on-cell-to-allow: Click on permission/role cell to allow a specific operation
-  alt-click-to-deny: Use Alt-Click to set explicit deny on operation
 
   title:
     automation: Automation permissions