Merge pull request #7211 from aignatov-bio/ai-sci-10357-access-member-fixes

Update access modal interactions [SCI-10357][SCI-10348]

app/javascript/vue/shared/access_modal/assign_flyout.vue

@@ -3,7 +3,7 @@
     <div class="sci-label mb-2">
       {{ i18n.t('access_permissions.partials.new_assignments_form.grant_access') }}
     </div>
-    <GeneralDropdown @open="$emit('assigningNewUsers', true)" @close="$emit('assigningNewUsers', false)" :fieldOnlyOpen="true" :fixed-width="true">
+    <GeneralDropdown ref="dropdown" @open="$emit('assigningNewUsers', true)" @close="$emit('assigningNewUsers', false)" :fieldOnlyOpen="true" :fixed-width="true">
       <template v-slot:field>
         <div class="sci-input-container-v2 left-icon">
           <input type="text" v-model="query" class="sci-input-field"
@@ -28,14 +28,14 @@
             @setRole="(...args) => this.assignRole('all', ...args)"
           ></MenuDropdown>
         </div>
-        <perfect-scrollbar class="h-80 relative">
+        <perfect-scrollbar class="max-h-80 relative">
           <div v-for="user in filteredUsers" :key="user.id" class="py-2 flex items-center w-full">
             <div>
               <img :src="user.attributes.avatar_url" class="rounded-full w-8 h-8">
             </div>
             <div class="truncate ml-2" :title="user.attributes.name">{{ user.attributes.name }}</div>
             <div v-if="user.attributes.current_user" class="text-nowrap">
-              {{ `(${i18n.t('access_permissions.you')})` }}
+              {{ i18n.t('access_permissions.you') }}
             </div>
             <MenuDropdown
               class="ml-auto"
@@ -46,6 +46,9 @@
               @setRole="(...args) => this.assignRole(user.id, ...args)"
             ></MenuDropdown>
           </div>
+          <div v-if="filteredUsers.length === 0" class="p-2 flex items-center w-full">
+            {{ i18n.t('access_permissions.no_results') }}
+          </div>
         </perfect-scrollbar>
       </template>
     </GeneralDropdown>
@@ -59,7 +62,7 @@ import GeneralDropdown from '../general_dropdown.vue';
 import axios from '../../../packs/custom_axios.js';
 
 export default {
-  emits: ['modified', 'usersReloaded', 'changeVisibility'],
+  emits: ['modified', 'usersReloaded', 'changeVisibility', 'assigningNewUsers'],
   props: {
     params: {
       type: Object,
@@ -138,6 +141,8 @@ export default {
           this.$emit('modified');
           HelperModule.flashAlertMsg(response.data.message, 'success');
           this.getUnAssignedUsers();
+          this.query = '';
+          this.$refs.dropdown.closeMenu();
 
           if (id === 'all') {
             this.$emit('changeVisibility', true, roleId);

app/javascript/vue/shared/access_modal/edit.vue

@@ -63,7 +63,7 @@ import MenuDropdown from '../menu_dropdown.vue';
 import axios from '../../../packs/custom_axios.js';
 
 export default {
-  emits: ['modified', 'usersReloaded', 'changeVisibility'],
+  emits: ['modified', 'usersReloaded', 'changeVisibility', 'assigningNewUsers'],
   props: {
     params: {
       type: Object,

app/javascript/vue/shared/datatable/tableHeader.js

@@ -1,6 +1,6 @@
 export default {
   template: `
-    <div class="w-full grid items-center gap-2 grid-cols-[auto_1.5rem]"
+    <div class="w-full grid items-center group gap-2 grid-cols-[auto_1.5rem]"
          :class="{'cursor-pointer': params.enableSorting}"
          :data-e2e="'e2e-CO-TableHeader-' + params.column.colId "
          @click="onSortRequested((activeSort == 'asc' ? 'desc' : 'asc'), $event)">
@@ -12,6 +12,9 @@ export default {
       <div v-if="activeSort == 'desc'" class="customSortUpLabel text-sn-black">
         <i class="sn-icon sn-icon-sort-down"></i>
       </div>
+      <div v-if="activeSort == null && params.enableSorting" class="text-sn-black tw-hidden group-hover:block">
+        <i class="sn-icon sn-icon-sort"></i>
+      </div>
     </div>
   `,
   data() {

config/locales/en.yml

@@ -3715,6 +3715,7 @@ en:
     remove_access: "Remove access"
     grant_access: "Grant new access"
     you: "you"
+    no_results: "No results"
     create:
       success: "You have successfully granted access to %{member_name}."
       failure: "Something went wrong"