From 66636fdb9845d2cb7539d43cc230a87fa8bf99e4 Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Tue, 31 Oct 2023 18:22:54 +0100
Subject: [PATCH 1/5] chore(telemetry): measure Menu/Submenu clicks

---
 client/src/telemetry/constants.ts         |  5 +++++
 client/src/ui/molecules/menu/index.tsx    | 11 +++++++++--
 client/src/ui/molecules/submenu/index.tsx |  6 ++++++
 3 files changed, 20 insertions(+), 2 deletions(-)

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..f04b737b3aff 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.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..f22066e3db23 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,9 @@ export const Submenu = ({
                   className={`submenu-item ${
                     item.url.startsWith("https://") ? "external" : ""
                   }`}
+                  onClick={() =>
+                    gleanClick(`${MENU.CLICK_SUBMENU}: ${item.url}`)
+                  }
                 >
                   {item.hasIcon && <div className={item.iconClasses} />}
                   {item.dot && (

From e3a4859753e91a19548a2dfff6b6a9f656f8cc85 Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Tue, 31 Oct 2023 19:43:01 +0100
Subject: [PATCH 2/5] chore(glean): record menu/submenu id

---
 client/src/ui/molecules/menu/index.tsx    | 2 +-
 client/src/ui/molecules/submenu/index.tsx | 4 +++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/client/src/ui/molecules/menu/index.tsx b/client/src/ui/molecules/menu/index.tsx
index f04b737b3aff..86a39ea5447a 100644
--- a/client/src/ui/molecules/menu/index.tsx
+++ b/client/src/ui/molecules/menu/index.tsx
@@ -40,7 +40,7 @@ export const Menu = ({ menu, isOpen, toggle }: MenuProps) => {
           href={menu.to}
           className="top-level-entry"
           onClick={() => {
-            gleanClick(`${MENU.CLICK_MENU}: ${menu.to}`);
+            gleanClick(`${MENU.CLICK_MENU}: ${menu.id} -> ${menu.to}`);
             // @ts-ignore
             document?.activeElement?.blur();
           }}
diff --git a/client/src/ui/molecules/submenu/index.tsx b/client/src/ui/molecules/submenu/index.tsx
index f22066e3db23..05bb9045e5d5 100644
--- a/client/src/ui/molecules/submenu/index.tsx
+++ b/client/src/ui/molecules/submenu/index.tsx
@@ -62,7 +62,9 @@ export const Submenu = ({
                     item.url.startsWith("https://") ? "external" : ""
                   }`}
                   onClick={() =>
-                    gleanClick(`${MENU.CLICK_SUBMENU}: ${item.url}`)
+                    gleanClick(
+                      `${MENU.CLICK_SUBMENU}: ${submenuId} -> ${item.url}`
+                    )
                   }
                 >
                   {item.hasIcon && <div className={item.iconClasses} />}

From 9184fa928de2a7035dfea5a2bffa41792ee045f8 Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Tue, 31 Oct 2023 19:50:51 +0100
Subject: [PATCH 3/5] refactor(user-menu): change ID to "user-menu"

---
 client/src/ui/molecules/user-menu/index.tsx | 2 +-
 testing/tests/headless.auth.spec.ts         | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/client/src/ui/molecules/user-menu/index.tsx b/client/src/ui/molecules/user-menu/index.tsx
index d37a99060e41..5983c1ee7660 100644
--- a/client/src/ui/molecules/user-menu/index.tsx
+++ b/client/src/ui/molecules/user-menu/index.tsx
@@ -26,7 +26,7 @@ export const UserMenu = () => {
 
   const userMenuItems = {
     label: "My MDN Plus",
-    id: "my-mdn-plus",
+    id: "user-menu",
     items: [
       {
         label: userData.email || "",
diff --git a/testing/tests/headless.auth.spec.ts b/testing/tests/headless.auth.spec.ts
index 170535f0f022..f4a3ec265222 100644
--- a/testing/tests/headless.auth.spec.ts
+++ b/testing/tests/headless.auth.spec.ts
@@ -33,7 +33,7 @@ test.describe("Visiting pages related and requiring authentication", () => {
     expect(page.url()).toBe(testURL("/en-US/docs/Web/Foo/"));
     await expect(page.locator(".user-menu")).toBeVisible();
 
-    await page.click("#my-mdn-plus-button");
+    await page.click("#user-menu-button");
     await page.click(".signout-form button[type='submit']");
     await page.waitForLoadState("networkidle");
 
@@ -51,7 +51,7 @@ test.describe("Visiting pages related and requiring authentication", () => {
     await expect(page.locator(".user-menu")).toBeVisible();
 
     // open up user menu
-    await page.click("#my-mdn-plus-button");
+    await page.click("#user-menu-button");
     // Sign out
     await page.click(".signout-form button[type='submit']");
     await page.waitForLoadState("networkidle");

From b06b64cbb6e46f3ceb9dcfc2e5af4c41f573b621 Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Tue, 31 Oct 2023 19:52:05 +0100
Subject: [PATCH 4/5] fixup! chore(glean): record menu/submenu id

---
 client/src/ui/molecules/submenu/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/ui/molecules/submenu/index.tsx b/client/src/ui/molecules/submenu/index.tsx
index 05bb9045e5d5..9f2313a1f71a 100644
--- a/client/src/ui/molecules/submenu/index.tsx
+++ b/client/src/ui/molecules/submenu/index.tsx
@@ -63,7 +63,7 @@ export const Submenu = ({
                   }`}
                   onClick={() =>
                     gleanClick(
-                      `${MENU.CLICK_SUBMENU}: ${submenuId} -> ${item.url}`
+                      `${MENU.CLICK_SUBMENU}: ${menuEntry.id} -> ${item.url}`
                     )
                   }
                 >

From 0a4fa87e88679750c8a10eec66dc12181f1d91d9 Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Tue, 31 Oct 2023 20:08:38 +0100
Subject: [PATCH 5/5] Revert "refactor(user-menu): change ID to "user-menu""

This reverts commit 9184fa928de2a7035dfea5a2bffa41792ee045f8.
---
 client/src/ui/molecules/user-menu/index.tsx | 2 +-
 testing/tests/headless.auth.spec.ts         | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/client/src/ui/molecules/user-menu/index.tsx b/client/src/ui/molecules/user-menu/index.tsx
index 5983c1ee7660..d37a99060e41 100644
--- a/client/src/ui/molecules/user-menu/index.tsx
+++ b/client/src/ui/molecules/user-menu/index.tsx
@@ -26,7 +26,7 @@ export const UserMenu = () => {
 
   const userMenuItems = {
     label: "My MDN Plus",
-    id: "user-menu",
+    id: "my-mdn-plus",
     items: [
       {
         label: userData.email || "",
diff --git a/testing/tests/headless.auth.spec.ts b/testing/tests/headless.auth.spec.ts
index f4a3ec265222..170535f0f022 100644
--- a/testing/tests/headless.auth.spec.ts
+++ b/testing/tests/headless.auth.spec.ts
@@ -33,7 +33,7 @@ test.describe("Visiting pages related and requiring authentication", () => {
     expect(page.url()).toBe(testURL("/en-US/docs/Web/Foo/"));
     await expect(page.locator(".user-menu")).toBeVisible();
 
-    await page.click("#user-menu-button");
+    await page.click("#my-mdn-plus-button");
     await page.click(".signout-form button[type='submit']");
     await page.waitForLoadState("networkidle");
 
@@ -51,7 +51,7 @@ test.describe("Visiting pages related and requiring authentication", () => {
     await expect(page.locator(".user-menu")).toBeVisible();
 
     // open up user menu
-    await page.click("#user-menu-button");
+    await page.click("#my-mdn-plus-button");
     // Sign out
     await page.click(".signout-form button[type='submit']");
     await page.waitForLoadState("networkidle");