feat: rewrite authorize page to use deploymentId, fetch deployment from DB

- Rewrite authorize page to take single deploymentId search param
- Fetch deployment details from DB via getById instead of URL params
- Handle awaiting_approval, already authorized, and failed states
- Simplify authorize mutation input to just deploymentId
- Add gitCommitMessage, gitCommitAuthorHandle, gitCommitAuthorAvatarUrl, projectId to getById response
- Register getById in tRPC router

Author: Flo4604

web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/authorize/page.tsx

@@ -13,35 +13,29 @@ import {
 import { Button } from "@unkey/ui";
 import { useParams, useRouter } from "next/navigation";
 import { parseAsString, useQueryStates } from "nuqs";
-import { useProjectData } from "../(overview)/data-provider";
 
 const searchParamsParsers = {
-  branch: parseAsString.withDefault(""),
-  sha: parseAsString.withDefault(""),
-  sender: parseAsString.withDefault(""),
-  message: parseAsString.withDefault(""),
-  repo: parseAsString.withDefault(""),
+  deploymentId: parseAsString.withDefault(""),
 };
 
 export default function AuthorizeDeploymentPage() {
   const params = useParams<{ workspaceSlug: string; projectId: string }>();
   const router = useRouter();
-  const { project } = useProjectData();
 
-  const [{ branch, sha, sender, message, repo }] = useQueryStates(searchParamsParsers);
+  const [{ deploymentId }] = useQueryStates(searchParamsParsers);
+
+  const deployment = trpc.deploy.deployment.getById.useQuery(
+    { deploymentId },
+    { enabled: !!deploymentId },
+  );
 
   const authorize = trpc.deploy.deployment.authorize.useMutation({
     onSuccess: () => {
       router.push(`/${params.workspaceSlug}/projects/${params.projectId}/deployments`);
     },
   });
 
-  const shortSha = sha.slice(0, 7);
-  const commitURL = `https://github.com/${repo}/commit/${sha}`;
-  const branchURL = `https://github.com/${repo}/tree/${branch}`;
-  const senderURL = `https://github.com/${sender}`;
-
-  if (!branch || !sha || !/^[0-9a-f]{40}$/.test(sha)) {
+  if (!deploymentId) {
     return (
       <div className="flex items-center justify-center min-h-[60vh]">
         <div className="text-center space-y-2">
@@ -55,82 +49,79 @@ export default function AuthorizeDeploymentPage() {
     );
   }
 
-  const isStaleCommit = authorize.error?.message?.includes("no longer the HEAD");
-  const newHead = isStaleCommit ? parseNewHead(authorize.error?.message) : null;
+  if (deployment.isLoading) {
+    return (
+      <div className="flex items-center justify-center min-h-[60vh]">
+        <div className="text-center space-y-2">
+          <p className="text-sm text-content-subtle">Loading deployment details...</p>
+        </div>
+      </div>
+    );
+  }
 
-  if (authorize.isSuccess) {
+  if (deployment.error) {
+    return (
+      <div className="flex items-center justify-center min-h-[60vh]">
+        <div className="text-center space-y-2">
+          <CircleXMark iconSize="2xl-thin" className="text-error-9 mx-auto" />
+          <h2 className="text-lg font-semibold text-content">Deployment not found</h2>
+          <p className="text-content-subtle text-sm">{deployment.error.message}</p>
+        </div>
+      </div>
+    );
+  }
+
+  const data = deployment.data;
+
+  // Already authorized — deployment is no longer awaiting approval
+  if (data.status !== "awaiting_approval") {
+    const isSuccess = data.status !== "failed";
     return (
       <div className="flex items-center justify-center min-h-[60vh]">
         <div className="text-center space-y-3">
-          <CircleCheck iconSize="2xl-thin" className="text-success-9 mx-auto" />
-          <h2 className="text-lg font-semibold text-content">Deployment Authorized</h2>
+          {isSuccess ? (
+            <CircleCheck iconSize="2xl-thin" className="text-success-9 mx-auto" />
+          ) : (
+            <CircleXMark iconSize="2xl-thin" className="text-error-9 mx-auto" />
+          )}
+          <h2 className="text-lg font-semibold text-content">
+            {isSuccess ? "Deployment Already Authorized" : "Deployment Failed"}
+          </h2>
           <p className="text-content-subtle text-sm">
-            The deployment has been authorized and is now in progress.
+            {isSuccess
+              ? "This deployment has already been authorized and is in progress."
+              : "This deployment has failed."}
           </p>
+          <Button
+            variant="outline"
+            size="xlg"
+            onClick={() =>
+              router.push(`/${params.workspaceSlug}/projects/${params.projectId}/deployments`)
+            }
+          >
+            View Deployments
+          </Button>
         </div>
       </div>
     );
   }
 
-  if (isStaleCommit && newHead) {
-    const newAuthorizeURL = `/${params.workspaceSlug}/projects/${params.projectId}/authorize?${new URLSearchParams(
-      {
-        branch,
-        sha: newHead.sha,
-        sender: newHead.author,
-        message: newHead.message,
-        repo,
-      },
-    ).toString()}`;
-
+  if (authorize.isSuccess) {
     return (
       <div className="flex items-center justify-center min-h-[60vh]">
-        <div className="w-full max-w-md space-y-6">
-          <div className="text-center space-y-3">
-            <ShieldAlert iconSize="2xl-thin" className="text-warning-9 mx-auto" />
-            <h2 className="text-lg font-semibold text-content">Commit is outdated</h2>
-            <p className="text-sm text-content-subtle">
-              The branch <strong className="text-content font-mono">{branch}</strong> has new
-              commits since this link was created. The latest commit is{" "}
-              <a
-                href={`https://github.com/${repo}/commit/${newHead.sha}`}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="font-mono text-accent-11 hover:text-accent-12"
-              >
-                {newHead.sha.slice(0, 7)}
-              </a>
-              .
-            </p>
-          </div>
-          <div className="flex gap-3">
-            <Button
-              variant="primary"
-              size="xlg"
-              className="flex-1"
-              onClick={() => {
-                authorize.reset();
-                router.push(newAuthorizeURL);
-              }}
-            >
-              View Latest Commit
-            </Button>
-            <Button
-              variant="outline"
-              size="xlg"
-              className="flex-1"
-              onClick={() =>
-                router.push(`/${params.workspaceSlug}/projects/${params.projectId}/deployments`)
-              }
-            >
-              Dismiss
-            </Button>
-          </div>
+        <div className="text-center space-y-3">
+          <CircleCheck iconSize="2xl-thin" className="text-success-9 mx-auto" />
+          <h2 className="text-lg font-semibold text-content">Deployment Authorized</h2>
+          <p className="text-content-subtle text-sm">
+            The deployment has been authorized and is now in progress.
+          </p>
         </div>
       </div>
     );
   }
 
+  const shortSha = data.gitCommitSha?.slice(0, 7) ?? "";
+
   return (
     <div className="flex items-center justify-center min-h-[60vh]">
       <div className="w-full max-w-md space-y-6">
@@ -153,57 +144,53 @@ export default function AuthorizeDeploymentPage() {
         <div className="text-center space-y-2">
           <h1 className="text-xl font-semibold text-content">Authorization Required</h1>
           <p className="text-sm text-content-subtle">
-            An external contributor pushed to{" "}
-            <strong className="text-content">{project?.name ?? "this project"}</strong>. A team
-            member must authorize this deployment before it can proceed.
+            An external contributor pushed a commit. A team member must authorize this deployment
+            before it can proceed.
           </p>
         </div>
 
         {/* Commit details */}
         <div className="border border-border rounded-lg divide-y divide-border">
-          <div className="flex items-center gap-3 px-4 py-3">
-            <CodeBranch iconSize="md-thin" className="text-content-subtle shrink-0" />
-            <span className="text-sm text-content-subtle">Branch</span>
-            <a
-              href={branchURL}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="ml-auto text-sm font-mono text-accent-11 hover:text-accent-12 bg-background-subtle px-2 py-0.5 rounded"
-            >
-              {branch}
-            </a>
-          </div>
+          {data.gitBranch && (
+            <div className="flex items-center gap-3 px-4 py-3">
+              <CodeBranch iconSize="md-thin" className="text-content-subtle shrink-0" />
+              <span className="text-sm text-content-subtle">Branch</span>
+              <span className="ml-auto text-sm font-mono text-content bg-background-subtle px-2 py-0.5 rounded">
+                {data.gitBranch}
+              </span>
+            </div>
+          )}
 
-          <div className="flex items-center gap-3 px-4 py-3">
-            <CodeCommit iconSize="md-thin" className="text-content-subtle shrink-0" />
-            <span className="text-sm text-content-subtle">Commit</span>
-            <a
-              href={commitURL}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="ml-auto text-sm font-mono text-accent-11 hover:text-accent-12 bg-background-subtle px-2 py-0.5 rounded"
-            >
-              {shortSha}
-            </a>
-          </div>
+          {shortSha && (
+            <div className="flex items-center gap-3 px-4 py-3">
+              <CodeCommit iconSize="md-thin" className="text-content-subtle shrink-0" />
+              <span className="text-sm text-content-subtle">Commit</span>
+              <span className="ml-auto text-sm font-mono text-content bg-background-subtle px-2 py-0.5 rounded">
+                {shortSha}
+              </span>
+            </div>
+          )}
 
-          {message && (
+          {data.gitCommitMessage && (
             <div className="px-4 py-3">
-              <p className="text-sm text-content truncate">{message}</p>
+              <p className="text-sm text-content truncate">{data.gitCommitMessage}</p>
             </div>
           )}
 
-          <div className="flex items-center gap-3 px-4 py-3">
-            <User iconSize="md-thin" className="text-content-subtle shrink-0" />
-            <a
-              href={senderURL}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="text-sm text-accent-11 hover:text-accent-12"
-            >
-              {sender}
-            </a>
-          </div>
+          {data.gitCommitAuthorHandle && (
+            <div className="flex items-center gap-3 px-4 py-3">
+              {data.gitCommitAuthorAvatarUrl ? (
+                <img
+                  src={data.gitCommitAuthorAvatarUrl}
+                  alt={data.gitCommitAuthorHandle}
+                  className="w-5 h-5 rounded-full shrink-0"
+                />
+              ) : (
+                <User iconSize="md-thin" className="text-content-subtle shrink-0" />
+              )}
+              <span className="text-sm text-content">{data.gitCommitAuthorHandle}</span>
+            </div>
+          )}
         </div>
 
         {/* Error */}
@@ -221,13 +208,7 @@ export default function AuthorizeDeploymentPage() {
             size="xlg"
             className="flex-1"
             loading={authorize.isLoading}
-            onClick={() =>
-              authorize.mutate({
-                projectId: params.projectId,
-                branch,
-                commitSha: sha,
-              })
-            }
+            onClick={() => authorize.mutate({ deploymentId })}
           >
             Authorize Deployment
           </Button>
@@ -251,24 +232,3 @@ export default function AuthorizeDeploymentPage() {
     </div>
   );
 }
-
-function parseNewHead(
-  errorMessage: string | undefined,
-): { sha: string; message: string; author: string } | null {
-  if (!errorMessage) {
-    return null;
-  }
-  const shaMatch = errorMessage.match(/current_head_sha=([0-9a-f]{40})/);
-  const messageMatch = errorMessage.match(
-    /current_head_message=(.+?)(?:\s+current_head_author=|$)/,
-  );
-  const authorMatch = errorMessage.match(/current_head_author=(\S+)/);
-  if (!shaMatch) {
-    return null;
-  }
-  return {
-    sha: shaMatch[1],
-    message: messageMatch?.[1] ?? "",
-    author: authorMatch?.[1] ?? "",
-  };
-}

web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/components/deployment-status-badge.tsx

@@ -8,6 +8,7 @@ import {
   Hammer2,
   LayerFront,
   Pulse,
+  ShieldAlert,
   Sparkle3,
 } from "@unkey/icons";
 import type { IconProps } from "@unkey/icons/src/props";
@@ -85,6 +86,13 @@ const statusConfigs: Record<DeploymentStatus, StatusConfig> = {
     textColor: "text-errorA-11",
     iconColor: "text-error-11",
   },
+  awaiting_approval: {
+    icon: ShieldAlert,
+    label: "Awaiting Approval",
+    bgColor: "bg-warningA-3",
+    textColor: "text-warningA-11",
+    iconColor: "text-warning-11",
+  },
 };
 
 type DeploymentStatusBadgeProps = {

web/apps/dashboard/lib/collections/deploy/deployment-status.ts

@@ -7,6 +7,7 @@ export const DEPLOYMENT_STATUSES = [
   "finalizing",
   "ready",
   "failed",
+  "awaiting_approval",
 ] as const;
 
 export type DeploymentStatus = (typeof DEPLOYMENT_STATUSES)[number];