From adb0fd94437fad2ef1a7241205192855396d1bae Mon Sep 17 00:00:00 2001
From: Aditya Choudhari <adityachoudhari26@gmail.com>
Date: Sat, 3 May 2025 10:57:18 -0700
Subject: [PATCH 1/2] fix: readd dropdown menu to cells and add more options

---
 .../flow-diagram/ApprovalCheck.tsx            |  64 ----
 .../_components/flow-diagram/FlowNode.tsx     |  65 ----
 .../flow-diagram/FlowPolicyNode.tsx           | 189 ------------
 .../flow-diagram/checks/Approval.tsx          |  92 +-----
 .../release-table/EnvironmentApprovalRow.tsx  |   7 +-
 .../release-table/ResourceReleaseTable.tsx    |   1 +
 .../(sidebar)/DeploymentPageContent.tsx       |   1 +
 .../release-cell/ActiveJobsCell.tsx           |  92 ++++++
 .../release-cell/ApprovalRequiredCell.tsx     | 167 +++++++++++
 .../BlockedByVersionSelectorCell.tsx          | 121 ++++++++
 .../DeploymentVersionEnvironmentCell.tsx      | 280 ++----------------
 .../release-cell/policy-evaluation.ts         |   9 +
 .../deployments/TableDeployments.tsx          |   2 +-
 .../TableDeployments.tsx                      |   2 +-
 .../deployment-version/ApprovalDialog.tsx     | 130 ++++----
 .../DeploymentVersionDropdownMenu.tsx         |  44 +--
 .../DeploymentEnvironmentCell.tsx             |   7 +-
 17 files changed, 497 insertions(+), 776 deletions(-)
 delete mode 100644 apps/webservice/src/app/[workspaceSlug]/(app)/(deploy)/(raw)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/(raw)/releases/[releaseId]/checks/_components/flow-diagram/ApprovalCheck.tsx
 delete mode 100644 apps/webservice/src/app/[workspaceSlug]/(app)/(deploy)/(raw)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/(raw)/releases/[releaseId]/checks/_components/flow-diagram/FlowNode.tsx
 delete mode 100644 apps/webservice/src/app/[workspaceSlug]/(app)/(deploy)/(raw)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/(raw)/releases/[releaseId]/checks/_components/flow-diagram/FlowPolicyNode.tsx
 create mode 100644 apps/webservice/src/app/[workspaceSlug]/(app)/(deploy)/(raw)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/(sidebar)/_components/release-cell/ActiveJobsCell.tsx
 create mode 100644 apps/webservice/src/app/[workspaceSlug]/(app)/(deploy)/(raw)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/(sidebar)/_components/release-cell/ApprovalRequiredCell.tsx
 create mode 100644 apps/webservice/src/app/[workspaceSlug]/(app)/(deploy)/(raw)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/(sidebar)/_components/release-cell/BlockedByVersionSelectorCell.tsx
 create mode 100644 apps/webservice/src/app/[workspaceSlug]/(app)/(deploy)/(raw)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/(sidebar)/_components/release-cell/policy-evaluation.ts

diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/(deploy)/(raw)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/(raw)/releases/[releaseId]/checks/_components/flow-diagram/ApprovalCheck.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/(deploy)/(raw)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/(raw)/releases/[releaseId]/checks/_components/flow-diagram/ApprovalCheck.tsx
deleted file mode 100644
index d04675eb5..000000000
--- a/apps/webservice/src/app/[workspaceSlug]/(app)/(deploy)/(raw)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/(raw)/releases/[releaseId]/checks/_components/flow-diagram/ApprovalCheck.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import { Button } from "@ctrlplane/ui/button";
-
-import { ApprovalDialog } from "~/app/[workspaceSlug]/(app)/(deploy)/_components/deployment-version/ApprovalDialog";
-import { api } from "~/trpc/react";
-import { Cancelled, Failing, Loading, Passing, Waiting } from "./StatusIcons";
-
-export const ApprovalCheck: React.FC<{
-  policyId: string;
-  deploymentVersion: { id: string; tag: string; deploymentId: string };
-}> = ({ policyId, deploymentVersion }) => {
-  const approvalStatus =
-    api.environment.policy.approval.statusByVersionPolicyId.useQuery({
-      policyId,
-      versionId: deploymentVersion.id,
-    });
-
-  if (approvalStatus.isLoading)
-    return (
-      <div className="flex items-center gap-2">
-        <Loading /> Loading approval status
-      </div>
-    );
-
-  if (approvalStatus.data == null)
-    return (
-      <div className="flex items-center gap-2">
-        <Cancelled /> Approval skipped
-      </div>
-    );
-
-  const status = approvalStatus.data.status;
-  return (
-    <div className="flex w-full items-center justify-between gap-2">
-      <div className="flex items-center gap-2">
-        {status === "approved" && (
-          <>
-            <Passing /> Approved
-          </>
-        )}
-        {status === "rejected" && (
-          <>
-            <Failing /> Rejected
-          </>
-        )}
-        {status === "pending" && (
-          <>
-            <Waiting /> Pending approval
-          </>
-        )}
-      </div>
-
-      {status === "pending" && (
-        <ApprovalDialog
-          policyId={policyId}
-          deploymentVersion={deploymentVersion}
-        >
-          <Button size="sm" className="h-6 px-2 py-1">
-            Review
-          </Button>
-        </ApprovalDialog>
-      )}
-    </div>
-  );
-};
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/(deploy)/(raw)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/(raw)/releases/[releaseId]/checks/_components/flow-diagram/FlowNode.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/(deploy)/(raw)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/(raw)/releases/[releaseId]/checks/_components/flow-diagram/FlowNode.tsx
deleted file mode 100644
index ac262263f..000000000
--- a/apps/webservice/src/app/[workspaceSlug]/(app)/(deploy)/(raw)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/(raw)/releases/[releaseId]/checks/_components/flow-diagram/FlowNode.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import type * as SCHEMA from "@ctrlplane/db/schema";
-import type { NodeProps } from "reactflow";
-import React from "react";
-import { Handle, Position } from "reactflow";
-import colors from "tailwindcss/colors";
-
-import { cn } from "@ctrlplane/ui";
-import { Badge } from "@ctrlplane/ui/badge";
-import { JobStatus } from "@ctrlplane/validators/jobs";
-
-import { api } from "~/trpc/react";
-
-type EnvironmentNodeProps = NodeProps<
-  SCHEMA.Environment & {
-    label: string;
-    deploymentVersion: SCHEMA.DeploymentVersion;
-  }
->;
-
-export const EnvironmentNode: React.FC<EnvironmentNodeProps> = (node) => {
-  const { data } = node;
-  const releaseJobTriggers = api.job.config.byDeploymentVersionId.useQuery(
-    { versionId: data.deploymentVersion.id },
-    { refetchInterval: 10_000 },
-  );
-  const environmentJobs = releaseJobTriggers.data?.filter(
-    (job) => job.environmentId === data.id,
-  );
-  const successful = environmentJobs?.filter(
-    (job) => job.job.status === JobStatus.Successful,
-  );
-  return (
-    <>
-      <div
-        className={cn(
-          "flex w-[250px] items-center justify-between gap-2 rounded-md border bg-neutral-900 px-2.5 py-1",
-        )}
-      >
-        {data.label}
-
-        {releaseJobTriggers.data != null && (
-          <Badge
-            variant="outline"
-            className="rounded-md text-xs text-muted-foreground"
-          >
-            {successful?.length} / {environmentJobs?.length}
-          </Badge>
-        )}
-      </div>
-
-      <Handle
-        type="target"
-        className="h-2 w-2 rounded-full border border-neutral-500"
-        style={{ background: colors.neutral[800] }}
-        position={Position.Left}
-      />
-      <Handle
-        type="source"
-        className="h-2 w-2 rounded-full border border-neutral-500"
-        style={{ background: colors.neutral[800] }}
-        position={Position.Right}
-      />
-    </>
-  );
-};
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/(deploy)/(raw)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/(raw)/releases/[releaseId]/checks/_components/flow-diagram/FlowPolicyNode.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/(deploy)/(raw)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/(raw)/releases/[releaseId]/checks/_components/flow-diagram/FlowPolicyNode.tsx
deleted file mode 100644
index 22957ff6e..000000000
--- a/apps/webservice/src/app/[workspaceSlug]/(app)/(deploy)/(raw)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/(raw)/releases/[releaseId]/checks/_components/flow-diagram/FlowPolicyNode.tsx
+++ /dev/null
@@ -1,189 +0,0 @@
-import type * as SCHEMA from "@ctrlplane/db/schema";
-import type { NodeProps } from "reactflow";
-import { useEffect, useState } from "react";
-import { differenceInMilliseconds } from "date-fns";
-import prettyMilliseconds from "pretty-ms";
-import { Handle, Position } from "reactflow";
-import colors from "tailwindcss/colors";
-
-import { cn } from "@ctrlplane/ui";
-import { JobStatus } from "@ctrlplane/validators/jobs";
-
-import { api } from "~/trpc/react";
-import { ApprovalCheck } from "./ApprovalCheck";
-import { Cancelled, Loading, Passing, Waiting } from "./StatusIcons";
-
-type PolicyNodeProps = NodeProps<
-  SCHEMA.EnvironmentPolicy & {
-    deploymentVersion: SCHEMA.DeploymentVersion;
-    policyDeployments: Array<SCHEMA.EnvironmentPolicyDeployment>;
-  }
->;
-
-const MinSuccessCheck: React.FC<PolicyNodeProps["data"]> = ({
-  successMinimum,
-  successType,
-  deploymentVersion,
-  policyDeployments,
-}) => {
-  const allJobs = api.job.config.byDeploymentVersionId.useQuery(
-    { versionId: deploymentVersion.id },
-    { refetchInterval: 10_000 },
-  );
-  const envIds = policyDeployments.map((p) => p.environmentId);
-  const jobs = allJobs.data?.filter((j) => envIds.includes(j.environmentId));
-
-  if (successType === "optional") return null;
-
-  if (successType === "some") {
-    const passing =
-      jobs?.filter((job) => job.job.status === JobStatus.Successful).length ??
-      0;
-
-    const isMinSatified = passing >= successMinimum;
-    return (
-      <div className="flex items-center gap-2">
-        {isMinSatified ? <Passing /> : <Waiting />} &ge; {successMinimum}{" "}
-        completed sucessfully
-      </div>
-    );
-  }
-
-  const areAllSuccessful =
-    jobs?.every((job) => job.job.status === JobStatus.Successful) ?? true;
-
-  return (
-    <div className="flex items-center gap-2">
-      {areAllSuccessful ? (
-        <>
-          <Passing /> All jobs successful
-        </>
-      ) : (
-        <>
-          <Waiting /> Waiting for all jobs to complete
-        </>
-      )}
-    </div>
-  );
-};
-
-const GradualRolloutCheck: React.FC<PolicyNodeProps["data"]> = (data) => {
-  const [timeLeft, setTimeLeft] = useState<number | null>(null);
-
-  const { data: approvalStatus, isLoading } =
-    api.environment.policy.approval.statusByVersionPolicyId.useQuery(
-      { policyId: data.id, versionId: data.deploymentVersion.id },
-      { enabled: data.approvalRequirement === "manual" },
-    );
-
-  const startDate =
-    data.approvalRequirement === "manual"
-      ? (approvalStatus?.approvedAt ?? data.deploymentVersion.createdAt)
-      : data.deploymentVersion.createdAt;
-
-  useEffect(() => {
-    const calculateTimeLeft = () => {
-      const timePassed = differenceInMilliseconds(new Date(), startDate);
-      return Math.max(0, data.rolloutDuration - timePassed);
-    };
-
-    setTimeLeft(calculateTimeLeft());
-
-    const interval = setInterval(() => {
-      const remaining = calculateTimeLeft();
-      setTimeLeft(remaining);
-
-      if (remaining <= 0) clearInterval(interval);
-    }, 1000);
-
-    return () => clearInterval(interval);
-  }, [startDate, data.rolloutDuration]);
-
-  if (timeLeft == null) return null;
-
-  if (isLoading)
-    return (
-      <div className="flex items-center gap-2">
-        <Loading /> Loading rollout status
-      </div>
-    );
-
-  const isApprovalPending =
-    approvalStatus == null || approvalStatus.status === "pending";
-
-  if (data.approvalRequirement === "manual" && isApprovalPending)
-    return (
-      <div className="flex items-center gap-2">
-        <Waiting /> Rollout pending approval
-      </div>
-    );
-
-  if (
-    data.approvalRequirement === "manual" &&
-    approvalStatus?.status === "rejected"
-  )
-    return (
-      <div className="flex items-center gap-2">
-        <Cancelled /> Rollout skipped due to approval rejection
-      </div>
-    );
-
-  return (
-    <div className="flex items-center gap-2">
-      {timeLeft <= 0 ? <Passing /> : <Waiting />}{" "}
-      {timeLeft <= 0 ? (
-        "Rollout completed"
-      ) : (
-        <>
-          Rollout completes in{" "}
-          {prettyMilliseconds(timeLeft, {
-            compact: true,
-            keepDecimalsOnWholeSeconds: false,
-          })}
-        </>
-      )}
-    </div>
-  );
-};
-
-export const PolicyNode: React.FC<PolicyNodeProps> = ({ data }) => {
-  const noMinSuccess = data.successType === "optional";
-  const noRollout = data.rolloutDuration === 0;
-  const noApproval = data.approvalRequirement === "automatic";
-
-  return (
-    <>
-      <div
-        className={cn(
-          "relative w-[250px] space-y-1 rounded-md border px-2 py-1.5 text-sm",
-        )}
-      >
-        {!noMinSuccess && <MinSuccessCheck {...data} />}
-        {!noRollout && <GradualRolloutCheck {...data} />}
-        {!noApproval && (
-          <ApprovalCheck
-            policyId={data.id}
-            deploymentVersion={data.deploymentVersion}
-          />
-        )}
-
-        {noMinSuccess && noRollout && noApproval && (
-          <div className="text-muted-foreground">No policy checks.</div>
-        )}
-      </div>
-
-      <Handle
-        type="target"
-        className="h-2 w-2 rounded-full border border-neutral-500"
-        style={{ background: colors.neutral[800] }}
-        position={Position.Left}
-      />
-      <Handle
-        type="source"
-        className="h-2 w-2 rounded-full border border-neutral-500"
-        style={{ background: colors.neutral[800] }}
-        position={Position.Right}
-      />
-    </>
-  );
-};
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/(deploy)/(raw)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/(raw)/releases/[releaseId]/checks/_components/flow-diagram/checks/Approval.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/(deploy)/(raw)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/(raw)/releases/[releaseId]/checks/_components/flow-diagram/checks/Approval.tsx
index 67c13e27e..edb1dad8e 100644
--- a/apps/webservice/src/app/[workspaceSlug]/(app)/(deploy)/(raw)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/(raw)/releases/[releaseId]/checks/_components/flow-diagram/checks/Approval.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/(app)/(deploy)/(raw)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/(raw)/releases/[releaseId]/checks/_components/flow-diagram/checks/Approval.tsx
@@ -1,16 +1,4 @@
-import { useState } from "react";
-
-import * as SCHEMA from "@ctrlplane/db/schema";
 import { Button } from "@ctrlplane/ui/button";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTrigger,
-} from "@ctrlplane/ui/dialog";
-import { Textarea } from "@ctrlplane/ui/textarea";
 import {
   Tooltip,
   TooltipContent,
@@ -18,76 +6,10 @@ import {
   TooltipTrigger,
 } from "@ctrlplane/ui/tooltip";
 
+import { ApprovalDialog } from "~/app/[workspaceSlug]/(app)/(deploy)/_components/deployment-version/ApprovalDialog";
 import { api } from "~/trpc/react";
 import { Loading, Passing, Waiting } from "../StatusIcons";
 
-const ApprovalDialog: React.FC<{
-  versionId: string;
-  versionTag: string;
-  environmentId: string;
-  onSubmit: () => void;
-}> = ({ versionId, versionTag, environmentId, onSubmit }) => {
-  const [open, setOpen] = useState(false);
-  const addRecord =
-    api.deployment.version.checks.approval.addRecord.useMutation();
-
-  const [reason, setReason] = useState("");
-
-  const handleSubmit = (status: SCHEMA.ApprovalStatus) =>
-    addRecord
-      .mutateAsync({
-        deploymentVersionId: versionId,
-        environmentId,
-        status,
-        reason,
-      })
-      .then(() => setOpen(false))
-      .then(() => onSubmit());
-
-  return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>
-        <Button size="sm" className="h-6">
-          Approve
-        </Button>
-      </DialogTrigger>
-      <DialogContent>
-        <DialogHeader>Approve Release</DialogHeader>
-        <DialogDescription>
-          Are you sure you want to approve version {versionTag}?
-        </DialogDescription>
-
-        <Textarea
-          value={reason}
-          onChange={(e) => setReason(e.target.value)}
-          placeholder="Reason for approval (optional)"
-        />
-
-        <DialogFooter className="flex w-full flex-row items-center justify-between sm:justify-between">
-          <Button variant="outline" onClick={() => setOpen(false)}>
-            Cancel
-          </Button>
-          <div className="flex gap-2">
-            <Button
-              variant="outline"
-              onClick={() => handleSubmit(SCHEMA.ApprovalStatus.Rejected)}
-              disabled={addRecord.isPending}
-            >
-              Reject
-            </Button>
-            <Button
-              onClick={() => handleSubmit(SCHEMA.ApprovalStatus.Approved)}
-              disabled={addRecord.isPending}
-            >
-              Approve
-            </Button>
-          </div>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-};
-
 export const ApprovalCheck: React.FC<{
   workspaceId: string;
   environmentId: string;
@@ -128,7 +50,11 @@ export const ApprovalCheck: React.FC<{
               <div className="flex items-center gap-2">
                 <Waiting /> Not enough approvals
               </div>
-              <ApprovalDialog {...props} onSubmit={invalidate} />
+              <ApprovalDialog {...props} onSubmit={invalidate}>
+                <Button size="sm" className="h-6">
+                  Approve
+                </Button>
+              </ApprovalDialog>
             </div>
           </TooltipTrigger>
           <TooltipContent>
@@ -149,7 +75,11 @@ export const ApprovalCheck: React.FC<{
       <div className="flex items-center gap-2">
         <Waiting /> Not enough approvals
       </div>
-      <ApprovalDialog {...props} onSubmit={invalidate} />
+      <ApprovalDialog {...props} onSubmit={invalidate}>
+        <Button size="sm" className="h-6">
+          Approve
+        </Button>
+      </ApprovalDialog>
     </div>
   );
 };
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/(deploy)/(raw)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/(raw)/releases/[releaseId]/jobs/release-table/EnvironmentApprovalRow.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/(deploy)/(raw)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/(raw)/releases/[releaseId]/jobs/release-table/EnvironmentApprovalRow.tsx
index 26de8933e..63ea39f96 100644
--- a/apps/webservice/src/app/[workspaceSlug]/(app)/(deploy)/(raw)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/(raw)/releases/[releaseId]/jobs/release-table/EnvironmentApprovalRow.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/(app)/(deploy)/(raw)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/(raw)/releases/[releaseId]/jobs/release-table/EnvironmentApprovalRow.tsx
@@ -9,17 +9,20 @@ import { ApprovalDialog } from "~/app/[workspaceSlug]/(app)/(deploy)/_components
 type EnvironmentApprovalRowProps = {
   approval: EnvironmentPolicyApproval & { user?: User | null };
   deploymentVersion: { id: string; tag: string; deploymentId: string };
+  environmentId: string;
 };
 
 export const EnvironmentApprovalRow: React.FC<EnvironmentApprovalRowProps> = ({
   approval,
   deploymentVersion,
+  environmentId,
 }) => {
   if (approval.status === "pending")
     return (
       <ApprovalDialog
-        deploymentVersion={deploymentVersion}
-        policyId={approval.policyId}
+        versionId={deploymentVersion.id}
+        versionTag={deploymentVersion.tag}
+        environmentId={environmentId}
       >
         <Button size="sm" className="h-6">
           Review
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/(deploy)/(raw)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/(raw)/releases/[releaseId]/jobs/release-table/ResourceReleaseTable.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/(deploy)/(raw)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/(raw)/releases/[releaseId]/jobs/release-table/ResourceReleaseTable.tsx
index 57d22be5d..8b02c29da 100644
--- a/apps/webservice/src/app/[workspaceSlug]/(app)/(deploy)/(raw)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/(raw)/releases/[releaseId]/jobs/release-table/ResourceReleaseTable.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/(app)/(deploy)/(raw)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/(raw)/releases/[releaseId]/jobs/release-table/ResourceReleaseTable.tsx
@@ -195,6 +195,7 @@ const CollapsibleTableRow: React.FC<CollapsibleTableRowProps> = ({
                   key={approval.id}
                   approval={approval}
                   deploymentVersion={deploymentVersion}
+                  environmentId={environment.id}
                 />
               ))}
 
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/(deploy)/(raw)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/(sidebar)/DeploymentPageContent.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/(deploy)/(raw)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/(sidebar)/DeploymentPageContent.tsx
index 5a48b3695..4a5f05161 100644
--- a/apps/webservice/src/app/[workspaceSlug]/(app)/(deploy)/(raw)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/(sidebar)/DeploymentPageContent.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/(app)/(deploy)/(raw)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/(sidebar)/DeploymentPageContent.tsx
@@ -357,6 +357,7 @@ export const DeploymentPageContent: React.FC<DeploymentPageContentProps> = ({
                           environment={env}
                           deployment={deployment}
                           deploymentVersion={version}
+                          system={{ slug: systemSlug }}
                         />
                       </TableCell>
                     ))}
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/(deploy)/(raw)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/(sidebar)/_components/release-cell/ActiveJobsCell.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/(deploy)/(raw)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/(sidebar)/_components/release-cell/ActiveJobsCell.tsx
new file mode 100644
index 000000000..400891729
--- /dev/null
+++ b/apps/webservice/src/app/[workspaceSlug]/(app)/(deploy)/(raw)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/(sidebar)/_components/release-cell/ActiveJobsCell.tsx
@@ -0,0 +1,92 @@
+import type * as SCHEMA from "@ctrlplane/db/schema";
+import Link from "next/link";
+import { useParams } from "next/navigation";
+import {
+  IconAlertTriangle,
+  IconDotsVertical,
+  IconReload,
+} from "@tabler/icons-react";
+import { format } from "date-fns";
+
+import { Button } from "@ctrlplane/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from "@ctrlplane/ui/dropdown-menu";
+import { JobStatus } from "@ctrlplane/validators/jobs";
+
+import {
+  DropdownAction,
+  ForceDeployVersionDialog,
+  RedeployVersionDialog,
+} from "~/app/[workspaceSlug]/(app)/(deploy)/_components/deployment-version/DeploymentVersionDropdownMenu";
+import { StatusIcon } from "~/app/[workspaceSlug]/(app)/(deploy)/_components/deployments/environment-cell/StatusIcon";
+import { urls } from "~/app/urls";
+
+export const ActiveJobsCell: React.FC<{
+  statuses: SCHEMA.JobStatus[];
+  deploymentVersion: { id: string; tag: string; createdAt: Date };
+  deployment: { id: string; name: string; slug: string };
+  environment: { id: string; name: string };
+  system: { slug: string };
+}> = ({ statuses, deploymentVersion, deployment, environment, system }) => {
+  const { workspaceSlug } = useParams<{ workspaceSlug: string }>();
+
+  const versionUrl = urls
+    .workspace(workspaceSlug)
+    .system(system.slug)
+    .deployment(deployment.slug)
+    .release(deploymentVersion.id)
+    .jobs();
+
+  const hasActiveJobs = statuses.some((s) => s === JobStatus.InProgress);
+
+  return (
+    <div className="flex h-full w-full items-center justify-between p-1">
+      <Link
+        href={versionUrl}
+        className="flex w-full items-center gap-2 rounded-md p-2"
+      >
+        <StatusIcon statuses={statuses} />
+        <div className="flex flex-col">
+          <div className="max-w-36 truncate font-semibold">
+            {deploymentVersion.tag}
+          </div>
+          <div className="text-xs text-muted-foreground">
+            {format(deploymentVersion.createdAt, "MMM d, hh:mm aa")}
+          </div>
+        </div>
+      </Link>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-7 w-7 shrink-0 text-muted-foreground"
+          >
+            <IconDotsVertical className="h-4 w-4" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent>
+          {!hasActiveJobs && (
+            <DropdownAction
+              deployment={deployment}
+              environment={environment}
+              icon={<IconReload className="h-4 w-4" />}
+              label="Redeploy"
+              Dialog={RedeployVersionDialog}
+            />
+          )}
+          <DropdownAction
+            deployment={deployment}
+            environment={environment}
+            icon={<IconAlertTriangle className="h-4 w-4" />}
+            label="Force deploy"
+            Dialog={ForceDeployVersionDialog}
+          />
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+};
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/(deploy)/(raw)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/(sidebar)/_components/release-cell/ApprovalRequiredCell.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/(deploy)/(raw)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/(sidebar)/_components/release-cell/ApprovalRequiredCell.tsx
new file mode 100644
index 000000000..0388d8da3
--- /dev/null
+++ b/apps/webservice/src/app/[workspaceSlug]/(app)/(deploy)/(raw)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/(sidebar)/_components/release-cell/ApprovalRequiredCell.tsx
@@ -0,0 +1,167 @@
+import Link from "next/link";
+import { useParams } from "next/navigation";
+import {
+  IconAlertTriangle,
+  IconDotsVertical,
+  IconShield,
+} from "@tabler/icons-react";
+import _ from "lodash";
+import { isPresent } from "ts-is-present";
+
+import { Button } from "@ctrlplane/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@ctrlplane/ui/dropdown-menu";
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from "@ctrlplane/ui/hover-card";
+
+import type { PolicyEvaluationResult } from "./policy-evaluation";
+import { ApprovalDialog } from "~/app/[workspaceSlug]/(app)/(deploy)/_components/deployment-version/ApprovalDialog";
+import {
+  DropdownAction,
+  ForceDeployVersionDialog,
+} from "~/app/[workspaceSlug]/(app)/(deploy)/_components/deployment-version/DeploymentVersionDropdownMenu";
+import { urls } from "~/app/urls";
+
+export const getPoliciesWithApprovalRequired = (
+  policyEvaluations: PolicyEvaluationResult,
+) => {
+  const policiesWithAnyApprovalRequired = Object.entries(
+    policyEvaluations.rules.anyApprovals,
+  )
+    .filter(([_, reasons]) => reasons.length > 0)
+    .map(([policyId]) =>
+      policyEvaluations.policies.find((p) => p.id === policyId),
+    )
+    .filter(isPresent);
+
+  const policiesWithRoleApprovalRequired = Object.entries(
+    policyEvaluations.rules.roleApprovals,
+  )
+    .filter(([_, reasons]) => reasons.length > 0)
+    .map(([policyId]) =>
+      policyEvaluations.policies.find((p) => p.id === policyId),
+    )
+    .filter(isPresent);
+
+  const policiesWithUserApprovalRequired = Object.entries(
+    policyEvaluations.rules.userApprovals,
+  )
+    .filter(([_, reasons]) => reasons.length > 0)
+    .map(([policyId]) =>
+      policyEvaluations.policies.find((p) => p.id === policyId),
+    )
+    .filter(isPresent);
+
+  return _.uniqBy(
+    [
+      ...policiesWithAnyApprovalRequired,
+      ...policiesWithRoleApprovalRequired,
+      ...policiesWithUserApprovalRequired,
+    ],
+    (p) => p.id,
+  );
+};
+
+export const ApprovalRequiredCell: React.FC<{
+  policies: { id: string; name: string }[];
+  deploymentVersion: { id: string; tag: string };
+  deployment: { id: string; name: string; slug: string };
+  environment: { id: string; name: string };
+  system: { slug: string };
+}> = ({ policies, deploymentVersion, deployment, environment, system }) => {
+  const { workspaceSlug } = useParams<{ workspaceSlug: string }>();
+
+  const versionUrl = urls
+    .workspace(workspaceSlug)
+    .system(system.slug)
+    .deployment(deployment.slug)
+    .release(deploymentVersion.id)
+    .jobs();
+  return (
+    <>
+      <HoverCard>
+        <HoverCardTrigger asChild>
+          <div className="flex h-full w-full items-center justify-center p-1">
+            <Link
+              href={versionUrl}
+              className="flex w-full items-center gap-2 rounded-md p-2"
+            >
+              <div className="rounded-full bg-yellow-400 p-1 dark:text-black">
+                <IconShield className="h-4 w-4" strokeWidth={2} />
+              </div>
+              <div className="flex flex-col">
+                <div className="max-w-36 truncate font-semibold">
+                  {deploymentVersion.tag}
+                </div>
+                <div className="text-xs text-muted-foreground">
+                  Approval required
+                </div>
+              </div>
+            </Link>
+          </div>
+        </HoverCardTrigger>
+        <HoverCardContent className="w-80">
+          <div className="flex flex-col gap-2 text-sm">
+            <div className="flex items-center gap-2 text-sm font-semibold">
+              <IconShield className="h-3 w-3" strokeWidth={2} />
+              Policies missing approval
+            </div>
+            {policies.map((p) => (
+              <Link
+                href={urls
+                  .workspace(workspaceSlug)
+                  .policies()
+                  .edit(p.id)
+                  .qualitySecurity()}
+                key={p.id}
+                className="max-w-72 truncate underline-offset-1 hover:underline"
+              >
+                {p.name}
+              </Link>
+            ))}
+          </div>
+        </HoverCardContent>
+      </HoverCard>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-7 w-7 shrink-0 text-muted-foreground"
+          >
+            <IconDotsVertical className="h-4 w-4" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <ApprovalDialog
+            versionId={deploymentVersion.id}
+            versionTag={deploymentVersion.tag}
+            environmentId={environment.id}
+          >
+            <DropdownMenuItem
+              onSelect={(e) => e.preventDefault()}
+              className="space-x-2"
+            >
+              <IconShield className="h-4 w-4" />
+              <span>Approve</span>
+            </DropdownMenuItem>
+          </ApprovalDialog>
+          <DropdownAction
+            deployment={deployment}
+            environment={environment}
+            icon={<IconAlertTriangle className="h-4 w-4" />}
+            label="Force deploy"
+            Dialog={ForceDeployVersionDialog}
+          />
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </>
+  );
+};
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/(deploy)/(raw)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/(sidebar)/_components/release-cell/BlockedByVersionSelectorCell.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/(deploy)/(raw)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/(sidebar)/_components/release-cell/BlockedByVersionSelectorCell.tsx
new file mode 100644
index 000000000..2f9ab8cae
--- /dev/null
+++ b/apps/webservice/src/app/[workspaceSlug]/(app)/(deploy)/(raw)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/(sidebar)/_components/release-cell/BlockedByVersionSelectorCell.tsx
@@ -0,0 +1,121 @@
+import Link from "next/link";
+import { useParams } from "next/navigation";
+import {
+  IconAlertTriangle,
+  IconDotsVertical,
+  IconFilterX,
+} from "@tabler/icons-react";
+import { isPresent } from "ts-is-present";
+
+import { Button } from "@ctrlplane/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from "@ctrlplane/ui/dropdown-menu";
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from "@ctrlplane/ui/hover-card";
+
+import type { PolicyEvaluationResult } from "./policy-evaluation";
+import {
+  DropdownAction,
+  ForceDeployVersionDialog,
+} from "~/app/[workspaceSlug]/(app)/(deploy)/_components/deployment-version/DeploymentVersionDropdownMenu";
+import { urls } from "~/app/urls";
+
+export const getPoliciesBlockingByVersionSelector = (
+  policyEvaluations: PolicyEvaluationResult,
+) =>
+  Object.entries(policyEvaluations.rules.versionSelector)
+    .filter(([_, isPassing]) => !isPassing)
+    .map(([policyId]) =>
+      policyEvaluations.policies.find((p) => p.id === policyId),
+    )
+    .filter(isPresent);
+
+export const BlockedByVersionSelectorCell: React.FC<{
+  policies: { id: string; name: string }[];
+  deploymentVersion: { id: string; tag: string };
+  deployment: { id: string; name: string; slug: string };
+  environment: { id: string; name: string };
+  system: { slug: string };
+}> = ({ policies, deploymentVersion, deployment, environment, system }) => {
+  const { workspaceSlug } = useParams<{ workspaceSlug: string }>();
+
+  const versionUrl = urls
+    .workspace(workspaceSlug)
+    .system(system.slug)
+    .deployment(deployment.slug)
+    .release(deploymentVersion.id)
+    .checks();
+  return (
+    <>
+      <HoverCard>
+        <HoverCardTrigger asChild>
+          <div className="flex h-full w-full items-center justify-center p-1">
+            <Link
+              href={versionUrl}
+              className="flex w-full items-center gap-2 rounded-md p-2"
+            >
+              <div className="rounded-full bg-neutral-400 p-1 dark:text-black">
+                <IconFilterX className="h-4 w-4" strokeWidth={2} />
+              </div>
+              <div className="flex flex-col">
+                <div className="max-w-36 truncate font-semibold">
+                  {deploymentVersion.tag}
+                </div>
+                <div className="text-xs text-muted-foreground">
+                  Blocked by version selector
+                </div>
+              </div>
+            </Link>
+          </div>
+        </HoverCardTrigger>
+        <HoverCardContent className="w-80">
+          <div className="flex flex-col gap-2 text-sm">
+            <div className="flex items-center gap-2 text-sm font-semibold">
+              <IconFilterX className="h-3 w-3" strokeWidth={2} />
+              Policies blocking version
+            </div>
+            {policies.map((p) => (
+              <Link
+                href={urls
+                  .workspace(workspaceSlug)
+                  .policies()
+                  .edit(p.id)
+                  .deploymentFlow()}
+                key={p.id}
+                className="max-w-72 truncate underline-offset-1 hover:underline"
+              >
+                {p.name}
+              </Link>
+            ))}
+          </div>
+        </HoverCardContent>
+      </HoverCard>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-7 w-7 shrink-0 text-muted-foreground"
+          >
+            <IconDotsVertical className="h-4 w-4" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownAction
+            deployment={deployment}
+            environment={environment}
+            icon={<IconAlertTriangle className="h-4 w-4" />}
+            label="Force deploy"
+            Dialog={ForceDeployVersionDialog}
+          />
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </>
+  );
+};
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/(deploy)/(raw)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/(sidebar)/_components/release-cell/DeploymentVersionEnvironmentCell.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/(deploy)/(raw)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/(sidebar)/_components/release-cell/DeploymentVersionEnvironmentCell.tsx
index 9f38c6084..292c2fdf7 100644
--- a/apps/webservice/src/app/[workspaceSlug]/(app)/(deploy)/(raw)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/(sidebar)/_components/release-cell/DeploymentVersionEnvironmentCell.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/(app)/(deploy)/(raw)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/(sidebar)/_components/release-cell/DeploymentVersionEnvironmentCell.tsx
@@ -4,27 +4,22 @@ import type * as SCHEMA from "@ctrlplane/db/schema";
 import React from "react";
 import Link from "next/link";
 import { useParams } from "next/navigation";
-import {
-  IconBoltOff,
-  IconCubeOff,
-  IconFilterX,
-  IconShield,
-} from "@tabler/icons-react";
-import { format } from "date-fns";
-import _ from "lodash";
+import { IconBoltOff, IconCubeOff } from "@tabler/icons-react";
 import { useInView } from "react-intersection-observer";
-import { isPresent } from "ts-is-present";
 
-import {
-  HoverCard,
-  HoverCardContent,
-  HoverCardTrigger,
-} from "@ctrlplane/ui/hover-card";
 import { Skeleton } from "@ctrlplane/ui/skeleton";
 
-import { StatusIcon } from "~/app/[workspaceSlug]/(app)/(deploy)/_components/deployments/environment-cell/StatusIcon";
 import { urls } from "~/app/urls";
 import { api } from "~/trpc/react";
+import { ActiveJobsCell } from "./ActiveJobsCell";
+import {
+  ApprovalRequiredCell,
+  getPoliciesWithApprovalRequired,
+} from "./ApprovalRequiredCell";
+import {
+  BlockedByVersionSelectorCell,
+  getPoliciesBlockingByVersionSelector,
+} from "./BlockedByVersionSelectorCell";
 
 const SkeletonCell: React.FC = () => (
   <div className="flex h-full w-full items-center gap-2">
@@ -36,43 +31,6 @@ const SkeletonCell: React.FC = () => (
   </div>
 );
 
-const ActiveJobsCell: React.FC<{
-  statuses: SCHEMA.JobStatus[];
-  deploymentVersion: { id: string; tag: string; createdAt: Date };
-}> = ({ statuses, deploymentVersion }) => {
-  const { workspaceSlug, systemSlug, deploymentSlug } = useParams<{
-    workspaceSlug: string;
-    systemSlug: string;
-    deploymentSlug: string;
-  }>();
-
-  const versionUrl = urls
-    .workspace(workspaceSlug)
-    .system(systemSlug)
-    .deployment(deploymentSlug)
-    .release(deploymentVersion.id)
-    .jobs();
-
-  return (
-    <div className="flex h-full w-full items-center justify-center p-1">
-      <Link
-        href={versionUrl}
-        className="flex w-full items-center gap-2 rounded-md p-2 hover:bg-accent"
-      >
-        <StatusIcon statuses={statuses} />
-        <div className="flex flex-col">
-          <div className="max-w-36 truncate font-semibold">
-            {deploymentVersion.tag}
-          </div>
-          <div className="text-xs text-muted-foreground">
-            {format(deploymentVersion.createdAt, "MMM d, hh:mm aa")}
-          </div>
-        </div>
-      </Link>
-    </div>
-  );
-};
-
 const NoReleaseTargetsCell: React.FC<{
   tag: string;
 }> = ({ tag }) => (
@@ -91,17 +49,15 @@ const NoReleaseTargetsCell: React.FC<{
 
 const NoJobAgentCell: React.FC<{
   tag: string;
-}> = ({ tag }) => {
-  const { workspaceSlug, systemSlug, deploymentSlug } = useParams<{
-    workspaceSlug: string;
-    systemSlug: string;
-    deploymentSlug: string;
-  }>();
+  system: { slug: string };
+  deployment: { slug: string };
+}> = ({ tag, system, deployment }) => {
+  const { workspaceSlug } = useParams<{ workspaceSlug: string }>();
 
   const workflowConfigUrl = urls
     .workspace(workspaceSlug)
-    .system(systemSlug)
-    .deployment(deploymentSlug)
+    .system(system.slug)
+    .deployment(deployment.slug)
     .workflow();
 
   return (
@@ -122,193 +78,8 @@ const NoJobAgentCell: React.FC<{
   );
 };
 
-type PolicyEvaluationResult = {
-  policies: { id: string; name: string }[];
-  rules: {
-    anyApprovals: Record<string, string[]>;
-    roleApprovals: Record<string, string[]>;
-    userApprovals: Record<string, string[]>;
-    versionSelector: Record<string, boolean>;
-  };
-};
-
-const getPoliciesBlockingByVersionSelector = (
-  policyEvaluations: PolicyEvaluationResult,
-) =>
-  Object.entries(policyEvaluations.rules.versionSelector)
-    .filter(([_, isPassing]) => !isPassing)
-    .map(([policyId]) =>
-      policyEvaluations.policies.find((p) => p.id === policyId),
-    )
-    .filter(isPresent);
-
-const BlockedByVersionSelectorCell: React.FC<{
-  policies: { id: string; name: string }[];
-  deploymentVersion: { id: string; tag: string };
-}> = ({ policies, deploymentVersion }) => {
-  const { workspaceSlug, systemSlug, deploymentSlug } = useParams<{
-    workspaceSlug: string;
-    systemSlug: string;
-    deploymentSlug: string;
-  }>();
-
-  const versionUrl = urls
-    .workspace(workspaceSlug)
-    .system(systemSlug)
-    .deployment(deploymentSlug)
-    .release(deploymentVersion.id)
-    .checks();
-  return (
-    <HoverCard>
-      <HoverCardTrigger asChild>
-        <div className="flex h-full w-full items-center justify-center p-1">
-          <Link
-            href={versionUrl}
-            className="flex w-full items-center gap-2 rounded-md p-2 hover:bg-accent"
-          >
-            <div className="rounded-full bg-neutral-400 p-1 dark:text-black">
-              <IconFilterX className="h-4 w-4" strokeWidth={2} />
-            </div>
-            <div className="flex flex-col">
-              <div className="max-w-36 truncate font-semibold">
-                {deploymentVersion.tag}
-              </div>
-              <div className="text-xs text-muted-foreground">
-                Blocked by version selector
-              </div>
-            </div>
-          </Link>
-        </div>
-      </HoverCardTrigger>
-      <HoverCardContent className="w-80">
-        <div className="flex flex-col gap-2 text-sm">
-          <div className="flex items-center gap-2 text-sm font-semibold">
-            <IconFilterX className="h-3 w-3" strokeWidth={2} />
-            Policies blocking version
-          </div>
-          {policies.map((p) => (
-            <Link
-              href={urls
-                .workspace(workspaceSlug)
-                .policies()
-                .edit(p.id)
-                .deploymentFlow()}
-              key={p.id}
-              className="max-w-72 truncate underline-offset-1 hover:underline"
-            >
-              {p.name}
-            </Link>
-          ))}
-        </div>
-      </HoverCardContent>
-    </HoverCard>
-  );
-};
-
-const getPoliciesWithApprovalRequired = (
-  policyEvaluations: PolicyEvaluationResult,
-) => {
-  const policiesWithAnyApprovalRequired = Object.entries(
-    policyEvaluations.rules.anyApprovals,
-  )
-    .filter(([_, reasons]) => reasons.length > 0)
-    .map(([policyId]) =>
-      policyEvaluations.policies.find((p) => p.id === policyId),
-    )
-    .filter(isPresent);
-
-  const policiesWithRoleApprovalRequired = Object.entries(
-    policyEvaluations.rules.roleApprovals,
-  )
-    .filter(([_, reasons]) => reasons.length > 0)
-    .map(([policyId]) =>
-      policyEvaluations.policies.find((p) => p.id === policyId),
-    )
-    .filter(isPresent);
-
-  const policiesWithUserApprovalRequired = Object.entries(
-    policyEvaluations.rules.userApprovals,
-  )
-    .filter(([_, reasons]) => reasons.length > 0)
-    .map(([policyId]) =>
-      policyEvaluations.policies.find((p) => p.id === policyId),
-    )
-    .filter(isPresent);
-
-  return _.uniqBy(
-    [
-      ...policiesWithAnyApprovalRequired,
-      ...policiesWithRoleApprovalRequired,
-      ...policiesWithUserApprovalRequired,
-    ],
-    (p) => p.id,
-  );
-};
-
-const ApprovalRequiredCell: React.FC<{
-  policies: { id: string; name: string }[];
-  deploymentVersion: { id: string; tag: string };
-}> = ({ policies, deploymentVersion }) => {
-  const { workspaceSlug, systemSlug, deploymentSlug } = useParams<{
-    workspaceSlug: string;
-    systemSlug: string;
-    deploymentSlug: string;
-  }>();
-
-  const versionUrl = urls
-    .workspace(workspaceSlug)
-    .system(systemSlug)
-    .deployment(deploymentSlug)
-    .release(deploymentVersion.id)
-    .checks();
-  return (
-    <HoverCard>
-      <HoverCardTrigger asChild>
-        <div className="flex h-full w-full items-center justify-center p-1">
-          <Link
-            href={versionUrl}
-            className="flex w-full items-center gap-2 rounded-md p-2 hover:bg-accent"
-          >
-            <div className="rounded-full bg-yellow-400 p-1 dark:text-black">
-              <IconShield className="h-4 w-4" strokeWidth={2} />
-            </div>
-            <div className="flex flex-col">
-              <div className="max-w-36 truncate font-semibold">
-                {deploymentVersion.tag}
-              </div>
-              <div className="text-xs text-muted-foreground">
-                Approval required
-              </div>
-            </div>
-          </Link>
-        </div>
-      </HoverCardTrigger>
-      <HoverCardContent className="w-80">
-        <div className="flex flex-col gap-2 text-sm">
-          <div className="flex items-center gap-2 text-sm font-semibold">
-            <IconShield className="h-3 w-3" strokeWidth={2} />
-            Policies missing approval
-          </div>
-          {policies.map((p) => (
-            <Link
-              href={urls
-                .workspace(workspaceSlug)
-                .policies()
-                .edit(p.id)
-                .qualitySecurity()}
-              key={p.id}
-              className="max-w-72 truncate underline-offset-1 hover:underline"
-            >
-              {p.name}
-            </Link>
-          ))}
-        </div>
-      </HoverCardContent>
-    </HoverCard>
-  );
-};
-
 type DeploymentVersionEnvironmentCellProps = {
+  system: { slug: string };
   environment: SCHEMA.Environment;
   deployment: SCHEMA.Deployment;
   deploymentVersion: SCHEMA.DeploymentVersion;
@@ -316,7 +87,8 @@ type DeploymentVersionEnvironmentCellProps = {
 
 const DeploymentVersionEnvironmentCell: React.FC<
   DeploymentVersionEnvironmentCellProps
-> = ({ environment, deployment, deploymentVersion }) => {
+> = (props) => {
+  const { environment, deployment, deploymentVersion } = props;
   const { data: releaseTargets, isLoading: isReleaseTargetsLoading } =
     api.releaseTarget.list.useQuery({
       environmentId: environment.id,
@@ -341,12 +113,7 @@ const DeploymentVersionEnvironmentCell: React.FC<
 
   const hasJobs = jobs != null && jobs.length > 0;
   if (hasJobs)
-    return (
-      <ActiveJobsCell
-        statuses={jobs.map((j) => j.status)}
-        deploymentVersion={deploymentVersion}
-      />
-    );
+    return <ActiveJobsCell statuses={jobs.map((j) => j.status)} {...props} />;
 
   const hasNoReleaseTargets =
     releaseTargets == null || releaseTargets.length === 0;
@@ -364,7 +131,7 @@ const DeploymentVersionEnvironmentCell: React.FC<
     return (
       <BlockedByVersionSelectorCell
         policies={policiesWithBlockingVersionSelector}
-        deploymentVersion={deploymentVersion}
+        {...props}
       />
     );
 
@@ -378,12 +145,13 @@ const DeploymentVersionEnvironmentCell: React.FC<
     return (
       <ApprovalRequiredCell
         policies={policiesWithApprovalRequired}
-        deploymentVersion={deploymentVersion}
+        {...props}
       />
     );
 
   const hasNoJobAgent = deployment.jobAgentId == null;
-  if (hasNoJobAgent) return <NoJobAgentCell tag={deploymentVersion.tag} />;
+  if (hasNoJobAgent)
+    return <NoJobAgentCell tag={deploymentVersion.tag} {...props} />;
 
   return <NoReleaseTargetsCell tag={deploymentVersion.tag} />;
 };
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/(deploy)/(raw)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/(sidebar)/_components/release-cell/policy-evaluation.ts b/apps/webservice/src/app/[workspaceSlug]/(app)/(deploy)/(raw)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/(sidebar)/_components/release-cell/policy-evaluation.ts
new file mode 100644
index 000000000..1ef37e467
--- /dev/null
+++ b/apps/webservice/src/app/[workspaceSlug]/(app)/(deploy)/(raw)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/(sidebar)/_components/release-cell/policy-evaluation.ts
@@ -0,0 +1,9 @@
+export type PolicyEvaluationResult = {
+  policies: { id: string; name: string }[];
+  rules: {
+    anyApprovals: Record<string, string[]>;
+    roleApprovals: Record<string, string[]>;
+    userApprovals: Record<string, string[]>;
+    versionSelector: Record<string, boolean>;
+  };
+};
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/(deploy)/(raw)/systems/[systemSlug]/(sidebar)/deployments/TableDeployments.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/(deploy)/(raw)/systems/[systemSlug]/(sidebar)/deployments/TableDeployments.tsx
index bf4cb9fd4..645db7089 100644
--- a/apps/webservice/src/app/[workspaceSlug]/(app)/(deploy)/(raw)/systems/[systemSlug]/(sidebar)/deployments/TableDeployments.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/(app)/(deploy)/(raw)/systems/[systemSlug]/(sidebar)/deployments/TableDeployments.tsx
@@ -230,7 +230,7 @@ const DeploymentTable: React.FC<{
                     <LazyDeploymentEnvironmentCell
                       environment={env}
                       deployment={r}
-                      systemSlug={systemSlug}
+                      system={{ slug: systemSlug }}
                     />
                   </td>
                 );
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/(deploy)/(sidebar)/systems/_components/system-deployment-table/TableDeployments.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/(deploy)/(sidebar)/systems/_components/system-deployment-table/TableDeployments.tsx
index 26c57a7ed..5306c6514 100644
--- a/apps/webservice/src/app/[workspaceSlug]/(app)/(deploy)/(sidebar)/systems/_components/system-deployment-table/TableDeployments.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/(app)/(deploy)/(sidebar)/systems/_components/system-deployment-table/TableDeployments.tsx
@@ -211,7 +211,7 @@ const DeploymentTable: React.FC<{
                   <LazyDeploymentEnvironmentCell
                     environment={env}
                     deployment={r}
-                    systemSlug={system.slug}
+                    system={system}
                   />
                 </TableCell>
               ))}
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/(deploy)/_components/deployment-version/ApprovalDialog.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/(deploy)/_components/deployment-version/ApprovalDialog.tsx
index 9940b7e65..bc1f08ae9 100644
--- a/apps/webservice/src/app/[workspaceSlug]/(app)/(deploy)/_components/deployment-version/ApprovalDialog.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/(app)/(deploy)/_components/deployment-version/ApprovalDialog.tsx
@@ -2,13 +2,11 @@
 
 import { useState } from "react";
 import { useRouter } from "next/navigation";
-import { IconLoader2 } from "@tabler/icons-react";
 
-import { Badge } from "@ctrlplane/ui/badge";
+import * as SCHEMA from "@ctrlplane/db/schema";
 import { Button } from "@ctrlplane/ui/button";
 import {
   Dialog,
-  DialogClose,
   DialogContent,
   DialogDescription,
   DialogFooter,
@@ -16,94 +14,74 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@ctrlplane/ui/dialog";
+import { Textarea } from "@ctrlplane/ui/textarea";
 
 import { api } from "~/trpc/react";
 
 export const ApprovalDialog: React.FC<{
-  deploymentVersion: { id: string; tag: string; deploymentId: string };
-  policyId: string;
-  environmentId?: string;
+  versionId: string;
+  versionTag: string;
+  environmentId: string;
   children: React.ReactNode;
-}> = ({ deploymentVersion, policyId, environmentId, children }) => {
-  const policyQ = api.environment.policy.byId.useQuery(policyId);
-
+  onSubmit?: () => void;
+}> = ({ versionId, versionTag, environmentId, children, onSubmit }) => {
   const [open, setOpen] = useState(false);
-  const approve = api.environment.policy.approval.approve.useMutation();
-  const reject = api.environment.policy.approval.reject.useMutation();
-  const utils = api.useUtils();
-  const invalidateApproval = () => {
-    utils.environment.policy.approval.statusByVersionPolicyId.invalidate({
-      policyId,
-      versionId: deploymentVersion.id,
-    });
-    if (environmentId != null)
-      utils.deployment.version.latest.byDeploymentAndEnvironment.invalidate({
-        deploymentId: deploymentVersion.deploymentId,
-        environmentId,
-      });
-  };
-  const versionId = deploymentVersion.id;
-  const onApprove = () =>
-    approve
-      .mutateAsync({ versionId, policyId })
-      .then(() => router.refresh())
-      .then(() => invalidateApproval())
-      .then(() => setOpen(false));
-  const onReject = () =>
-    reject
-      .mutateAsync({ versionId, policyId })
-      .then(() => router.refresh())
-      .then(() => invalidateApproval())
-      .then(() => setOpen(false));
+  const addRecord =
+    api.deployment.version.checks.approval.addRecord.useMutation();
+
   const router = useRouter();
 
+  const [reason, setReason] = useState("");
+
+  const handleSubmit = (status: SCHEMA.ApprovalStatus) =>
+    addRecord
+      .mutateAsync({
+        deploymentVersionId: versionId,
+        environmentId,
+        status,
+        reason,
+      })
+      .then(() => setOpen(false))
+      .then(() => onSubmit?.())
+      .then(() => router.refresh());
+
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger asChild>{children}</DialogTrigger>
       <DialogContent>
         <DialogHeader>
-          <DialogTitle className="text-xl font-semibold">
-            Approve version{" "}
-            <span className="truncate">{deploymentVersion.tag}</span>
-          </DialogTitle>
-          {policyQ.isLoading && (
-            <DialogDescription className="flex items-center justify-center">
-              <IconLoader2 className="animate-spin" />
-            </DialogDescription>
-          )}
-          {!policyQ.isLoading && (
-            <DialogDescription>
-              <div className="flex flex-col gap-2">
-                Approves this version for the following environments:
-                <div className="flex flex-wrap gap-2">
-                  {policyQ.data?.environments.map((env) => (
-                    <Badge
-                      key={env.id}
-                      variant="secondary"
-                      className="max-w-40"
-                    >
-                      <span className="truncate">{env.name}</span>
-                    </Badge>
-                  ))}
-                </div>
-              </div>
-            </DialogDescription>
-          )}
+          <DialogTitle>Approve Release</DialogTitle>
+          <DialogDescription>
+            Are you sure you want to approve version {versionTag}?
+          </DialogDescription>
         </DialogHeader>
-        {!policyQ.isLoading && (
-          <DialogFooter className="flex w-full justify-between sm:flex-row sm:justify-between">
-            <DialogClose>
-              <Button variant="secondary">Cancel</Button>
-            </DialogClose>
 
-            <div className="flex gap-2">
-              <Button variant="secondary" onClick={onReject}>
-                Reject
-              </Button>
-              <Button onClick={onApprove}>Approve</Button>
-            </div>
-          </DialogFooter>
-        )}
+        <Textarea
+          value={reason}
+          onChange={(e) => setReason(e.target.value)}
+          placeholder="Reason for approval (optional)"
+        />
+
+        <DialogFooter className="flex w-full flex-row items-center justify-between sm:justify-between">
+          <Button variant="outline" onClick={() => setOpen(false)}>
+            Cancel
+          </Button>
+          <div className="flex gap-2">
+            <Button
+              variant="outline"
+              onClick={() => handleSubmit(SCHEMA.ApprovalStatus.Rejected)}
+              disabled={addRecord.isPending}
+            >
+              Reject
+            </Button>
+            <Button
+              onClick={() => handleSubmit(SCHEMA.ApprovalStatus.Approved)}
+              disabled={addRecord.isPending}
+            >
+              Approve
+            </Button>
+          </div>
+        </DialogFooter>
       </DialogContent>
     </Dialog>
   );
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/(deploy)/_components/deployment-version/DeploymentVersionDropdownMenu.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/(deploy)/_components/deployment-version/DeploymentVersionDropdownMenu.tsx
index 933bd60b8..a391ea377 100644
--- a/apps/webservice/src/app/[workspaceSlug]/(app)/(deploy)/_components/deployment-version/DeploymentVersionDropdownMenu.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/(app)/(deploy)/_components/deployment-version/DeploymentVersionDropdownMenu.tsx
@@ -36,11 +36,6 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@ctrlplane/ui/dropdown-menu";
-import {
-  HoverCard,
-  HoverCardContent,
-  HoverCardTrigger,
-} from "@ctrlplane/ui/hover-card";
 
 import { api } from "~/trpc/react";
 
@@ -51,7 +46,7 @@ type DeployProps = {
   children: React.ReactNode;
 };
 
-const RedeployVersionDialog: React.FC<DeployProps> = ({
+export const RedeployVersionDialog: React.FC<DeployProps> = ({
   deployment,
   environment,
   children,
@@ -60,7 +55,7 @@ const RedeployVersionDialog: React.FC<DeployProps> = ({
   const redeploy = api.redeploy.useMutation();
   const [isOpen, setIsOpen] = useState(false);
 
-  const handleRedeploy = () => {
+  const handleRedeploy = () =>
     redeploy
       .mutateAsync({
         environmentId: environment.id,
@@ -70,7 +65,6 @@ const RedeployVersionDialog: React.FC<DeployProps> = ({
         setIsOpen(false);
         router.refresh();
       });
-  };
 
   return (
     <Dialog open={isOpen} onOpenChange={setIsOpen}>
@@ -99,7 +93,7 @@ const RedeployVersionDialog: React.FC<DeployProps> = ({
   );
 };
 
-const ForceDeployVersionDialog: React.FC<DeployProps> = ({
+export const ForceDeployVersionDialog: React.FC<DeployProps> = ({
   deployment,
   environment,
   children,
@@ -150,39 +144,16 @@ type DropdownActionProps = {
   environment: { id: string; name: string };
   icon: React.ReactNode;
   label: string;
-  disabled?: boolean;
-  disabledMessage?: string;
   Dialog: React.FC<DeployProps>;
 };
 
-const DropdownAction: React.FC<DropdownActionProps> = ({
+export const DropdownAction: React.FC<DropdownActionProps> = ({
   deployment,
   environment,
   icon,
   label,
-  disabled,
-  disabledMessage,
   Dialog,
 }) => {
-  if (disabled) {
-    return (
-      <HoverCard>
-        <HoverCardTrigger asChild>
-          <DropdownMenuItem
-            onSelect={(e) => e.preventDefault()}
-            className="space-x-2 text-muted-foreground hover:cursor-not-allowed focus:bg-transparent focus:text-muted-foreground"
-          >
-            {icon}
-            <span>{label}</span>
-          </DropdownMenuItem>
-        </HoverCardTrigger>
-        <HoverCardContent className="p-1 text-sm">
-          {disabledMessage}
-        </HoverCardContent>
-      </HoverCard>
-    );
-  }
-
   return (
     <Dialog deployment={deployment} environment={environment}>
       <DropdownMenuItem
@@ -199,18 +170,17 @@ const DropdownAction: React.FC<DropdownActionProps> = ({
 type DeploymentVersionDropdownMenuProps = {
   deployment: { id: string; name: string };
   environment: { id: string; name: string };
-  isVersionBeingDeployed: boolean;
 };
 
 export const DeploymentVersionDropdownMenu: React.FC<
   DeploymentVersionDropdownMenuProps
-> = ({ deployment, environment, isVersionBeingDeployed }) => (
+> = ({ deployment, environment }) => (
   <DropdownMenu>
     <DropdownMenuTrigger asChild>
       <Button
         variant="ghost"
         size="icon"
-        className="h-7 w-7 text-muted-foreground"
+        className="h-7 w-7 shrink-0 text-muted-foreground"
       >
         <IconDotsVertical className="h-4 w-4" />
       </Button>
@@ -221,8 +191,6 @@ export const DeploymentVersionDropdownMenu: React.FC<
         environment={environment}
         icon={<IconReload className="h-4 w-4" />}
         label="Redeploy"
-        disabled={isVersionBeingDeployed}
-        disabledMessage="Cannot redeploy a version that is actively being deployed"
         Dialog={RedeployVersionDialog}
       />
       <DropdownAction
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/(deploy)/_components/deployments/environment-cell/DeploymentEnvironmentCell.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/(deploy)/_components/deployments/environment-cell/DeploymentEnvironmentCell.tsx
index 80c6b1b41..750695020 100644
--- a/apps/webservice/src/app/[workspaceSlug]/(app)/(deploy)/_components/deployments/environment-cell/DeploymentEnvironmentCell.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/(app)/(deploy)/_components/deployments/environment-cell/DeploymentEnvironmentCell.tsx
@@ -24,13 +24,13 @@ const CellSkeleton: React.FC = () => (
 type DeploymentEnvironmentCellProps = {
   environment: SCHEMA.Environment;
   deployment: SCHEMA.Deployment;
-  systemSlug: string;
+  system: { slug: string };
 };
 
 const DeploymentEnvironmentCell: React.FC<DeploymentEnvironmentCellProps> = ({
   environment,
   deployment,
-  systemSlug,
+  system,
 }) => {
   const { workspaceSlug } = useParams<{ workspaceSlug: string }>();
 
@@ -41,7 +41,7 @@ const DeploymentEnvironmentCell: React.FC<DeploymentEnvironmentCellProps> = ({
 
   const deploymentUrls = urls
     .workspace(workspaceSlug)
-    .system(systemSlug)
+    .system(system.slug)
     .deployment(deployment.slug);
 
   if (isLoading) return <CellSkeleton />;
@@ -64,6 +64,7 @@ const DeploymentEnvironmentCell: React.FC<DeploymentEnvironmentCellProps> = ({
       environment={environment}
       deployment={deployment}
       deploymentVersion={version}
+      system={system}
     />
   );
 };

From 24902ef264d3b39db6046836e990704f65dca54a Mon Sep 17 00:00:00 2001
From: Aditya Choudhari <adityachoudhari26@gmail.com>
Date: Sat, 3 May 2025 11:18:04 -0700
Subject: [PATCH 2/2] add useclient

---
 .../(sidebar)/_components/release-cell/ActiveJobsCell.tsx       | 2 ++
 .../(sidebar)/_components/release-cell/ApprovalRequiredCell.tsx | 2 ++
 .../_components/release-cell/BlockedByVersionSelectorCell.tsx   | 2 ++
 3 files changed, 6 insertions(+)

diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/(deploy)/(raw)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/(sidebar)/_components/release-cell/ActiveJobsCell.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/(deploy)/(raw)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/(sidebar)/_components/release-cell/ActiveJobsCell.tsx
index 400891729..31a7f6291 100644
--- a/apps/webservice/src/app/[workspaceSlug]/(app)/(deploy)/(raw)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/(sidebar)/_components/release-cell/ActiveJobsCell.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/(app)/(deploy)/(raw)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/(sidebar)/_components/release-cell/ActiveJobsCell.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import type * as SCHEMA from "@ctrlplane/db/schema";
 import Link from "next/link";
 import { useParams } from "next/navigation";
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/(deploy)/(raw)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/(sidebar)/_components/release-cell/ApprovalRequiredCell.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/(deploy)/(raw)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/(sidebar)/_components/release-cell/ApprovalRequiredCell.tsx
index 0388d8da3..cd2c96120 100644
--- a/apps/webservice/src/app/[workspaceSlug]/(app)/(deploy)/(raw)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/(sidebar)/_components/release-cell/ApprovalRequiredCell.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/(app)/(deploy)/(raw)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/(sidebar)/_components/release-cell/ApprovalRequiredCell.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import Link from "next/link";
 import { useParams } from "next/navigation";
 import {
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/(deploy)/(raw)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/(sidebar)/_components/release-cell/BlockedByVersionSelectorCell.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/(deploy)/(raw)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/(sidebar)/_components/release-cell/BlockedByVersionSelectorCell.tsx
index 2f9ab8cae..14fd413d7 100644
--- a/apps/webservice/src/app/[workspaceSlug]/(app)/(deploy)/(raw)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/(sidebar)/_components/release-cell/BlockedByVersionSelectorCell.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/(app)/(deploy)/(raw)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/(sidebar)/_components/release-cell/BlockedByVersionSelectorCell.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import Link from "next/link";
 import { useParams } from "next/navigation";
 import {