diff --git a/app/assets/javascripts/work_items/components/shared/work_item_sidebar_dropdown_widget_with_edit.vue b/app/assets/javascripts/work_items/components/shared/work_item_sidebar_dropdown_widget_with_edit.vue
index 909dff097eb0cea927382ca170a4f40496c2cc92..14276cac23a4714ce9fa351fbf2c8fdcfa7af64d 100644
--- a/app/assets/javascripts/work_items/components/shared/work_item_sidebar_dropdown_widget_with_edit.vue
+++ b/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"
diff --git a/app/assets/javascripts/work_items/components/work_item_assignees_with_edit.vue b/app/assets/javascripts/work_items/components/work_item_assignees_with_edit.vue
index eb3c8b8a8f1d82e92d79d1b9f6c3547ada9606d3..a26a25935a30212b0b069439feb7917896696b3f 100644
--- a/app/assets/javascripts/work_items/components/work_item_assignees_with_edit.vue
+++ b/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!">
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 29eb0a159b5f89517da017277e86be197a6c2bb9..35874470f9111137d1df3ab7d56fdb548d1eff9f 100644
--- a/locale/gitlab.pot
+++ b/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 ""
diff --git a/spec/frontend/work_items/components/work_item_assignees_with_edit_spec.js b/spec/frontend/work_items/components/work_item_assignees_with_edit_spec.js
index ac2531cb413d0d4205f2c70a2a0739bf67dddc41..fdda0d746ea24bf1abff79724f8c16db7e708dae 100644
--- a/spec/frontend/work_items/components/work_item_assignees_with_edit_spec.js
+++ b/spec/frontend/work_items/components/work_item_assignees_with_edit_spec.js
@@ -1,5 +1,6 @@
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', () => {