feat(inbox): add copy-link button to pull request detail (#2692)

Author: andrewm4894

packages/ui/src/features/inbox/components/AgentRunDetail.tsx

@@ -13,7 +13,6 @@ import {
   parsePrUrl,
 } from "@posthog/core/inbox/reportPresentation";
 import { Button } from "@posthog/quill";
-import { buildInboxDeeplink } from "@posthog/shared/deeplink";
 import {
   isTerminalStatus,
   type SignalReport,
@@ -49,13 +48,13 @@ import {
 } from "@posthog/ui/features/inbox/components/utils/source-product-icons";
 import { useInboxReportSignals } from "@posthog/ui/features/inbox/hooks/useInboxReports";
 import { useReportTasks } from "@posthog/ui/features/inbox/hooks/useReportTasks";
+import { copyInboxReportLink } from "@posthog/ui/features/inbox/utils/copyInboxReportLink";
 import { TaskLogsPanel } from "@posthog/ui/features/task-detail/components/TaskLogsPanel";
 import { RelativeTimestamp } from "@posthog/ui/primitives/RelativeTimestamp";
 import { openTask } from "@posthog/ui/router/useOpenTask";
 import { DropdownMenu, Flex, Text } from "@radix-ui/themes";
 import { Link } from "@tanstack/react-router";
 import { useMemo, useState } from "react";
-import { toast } from "sonner";
 
 export function TaskRunStatusDot({ status }: { status: TaskRunStatus }) {
   const terminal = isTerminalStatus(status);
@@ -277,16 +276,6 @@ function AgentRunDetailContent({ report }: { report: SignalReport }) {
     return hasInFlight && hasPriorTerminal;
   }, [reportTasks]);
 
-  const handleCopyLink = () => {
-    const url = buildInboxDeeplink(report.id, report.title, {
-      isDevBuild: import.meta.env.DEV,
-    });
-    navigator.clipboard
-      .writeText(url)
-      .then(() => toast.success("Link copied"))
-      .catch(() => toast.error("Couldn't copy link"));
-  };
-
   return (
     <Flex direction="column" className="min-h-full">
       <InboxDetailPageHeader
@@ -371,7 +360,7 @@ function AgentRunDetailContent({ report }: { report: SignalReport }) {
               type="button"
               variant="outline"
               size="sm"
-              onClick={handleCopyLink}
+              onClick={() => copyInboxReportLink(report)}
               title="Copy a deep link to this run"
             >
               <CopyIcon size={12} />

packages/ui/src/features/inbox/components/PullRequestDetail.tsx

@@ -1,5 +1,6 @@
 import {
   ArrowSquareOutIcon,
+  CopyIcon,
   GitPullRequestIcon,
   MagnifyingGlassIcon,
 } from "@phosphor-icons/react";
@@ -13,6 +14,7 @@ import { PrDiffStats } from "@posthog/ui/features/inbox/components/PrDiffStats";
 import { ReportDetailActions } from "@posthog/ui/features/inbox/components/ReportDetailActions";
 import { ReportTasksSection } from "@posthog/ui/features/inbox/components/ReportTasksSection";
 import { SuggestedReviewersSection } from "@posthog/ui/features/inbox/components/SuggestedReviewersSection";
+import { copyInboxReportLink } from "@posthog/ui/features/inbox/utils/copyInboxReportLink";
 import { Text } from "@radix-ui/themes";
 
 interface PullRequestDetailProps {
@@ -72,6 +74,15 @@ function PullRequestDetailContent({ report }: { report: SignalReport }) {
       primaryAction={
         <>
           <ReportDetailActions report={report} />
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            onClick={() => copyInboxReportLink(report)}
+            title="Copy a deep link to this report"
+          >
+            <CopyIcon size={12} />
+          </Button>
           {prRef && report.implementation_pr_url ? (
             <Button
               type="button"

packages/ui/src/features/inbox/components/ReportDetail.tsx

@@ -4,14 +4,13 @@ import {
   MagnifyingGlassIcon,
 } from "@phosphor-icons/react";
 import { Button } from "@posthog/quill";
-import { buildInboxDeeplink } from "@posthog/shared/deeplink";
 import type { SignalReport } from "@posthog/shared/types";
 import { InboxDetailFrame } from "@posthog/ui/features/inbox/components/InboxDetailFrame";
 import { InboxReportDetailGate } from "@posthog/ui/features/inbox/components/InboxReportDetailGate";
 import { ReportDetailActions } from "@posthog/ui/features/inbox/components/ReportDetailActions";
 import { ReportTasksSection } from "@posthog/ui/features/inbox/components/ReportTasksSection";
 import { SuggestedReviewersSection } from "@posthog/ui/features/inbox/components/SuggestedReviewersSection";
-import { toast } from "sonner";
+import { copyInboxReportLink } from "@posthog/ui/features/inbox/utils/copyInboxReportLink";
 
 interface ReportDetailProps {
   reportId: string;
@@ -36,16 +35,6 @@ export function ReportDetail({
 }
 
 function ReportDetailContent({ report }: { report: SignalReport }) {
-  const handleCopyLink = () => {
-    const url = buildInboxDeeplink(report.id, report.title, {
-      isDevBuild: import.meta.env.DEV,
-    });
-    navigator.clipboard
-      .writeText(url)
-      .then(() => toast.success("Link copied"))
-      .catch(() => toast.error("Couldn't copy link"));
-  };
-
   return (
     <InboxDetailFrame
       report={report}
@@ -59,7 +48,7 @@ function ReportDetailContent({ report }: { report: SignalReport }) {
             type="button"
             variant="outline"
             size="sm"
-            onClick={handleCopyLink}
+            onClick={() => copyInboxReportLink(report)}
             title="Copy a deep link to this report"
           >
             <CopyIcon size={12} />

packages/ui/src/features/inbox/utils/copyInboxReportLink.ts

@@ -0,0 +1,21 @@
+import { buildInboxDeeplink } from "@posthog/shared/deeplink";
+import type { SignalReport } from "@posthog/shared/types";
+import { toast } from "sonner";
+
+/**
+ * Copy a deep link (`<scheme>://inbox/{reportId}`) for an inbox report to the
+ * clipboard, toasting success or failure. Shared by every inbox detail surface
+ * (reports, runs, pull requests) so the link format and copy feedback stay in
+ * one place. The inbound side of these links lives in `useInboxDeepLink`.
+ */
+export function copyInboxReportLink(
+  report: Pick<SignalReport, "id" | "title">,
+): void {
+  const url = buildInboxDeeplink(report.id, report.title, {
+    isDevBuild: import.meta.env.DEV,
+  });
+  navigator.clipboard
+    .writeText(url)
+    .then(() => toast.success("Link copied"))
+    .catch(() => toast.error("Couldn't copy link"));
+}