From 7c177080ab7ffb0f390adb720ad7df2fb81f1043 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C5=BEe=20Fortun?= <joze.fortun@gmail.com>
Date: Tue, 9 Jul 2024 15:16:54 +0200
Subject: [PATCH] Fix some user selects showing selected value as undefined if
 user was not on the first page

---
 .../src/components/Authclient/CSelectUser.vue |  1 +
 .../web/admin/src/components/CRolePicker.vue  |  1 +
 .../Permissions/CPermissionList.vue           | 39 +++++++++----
 .../components/Role/CRoleEditorMembers.vue    |  1 +
 .../web/admin/src/mixins/permissionHelpers.js | 16 +++++-
 .../components/Namespaces/Reminders/Edit.vue  | 57 +++++++++++--------
 .../components/Namespaces/Reminders/List.vue  |  4 +-
 .../components/Namespaces/Reminders/index.vue |  8 ---
 .../Navigation/NavTypes/ComposePage.vue       |  1 -
 .../src/components/Common/ColumnSelector.vue  |  1 -
 .../src/components/Configurator/Function.vue  |  2 +-
 .../src/components/Configurator/Workflow.vue  |  1 +
 .../permissions/CPermissionsModal.vue         | 48 +++++++++-------
 .../privacy/CSensitivityLevelPicker.vue       |  1 -
 .../components/reminders/CReminderSidebar.vue |  2 +-
 .../corteza-webapp-compose/permissions.yaml   |  5 ++
 16 files changed, 114 insertions(+), 74 deletions(-)

diff --git a/client/web/admin/src/components/Authclient/CSelectUser.vue b/client/web/admin/src/components/Authclient/CSelectUser.vue
index 9adc115e4..639bcbaf8 100644
--- a/client/web/admin/src/components/Authclient/CSelectUser.vue
+++ b/client/web/admin/src/components/Authclient/CSelectUser.vue
@@ -5,6 +5,7 @@
     :get-option-label="getOptionLabel"
     :get-option-key="getOptionKey"
     :value="user.value"
+    :filterable="false"
     @search="search"
     @input="updateRunAs"
   />
diff --git a/client/web/admin/src/components/CRolePicker.vue b/client/web/admin/src/components/CRolePicker.vue
index 1dcdcebdd..817997454 100644
--- a/client/web/admin/src/components/CRolePicker.vue
+++ b/client/web/admin/src/components/CRolePicker.vue
@@ -9,6 +9,7 @@
       :get-option-key="r => r.value"
       :get-option-label="r => getRoleLabel(r)"
       :placeholder="$t('admin:picker.role.placeholder')"
+      :filterable="false"
       @search="search"
       @input="updateValue($event)"
     />
diff --git a/client/web/admin/src/components/Permissions/CPermissionList.vue b/client/web/admin/src/components/Permissions/CPermissionList.vue
index d7e859384..eb6236744 100644
--- a/client/web/admin/src/components/Permissions/CPermissionList.vue
+++ b/client/web/admin/src/components/Permissions/CPermissionList.vue
@@ -218,13 +218,12 @@
         class="mb-0"
       >
         <c-input-select
-          key="roleID"
           v-model="add.roleID"
           :data-test-id="`select-${add.mode}-roles`"
           :options="availableRoles"
           :get-option-key="getOptionRoleKey"
-          :multiple="add.mode === 'eval'"
           label="name"
+          :multiple="add.mode === 'eval'"
           :disabled="add.mode === 'eval' && !!add.userID"
           :placeholder="$t('ui.add.role.placeholder')"
         />
@@ -237,15 +236,13 @@
         class="mt-3 mb-0"
       >
         <c-input-select
-          key="userID"
           v-model="add.userID"
           :data-test-id="`select-${add.mode}-users`"
           :disabled="!!add.roleID.length"
-          :get-option-key="getOptionUserKey"
           :options="userOptions"
           :get-option-label="getUserLabel"
-          label="name"
           :placeholder="$t('ui.add.user.placeholder')"
+          :filterable="false"
           @search="searchUsers"
         />
       </b-form-group>
@@ -328,6 +325,8 @@ export default {
 
       newRole: null,
       permissionChanges: [],
+
+      fetchedUsers: {},
     }
   },
 
@@ -380,6 +379,10 @@ export default {
     this.searchUsers('', () => {})
   },
 
+  beforeDestroy () {
+    this.setDefaultValues()
+  },
+
   methods: {
     checkRule (ID, res, op, access) {
       const key = `${op}@${res}`
@@ -426,15 +429,23 @@ export default {
 
       this.$SystemAPI.userList({ query, limit: 15 })
         .then(({ set }) => {
-          this.userOptions = set.map(m => Object.freeze(m))
+          this.userOptions = set.reduce((acc, { userID, name, username, email }) => {
+            if (!this.fetchedUsers[userID]) {
+              this.fetchedUsers[userID] = name || username || email || `<@${userID}>`
+            }
+
+            acc.push(userID)
+
+            return acc
+          }, [])
         })
         .finally(() => {
           loading(false)
         })
     },
 
-    getUserLabel ({ userID, email, name, username }) {
-      return name || username || email || `<@${userID}>`
+    getUserLabel (userID) {
+      return this.fetchedUsers[userID]
     },
 
     getTranslation (resource, operation = '') {
@@ -461,7 +472,7 @@ export default {
     },
 
     onAdd () {
-      this.$emit('add', this.add)
+      this.$emit('add', { ...this.add, userID: { userID: this.add.userID, name: this.fetchedUsers[this.add.userID] } })
       this.add = {
         mode: 'edit',
         roleID: [],
@@ -477,8 +488,14 @@ export default {
       return roleID
     },
 
-    getOptionUserKey ({ userID }) {
-      return userID
+    setDefaultValues () {
+      this.add = {}
+      this.modeOptions = []
+      this.userOptions = []
+      this.evaluatedPermissions = undefined
+      this.newRole = null
+      this.permissionChanges = []
+      this.fetchedUsers = {}
     },
   },
 }
diff --git a/client/web/admin/src/components/Role/CRoleEditorMembers.vue b/client/web/admin/src/components/Role/CRoleEditorMembers.vue
index 88672d068..78d87132b 100644
--- a/client/web/admin/src/components/Role/CRoleEditorMembers.vue
+++ b/client/web/admin/src/components/Role/CRoleEditorMembers.vue
@@ -21,6 +21,7 @@
         :get-option-key="u => u.value"
         :get-option-label="u => getUserLabel(u)"
         :placeholder="$t('admin:picker.member.placeholder')"
+        :filterable="false"
         @search="search"
         @input="updateValue($event)"
       />
diff --git a/client/web/admin/src/mixins/permissionHelpers.js b/client/web/admin/src/mixins/permissionHelpers.js
index 1aff63afe..f6c6cab09 100644
--- a/client/web/admin/src/mixins/permissionHelpers.js
+++ b/client/web/admin/src/mixins/permissionHelpers.js
@@ -146,6 +146,12 @@ export default {
 
       if (mode === 'edit') {
         const { roleID, name } = add.roleID || {}
+        const ID = `edit-${roleID}`
+
+        if (this.roles.some(r => r.ID === ID)) {
+          this.loaded.roles = true
+          return
+        }
 
         this.readPermissions({ roleID, name: [name] })
           .finally(() => {
@@ -157,14 +163,20 @@ export default {
         let name = ''
 
         if (userID) {
-          const { name: uname, username, email, handle } = userID
-          name = [uname || username || email || handle || userID || '']
+          name = [userID.name]
           userID = userID.userID
         } else {
           name = roleID.map(({ name }) => name)
           roleID = roleID.map(({ roleID }) => roleID)
         }
 
+        const ID = userID ? `eval-${userID}` : `eval-${roleID.join('-')}`
+
+        if (this.roles.some(r => r.ID === ID)) {
+          this.loaded.roles = true
+          return
+        }
+
         this.evaluatePermissions({ name, roleID, userID })
           .finally(() => {
             setIncludedRoles(this.roles)
diff --git a/client/web/compose/src/components/Namespaces/Reminders/Edit.vue b/client/web/compose/src/components/Namespaces/Reminders/Edit.vue
index 7cf1ddba3..3172d7968 100644
--- a/client/web/compose/src/components/Namespaces/Reminders/Edit.vue
+++ b/client/web/compose/src/components/Namespaces/Reminders/Edit.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="d-flex flex-column h-100"
+    class="d-flex flex-column h-100 p-3"
   >
     <b-form
       v-if="reminder"
@@ -69,11 +69,9 @@
           data-test-id="select-assignee"
           :options="assignees"
           :get-option-label="getUserLabel"
-          :get-option-key="getOptionKey"
           :loading="processingUsers"
           :placeholder="$t('field.kind.user.suggestionPlaceholder')"
-          :reduce="user => user.userID"
-          option-value="userID"
+          :filterable="false"
           @search="searchUsers"
         />
       </b-form-group>
@@ -167,12 +165,6 @@ export default {
       default: () => ({}),
     },
 
-    users: {
-      type: Array,
-      required: true,
-      default: () => [],
-    },
-
     disableSave: {
       type: Boolean,
       default: false,
@@ -190,7 +182,11 @@ export default {
 
       // Do this, so we don't edit the original object
       reminder: undefined,
-      assignees: [{ userID: this.$auth.user.userID }],
+      assignees: [this.$auth.user.userID],
+
+      fetchedUsers: {
+        [this.$auth.user.userID]: this.$t('reminder.edit.assigneePlaceholder'),
+      },
     }
   },
 
@@ -207,28 +203,41 @@ export default {
       deep: true,
       handler (edit) {
         this.reminder = new system.Reminder(edit)
-        this.searchUsers()
+        this.fetchUsers()
       },
     },
   },
 
   methods: {
     searchUsers: _.debounce(function (query) {
-      this.processingUsers = true
-
-      this.$SystemAPI.userList({ query, limit: 15 }).then(({ set = [] }) => {
-        this.assignees = set
-      }).finally(() => {
-        this.processingUsers = false
-      })
+      this.fetchUsers(query)
     }, 300),
 
-    getUserLabel ({ userID, email, name, username }) {
-      if (userID === this.$auth.user.userID) {
-        return this.$t('reminder.edit.assigneePlaceholder')
-      }
+    fetchUsers (query) {
+      this.processingUsers = true
 
-      return name || username || email || `<@${userID}>`
+      return this.$SystemAPI.userList({ query, limit: 15 }).then(({ set = [] }) => {
+        this.assignees = [this.$auth.user.userID]
+        set.forEach(({ userID, name, username, email }) => {
+          if (!this.fetchedUsers[userID]) {
+            this.fetchedUsers[userID] = name || username || email || `<@${userID}>`
+          }
+
+          if (userID === this.$auth.user.userID) {
+            return
+          }
+
+          this.assignees.push(userID)
+        }, [])
+      }).finally(() => {
+        setTimeout(() => {
+          this.processingUsers = false
+        }, 300)
+      })
+    },
+
+    getUserLabel (userID) {
+      return this.fetchedUsers[userID]
     },
 
     getOptionKey ({ userID }) {
diff --git a/client/web/compose/src/components/Namespaces/Reminders/List.vue b/client/web/compose/src/components/Namespaces/Reminders/List.vue
index 83d69937d..6aa387c08 100644
--- a/client/web/compose/src/components/Namespaces/Reminders/List.vue
+++ b/client/web/compose/src/components/Namespaces/Reminders/List.vue
@@ -2,7 +2,7 @@
   <div
     class="d-flex flex-column h-100"
   >
-    <div class="flex-fill overflow-auto px-2">
+    <div class="d-flex flex-column flex-fill gap-2 overflow-auto p-3">
       <div
         v-for="(r, i) in sortedReminders"
         :key="r.reminderID"
@@ -11,7 +11,7 @@
         <hr v-if="r.dismissedAt && sortedReminders[i - 1] ? !sortedReminders[i - 1].dismissedAt : false ">
 
         <div
-          class="border card shadow-sm my-2 p-1"
+          class="border card shadow-sm p-1"
         >
           <div
             class="d-flex flex-row flex-nowrap align-items-center"
diff --git a/client/web/compose/src/components/Namespaces/Reminders/index.vue b/client/web/compose/src/components/Namespaces/Reminders/index.vue
index ea24d5b12..32d7e6d3f 100644
--- a/client/web/compose/src/components/Namespaces/Reminders/index.vue
+++ b/client/web/compose/src/components/Namespaces/Reminders/index.vue
@@ -12,7 +12,6 @@
     <edit
       v-else
       :edit="edit"
-      :users="users"
       :disable-save="disableSave"
       :processing-save="processingSave"
       class="flex-fill"
@@ -26,7 +25,6 @@
 <script>
 import List from './List'
 import Edit from './Edit'
-import { mapGetters } from 'vuex'
 import { system, NoID } from '@cortezaproject/corteza-js'
 
 export default {
@@ -44,12 +42,6 @@ export default {
     }
   },
 
-  computed: {
-    ...mapGetters({
-      users: 'user/set',
-    }),
-  },
-
   mounted () {
     this.fetchReminders()
     // @todo remove this, when sockets get implemented
diff --git a/client/web/compose/src/components/PageBlocks/Navigation/NavTypes/ComposePage.vue b/client/web/compose/src/components/PageBlocks/Navigation/NavTypes/ComposePage.vue
index 84e59a00c..978ae6ef6 100644
--- a/client/web/compose/src/components/PageBlocks/Navigation/NavTypes/ComposePage.vue
+++ b/client/web/compose/src/components/PageBlocks/Navigation/NavTypes/ComposePage.vue
@@ -20,7 +20,6 @@
         label-class="text-primary"
       >
         <c-input-select
-          key="pageID"
           v-model="options.item.pageID"
           :placeholder="$t('navigation.none')"
           :options="pageList"
diff --git a/client/web/reporter/src/components/Common/ColumnSelector.vue b/client/web/reporter/src/components/Common/ColumnSelector.vue
index 60c2600d3..ccb4d90ce 100644
--- a/client/web/reporter/src/components/Common/ColumnSelector.vue
+++ b/client/web/reporter/src/components/Common/ColumnSelector.vue
@@ -1,6 +1,5 @@
 <template>
   <c-input-select
-    key="name"
     :value="value"
     :options="columns"
     :get-option-label="getColumnLabel"
diff --git a/client/web/workflow/src/components/Configurator/Function.vue b/client/web/workflow/src/components/Configurator/Function.vue
index fe316c145..982c727d5 100644
--- a/client/web/workflow/src/components/Configurator/Function.vue
+++ b/client/web/workflow/src/components/Configurator/Function.vue
@@ -122,13 +122,13 @@
                 >
                   <c-input-select
                     v-if="a.target === 'workflow'"
-                    key="workflowID"
                     v-model="a.value"
                     :options="workflowOptions"
                     :get-option-label="getWorkflowLabel"
                     :get-option-key="getWorkflowKey"
                     :reduce="wf => a.type === 'ID' ? wf.workflowID : wf.handle"
                     :placeholder="$t('steps:function.configurator.search-workflow')"
+                    :filterable="false"
                     @input="$root.$emit('change-detected')"
                     @search="searchWorkflows"
                   />
diff --git a/client/web/workflow/src/components/Configurator/Workflow.vue b/client/web/workflow/src/components/Configurator/Workflow.vue
index a0d73b840..47a051b6c 100644
--- a/client/web/workflow/src/components/Configurator/Workflow.vue
+++ b/client/web/workflow/src/components/Configurator/Workflow.vue
@@ -56,6 +56,7 @@
         :get-option-key="getOptionKey"
         :value="user.value"
         :placeholder="$t('run-as.placeholder')"
+        :filterable="false"
         @search="search"
         @input="updateRunAs"
       />
diff --git a/lib/vue/src/components/permissions/CPermissionsModal.vue b/lib/vue/src/components/permissions/CPermissionsModal.vue
index f6b2e2b79..c1101858d 100644
--- a/lib/vue/src/components/permissions/CPermissionsModal.vue
+++ b/lib/vue/src/components/permissions/CPermissionsModal.vue
@@ -46,7 +46,6 @@
             <c-input-select
               v-model="currentRoleID"
               data-test-id="select-user-list-roles"
-              key="roleID"
               label="name"
               :disabled="!currentRoleID"
               :clearable="false"
@@ -198,13 +197,11 @@
       >
         <c-input-select
           data-test-id="select-role"
-          key="roleID"
           v-model="add.roleID"
           :options="roles"
           :get-option-key="getOptionRoleKey"
           label="name"
           multiple
-          clearable
           :disabled="!!add.userID"
           :placeholder="labels.add.role.placeholder"
         />
@@ -217,16 +214,13 @@
       >
         <c-input-select
           data-test-id="select-user"
-          key="userID"
           v-model="add.userID"
           :disabled="!!add.roleID.length"
           :options="userOptions"
           :get-option-label="getUserLabel"
           :get-option-key="getOptionUserKey"
-          :reduce="o => o.userID"
-          label="name"
-          clearable
           :placeholder="labels.add.user.placeholder"
+          :filterable="false"
           @search="searchUsers"
         />
       </b-form-group>
@@ -293,6 +287,8 @@ export default {
 
       evaluate: [],
 
+      fetchedUsers: {},
+
       add: {
         roleID: [],
         userID: undefined,
@@ -370,7 +366,7 @@ export default {
         if (!this.roles.length) {
           return this.fetchRoles()
         } else if (this.currentRoleID) {
-          return this.reevaluatePermissions(this.currentRoleID)
+          return this.reEvaluatePermissions(this.currentRoleID)
         }
       }).finally(() => {
         this.processing = false
@@ -398,10 +394,14 @@ export default {
       const roleID = this.currentRoleID
 
       this.api.permissionsUpdate({ roleID, rules }).then(() => {
-        this.reevaluatePermissions(roleID)
-      }).finally(() => {
-        this.submitting = false
-      })
+        this.reEvaluatePermissions(roleID)
+        this.toastSuccess(this.$t('permissions:ui.notification.save.success'))
+      }).catch(this.toastErrorHandler(this.$t('permissions:ui.notification.save.failed')))
+        .finally(() => {
+          setTimeout(() => {
+            this.submitting = false
+          }, 300)
+        })
     },
 
     async fetchPermissions () {
@@ -444,7 +444,7 @@ export default {
         })
     },
 
-    async reevaluatePermissions (roleID) {
+    async reEvaluatePermissions (roleID) {
       return this.fetchRules(roleID).then(() => {
         return Promise.all(this.evaluate.map(e => {
           let { roleID = [], userID } = e
@@ -467,15 +467,23 @@ export default {
 
       this.$SystemAPI.userList({ query, limit: 15 })
         .then(({ set }) => {
-          this.userOptions = set.map(m => Object.freeze(m))
+          this.userOptions = set.reduce((acc, { userID, name, username, email, handle }) => {
+            if (!this.fetchedUsers[userID]) {
+              this.fetchedUsers[userID] = name || username || email || `<@${userID}>`
+            }
+
+            acc.push(userID)
+
+            return acc
+          }, [])
         })
         .finally(() => {
           loading(false)
         })
     },
 
-    getUserLabel ({ userID, email, name, username }) {
-      return name || username || email || `<@${userID}>`
+    getUserLabel (userID) {
+      return this.fetchedUsers[userID]
     },
 
     onAddEval () {
@@ -504,8 +512,7 @@ export default {
 
     getEvalName ({ userID, roleID }) {
       if (userID) {
-        const { name, username, email, handle } = this.userOptions.find(({ userID: id }) => id === userID) || {}
-        return [name || username || email || handle || userID || '']
+        return [this.fetchedUsers[userID]]
       } else {
         return roleID.map(({ name }) => name)
       }
@@ -589,10 +596,6 @@ export default {
       return roleID
     },
 
-    getOptionUserKey ({ userID }) {
-      return userID
-    },
-
     setDefaultValues () {
       this.processing = false
       this.submitting = false
@@ -608,6 +611,7 @@ export default {
       this.currentRoleID = undefined
       this.evaluate = []
       this.add = {}
+      this.fetchedUsers = {}
     },
 
     destroyEvents() {
diff --git a/lib/vue/src/components/privacy/CSensitivityLevelPicker.vue b/lib/vue/src/components/privacy/CSensitivityLevelPicker.vue
index 3e5f18b8b..23dea5e95 100644
--- a/lib/vue/src/components/privacy/CSensitivityLevelPicker.vue
+++ b/lib/vue/src/components/privacy/CSensitivityLevelPicker.vue
@@ -1,7 +1,6 @@
 <template>
   <c-input-select
     data-test-id="select-sens-lvl"
-    key="type"
     :value="_value"
     :disabled="_disabled"
     :options="sensitivityLevels"
diff --git a/lib/vue/src/components/reminders/CReminderSidebar.vue b/lib/vue/src/components/reminders/CReminderSidebar.vue
index e9eca8686..668febb3d 100644
--- a/lib/vue/src/components/reminders/CReminderSidebar.vue
+++ b/lib/vue/src/components/reminders/CReminderSidebar.vue
@@ -3,7 +3,7 @@
     v-model="isVisible"
     :title="title"
     header-class="d-flex align-items-center justify-content-between reminder-sidebar-header p-3 border-bottom"
-    body-class="d-flex flex-column overflow-hidden bg-white p-3"
+    body-class="d-flex flex-column overflow-hidden bg-white"
     :backdrop="isMobile"
     no-footer
     right
diff --git a/locale/en/corteza-webapp-compose/permissions.yaml b/locale/en/corteza-webapp-compose/permissions.yaml
index ce39e150f..8b2b6038f 100644
--- a/locale/en/corteza-webapp-compose/permissions.yaml
+++ b/locale/en/corteza-webapp-compose/permissions.yaml
@@ -5,6 +5,11 @@ ui:
   loading: Loading permissions
   label: Permissions
 
+  notification:
+    save:
+      success: Permissions saved
+      failed: Failed to save permissions
+
   edit:
     label: User roles
     description: Select role to set permissions