Preview branches (#2086)

* Initial preview migrations

* Modified the staging endpoint to create preview environments

* Added isBranchableEnvironment to RuntimeEnvironment

* Staging = yellow Preview = orange

* Changed the env sort order

* Set isBranchableEnvironment correctly. Create preview for new projects

* Very basic branch menu

* Creating branches from the dashboard

* Fix for string icons on project delete page

* Don’t show branch API keys

* WIP on the manage branches page

* RuntimeEnvironment added projectId index

* Only create the parentEnvironmentId column if it doesn’t exist already

* Improved the limit wording

* Add search to the branch list

* contains in both places

* Many style improvements

* Branch dropdown and v4 badge

* Arching/unarchive branches working in the dashboard

* Tidied imports

* Change preview slug from `prev` to `preview`

* Use correct color for side menu preview branch icon

* Upsert the branch and use the shortcode as a unique constraint

* Upserting working with nice messages in the dashboard

* Better errors when upserting branches

* Button shortcut, don’t allow event to propagate

* Better duplicate error message

* Filter out archived branches from the env selector

* Archiving/creating tweaked some more

* Add an archived banner to the app, fixes for archived branches and upsells

* Fixed pagination

* Disable editing schedules, pausing queues, testing tasks

* Don’t allow replaying if the env is archived

* When deploying detect the correct environment

* Get the projectClient when there’s a branch

* createGitMeta function, most code from the vercel CLI repo

* Deploy, getting the correct environment client

* Added git column to WorkerDeployment

* Add GitMeta to core schemas

* Create branch when deploying

* WIP on branch support in the API

* Delete old createTaskRunAttempt fn

* apiAuth remove export from internal functions

* Rename env var to “TRIGGER_PREVIEW_BRANCH”

* Add TRIGGER_PREVIEW_BRANCH to resolved env vars for runs

* First preview deploy and run working

* Set the preview branch in the main SDK

* Added git links to the preview branches table

* Better errors when replaying/testing archived branches

* Don’t dequeue archived environments

* Env var resolution with parent environment

* Hello world default machine small-2x to save my memory

* Fix for more env var functions

* Only return non-archived envs

* Switch to controlled state for the checkboxes

* Uncheck everything when PREVIEW is checked

* WIP on branch UI

* Show the preview branch label on the env vars list

* Fix for overriding env vars

* Adding preview branch env vars working

* Progress on new env vars

* Only allow selecting a single branch

* Layout fix when there are errors

* Set the defaultValue so there are some fields

* Conform fix for team invite page

* Archived environments don’t run scheduled tasks

* Added Git data to deployments

* Added git data to the deployment inspector

* Don’t allow upserting schedules when archived

* Deduplicate and blacklist some env vars

* Fix for wrong conform function being used

* Show a better error if all vars were blacklisted

* Added environment variable search (by key and value)

* Improved preview branch icon

* Replay now supports branches

* Schedule page render branches properly

* Show the env icon in bottom-left of the test page

* When editing older schedules (that have multi-env) show preview branches correctly

* Fix for incorrect disallowed branch name character

* Extract and improve the directory verification code

* WIP for CLI preview archive command

* Improved the preview branch action buttons

* Redirect to the project if we don’t find a matching env

* Archiving branch via the CLI working

* Fix for archiving branches

* Public access token test task

* JWTs working are with preview branches

* Add branch and git data to the Run ctx

* Updated GitMeta functions to work in CI

* Added pullRequestState

* Archive when deploying if the PR is closed/merged

* Fix for the changesets guide

* Fix for CLI dev bug introduced

* CLI promote now supports preview branches

* Add PR title. Reordered them and added tooltips

* syncEnvVars working with branches

* Added preview branch support to syncVercelEnvVars()

* Detect the branch from Vercel env var (set during build)

* Allow passing a branch in

* Use process.env.VERCEL_TOKEN as well… this used in Vercel CI

* Temp delete

* Improved regenerate api key modal

* Added Accordion component (with styles)

* Redesigned the API keys page

* Revert "Temp delete"

This reverts commit 177b92c.

* Changeset

* Fixed docs link

* The new branch panel closes when a branch is created

* Update apps/webapp/app/services/upsertBranch.server.ts

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

* Removed findUniques from WorkerGroupTokenService

* Made the parentEnvironmentId migrations safe

* Latest lockfile

* Update packages/cli-v3/src/commands/workers/build.ts

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

* Move isValidGitBranchName to a separate file

* Move the sanitize fn too

* removeBlacklistedVariables moved to a separate file

* Moved deduplicateVariableArray to a separate file…

* Fix broken sanitizeBranchName import

* Another import fix…

* Improved blacklisted error message

* SImplified migration to use `ADD COLUMN IF NOT EXISTS "parentEnvironmentId" TEXT`

---------

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

Author: matt-aitken

.changeset/silly-cows-serve.md

@@ -0,0 +1,5 @@
+---
+"trigger.dev": patch
+---
+
+Added support for Preview branches in v4 projects

CHANGESETS.md

@@ -30,28 +30,14 @@ Please follow the best-practice of adding changesets in the same commit as the c
 
 ## Snapshot instructions
 
-!MAKE SURE TO UPDATE THE TAG IN THE INSTRUCTIONS BELOW!
+1. Delete the `.changeset/pre.json` file (if it exists)
 
-1. Add changesets as usual
+2. Do a temporary commit (do NOT push this, you should undo it after)
 
-```sh
-pnpm run changeset:add
-```
+3. Copy the `GITHUB_TOKEN` line from the .env file
 
-2. Create a snapshot version (replace "prerelease" with your tag)
+4. Run `GITHUB_TOKEN=github_pat_12345 ./scripts/publish-prerelease.sh re2`
 
-```sh
-pnpm exec changeset version --snapshot prerelease
-```
+Make sure to replace the token with yours. `re2` is the tag that will be used for the pre-release.
 
-3. Build the packages:
-
-```sh
-pnpm run build --filter "@trigger.dev/*" --filter "trigger.dev"
-```
-
-4. Publish the snapshot (replace "dev" with your tag)
-
-```sh
-pnpm exec changeset publish --no-git-tag --snapshot --tag prerelease
-```
+5. Undo the commit where you deleted the pre.json file.

apps/webapp/app/assets/icons/ArchiveIcon.tsx

@@ -0,0 +1,44 @@
+export function ArchiveIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <g clipPath="url(#clip0_17398_782)">
+        <path
+          d="M19.2293 9C20.1562 9.00001 20.8612 9.83278 20.7088 10.7471L19.2781 19.3291C19.1173 20.2933 18.283 21 17.3055 21H6.69416C5.71662 21 4.88235 20.2933 4.7215 19.3291L3.29084 10.7471C3.13848 9.83289 3.8436 9.00021 4.77033 9H19.2293ZM9.95002 12.5C9.12179 12.5002 8.45002 13.1717 8.45002 14C8.45002 14.8283 9.12179 15.4998 9.95002 15.5H13.95L14.1033 15.4922C14.8597 15.4154 15.45 14.7767 15.45 14C15.45 13.2233 14.8597 12.5846 14.1033 12.5078L13.95 12.5H9.95002Z"
+          fill="currentColor"
+        />
+        <rect x="2" y="3" width="20" height="4" rx="1" fill="currentColor" />
+      </g>
+      <defs>
+        <clipPath id="clip0_17398_782">
+          <rect width="24" height="24" fill="currentColor" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
+
+export function UnarchiveIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <g clipPath="url(#clip0_17398_66731)">
+        <path
+          d="M19.2027 10C20.1385 10 20.8456 10.8478 20.6782 11.7686L19.2984 19.3574C19.1254 20.3084 18.2972 21 17.3306 21H6.66945C5.70287 21 4.87458 20.3084 4.70167 19.3574L3.32179 11.7686C3.15438 10.8478 3.86152 10 4.79738 10H10.9995V16C10.9995 16.5521 11.4475 16.9997 11.9995 17C12.5518 17 12.9995 16.5523 12.9995 16V10H19.2027Z"
+          fill="currentColor"
+        />
+        <rect x="11" y="4" width="2" height="6" fill="currentColor" />
+        <path
+          d="M15.5 6.5L12 3L8.5 6.5"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_17398_66731">
+          <rect width="24" height="24" fill="currentColor" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}

apps/webapp/app/assets/icons/EnvironmentIcons.tsx

@@ -75,7 +75,7 @@ export function ProdEnvironmentIcon({ className }: { className?: string }) {
     <svg className={className} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path
         d="M12.5037 7.33603C12.3174 6.88799 11.6827 6.88799 11.4963 7.33603L10.4338 9.89064L7.6759 10.1117C7.1922 10.1505 6.99606 10.7542 7.36459 11.0698L9.46583 12.8698L8.82387 15.561C8.71128 16.033 9.22477 16.4061 9.63888 16.1532L12 14.711L14.3612 16.1532C14.7753 16.4061 15.2888 16.0331 15.1762 15.561L14.5343 12.8698L16.6355 11.0698C17.004 10.7542 16.8079 10.1505 16.3242 10.1117L13.5663 9.89064L12.5037 7.33603Z"
-        fill="white"
+        fill="currentColor"
       />
       <rect
         x="3"
@@ -151,3 +151,28 @@ export function DeployedEnvironmentIconSmall({ className }: { className?: string
     </svg>
   );
 }
+
+export function PreviewEnvironmentIconSmall({ className }: { className?: string }) {
+  return <BranchEnvironmentIconSmall className={className} />;
+}
+
+export function BranchEnvironmentIconSmall({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M2.23059 7C1.65409 6.99967 1.30545 6.36259 1.61634 5.87695L3.88489 2.33301C4.17195 1.88466 4.82727 1.88472 5.11438 2.33301L7.38294 5.87695C7.69386 6.36265 7.34531 6.99982 6.76868 7L2.23059 7Z"
+        fill="currentColor"
+      />
+      <path
+        d="M3.5 6H5.5V15C5.5 15.5523 5.05228 16 4.5 16C3.94772 16 3.5 15.5523 3.5 15V6Z"
+        fill="currentColor"
+      />
+      <path
+        d="M13.5 7V7.5C13.5 9.15685 12.1569 10.5 10.5 10.5H7.5C5.84315 10.5 4.5 11.8431 4.5 13.5V15"
+        stroke="currentColor"
+        strokeWidth="2"
+      />
+      <circle cx="13.5" cy="5" r="2" stroke="currentColor" strokeWidth="2" />
+    </svg>
+  );
+}

apps/webapp/app/assets/icons/IntegrationIcon.tsx

@@ -18,6 +18,7 @@ import { useProject } from "~/hooks/useProject";
 import { type MinimumEnvironment } from "~/presenters/SelectBestEnvironmentPresenter.server";
 import {
   docsPath,
+  v3BillingPath,
   v3EnvironmentPath,
   v3EnvironmentVariablesPath,
   v3NewProjectAlertPath,
@@ -36,6 +37,11 @@ import { TextLink } from "./primitives/TextLink";
 import { InitCommandV3, PackageManagerProvider, TriggerDevStepV3 } from "./SetupCommands";
 import { StepContentContainer } from "./StepContentContainer";
 import { WaitpointTokenIcon } from "~/assets/icons/WaitpointTokenIcon";
+import { BranchEnvironmentIconSmall } from "~/assets/icons/EnvironmentIcons";
+import { useFeatures } from "~/hooks/useFeatures";
+import { DialogContent, DialogTrigger, Dialog } from "./primitives/Dialog";
+import { V4Badge } from "./V4Badge";
+import { NewBranchPanel } from "~/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.branches/route";
 
 export function HasNoTasksDev() {
   return (
@@ -431,15 +437,128 @@ export function NoWaitpointTokens() {
   );
 }
 
-function SwitcherPanel() {
+export function BranchesNoBranchableEnvironment() {
+  const { isManagedCloud } = useFeatures();
+  const organization = useOrganization();
+
+  if (!isManagedCloud) {
+    return (
+      <InfoPanel
+        title="Create a preview environment"
+        icon={BranchEnvironmentIconSmall}
+        iconClassName="text-preview"
+        panelClassName="max-w-full"
+      >
+        <Paragraph spacing variant="small">
+          To add branches you need to have a <InlineCode>RuntimeEnvironment</InlineCode> where{" "}
+          <InlineCode>isBranchableEnvironment</InlineCode> is true. We recommend creating a
+          dedicated one using the "PREVIEW" type.
+        </Paragraph>
+      </InfoPanel>
+    );
+  }
+
+  return (
+    <InfoPanel
+      title="Upgrade to get preview branches"
+      icon={BranchEnvironmentIconSmall}
+      iconClassName="text-preview"
+      panelClassName="max-w-full"
+      accessory={
+        <LinkButton variant="primary/small" to={v3BillingPath(organization)}>
+          Upgrade
+        </LinkButton>
+      }
+    >
+      <Paragraph spacing variant="small">
+        Preview branches in Trigger.dev create isolated environments for testing new features before
+        production.
+      </Paragraph>
+    </InfoPanel>
+  );
+}
+
+export function BranchesNoBranches({
+  parentEnvironment,
+  limits,
+  canUpgrade,
+}: {
+  parentEnvironment: { id: string };
+  limits: { used: number; limit: number };
+  canUpgrade: boolean;
+}) {
+  const organization = useOrganization();
+
+  if (limits.used >= limits.limit) {
+    return (
+      <InfoPanel
+        title="Upgrade to get preview branches"
+        icon={BranchEnvironmentIconSmall}
+        iconClassName="text-preview"
+        panelClassName="max-w-full"
+        accessory={
+          canUpgrade ? (
+            <LinkButton variant="primary/small" to={v3BillingPath(organization)}>
+              Upgrade
+            </LinkButton>
+          ) : (
+            <Feedback
+              button={<Button variant="primary/small">Request more</Button>}
+              defaultValue="help"
+            />
+          )
+        }
+      >
+        <Paragraph spacing variant="small">
+          You've reached the limit ({limits.used}/{limits.limit}) of branches for your plan. Upgrade
+          to get branches.
+        </Paragraph>
+      </InfoPanel>
+    );
+  }
+
+  return (
+    <InfoPanel
+      title="Create your first branch"
+      icon={BranchEnvironmentIconSmall}
+      iconClassName="text-preview"
+      panelClassName="max-w-full"
+      accessory={
+        <NewBranchPanel
+          button={
+            <Button
+              variant="primary/small"
+              LeadingIcon={PlusIcon}
+              leadingIconClassName="text-white"
+            >
+              New branch
+            </Button>
+          }
+          parentEnvironment={parentEnvironment}
+        />
+      }
+    >
+      <Paragraph spacing variant="small">
+        Branches are a way to test new features in isolation before merging them into the main
+        environment.
+      </Paragraph>
+      <Paragraph spacing variant="small">
+        Branches are only available when using <V4Badge inline /> or above. Read our{" "}
+        <TextLink to={docsPath("upgrade-to-v4")}>v4 upgrade guide</TextLink> to learn more.
+      </Paragraph>
+    </InfoPanel>
+  );
+}
+
+export function SwitcherPanel({ title = "Switch to a deployed environment" }: { title?: string }) {
   const organization = useOrganization();
   const project = useProject();
   const environment = useEnvironment();
 
   return (
     <div className="flex items-center rounded-md border border-grid-bright bg-background-bright p-3">
       <Paragraph variant="small" className="grow">
-        Switch to a deployed environment
+        {title}
       </Paragraph>
       <EnvironmentSelector
         organization={organization}

apps/webapp/app/components/BlankStatePanels.tsx

@@ -0,0 +1,86 @@
+import { GitPullRequestIcon, GitCommitIcon, GitBranchIcon } from "lucide-react";
+import { type GitMetaLinks } from "~/presenters/v3/BranchesPresenter.server";
+import { LinkButton } from "./primitives/Buttons";
+import { SimpleTooltip } from "./primitives/Tooltip";
+
+export function GitMetadata({ git }: { git?: GitMetaLinks | null }) {
+  if (!git) return null;
+  return (
+    <>
+      {git.pullRequestUrl && git.pullRequestNumber && <GitMetadataPullRequest git={git} />}
+      {git.shortSha && <GitMetadataCommit git={git} />}
+      {git.branchUrl && <GitMetadataBranch git={git} />}
+    </>
+  );
+}
+
+export function GitMetadataBranch({
+  git,
+}: {
+  git: Pick<GitMetaLinks, "branchUrl" | "branchName">;
+}) {
+  return (
+    <SimpleTooltip
+      button={
+        <LinkButton
+          variant="minimal/small"
+          LeadingIcon={<GitBranchIcon className="size-4" />}
+          iconSpacing="gap-x-1"
+          to={git.branchUrl}
+          className="pl-1"
+        >
+          {git.branchName}
+        </LinkButton>
+      }
+      content="Jump to GitHub branch"
+    />
+  );
+}
+
+export function GitMetadataCommit({
+  git,
+}: {
+  git: Pick<GitMetaLinks, "commitUrl" | "shortSha" | "commitMessage">;
+}) {
+  return (
+    <SimpleTooltip
+      button={
+        <LinkButton
+          variant="minimal/small"
+          to={git.commitUrl}
+          LeadingIcon={<GitCommitIcon className="size-4" />}
+          iconSpacing="gap-x-1"
+          className="pl-1"
+        >
+          {`${git.shortSha} / ${git.commitMessage}`}
+        </LinkButton>
+      }
+      content="Jump to GitHub commit"
+    />
+  );
+}
+
+export function GitMetadataPullRequest({
+  git,
+}: {
+  git: Pick<GitMetaLinks, "pullRequestUrl" | "pullRequestNumber" | "pullRequestTitle">;
+}) {
+  if (!git.pullRequestUrl || !git.pullRequestNumber) return null;
+
+  return (
+    <SimpleTooltip
+      button={
+        <LinkButton
+          variant="minimal/small"
+          to={git.pullRequestUrl}
+          LeadingIcon={<GitPullRequestIcon className="size-4" />}
+          iconSpacing="gap-x-1"
+          className="pl-1"
+        >
+          #{git.pullRequestNumber} {git.pullRequestTitle}
+        </LinkButton>
+      }
+      content="Jump to GitHub pull request"
+    />
+  );
+}

apps/webapp/app/components/GitMetadata.tsx

@@ -0,0 +1,26 @@
+import { cn } from "~/utils/cn";
+import { Badge } from "./primitives/Badge";
+import { SimpleTooltip } from "./primitives/Tooltip";
+
+export function V4Badge({ inline = false, className }: { inline?: boolean; className?: string }) {
+  return (
+    <SimpleTooltip
+      button={
+        <Badge variant="extra-small" className={cn(inline ? "inline-grid" : "", className)}>
+          V4
+        </Badge>
+      }
+      content="This feature is only available in V4 and above."
+      disableHoverableContent
+    />
+  );
+}
+
+export function V4Title({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <span>{children}</span>
+      <V4Badge />
+    </>
+  );
+}