From 377bda54fde4fdddedebd52969564ccdbd21ccb3 Mon Sep 17 00:00:00 2001
From: Deepika Guliani <dguliani@gitlab.com>
Date: Tue, 23 Jan 2024 13:55:35 +0530
Subject: [PATCH 1/3] Sort assignees by name on frontend

:Behind work_items_mvc_2 FF
---
 ...item_sidebar_dropdown_widget_with_edit.vue |  5 ++++-
 .../work_item_assignees_with_edit.vue         |  7 ++++++-
 app/assets/javascripts/work_items/utils.js    | 10 +++++++++
 .../work_item_assignees_with_edit_spec.js     | 21 +++++++++++++++++--
 4 files changed, 39 insertions(+), 4 deletions(-)

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 21512ba60669d3..d88fffd89c71eb 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
@@ -93,6 +93,7 @@ export default {
     return {
       isEditing: false,
       localSelectedItem: this.itemValue,
+      isDirty: false,
     };
   },
   computed: {
@@ -111,6 +112,7 @@ export default {
       handler(newVal) {
         if (!this.isEditing) {
           this.localSelectedItem = newVal;
+          this.isDirty = false;
         }
       },
     },
@@ -127,6 +129,7 @@ export default {
       if (!this.multiSelect) {
         this.$emit('updateValue', item);
       } else {
+        this.isDirty = true;
         this.$emit('updateSelected', this.localSelectedItem);
       }
     },
@@ -135,7 +138,7 @@ export default {
     },
     onListboxHide() {
       this.isEditing = false;
-      if (this.multiSelect) {
+      if (this.multiSelect && this.isDirty) {
         this.$emit('updateValue', this.localSelectedItem);
       }
     },
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 29c7e0032ef44d..b10b321c751d2f 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
@@ -1,6 +1,7 @@
 <script>
 import { GlButton } from '@gitlab/ui';
 import { unionBy } from 'lodash';
+import { sortNameAlphabetically } from '~/work_items/utils';
 import currentUserQuery from '~/graphql_shared/queries/current_user.query.graphql';
 import groupUsersSearchQuery from '~/graphql_shared/queries/group_users_search.query.graphql';
 import usersSearchQuery from '~/graphql_shared/queries/users_search.query.graphql';
@@ -142,7 +143,11 @@ export default {
       return unionBy(this.assignees, this.searchUsers, 'id');
     },
     localAssignees() {
-      return this.filteredAssignees.filter(({ id }) => this.localAssigneeIds.includes(id)) || [];
+      return (
+        this.filteredAssignees
+          .filter(({ id }) => this.localAssigneeIds.includes(id))
+          .sort(sortNameAlphabetically) || []
+      );
     },
   },
   watch: {
diff --git a/app/assets/javascripts/work_items/utils.js b/app/assets/javascripts/work_items/utils.js
index 6d304e7ebf01ab..48516e60a55d71 100644
--- a/app/assets/javascripts/work_items/utils.js
+++ b/app/assets/javascripts/work_items/utils.js
@@ -66,3 +66,13 @@ export const isReference = (input) => {
 
   return /^([\w-]+(?:\/[\w-]+)*)?[#&](\d+)$/.test(input);
 };
+
+export const sortNameAlphabetically = (a, b) => {
+  if (a.name < b.name) {
+    return -1;
+  }
+  if (a.name > b.name) {
+    return 1;
+  }
+  return 0;
+};
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 35062a6ebf7367..c7f4643cfb8af1 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,14 +1,16 @@
 import Vue, { nextTick } from 'vue';
 import VueApollo from 'vue-apollo';
+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';
 import groupUsersSearchQuery from '~/graphql_shared/queries/group_users_search.query.graphql';
 import usersSearchQuery from '~/graphql_shared/queries/users_search.query.graphql';
 import currentUserQuery from '~/graphql_shared/queries/current_user.query.graphql';
 import InviteMembersTrigger from '~/invite_members/components/invite_members_trigger.vue';
+import UncollapsedAssigneeList from '~/sidebar/components/assignees/uncollapsed_assignee_list.vue';
 import updateWorkItemMutation from '~/work_items/graphql/update_work_item.mutation.graphql';
 import createMockApollo from 'helpers/mock_apollo_helper';
-import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import { shallowMountExtended, mountExtended } from 'helpers/vue_test_utils_helper';
 import { mockTracking } from 'helpers/tracking_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import {
@@ -33,6 +35,7 @@ describe('WorkItemAssigneesWithEdit component', () => {
   const findAssignSelfButton = () => wrapper.findByTestId('assign-self');
   const findSidebarDropdownWidget = () =>
     wrapper.findComponent(WorkItemSidebarDropdownWidgetWithEdit);
+  const findAssigneeList = () => wrapper.findComponent(UncollapsedAssigneeList);
 
   const successSearchQueryHandler = jest
     .fn()
@@ -59,6 +62,7 @@ describe('WorkItemAssigneesWithEdit component', () => {
   };
 
   const createComponent = ({
+    mountFn = shallowMountExtended,
     assignees = mockAssignees,
     searchQueryHandler = successSearchQueryHandler,
     currentUserQueryHandler = successCurrentUserQueryHandler,
@@ -73,7 +77,7 @@ describe('WorkItemAssigneesWithEdit component', () => {
       [updateWorkItemMutation, successUpdateWorkItemMutationHandler],
     ]);
 
-    wrapper = shallowMountExtended(WorkItemAssignees, {
+    wrapper = mountFn(WorkItemAssignees, {
       provide: {
         isGroup: false,
       },
@@ -246,6 +250,19 @@ describe('WorkItemAssigneesWithEdit component', () => {
     });
   });
 
+  describe('sorting', () => {
+    it('always sorts assignees based on alphabetical order on the frontend', async () => {
+      createComponent({ mountFn: mountExtended });
+      await waitForPromises();
+
+      expect(findAssigneeList().exists()).toBe(true);
+      expect(findAssigneeList().props('users')).toHaveLength(mockAssignees.length);
+      expect(findAssigneeList().props('users')).toStrictEqual(
+        mockAssignees.sort(sortNameAlphabetically),
+      );
+    });
+  });
+
   describe('invite members', () => {
     it('does not render `Invite members` link if user has no permission to invite members', () => {
       createComponent();
-- 
GitLab


From eb62f41436650591fd3cc7cee135a0b13c96e49e Mon Sep 17 00:00:00 2001
From: Deepika Guliani <dguliani@gitlab.com>
Date: Wed, 24 Jan 2024 11:46:55 +0530
Subject: [PATCH 2/3] Apply caseinsensitive sorting

:Behing work_items_mvc_2 FF
---
 app/assets/javascripts/work_items/utils.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/app/assets/javascripts/work_items/utils.js b/app/assets/javascripts/work_items/utils.js
index 48516e60a55d71..95e8d399637d4f 100644
--- a/app/assets/javascripts/work_items/utils.js
+++ b/app/assets/javascripts/work_items/utils.js
@@ -68,10 +68,12 @@ export const isReference = (input) => {
 };
 
 export const sortNameAlphabetically = (a, b) => {
-  if (a.name < b.name) {
+  const aName = a.name.toLowerCase();
+  const bName = b.name.toLowerCase();
+  if (aName < bName) {
     return -1;
   }
-  if (a.name > b.name) {
+  if (aName > bName) {
     return 1;
   }
   return 0;
-- 
GitLab


From 21dfe6264c7f5ef606d865039194ba3521d9f134 Mon Sep 17 00:00:00 2001
From: Deepika Guliani <dguliani@gitlab.com>
Date: Thu, 25 Jan 2024 12:13:16 +0530
Subject: [PATCH 3/3] Apply reviewer feedback

:Behind work_items_mvc_2 FF
---
 .../components/work_item_assignees_with_edit.vue       |  2 ++
 app/assets/javascripts/work_items/utils.js             | 10 +---------
 2 files changed, 3 insertions(+), 9 deletions(-)

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 b10b321c751d2f..670661a324808d 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
@@ -195,6 +195,8 @@ export default {
         this.throwUpdateError();
       } finally {
         this.updateInProgress = false;
+        this.searchKey = '';
+        this.searchStarted = false;
       }
     },
     setLocalAssigneeIdsOnEvent(assignees) {
diff --git a/app/assets/javascripts/work_items/utils.js b/app/assets/javascripts/work_items/utils.js
index 95e8d399637d4f..450d88fdabaf42 100644
--- a/app/assets/javascripts/work_items/utils.js
+++ b/app/assets/javascripts/work_items/utils.js
@@ -68,13 +68,5 @@ export const isReference = (input) => {
 };
 
 export const sortNameAlphabetically = (a, b) => {
-  const aName = a.name.toLowerCase();
-  const bName = b.name.toLowerCase();
-  if (aName < bName) {
-    return -1;
-  }
-  if (aName > bName) {
-    return 1;
-  }
-  return 0;
+  return a.name.toLowerCase().localeCompare(b.name.toLowerCase());
 };
-- 
GitLab