Merge branch '36705-search-across-full-name-for-assignee-autocomplete' into 'master'

Search across full name for mentions autocomplete

See merge request gitlab-org/gitlab!52488

app/assets/javascripts/gfm_auto_complete.js

@@ -14,6 +14,10 @@ function sanitize(str) {
   return str.replace(/<(?:.|\n)*?>/gm, '');
 }
 
+function createMemberSearchString(member) {
+  return `${member.name.replace(/ /g, '')} ${member.username}`;
+}
+
 export function membersBeforeSave(members) {
   return members.map((member) => {
     const GROUP_TYPE = 'Group';
@@ -40,7 +44,7 @@ export function membersBeforeSave(members) {
       username: member.username,
       avatarTag: autoCompleteAvatar.length === 1 ? txtAvatar : imgAvatar,
       title: sanitize(title),
-      search: sanitize(`${member.username} ${member.name}`),
+      search: sanitize(createMemberSearchString(member)),
       icon: avatarIcon,
       availability: member?.availability,
     };
@@ -298,9 +302,7 @@ class GfmAutoComplete {
 
           // Cache assignees list for easier filtering later
           assignees =
-            SidebarMediator.singleton?.store?.assignees?.map(
-              (assignee) => `${assignee.username} ${assignee.name}`,
-            ) || [];
+            SidebarMediator.singleton?.store?.assignees?.map(createMemberSearchString) || [];
 
           const match = GfmAutoComplete.defaultMatcher(flag, subtext, this.app.controllers);
           return match && match.length ? match[1] : null;

changelogs/unreleased/36705-search-across-full-name-for-assignee-autocomplete.yml

+---
+title: Search across full name for mentions autocomplete
+merge_request: 52488
+author:
+type: added

spec/features/issues/gfm_autocomplete_spec.rb

@@ -183,6 +183,16 @@ RSpec.describe 'GFM autocomplete', :js do
       expect(find('#at-view-users')).to have_content(user.name)
     end
 
+    it 'searches across full name for assignees' do
+      page.within '.timeline-content-form' do
+        find('#note-body').native.send_keys('@speciąlsome')
+      end
+
+      wait_for_requests
+
+      expect(find('.atwho-view li', visible: true)).to have_content(user.name)
+    end
+
     it 'selects the first item for non-assignee dropdowns if a query is entered' do
       page.within '.timeline-content-form' do
         find('#note-body').native.send_keys(':1')

spec/frontend/gfm_auto_complete_spec.js

@@ -493,7 +493,7 @@ describe('GfmAutoComplete', () => {
           username: 'my-group',
           avatarTag: '<div class="avatar rect-avatar center avatar-inline s26">M</div>',
           title: 'My Group (2)',
-          search: 'my-group My Group',
+          search: 'MyGroup my-group',
           icon: '',
         },
       ]);
@@ -506,7 +506,7 @@ describe('GfmAutoComplete', () => {
           avatarTag:
             '<img src="./group.jpg" alt="my-group" class="avatar rect-avatar avatar-inline center s26"/>',
           title: 'My Group (2)',
-          search: 'my-group My Group',
+          search: 'MyGroup my-group',
           icon: '',
         },
       ]);
@@ -519,7 +519,7 @@ describe('GfmAutoComplete', () => {
           avatarTag:
             '<img src="./group.jpg" alt="my-group" class="avatar rect-avatar avatar-inline center s26"/>',
           title: 'My Group',
-          search: 'my-group My Group',
+          search: 'MyGroup my-group',
           icon:
             '<svg class="s16 vertical-align-middle gl-ml-2"><use xlink:href="undefined#notifications-off" /></svg>',
         },
@@ -537,7 +537,7 @@ describe('GfmAutoComplete', () => {
           avatarTag:
             '<img src="./users.jpg" alt="my-user" class="avatar  avatar-inline center s26"/>',
           title: 'My User',
-          search: 'my-user My User',
+          search: 'MyUser my-user',
           icon: '',
         },
       ]);