Skip to content

Commit e6c0a03

Browse files
matt-aitkenmatt-aitken
committed
The new branch panel closes when a branch is created
1 parent 2c31121 commit e6c0a03

File tree

2 files changed

+85
-63
lines changed

2 files changed

+85
-63
lines changed

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

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -488,6 +488,7 @@ export function BranchesNoBranches({
488488
canUpgrade: boolean;
489489
}) {
490490
const organization = useOrganization();
491+
491492
if (limits.used >= limits.limit) {
492493
return (
493494
<InfoPanel
@@ -523,20 +524,18 @@ export function BranchesNoBranches({
523524
iconClassName="text-preview"
524525
panelClassName="max-w-full"
525526
accessory={
526-
<Dialog>
527-
<DialogTrigger asChild>
527+
<NewBranchPanel
528+
button={
528529
<Button
529530
variant="primary/small"
530531
LeadingIcon={PlusIcon}
531532
leadingIconClassName="text-white"
532533
>
533534
New branch
534535
</Button>
535-
</DialogTrigger>
536-
<DialogContent>
537-
<NewBranchPanel parentEnvironment={parentEnvironment} />
538-
</DialogContent>
539-
</Dialog>
536+
}
537+
parentEnvironment={parentEnvironment}
538+
/>
540539
}
541540
>
542541
<Paragraph spacing variant="small">

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

Lines changed: 79 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,10 @@ import {
99
} from "@heroicons/react/20/solid";
1010
import { BookOpenIcon } from "@heroicons/react/24/solid";
1111
import { DialogClose } from "@radix-ui/react-dialog";
12-
import { Form, useActionData, useSearchParams } from "@remix-run/react";
12+
import { Form, useActionData, useLocation, useSearchParams } from "@remix-run/react";
1313
import { type ActionFunctionArgs, json, type LoaderFunctionArgs } from "@remix-run/server-runtime";
1414
import { GitMeta } from "@trigger.dev/core/v3";
15-
import { useCallback } from "react";
15+
import { useCallback, useEffect, useState } from "react";
1616
import { typedjson, useTypedLoaderData } from "remix-typedjson";
1717
import { z } from "zod";
1818
import { BranchEnvironmentIconSmall } from "~/assets/icons/EnvironmentIcons";
@@ -143,7 +143,7 @@ export async function action({ request }: ActionFunctionArgs) {
143143
}
144144

145145
return redirectWithSuccessMessage(
146-
branchesPath(result.organization, result.project, result.branch),
146+
`${branchesPath(result.organization, result.project, result.branch)}?dialogClosed=true`,
147147
request,
148148
`Branch "${result.branch.branchName}" created`
149149
);
@@ -217,8 +217,8 @@ export default function Page() {
217217
{limits.isAtLimit ? (
218218
<UpgradePanel limits={limits} canUpgrade={canUpgrade ?? false} />
219219
) : (
220-
<Dialog>
221-
<DialogTrigger asChild>
220+
<NewBranchPanel
221+
button={
222222
<Button
223223
variant="primary/small"
224224
shortcut={{ key: "n" }}
@@ -229,11 +229,9 @@ export default function Page() {
229229
>
230230
New branch
231231
</Button>
232-
</DialogTrigger>
233-
<DialogContent>
234-
<NewBranchPanel parentEnvironment={branchableEnvironment} />
235-
</DialogContent>
236-
</Dialog>
232+
}
233+
parentEnvironment={branchableEnvironment}
234+
/>
237235
)}
238236
</PageAccessories>
239237
</NavBar>
@@ -528,8 +526,17 @@ function UpgradePanel({
528526
);
529527
}
530528

531-
export function NewBranchPanel({ parentEnvironment }: { parentEnvironment: { id: string } }) {
529+
export function NewBranchPanel({
530+
button,
531+
parentEnvironment,
532+
}: {
533+
button: React.ReactNode;
534+
parentEnvironment: { id: string };
535+
}) {
532536
const lastSubmission = useActionData<typeof action>();
537+
const location = useLocation();
538+
const [searchParams, setSearchParams] = useSearchParams();
539+
const [isOpen, setIsOpen] = useState(false);
533540

534541
const [form, { parentEnvironmentId, branchName, failurePath }] = useForm({
535542
id: "create-branch",
@@ -540,51 +547,67 @@ export function NewBranchPanel({ parentEnvironment }: { parentEnvironment: { id:
540547
shouldRevalidate: "onInput",
541548
});
542549

550+
useEffect(() => {
551+
if (searchParams.has("dialogClosed")) {
552+
setSearchParams((s) => {
553+
s.delete("dialogClosed");
554+
return s;
555+
});
556+
setIsOpen(false);
557+
}
558+
}, [searchParams, setSearchParams]);
559+
543560
return (
544-
<>
545-
<DialogHeader>New branch</DialogHeader>
546-
<div className="mt-2 flex flex-col gap-4">
547-
<Form method="post" {...form.props} className="w-full">
548-
<Fieldset className="max-w-full gap-y-3">
549-
<input
550-
value={parentEnvironment.id}
551-
{...conform.input(parentEnvironmentId, { type: "hidden" })}
552-
/>
553-
<input value={location.pathname} {...conform.input(failurePath, { type: "hidden" })} />
554-
<InputGroup className="max-w-full">
555-
<Label>Branch name</Label>
556-
<Input {...conform.input(branchName)} />
557-
<Hint>
558-
Must not contain: spaces <InlineCode variant="extra-small">~</InlineCode>{" "}
559-
<InlineCode variant="extra-small">^</InlineCode>{" "}
560-
<InlineCode variant="extra-small">:</InlineCode>{" "}
561-
<InlineCode variant="extra-small">?</InlineCode>{" "}
562-
<InlineCode variant="extra-small">*</InlineCode>{" "}
563-
<InlineCode variant="extra-small">{"["}</InlineCode>{" "}
564-
<InlineCode variant="extra-small">\</InlineCode>{" "}
565-
<InlineCode variant="extra-small">//</InlineCode>{" "}
566-
<InlineCode variant="extra-small">..</InlineCode>{" "}
567-
<InlineCode variant="extra-small">{"@{"}</InlineCode>{" "}
568-
<InlineCode variant="extra-small">.lock</InlineCode>
569-
</Hint>
570-
<FormError id={branchName.errorId}>{branchName.error}</FormError>
571-
</InputGroup>
572-
<FormError>{form.error}</FormError>
573-
<FormButtons
574-
confirmButton={
575-
<Button type="submit" variant="primary/medium">
576-
Create branch
577-
</Button>
578-
}
579-
cancelButton={
580-
<DialogClose asChild>
581-
<Button variant="tertiary/medium">Cancel</Button>
582-
</DialogClose>
583-
}
584-
/>
585-
</Fieldset>
586-
</Form>
587-
</div>
588-
</>
561+
<Dialog open={isOpen} onOpenChange={setIsOpen}>
562+
<DialogTrigger asChild>{button}</DialogTrigger>
563+
<DialogContent>
564+
<DialogHeader>New branch</DialogHeader>
565+
<div className="mt-2 flex flex-col gap-4">
566+
<Form method="post" {...form.props} className="w-full">
567+
<Fieldset className="max-w-full gap-y-3">
568+
<input
569+
value={parentEnvironment.id}
570+
{...conform.input(parentEnvironmentId, { type: "hidden" })}
571+
/>
572+
<input
573+
value={location.pathname}
574+
{...conform.input(failurePath, { type: "hidden" })}
575+
/>
576+
<InputGroup className="max-w-full">
577+
<Label>Branch name</Label>
578+
<Input {...conform.input(branchName)} />
579+
<Hint>
580+
Must not contain: spaces <InlineCode variant="extra-small">~</InlineCode>{" "}
581+
<InlineCode variant="extra-small">^</InlineCode>{" "}
582+
<InlineCode variant="extra-small">:</InlineCode>{" "}
583+
<InlineCode variant="extra-small">?</InlineCode>{" "}
584+
<InlineCode variant="extra-small">*</InlineCode>{" "}
585+
<InlineCode variant="extra-small">{"["}</InlineCode>{" "}
586+
<InlineCode variant="extra-small">\</InlineCode>{" "}
587+
<InlineCode variant="extra-small">//</InlineCode>{" "}
588+
<InlineCode variant="extra-small">..</InlineCode>{" "}
589+
<InlineCode variant="extra-small">{"@{"}</InlineCode>{" "}
590+
<InlineCode variant="extra-small">.lock</InlineCode>
591+
</Hint>
592+
<FormError id={branchName.errorId}>{branchName.error}</FormError>
593+
</InputGroup>
594+
<FormError>{form.error}</FormError>
595+
<FormButtons
596+
confirmButton={
597+
<Button type="submit" variant="primary/medium">
598+
Create branch
599+
</Button>
600+
}
601+
cancelButton={
602+
<DialogClose asChild>
603+
<Button variant="tertiary/medium">Cancel</Button>
604+
</DialogClose>
605+
}
606+
/>
607+
</Fieldset>
608+
</Form>
609+
</div>
610+
</DialogContent>
611+
</Dialog>
589612
);
590613
}

0 commit comments

Comments
 (0)