From c4c5d79f201cd2fe3844414dcaf5edc8b9bd5246 Mon Sep 17 00:00:00 2001
From: Claas Augner <495429+caugner@users.noreply.github.com>
Date: Tue, 31 Oct 2023 22:36:36 +0100
Subject: [PATCH] chore(telemetry): measure menu clicks (#9918)

* chore(telemetry): measure Menu/Submenu clicks

* chore(glean): record menu/submenu id

* refactor(user-menu): change ID to "user-menu"

* fixup! chore(glean): record menu/submenu id

* Revert "refactor(user-menu): change ID to "user-menu""

This reverts commit 9184fa928de2a7035dfea5a2bffa41792ee045f8.
---
 client/src/telemetry/constants.ts         |  5 +++++
 client/src/ui/molecules/menu/index.tsx    | 11 +++++++++--
 client/src/ui/molecules/submenu/index.tsx |  8 ++++++++
 3 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/client/src/telemetry/constants.ts b/client/src/telemetry/constants.ts
index a7899ece53a7..8d06c7baa8c9 100644
--- a/client/src/telemetry/constants.ts
+++ b/client/src/telemetry/constants.ts
@@ -19,6 +19,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) => {
         <a
           href={menu.to}
           className="top-level-entry"
-          // @ts-ignore
-          onClick={() => document?.activeElement?.blur()}
+          onClick={() => {
+            gleanClick(`${MENU.CLICK_MENU}: ${menu.id} -> ${menu.to}`);
+            // @ts-ignore
+            document?.activeElement?.blur();
+          }}
         >
           {menu.label}
         </a>
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 (
     <ul
       id={submenuId}
@@ -58,6 +61,11 @@ export const Submenu = ({
                   className={`submenu-item ${
                     item.url.startsWith("https://") ? "external" : ""
                   }`}
+                  onClick={() =>
+                    gleanClick(
+                      `${MENU.CLICK_SUBMENU}: ${menuEntry.id} -> ${item.url}`
+                    )
+                  }
                 >
                   {item.hasIcon && <div className={item.iconClasses} />}
                   {item.dot && (