Revert "Merge branch '118597-improve-autofill-suggestions-for-usernames' into 'master'"

This reverts merge request !54072

app/assets/javascripts/gfm_auto_complete.js

@@ -266,7 +266,6 @@ class GfmAutoComplete {
       },
       // eslint-disable-next-line no-template-curly-in-string
       insertTpl: '${atwho-at}${username}',
-      limit: 10,
       searchKey: 'search',
       alwaysHighlightFirst: true,
       skipSpecialCharacterTest: true,
@@ -312,31 +311,6 @@ class GfmAutoComplete {
 
           return data;
         },
-        sorter(query, items) {
-          if (!query) {
-            return items;
-          }
-
-          const lowercaseQuery = query.toLowerCase();
-          const members = items.slice();
-          const { nameOrUsernameStartsWith, nameOrUsernameIncludes } = GfmAutoComplete.Members;
-
-          return members.sort((a, b) => {
-            if (nameOrUsernameStartsWith(a, lowercaseQuery)) {
-              return -1;
-            }
-            if (nameOrUsernameStartsWith(b, lowercaseQuery)) {
-              return 1;
-            }
-            if (nameOrUsernameIncludes(a, lowercaseQuery)) {
-              return -1;
-            }
-            if (nameOrUsernameIncludes(b, lowercaseQuery)) {
-              return 1;
-            }
-            return 0;
-          });
-        },
       },
     });
   }
@@ -798,14 +772,6 @@ GfmAutoComplete.Members = {
       title,
     )}${availabilityStatus}</small> ${icon}</li>`;
   },
-  nameOrUsernameStartsWith(member, query) {
-    // `member.search` is a name:username string like `MargeSimpson msimpson`
-    return member.search.split(' ').some((name) => name.toLowerCase().startsWith(query));
-  },
-  nameOrUsernameIncludes(member, query) {
-    // `member.search` is a name:username string like `MargeSimpson msimpson`
-    return member.search.toLowerCase().includes(query);
-  },
 };
 GfmAutoComplete.Labels = {
   templateFunction(color, title) {

changelogs/unreleased/118597-improve-autofill-suggestions-for-usernames.yml

----
-title: Improve at.js members autocomplete matching
-merge_request: 54072
-author:
-type: changed

spec/features/issues/gfm_autocomplete_spec.rb

@@ -6,7 +6,6 @@ RSpec.describe 'GFM autocomplete', :js do
   let_it_be(:user_xss_title) { 'eve <img src=x onerror=alert(2)&lt;img src=x onerror=alert(1)&gt;' }
   let_it_be(:user_xss) { create(:user, name: user_xss_title, username: 'xss.user') }
   let_it_be(:user) { create(:user, name: '💃speciąl someone💃', username: 'someone.special') }
-  let_it_be(:user2) { create(:user, name: 'Marge Simpson', username: 'msimpson') }
   let_it_be(:group) { create(:group, name: 'Ancestor') }
   let_it_be(:child_group) { create(:group, parent: group, name: 'My group') }
   let_it_be(:project) { create(:project, group: child_group) }
@@ -17,7 +16,6 @@ RSpec.describe 'GFM autocomplete', :js do
   before_all do
     project.add_maintainer(user)
     project.add_maintainer(user_xss)
-    project.add_maintainer(user2)
   end
 
   describe 'when tribute_autocomplete feature flag is off' do
@@ -88,7 +86,11 @@ RSpec.describe 'GFM autocomplete', :js do
 
       wait_for_requests
 
-      expect(find_highlighted_autocomplete_item).to have_content(user_xss.username)
+      expect(page).to have_selector('.atwho-container')
+
+      page.within '.atwho-container #at-view-users' do
+        expect(find('li').text).to have_content(user_xss.username)
+      end
     end
 
     it 'opens autocomplete menu for Milestone when field starts with text with item escaping HTML characters' do
@@ -188,23 +190,7 @@ RSpec.describe 'GFM autocomplete', :js do
 
       wait_for_requests
 
-      expect(find_highlighted_autocomplete_item).to have_content(user.name)
-    end
-
-    it 'shows names that start with the query as the top result' do
-      type(find('#note-body'), '@mar')
-
-      wait_for_requests
-
-      expect(find_highlighted_autocomplete_item).to have_content(user2.name)
-    end
-
-    it 'shows usernames that start with the query as the top result' do
-      type(find('#note-body'), '@msi')
-
-      wait_for_requests
-
-      expect(find_highlighted_autocomplete_item).to have_content(user2.name)
+      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
@@ -1018,8 +1004,4 @@ RSpec.describe 'GFM autocomplete', :js do
 
     wait_for_requests
   end
-
-  def find_highlighted_autocomplete_item
-    find('.atwho-view li.cur', visible: true)
-  end
 end

spec/frontend/gfm_auto_complete_spec.js

@@ -576,95 +576,55 @@ describe('GfmAutoComplete', () => {
     });
   });
 
-  describe('GfmAutoComplete.Members', () => {
-    const member = {
-      name: 'Marge Simpson',
-      username: 'msimpson',
-      search: 'MargeSimpson msimpson',
-    };
-
-    describe('templateFunction', () => {
-      it('should return html with avatarTag and username', () => {
-        expect(
-          GfmAutoComplete.Members.templateFunction({
-            avatarTag: 'IMG',
-            username: 'my-group',
-            title: '',
-            icon: '',
-            availabilityStatus: '',
-          }),
-        ).toBe('<li>IMG my-group <small></small> </li>');
-      });
-
-      it('should add icon if icon is set', () => {
-        expect(
-          GfmAutoComplete.Members.templateFunction({
-            avatarTag: 'IMG',
-            username: 'my-group',
-            title: '',
-            icon: '<i class="icon"/>',
-            availabilityStatus: '',
-          }),
-        ).toBe('<li>IMG my-group <small></small> <i class="icon"/></li>');
-      });
-
-      it('should add escaped title if title is set', () => {
-        expect(
-          GfmAutoComplete.Members.templateFunction({
-            avatarTag: 'IMG',
-            username: 'my-group',
-            title: 'MyGroup+',
-            icon: '<i class="icon"/>',
-            availabilityStatus: '',
-          }),
-        ).toBe('<li>IMG my-group <small>MyGroup+</small> <i class="icon"/></li>');
-      });
+  describe('Members.templateFunction', () => {
+    it('should return html with avatarTag and username', () => {
+      expect(
+        GfmAutoComplete.Members.templateFunction({
+          avatarTag: 'IMG',
+          username: 'my-group',
+          title: '',
+          icon: '',
+          availabilityStatus: '',
+        }),
+      ).toBe('<li>IMG my-group <small></small> </li>');
+    });
 
-      it('should add user availability status if availabilityStatus is set', () => {
-        expect(
-          GfmAutoComplete.Members.templateFunction({
-            avatarTag: 'IMG',
-            username: 'my-group',
-            title: '',
-            icon: '<i class="icon"/>',
-            availabilityStatus: '<span class="gl-text-gray-500"> (Busy)</span>',
-          }),
-        ).toBe(
-          '<li>IMG my-group <small><span class="gl-text-gray-500"> (Busy)</span></small> <i class="icon"/></li>',
-        );
-      });
+    it('should add icon if icon is set', () => {
+      expect(
+        GfmAutoComplete.Members.templateFunction({
+          avatarTag: 'IMG',
+          username: 'my-group',
+          title: '',
+          icon: '<i class="icon"/>',
+          availabilityStatus: '',
+        }),
+      ).toBe('<li>IMG my-group <small></small> <i class="icon"/></li>');
     });
 
-    describe('nameOrUsernameStartsWith', () => {
-      it.each`
-        query             | result
-        ${'mar'}          | ${true}
-        ${'msi'}          | ${true}
-        ${'margesimpson'} | ${true}
-        ${'msimpson'}     | ${true}
-        ${'arge'}         | ${false}
-        ${'rgesimp'}      | ${false}
-        ${'maria'}        | ${false}
-        ${'homer'}        | ${false}
-      `('returns $result for $query', ({ query, result }) => {
-        expect(GfmAutoComplete.Members.nameOrUsernameStartsWith(member, query)).toBe(result);
-      });
+    it('should add escaped title if title is set', () => {
+      expect(
+        GfmAutoComplete.Members.templateFunction({
+          avatarTag: 'IMG',
+          username: 'my-group',
+          title: 'MyGroup+',
+          icon: '<i class="icon"/>',
+          availabilityStatus: '',
+        }),
+      ).toBe('<li>IMG my-group <small>MyGroup+</small> <i class="icon"/></li>');
     });
 
-    describe('nameOrUsernameIncludes', () => {
-      it.each`
-        query             | result
-        ${'mar'}          | ${true}
-        ${'msi'}          | ${true}
-        ${'margesimpson'} | ${true}
-        ${'msimpson'}     | ${true}
-        ${'arge'}         | ${true}
-        ${'rgesimp'}      | ${true}
-        ${'maria'}        | ${false}
-        ${'homer'}        | ${false}
-      `('returns $result for $query', ({ query, result }) => {
-        expect(GfmAutoComplete.Members.nameOrUsernameIncludes(member, query)).toBe(result);
-      });
+    it('should add user availability status if availabilityStatus is set', () => {
+      expect(
+        GfmAutoComplete.Members.templateFunction({
+          avatarTag: 'IMG',
+          username: 'my-group',
+          title: '',
+          icon: '<i class="icon"/>',
+          availabilityStatus: '<span class="gl-text-gray-500"> (Busy)</span>',
+        }),
+      ).toBe(
+        '<li>IMG my-group <small><span class="gl-text-gray-500"> (Busy)</span></small> <i class="icon"/></li>',
+      );
     });
   });