fix(ui): Use guard components to protect routes

Fix an issue with the UI redirecting to the 403 page before permissions
were loaded by wrapping the corresponding routes with guard components that
have proper handling for the loading state.

Resolves #4509.

Signed-off-by: Johanna Lamppu <johanna.lamppu@doubleopen.org>

Author: lamppu

ui/src/routes/admin/route.tsx

@@ -17,7 +17,7 @@
  * License-Filename: LICENSE
  */
 
-import { createFileRoute, Outlet, redirect } from '@tanstack/react-router';
+import { createFileRoute, Outlet } from '@tanstack/react-router';
 import {
   Blocks,
   Eye,
@@ -28,6 +28,7 @@ import {
   User,
 } from 'lucide-react';
 
+import { RequireSuperuser } from '@/components/authorization';
 import { PageLayout } from '@/components/page-layout';
 import { SidebarNavProps } from '@/components/sidebar';
 
@@ -97,19 +98,14 @@ const Layout = () => {
     },
   ];
   return (
-    <PageLayout sections={sections}>
-      <Outlet />
-    </PageLayout>
+    <RequireSuperuser>
+      <PageLayout sections={sections}>
+        <Outlet />
+      </PageLayout>
+    </RequireSuperuser>
   );
 };
 
 export const Route = createFileRoute('/admin')({
   component: Layout,
-  beforeLoad: ({ context }) => {
-    if (!context.auth.isSuperuser) {
-      throw redirect({
-        to: '/403',
-      });
-    }
-  },
 });

ui/src/routes/organizations/$orgId/infrastructure-services/route.tsx

@@ -17,17 +17,25 @@
  * License-Filename: LICENSE
  */
 
-import { createFileRoute, Outlet, redirect } from '@tanstack/react-router';
+import { createFileRoute, Outlet } from '@tanstack/react-router';
+
+import { RequireOrganizationPermission } from '@/components/authorization';
+
+function OrganizationInfrastructureServicesGuard() {
+  const { orgId } = Route.useParams();
+
+  return (
+    <RequireOrganizationPermission
+      organizationId={Number.parseInt(orgId)}
+      permission='WRITE'
+    >
+      <Outlet />
+    </RequireOrganizationPermission>
+  );
+}
 
 export const Route = createFileRoute(
   '/organizations/$orgId/infrastructure-services'
 )({
-  component: () => <Outlet />,
-  beforeLoad: ({ context }) => {
-    if (!context.permissions.organization?.includes('WRITE')) {
-      throw redirect({
-        to: '/403',
-      });
-    }
-  },
+  component: OrganizationInfrastructureServicesGuard,
 });

ui/src/routes/organizations/$orgId/products/$productId/infrastructure-services/route.tsx

@@ -17,17 +17,25 @@
  * License-Filename: LICENSE
  */
 
-import { createFileRoute, Outlet, redirect } from '@tanstack/react-router';
+import { createFileRoute, Outlet } from '@tanstack/react-router';
+
+import { RequireProductPermission } from '@/components/authorization';
+
+function ProductInfrastructureServicesGuard() {
+  const { productId } = Route.useParams();
+
+  return (
+    <RequireProductPermission
+      productId={Number.parseInt(productId)}
+      permission='WRITE'
+    >
+      <Outlet />
+    </RequireProductPermission>
+  );
+}
 
 export const Route = createFileRoute(
   '/organizations/$orgId/products/$productId/infrastructure-services'
 )({
-  component: () => <Outlet />,
-  beforeLoad: ({ context }) => {
-    if (!context.permissions.product?.includes('WRITE')) {
-      throw redirect({
-        to: '/403',
-      });
-    }
-  },
+  component: ProductInfrastructureServicesGuard,
 });

ui/src/routes/organizations/$orgId/products/$productId/repositories/$repoId/_repo-layout/infrastructure-services/route.tsx

@@ -17,17 +17,25 @@
  * License-Filename: LICENSE
  */
 
-import { createFileRoute, Outlet, redirect } from '@tanstack/react-router';
+import { createFileRoute, Outlet } from '@tanstack/react-router';
+
+import { RequireRepositoryPermission } from '@/components/authorization';
+
+function RepositoryInfrastructureServicesGuard() {
+  const { repoId } = Route.useParams();
+
+  return (
+    <RequireRepositoryPermission
+      repositoryId={Number.parseInt(repoId)}
+      permission='WRITE'
+    >
+      <Outlet />
+    </RequireRepositoryPermission>
+  );
+}
 
 export const Route = createFileRoute(
   '/organizations/$orgId/products/$productId/repositories/$repoId/_repo-layout/infrastructure-services'
 )({
-  component: () => <Outlet />,
-  beforeLoad: ({ context }) => {
-    if (!context.permissions.repository?.includes('WRITE')) {
-      throw redirect({
-        to: '/403',
-      });
-    }
-  },
+  component: RepositoryInfrastructureServicesGuard,
 });

ui/src/routes/organizations/$orgId/products/$productId/repositories/$repoId/_repo-layout/secrets/route.tsx

@@ -17,17 +17,25 @@
  * License-Filename: LICENSE
  */
 
-import { createFileRoute, Outlet, redirect } from '@tanstack/react-router';
+import { createFileRoute, Outlet } from '@tanstack/react-router';
+
+import { RequireRepositoryPermission } from '@/components/authorization';
+
+function RepositorySecretsGuard() {
+  const { repoId } = Route.useParams();
+
+  return (
+    <RequireRepositoryPermission
+      repositoryId={Number.parseInt(repoId)}
+      permission='WRITE_SECRETS'
+    >
+      <Outlet />
+    </RequireRepositoryPermission>
+  );
+}
 
 export const Route = createFileRoute(
   '/organizations/$orgId/products/$productId/repositories/$repoId/_repo-layout/secrets'
 )({
-  component: () => <Outlet />,
-  beforeLoad: ({ context }) => {
-    if (!context.permissions.repository?.includes('WRITE_SECRETS')) {
-      throw redirect({
-        to: '/403',
-      });
-    }
-  },
+  component: RepositorySecretsGuard,
 });

ui/src/routes/organizations/$orgId/products/$productId/repositories/$repoId/_repo-layout/users/route.tsx

@@ -17,15 +17,29 @@
  * License-Filename: LICENSE
  */
 
-import { createFileRoute, Outlet, redirect } from '@tanstack/react-router';
+import { createFileRoute, Outlet } from '@tanstack/react-router';
 
 import { getRepositoryUsersOptions } from '@/api/@tanstack/react-query.gen';
+import { RequireRepositoryPermission } from '@/components/authorization';
 import { paginationSearchParameterSchema } from '@/schemas';
 
+function RepositoryUsersGuard() {
+  const { repoId } = Route.useParams();
+
+  return (
+    <RequireRepositoryPermission
+      repositoryId={Number.parseInt(repoId)}
+      permission='MANAGE_GROUPS'
+    >
+      <Outlet />
+    </RequireRepositoryPermission>
+  );
+}
+
 export const Route = createFileRoute(
   '/organizations/$orgId/products/$productId/repositories/$repoId/_repo-layout/users'
 )({
-  component: () => <Outlet />,
+  component: RepositoryUsersGuard,
 
   // Route’s query string parameters (centralized)
   validateSearch: paginationSearchParameterSchema,
@@ -52,11 +66,4 @@ export const Route = createFileRoute(
       }),
     });
   },
-  beforeLoad: ({ context }) => {
-    if (!context.permissions.repository?.includes('MANAGE_GROUPS')) {
-      throw redirect({
-        to: '/403',
-      });
-    }
-  },
 });

ui/src/routes/organizations/$orgId/products/$productId/secrets/route.tsx

@@ -17,17 +17,25 @@
  * License-Filename: LICENSE
  */
 
-import { createFileRoute, Outlet, redirect } from '@tanstack/react-router';
+import { createFileRoute, Outlet } from '@tanstack/react-router';
+
+import { RequireProductPermission } from '@/components/authorization';
+
+function ProductSecretsGuard() {
+  const { productId } = Route.useParams();
+
+  return (
+    <RequireProductPermission
+      productId={Number.parseInt(productId)}
+      permission='WRITE_SECRETS'
+    >
+      <Outlet />
+    </RequireProductPermission>
+  );
+}
 
 export const Route = createFileRoute(
   '/organizations/$orgId/products/$productId/secrets'
 )({
-  component: () => <Outlet />,
-  beforeLoad: ({ context }) => {
-    if (!context.permissions.product?.includes('WRITE_SECRETS')) {
-      throw redirect({
-        to: '/403',
-      });
-    }
-  },
+  component: ProductSecretsGuard,
 });

ui/src/routes/organizations/$orgId/products/$productId/users/route.tsx

@@ -17,15 +17,29 @@
  * License-Filename: LICENSE
  */
 
-import { createFileRoute, Outlet, redirect } from '@tanstack/react-router';
+import { createFileRoute, Outlet } from '@tanstack/react-router';
 
 import { getProductUsersOptions } from '@/api/@tanstack/react-query.gen';
+import { RequireProductPermission } from '@/components/authorization';
 import { paginationSearchParameterSchema } from '@/schemas';
 
+function ProductUsersGuard() {
+  const { productId } = Route.useParams();
+
+  return (
+    <RequireProductPermission
+      productId={Number.parseInt(productId)}
+      permission='MANAGE_GROUPS'
+    >
+      <Outlet />
+    </RequireProductPermission>
+  );
+}
+
 export const Route = createFileRoute(
   '/organizations/$orgId/products/$productId/users'
 )({
-  component: () => <Outlet />,
+  component: ProductUsersGuard,
 
   // Route’s query string parameters (centralized)
   validateSearch: paginationSearchParameterSchema,
@@ -52,11 +66,4 @@ export const Route = createFileRoute(
       }),
     });
   },
-  beforeLoad: ({ context }) => {
-    if (!context.permissions.product?.includes('MANAGE_GROUPS')) {
-      throw redirect({
-        to: '/403',
-      });
-    }
-  },
 });

ui/src/routes/organizations/$orgId/secrets/route.tsx

@@ -17,15 +17,23 @@
  * License-Filename: LICENSE
  */
 
-import { createFileRoute, Outlet, redirect } from '@tanstack/react-router';
+import { createFileRoute, Outlet } from '@tanstack/react-router';
+
+import { RequireOrganizationPermission } from '@/components/authorization';
+
+function OrganizationSecretsGuard() {
+  const { orgId } = Route.useParams();
+
+  return (
+    <RequireOrganizationPermission
+      organizationId={Number.parseInt(orgId)}
+      permission='WRITE_SECRETS'
+    >
+      <Outlet />
+    </RequireOrganizationPermission>
+  );
+}
 
 export const Route = createFileRoute('/organizations/$orgId/secrets')({
-  component: () => <Outlet />,
-  beforeLoad: ({ context }) => {
-    if (!context.permissions.organization?.includes('WRITE_SECRETS')) {
-      throw redirect({
-        to: '/403',
-      });
-    }
-  },
+  component: OrganizationSecretsGuard,
 });

ui/src/routes/organizations/$orgId/users/route.tsx

@@ -17,13 +17,27 @@
  * License-Filename: LICENSE
  */
 
-import { createFileRoute, Outlet, redirect } from '@tanstack/react-router';
+import { createFileRoute, Outlet } from '@tanstack/react-router';
 
 import { getOrganizationUsersOptions } from '@/api/@tanstack/react-query.gen';
+import { RequireOrganizationPermission } from '@/components/authorization';
 import { paginationSearchParameterSchema } from '@/schemas';
 
+function OrganizationUsersGuard() {
+  const { orgId } = Route.useParams();
+
+  return (
+    <RequireOrganizationPermission
+      organizationId={Number.parseInt(orgId)}
+      permission='MANAGE_GROUPS'
+    >
+      <Outlet />
+    </RequireOrganizationPermission>
+  );
+}
+
 export const Route = createFileRoute('/organizations/$orgId/users')({
-  component: () => <Outlet />,
+  component: OrganizationUsersGuard,
 
   // Route’s query string parameters (centralized)
   validateSearch: paginationSearchParameterSchema,
@@ -50,11 +64,4 @@ export const Route = createFileRoute('/organizations/$orgId/users')({
       }),
     });
   },
-  beforeLoad: ({ context }) => {
-    if (!context.permissions.organization?.includes('MANAGE_GROUPS')) {
-      throw redirect({
-        to: '/403',
-      });
-    }
-  },
 });