From 16476582e53d30f35b5b17c4c229aa173a98ff15 Mon Sep 17 00:00:00 2001
From: "claude[bot]" <41898282+claude[bot]@users.noreply.github.com>
Date: Tue, 14 Apr 2026 18:55:24 +0000
Subject: [PATCH] fix: allow updating status of deployment versions with no
 jobs

- Lift VersionStatusDialog state outside DropdownMenu in VersionDropdown
  so the status dialog doesn't unmount when the dropdown closes (Radix
  DismissableLayer was firing onOpenChange(false) on the DropdownMenu
  when the Dialog overlay appeared, unmounting the Dialog along with the
  DropdownMenuContent)
- Add VersionDropdown to NoActiveDeployments so versions with no active
  jobs also expose the "Update Status" action

Fixes #988

Co-authored-by: Aditya Choudhari <adityachoudhari26@users.noreply.github.com>
---
 .../_components/versioncard/VersionCard.tsx   |  1 +
 .../versioncard/VersionDropdown.tsx           | 62 +++++++++++--------
 2 files changed, 37 insertions(+), 26 deletions(-)

diff --git a/apps/web/app/routes/ws/deployments/_components/versioncard/VersionCard.tsx b/apps/web/app/routes/ws/deployments/_components/versioncard/VersionCard.tsx
index f81937661c..de11087b1c 100644
--- a/apps/web/app/routes/ws/deployments/_components/versioncard/VersionCard.tsx
+++ b/apps/web/app/routes/ws/deployments/_components/versioncard/VersionCard.tsx
@@ -132,6 +132,7 @@ const NoActiveDeployments: React.FC<NoActiveDeploymentsProps> = ({
           <span className="grow truncate overflow-ellipsis text-left">
             {displayName}
           </span>
+          <VersionDropdown version={version} />
         </div>
       </div>
     </div>
diff --git a/apps/web/app/routes/ws/deployments/_components/versioncard/VersionDropdown.tsx b/apps/web/app/routes/ws/deployments/_components/versioncard/VersionDropdown.tsx
index 75cf18516f..a4143f9894 100644
--- a/apps/web/app/routes/ws/deployments/_components/versioncard/VersionDropdown.tsx
+++ b/apps/web/app/routes/ws/deployments/_components/versioncard/VersionDropdown.tsx
@@ -13,7 +13,6 @@ import {
   DialogFooter,
   DialogHeader,
   DialogTitle,
-  DialogTrigger,
 } from "~/components/ui/dialog";
 import {
   DropdownMenu,
@@ -57,20 +56,19 @@ const useUpdateVersionStatus = (versionId: string) => {
 
 function VersionStatusDialog({
   version,
-  children,
-  onClose,
+  open,
+  onOpenChange,
 }: {
   version: Version;
-  children: React.ReactNode;
-  onClose: () => void;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
 }) {
   const { updateStatus, isPending } = useUpdateVersionStatus(version.id);
   const [status, setStatus] = useState<VersionStatus>(version.status);
-  const onClick = () => updateStatus(status).then(onClose);
+  const onClick = () => updateStatus(status).then(() => onOpenChange(false));
 
   return (
-    <Dialog>
-      <DialogTrigger asChild>{children}</DialogTrigger>
+    <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent>
         <DialogHeader>
           <DialogTitle>Update Version Status</DialogTitle>
@@ -108,30 +106,42 @@ function VersionStatusDialog({
 }
 
 export function VersionDropdown({ version }: { version: Version }) {
-  const [open, setOpen] = useState(false);
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+  const [statusDialogOpen, setStatusDialogOpen] = useState(false);
+
   return (
-    <DropdownMenu open={open} onOpenChange={setOpen}>
-      <DropdownMenuTrigger asChild>
-        <Button
-          variant="ghost"
-          size="icon"
-          className="h-7 w-7 shrink-0 text-muted-foreground"
-          onClick={(e) => e.stopPropagation()}
-        >
-          <EllipsisIcon className="size-3" />
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align="end" onClick={(e) => e.stopPropagation()}>
-        <VersionStatusDialog version={version} onClose={() => setOpen(false)}>
+    <>
+      <DropdownMenu open={dropdownOpen} onOpenChange={setDropdownOpen}>
+        <DropdownMenuTrigger asChild>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-7 w-7 shrink-0 text-muted-foreground"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <EllipsisIcon className="size-3" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end" onClick={(e) => e.stopPropagation()}>
           <DropdownMenuItem
-            onSelect={(e) => e.preventDefault()}
+            onSelect={(e) => {
+              e.preventDefault();
+              setDropdownOpen(false);
+              setStatusDialogOpen(true);
+            }}
             className="flex items-center gap-2"
           >
             <Flag className="h-4 w-4" />
             Update Status
           </DropdownMenuItem>
-        </VersionStatusDialog>
-      </DropdownMenuContent>
-    </DropdownMenu>
+        </DropdownMenuContent>
+      </DropdownMenu>
+
+      <VersionStatusDialog
+        version={version}
+        open={statusDialogOpen}
+        onOpenChange={setStatusDialogOpen}
+      />
+    </>
   );
 }