Skip to content

Commit ca4eed0

Browse files
NathanFlurryNathanFlurry
committed
chore(frontend): cloud hotfix (#3222)
1 parent 2ef8f3f commit ca4eed0

25 files changed

+885
-380
lines changed

‎frontend/src/app/connect.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ export function Connect({
3131
<div className="flex-1 flex flex-col gap-2 mt-4">
3232
<div className="flex flex-row justify-stretch items-center gap-2">
3333
<DocsSheet
34-
path={docsLinks.gettingStarted.node}
34+
path={docsLinks.gettingStarted.js}
3535
title="Node.js & Bun Quickstart"
3636
>
3737
<Button

‎frontend/src/app/data-providers/engine-data-provider.tsx‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -578,7 +578,12 @@ export const createNamespaceContext = ({
578578
variant?: Rivet.RunnerConfigVariant;
579579
}) {
580580
return infiniteQueryOptions({
581-
queryKey: [{ namespace }, "runners", "configs", opts],
581+
queryKey: [
582+
{ namespace },
583+
"runners",
584+
"configs",
585+
{ variant: opts?.variant },
586+
],
582587
initialPageParam: undefined as string | undefined,
583588
queryFn: async ({ signal: abortSignal, pageParam }) => {
584589
const response = await client.runnerConfigs.list(
@@ -621,7 +626,12 @@ export const createNamespaceContext = ({
621626
variant?: Rivet.RunnerConfigVariant;
622627
}) {
623628
return queryOptions({
624-
queryKey: [{ namespace }, "runners", "config", opts],
629+
queryKey: [
630+
{ namespace },
631+
"runners",
632+
"config",
633+
{ name: opts.name, variant: opts.variant },
634+
],
625635
enabled: !!opts.name,
626636
queryFn: async ({ signal: abortSignal }) => {
627637
const response = await client.runnerConfigs.list(

‎frontend/src/app/dialogs/connect-manual-serverfull-frame.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -185,8 +185,8 @@ export function EnvVariablesStep() {
185185
<p>Value</p>
186186
</Label>
187187
<RivetEndpointEnv />
188-
<RivetTokenEnv />
189188
<RivetNamespaceEnv />
189+
<RivetTokenEnv />
190190
<RivetRunnerEnv />
191191
</div>
192192
<div className="mt-2 flex justify-end">

‎frontend/src/app/dialogs/connect-manual-serverless-frame.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -117,7 +117,9 @@ function FormStepper({
117117
let existing: Record<string, Rivet.RunnerConfig> = {};
118118
try {
119119
const runnerConfig = await queryClient.fetchQuery(
120-
provider.runnerConfigQueryOptions({name: values.runnerName}),
120+
provider.runnerConfigQueryOptions({
121+
name: values.runnerName,
122+
}),
121123
);
122124
existing = runnerConfig?.datacenters || {};
123125
} catch {
@@ -158,8 +160,8 @@ function FormStepper({
158160
}}
159161
defaultValues={{
160162
runnerName: "default",
161-
slotsPerRunner: 25,
162-
maxRunners: 1000,
163+
slotsPerRunner: 1,
164+
maxRunners: 10000,
163165
minRunners: 1,
164166
runnerMargin: 0,
165167
headers: [],

‎frontend/src/app/dialogs/connect-quick-railway-frame.tsx‎

Lines changed: 186 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,186 @@
1+
import { faRailway, Icon } from "@rivet-gg/icons";
2+
import {
3+
useMutation,
4+
usePrefetchInfiniteQuery,
5+
useSuspenseInfiniteQuery,
6+
} from "@tanstack/react-query";
7+
import confetti from "canvas-confetti";
8+
import z from "zod";
9+
import * as ConnectRailwayForm from "@/app/forms/connect-railway-form";
10+
import {
11+
Accordion,
12+
AccordionContent,
13+
AccordionItem,
14+
AccordionTrigger,
15+
type DialogContentProps,
16+
ExternalLinkCard,
17+
Frame,
18+
} from "@/components";
19+
import { useEngineCompatDataProvider } from "@/components/actors";
20+
import { defineStepper } from "@/components/ui/stepper";
21+
import { queryClient } from "@/queries/global";
22+
import { useRailwayTemplateLink } from "@/utils/use-railway-template-link";
23+
import { StepperForm } from "../forms/stepper-form";
24+
25+
const stepper = defineStepper(
26+
{
27+
id: "step-1",
28+
title: "Deploy to Railway",
29+
assist: false,
30+
next: "Next",
31+
schema: z.object({
32+
runnerName: z.string().min(1, "Runner name is required"),
33+
datacenter: z.string().min(1, "Please select a region"),
34+
}),
35+
},
36+
{
37+
id: "step-2",
38+
title: "Wait for the Runner to connect",
39+
assist: true,
40+
schema: z.object({
41+
success: z.boolean().refine((v) => v === true, {
42+
message: "Runner must be connected to proceed",
43+
}),
44+
}),
45+
next: "Add",
46+
},
47+
);
48+
49+
interface ConnectQuickRailwayFrameContentProps extends DialogContentProps {}
50+
51+
export default function ConnectQuickRailwayFrameContent({
52+
onClose,
53+
}: ConnectQuickRailwayFrameContentProps) {
54+
usePrefetchInfiniteQuery({
55+
...useEngineCompatDataProvider().regionsQueryOptions(),
56+
pages: Infinity,
57+
});
58+
const { data } = useSuspenseInfiniteQuery(
59+
useEngineCompatDataProvider().regionsQueryOptions(),
60+
);
61+
62+
const prefferedRegionForRailway =
63+
data.find((region) => region.name.toLowerCase().includes("us-west"))
64+
?.id ||
65+
data.find((region) => region.name.toLowerCase().includes("us-east"))
66+
?.id ||
67+
data.find((region) => region.name.toLowerCase().includes("ore"))?.id ||
68+
"auto";
69+
70+
return (
71+
<>
72+
<Frame.Header>
73+
<Frame.Title className="gap-2 flex items-center">
74+
<div>
75+
Add <Icon icon={faRailway} className="ml-0.5" /> Railway
76+
</div>
77+
</Frame.Title>
78+
</Frame.Header>
79+
<Frame.Content>
80+
<FormStepper
81+
onClose={onClose}
82+
defaultDatacenter={prefferedRegionForRailway}
83+
/>
84+
</Frame.Content>
85+
</>
86+
);
87+
}
88+
89+
function FormStepper({
90+
onClose,
91+
defaultDatacenter,
92+
}: {
93+
onClose?: () => void;
94+
defaultDatacenter: string;
95+
}) {
96+
const provider = useEngineCompatDataProvider();
97+
const { mutateAsync } = useMutation({
98+
...provider.upsertRunnerConfigMutationOptions(),
99+
onSuccess: async () => {
100+
confetti({
101+
angle: 60,
102+
spread: 55,
103+
origin: { x: 0 },
104+
});
105+
confetti({
106+
angle: 120,
107+
spread: 55,
108+
origin: { x: 1 },
109+
});
110+
111+
await queryClient.invalidateQueries(
112+
provider.runnerConfigsQueryOptions(),
113+
);
114+
onClose?.();
115+
},
116+
});
117+
return (
118+
<StepperForm
119+
{...stepper}
120+
onSubmit={async ({ values }) => {
121+
await mutateAsync({
122+
name: values.runnerName,
123+
config: {
124+
[values.datacenter]: {
125+
normal: {},
126+
metadata: { provider: "railway" },
127+
},
128+
},
129+
});
130+
}}
131+
defaultValues={{
132+
runnerName: "default",
133+
success: true,
134+
datacenter: defaultDatacenter,
135+
}}
136+
content={{
137+
"step-1": () => <Step1 datacenter={defaultDatacenter} />,
138+
"step-2": () => <Step2 />,
139+
}}
140+
/>
141+
);
142+
}
143+
144+
function Step1({ datacenter }: { datacenter: string }) {
145+
return (
146+
<>
147+
<div className="space-y-4">
148+
<p>
149+
Deploy the Rivet Railway template to get started quickly.
150+
</p>
151+
<DeployToRailwayButton datacenter={datacenter} />
152+
</div>
153+
<Accordion type="single" collapsible>
154+
<AccordionItem value="item-1">
155+
<AccordionTrigger className="text-sm">
156+
Advanced Options
157+
</AccordionTrigger>
158+
<AccordionContent className="space-y-4 px-1 pt-2">
159+
<ConnectRailwayForm.RunnerName />
160+
<ConnectRailwayForm.Datacenter />
161+
</AccordionContent>
162+
</AccordionItem>
163+
</Accordion>
164+
</>
165+
);
166+
}
167+
168+
function DeployToRailwayButton({ datacenter }: { datacenter: string }) {
169+
const runnerName = "default";
170+
const url = useRailwayTemplateLink({
171+
runnerName,
172+
datacenter,
173+
});
174+
175+
return (
176+
<ExternalLinkCard
177+
href={url}
178+
icon={faRailway}
179+
title="Deploy Template to Railway"
180+
/>
181+
);
182+
}
183+
184+
function Step2() {
185+
return <ConnectRailwayForm.ConnectionCheck provider="railway" />;
186+
}

‎frontend/src/app/dialogs/connect-quick-vercel-frame.tsx‎

Lines changed: 38 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,13 @@ import {
1212
AccordionItem,
1313
AccordionTrigger,
1414
type DialogContentProps,
15+
ExternalLinkCard,
1516
Frame,
1617
} from "@/components";
1718
import { type Region, useEngineCompatDataProvider } from "@/components/actors";
1819
import { queryClient } from "@/queries/global";
1920
import { StepperForm } from "../forms/stepper-form";
21+
import { VERCEL_SERVERLESS_MAX_DURATION } from "./connect-vercel-frame";
2022
import { EnvVariablesStep } from "./connect-railway-frame";
2123

2224
const { stepper } = ConnectVercelForm;
@@ -84,7 +86,6 @@ function FormStepper({
8486
{...stepper}
8587
content={{
8688
"initial-info": () => <StepInitialInfo />,
87-
"env-vars": () => <StepEnvVars />,
8889
deploy: () => <StepDeploy />,
8990
}}
9091
onSubmit={async ({ values }) => {
@@ -98,10 +99,7 @@ function FormStepper({
9899
maxRunners: values.maxRunners,
99100
slotsPerRunner: values.slotsPerRunner,
100101
runnersMargin: values.runnerMargin,
101-
requestLifespan:
102-
ConnectVercelForm.PLAN_TO_MAX_DURATION[
103-
values.plan
104-
] - 5, // Subtract 5s to ensure we don't hit Vercel's timeout
102+
requestLifespan: VERCEL_SERVERLESS_MAX_DURATION - 5, // Subtract 5s to ensure we don't hit Vercel's timeout
105103
headers: Object.fromEntries(
106104
values.headers.map(([key, value]) => [key, value]),
107105
),
@@ -121,11 +119,10 @@ function FormStepper({
121119
});
122120
}}
123121
defaultValues={{
124-
plan: "hobby",
125122
runnerName: "default",
126-
slotsPerRunner: 25,
123+
slotsPerRunner: 1,
127124
minRunners: 1,
128-
maxRunners: 1000,
125+
maxRunners: 10_000,
129126
runnerMargin: 0,
130127
headers: [],
131128
success: false,
@@ -140,57 +137,49 @@ function FormStepper({
140137
function StepInitialInfo() {
141138
return (
142139
<>
143-
<ConnectVercelForm.Plan />
144-
<Accordion type="single" collapsible>
145-
<AccordionItem value="item-1">
146-
<AccordionTrigger className="text-sm">
147-
Advanced options
148-
</AccordionTrigger>
149-
<AccordionContent className="space-y-4 px-1 pt-2">
150-
<ConnectVercelForm.RunnerName />
151-
<ConnectVercelForm.Datacenters />
152-
<ConnectVercelForm.Headers />
153-
<ConnectVercelForm.SlotsPerRunner />
154-
<ConnectVercelForm.MinRunners />
155-
<ConnectVercelForm.MaxRunners />
156-
<ConnectVercelForm.RunnerMargin />
157-
</AccordionContent>
158-
</AccordionItem>
159-
</Accordion>
160-
</>
161-
);
162-
}
163-
164-
function StepEnvVars() {
165-
return (
166-
<>
167-
<p>
168-
Set the following environment variables in your Vercel project
169-
settings.
170-
</p>
171-
<EnvVariablesStep />
140+
<div className="space-y-4">
141+
<p>
142+
Deploy the Rivet Vercel template to get started quickly.
143+
</p>
144+
<ExternalLinkCard
145+
href="https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Frivet-dev%2Ftemplate-vercel&env=NEXT_PUBLIC_RIVET_ENDPOINT,NEXT_PUBLIC_RIVET_TOKEN,NEXT_PUBLIC_RIVET_NAMESPACE&project-name=rivetkit-vercel&repository-name=rivetkit-vercel"
146+
icon={faVercel}
147+
title="Deploy Template to Vercel"
148+
/>
149+
</div>
150+
<div className="space-y-4">
151+
<p>
152+
Set the following environment variables:
153+
</p>
154+
<EnvVariablesStep />
155+
</div>
172156
</>
173157
);
174158
}
175159

176160
function StepDeploy() {
177161
return (
178162
<>
179-
<p>
180-
<a
181-
href="https://vercel.com/docs/deployments"
182-
target="_blank"
183-
rel="noreferrer"
184-
className=" underline"
185-
>
186-
Deploy your project to Vercel using your preferred method
187-
</a>
188-
. After deployment, return here to add the endpoint.
189-
</p>
190163
<div className="mt-2">
191164
<ConnectVercelForm.Endpoint />
192-
<ConnectVercelForm.ConnectionCheck provider="Vercel" />
165+
<Accordion type="single" collapsible>
166+
<AccordionItem value="item-1">
167+
<AccordionTrigger className="text-sm">
168+
Advanced
169+
</AccordionTrigger>
170+
<AccordionContent className="space-y-4 px-1 pt-2">
171+
<ConnectVercelForm.RunnerName />
172+
<ConnectVercelForm.Datacenters />
173+
<ConnectVercelForm.Headers />
174+
<ConnectVercelForm.SlotsPerRunner />
175+
<ConnectVercelForm.MinRunners />
176+
<ConnectVercelForm.MaxRunners />
177+
<ConnectVercelForm.RunnerMargin />
178+
</AccordionContent>
179+
</AccordionItem>
180+
</Accordion>
193181
</div>
182+
<ConnectVercelForm.ConnectionCheck provider="Vercel" />
194183
</>
195184
);
196185
}

0 commit comments

Comments
 (0)