Skip to content

Commit 1863152

Browse files
cardernecarderne
committed
feat(webapp): dashboard for dev branches
Add the dev-branches dashboard route and make the branch UI env-aware: - New env.$envParam.dev-branches route for creating/listing/archiving development branches, mirroring the preview branches page. - NewBranchPanel and the branches page take an env ("preview" | "development") instead of a parent environment id. - Environment selector, labels, blank-state panels and environment sort surface dev branches. - Presence resource route is keyed by env param (renamed from dev.presence to env.$envParam.presence); branch archive redirects to the correct (preview vs dev) branches path. TRI-8726
1 parent 99f0ed0 commit 1863152

11 files changed

Lines changed: 1138 additions & 74 deletions

File tree

‎apps/webapp/app/components/BlankStatePanels.tsx‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -488,24 +488,26 @@ export function BranchesNoBranchableEnvironment({ showSelfServe }: { showSelfSer
488488
}
489489

490490
export function BranchesNoBranches({
491-
parentEnvironment,
491+
envType,
492492
limits,
493493
canUpgrade,
494494
showSelfServe,
495495
}: {
496-
parentEnvironment: { id: string };
496+
envType: "preview" | "development";
497497
limits: { used: number; limit: number };
498498
canUpgrade: boolean;
499499
showSelfServe: boolean;
500500
}) {
501501
const organization = useOrganization();
502502

503+
const envTextClassName = envType === "preview" ? "text-preview" : "text-dev";
504+
503505
if (limits.used >= limits.limit) {
504506
return (
505507
<InfoPanel
506508
title="Upgrade to get preview branches"
507509
icon={BranchEnvironmentIconSmall}
508-
iconClassName="text-preview"
510+
iconClassName={envTextClassName}
509511
panelClassName="max-w-full"
510512
accessory={
511513
showSelfServe && canUpgrade ? (
@@ -536,7 +538,7 @@ export function BranchesNoBranches({
536538
<InfoPanel
537539
title="Create your first branch"
538540
icon={BranchEnvironmentIconSmall}
539-
iconClassName="text-preview"
541+
iconClassName={envTextClassName}
540542
panelClassName="max-w-full"
541543
accessory={
542544
<NewBranchPanel
@@ -549,7 +551,7 @@ export function BranchesNoBranches({
549551
New branch
550552
</Button>
551553
}
552-
parentEnvironment={parentEnvironment}
554+
env="preview"
553555
/>
554556
}
555557
>

‎apps/webapp/app/components/DevPresence.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ export function DevPresenceProvider({ children, enabled = true }: DevPresencePro
4242

4343
// Only subscribe to event source if enabled is true
4444
const streamedEvents = useEventSource(
45-
`/resources/orgs/${organization.slug}/projects/${project.slug}/dev/presence`,
45+
`/resources/orgs/${organization.slug}/projects/${project.slug}/env/${environment.slug}/presence`,
4646
{
4747
event: "presence",
4848
disabled: !enabled,

‎apps/webapp/app/components/environments/EnvironmentLabel.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -178,7 +178,7 @@ export function environmentFullTitle(environment: Environment) {
178178
}
179179
}
180180

181-
export function environmentTextClassName(environment: Environment) {
181+
export function environmentTextClassName(environment: { type: Environment["type"] }) {
182182
switch (environment.type) {
183183
case "PRODUCTION":
184184
return "text-prod";

‎apps/webapp/app/components/navigation/EnvironmentSelector.tsx‎

Lines changed: 30 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { ChevronRightIcon, Cog8ToothIcon } from "@heroicons/react/20/solid";
2+
import { DEFAULT_DEV_BRANCH } from "@trigger.dev/core/v3/utils/gitBranch";
23
import { DropdownIcon } from "~/assets/icons/DropdownIcon";
34
import { useNavigation } from "@remix-run/react";
45
import { useEffect, useRef, useState } from "react";
@@ -9,8 +10,8 @@ import { useFeatures } from "~/hooks/useFeatures";
910
import { useOrganization, type MatchedOrganization } from "~/hooks/useOrganizations";
1011
import { useProject } from "~/hooks/useProject";
1112
import { cn } from "~/utils/cn";
12-
import { branchesPath, docsPath, v3BillingPath } from "~/utils/pathBuilder";
13-
import { EnvironmentCombo, EnvironmentIcon, EnvironmentLabel, environmentFullTitle } from "../environments/EnvironmentLabel";
13+
import { branchesPath, branchesDevPath, docsPath, v3BillingPath } from "~/utils/pathBuilder";
14+
import { EnvironmentCombo, EnvironmentIcon, EnvironmentLabel, environmentFullTitle, environmentTextClassName } from "../environments/EnvironmentLabel";
1415
import { ButtonContent } from "../primitives/Buttons";
1516
import { Header2 } from "../primitives/Headers";
1617
import { Paragraph } from "../primitives/Paragraph";
@@ -104,18 +105,19 @@ export function EnvironmentSelector({
104105
>
105106
<div className="flex flex-col gap-1 p-1">
106107
{project.environments
107-
.filter((env) => env.branchName === null)
108+
.filter((env) => env.parentEnvironmentId === null)
108109
.map((env) => {
109110
switch (env.isBranchableEnvironment) {
110111
case true: {
111112
const branchEnvironments = project.environments.filter(
112113
(e) => e.parentEnvironmentId === env.id
113114
);
115+
const allBranchEnvironments = env.type === "DEVELOPMENT" ? [env, ...branchEnvironments] : branchEnvironments;
114116
return (
115117
<Branches
116118
key={env.id}
117119
parentEnvironment={env}
118-
branchEnvironments={branchEnvironments}
120+
branchEnvironments={allBranchEnvironments}
119121
currentEnvironment={environment}
120122
/>
121123
);
@@ -223,11 +225,13 @@ function Branches({
223225
branchEnvironments.length === 0
224226
? "no-branches"
225227
: activeBranches.length === 0
226-
? "no-active-branches"
227-
: "has-branches";
228+
? "no-active-branches"
229+
: "has-branches";
228230

229231
const currentBranchIsArchived = environment.archivedAt !== null;
230232

233+
const envTextClassName = environmentTextClassName(parentEnvironment);
234+
231235
return (
232236
<Popover onOpenChange={(open) => setMenuOpen(open)} open={isMenuOpen}>
233237
<div onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} className="flex">
@@ -260,11 +264,11 @@ function Branches({
260264
to={urlForEnvironment(environment)}
261265
title={
262266
<>
263-
<span className="block w-full text-preview">{environment.branchName}</span>
267+
<span className={cn("block w-full", envTextClassName)}>{environment.branchName}</span>
264268
<Badge variant="extra-small">Archived</Badge>
265269
</>
266270
}
267-
icon={<BranchEnvironmentIconSmall className="size-4 shrink-0 text-preview" />}
271+
icon={<BranchEnvironmentIconSmall className={cn("size-4 shrink-0", envTextClassName)} />}
268272
isSelected={environment.id === currentEnvironment.id}
269273
/>
270274
)}
@@ -276,16 +280,16 @@ function Branches({
276280
<PopoverMenuItem
277281
key={env.id}
278282
to={urlForEnvironment(env)}
279-
title={<span className="block w-full text-preview">{env.branchName}</span>}
280-
icon={<BranchEnvironmentIconSmall className="size-4 shrink-0 text-preview" />}
283+
title={<span className={cn("block w-full", envTextClassName)}>{env.branchName ?? DEFAULT_DEV_BRANCH}</span>}
284+
icon={<BranchEnvironmentIconSmall className={cn("size-4 shrink-0", envTextClassName)} />}
281285
isSelected={env.id === currentEnvironment.id}
282286
/>
283287
))}
284288
</>
285289
) : state === "no-branches" ? (
286290
<div className="flex max-w-sm flex-col gap-1 p-2">
287291
<div className="flex items-center gap-1">
288-
<BranchEnvironmentIconSmall className="size-4 text-preview" />
292+
<BranchEnvironmentIconSmall className={cn("size-4", envTextClassName)} />
289293
<Header2>Create your first branch</Header2>
290294
</div>
291295
<Paragraph spacing variant="small">
@@ -305,12 +309,21 @@ function Branches({
305309
)}
306310
</div>
307311
<div className="border-t border-charcoal-700 p-1">
308-
<PopoverMenuItem
309-
to={branchesPath(organization, project, environment)}
310-
title="Manage branches"
311-
icon={<Cog8ToothIcon className="size-4 text-text-dimmed" />}
312-
leadingIconClassName="text-text-dimmed"
313-
/>
312+
{parentEnvironment.type === "DEVELOPMENT" ? (
313+
<PopoverMenuItem
314+
to={branchesDevPath(organization, project, environment)}
315+
title="Manage dev branches"
316+
icon={<Cog8ToothIcon className="size-4 text-text-dimmed" />}
317+
leadingIconClassName="text-text-dimmed"
318+
/>
319+
) : (
320+
<PopoverMenuItem
321+
to={branchesPath(organization, project, environment)}
322+
title="Manage preview branches"
323+
icon={<Cog8ToothIcon className="size-4 text-text-dimmed" />}
324+
leadingIconClassName="text-text-dimmed"
325+
/>
326+
)}
314327
</div>
315328
</PopoverContent>
316329
</div>

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

Lines changed: 38 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,31 @@ export const BranchesOptions = z.object({
8888
page: z.preprocess((val) => Number(val), z.number()).optional(),
8989
});
9090

91+
export const CreateBranchOptions = z.object({
92+
projectId: z.string(),
93+
env: z.enum(["preview", "development"]),
94+
branchName: z.string().min(1),
95+
git: GitMeta.optional(),
96+
});
97+
98+
export const schema = CreateBranchOptions.and(
99+
z.object({
100+
failurePath: z.string(),
101+
})
102+
);
103+
104+
const PurchaseSchema = z.discriminatedUnion("action", [
105+
z.object({
106+
action: z.literal("purchase"),
107+
amount: z.coerce.number().int("Must be a whole number").min(0, "Amount must be 0 or more"),
108+
}),
109+
z.object({
110+
action: z.literal("quota-increase"),
111+
amount: z.coerce.number().int("Must be a whole number").min(1, "Amount must be greater than 0"),
112+
}),
113+
]);
114+
115+
91116
export const loader = async ({ request, params }: LoaderFunctionArgs) => {
92117
const userId = await requireUserId(request);
93118
const { projectParam } = ProjectParamSchema.parse(params);
@@ -101,6 +126,7 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
101126
const result = await presenter.call({
102127
userId,
103128
projectSlug: projectParam,
129+
env: "preview",
104130
...options,
105131
});
106132

@@ -114,31 +140,6 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
114140
}
115141
};
116142

117-
export const CreateBranchOptions = z.object({
118-
parentEnvironmentId: z.string(),
119-
branchName: z.string().min(1),
120-
git: GitMeta.optional(),
121-
});
122-
123-
export type CreateBranchOptions = z.infer<typeof CreateBranchOptions>;
124-
125-
export const schema = CreateBranchOptions.and(
126-
z.object({
127-
failurePath: z.string(),
128-
})
129-
);
130-
131-
const PurchaseSchema = z.discriminatedUnion("action", [
132-
z.object({
133-
action: z.literal("purchase"),
134-
amount: z.coerce.number().int("Must be a whole number").min(0, "Amount must be 0 or more"),
135-
}),
136-
z.object({
137-
action: z.literal("quota-increase"),
138-
amount: z.coerce.number().int("Must be a whole number").min(1, "Amount must be greater than 0"),
139-
}),
140-
]);
141-
142143
export async function action({ request, params }: ActionFunctionArgs) {
143144
const userId = await requireUserId(request);
144145

@@ -328,7 +329,7 @@ export default function Page() {
328329
New branch…
329330
</Button>
330331
}
331-
parentEnvironment={branchableEnvironment}
332+
env="preview"
332333
/>
333334
)}
334335
</PageAccessories>
@@ -338,7 +339,7 @@ export default function Page() {
338339
{!hasBranches ? (
339340
<MainCenteredContainer className="max-w-md">
340341
<BranchesNoBranches
341-
parentEnvironment={branchableEnvironment}
342+
envType="preview"
342343
limits={limits}
343344
canUpgrade={canUpgrade ?? false}
344345
showSelfServe={showSelfServe}
@@ -924,17 +925,18 @@ function updateBranchState({
924925

925926
export function NewBranchPanel({
926927
button,
927-
parentEnvironment,
928+
env,
928929
}: {
929930
button: React.ReactNode;
930-
parentEnvironment: { id: string };
931+
env: "preview" | "development";
931932
}) {
933+
const project = useProject();
932934
const lastSubmission = useActionData<typeof action>();
933935
const location = useLocation();
934936
const [searchParams, setSearchParams] = useSearchParams();
935937
const [isOpen, setIsOpen] = useState(false);
936938

937-
const [form, { parentEnvironmentId, branchName, failurePath }] = useForm({
939+
const [form, { projectId, env: envField, branchName, failurePath }] = useForm({
938940
id: "create-branch",
939941
lastSubmission: lastSubmission as any,
940942
onValidate({ formData }) {
@@ -962,8 +964,12 @@ export function NewBranchPanel({
962964
<Form method="post" {...form.props} className="w-full">
963965
<Fieldset className="max-w-full gap-y-3">
964966
<input
965-
value={parentEnvironment.id}
966-
{...conform.input(parentEnvironmentId, { type: "hidden" })}
967+
value={project.id}
968+
{...conform.input(projectId, { type: "hidden" })}
969+
/>
970+
<input
971+
value={env}
972+
{...conform.input(envField, { type: "hidden" })}
967973
/>
968974
<input
969975
value={location.pathname}

0 commit comments

Comments
 (0)