fix: add region names

Author: jog1t

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

@@ -48,7 +48,7 @@ const stepper = defineStepper(
 	{
 		id: "step-3",
 		title: "Wait for the Runner to connect",
-		assist: false,
+		assist: true,
 		schema: z.object({
 			success: z.boolean().refine((v) => v === true, {
 				message: "Runner must be connected to proceed",
@@ -74,6 +74,8 @@ export default function ConnectRailwayFrameContent({
 	const prefferedRegionForRailway =
 		data.find((region) => region.name.toLowerCase().includes("us-west"))
 			?.id ||
+		data.find((region) => region.name.toLowerCase().includes("us-east"))
+			?.id ||
 		data.find((region) => region.name.toLowerCase().includes("ore"))?.id ||
 		"auto";
 

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

@@ -47,11 +47,6 @@ export default function CreateProjectFrameContent({
 						Add <Icon icon={faVercel} className="ml-0.5" />
 						Vercel
 					</div>
-					<HelpDropdown>
-						<Button variant="ghost" size="icon">
-							<Icon icon={faQuestionCircle} />
-						</Button>
-					</HelpDropdown>
 				</Frame.Title>
 			</Frame.Header>
 			<Frame.Content>

frontend/src/app/forms/connect-railway-form.tsx

@@ -10,6 +10,7 @@ import * as ConnectVercelForm from "@/app/forms/connect-vercel-form";
 import {
 	cn,
 	FormControl,
+	FormDescription,
 	FormField,
 	FormItem,
 	FormLabel,
@@ -30,10 +31,15 @@ export const Datacenter = function Datacenter() {
 					<FormLabel>Datacenter</FormLabel>
 					<FormControl>
 						<RegionSelect
+							showAuto={false}
 							onValueChange={field.onChange}
 							value={field.value}
 						/>
 					</FormControl>
+					<FormDescription>
+						You can find the region your Railway runners are running
+						in under <i>Settings &gt; Deploy</i>
+					</FormDescription>
 					<FormMessage />
 				</FormItem>
 			)}

frontend/src/app/forms/connect-vercel-form.tsx

@@ -81,7 +81,7 @@ export const stepper = defineStepper(
 	{
 		id: "step-3",
 		title: "Deploy to Vercel",
-		assist: false,
+		assist: true,
 		next: "Done",
 		schema: z.object({
 			success: z.boolean().refine((val) => val, "Connection failed"),

frontend/src/app/runner-config-table.tsx

@@ -1,5 +1,5 @@
+import { faRailway, faVercel, Icon } from "@rivet-gg/icons";
 import type { Rivet } from "@rivetkit/engine-api-full";
-import { formatRelative } from "date-fns";
 import {
 	Button,
 	DiscreteCopyButton,
@@ -11,15 +11,14 @@ import {
 	TableHeader,
 	TableRow,
 	Text,
-	WithTooltip,
 } from "@/components";
 
 interface RunnerConfigsTableProps {
 	isLoading?: boolean;
 	isError?: boolean;
 	hasNextPage?: boolean;
 	fetchNextPage?: () => void;
-	configs: Rivet.RunnerConfig[];
+	configs: [string, Rivet.RunnerConfig][];
 }
 
 export function RunnerConfigsTable({
@@ -70,8 +69,8 @@ export function RunnerConfigsTable({
 						<RowSkeleton />
 					</>
 				) : null}
-				{configs?.map((config) => (
-					<Row {...config} key={config.metadata} />
+				{configs?.map(([id, config]) => (
+					<Row name={id} {...config} key={id} />
 				))}
 
 				{!isLoading && hasNextPage ? (
@@ -112,34 +111,43 @@ function RowSkeleton() {
 	);
 }
 
-function Row(config: Rivet.RunnerConfig) {
+function Row({ name, ...config }: { name: string } & Rivet.RunnerConfig) {
 	return (
-		<TableRow key={runner.runnerId}>
+		<TableRow>
 			<TableCell>
-				<WithTooltip
-					content={config}
-					trigger={
-						<DiscreteCopyButton value={runner.runnerId}>
-							{runner.runnerId.slice(0, 8)}
-						</DiscreteCopyButton>
-					}
-				/>
+				<DiscreteCopyButton value={name}>{name}</DiscreteCopyButton>
 			</TableCell>
 			<TableCell>
-				{config.metadata &&
-				typeof config.metadata === "object" &&
-				"provider" in config.metadata
-					? (config.metadata.provider as string)
-					: "unknown"}
+				<Provider metadata={config.metadata} />
 			</TableCell>
 			<TableCell>-</TableCell>
-			<TableCell>{runner.datacenter}</TableCell>
-
-			<TableCell>
-				{runner.remainingSlots}/{runner.totalSlots}
-			</TableCell>
+			<TableCell>{config.serverless?.url}</TableCell>
 
-			<TableCell>{formatRelative(runner.createTs, new Date())}</TableCell>
+			<TableCell></TableCell>
 		</TableRow>
 	);
 }
+
+function Provider({ metadata }: { metadata: unknown }) {
+	if (!metadata || typeof metadata !== "object") {
+		return <span>Unknown</span>;
+	}
+	if ("provider" in metadata && typeof metadata.provider === "string") {
+		if (metadata.provider === "vercel") {
+			return (
+				<>
+					<Icon icon={faVercel} className="mr-1" /> Vercel
+				</>
+			);
+		}
+		if (metadata.provider === "railway") {
+			return (
+				<>
+					<Icon icon={faRailway} className="mr-1" /> Railway
+				</>
+			);
+		}
+		return <span>{metadata.provider || "-"}</span>;
+	}
+	return <span>Unknown</span>;
+}

frontend/src/components/actors/region-select.tsx

@@ -6,9 +6,14 @@ import { useDataProvider } from "./data-provider";
 interface RegionSelectProps {
 	onValueChange: (value: string) => void;
 	value: string;
+	showAuto?: boolean;
 }
 
-export function RegionSelect({ onValueChange, value }: RegionSelectProps) {
+export function RegionSelect({
+	onValueChange,
+	value,
+	showAuto = true,
+}: RegionSelectProps) {
 	const {
 		data = [],
 		fetchNextPage,
@@ -17,11 +22,15 @@ export function RegionSelect({ onValueChange, value }: RegionSelectProps) {
 	} = useInfiniteQuery(useDataProvider().regionsQueryOptions());
 
 	const regions = [
-		{
-			label: <span>Automatic (Recommended)</span>,
-			value: "auto",
-			region: { id: "auto", name: "Automatic" },
-		},
+		...(showAuto
+			? [
+					{
+						label: <span>Automatic (Recommended)</span>,
+						value: "auto",
+						region: { id: "auto", name: "Automatic" },
+					},
+				]
+			: []),
 		...data.map((region) => {
 			return {
 				label:

frontend/src/components/matchmaker/lobby-region.tsx

@@ -48,6 +48,10 @@ export const REGION_ICON: Record<string, string | IconProp> = {
 	gru: "🇧🇷", // Sao Paulo
 	bom: "🇮🇳", // Mumbai
 	sin: "🇸🇬", // Singapore
+	"eu-central-1": "🇩🇪", // Frankfurt
+	"us-east-1": "🇺🇸", // Northern Virginia
+	"us-west-1": "🇺🇸", // Oregon
+	"ap-southeast-1": "🇸🇬", // Singapore
 };
 
 export const REGION_LABEL: Record<string, string> = {
@@ -96,6 +100,10 @@ export const REGION_LABEL: Record<string, string> = {
 	gru: "Sao Paulo",
 	bom: "Mumbai, India",
 	sin: "Singapore",
+	"eu-central-1": "Frankfurt, Germany",
+	"us-east-1": "Northern Virginia, USA",
+	"us-west-1": "Oregon, USA",
+	"ap-southeast-1": "Singapore",
 };
 
 export function getRegionKey(regionNameId: string | undefined) {

frontend/src/lib/auth.ts

@@ -20,6 +20,7 @@ export const redirectToOrganization = async (clerk: Clerk) => {
 		const { data: orgs } = await clerk.user.getOrganizationMemberships();
 
 		if (orgs.length > 0) {
+			await clerk.setActive({ organization: orgs[0].organization.id });
 			throw redirect({
 				to: "/orgs/$organization",
 				params: { organization: orgs[0].organization.id },

frontend/src/routes/_context/_cloud/orgs.$organization.tsx

@@ -4,17 +4,22 @@ import { createOrganizationContext } from "@/app/data-providers/cloud-data-provi
 
 export const Route = createFileRoute("/_context/_cloud/orgs/$organization")({
 	component: RouteComponent,
-	beforeLoad: ({ context, params }) => {
-		return match(context)
-			.with({ __type: "cloud" }, (context) => ({
-				dataProvider: {
-					...context.dataProvider,
-					...createOrganizationContext({
+	beforeLoad: async ({ context, params }) => {
+		return await match(context)
+			.with({ __type: "cloud" }, async (context) => {
+				await context.clerk.setActive({
+					organization: params.organization,
+				});
+				return {
+					dataProvider: {
 						...context.dataProvider,
-						organization: params.organization,
-					}),
-				},
-			}))
+						...createOrganizationContext({
+							...context.dataProvider,
+							organization: params.organization,
+						}),
+					},
+				};
+			})
 			.otherwise(() => {
 				throw new Error("Invalid context type for this route");
 			});

frontend/src/routes/_context/_cloud/orgs.$organization/projects.$project/ns.$namespace/connect.tsx

@@ -42,9 +42,9 @@ export const Route = createFileRoute(
 });
 
 export function RouteComponent() {
-	const { data: runnerNamesCount, isLoading } = useInfiniteQuery({
-		...useEngineCompatDataProvider().runnerNamesQueryOptions(),
-		select: (data) => data.pages[0].names?.length,
+	const { data: runnerConfigsCount, isLoading } = useInfiniteQuery({
+		...useEngineCompatDataProvider().runnerConfigsQueryOptions(),
+		select: (data) => Object.values(data.pages[0].runnerConfigs).length,
 		refetchInterval: 5000,
 	});
 
@@ -81,7 +81,7 @@ export function RouteComponent() {
 						<Skeleton className="min-w-48 h-auto min-h-28 rounded-md" />
 					</div>
 				</div>
-			) : runnerNamesCount === 0 ? (
+			) : runnerConfigsCount === 0 ? (
 				<div className="p-4 px-6 max-w-5xl">
 					<H3>Add Provider</H3>
 					<div className="grid grid-cols-3 gap-2 my-4">