diff --git a/client/src/telemetry/constants.ts b/client/src/telemetry/constants.ts index 42efca99ba27..b5618eb4ac1d 100644 --- a/client/src/telemetry/constants.ts +++ b/client/src/telemetry/constants.ts @@ -18,6 +18,11 @@ export const BANNER_AI_HELP_CLICK = "banner_ai_help_click"; export const PLAYGROUND = "play_action"; export const AI_EXPLAIN = "ai_explain"; +export const MENU = Object.freeze({ + CLICK_MENU: "menu_click_menu", + CLICK_SUBMENU: "menu_click_submenu", +}); + export const PLUS_COLLECTIONS = Object.freeze({ ACTIONS_NOTE_ADD: "collections_actions_note_add", ACTIONS_NOTE_EDIT: "collections_actions_note_edit", diff --git a/client/src/ui/molecules/menu/index.tsx b/client/src/ui/molecules/menu/index.tsx index 4105d9bf3da2..86a39ea5447a 100644 --- a/client/src/ui/molecules/menu/index.tsx +++ b/client/src/ui/molecules/menu/index.tsx @@ -1,3 +1,5 @@ +import { MENU } from "../../../telemetry/constants"; +import { useGleanClick } from "../../../telemetry/glean-context"; import { MenuEntry, Submenu } from "../submenu"; import "./index.scss"; @@ -8,6 +10,8 @@ interface MenuProps { } export const Menu = ({ menu, isOpen, toggle }: MenuProps) => { + const gleanClick = useGleanClick(); + const buttonId = `${menu.id}-button`; const submenuId = `${menu.id}-menu`; @@ -35,8 +39,11 @@ export const Menu = ({ menu, isOpen, toggle }: MenuProps) => { document?.activeElement?.blur()} + onClick={() => { + gleanClick(`${MENU.CLICK_MENU}: ${menu.id} -> ${menu.to}`); + // @ts-ignore + document?.activeElement?.blur(); + }} > {menu.label} diff --git a/client/src/ui/molecules/submenu/index.tsx b/client/src/ui/molecules/submenu/index.tsx index a7a224aba666..9f2313a1f71a 100644 --- a/client/src/ui/molecules/submenu/index.tsx +++ b/client/src/ui/molecules/submenu/index.tsx @@ -1,3 +1,5 @@ +import { MENU } from "../../../telemetry/constants"; +import { useGleanClick } from "../../../telemetry/glean-context"; import "./index.scss"; export type SubmenuItem = { @@ -32,6 +34,7 @@ export const Submenu = ({ submenuId?: string; extraClasses?: string; }) => { + const gleanClick = useGleanClick(); return (