Limit tribute autocomplete menu items to 100

When testing tribute autocomplete on gitlab.com, issue
autocomplete renders tens of thousands of items in the
autocomplete menu which freezes the UI for a couple of
seconds. This is because with tribute it renders all
list items by default. To improve performance, this
commit adds a limit of 100 items, which is still more
than the limit of 5 we currently have with atjs
autocomplete.

app/assets/javascripts/vue_shared/components/gfm_autocomplete/utils.js

@@ -9,6 +9,8 @@ const memberLimit = 10;
 
 const nonWordOrInteger = /\W|^\d+$/;
 
+export const menuItemLimit = 100;
+
 export const GfmAutocompleteType = {
   Emojis: 'emojis',
   Issues: 'issues',
@@ -31,6 +33,7 @@ export const tributeConfig = {
     config: {
       trigger: ':',
       lookup: (value) => value,
+      menuItemLimit,
       menuItemTemplate: ({ original }) => `${original} ${Emoji.glEmojiTag(original)}`,
       selectTemplate: ({ original }) => `:${original}:`,
     },
@@ -40,6 +43,7 @@ export const tributeConfig = {
     config: {
       trigger: '#',
       lookup: (value) => `${value.iid}${value.title}`,
+      menuItemLimit,
       menuItemTemplate: ({ original }) =>
         `<small>${original.reference || original.iid}</small> ${escape(original.title)}`,
       selectTemplate: ({ original }) => original.reference || `#${original.iid}`,
@@ -50,6 +54,7 @@ export const tributeConfig = {
     config: {
       trigger: '~',
       lookup: 'title',
+      menuItemLimit,
       menuItemTemplate: ({ original }) => `
         <span class="dropdown-label-box" style="background: ${escape(original.color)};"></span>
         ${escape(original.title)}`,
@@ -132,6 +137,7 @@ export const tributeConfig = {
     config: {
       trigger: '!',
       lookup: (value) => `${value.iid}${value.title}`,
+      menuItemLimit,
       menuItemTemplate: ({ original }) =>
         `<small>${original.reference || original.iid}</small> ${escape(original.title)}`,
       selectTemplate: ({ original }) => original.reference || `!${original.iid}`,
@@ -142,6 +148,7 @@ export const tributeConfig = {
     config: {
       trigger: '%',
       lookup: 'title',
+      menuItemLimit,
       menuItemTemplate: ({ original }) => escape(original.title),
       selectTemplate: ({ original }) => `%"${escape(original.title)}"`,
     },
@@ -152,6 +159,7 @@ export const tributeConfig = {
       trigger: '/',
       fillAttr: 'name',
       lookup: (value) => `${value.name}${value.aliases.join()}`,
+      menuItemLimit,
       menuItemTemplate: ({ original }) => {
         const aliases = original.aliases.length
           ? `<small>(or /${original.aliases.join(', /')})</small>`
@@ -180,6 +188,7 @@ export const tributeConfig = {
       trigger: '$',
       fillAttr: 'id',
       lookup: (value) => `${value.id}${value.title}`,
+      menuItemLimit,
       menuItemTemplate: ({ original }) => `<small>${original.id}</small> ${escape(original.title)}`,
     },
   },

ee/app/assets/javascripts/vue_shared/components/gfm_autocomplete/utils.js

 import { escape } from 'lodash';
 import {
   GfmAutocompleteType as GfmAutocompleteTypeFoss,
+  menuItemLimit,
   tributeConfig as tributeConfigFoss,
 } from '~/vue_shared/components/gfm_autocomplete/utils';
 
@@ -17,6 +18,7 @@ export const tributeConfig = {
       trigger: '&',
       fillAttr: 'iid',
       lookup: (value) => `${value.iid}${value.title}`,
+      menuItemLimit,
       menuItemTemplate: ({ original }) =>
         `<small>${original.iid}</small> ${escape(original.title)}`,
     },

ee/spec/frontend/vue_shared/components/gfm_autocomplete/utils_spec.js

@@ -24,6 +24,10 @@ describe('ee gfm_autocomplete/utils', () => {
       expect(epicsConfig.lookup(epic)).toBe(`${epic.iid}${epic.title}`);
     });
 
+    it('limits the number of rendered items to 100', () => {
+      expect(epicsConfig.menuItemLimit).toBe(100);
+    });
+
     it('shows the iid and title in the menu item', () => {
       expect(epicsConfig.menuItemTemplate({ original: epic })).toMatchSnapshot();
     });

spec/frontend/vue_shared/components/gfm_autocomplete/utils_spec.js

@@ -14,6 +14,10 @@ describe('gfm_autocomplete/utils', () => {
       expect(emojisConfig.lookup(emoji)).toBe(emoji);
     });
 
+    it('limits the number of rendered items to 100', () => {
+      expect(emojisConfig.menuItemLimit).toBe(100);
+    });
+
     it('shows the emoji name and icon in the menu item', () => {
       expect(emojisConfig.menuItemTemplate({ original: emoji })).toMatchSnapshot();
     });
@@ -47,6 +51,10 @@ describe('gfm_autocomplete/utils', () => {
       );
     });
 
+    it('limits the number of rendered items to 100', () => {
+      expect(issuesConfig.menuItemLimit).toBe(100);
+    });
+
     it('shows the reference and title in the menu item within a group context', () => {
       expect(issuesConfig.menuItemTemplate({ original: groupContextIssue })).toMatchSnapshot();
     });
@@ -98,6 +106,10 @@ describe('gfm_autocomplete/utils', () => {
       expect(labelsConfig.lookup).toBe('title');
     });
 
+    it('limits the number of rendered items to 100', () => {
+      expect(labelsConfig.menuItemLimit).toBe(100);
+    });
+
     it('shows the title in the menu item', () => {
       expect(labelsConfig.menuItemTemplate({ original: label })).toMatchSnapshot();
     });
@@ -291,6 +303,10 @@ describe('gfm_autocomplete/utils', () => {
       );
     });
 
+    it('limits the number of rendered items to 100', () => {
+      expect(mergeRequestsConfig.menuItemLimit).toBe(100);
+    });
+
     it('shows the reference and title in the menu item within a group context', () => {
       expect(
         mergeRequestsConfig.menuItemTemplate({ original: groupContextMergeRequest }),
@@ -332,6 +348,10 @@ describe('gfm_autocomplete/utils', () => {
       expect(milestonesConfig.lookup).toBe('title');
     });
 
+    it('limits the number of rendered items to 100', () => {
+      expect(milestonesConfig.menuItemLimit).toBe(100);
+    });
+
     it('shows the title in the menu item', () => {
       expect(milestonesConfig.menuItemTemplate({ original: milestone })).toMatchSnapshot();
     });
@@ -368,6 +388,10 @@ describe('gfm_autocomplete/utils', () => {
       );
     });
 
+    it('limits the number of rendered items to 100', () => {
+      expect(quickActionsConfig.menuItemLimit).toBe(100);
+    });
+
     it('shows the name, aliases, params and description in the menu item', () => {
       expect(quickActionsConfig.menuItemTemplate({ original: quickAction })).toMatchSnapshot();
     });
@@ -392,6 +416,10 @@ describe('gfm_autocomplete/utils', () => {
       expect(snippetsConfig.lookup(snippet)).toBe(`${snippet.id}${snippet.title}`);
     });
 
+    it('limits the number of rendered items to 100', () => {
+      expect(snippetsConfig.menuItemLimit).toBe(100);
+    });
+
     it('shows the id and title in the menu item', () => {
       expect(snippetsConfig.menuItemTemplate({ original: snippet })).toMatchSnapshot();
     });