diff options
Diffstat (limited to 'app/assets/javascripts/super_sidebar/components/global_search/command_palette')
3 files changed, 52 insertions, 8 deletions
diff --git a/app/assets/javascripts/super_sidebar/components/global_search/command_palette/command_palette_items.vue b/app/assets/javascripts/super_sidebar/components/global_search/command_palette/command_palette_items.vue index bd79962f1a1..b85b163cea9 100644 --- a/app/assets/javascripts/super_sidebar/components/global_search/command_palette/command_palette_items.vue +++ b/app/assets/javascripts/super_sidebar/components/global_search/command_palette/command_palette_items.vue @@ -5,6 +5,7 @@ import { GlDisclosureDropdownGroup, GlLoadingIcon } from '@gitlab/ui'; import * as Sentry from '@sentry/browser'; import axios from '~/lib/utils/axios_utils'; import { DEFAULT_DEBOUNCE_AND_THROTTLE_MS } from '~/lib/utils/constants'; +import Tracking from '~/tracking'; import { getFormattedItem } from '../utils'; import { @@ -18,6 +19,8 @@ import { PATH_GROUP_TITLE, GROUP_TITLES, MAX_ROWS, + TRACKING_ACTIVATE_COMMAND_PALETTE, + TRACKING_HANDLE_LABEL_MAP, } from './constants'; import SearchItem from './search_item.vue'; import { commandMapper, linksReducer, autocompleteQuery, fileMapper } from './utils'; @@ -29,6 +32,7 @@ export default { GlLoadingIcon, SearchItem, }, + mixins: [Tracking.mixin()], inject: [ 'commandPaletteCommands', 'commandPaletteLinks', @@ -134,10 +138,15 @@ export default { immediate: true, }, handle: { - handler() { - this.debouncedSearch(); + handler(value, oldValue) { + // Do not run search immediately on component creation + if (oldValue !== undefined) this.debouncedSearch(); + + // Track immediately on component creation + const label = TRACKING_HANDLE_LABEL_MAP[value] ?? 'unknown'; + this.track(TRACKING_ACTIVATE_COMMAND_PALETTE, { label }); }, - immediate: false, + immediate: true, }, }, updated() { diff --git a/app/assets/javascripts/super_sidebar/components/global_search/command_palette/constants.js b/app/assets/javascripts/super_sidebar/components/global_search/command_palette/constants.js index a43e621da44..f6f4e36e43a 100644 --- a/app/assets/javascripts/super_sidebar/components/global_search/command_palette/constants.js +++ b/app/assets/javascripts/super_sidebar/components/global_search/command_palette/constants.js @@ -6,6 +6,16 @@ export const PROJECT_HANDLE = ':'; export const ISSUE_HANDLE = '#'; export const PATH_HANDLE = '/'; +export const TRACKING_ACTIVATE_COMMAND_PALETTE = 'activate_command_palette'; +export const TRACKING_CLICK_COMMAND_PALETTE_ITEM = 'click_command_palette_item'; +export const TRACKING_HANDLE_LABEL_MAP = { + [COMMAND_HANDLE]: 'command', + [USER_HANDLE]: 'user', + [PROJECT_HANDLE]: 'project', + [PATH_HANDLE]: 'path', + // No ISSUE_HANDLE. See https://gitlab.com/gitlab-org/gitlab/-/issues/417434. +}; + export const COMMON_HANDLES = [COMMAND_HANDLE, USER_HANDLE, PROJECT_HANDLE]; export const SEARCH_OR_COMMAND_MODE_PLACEHOLDER = sprintf( s__( diff --git a/app/assets/javascripts/super_sidebar/components/global_search/command_palette/utils.js b/app/assets/javascripts/super_sidebar/components/global_search/command_palette/utils.js index 347a8ffb0b4..32abbbfd3c2 100644 --- a/app/assets/javascripts/super_sidebar/components/global_search/command_palette/utils.js +++ b/app/assets/javascripts/super_sidebar/components/global_search/command_palette/utils.js @@ -1,6 +1,11 @@ import { isNil, omitBy } from 'lodash'; import { objectToQuery, joinPaths } from '~/lib/utils/url_utility'; -import { SEARCH_SCOPE, GLOBAL_COMMANDS_GROUP_TITLE } from './constants'; +import { TRACKING_UNKNOWN_ID } from '~/super_sidebar/constants'; +import { + SEARCH_SCOPE, + GLOBAL_COMMANDS_GROUP_TITLE, + TRACKING_CLICK_COMMAND_PALETTE_ITEM, +} from './constants'; export const commandMapper = ({ name, items }) => { // TODO: we filter out invite_members for now, because it is complicated to add the invite members modal here @@ -12,18 +17,34 @@ export const commandMapper = ({ name, items }) => { }; export const linksReducer = (acc, menuItem) => { + const trackingAttrs = ({ id, title }) => { + return { + extraAttrs: { + 'data-track-action': TRACKING_CLICK_COMMAND_PALETTE_ITEM, + 'data-track-label': id || TRACKING_UNKNOWN_ID, + ...(id + ? {} + : { + 'data-track-extra': JSON.stringify({ title }), + }), + }, + }; + }; + acc.push({ text: menuItem.title, keywords: menuItem.title, icon: menuItem.icon, href: menuItem.link, + ...trackingAttrs(menuItem), }); if (menuItem.items?.length) { - const items = menuItem.items.map(({ title, link }) => ({ - keywords: title, - text: [menuItem.title, title].join(' > '), - href: link, + const items = menuItem.items.map((item) => ({ + keywords: item.title, + text: [menuItem.title, item.title].join(' > '), + href: item.link, icon: menuItem.icon, + ...trackingAttrs(item), })); /* eslint-disable-next-line no-param-reassign */ @@ -37,6 +58,10 @@ export const fileMapper = (projectBlobPath, file) => { icon: 'doc-code', text: file, href: joinPaths(projectBlobPath, file), + extraAttrs: { + 'data-track-action': TRACKING_CLICK_COMMAND_PALETTE_ITEM, + 'data-track-label': 'file', + }, }; }; |