feat: open single plan result from url

apps/web/app/routes/ws/deployments/_components/plans/PlanDiffDialog.tsx

@@ -8,15 +8,15 @@ import {
   DialogContent,
   DialogHeader,
   DialogTitle,
-  DialogTrigger,
 } from "~/components/ui/dialog";
 import { Tabs, TabsList, TabsTrigger } from "~/components/ui/tabs";
 
 type PlanDiffDialogProps = {
   deploymentId: string;
-  resultId: string;
+  resultId: string | undefined;
   title: string;
-  children: React.ReactNode;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
 };
 
 type DiffView = "split" | "unified";
@@ -25,20 +25,19 @@ export function PlanDiffDialog({
   deploymentId,
   resultId,
   title,
-  children,
+  open,
+  onOpenChange,
 }: PlanDiffDialogProps) {
-  const [open, setOpen] = useState(false);
   const [view, setView] = useState<DiffView>("split");
   const { theme } = useTheme();
 
   const diffQuery = trpc.deployment.plans.resultDiff.useQuery(
-    { deploymentId, resultId },
-    { enabled: open },
+    { deploymentId, resultId: resultId ?? "" },
+    { enabled: open && resultId != null },
   );
 
   return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>{children}</DialogTrigger>
+    <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="flex h-[90vh] w-[95vw] max-w-[95vw] flex-col p-0 sm:max-w-[95vw]">
         <DialogHeader className="flex-row items-center justify-between border-b p-4 pr-12">
           <DialogTitle>{title}</DialogTitle>

apps/web/app/routes/ws/deployments/_hooks/usePlanResultParam.ts

@@ -0,0 +1,20 @@
+import { useSearchParams } from "react-router";
+
+export function usePlanResultParam() {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const resultId = searchParams.get("resultId") ?? undefined;
+
+  const openResult = (id: string) => {
+    const newParams = new URLSearchParams(searchParams);
+    newParams.set("resultId", id);
+    setSearchParams(newParams);
+  };
+
+  const closeResult = () => {
+    const newParams = new URLSearchParams(searchParams);
+    newParams.delete("resultId");
+    setSearchParams(newParams);
+  };
+
+  return { resultId, openResult, closeResult };
+}

apps/web/app/routes/ws/deployments/page.$deploymentId.plans.$planId.tsx

@@ -26,6 +26,7 @@ import { useDeployment } from "./_components/DeploymentProvider";
 import { DeploymentsNavbarTabs } from "./_components/DeploymentsNavbarTabs";
 import { PlanDiffDialog } from "./_components/plans/PlanDiffDialog";
 import { PlanStatusBadge } from "./_components/plans/PlanStatusBadge";
+import { usePlanResultParam } from "./_hooks/usePlanResultParam";
 
 export function meta() {
   return [
@@ -36,12 +37,16 @@ export function meta() {
 
 type Result = RouterOutputs["deployment"]["plans"]["results"][number];
 
+function resultTitle(result: Result) {
+  return `${result.environment.name} · ${result.resource.name} · ${result.agent.name}`;
+}
+
 function ChangesCell({
   result,
-  deploymentId,
+  onViewDiff,
 }: {
   result: Result;
-  deploymentId: string;
+  onViewDiff: (resultId: string) => void;
 }) {
   if (result.status === "computing")
     return <span className="text-muted-foreground">—</span>;
@@ -58,19 +63,14 @@ function ChangesCell({
     return <span className="text-muted-foreground">Unsupported</span>;
   if (result.hasChanges === true)
     return (
-      <PlanDiffDialog
-        deploymentId={deploymentId}
-        resultId={result.resultId}
-        title={`${result.environment.name} · ${result.resource.name} · ${result.agent.name}`}
+      <Button
+        variant="outline"
+        size="sm"
+        className="h-6 cursor-pointer hover:bg-accent hover:text-accent-foreground"
+        onClick={() => onViewDiff(result.resultId)}
       >
-        <Button
-          variant="outline"
-          size="sm"
-          className="h-6 cursor-pointer hover:bg-accent hover:text-accent-foreground"
-        >
-          View diff
-        </Button>
-      </PlanDiffDialog>
+        View diff
+      </Button>
     );
   if (result.hasChanges === false)
     return <span className="text-muted-foreground">No changes</span>;
@@ -93,10 +93,10 @@ function ResultsTableHeader() {
 
 function ResultsTableRow({
   result,
-  deploymentId,
+  onViewDiff,
 }: {
   result: Result;
-  deploymentId: string;
+  onViewDiff: (resultId: string) => void;
 }) {
   return (
     <TableRow className="hover:bg-muted/50">
@@ -107,7 +107,7 @@ function ResultsTableRow({
         <PlanStatusBadge status={result.status} />
       </TableCell>
       <TableCell>
-        <ChangesCell result={result} deploymentId={deploymentId} />
+        <ChangesCell result={result} onViewDiff={onViewDiff} />
       </TableCell>
     </TableRow>
   );
@@ -135,13 +135,15 @@ export default function DeploymentPlanDetail() {
   const { workspace } = useWorkspace();
   const { deployment } = useDeployment();
   const { planId } = useParams<{ planId: string }>();
+  const { resultId, openResult, closeResult } = usePlanResultParam();
 
   const resultsQuery = trpc.deployment.plans.results.useQuery(
     { deploymentId: deployment.id, planId: planId! },
     { enabled: !!planId, refetchInterval: 5000 },
   );
 
   const results = resultsQuery.data ?? [];
+  const activeResult = results.find((r) => r.resultId === resultId);
 
   return (
     <>
@@ -192,12 +194,22 @@ export default function DeploymentPlanDetail() {
               <ResultsTableRow
                 key={r.resultId}
                 result={r}
-                deploymentId={deployment.id}
+                onViewDiff={openResult}
               />
             ))}
           </TableBody>
         </Table>
       )}
+
+      <PlanDiffDialog
+        deploymentId={deployment.id}
+        resultId={resultId}
+        title={activeResult ? resultTitle(activeResult) : ""}
+        open={resultId != null}
+        onOpenChange={(o) => {
+          if (!o) closeResult();
+        }}
+      />
     </>
   );
 }