Merge branch 'psi-top-selected' into 'master'

Show selected assignees at top of the list

See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/148858



Merged-by: Jose Ivan Vargas <jvargas@gitlab.com>
Approved-by: Briley Sandlin <bsandlin@gitlab.com>
Approved-by: Nick Leonard <nleonard@gitlab.com>
Reviewed-by: Simon Knox <simon@gitlab.com>
Co-authored-by: Simon Knox <simon@gitlab.com>

app/assets/javascripts/work_items/components/shared/work_item_sidebar_dropdown_widget_with_edit.vue

@@ -207,6 +207,7 @@ export default {
         :multiple="multiSelect"
         :searchable="searchable"
         start-opened
+        block
         is-check-centered
         :infinite-scroll="infiniteScroll"
         :searching="loading"
@@ -217,7 +218,7 @@ export default {
         :selected="localSelectedItem"
         :reset-button-label="resetButton"
         :infinite-scroll-loading="infiniteScrollLoading"
-        toggle-class="gl-w-full! work-item-sidebar-dropdown-toggle"
+        toggle-class="work-item-sidebar-dropdown-toggle"
         @reset="unassignValue"
         @search="debouncedSearchKeyUpdate"
         @select="handleItemClick"

app/assets/javascripts/work_items/components/work_item_assignees_with_edit.vue

@@ -67,7 +67,8 @@ export default {
   },
   data() {
     return {
-      localAssigneeIds: this.assignees.map(({ id }) => id),
+      localAssigneeIds: [],
+      assigneeIdsToShowAtTopOfTheListbox: [],
       searchStarted: false,
       searchKey: '',
       users: [],
@@ -111,14 +112,51 @@ export default {
     },
   },
   computed: {
-    shouldShowParticipants() {
-      return this.searchKey === '';
-    },
     searchUsers() {
-      const allUsers = this.shouldShowParticipants
-        ? unionBy(this.users, this.participants, 'id')
-        : this.users;
-      return allUsers.map((user) => ({
+      // when there is no search text, then we show selected users first
+      // followed by participants, then all other users
+      if (this.searchKey === '') {
+        const alphabetizedUsers = unionBy(this.users, this.participants, 'id').sort(
+          sortNameAlphabetically,
+        );
+
+        if (alphabetizedUsers.length === 0) {
+          return [];
+        }
+
+        const currentUser = alphabetizedUsers.find(({ id }) => id === this.currentUser?.id);
+
+        const allUsers = unionBy([currentUser], alphabetizedUsers, 'id').map((user) => ({
+          ...user,
+          value: user?.id,
+          text: user?.name,
+        }));
+
+        const selectedUsers =
+          allUsers
+            .filter(({ id }) => this.assigneeIdsToShowAtTopOfTheListbox.includes(id))
+            .sort(sortNameAlphabetically) || [];
+
+        const unselectedUsers = allUsers.filter(
+          ({ id }) => !this.assigneeIdsToShowAtTopOfTheListbox.includes(id),
+        );
+
+        // don't show the selected section if it's empty
+        if (selectedUsers.length === 0) {
+          return allUsers.map((user) => ({
+            ...user,
+            value: user?.id,
+            text: user?.name,
+          }));
+        }
+
+        return [
+          { options: selectedUsers, text: __('Selected') },
+          { options: unselectedUsers, text: __('All users'), textSrOnly: true },
+        ];
+      }
+
+      return this.users.map((user) => ({
         ...user,
         value: user?.id,
         text: user?.name,
@@ -174,8 +212,15 @@ export default {
     assignees: {
       handler(newVal) {
         this.localAssigneeIds = newVal.map(({ id }) => id);
+        this.assigneeIdsToShowAtTopOfTheListbox = this.localAssigneeIds;
       },
       deep: true,
+      immediate: true,
+    },
+    searchKey(newVal, oldVal) {
+      if (newVal === '' && oldVal !== '') {
+        this.assigneeIdsToShowAtTopOfTheListbox = this.localAssigneeIds;
+      }
     },
   },
   methods: {
@@ -241,7 +286,8 @@ export default {
       this.searchStarted = true;
     },
     onDropdownHide() {
-      this.setSearchKey('', false);
+      this.setSearchKey('');
+      this.assigneeIdsToShowAtTopOfTheListbox = this.localAssigneeIds;
     },
   },
 };
@@ -271,7 +317,7 @@ export default {
     @dropdownHidden="onDropdownHide"
   >
     <template #list-item="{ item }">
-      <sidebar-participant :user="item" />
+      <sidebar-participant v-if="item" :user="item" />
     </template>
     <template v-if="canInviteMembers" #footer>
       <gl-button category="tertiary" block class="gl-justify-content-start!">

locale/gitlab.pot

@@ -5104,6 +5104,9 @@ msgstr ""
 msgid "All threads resolved!"
 msgstr ""
+msgid "All users"
+msgstr ""
+
 msgid "All users in this group must set up two-factor authentication"
 msgstr ""

spec/frontend/work_items/components/work_item_assignees_with_edit_spec.js

 import Vue, { nextTick } from 'vue';
 import VueApollo from 'vue-apollo';
+import { cloneDeep } from 'lodash';
 import { sortNameAlphabetically } from '~/work_items/utils';
 import WorkItemAssignees from '~/work_items/components/work_item_assignees_with_edit.vue';
 import WorkItemSidebarDropdownWidgetWithEdit from '~/work_items/components/shared/work_item_sidebar_dropdown_widget_with_edit.vue';
@@ -57,6 +58,10 @@ describe('WorkItemAssigneesWithEdit component', () => {
     findSidebarDropdownWidget().vm.$emit('dropdownShown');
   };
 
+  const hideDropdown = () => {
+    findSidebarDropdownWidget().vm.$emit('dropdownHidden');
+  };
+
   const createComponent = ({
     mountFn = shallowMountExtended,
     assignees = mockAssignees,
@@ -102,7 +107,7 @@ describe('WorkItemAssigneesWithEdit component', () => {
       showDropdown();
       await waitForPromises();
 
-      expect(findSidebarDropdownWidget().props('listItems')).toHaveLength(0);
+      expect(findSidebarDropdownWidget().props('listItems')).toEqual([]);
     });
 
     it('emits error event if search users query fails', async () => {
@@ -113,7 +118,7 @@ describe('WorkItemAssigneesWithEdit component', () => {
       expect(wrapper.emitted('error')).toEqual([[i18n.fetchError]]);
     });
 
-    it('passes the correct props to clear search text on item select', () => {
+    it('clears search text on item select', () => {
       createComponent();
 
       expect(findSidebarDropdownWidget().props('clearSearchOnItemSelect')).toBe(true);
@@ -253,7 +258,7 @@ describe('WorkItemAssigneesWithEdit component', () => {
   });
 
   describe('sorting', () => {
-    it('always sorts assignees based on alphabetical order on the frontend', async () => {
+    it('sorts assignees based on alphabetical order on the frontend', async () => {
       createComponent({ mountFn: mountExtended });
       await waitForPromises();
 
@@ -263,6 +268,74 @@ describe('WorkItemAssigneesWithEdit component', () => {
         mockAssignees.sort(sortNameAlphabetically),
       );
     });
+
+    it('sorts selected assignees first', async () => {
+      const [
+        unselected,
+        selected,
+      ] = projectMembersAutocompleteResponseWithCurrentUser.data.workspace.users;
+
+      createComponent({
+        assignees: [selected],
+      });
+      showDropdown();
+      await waitForPromises();
+
+      expect(findSidebarDropdownWidget().props('listItems')).toMatchObject(
+        cloneDeep([
+          { options: [selected], text: 'Selected' },
+          { options: [unselected], text: 'All users', textSrOnly: true },
+        ]),
+      );
+    });
+
+    it('shows current user above other users', async () => {
+      const [unselected, currentUser] = cloneDeep(
+        projectMembersAutocompleteResponseWithCurrentUser.data.workspace.users,
+      );
+
+      createComponent({
+        assignees: [],
+      });
+      showDropdown();
+      await waitForPromises();
+
+      findSidebarDropdownWidget().vm.$emit('updateValue', currentUser.id);
+
+      expect(findSidebarDropdownWidget().props('listItems')).toMatchObject([
+        { text: currentUser.name },
+        { text: unselected.name },
+      ]);
+    });
+
+    it('does not move newly selected assignees to the top until dropdown is closed', async () => {
+      const [unselected, currentUser] = cloneDeep(
+        projectMembersAutocompleteResponseWithCurrentUser.data.workspace.users,
+      );
+
+      createComponent({
+        assignees: [],
+      });
+      showDropdown();
+      await waitForPromises();
+
+      findSidebarDropdownWidget().vm.$emit('updateValue', currentUser.id);
+
+      expect(findSidebarDropdownWidget().props('listItems')).toMatchObject([
+        { text: currentUser.name },
+        { text: unselected.name },
+      ]);
+
+      hideDropdown();
+      await waitForPromises();
+      showDropdown();
+      await waitForPromises();
+
+      expect(findSidebarDropdownWidget().props('listItems')).toMatchObject([
+        { options: [currentUser], text: 'Selected' },
+        { options: [unselected], text: 'All users', textSrOnly: true },
+      ]);
+    });
   });
 
   describe('invite members', () => {