Commit 6bd61d9b authored by Phil Hughes's avatar Phil Hughes

Merge branch 'cngo-limit-tribute-member-autocomplete' into 'master'

Limit member tribute autocomplete to 10

See merge request gitlab-org/gitlab!51122
parents 16ecc333 a25de2b2
...@@ -4,6 +4,9 @@ import { spriteIcon } from '~/lib/utils/common_utils'; ...@@ -4,6 +4,9 @@ import { spriteIcon } from '~/lib/utils/common_utils';
const groupType = 'Group'; // eslint-disable-line @gitlab/require-i18n-strings const groupType = 'Group'; // eslint-disable-line @gitlab/require-i18n-strings
// Number of users to show in the autocomplete menu to avoid doing a mass fetch of 100+ avatars
const memberLimit = 10;
const nonWordOrInteger = /\W|^\d+$/; const nonWordOrInteger = /\W|^\d+$/;
export const GfmAutocompleteType = { export const GfmAutocompleteType = {
...@@ -74,6 +77,7 @@ export const tributeConfig = { ...@@ -74,6 +77,7 @@ export const tributeConfig = {
fillAttr: 'username', fillAttr: 'username',
lookup: (value) => lookup: (value) =>
value.type === groupType ? last(value.name.split(' / ')) : `${value.name}${value.username}`, value.type === groupType ? last(value.name.split(' / ')) : `${value.name}${value.username}`,
menuItemLimit: memberLimit,
menuItemTemplate: ({ original }) => { menuItemTemplate: ({ original }) => {
const commonClasses = 'gl-avatar gl-avatar-s24 gl-flex-shrink-0'; const commonClasses = 'gl-avatar gl-avatar-s24 gl-flex-shrink-0';
const noAvatarClasses = `${commonClasses} gl-rounded-small const noAvatarClasses = `${commonClasses} gl-rounded-small
......
...@@ -201,6 +201,10 @@ describe('gfm_autocomplete/utils', () => { ...@@ -201,6 +201,10 @@ describe('gfm_autocomplete/utils', () => {
expect(membersConfig.lookup(groupMember)).toBe(last(groupMember.name.split(' / '))); expect(membersConfig.lookup(groupMember)).toBe(last(groupMember.name.split(' / ')));
}); });
it('limits the items in the autocomplete menu to 10', () => {
expect(membersConfig.menuItemLimit).toBe(10);
});
it('shows the avatar, name and username in the menu item for a user', () => { it('shows the avatar, name and username in the menu item for a user', () => {
expect(membersConfig.menuItemTemplate({ original: userMember })).toMatchSnapshot(); expect(membersConfig.menuItemTemplate({ original: userMember })).toMatchSnapshot();
}); });
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment