Dashboard: Capture More PostHog Events (#44265)

Captures more events for PostHog analytics.

GitOrigin-RevId: 2c69751246b93f31b3146f4fc722760d75aafba2

Author: mikewheaton

npm-packages/dashboard-common/src/elements/CopyButton.tsx

@@ -10,13 +10,15 @@ export function CopyButton({
   tip,
   tipSide,
   disabled,
+  onCopied,
 }: {
   text: string;
   className?: string;
   inline?: boolean;
   tip?: string;
   tipSide?: "top" | "bottom" | "left" | "right";
   disabled?: boolean;
+  onCopied?: () => void;
 }) {
   const [copied, setCopied] = useState(false);
 
@@ -27,6 +29,7 @@ export function CopyButton({
         await copyTextToClipboard(text);
         if (canceled) return;
         setCopied(true);
+        onCopied?.();
 
         setTimeout(() => {
           if (canceled) return;

npm-packages/dashboard-common/src/features/functionRunner/components/FunctionEditor.tsx

@@ -176,6 +176,7 @@ export function useFunctionEditor(
   componentId: ComponentId,
   runHistoryItem: RunHistoryItem | undefined,
   setRunHistoryItem: (item: RunHistoryItem) => void,
+  onRanCustomQuery?: () => void,
 ) {
   const { resolvedTheme: currentTheme } = useTheme();
   const prefersDark = currentTheme === "dark";
@@ -418,7 +419,10 @@ export function useFunctionEditor(
     ),
     runCustomQueryButton: (
       <Button
-        onClick={onSave}
+        onClick={() => {
+          void onSave();
+          onRanCustomQuery?.();
+        }}
         size="sm"
         className={classNames("items-center justify-center", "w-full")}
         loading={isInFlight}

npm-packages/dashboard-common/src/features/functionRunner/components/FunctionResult.tsx

@@ -27,6 +27,7 @@ export function useFunctionResult({
   componentId,
   args,
   runHistoryItem,
+  onCopiedQueryResult,
 }: {
   udfType?: "Mutation" | "Action" | "Query" | "HttpAction";
   onSubmit(): {
@@ -38,6 +39,7 @@ export function useFunctionResult({
   componentId: ComponentId;
   args: Record<string, Value>;
   runHistoryItem?: RunHistoryItem;
+  onCopiedQueryResult?: () => void;
 }) {
   const { appendRunHistory } = useRunHistory(
     functionIdentifier || "",
@@ -205,6 +207,7 @@ export function useFunctionResult({
         lastRequestTiming={lastRequestTiming}
         requestFilter={requestFilter}
         startCursor={startCursor}
+        onCopiedQueryResult={onCopiedQueryResult}
       />
     ),
     runFunction,

npm-packages/dashboard-common/src/features/functionRunner/components/FunctionRunnerWrapper.tsx

@@ -22,11 +22,15 @@ export function FunctionRunnerWrapper({
   setIsVertical,
   isExpanded,
   setIsExpanded,
+  onRanCustomQuery,
+  onCopiedQueryResult,
 }: {
   isVertical: boolean;
   setIsVertical: (isVertical: boolean) => void;
   isExpanded: boolean;
   setIsExpanded: (isExpanded: boolean) => void;
+  onRanCustomQuery?: () => void;
+  onCopiedQueryResult?: () => void;
 }) {
   const deploymentState = useQuery(udfs.deploymentState.deploymentState);
   const router = useRouter();
@@ -99,6 +103,8 @@ export function FunctionRunnerWrapper({
         setIsVertical={setIsGlobalRunnerVerticalAndLog}
         isExpanded={isExpanded}
         setIsExpanded={setIsExpanded}
+        onRanCustomQuery={onRanCustomQuery}
+        onCopiedQueryResult={onCopiedQueryResult}
       />
       {!isGlobalRunnerShown && deploymentState?.state !== "paused" && (
         <Button

npm-packages/dashboard-common/src/features/functionRunner/components/FunctionTester.tsx

@@ -88,11 +88,15 @@ export function GlobalFunctionTester({
   setIsVertical,
   isExpanded,
   setIsExpanded,
+  onRanCustomQuery,
+  onCopiedQueryResult,
 }: {
   isVertical: boolean;
   setIsVertical: (v: boolean) => void;
   isExpanded: boolean;
   setIsExpanded: (v: boolean) => void;
+  onRanCustomQuery?: () => void;
+  onCopiedQueryResult?: () => void;
 }) {
   const isShowing = useIsGlobalRunnerShown();
   const hideGlobalRunner = useHideGlobalRunner();
@@ -149,13 +153,15 @@ export function GlobalFunctionTester({
     argsValidator,
     runHistoryItem,
     setRunHistoryItem,
+    onCopiedQueryResult,
   });
   const { queryEditor, customQueryResult, runCustomQueryButton } =
     useFunctionEditor(
       selectedItem?.fn.type === "customQuery" ? selectedItem.fn.table : null,
       selectedItem?.componentId ?? null,
       runHistoryItem,
       setRunHistoryItem,
+      onRanCustomQuery,
     );
 
   const { useLogDeploymentEvent } = useContext(DeploymentInfoContext);
@@ -423,13 +429,15 @@ export function useFunctionTester({
   impersonation = true,
   runHistoryItem,
   setRunHistoryItem,
+  onCopiedQueryResult,
 }: {
   moduleFunction: ModuleFunction | null;
   initialArgs?: Record<string, Value>;
   argsValidator?: ValidatorJSON;
   impersonation?: boolean;
   runHistoryItem?: RunHistoryItem;
   setRunHistoryItem?: (item?: RunHistoryItem) => void;
+  onCopiedQueryResult?: () => void;
 }) {
   const [parameters, setParameters] = useState<Record<string, Value>>(
     initialArgs || {},
@@ -565,6 +573,7 @@ export function useFunctionTester({
     componentId: moduleFunction?.componentId || null,
     args: parameters,
     runHistoryItem,
+    onCopiedQueryResult,
   });
 
   const queryResult = moduleFunction &&
@@ -575,6 +584,7 @@ export function useFunctionTester({
         module={moduleFunction}
         parameters={parameters}
         reactClient={reactClient}
+        onCopiedQueryResult={onCopiedQueryResult}
       />
     );
 

npm-packages/dashboard-common/src/features/functionRunner/components/QueryResult.tsx

@@ -19,11 +19,13 @@ export function QueryResult({
   parameters,
   reactClient,
   paused,
+  onCopiedQueryResult,
 }: {
   reactClient: ConvexReactClient;
   module: FunctionTypes.ModuleFunction;
   parameters: DefaultFunctionArgs;
   paused: boolean;
+  onCopiedQueryResult?: () => void;
 }) {
   if (module.udfType !== "Query") {
     throw new Error("Invalid udf type");
@@ -74,6 +76,7 @@ export function QueryResult({
         }
         requestFilter={null}
         startCursor={0}
+        onCopiedQueryResult={onCopiedQueryResult}
       />
     </div>
   );

npm-packages/dashboard-common/src/features/functionRunner/components/Result.tsx

@@ -20,6 +20,7 @@ function ResultImpl({
   queryStatus,
   requestFilter,
   startCursor,
+  onCopiedQueryResult,
 }: {
   result?: FunctionResult;
   // If the request is in flight.
@@ -33,6 +34,7 @@ function ResultImpl({
   queryStatus?: React.ReactNode;
   requestFilter: RequestFilter | null;
   startCursor: number;
+  onCopiedQueryResult?: () => void;
 }) {
   const {
     loading: isFormattingCode,
@@ -92,6 +94,7 @@ function ResultImpl({
             className="h-4 p-0"
             tip="Copy Result Value"
             disabled={loading || result === undefined}
+            onCopied={onCopiedQueryResult}
           />
         )}
       </div>

npm-packages/dashboard-common/src/features/settings/components/PauseDeployment.tsx

@@ -23,7 +23,11 @@ const PAUSE_EXPLANATION: string[] = [
   "Cron jobs will be skipped.",
 ];
 
-export function PauseDeployment() {
+export function PauseDeployment({
+  onPausedDeployment,
+}: {
+  onPausedDeployment?: () => void;
+}) {
   const deploymentState = useQuery(udfs.deploymentState.deploymentState);
   const { useCurrentDeployment, useHasProjectAdminPermissions } = useContext(
     DeploymentInfoContext,
@@ -46,7 +50,13 @@ export function PauseDeployment() {
     }
   }, [deploymentState]);
   async function toggle() {
-    await changeDeploymentState(paused ? "running" : "paused");
+    const nextState = paused ? "running" : "paused";
+    await changeDeploymentState(nextState);
+
+    // Only fire the callback when we pause a running deployment.
+    if (!paused && nextState === "paused") {
+      onPausedDeployment?.();
+    }
   }
   function changeVerb(isPaused: boolean) {
     return isPaused ? "Resume" : "Pause";

npm-packages/dashboard-common/src/features/settings/components/PauseDeploymentView.tsx

@@ -1,10 +1,14 @@
 import { PauseDeployment } from "@common/features/settings/components/PauseDeployment";
 import { DeploymentSettingsLayout } from "@common/layouts/DeploymentSettingsLayout";
 
-export function PauseDeploymentView() {
+export function PauseDeploymentView({
+  onPausedDeployment,
+}: {
+  onPausedDeployment?: () => void;
+}) {
   return (
     <DeploymentSettingsLayout page="pause-deployment">
-      <PauseDeployment />
+      <PauseDeployment onPausedDeployment={onPausedDeployment} />
     </DeploymentSettingsLayout>
   );
 }

npm-packages/dashboard-common/src/features/settings/components/integrations/AxiomConfigurationForm.tsx

@@ -34,9 +34,11 @@ type Unpacked<T> = T extends (infer U)[] ? U : never;
 export function AxiomConfigurationForm({
   onClose,
   existingConfig,
+  onAddedIntegration,
 }: {
   onClose: () => void;
   existingConfig: Infer<typeof axiomConfig> | null;
+  onAddedIntegration?: () => void;
 }) {
   const isUsingLegacyFormat = integrationUsingLegacyFormat(existingConfig);
   const createAxiomIntegration = useCreateAxiomIntegration();
@@ -63,6 +65,7 @@ export function AxiomConfigurationForm({
         values.version,
         values.ingestUrl,
       );
+      onAddedIntegration?.();
       onClose();
     },
     validationSchema: axiomValidationSchema,