chore(glean): migrate to using data-glean everywhere (#9496)

mdn · Aug 29, 2023 · bd99229 · bd99229
1 parent af58be3
commit bd99229
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 24 deletions.
diff --git a/client/src/document/code/ai-explain.ts b/client/src/document/code/ai-explain.ts
@@ -1,4 +1,5 @@
 import { SSE } from "sse.js";
+import { AI_EXPLAIN } from "../../telemetry/constants";
 
 interface ExplainRequest {
   language: string | undefined;
@@ -25,7 +26,7 @@ function explain(
 function thumbs(upDown: string, title: string, callback: () => void): Element {
   const thumbs = document.createElement("button");
   thumbs.classList.add("icon", `icon-thumbs-${upDown}`);
-  thumbs.setAttribute("data-ai-explain", `thumbs_${upDown}`);
+  thumbs.dataset.glean = `${AI_EXPLAIN}: thumbs_${upDown}`;
   thumbs.addEventListener("click", callback);
   thumbs.title = title;
   return thumbs;
@@ -80,7 +81,7 @@ export function addExplainButton(
   button.textContent = "AI Explain";
   button.classList.add("ai-explain-button");
   button.type = "button";
-  button.setAttribute("data-ai-explain", "explain");
+  button.dataset.glean = `${AI_EXPLAIN}: explain`;
   button.title = "Explain (parts of) this example";
   buttonContainer.appendChild(button);
   const info = document.createElement("div");
@@ -90,7 +91,7 @@ export function addExplainButton(
   const infoToggle = document.createElement("button");
   infoToggle.classList.add("ai-explain-info-toggle", "icon", "icon-note-info");
   infoToggle.type = "button";
-  infoToggle.setAttribute("data-ai-explain", "info-toggle");
+  infoToggle.dataset.glean = `${AI_EXPLAIN}: info-toggle`;
   infoToggle.title = "Toggle AI Explain info";
   infoToggle.addEventListener("click", () =>
     info.classList.toggle("visually-hidden")

diff --git a/client/src/document/code/playground.ts b/client/src/document/code/playground.ts
@@ -1,4 +1,5 @@
 import { EditorContent, SESSION_KEY } from "../../playground/utils";
+import { PLAYGROUND } from "../../telemetry/constants";
 
 const LIVE_SAMPLE_PARTS = ["html", "css", "js"];
 
@@ -71,7 +72,7 @@ export function addBreakoutButton(
 
   button.setAttribute("class", "play-button external");
   button.type = "button";
-  button.setAttribute("data-play", id);
+  button.dataset.glean = `${PLAYGROUND}: breakout->${id}`;
   button.title = "Open in Playground";
   element.appendChild(button);
 

diff --git a/client/src/telemetry/glean-context.tsx b/client/src/telemetry/glean-context.tsx
@@ -9,7 +9,7 @@ import { useEffect, useRef } from "react";
 import { useLocation } from "react-router";
 import { useUserData } from "../user-context";
 import { handleSidebarClick } from "./sidebar-click";
-import { AI_EXPLAIN, PLAYGROUND, VIEWPORT_BREAKPOINTS } from "./constants";
+import { VIEWPORT_BREAKPOINTS } from "./constants";
 
 export type ViewportBreakpoint = "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
 export type HTTPStatus = "200" | "404";
@@ -142,27 +142,19 @@ const gleanAnalytics = glean();
 const GleanContext = React.createContext(gleanAnalytics);
 
 function handleButtonClick(ev: MouseEvent, click: (source: string) => void) {
-  const button = ev?.target as Element;
-  if (button?.nodeName === "BUTTON") {
-    if (button.hasAttribute?.("data-play")) {
-      click(
-        `${PLAYGROUND}: breakout->${button.getAttribute("data-play") || ""}`
-      );
-    } else if (button.hasAttribute?.("data-ai-explain")) {
-      click(`${AI_EXPLAIN}: ${button.getAttribute("data-ai-explain") || ""}}`);
-    }
+  const button = ev?.target;
+  if (button instanceof HTMLButtonElement && button.dataset.glean) {
+    click(button.dataset.glean);
   }
 }
 
 function handleLinkClick(ev: MouseEvent, click: (source: string) => void) {
   const anchor = ev?.target;
   if (anchor instanceof HTMLAnchorElement) {
-    if (anchor?.classList.contains("external")) {
-      click(`external-link: ${anchor.getAttribute("href") || ""}`);
-    } else if (anchor?.hasAttribute?.("data-pong")) {
-      click(`pong: ${anchor.getAttribute("data-pong") || ""}`);
-    } else if (anchor.dataset.glean) {
+    if (anchor.dataset.glean) {
       click(anchor.dataset.glean);
+    } else if (anchor.classList.contains("external")) {
+      click(`external-link: ${anchor.getAttribute("href") || ""}`);
     }
   }
 }

diff --git a/client/src/ui/organisms/placement/index.tsx b/client/src/ui/organisms/placement/index.tsx
@@ -316,7 +316,7 @@ function RenderSideOrTopBanner({
       <p className="pong-box">
         <a
           className="pong"
-          data-pong="pong->click"
+          data-glean="pong: pong->click"
           href={`/pong/click?code=${encodeURIComponent(click)}`}
           target="_blank"
           rel="noreferrer"
@@ -333,7 +333,7 @@ function RenderSideOrTopBanner({
         {cta && (
           <a
             className="pong-cta"
-            data-pong="pong->click"
+            data-glean="pong: pong->click"
             href={`/pong/click?code=${encodeURIComponent(click)}`}
             target="_blank"
             rel="noreferrer"
@@ -344,7 +344,7 @@ function RenderSideOrTopBanner({
         <a
           href="/en-US/advertising"
           className="pong-note"
-          data-pong="pong->about"
+          data-glean="pong: pong->about"
           target="_blank"
           rel="noreferrer"
         >
@@ -354,7 +354,9 @@ function RenderSideOrTopBanner({
 
       <a
         className="no-pong"
-        data-pong={user?.isSubscriber ? "pong->settings" : "pong->plus"}
+        data-glean={
+          "pong: " + (user?.isSubscriber ? "pong->settings" : "pong->plus")
+        }
         href={
           user?.isSubscriber
             ? "/en-US/plus/settings?ref=nope"
@@ -385,7 +387,7 @@ function RenderHpPlacement({
     >
       <a
         className="pong"
-        data-pong="pong->click"
+        data-glean="pong: pong->click"
         href={`/pong/click?code=${encodeURIComponent(click)}`}
         target="_blank"
         rel="noreferrer"