feat(webapp): redeploy recent deployments from the dashboard

Add a Redeploy action to the deployments list. Finished deployments from the last seven days that were triggered from GitHub or deployed with the CLI's native build can be rebuilt from the dashboard as a new deployment, with an option to promote it automatically once it succeeds. The new deployment links back to the one it was redeployed from.

Mono-RevId: c378a6f30e5e6ff952e3f084f8426e6a5d342d62

Author: myftija

.server-changes/redeploy-recent-deployments.md

@@ -0,0 +1,6 @@
+---
+area: webapp
+type: feature
+---
+
+Recent deployments started from the GitHub integration or a native CLI deploy can be redeployed from the deployments list, rebuilding the same commit or upload as a new deployment.

apps/webapp/app/env.server.ts

@@ -2026,6 +2026,7 @@ const EnvironmentSchema = z
     TASK_EVENT_PARTITIONED_WINDOW_IN_SECONDS: z.coerce.number().int().default(60), // 1 minute
 
     DEPLOYMENTS_AUTORELOAD_POLL_INTERVAL_MS: z.coerce.number().int().default(5_000),
+    DEPLOYMENTS_REDEPLOY_WINDOW_DAYS: z.coerce.number().int().positive().default(7),
     BULK_ACTION_AUTORELOAD_POLL_INTERVAL_MS: z.coerce.number().int().default(1_000),
     QUEUES_AUTORELOAD_POLL_INTERVAL_MS: z.coerce.number().int().default(5_000),
 

apps/webapp/app/presenters/v3/DeploymentListPresenter.server.ts

@@ -14,6 +14,7 @@ import {
   VercelProjectIntegrationDataSchema,
   buildVercelDeploymentUrl,
 } from "~/v3/vercel/vercelProjectIntegrationSchema";
+import { resolveRedeploySource } from "~/v3/redeploy";
 
 const pageSize = 20;
 
@@ -154,7 +155,10 @@ export class DeploymentListPresenter {
         userAvatarUrl: string | null;
         type: WorkerInstanceGroupType;
         externalId: string | null;
+        triggeredVia: string | null;
         git: Prisma.JsonValue | null;
+        buildServerMetadata: Prisma.JsonValue | null;
+        createdAt: Date;
         integrationDeploymentId: string | null;
       }[]
     >`
@@ -175,7 +179,10 @@ export class DeploymentListPresenter {
   wd."deployedAt",
   wd."type",
   wd."externalId",
-  wd."git"
+  wd."triggeredVia",
+  wd."git",
+  wd."buildServerMetadata",
+  wd."createdAt"
   ${vercelSelect}
 FROM
   ${sqlDatabaseSchema}."WorkerDeployment" as wd
@@ -267,7 +274,10 @@ LIMIT ${pageSize} OFFSET ${pageSize * (page - 1)};`;
               }
             : undefined,
           externalId: deployment.externalId,
+          triggeredVia: deployment.triggeredVia,
           git: processGitMetadata(deployment.git),
+          createdAt: deployment.createdAt,
+          redeploySource: resolveRedeploySource(deployment)?.kind ?? null,
           vercelDeploymentUrl,
         };
       }),

apps/webapp/app/presenters/v3/DeploymentPresenter.server.ts

@@ -18,6 +18,7 @@ import { env } from "~/env.server";
 import { createRedisClient } from "~/redis.server";
 import { tryCatch } from "@trigger.dev/core";
 import { logger } from "~/services/logger.server";
+import { redeployOfShortCode } from "~/v3/redeploy";
 
 const S2_TOKEN_KEY_PREFIX = "s2-token:project:";
 
@@ -278,6 +279,7 @@ export class DeploymentPresenter {
         externalId: deployment.externalId,
         git: gitMetadata,
         triggeredVia: deployment.triggeredVia,
+        redeployOf: redeployOfShortCode(deployment.buildServerMetadata),
         vercelDeploymentUrl,
       },
     };

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.deployments.$deploymentParam/route.tsx

@@ -49,7 +49,12 @@ import { useProject } from "~/hooks/useProject";
 import { DeploymentPresenter } from "~/presenters/v3/DeploymentPresenter.server";
 import { requireUserId } from "~/services/session.server";
 import { cn } from "~/utils/cn";
-import { v3DeploymentParams, v3DeploymentsPath, v3RunsPath } from "~/utils/pathBuilder";
+import {
+  v3DeploymentParams,
+  v3DeploymentPath,
+  v3DeploymentsPath,
+  v3RunsPath,
+} from "~/utils/pathBuilder";
 import { capitalizeWord } from "~/utils/string";
 import { UserTag } from "../_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.deployments/route";
 import { useDeploymentLogs } from "~/hooks/useDeploymentLogs";
@@ -296,6 +301,24 @@ export default function Page() {
                 <Property.Label>Version</Property.Label>
                 <Property.Value>{deployment.version}</Property.Value>
               </Property.Item>
+              {deployment.redeployOf && (
+                <Property.Item>
+                  <Property.Label>Redeploy of</Property.Label>
+                  <Property.Value>
+                    <TextLink
+                      to={v3DeploymentPath(
+                        organization,
+                        project,
+                        environment,
+                        { shortCode: deployment.redeployOf },
+                        0
+                      )}
+                    >
+                      {deployment.redeployOf}
+                    </TextLink>
+                  </Property.Value>
+                </Property.Item>
+              )}
               <Property.Item>
                 <Property.Label>Status</Property.Label>
                 <Property.Value>

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.deployments/route.tsx

@@ -12,10 +12,11 @@ import { Form, Outlet, useLocation, useNavigate, useNavigation, useParams } from
 
 import { type LoaderFunctionArgs } from "@remix-run/server-runtime";
 import { CogIcon, GitBranchIcon } from "lucide-react";
-import { useEffect } from "react";
+import { useEffect, useRef, useState } from "react";
 import { typedjson, useTypedLoaderData } from "remix-typedjson";
 import { z } from "zod";
 import { PromoteIcon } from "~/assets/icons/PromoteIcon";
+import { InlineCode } from "~/components/code/InlineCode";
 import { VercelLink } from "~/components/integrations/VercelLink";
 import { DeploymentsNone, DeploymentsNoneDev } from "~/components/BlankStatePanels";
 import { OctoKitty } from "~/components/GitHubLoginButton";
@@ -25,6 +26,7 @@ import { UserAvatar } from "~/components/UserProfilePhoto";
 import { MainCenteredContainer, PageBody, PageContainer } from "~/components/layout/AppLayout";
 import { Badge } from "~/components/primitives/Badge";
 import { Button, LinkButton } from "~/components/primitives/Buttons";
+import { CheckboxWithLabel } from "~/components/primitives/Checkbox";
 import { DateTime } from "~/components/primitives/DateTime";
 import { SpinnerWhite } from "~/components/primitives/Spinner";
 import {
@@ -154,6 +156,9 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
             canWriteDeployments: { action: "write", resource: { type: "deployments" } },
           }).canWriteDeployments
         : true;
+    const redeployCutoff = new Date(
+      Date.now() - env.DEPLOYMENTS_REDEPLOY_WINDOW_DAYS * 24 * 60 * 60 * 1000
+    );
 
     const onboarding = await resolveDeploymentOnboardingUi({
       request,
@@ -173,6 +178,7 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
       ...result,
       ...onboarding,
       canWriteDeployments,
+      redeployCutoff,
       selectedDeployment,
       autoReloadPollIntervalMs,
     });
@@ -199,6 +205,7 @@ export default function Page() {
     autoReloadPollIntervalMs,
     hasVercelIntegration,
     canWriteDeployments,
+    redeployCutoff,
     canDeployNow,
     deployNowEnabled,
     isPlatformConfigured,
@@ -409,6 +416,7 @@ export default function Page() {
                               isSelected={isSelected}
                               currentDeployment={currentDeployment}
                               canWriteDeployments={canWriteDeployments}
+                              redeployCutoff={redeployCutoff}
                             />
                           </TableRow>
                         );
@@ -531,12 +539,14 @@ function DeploymentActionsCell({
   isSelected,
   currentDeployment,
   canWriteDeployments,
+  redeployCutoff,
 }: {
   deployment: DeploymentListItem;
   path: string;
   isSelected: boolean;
   currentDeployment?: DeploymentListItem;
   canWriteDeployments: boolean;
+  redeployCutoff: Date;
 }) {
   const location = useLocation();
   const project = useProject();
@@ -550,8 +560,15 @@ function DeploymentActionsCell({
 
   const finalStatuses = ["CANCELED", "DEPLOYED", "FAILED", "TIMED_OUT"];
   const canBeCanceled = !finalStatuses.includes(deployment.status);
-
-  if (!canBeRolledBack && !canBePromoted && !canBeCanceled) {
+  const showRedeploy =
+    deployment.redeploySource !== null &&
+    finalStatuses.includes(deployment.status) &&
+    deployment.createdAt >= redeployCutoff;
+  const redeployDisabledReason = canWriteDeployments
+    ? undefined
+    : "You don't have permission to redeploy";
+
+  if (!canBeRolledBack && !canBePromoted && !canBeCanceled && !showRedeploy) {
     return (
       <TableCell to={path} isSelected={isSelected}>
         {""}
@@ -563,7 +580,8 @@ function DeploymentActionsCell({
     <TableCellMenu
       isSticky
       isSelected={isSelected}
-      popoverContent={
+      // oxlint-disable-next-line react/no-unstable-nested-components -- Render prop: the menu primitive passes its close handler so the redeploy dialog can dismiss the menu.
+      popoverContent={(closeMenu) => (
         <>
           {canBeRolledBack &&
             (canWriteDeployments ? (
@@ -664,12 +682,122 @@ function DeploymentActionsCell({
                 Cancel
               </Button>
             ))}
+          {showRedeploy &&
+            (redeployDisabledReason === undefined ? (
+              <RedeployDeploymentDialog
+                projectId={project.id}
+                deployment={deployment}
+                redirectPath={`${location.pathname}${location.search}`}
+                onSettled={closeMenu}
+              />
+            ) : (
+              <Button
+                variant="small-menu-item"
+                LeadingIcon={ArrowPathIcon}
+                leadingIconClassName="text-blue-500"
+                fullWidth
+                textAlignLeft
+                disabled
+                tooltip={redeployDisabledReason}
+              >
+                Redeploy
+              </Button>
+            ))}
         </>
-      }
+      )}
     />
   );
 }
 
+function RedeployDeploymentDialog({
+  projectId,
+  deployment,
+  redirectPath,
+  onSettled,
+}: {
+  projectId: string;
+  deployment: DeploymentListItem;
+  redirectPath: string;
+  onSettled: () => void;
+}) {
+  const navigation = useNavigation();
+  const [open, setOpen] = useState(false);
+
+  const formAction = `/resources/${projectId}/deployments/${deployment.shortCode}/redeploy`;
+  const formId = `redeploy-${deployment.shortCode}`;
+  const isLoading = navigation.formAction === formAction;
+
+  // The source row stays eligible after a redeploy, so the dialog never unmounts; close it
+  // once the submission has settled (the toast carries the outcome).
+  const wasLoading = useRef(false);
+  useEffect(() => {
+    if (wasLoading.current && !isLoading) {
+      setOpen(false);
+      onSettled();
+    }
+    wasLoading.current = isLoading;
+  }, [isLoading, onSettled]);
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button
+          variant="small-menu-item"
+          LeadingIcon={ArrowPathIcon}
+          leadingIconClassName="text-blue-500"
+          fullWidth
+          textAlignLeft
+        >
+          Redeploy
+        </Button>
+      </DialogTrigger>
+      <DialogContent key="redeploy">
+        <DialogHeader>Redeploy</DialogHeader>
+        <DialogDescription>
+          {deployment.redeploySource === "github" && deployment.git ? (
+            <>
+              A new deployment will rebuild commit{" "}
+              <InlineCode variant="extra-small">{deployment.git.shortSha}</InlineCode> from branch{" "}
+              <InlineCode variant="extra-small">{deployment.git.branchName}</InlineCode>.
+            </>
+          ) : (
+            <>
+              A new deployment will be created from the source files of deployment{" "}
+              <InlineCode variant="extra-small">{deployment.shortCode}</InlineCode>.
+            </>
+          )}
+        </DialogDescription>
+        <CheckboxWithLabel
+          name="promote"
+          value="on"
+          form={formId}
+          variant="simple/small"
+          defaultChecked
+          label="Promote deployment automatically"
+        />
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button variant="tertiary/medium">Cancel</Button>
+          </DialogClose>
+          <Form id={formId} action={formAction} method="post">
+            <Button
+              type="submit"
+              name="redirectUrl"
+              value={redirectPath}
+              variant="primary/medium"
+              LeadingIcon={isLoading ? SpinnerWhite : ArrowPathIcon}
+              disabled={isLoading}
+              shortcut={{ modifiers: ["mod"], key: "enter" }}
+            >
+              {isLoading ? "Redeploying..." : "Redeploy"}
+            </Button>
+          </Form>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
 function DeploymentExternalIdCell({
   externalId,
   path,