fix(webapp): show a permission panel instead of redirecting on gated pages

The billing, billing alerts, and invite pages hard-redirected to the org
home when the current role lacked access, which looked like a broken link.
They now render the page shell with a PermissionDenied panel (and a link to
view roles), and withhold their data server-side when access is denied. The
matching mutations stay enforced independently.

Author: matt-aitken

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

@@ -9,10 +9,11 @@ import {
 import { json } from "@remix-run/node";
 import { Form, useActionData } from "@remix-run/react";
 import { Fragment, useRef, useState } from "react";
-import { typedjson, useTypedLoaderData } from "remix-typedjson";
+import { type UseDataFunctionReturn, 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";
@@ -52,15 +53,21 @@ export const loader = dashboardLoader(
       const organizationId = await resolveOrgIdFromSlug(params.organizationSlug);
       return organizationId ? { organizationId } : {};
     },
-    authorization: { action: "manage", resource: { type: "members" } },
+    // 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).
   },
-  async ({ user, context }) => {
+  async ({ user, context, ability }) => {
     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,
@@ -94,7 +101,7 @@ export const loader = dashboardLoader(
           .map((r) => r.id)
       : [];
 
-    return typedjson({ ...result, offerableRoleIds });
+    return typedjson({ canManageMembers: true as const, ...result, offerableRoleIds });
   }
 );
 
@@ -255,7 +262,23 @@ 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,
@@ -265,7 +288,7 @@ export default function Page() {
     planSeatLimit,
     roles,
     offerableRoleIds,
-  } = useTypedLoaderData<typeof loader>();
+  } = data;
   const [total, setTotal] = useState(limits.used);
   const organization = useOrganization();
   const lastSubmission = useActionData();

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

@@ -4,14 +4,21 @@ import { Form, useActionData, type MetaFunction } from "@remix-run/react";
 import { json } from "@remix-run/server-runtime";
 import { tryCatch } from "@trigger.dev/core";
 import { Fragment, useEffect, useRef, useState } from "react";
-import { redirect, typedjson, useTypedLoaderData } from "remix-typedjson";
+import {
+  type UseDataFunctionReturn,
+  redirect,
+  typedjson,
+  useTypedLoaderData,
+} from "remix-typedjson";
 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";
@@ -60,9 +67,11 @@ export const loader = dashboardLoader(
       const organizationId = await resolveOrgIdFromSlug(params.organizationSlug);
       return organizationId ? { organizationId } : {};
     },
-    authorization: { action: "manage", resource: { type: "billing" } },
+    // 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).
   },
-  async ({ params, request, user }) => {
+  async ({ params, request, user, ability }) => {
     const userId = user.id;
     const { organizationSlug } = params;
 
@@ -71,6 +80,10 @@ 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 } } },
     });
@@ -94,6 +107,7 @@ export const loader = dashboardLoader(
     }
 
     return typedjson({
+      canManageBilling: true as const,
       alerts: {
         ...alerts,
         amount: alerts.amount / 100,
@@ -102,6 +116,8 @@ export const loader = dashboardLoader(
   }
 );
 
+type BillingAlertsData = Extract<UseDataFunctionReturn<typeof loader>, { canManageBilling: true }>;
+
 const schema = z.object({
   amount: z
     .number({ invalid_type_error: "Not a valid amount" })
@@ -197,7 +213,27 @@ export const action = dashboardAction(
 );
 
 export default function Page() {
-  const { alerts } = useTypedLoaderData<typeof loader>();
+  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} />;
+}
+
+function BillingAlerts({ alerts }: { alerts: BillingAlertsData["alerts"] }) {
   const plan = useCurrentPlan();
   const [dollarAmount, setDollarAmount] = useState(alerts.amount.toFixed(2));
 

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

@@ -3,6 +3,7 @@ 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";
@@ -42,9 +43,11 @@ export const loader = dashboardLoader(
       const organizationId = await resolveOrgIdFromSlug(params.organizationSlug);
       return organizationId ? { organizationId } : {};
     },
-    authorization: { action: "manage", resource: { type: "billing" } },
+    // 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).
   },
-  async ({ params, request, user }) => {
+  async ({ params, request, user, ability }) => {
     const userId = user.id;
     const { organizationSlug } = params;
 
@@ -53,6 +56,10 @@ 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 } } },
     });
@@ -84,6 +91,7 @@ export const loader = dashboardLoader(
 
     if (!showSelfServe) {
       return typedjson({
+        canManageBilling: true as const,
         showSelfServe: false as const,
         ...currentPlan,
         organizationSlug,
@@ -100,6 +108,7 @@ export const loader = dashboardLoader(
     }
 
     return typedjson({
+      canManageBilling: true as const,
       showSelfServe: true as const,
       ...plans,
       ...currentPlan,
@@ -114,6 +123,22 @@ 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,