DEVPROD-14700: Add pin analytics event

apps/spruce/src/analytics/waterfall/useWaterfallAnalytics.ts

@@ -13,6 +13,11 @@ type Action =
   | { name: "Clicked variant label" }
   | { name: "Clicked task box"; "task.status": string }
   | { name: "Clicked jump to most recent commit button" }
+  | {
+      name: "Clicked pin build variant";
+      action: "pinned" | "unpinned";
+      variant: string;
+    }
   | { name: "Changed project"; project: string }
   | { name: "Filtered by build variant"; type: FilterType }
   | { name: "Filtered by requester"; requesters: string[] }

apps/spruce/src/pages/waterfall/BuildRow.tsx

@@ -231,6 +231,7 @@ const BuildContainer = styled.div`
 
 const StyledIconButton = styled(IconButton)`
   top: -${size.xxs};
+  z-index: 1;
   ${({ active }) => active && "transform: rotate(-30deg);"}
 `;
 

apps/spruce/src/pages/waterfall/WaterfallGrid.tsx

@@ -3,6 +3,7 @@ import { useSuspenseQuery } from "@apollo/client";
 import styled from "@emotion/styled";
 import { fromZonedTime } from "date-fns-tz";
 import { size, transitionDuration } from "@evg-ui/lib/constants/tokens";
+import { useWaterfallAnalytics } from "analytics";
 import { WalkthroughGuideCueRef } from "components/WalkthroughGuideCue";
 import {
   DEFAULT_POLL_INTERVAL,
@@ -51,16 +52,22 @@ export const WaterfallGrid: React.FC<WaterfallGridProps> = ({
 }) => {
   useWaterfallTrace();
   const { adminBetaSettings } = useAdminBetaFeatures();
+  const { sendEvent } = useWaterfallAnalytics();
 
   const [pins, setPins] = useState<string[]>(
     getObject(WATERFALL_PINNED_VARIANTS_KEY)?.[projectIdentifier] ?? [],
   );
 
   const handlePinBV = useCallback(
-    (buildVariant: string) => () => {
+    (buildVariant: string, wasPinned: boolean) => () => {
+      sendEvent({
+        name: "Clicked pin build variant",
+        action: wasPinned ? "unpinned" : "pinned",
+        variant: buildVariant,
+      });
       setPins((prev: string[]) => {
-        const bvIndex = prev.indexOf(buildVariant);
-        if (bvIndex > -1) {
+        if (wasPinned) {
+          const bvIndex = prev.indexOf(buildVariant);
           const removed = [...prev];
           removed.splice(bvIndex, 1);
           return removed;
@@ -169,18 +176,21 @@ export const WaterfallGrid: React.FC<WaterfallGridProps> = ({
         </Versions>
       </StickyHeader>
       <BuildVariantProvider>
-        {buildVariants.map((b, i) => (
-          <BuildRow
-            key={b.id}
-            build={b}
-            handlePinClick={handlePinBV(b.id)}
-            isFirstBuild={i === 0}
-            lastActiveVersionId={lastActiveVersionId}
-            pinned={pins.includes(b.id)}
-            projectIdentifier={projectIdentifier}
-            versions={versions}
-          />
-        ))}
+        {buildVariants.map((b, i) => {
+          const pinned = pins.includes(b.id);
+          return (
+            <BuildRow
+              key={b.id}
+              build={b}
+              handlePinClick={handlePinBV(b.id, pinned)}
+              isFirstBuild={i === 0}
+              lastActiveVersionId={lastActiveVersionId}
+              pinned={pinned}
+              projectIdentifier={projectIdentifier}
+              versions={versions}
+            />
+          );
+        })}
       </BuildVariantProvider>
       {adminBetaSettings?.spruceWaterfallEnabled && (
         <OnboardingTutorial guideCueRef={guideCueRef} />