feat: cloud acl

Author: jog1t

frontend/package.json

@@ -58,7 +58,7 @@
 		"@radix-ui/react-toggle-group": "^1.1.11",
 		"@radix-ui/react-tooltip": "^1.2.8",
 		"@radix-ui/react-visually-hidden": "^1.2.3",
-		"@rivet-gg/cloud": "file:vendor/rivet-cloud.tgz",
+		"@rivet-gg/cloud": "https://pkg.pr.new/rivet-dev/cloud/@rivet-gg/cloud@7090780",
 		"@rivet-gg/icons": "workspace:*",
 		"rivetkit": "*",
 		"@rivetkit/engine-api-full": "workspace:*",

frontend/src/app/data-providers/cloud-data-provider.tsx

@@ -3,6 +3,7 @@ import { type Rivet, RivetClient } from "@rivet-gg/cloud";
 import { type FetchFunction, fetcher } from "@rivetkit/engine-api-full/core";
 import { infiniteQueryOptions, queryOptions } from "@tanstack/react-query";
 import { cloudEnv } from "@/lib/env";
+import { queryClient } from "@/queries/global";
 import { RECORDS_PER_PAGE } from "./default-data-provider";
 import {
 	type CreateNamespace,
@@ -209,8 +210,7 @@ export const createOrganizationContext = ({
 				}) => {
 					const response = await client.projects.create({
 						displayName: data.displayName,
-						name: data.nameId,
-						organizationId: organization,
+						org: organization,
 					});
 
 					return response;
@@ -241,7 +241,6 @@ export const createProjectContext = ({
 				mutationKey: ["namespaces"],
 				mutationFn: async (data: CreateNamespace) => {
 					const response = await client.namespaces.create(project, {
-						name: data.name,
 						displayName: data.displayName,
 						org: organization,
 					});
@@ -304,20 +303,37 @@ export const createProjectContext = ({
 				},
 			};
 		},
+		accessTokenQueryOptions({ namespace }: { namespace: string }) {
+			return queryOptions({
+				staleTime: 15 * 60 * 1000, // 15 minutes
+				gcTime: 15 * 60 * 1000, // 15 minutes
+				queryKey: [
+					{ organization, project, namespace },
+					"access-token",
+				],
+				queryFn: async ({ signal: abortSignal }) => {
+					const response = await client.namespaces.createAccessToken(
+						project,
+						namespace,
+						{ org: organization },
+						{ abortSignal },
+					);
+					return response;
+				},
+			});
+		},
 	};
 };
 
 export const createNamespaceContext = ({
 	namespace,
 	engineNamespaceName,
 	engineNamespaceId,
-	engineToken,
 	...parent
 }: {
 	namespace: string;
 	engineNamespaceName: string;
 	engineNamespaceId: string;
-	engineToken?: (() => string) | string;
 } & ReturnType<typeof createProjectContext> &
 	ReturnType<typeof createOrganizationContext> &
 	ReturnType<typeof createGlobalContext>) => {
@@ -327,7 +343,13 @@ export const createNamespaceContext = ({
 			namespace: engineNamespaceName,
 			namespaceId: engineNamespaceId,
 			client: createEngineClient(cloudEnv().VITE_APP_CLOUD_ENGINE_URL, {
-				token: engineToken,
+				token: async () => {
+					const response = await queryClient.fetchQuery(
+						parent.accessTokenQueryOptions({ namespace }),
+					);
+
+					return response.token;
+				},
 			}),
 		}),
 		namespaceQueryOptions() {

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

@@ -16,9 +16,10 @@ import {
 	RECORDS_PER_PAGE,
 } from "./default-data-provider";
 
+const mightRequireAuth = __APP_TYPE__ === "engine";
+
 export type CreateNamespace = {
 	displayName: string;
-	name?: string;
 };
 
 export type Namespace = {
@@ -30,7 +31,7 @@ export type Namespace = {
 
 export function createClient(
 	baseUrl = engineEnv().VITE_APP_API_URL,
-	opts: { token: (() => string) | string },
+	opts: { token: (() => string) | string | (() => Promise<string>) },
 ) {
 	return new RivetClient({
 		baseUrl: () => baseUrl,
@@ -87,7 +88,7 @@ export const createGlobalContext = (opts: {
 				mutationFn: async (data: CreateNamespace) => {
 					const response = await client.namespaces.create({
 						displayName: data.displayName,
-						name: data.name || convertStringToId(data.displayName),
+						name: convertStringToId(data.displayName),
 					});
 
 					return {
@@ -132,7 +133,7 @@ export const createNamespaceContext = ({
 				retry: shouldRetryAllExpect403,
 				throwOnError: noThrow,
 				meta: {
-					mightRequireAuth: true,
+					mightRequireAuth,
 				},
 			});
 		},
@@ -157,7 +158,7 @@ export const createNamespaceContext = ({
 				retry: shouldRetryAllExpect403,
 				throwOnError: noThrow,
 				meta: {
-					mightRequireAuth: true,
+					mightRequireAuth,
 				},
 			});
 		},
@@ -186,7 +187,7 @@ export const createNamespaceContext = ({
 				retry: shouldRetryAllExpect403,
 				throwOnError: noThrow,
 				meta: {
-					mightRequireAuth: true,
+					mightRequireAuth,
 				},
 			});
 		},
@@ -213,7 +214,7 @@ export const createNamespaceContext = ({
 				retry: shouldRetryAllExpect403,
 				throwOnError: noThrow,
 				meta: {
-					mightRequireAuth: true,
+					mightRequireAuth,
 				},
 			});
 		},
@@ -288,7 +289,7 @@ export const createNamespaceContext = ({
 				retry: shouldRetryAllExpect403,
 				throwOnError: noThrow,
 				meta: {
-					mightRequireAuth: true,
+					mightRequireAuth,
 				},
 			});
 		},
@@ -329,7 +330,7 @@ export const createNamespaceContext = ({
 				retry: shouldRetryAllExpect403,
 				throwOnError: noThrow,
 				meta: {
-					mightRequireAuth: true,
+					mightRequireAuth,
 				},
 			});
 		},
@@ -353,7 +354,7 @@ export const createNamespaceContext = ({
 				throwOnError: noThrow,
 				retry: shouldRetryAllExpect403,
 				meta: {
-					mightRequireAuth: true,
+					mightRequireAuth,
 				},
 			};
 		},
@@ -363,7 +364,7 @@ export const createNamespaceContext = ({
 				throwOnError: noThrow,
 				retry: shouldRetryAllExpect403,
 				meta: {
-					mightRequireAuth: true,
+					mightRequireAuth,
 				},
 				mutationFn: async () => {
 					await client.actorsDelete(actorId);
@@ -374,14 +375,14 @@ export const createNamespaceContext = ({
 
 	return {
 		...dataProvider,
-		runnersQueryOptions(opts: { namespace: string }) {
+		runnersQueryOptions() {
 			return infiniteQueryOptions({
-				queryKey: [opts.namespace, "runners"],
+				queryKey: [{ namespace }, "runners"],
 				initialPageParam: undefined as string | undefined,
 				queryFn: async ({ pageParam, signal: abortSignal }) => {
 					const data = await client.runners.list(
 						{
-							namespace: opts.namespace,
+							namespace,
 							cursor: pageParam ?? undefined,
 							limit: RECORDS_PER_PAGE,
 						},
@@ -398,7 +399,7 @@ export const createNamespaceContext = ({
 				select: (data) => data.pages.flatMap((page) => page.runners),
 				retry: shouldRetryAllExpect403,
 				meta: {
-					mightRequireAuth: true,
+					mightRequireAuth,
 				},
 			});
 		},
@@ -429,7 +430,7 @@ export const createNamespaceContext = ({
 				retry: shouldRetryAllExpect403,
 				throwOnError: noThrow,
 				meta: {
-					mightRequireAuth: true,
+					mightRequireAuth,
 				},
 			});
 		},
@@ -456,7 +457,7 @@ export const createNamespaceContext = ({
 				throwOnError: noThrow,
 				retry: shouldRetryAllExpect403,
 				meta: {
-					mightRequireAuth: true,
+					mightRequireAuth,
 				},
 			});
 		},
@@ -481,7 +482,7 @@ export const createNamespaceContext = ({
 				},
 				retry: shouldRetryAllExpect403,
 				meta: {
-					mightRequireAuth: true,
+					mightRequireAuth,
 				},
 			});
 		},
@@ -506,6 +507,10 @@ export const createNamespaceContext = ({
 					});
 					return response;
 				},
+				retry: shouldRetryAllExpect403,
+				meta: {
+					mightRequireAuth,
+				},
 			};
 		},
 		runnerConfigsQueryOptions() {
@@ -538,6 +543,12 @@ export const createNamespaceContext = ({
 					}
 					return lastPage.pagination.cursor;
 				},
+
+				retryDelay: 50_000,
+				retry: shouldRetryAllExpect403,
+				meta: {
+					mightRequireAuth,
+				},
 			});
 		},
 	};

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

@@ -16,6 +16,11 @@ import {
 	Input,
 	Label,
 	ScrollArea,
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
 } from "@/components";
 import { useCloudDataProvider } from "@/components/actors";
 
@@ -26,6 +31,7 @@ export const formSchema = z.object({
 		.refine((value) => value.trim() !== "" && value.trim() === value, {
 			message: "Name cannot be empty or contain whitespaces",
 		}),
+	plan: z.string(),
 	endpoint: z.string().url(),
 });
 
@@ -61,6 +67,42 @@ export const Name = ({ className }: { className?: string }) => {
 	);
 };
 
+export const Plan = ({ className }: { className?: string }) => {
+	const { control } = useFormContext<FormValues>();
+	return (
+		<FormField
+			control={control}
+			name="plan"
+			render={({ field }) => (
+				<FormItem className={className}>
+					<FormLabel className="col-span-1">Plan</FormLabel>
+					<FormControl className="row-start-2">
+						<Select
+							onValueChange={field.onChange}
+							value={field.value}
+						>
+							<SelectTrigger
+								variant="ghost"
+								className="h-full pr-2 rounded-none"
+							>
+								<SelectValue placeholder="Select table or view..." />
+							</SelectTrigger>
+							<SelectContent>
+								<SelectItem value="hobby">Hobby</SelectItem>
+								<SelectItem value="pro">Pro</SelectItem>
+								<SelectItem value="enterprise">
+									Enterprise
+								</SelectItem>
+							</SelectContent>
+						</Select>
+					</FormControl>
+					<FormMessage className="col-span-1" />
+				</FormItem>
+			)}
+		/>
+	);
+};
+
 export const Endpoint = ({ className }: { className?: string }) => {
 	const { control } = useFormContext<FormValues>();
 	return (

frontend/src/app/layout.tsx

@@ -397,12 +397,12 @@ const Subnav = () => {
 		<div className="flex gap-1.5 flex-col">
 			{__APP_TYPE__ === "engine" ? (
 				<HeaderLink
-					to="/ns/$namespace/runners"
+					to="/ns/$namespace/connect"
 					className="font-normal"
 					params={nsMatch}
-					icon={faServer}
+					icon={faBolt}
 				>
-					Runners
+					Connect
 				</HeaderLink>
 			) : null}
 			<div className="w-full">

frontend/src/queries/utils.ts

@@ -3,8 +3,8 @@ import type { Query } from "@tanstack/react-query";
 export const shouldRetryAllExpect403 = (failureCount: number, error: Error) => {
 	if (error && "statusCode" in error) {
 		if (error.statusCode === 403) {
-			// Don't retry on auth errors
-			return false;
+			// Don't retry on auth errors, when app is not engine
+			return __APP_TYPE__ !== "engine";
 		}
 	}