From d8e43e913b44354f3313082174383c9e2d8c6494 Mon Sep 17 00:00:00 2001 From: Claas Augner Date: Fri, 3 Nov 2023 14:20:53 +0100 Subject: [PATCH 1/2] refactor(main-menu): extract TopMenuLink --- client/src/ui/molecules/main-menu/index.tsx | 36 ++++++++++++--------- 1 file changed, 21 insertions(+), 15 deletions(-) diff --git a/client/src/ui/molecules/main-menu/index.tsx b/client/src/ui/molecules/main-menu/index.tsx index a0e44062a0e3..b3a8f0b62a49 100644 --- a/client/src/ui/molecules/main-menu/index.tsx +++ b/client/src/ui/molecules/main-menu/index.tsx @@ -79,22 +79,28 @@ export default function MainMenu({ isOpenOnMobile }) { toggleMenu={toggleMenu} /> )} -
  • - - Blog - -
  • -
  • - - Play - -
  • -
  • - - AI Help Beta - -
  • + Blog + Play + + AI Help Beta + ); } + +function TopLevelMenuLink({ + to, + children, +}: { + to: string; + children: React.ReactNode; +}) { + return ( +
  • + + {children} + +
  • + ); +} From b453b08d65d5b56677546932f7ca2544de6e8de5 Mon Sep 17 00:00:00 2001 From: Claas Augner Date: Fri, 3 Nov 2023 14:32:11 +0100 Subject: [PATCH 2/2] chore(telemetry): measure top-level menu link clicks --- client/src/telemetry/constants.ts | 1 + client/src/ui/molecules/main-menu/index.tsx | 9 ++++++++- 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/client/src/telemetry/constants.ts b/client/src/telemetry/constants.ts index 8d06c7baa8c9..505463538c96 100644 --- a/client/src/telemetry/constants.ts +++ b/client/src/telemetry/constants.ts @@ -20,6 +20,7 @@ export const PLAYGROUND = "play_action"; export const AI_EXPLAIN = "ai_explain"; export const MENU = Object.freeze({ + CLICK_LINK: "menu_click_link", CLICK_MENU: "menu_click_menu", CLICK_SUBMENU: "menu_click_submenu", }); diff --git a/client/src/ui/molecules/main-menu/index.tsx b/client/src/ui/molecules/main-menu/index.tsx index b3a8f0b62a49..6af28855a65e 100644 --- a/client/src/ui/molecules/main-menu/index.tsx +++ b/client/src/ui/molecules/main-menu/index.tsx @@ -7,6 +7,8 @@ import { PlusMenu } from "../plus-menu"; import "./index.scss"; import { PLUS_IS_ENABLED } from "../../../env"; import { useLocale } from "../../../hooks"; +import { useGleanClick } from "../../../telemetry/glean-context"; +import { MENU } from "../../../telemetry/constants"; export default function MainMenu({ isOpenOnMobile }) { const locale = useLocale(); @@ -96,9 +98,14 @@ function TopLevelMenuLink({ to: string; children: React.ReactNode; }) { + const gleanClick = useGleanClick(); return (
  • - + gleanClick(`${MENU.CLICK_LINK}: top-level -> ${to}`)} + > {children}