From 9954b37b015eee01b23022bdd2c9d84db2244500 Mon Sep 17 00:00:00 2001
From: MananTank <manantankm@gmail.com>
Date: Fri, 13 Dec 2024 21:10:48 +0000
Subject: [PATCH] [DASH-624] Add tracking in insight playground (#5737)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Problem solved

DASH-624

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on enhancing the `CodeBlockContainer` and related components to support an `onCopy` callback, allowing for custom actions when code is copied. It also introduces tracking for user interactions within the `BlueprintPlayground` component.

### Detailed summary
- Added `onCopy` prop to `CodeBlockContainer`, `RenderCode`, `PlainTextCodeBlock`, and `CodeClient`.
- Updated button click handler in `CodeBlockContainer` to call `onCopy` and pass the copied code.
- Integrated `useTrack` for tracking user events in `BlueprintPlayground`.
- Added tracking for "run", "copy-url", and "copy-response" actions in relevant components.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
---
 .../components/ui/code/CodeBlockContainer.tsx |  6 +++-
 .../src/@/components/ui/code/RenderCode.tsx   |  2 ++
 .../src/@/components/ui/code/code.client.tsx  |  4 +++
 .../@/components/ui/code/plaintext-code.tsx   |  2 ++
 .../blueprint-playground.client.tsx           | 28 +++++++++++++++++++
 5 files changed, 41 insertions(+), 1 deletion(-)

diff --git a/apps/dashboard/src/@/components/ui/code/CodeBlockContainer.tsx b/apps/dashboard/src/@/components/ui/code/CodeBlockContainer.tsx
index d927a06cf90..bfc697747f6 100644
--- a/apps/dashboard/src/@/components/ui/code/CodeBlockContainer.tsx
+++ b/apps/dashboard/src/@/components/ui/code/CodeBlockContainer.tsx
@@ -14,6 +14,7 @@ export function CodeBlockContainer(props: {
   scrollableContainerClassName?: string;
   copyButtonClassName?: string;
   shadowColor?: string;
+  onCopy?: (code: string) => void;
 }) {
   const { hasCopied, onCopy } = useClipboard(props.codeToCopy);
 
@@ -38,7 +39,10 @@ export function CodeBlockContainer(props: {
       <Button
         size="sm"
         variant="outline"
-        onClick={onCopy}
+        onClick={() => {
+          onCopy();
+          props.onCopy?.(props.codeToCopy);
+        }}
         className={cn(
           "absolute top-3.5 right-3.5 h-auto bg-background p-2",
           props.copyButtonClassName,
diff --git a/apps/dashboard/src/@/components/ui/code/RenderCode.tsx b/apps/dashboard/src/@/components/ui/code/RenderCode.tsx
index c938bc67b02..29216115e3c 100644
--- a/apps/dashboard/src/@/components/ui/code/RenderCode.tsx
+++ b/apps/dashboard/src/@/components/ui/code/RenderCode.tsx
@@ -8,6 +8,7 @@ export function RenderCode(props: {
   copyButtonClassName?: string;
   scrollableContainerClassName?: string;
   shadowColor?: string;
+  onCopy?: (code: string) => void;
 }) {
   return (
     <CodeBlockContainer
@@ -17,6 +18,7 @@ export function RenderCode(props: {
       scrollableClassName={props.scrollableClassName}
       scrollableContainerClassName={props.scrollableContainerClassName}
       shadowColor={props.shadowColor}
+      onCopy={props.onCopy}
     >
       <div
         // biome-ignore lint/security/noDangerouslySetInnerHtml: we know what we're doing here
diff --git a/apps/dashboard/src/@/components/ui/code/code.client.tsx b/apps/dashboard/src/@/components/ui/code/code.client.tsx
index 8e49c6a6502..af471fac56f 100644
--- a/apps/dashboard/src/@/components/ui/code/code.client.tsx
+++ b/apps/dashboard/src/@/components/ui/code/code.client.tsx
@@ -15,6 +15,7 @@ export type CodeProps = {
   scrollableContainerClassName?: string;
   shadowColor?: string;
   ignoreFormattingErrors?: boolean;
+  onCopy?: (code: string) => void;
 };
 
 export const CodeClient: React.FC<CodeProps> = ({
@@ -27,6 +28,7 @@ export const CodeClient: React.FC<CodeProps> = ({
   ignoreFormattingErrors,
   scrollableContainerClassName,
   shadowColor,
+  onCopy,
 }) => {
   const codeQuery = useQuery({
     queryKey: ["html", code],
@@ -49,6 +51,7 @@ export const CodeClient: React.FC<CodeProps> = ({
         copyButtonClassName={copyButtonClassName}
         scrollableContainerClassName={scrollableContainerClassName}
         shadowColor={shadowColor}
+        onCopy={onCopy}
       />
     );
   }
@@ -62,6 +65,7 @@ export const CodeClient: React.FC<CodeProps> = ({
       copyButtonClassName={copyButtonClassName}
       scrollableContainerClassName={scrollableContainerClassName}
       shadowColor={shadowColor}
+      onCopy={onCopy}
     />
   );
 };
diff --git a/apps/dashboard/src/@/components/ui/code/plaintext-code.tsx b/apps/dashboard/src/@/components/ui/code/plaintext-code.tsx
index cac994785a9..b1b05b0c22d 100644
--- a/apps/dashboard/src/@/components/ui/code/plaintext-code.tsx
+++ b/apps/dashboard/src/@/components/ui/code/plaintext-code.tsx
@@ -9,6 +9,7 @@ export function PlainTextCodeBlock(props: {
   codeClassName?: string;
   scrollableContainerClassName?: string;
   shadowColor?: string;
+  onCopy?: (code: string) => void;
 }) {
   return (
     <CodeBlockContainer
@@ -18,6 +19,7 @@ export function PlainTextCodeBlock(props: {
       scrollableClassName={props.scrollableClassName}
       scrollableContainerClassName={props.scrollableContainerClassName}
       shadowColor={props.shadowColor}
+      onCopy={props.onCopy}
     >
       <code className={cn("block whitespace-pre", props.codeClassName)}>
         {props.code}
diff --git a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/insight/[blueprint_slug]/blueprint-playground.client.tsx b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/insight/[blueprint_slug]/blueprint-playground.client.tsx
index aecd1cc031e..0f81e457a90 100644
--- a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/insight/[blueprint_slug]/blueprint-playground.client.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/insight/[blueprint_slug]/blueprint-playground.client.tsx
@@ -28,9 +28,12 @@ import Link from "next/link";
 import { useEffect, useMemo, useState } from "react";
 import { type UseFormReturn, useForm } from "react-hook-form";
 import { z } from "zod";
+import { useTrack } from "../../../../../../hooks/analytics/useTrack";
 import { getVercelEnv } from "../../../../../../lib/vercel-utils";
 import type { BlueprintParameter, BlueprintPathMetadata } from "../utils";
 
+const trackingCategory = "insightBlueprint";
+
 export function BlueprintPlayground(props: {
   metadata: BlueprintPathMetadata;
   backLink: string;
@@ -151,6 +154,7 @@ export function BlueprintPlaygroundUI(props: {
   projectSettingsLink: string;
   supportedChainIds: number[];
 }) {
+  const trackEvent = useTrack();
   const parameters = useMemo(() => {
     return modifyParametersForPlayground(props.metadata.parameters);
   }, [props.metadata.parameters]);
@@ -182,6 +186,12 @@ export function BlueprintPlaygroundUI(props: {
       intent: "run",
     });
 
+    trackEvent({
+      category: trackingCategory,
+      action: "click",
+      label: "run",
+      url: url,
+    });
     props.onRun(url);
   }
 
@@ -306,6 +316,8 @@ function PlaygroundHeader(props: {
   domain: string;
   path: string;
 }) {
+  const trackEvent = useTrack();
+
   const [hasCopied, setHasCopied] = useState(false);
   return (
     <div className="border-b px-4 py-4 lg:flex lg:justify-center lg:py-3">
@@ -325,6 +337,14 @@ function PlaygroundHeader(props: {
                 values: props.getFormValues(),
                 intent: "copy",
               });
+
+              trackEvent({
+                category: trackingCategory,
+                action: "click",
+                label: "copy-url",
+                url: url,
+              });
+
               setTimeout(() => {
                 setHasCopied(false);
               }, 500);
@@ -561,6 +581,7 @@ function ResponseSection(props: {
     | undefined;
   abortRequest: () => void;
 }) {
+  const trackEvent = useTrack();
   const formattedData = useMemo(() => {
     if (!props.response?.data) return undefined;
     try {
@@ -628,6 +649,13 @@ function ResponseSection(props: {
           scrollableContainerClassName="h-full"
           scrollableClassName="h-full"
           shadowColor="hsl(var(--muted)/50%)"
+          onCopy={() => {
+            trackEvent({
+              category: trackingCategory,
+              action: "click",
+              label: "copy-response",
+            });
+          }}
         />
       )}
     </div>