feat(webapp): expose project git settings (#2464)

* Fix settigns page delete project width issue

* Apply a couple of touch-ups to the project settings page

* Add UI flow to connect gh repos

* Enabling adding another gh account in the ui

* Enable connecting a repo to a project

* Enable updating git settings

* Enable disconnecting gh repos from a project

* Remove prisma migration drifts

* Hide git settings when github app is disabled

* Fix migration order

* Avoid using `location` to avoid SSR issues

* Make branch tracking optional

* Disable save buttons when there are no field changes

* Disable delete project button unless the input matches the project slug

* Show connected repo connectedAt date

* Check that tracking branch exists when updating git settings

* Show tracking branch hint in the deployments page

* Fix positioning issue of the pagination pane in the deployments page

* Use mono font for branch names

* Add link to git settings

* Show tracking branch hint for the preview env too

* Add a confirmation prompt on repo disconnect

* Add link to configure repo access in gh

* Add rel prop to github links

* Automatically open repo connection modal after app installation

* Apply some fixes suggested by mr rabbit

* Fix flash cookie issue

* Extract project settings actions into a service

* Extract project settings loader into a presenter service

* Introduce neverthrow for error handling

* Try out neverthrow for error handling in the project setting flows

* Move env gh branch resolution to the presenter service

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";
@@ -9,6 +9,7 @@ import { type Project } from "~/models/project.server";
 import { findEnvironmentBySlug } from "~/models/runtimeEnvironment.server";
 import { type User } from "~/models/user.server";
 import { processGitMetadata } from "./BranchesPresenter.server";
+import { BranchTrackingConfigSchema, getTrackedBranchForEnvironment } from "~/v3/github";
 
 const pageSize = 20;
 
@@ -56,6 +57,18 @@ export class DeploymentListPresenter {
             },
           },
         },
+        connectedGithubRepository: {
+          select: {
+            branchTracking: true,
+            previewDeploymentsEnabled: true,
+            repository: {
+              select: {
+                htmlUrl: true,
+                fullName: true,
+              },
+            },
+          },
+        },
       },
       where: {
         slug: projectSlug,
@@ -140,9 +153,28 @@ ORDER BY
   string_to_array(wd."version", '.')::int[] DESC
 LIMIT ${pageSize} OFFSET ${pageSize * (page - 1)};`;
 
+    const { connectedGithubRepository } = project;
+
+    const branchTrackingOrError =
+      connectedGithubRepository &&
+      BranchTrackingConfigSchema.safeParse(connectedGithubRepository.branchTracking);
+    const environmentGitHubBranch =
+      branchTrackingOrError && branchTrackingOrError.success
+        ? getTrackedBranchForEnvironment(
+            branchTrackingOrError.data,
+            connectedGithubRepository.previewDeploymentsEnabled,
+            {
+              type: environment.type,
+              branchName: environment.branchName ?? undefined,
+            }
+          )
+        : undefined;
+
     return {
       currentPage: page,
       totalPages: Math.ceil(totalCount / pageSize),
+      connectedGithubRepository: project.connectedGithubRepository ?? undefined,
+      environmentGitHubBranch,
       deployments: deployments.map((deployment, index) => {
         const label = labeledDeployments.find(
           (labeledDeployment) => labeledDeployment.deploymentId === deployment.id

apps/webapp/app/routes/_app.github.callback/route.tsx

@@ -1,9 +1,13 @@
-import { type LoaderFunctionArgs } from "@remix-run/node";
+import { type LoaderFunctionArgs, redirect } from "@remix-run/node";
 import { z } from "zod";
 import { validateGitHubAppInstallSession } from "~/services/gitHubSession.server";
 import { linkGitHubAppInstallation, updateGitHubAppInstallation } from "~/services/gitHub.server";
 import { logger } from "~/services/logger.server";
-import { redirectWithErrorMessage, redirectWithSuccessMessage } from "~/models/message.server";
+import {
+  redirectWithErrorMessage,
+  setRequestSuccessMessage,
+  commitSession,
+} from "~/models/message.server";
 import { tryCatch } from "@trigger.dev/core";
 import { $replica } from "~/db.server";
 import { requireUser } from "~/services/session.server";
@@ -88,7 +92,14 @@ export async function loader({ request }: LoaderFunctionArgs) {
         return redirectWithErrorMessage(redirectTo, request, "Failed to install GitHub App");
       }
 
-      return redirectWithSuccessMessage(redirectTo, request, "GitHub App installed successfully");
+      const session = await setRequestSuccessMessage(request, "GitHub App installed successfully");
+      session.flash("gitHubAppInstalled", true);
+
+      return redirect(redirectTo, {
+        headers: {
+          "Set-Cookie": await commitSession(session),
+        },
+      });
     }
 
     case "update": {
@@ -101,7 +112,14 @@ export async function loader({ request }: LoaderFunctionArgs) {
         return redirectWithErrorMessage(redirectTo, request, "Failed to update GitHub App");
       }
 
-      return redirectWithSuccessMessage(redirectTo, request, "GitHub App updated successfully");
+      const session = await setRequestSuccessMessage(request, "GitHub App updated successfully");
+      session.flash("gitHubAppInstalled", true);
+
+      return redirect(redirectTo, {
+        headers: {
+          "Set-Cookie": await commitSession(session),
+        },
+      });
     }
 
     case "request": {
@@ -111,7 +129,13 @@ export async function loader({ request }: LoaderFunctionArgs) {
         callbackData,
       });
 
-      return redirectWithSuccessMessage(redirectTo, request, "GitHub App installation requested");
+      const session = await setRequestSuccessMessage(request, "GitHub App installation requested");
+
+      return redirect(redirectTo, {
+        headers: {
+          "Set-Cookie": await commitSession(session),
+        },
+      });
     }
 
     default:

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 { CogIcon, 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";
@@ -50,7 +52,13 @@ import {
 } from "~/presenters/v3/DeploymentListPresenter.server";
 import { requireUserId } from "~/services/session.server";
 import { titleCase } from "~/utils";
-import { EnvironmentParamSchema, docsPath, v3DeploymentPath } from "~/utils/pathBuilder";
+import { cn } from "~/utils/cn";
+import {
+  EnvironmentParamSchema,
+  docsPath,
+  v3DeploymentPath,
+  v3ProjectSettingsPath,
+} from "~/utils/pathBuilder";
 import { createSearchParams } from "~/utils/searchParams";
 import { compareDeploymentVersions } from "~/v3/utils/deploymentVersions";
 
@@ -122,8 +130,14 @@ export default function Page() {
   const organization = useOrganization();
   const project = useProject();
   const environment = useEnvironment();
-  const { deployments, currentPage, totalPages, selectedDeployment } =
-    useTypedLoaderData<typeof loader>();
+  const {
+    deployments,
+    currentPage,
+    totalPages,
+    selectedDeployment,
+    connectedGithubRepository,
+    environmentGitHubBranch,
+  } = useTypedLoaderData<typeof loader>();
   const hasDeployments = totalPages > 0;
 
   const { deploymentParam } = useParams();
@@ -160,8 +174,8 @@ export default function Page() {
         <ResizablePanelGroup orientation="horizontal" className="h-full max-h-full">
           <ResizablePanel id="deployments-main" min="100px" className="max-h-full">
             {hasDeployments ? (
-              <div className="grid max-h-full grid-rows-[1fr_auto]">
-                <Table containerClassName="border-t-0">
+              <div className="flex h-full max-h-full flex-col">
+                <Table containerClassName="border-t-0 grow">
                   <TableHeader>
                     <TableRow>
                       <TableHeaderCell>Deploy</TableHeaderCell>
@@ -286,11 +300,38 @@ 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={cn(
+                    "-mt-px flex flex-wrap justify-end gap-2 border-t border-grid-dimmed px-3 pb-[7px] pt-[6px]",
+                    connectedGithubRepository && environmentGitHubBranch && "justify-between"
+                  )}
+                >
+                  {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"
+                        rel="noreferrer noopener"
+                        className="max-w-52 truncate text-sm text-text-dimmed underline transition-colors hover:text-text-bright"
+                      >
+                        {connectedGithubRepository.repository.fullName}
+                      </a>
+                      <LinkButton
+                        variant="minimal/small"
+                        LeadingIcon={CogIcon}
+                        to={v3ProjectSettingsPath(organization, project, environment)}
+                      />
+                    </div>
+                  )}
+                  <PaginationControls currentPage={currentPage} totalPages={totalPages} />
+                </div>
               </div>
             ) : environment.type === "DEVELOPMENT" ? (
               <MainCenteredContainer className="max-w-md">