diff options
Diffstat (limited to 'app/assets/javascripts/gfm_auto_complete.js')
-rw-r--r-- | app/assets/javascripts/gfm_auto_complete.js | 74 |
1 files changed, 44 insertions, 30 deletions
diff --git a/app/assets/javascripts/gfm_auto_complete.js b/app/assets/javascripts/gfm_auto_complete.js index d4dafbdc94f..01d218438cf 100644 --- a/app/assets/javascripts/gfm_auto_complete.js +++ b/app/assets/javascripts/gfm_auto_complete.js @@ -7,11 +7,20 @@ import { loadingIconForLegacyJS } from '~/loading_icon_for_legacy_js'; import { s__, __, sprintf } from '~/locale'; import { isUserBusy } from '~/set_status_modal/utils'; import SidebarMediator from '~/sidebar/sidebar_mediator'; +import { state } from '~/sidebar/components/reviewers/sidebar_reviewers.vue'; import AjaxCache from './lib/utils/ajax_cache'; import { spriteIcon } from './lib/utils/common_utils'; import { parsePikadayDate } from './lib/utils/datetime_utility'; import glRegexp from './lib/utils/regexp'; +const USERS_ALIAS = 'users'; +const ISSUES_ALIAS = 'issues'; +const MILESTONES_ALIAS = 'milestones'; +const MERGEREQUESTS_ALIAS = 'mergerequests'; +const LABELS_ALIAS = 'labels'; +const SNIPPETS_ALIAS = 'snippets'; +const CONTACTS_ALIAS = 'contacts'; +export const AT_WHO_ACTIVE_CLASS = 'at-who-active'; /** * Escapes user input before we pass it to at.js, which * renders it as HTML in the autocomplete dropdown. @@ -29,6 +38,15 @@ function escape(string) { return lodashEscape(string).replace(/\$/g, '$'); } +export function showAndHideHelper($input, alias = '') { + $input.on(`hidden${alias ? '-' : ''}${alias}.atwho`, () => { + $input.removeClass(AT_WHO_ACTIVE_CLASS); + }); + $input.on(`shown${alias ? '-' : ''}${alias}.atwho`, () => { + $input.addClass(AT_WHO_ACTIVE_CLASS); + }); +} + function createMemberSearchString(member) { return `${member.name.replace(/ /g, '')} ${member.username}`; } @@ -237,10 +255,18 @@ class GfmAutoComplete { callbacks: { ...this.getDefaultCallbacks(), matcher(flag, subtext) { - const regexp = new RegExp(`(?:[^${glRegexp.unicodeLetters}0-9:]|\n|^):([^:]*)$`, 'gi'); + const regexp = new RegExp( + `(?:[^${glRegexp.unicodeLetters}0-9:]|\n|^):([^ :][^:]*)?$`, + 'gi', + ); const match = regexp.exec(subtext); - return match && match.length ? match[1] : null; + if (match && match.length) { + // Since we have "?" on the group, it's possible it is undefined + return match[1] || ''; + } + + return null; }, filter(query, items) { if (GfmAutoComplete.isLoading(items)) { @@ -265,6 +291,7 @@ class GfmAutoComplete { }, }, }); + showAndHideHelper($input); } setupMembers($input) { @@ -276,8 +303,6 @@ class GfmAutoComplete { UNASSIGN_REVIEWER: '/unassign_reviewer', REASSIGN: '/reassign', CC: '/cc', - ATTENTION: '/attention', - REMOVE_ATTENTION: '/remove_attention', }; let assignees = []; let reviewers = []; @@ -286,7 +311,7 @@ class GfmAutoComplete { // Team Members $input.atwho({ at: '@', - alias: 'users', + alias: USERS_ALIAS, displayTpl(value) { let tmpl = GfmAutoComplete.Loading.template; const { avatarTag, username, title, icon, availability } = value; @@ -328,8 +353,7 @@ class GfmAutoComplete { // Cache assignees & reviewers list for easier filtering later assignees = SidebarMediator.singleton?.store?.assignees?.map(createMemberSearchString) || []; - reviewers = - SidebarMediator.singleton?.store?.reviewers?.map(createMemberSearchString) || []; + reviewers = state.issuable?.reviewers?.nodes?.map(createMemberSearchString) || []; const match = GfmAutoComplete.defaultMatcher(flag, subtext, this.app.controllers); return match && match.length ? match[1] : null; @@ -356,23 +380,6 @@ class GfmAutoComplete { } else if (command === MEMBER_COMMAND.UNASSIGN_REVIEWER) { // Only include members which are not assigned as a reviewer to Issuable currently return data.filter((member) => reviewers.includes(member.search)); - } else if ( - command === MEMBER_COMMAND.ATTENTION || - command === MEMBER_COMMAND.REMOVE_ATTENTION - ) { - const attentionUsers = [ - ...(SidebarMediator.singleton?.store?.assignees || []), - ...(SidebarMediator.singleton?.store?.reviewers || []), - ]; - const attentionRequested = command === MEMBER_COMMAND.REMOVE_ATTENTION; - - return data.filter((member) => - attentionUsers.find( - (u) => - createMemberSearchString(u).includes(member.search) && - u.attention_requested === attentionRequested, - ), - ); } return data; @@ -393,12 +400,13 @@ class GfmAutoComplete { }, }, }); + showAndHideHelper($input, USERS_ALIAS); } setupIssues($input) { $input.atwho({ at: '#', - alias: 'issues', + alias: ISSUES_ALIAS, searchKey: 'search', displayTpl(value) { let tmpl = GfmAutoComplete.Loading.template; @@ -427,12 +435,13 @@ class GfmAutoComplete { }, }, }); + showAndHideHelper($input, ISSUES_ALIAS); } setupMilestones($input) { $input.atwho({ at: '%', - alias: 'milestones', + alias: MILESTONES_ALIAS, searchKey: 'search', // eslint-disable-next-line no-template-curly-in-string insertTpl: '${atwho-at}${title}', @@ -483,12 +492,13 @@ class GfmAutoComplete { }, }, }); + showAndHideHelper($input, MILESTONES_ALIAS); } setupMergeRequests($input) { $input.atwho({ at: '!', - alias: 'mergerequests', + alias: MERGEREQUESTS_ALIAS, searchKey: 'search', displayTpl(value) { let tmpl = GfmAutoComplete.Loading.template; @@ -517,6 +527,7 @@ class GfmAutoComplete { }, }, }); + showAndHideHelper($input, MERGEREQUESTS_ALIAS); } setupLabels($input) { @@ -527,7 +538,7 @@ class GfmAutoComplete { $input.atwho({ at: '~', - alias: 'labels', + alias: LABELS_ALIAS, searchKey: 'search', data: GfmAutoComplete.defaultLoadingData, displayTpl(value) { @@ -617,12 +628,13 @@ class GfmAutoComplete { }, }, }); + showAndHideHelper($input, LABELS_ALIAS); } setupSnippets($input) { $input.atwho({ at: '$', - alias: 'snippets', + alias: SNIPPETS_ALIAS, searchKey: 'search', displayTpl(value) { let tmpl = GfmAutoComplete.Loading.template; @@ -650,13 +662,14 @@ class GfmAutoComplete { }, }, }); + showAndHideHelper($input, SNIPPETS_ALIAS); } setupContacts($input) { $input.atwho({ at: '[contact:', suffix: ']', - alias: 'contacts', + alias: CONTACTS_ALIAS, searchKey: 'search', displayTpl(value) { let tmpl = GfmAutoComplete.Loading.template; @@ -686,6 +699,7 @@ class GfmAutoComplete { }, }, }); + showAndHideHelper($input, CONTACTS_ALIAS); } getDefaultCallbacks() { |