From bd9922925f9ed1c97c2ed6b0abef84b86c539119 Mon Sep 17 00:00:00 2001 From: Leo McArdle Date: Tue, 29 Aug 2023 14:32:59 +0100 Subject: [PATCH] chore(glean): migrate to using data-glean everywhere (#9496) --- client/src/document/code/ai-explain.ts | 7 ++++--- client/src/document/code/playground.ts | 3 ++- client/src/telemetry/glean-context.tsx | 22 +++++++-------------- client/src/ui/organisms/placement/index.tsx | 12 ++++++----- 4 files changed, 20 insertions(+), 24 deletions(-) diff --git a/client/src/document/code/ai-explain.ts b/client/src/document/code/ai-explain.ts index 1549949ba6da..658d8eff048e 100644 --- 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 index 5a93cfa1a6a0..92e828b79cf7 100644 --- 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 index 8fdbac53a3d1..dc8f2fd6a060 100644 --- 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 index 0c7e1de4ff01..2b0196d53960 100644 --- a/client/src/ui/organisms/placement/index.tsx +++ b/client/src/ui/organisms/placement/index.tsx @@ -316,7 +316,7 @@ function RenderSideOrTopBanner({

@@ -354,7 +354,9 @@ function RenderSideOrTopBanner({ 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({ >