refactor(webapp): render the permission panel via the route error boundary

A failed `authorization` check in dashboardLoader/dashboardAction now throws a
403 that the shared RouteErrorDisplay turns into the permission panel, so a
gated route only needs to declare `authorization`: no per-route error boundary
or manual denial UI. Boundaries on the env and settings layouts keep the side
nav visible alongside the panel. Billing and billing alerts now use the same
declarative authorization instead of a hand-rolled flag.

Author: matt-aitken

apps/webapp/app/components/ErrorDisplay.tsx

@@ -1,9 +1,11 @@
 import { HomeIcon } from "@heroicons/react/20/solid";
 import { isRouteErrorResponse, useRouteError } from "@remix-run/react";
 import { friendlyErrorDisplay } from "~/utils/httpErrors";
+import { permissionDeniedMessage } from "~/utils/permissionDenied";
 import { LinkButton } from "./primitives/Buttons";
 import { Header1 } from "./primitives/Headers";
 import { Paragraph } from "./primitives/Paragraph";
+import { PermissionDenied } from "./PermissionDenied";
 import { TriggerRotatingLogo } from "./TriggerRotatingLogo";
 import { type ReactNode } from "react";
 
@@ -17,6 +19,21 @@ type ErrorDisplayOptions = {
 export function RouteErrorDisplay(options?: ErrorDisplayOptions) {
   const error = useRouteError();
 
+  // A failed `authorization` check (or `throwPermissionDenied`) throws a 403
+  // that bubbles to the nearest route ErrorBoundary. Every layout boundary
+  // renders through here, so handling it once means a gated route only has to
+  // declare `authorization` to get the permission panel: no per-route boundary.
+  const permission = isRouteErrorResponse(error) ? permissionDeniedMessage(error.data) : null;
+  if (permission) {
+    return (
+      <div className="flex min-h-screen w-full items-center justify-center p-4">
+        <div className="w-full max-w-md">
+          <PermissionDenied message={permission} />
+        </div>
+      </div>
+    );
+  }
+
   return (
     <>
       {isRouteErrorResponse(error) ? (

apps/webapp/app/components/PermissionDenied.tsx

@@ -1,64 +1,27 @@
 import { NoSymbolIcon } from "@heroicons/react/20/solid";
-import { isRouteErrorResponse, useRouteError } from "@remix-run/react";
-import { json } from "@remix-run/server-runtime";
 import React from "react";
-import { useOrganization } from "~/hooks/useOrganizations";
+import { useOptionalOrganization } from "~/hooks/useOrganizations";
 import { organizationRolesPath } from "~/utils/pathBuilder";
-import { MainCenteredContainer } from "./layout/AppLayout";
-import { RouteErrorDisplay } from "./ErrorDisplay";
 import { LinkButton } from "./primitives/Buttons";
 import { InfoPanel } from "./primitives/InfoPanel";
 
 export function PermissionDenied({ message }: { message: React.ReactNode }) {
-  const organization = useOrganization();
+  const organization = useOptionalOrganization();
 
   return (
     <InfoPanel
       icon={NoSymbolIcon}
       iconClassName="text-text-dimmed"
       title="Permission denied"
       accessory={
-        <LinkButton to={organizationRolesPath(organization)} variant="secondary/small">
-          View roles
-        </LinkButton>
+        organization ? (
+          <LinkButton to={organizationRolesPath(organization)} variant="secondary/small">
+            View roles
+          </LinkButton>
+        ) : undefined
       }
     >
       {message}
     </InfoPanel>
   );
 }
-
-const PERMISSION_DENIED_MARKER = "rbac-permission-denied";
-
-/**
- * Throw from a loader (or action) when the current role lacks access. The
- * thrown 403 routes to the nearest `PermissionDeniedBoundary`, which renders
- * the panel — so the loader stays the single enforcement point and the page
- * component only ever renders for users who are allowed.
- */
-export function throwPermissionDenied(message: string): never {
-  throw json({ [PERMISSION_DENIED_MARKER]: true, message }, { status: 403 });
-}
-
-/**
- * Route `ErrorBoundary` that renders the permission panel for
- * `throwPermissionDenied`, and falls back to the default error display for
- * anything else.
- */
-export function PermissionDeniedBoundary() {
-  const error = useRouteError();
-
-  if (
-    isRouteErrorResponse(error) &&
-    error.status === 403 &&
-    error.data?.[PERMISSION_DENIED_MARKER]
-  ) {
-    return (
-      <MainCenteredContainer>
-        <PermissionDenied message={error.data.message ?? "You don't have permission to do this."} />
-      </MainCenteredContainer>
-    );
-  }
-
-  return <RouteErrorDisplay />;
-}

apps/webapp/app/routes/_app.github.install/route.tsx

@@ -29,6 +29,9 @@ export const loader = dashboardLoader(
       return organizationId ? { organizationId } : {};
     },
     authorization: { action: "write", resource: { type: "github" } },
+    // Redirect endpoint (no UI): keep redirecting on denial rather than
+    // throwing the permission panel.
+    unauthorizedRedirect: "/",
   },
   async ({ request, user }) => {
     const searchParams = new URL(request.url).searchParams;

apps/webapp/app/routes/_app.orgs.$organizationSlug.invite/route.tsx

@@ -9,11 +9,10 @@ import {
 import { json } from "@remix-run/node";
 import { Form, useActionData } from "@remix-run/react";
 import { Fragment, useRef, useState } from "react";
-import { type UseDataFunctionReturn, typedjson, useTypedLoaderData } from "remix-typedjson";
+import { typedjson, useTypedLoaderData } from "remix-typedjson";
 import simplur from "simplur";
 import { z } from "zod";
 import { MainCenteredContainer } from "~/components/layout/AppLayout";
-import { PermissionDenied } from "~/components/PermissionDenied";
 import { Button, LinkButton } from "~/components/primitives/Buttons";
 import { Fieldset } from "~/components/primitives/Fieldset";
 import { FormButtons } from "~/components/primitives/FormButtons";
@@ -53,21 +52,19 @@ export const loader = dashboardLoader(
       const organizationId = await resolveOrgIdFromSlug(params.organizationSlug);
       return organizationId ? { organizationId } : {};
     },
-    // No hard authorization block: a denial renders a PermissionDenied panel
-    // rather than blindly redirecting. Enforced via canManageMembers below
-    // (the invite action gates manage:members independently).
+    authorization: {
+      action: "manage",
+      resource: { type: "members" },
+      message: "With your current role, you can't invite team members.",
+    },
   },
-  async ({ user, context, ability }) => {
+  async ({ user, context }) => {
     const organizationId = context.organizationId;
     if (!organizationId) {
       throw new Response("Not Found", { status: 404 });
     }
     const userId = user.id;
 
-    if (!ability.can("manage", { type: "members" })) {
-      return typedjson({ canManageMembers: false as const });
-    }
-
     const presenter = new TeamPresenter();
     const result = await presenter.call({
       userId,
@@ -101,7 +98,7 @@ export const loader = dashboardLoader(
           .map((r) => r.id)
       : [];
 
-    return typedjson({ canManageMembers: true as const, ...result, offerableRoleIds });
+    return typedjson({ ...result, offerableRoleIds });
   }
 );
 
@@ -262,23 +259,7 @@ export const action = dashboardAction(
   }
 );
 
-type InviteData = Extract<UseDataFunctionReturn<typeof loader>, { canManageMembers: true }>;
-
 export default function Page() {
-  const loaderData = useTypedLoaderData<typeof loader>();
-
-  if (!loaderData.canManageMembers) {
-    return (
-      <MainCenteredContainer className="max-w-[26rem]">
-        <PermissionDenied message="With your current role, you can't invite team members." />
-      </MainCenteredContainer>
-    );
-  }
-
-  return <InvitePage data={loaderData} />;
-}
-
-function InvitePage({ data }: { data: InviteData }) {
   const {
     limits,
     canPurchaseSeats,
@@ -288,7 +269,7 @@ function InvitePage({ data }: { data: InviteData }) {
     planSeatLimit,
     roles,
     offerableRoleIds,
-  } = data;
+  } = useTypedLoaderData<typeof loader>();
   const [total, setTotal] = useState(limits.used);
   const organization = useOrganization();
   const lastSubmission = useActionData();

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.settings.integrations/route.tsx

@@ -5,7 +5,7 @@ import { json } from "@remix-run/server-runtime";
 import { typedjson, useTypedLoaderData, useTypedFetcher } from "remix-typedjson";
 import { z } from "zod";
 import { MainHorizontallyCenteredContainer } from "~/components/layout/AppLayout";
-import { PermissionDeniedBoundary, throwPermissionDenied } from "~/components/PermissionDenied";
+import { throwPermissionDenied } from "~/utils/permissionDenied";
 import { $replica } from "~/db.server";
 import { dashboardAction, dashboardLoader } from "~/services/routeBuilders/dashboardBuilder";
 import { Button } from "~/components/primitives/Buttons";
@@ -204,8 +204,6 @@ export const action = dashboardAction(
   }
 );
 
-export { PermissionDeniedBoundary as ErrorBoundary };
-
 export default function IntegrationsSettingsPage() {
   const { githubAppEnabled, buildSettings, vercelIntegrationEnabled } =
     useTypedLoaderData<typeof loader>();

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam/route.tsx

@@ -1,5 +1,6 @@
 import { Outlet } from "@remix-run/react";
 import { redirect, type LoaderFunctionArgs } from "@remix-run/server-runtime";
+import { RouteErrorDisplay } from "~/components/ErrorDisplay";
 import { prisma } from "~/db.server";
 import { redirectWithErrorMessage } from "~/models/message.server";
 import { updateCurrentProjectEnvironmentId } from "~/services/dashboardPreferences.server";
@@ -90,3 +91,11 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
 export default function Page() {
   return <Outlet />;
 }
+
+// Caught here (inside the project SideMenu's Outlet) rather than at the project
+// layout, so a permission denial or error on any env-scoped page renders in the
+// content pane with the SideMenu intact. RouteErrorDisplay renders the
+// permission panel for a 403 and the generic error otherwise.
+export function ErrorBoundary() {
+  return <RouteErrorDisplay />;
+}

apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.billing-alerts/route.tsx

@@ -13,12 +13,10 @@ import {
 import { z } from "zod";
 import { AdminDebugTooltip } from "~/components/admin/debugTooltip";
 import {
-  MainCenteredContainer,
   MainHorizontallyCenteredContainer,
   PageBody,
   PageContainer,
 } from "~/components/layout/AppLayout";
-import { PermissionDenied } from "~/components/PermissionDenied";
 import { Button } from "~/components/primitives/Buttons";
 import { CheckboxWithLabel } from "~/components/primitives/Checkbox";
 import { Fieldset } from "~/components/primitives/Fieldset";
@@ -67,11 +65,13 @@ export const loader = dashboardLoader(
       const organizationId = await resolveOrgIdFromSlug(params.organizationSlug);
       return organizationId ? { organizationId } : {};
     },
-    // No hard authorization block: a denial renders a PermissionDenied panel
-    // instead of blindly redirecting. Enforced via canManageBilling below (the
-    // form mutations are gated independently in the action).
+    authorization: {
+      action: "manage",
+      resource: { type: "billing" },
+      message: "With your current role, you can't manage billing alerts.",
+    },
   },
-  async ({ params, request, user, ability }) => {
+  async ({ params, request, user }) => {
     const userId = user.id;
     const { organizationSlug } = params;
 
@@ -80,10 +80,6 @@ export const loader = dashboardLoader(
       return redirect(organizationPath({ slug: organizationSlug }));
     }
 
-    if (!ability.can("manage", { type: "billing" })) {
-      return typedjson({ canManageBilling: false as const });
-    }
-
     const organization = await prisma.organization.findFirst({
       where: { slug: organizationSlug, members: { some: { userId } } },
     });
@@ -107,7 +103,6 @@ export const loader = dashboardLoader(
     }
 
     return typedjson({
-      canManageBilling: true as const,
       alerts: {
         ...alerts,
         amount: alerts.amount / 100,
@@ -116,7 +111,7 @@ export const loader = dashboardLoader(
   }
 );
 
-type BillingAlertsData = Extract<UseDataFunctionReturn<typeof loader>, { canManageBilling: true }>;
+type BillingAlertsData = UseDataFunctionReturn<typeof loader>;
 
 const schema = z.object({
   amount: z
@@ -215,21 +210,6 @@ export const action = dashboardAction(
 export default function Page() {
   const loaderData = useTypedLoaderData<typeof loader>();
 
-  if (!loaderData.canManageBilling) {
-    return (
-      <PageContainer>
-        <NavBar>
-          <PageTitle title="Billing alerts" />
-        </NavBar>
-        <PageBody>
-          <MainCenteredContainer>
-            <PermissionDenied message="With your current role, you can't manage billing alerts." />
-          </MainCenteredContainer>
-        </PageBody>
-      </PageContainer>
-    );
-  }
-
   return <BillingAlerts alerts={loaderData.alerts} />;
 }
 

apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.billing/route.tsx

@@ -3,7 +3,6 @@ import { type PlanDefinition } from "@trigger.dev/platform";
 import { redirect, typedjson, useTypedLoaderData } from "remix-typedjson";
 import { Feedback } from "~/components/Feedback";
 import { MainCenteredContainer, PageBody, PageContainer } from "~/components/layout/AppLayout";
-import { PermissionDenied } from "~/components/PermissionDenied";
 import { Button, LinkButton } from "~/components/primitives/Buttons";
 import { DateTime } from "~/components/primitives/DateTime";
 import { InfoPanel } from "~/components/primitives/InfoPanel";
@@ -43,11 +42,13 @@ export const loader = dashboardLoader(
       const organizationId = await resolveOrgIdFromSlug(params.organizationSlug);
       return organizationId ? { organizationId } : {};
     },
-    // No hard authorization block here: a denial should render the page with a
-    // PermissionDenied panel, not blindly redirect away. Enforced via the
-    // canManageBilling check below (the billing mutations are gated separately).
+    authorization: {
+      action: "manage",
+      resource: { type: "billing" },
+      message: "With your current role, you can't manage billing.",
+    },
   },
-  async ({ params, request, user, ability }) => {
+  async ({ params, request, user }) => {
     const userId = user.id;
     const { organizationSlug } = params;
 
@@ -56,10 +57,6 @@ export const loader = dashboardLoader(
       return redirect(organizationPath({ slug: organizationSlug }));
     }
 
-    if (!ability.can("manage", { type: "billing" })) {
-      return typedjson({ canManageBilling: false as const });
-    }
-
     const organization = await prisma.organization.findFirst({
       where: { slug: organizationSlug, members: { some: { userId } } },
     });
@@ -91,7 +88,6 @@ export const loader = dashboardLoader(
 
     if (!showSelfServe) {
       return typedjson({
-        canManageBilling: true as const,
         showSelfServe: false as const,
         ...currentPlan,
         organizationSlug,
@@ -108,7 +104,6 @@ export const loader = dashboardLoader(
     }
 
     return typedjson({
-      canManageBilling: true as const,
       showSelfServe: true as const,
       ...plans,
       ...currentPlan,
@@ -124,21 +119,6 @@ export const loader = dashboardLoader(
 export default function ChoosePlanPage() {
   const loaderData = useTypedLoaderData<typeof loader>();
 
-  if (!loaderData.canManageBilling) {
-    return (
-      <PageContainer>
-        <NavBar>
-          <PageTitle title="Billing" />
-        </NavBar>
-        <PageBody>
-          <MainCenteredContainer>
-            <PermissionDenied message="With your current role, you can't manage billing." />
-          </MainCenteredContainer>
-        </PageBody>
-      </PageContainer>
-    );
-  }
-
   const {
     showSelfServe,
     v3Subscription,