fix(ai-help): example header highlighting (#10366)

resolves MP-706
mdn · Jan 23, 2024 · bb5ef9a · bb5ef9a
1 parent 1ddda23
commit bb5ef9a
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 8 deletions.
diff --git a/client/src/document/code/playground.ts b/client/src/document/code/playground.ts
@@ -126,6 +126,20 @@ export function collectCode(input?: HTMLInputElement): EditorContent {
   };
 }
 
+export function highlight(
+  header: Element,
+  highlightedQueueExample: string | null
+) {
+  // Highlight the header if it's the one we're mouse-overing
+  // on the corresponding item in the queue.
+  const id = header.querySelector('[type="checkbox"]')?.id;
+  if (highlightedQueueExample === id) {
+    header.classList.add("active");
+  } else {
+    header.classList.remove("active");
+  }
+}
+
 export function addCollectButton(
   element: Element | null,
   id: string,

diff --git a/client/src/document/hooks.ts b/client/src/document/hooks.ts
@@ -9,8 +9,10 @@ import {
   addCollectButton,
   getCodeAndNodesForIframe,
   getCodeAndNodesForIframeBySampleClass,
+  highlight,
 } from "./code/playground";
 import { addCopyToClipboardButton } from "./code/copy";
+import { useUIStatus } from "../ui-context";
 
 export function useDocumentURL() {
   const locale = useLocale();
@@ -25,6 +27,7 @@ export function useDocumentURL() {
 export function useCollectSample(doc: any) {
   const isServer = useIsServer();
   const locale = useLocale();
+  const { highlightedQueueExample } = useUIStatus();
 
   useEffect(() => {
     if (isServer) {
@@ -40,8 +43,9 @@ export function useCollectSample(doc: any) {
       )
       .forEach((header) => {
         addCollectButton(header, "collect", locale);
+        highlight(header, highlightedQueueExample);
       });
-  }, [doc, isServer, locale]);
+  }, [doc, isServer, locale, highlightedQueueExample]);
 }
 
 export function useRunSample(doc: Doc | undefined) {

diff --git a/client/src/playground/queue/index.tsx b/client/src/playground/queue/index.tsx
@@ -19,14 +19,18 @@ function PQEntry({
   unqueue: () => void;
 }) {
   const gleanClick = useGleanClick();
+  const { setHighlightedQueueExample } = useUIStatus();
   const getHeader = () => {
     const element = document.getElementById(id);
     return element?.parentElement?.parentElement;
   };
   const setActive = (value: boolean) => {
-    const header = getHeader();
-    if (header instanceof HTMLElement) {
-      header.classList.toggle("active", value);
+    if (setHighlightedQueueExample) {
+      if (value) {
+        setHighlightedQueueExample(id);
+      } else {
+        setHighlightedQueueExample(null);
+      }
     }
   };
   const intoView = () => {
@@ -39,8 +43,8 @@ function PQEntry({
   return (
     <li
       key={key}
-      onMouseOver={() => setActive(true)}
-      onMouseOut={() => setActive(false)}
+      onMouseEnter={() => setActive(true)}
+      onMouseLeave={() => setActive(false)}
     >
       <button
         className="queue-ref"

diff --git a/client/src/plus/ai-help/index.tsx b/client/src/plus/ai-help/index.tsx
@@ -284,6 +284,7 @@ function AIHelpAssistantResponse({
 }) {
   const gleanClick = useGleanClick();
   const locale = useLocale();
+  const { highlightedQueueExample } = useUIStatus();
 
   let sample = 0;
 
@@ -400,7 +401,11 @@ function AIHelpAssistantResponse({
                 sample += 1;
                 return (
                   <div className="code-example">
-                    <div className="example-header play-collect">
+                    <div
+                      className={`example-header play-collect ${
+                        highlightedQueueExample === id ? "active" : ""
+                      }`}
+                    >
                       <span className="language-name">{code}</span>
                       {message.status === MessageStatus.Complete &&
                         ["html", "js", "javascript", "css"].includes(
@@ -517,7 +522,8 @@ export function AIHelpInner() {
   const footerRef = useRef<HTMLDivElement>(null);
   const [query, setQuery] = useState("");
   const [showDisclaimer, setShowDisclaimer] = useState(false);
-  const { queuedExamples, setQueue } = useUIStatus();
+  const { queuedExamples, setQueue, setHighlightedQueueExample } =
+    useUIStatus();
   const { hash } = useLocation();
   const gleanClick = useGleanClick();
   const user = useUserData();
@@ -718,6 +724,7 @@ export function AIHelpInner() {
                           gleanClick(`${AI_HELP}: topic new`);
                           setQuery("");
                           setQueue([]);
+                          setHighlightedQueueExample(null);
                           reset();
                           window.setTimeout(() => window.scrollTo(0, 0));
                         }}

diff --git a/client/src/ui-context.tsx b/client/src/ui-context.tsx
@@ -13,6 +13,8 @@ interface UIStatus {
   queuedExamples: Set<string>;
   queue: QueueEntry[];
   setQueue: React.Dispatch<React.SetStateAction<QueueEntry[]>>;
+  highlightedQueueExample: null | string;
+  setHighlightedQueueExample: (value: string | null) => void;
 }
 
 export enum Overlay {
@@ -32,6 +34,8 @@ const UIContext = React.createContext<UIStatus>({
   queuedExamples: new Set<string>(),
   queue: [],
   setQueue: () => {},
+  highlightedQueueExample: null,
+  setHighlightedQueueExample: () => {},
 });
 
 export function UIProvider(props: any) {
@@ -44,6 +48,9 @@ export function UIProvider(props: any) {
   );
   const [queuedExamples, setQueuedExamples] = useState<Set<string>>(new Set());
   const [queue, setQueue] = useState<QueueEntry[]>([]);
+  const [highlightedQueueExample, setHighlightedQueueExample] = useState<
+    string | null
+  >(null);
 
   const toggleMobileOverlay = useCallback(
     (overlay: Overlay, shown?: boolean) => {
@@ -117,6 +124,8 @@ export function UIProvider(props: any) {
         queuedExamples,
         queue,
         setQueue,
+        highlightedQueueExample: highlightedQueueExample,
+        setHighlightedQueueExample: setHighlightedQueueExample,
       }}
     >
       {props.children}