fix(fe): redirect engine users to connect page when there's no actors

Author: jog1t

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

@@ -1,13 +1,16 @@
+import type { QueryClient } from "@tanstack/react-query";
 import {
 	CatchBoundary,
 	createFileRoute,
-	type InferAllContext,
 	notFound,
 	redirect,
 } from "@tanstack/react-router";
 import { Actors } from "@/app/actors";
 import { BuildPrefiller } from "@/app/build-prefiller";
-import { useDataProvider } from "@/components/actors";
+import {
+	useDataProvider,
+	type useEngineCompatDataProvider,
+} from "@/components/actors";
 
 export const Route = createFileRoute(
 	"/_context/_cloud/orgs/$organization/projects/$project/ns/$namespace/",
@@ -18,15 +21,18 @@ export const Route = createFileRoute(
 			throw notFound();
 		}
 
-		const isVisible = await shouldDisplayActors(context);
+		const shouldDisplay = await shouldDisplayActors(context);
 
-		if (!isVisible) {
+		if (!shouldDisplay) {
 			throw redirect({ from: Route.to, replace: true, to: "./connect" });
 		}
 	},
 });
 
-async function shouldDisplayActors(context: InferAllContext<typeof Route>) {
+export async function shouldDisplayActors(context: {
+	queryClient: QueryClient;
+	dataProvider: ReturnType<typeof useEngineCompatDataProvider>;
+}) {
 	try {
 		const infiniteBuilds = await context.queryClient.fetchInfiniteQuery(
 			context.dataProvider.buildsQueryOptions(),
@@ -65,16 +71,14 @@ export function RouteComponent() {
 	}
 
 	return (
-		<>
-			<CatchBoundary getResetKey={() => actorId ?? "no-actor-id"}>
-				<Actors actorId={actorId} />
-				<CatchBoundary
-					getResetKey={() => n?.join(",") ?? "no-build-name"}
-					errorComponent={() => null}
-				>
-					{!n ? <BuildPrefiller /> : null}
-				</CatchBoundary>
+		<CatchBoundary getResetKey={() => actorId ?? "no-actor-id"}>
+			<Actors actorId={actorId} />
+			<CatchBoundary
+				getResetKey={() => n?.join(",") ?? "no-build-name"}
+				errorComponent={() => null}
+			>
+				{!n ? <BuildPrefiller /> : null}
 			</CatchBoundary>
-		</>
+		</CatchBoundary>
 	);
 }

frontend/src/routes/_context/_engine/ns.$namespace/index.tsx

@@ -1,33 +1,40 @@
 import {
 	CatchBoundary,
 	createFileRoute,
+	redirect,
 	useSearch,
 } from "@tanstack/react-router";
 import { Actors } from "@/app/actors";
 import { BuildPrefiller } from "@/app/build-prefiller";
+import { shouldDisplayActors } from "../../_cloud/orgs.$organization/projects.$project/ns.$namespace/index";
 
 export const Route = createFileRoute("/_context/_engine/ns/$namespace/")({
 	component: RouteComponent,
 	beforeLoad: async ({ context }) => {
 		if (context.__type !== "engine") {
 			throw new Error("Invalid context type for this route");
 		}
+
+		const shouldDisplay = await shouldDisplayActors(context);
+
+		if (!shouldDisplay) {
+			throw redirect({ from: Route.to, replace: true, to: "./connect" });
+		}
 	},
 });
 
 export function RouteComponent() {
 	const { actorId, n } = useSearch({ from: "/_context" });
 
 	return (
-		<>
+		<CatchBoundary getResetKey={() => actorId ?? "no-actor-id"}>
 			<Actors actorId={actorId} />
-
 			<CatchBoundary
 				getResetKey={() => n?.join(",") ?? "no-build-name"}
 				errorComponent={() => null}
 			>
 				{!n ? <BuildPrefiller /> : null}
 			</CatchBoundary>
-		</>
+		</CatchBoundary>
 	);
 }