Show tracking branch hint in the deployments page

Author: myftija

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

@@ -1,5 +1,5 @@
 import {
-  Prisma,
+  type Prisma,
   type WorkerDeploymentStatus,
   type WorkerInstanceGroupType,
 } from "@trigger.dev/database";
@@ -56,6 +56,17 @@ export class DeploymentListPresenter {
             },
           },
         },
+        connectedGithubRepository: {
+          select: {
+            branchTracking: true,
+            repository: {
+              select: {
+                htmlUrl: true,
+                fullName: true,
+              },
+            },
+          },
+        },
       },
       where: {
         slug: projectSlug,
@@ -143,6 +154,7 @@ LIMIT ${pageSize} OFFSET ${pageSize * (page - 1)};`;
     return {
       currentPage: page,
       totalPages: Math.ceil(totalCount / pageSize),
+      connectedGithubRepository: project.connectedGithubRepository ?? undefined,
       deployments: deployments.map((deployment, index) => {
         const label = labeledDeployments.find(
           (labeledDeployment) => labeledDeployment.deploymentId === deployment.id

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

@@ -1,11 +1,13 @@
 import { ArrowUturnLeftIcon, BookOpenIcon } from "@heroicons/react/20/solid";
 import { type MetaFunction, Outlet, useLocation, useNavigate, useParams } from "@remix-run/react";
 import { type LoaderFunctionArgs } from "@remix-run/server-runtime";
+import { GitBranchIcon } from "lucide-react";
 import { useEffect } from "react";
 import { typedjson, useTypedLoaderData } from "remix-typedjson";
 import { z } from "zod";
 import { PromoteIcon } from "~/assets/icons/PromoteIcon";
 import { DeploymentsNone, DeploymentsNoneDev } from "~/components/BlankStatePanels";
+import { OctoKitty } from "~/components/GitHubLoginButton";
 import { GitMetadata } from "~/components/GitMetadata";
 import { RuntimeIcon } from "~/components/RuntimeIcon";
 import { UserAvatar } from "~/components/UserProfilePhoto";
@@ -52,6 +54,7 @@ import { requireUserId } from "~/services/session.server";
 import { titleCase } from "~/utils";
 import { EnvironmentParamSchema, docsPath, v3DeploymentPath } from "~/utils/pathBuilder";
 import { createSearchParams } from "~/utils/searchParams";
+import { BranchTrackingConfigSchema, getTrackedBranchForEnvironment } from "~/v3/github";
 import { compareDeploymentVersions } from "~/v3/utils/deploymentVersions";
 
 export const meta: MetaFunction = () => {
@@ -122,8 +125,15 @@ export default function Page() {
   const organization = useOrganization();
   const project = useProject();
   const environment = useEnvironment();
-  const { deployments, currentPage, totalPages, selectedDeployment } =
+  const { deployments, currentPage, totalPages, selectedDeployment, connectedGithubRepository } =
     useTypedLoaderData<typeof loader>();
+  const branchTrackingOrError =
+    connectedGithubRepository &&
+    BranchTrackingConfigSchema.safeParse(connectedGithubRepository.branchTracking);
+  const environmentGitHubBranch =
+    branchTrackingOrError && branchTrackingOrError.success
+      ? getTrackedBranchForEnvironment(branchTrackingOrError.data, environment.type)
+      : undefined;
   const hasDeployments = totalPages > 0;
 
   const { deploymentParam } = useParams();
@@ -286,11 +296,27 @@ export default function Page() {
                     )}
                   </TableBody>
                 </Table>
-                {totalPages > 1 && (
-                  <div className="-mt-px flex justify-end border-t border-grid-dimmed py-2 pr-2">
-                    <PaginationControls currentPage={currentPage} totalPages={totalPages} />
-                  </div>
-                )}
+                <div className="-mt-px flex justify-between gap-2 border-t border-grid-dimmed px-2 py-2">
+                  {connectedGithubRepository && environmentGitHubBranch && (
+                    <div className="flex flex-nowrap items-center gap-2 whitespace-nowrap text-sm">
+                      <OctoKitty className="size-4" />
+                      Automatically triggered by pushes to{" "}
+                      <div className="flex max-w-32 items-center gap-1 truncate rounded bg-grid-dimmed px-1 font-mono">
+                        <GitBranchIcon className="size-3 shrink-0" />
+                        <span className="max-w-28 truncate">{environmentGitHubBranch}</span>
+                      </div>{" "}
+                      in
+                      <a
+                        href={connectedGithubRepository.repository.htmlUrl}
+                        target="_blank"
+                        className="max-w-52 truncate text-sm text-text-dimmed underline transition-colors hover:text-text-bright"
+                      >
+                        {connectedGithubRepository.repository.fullName}
+                      </a>
+                    </div>
+                  )}
+                  <PaginationControls currentPage={currentPage} totalPages={20} />
+                </div>
               </div>
             ) : environment.type === "DEVELOPMENT" ? (
               <MainCenteredContainer className="max-w-md">

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

@@ -357,7 +357,7 @@ export const action: ActionFunction = async ({ request, params }) => {
 
         const [error, branchValidationsOrFail] = await tryCatch(
           Promise.all([
-            productionBranch && existingBranchTracking.data?.production?.branch !== productionBranch
+            productionBranch && existingBranchTracking.data?.prod?.branch !== productionBranch
               ? checkGitHubBranchExists(installationId, owner, repo, productionBranch)
               : Promise.resolve(true),
             stagingBranch && existingBranchTracking.data?.staging?.branch !== stagingBranch
@@ -392,7 +392,7 @@ export const action: ActionFunction = async ({ request, params }) => {
           },
           data: {
             branchTracking: {
-              production: productionBranch ? { branch: productionBranch } : {},
+              prod: productionBranch ? { branch: productionBranch } : {},
               staging: stagingBranch ? { branch: stagingBranch } : {},
             } satisfies BranchTrackingConfig,
             previewDeploymentsEnabled: previewDeploymentsEnabled,
@@ -441,7 +441,7 @@ export const action: ActionFunction = async ({ request, params }) => {
             projectId: project.id,
             repositoryId: repositoryId,
             branchTracking: {
-              production: { branch: repository.defaultBranch },
+              prod: { branch: repository.defaultBranch },
               staging: { branch: repository.defaultBranch },
             } satisfies BranchTrackingConfig,
             previewDeploymentsEnabled: true,
@@ -908,15 +908,15 @@ function ConnectedGitHubRepoForm({
 
   const [hasGitSettingsChanges, setHasGitSettingsChanges] = useState(false);
   const [gitSettingsValues, setGitSettingsValues] = useState({
-    productionBranch: connectedGitHubRepo.branchTracking?.production?.branch || "",
+    productionBranch: connectedGitHubRepo.branchTracking?.prod?.branch || "",
     stagingBranch: connectedGitHubRepo.branchTracking?.staging?.branch || "",
     previewDeploymentsEnabled: connectedGitHubRepo.previewDeploymentsEnabled,
   });
 
   useEffect(() => {
     const hasChanges =
       gitSettingsValues.productionBranch !==
-        (connectedGitHubRepo.branchTracking?.production?.branch || "") ||
+        (connectedGitHubRepo.branchTracking?.prod?.branch || "") ||
       gitSettingsValues.stagingBranch !==
         (connectedGitHubRepo.branchTracking?.staging?.branch || "") ||
       gitSettingsValues.previewDeploymentsEnabled !== connectedGitHubRepo.previewDeploymentsEnabled;
@@ -986,7 +986,7 @@ function ConnectedGitHubRepoForm({
               </div>
               <Input
                 {...conform.input(fields.productionBranch, { type: "text" })}
-                defaultValue={connectedGitHubRepo.branchTracking?.production?.branch}
+                defaultValue={connectedGitHubRepo.branchTracking?.prod?.branch}
                 placeholder="none"
                 variant="tertiary"
                 icon={GitBranchIcon}

apps/webapp/app/v3/github.ts

@@ -1,7 +1,7 @@
 import { z } from "zod";
 
 export const BranchTrackingConfigSchema = z.object({
-  production: z.object({
+  prod: z.object({
     branch: z.string().optional(),
   }),
   staging: z.object({
@@ -10,3 +10,18 @@ export const BranchTrackingConfigSchema = z.object({
 });
 
 export type BranchTrackingConfig = z.infer<typeof BranchTrackingConfigSchema>;
+
+export function getTrackedBranchForEnvironment(
+  branchTracking: BranchTrackingConfig | undefined,
+  environmentType: "PRODUCTION" | "STAGING" | "DEVELOPMENT" | "PREVIEW"
+): string | undefined {
+  if (!branchTracking) return undefined;
+  switch (environmentType) {
+    case "PRODUCTION":
+      return branchTracking.prod?.branch;
+    case "STAGING":
+      return branchTracking.staging?.branch;
+    default:
+      return undefined;
+  }
+}

internal-packages/database/prisma/schema.prisma

@@ -393,7 +393,7 @@ model Project {
   taskRunCheckpoints        TaskRunCheckpoint[]
   executionSnapshots        TaskRunExecutionSnapshot[]
   waitpointTags             WaitpointTag[]
-  ConnectedGithubRepository ConnectedGithubRepository?
+  connectedGithubRepository ConnectedGithubRepository?
 }
 
 enum ProjectVersion {
@@ -2300,9 +2300,9 @@ model ConnectedGithubRepository {
   repository   GithubRepository @relation(fields: [repositoryId], references: [id], onDelete: Cascade, onUpdate: Cascade)
   repositoryId String
 
-  // Branch configuration by environment, stored as JSON
+  // Branch configuration by environment slug, stored as JSON
   // Example: {
-  //   "production": { "branch": "main" },
+  //   "prod": { "branch": "main" },
   //   "staging": { "branch": "staging" },
   // }
   // We could alternatively store tracking branch configurations in a separate table and reference the runtime environments properly.