refactor(webapp): render permission-denied via an error boundary

Add throwPermissionDenied + a PermissionDeniedBoundary so a gated loader can
just throw, and the route's error boundary renders the panel (falling back to
the normal error display otherwise). Switch the integrations page to this:
the loader throws when the role can't manage integrations and the page
component only renders for allowed users, dropping the flag-and-split
boilerplate.

Author: matt-aitken

apps/webapp/app/components/PermissionDenied.tsx

@@ -1,9 +1,13 @@
+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 { organizationRolesPath } from "~/utils/pathBuilder";
+import { MainCenteredContainer } from "./layout/AppLayout";
+import { RouteErrorDisplay } from "./ErrorDisplay";
 import { LinkButton } from "./primitives/Buttons";
 import { InfoPanel } from "./primitives/InfoPanel";
-import { NoSymbolIcon } from "@heroicons/react/20/solid";
-import { useOrganization } from "~/hooks/useOrganizations";
-import React from "react";
 
 export function PermissionDenied({ message }: { message: React.ReactNode }) {
   const organization = useOrganization();
@@ -23,3 +27,38 @@ export function PermissionDenied({ message }: { message: React.ReactNode }) {
     </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.orgs.$organizationSlug.projects.$projectParam.env.$envParam.settings.integrations/route.tsx

@@ -2,18 +2,10 @@ import { conform, useForm } from "@conform-to/react";
 import { parse } from "@conform-to/zod";
 import { Form, useActionData, useNavigation } from "@remix-run/react";
 import { json } from "@remix-run/server-runtime";
-import {
-  type UseDataFunctionReturn,
-  typedjson,
-  useTypedLoaderData,
-  useTypedFetcher,
-} from "remix-typedjson";
+import { typedjson, useTypedLoaderData, useTypedFetcher } from "remix-typedjson";
 import { z } from "zod";
-import {
-  MainCenteredContainer,
-  MainHorizontallyCenteredContainer,
-} from "~/components/layout/AppLayout";
-import { PermissionDenied } from "~/components/PermissionDenied";
+import { MainHorizontallyCenteredContainer } from "~/components/layout/AppLayout";
+import { PermissionDeniedBoundary, throwPermissionDenied } from "~/components/PermissionDenied";
 import { $replica } from "~/db.server";
 import { dashboardAction, dashboardLoader } from "~/services/routeBuilders/dashboardBuilder";
 import { Button } from "~/components/primitives/Buttons";
@@ -71,7 +63,7 @@ export const loader = dashboardLoader(
       ability.can("write", { type: "github" }) || ability.can("write", { type: "vercel" });
 
     if (!canManageIntegrations) {
-      return typedjson({ canManageIntegrations: false as const });
+      throwPermissionDenied("With your current role, you can't manage integrations.");
     }
 
     const projectSettingsPresenter = new ProjectSettingsPresenter();
@@ -107,7 +99,6 @@ export const loader = dashboardLoader(
     const { gitHubApp, buildSettings } = resultOrFail.value;
 
     return typedjson({
-      canManageIntegrations: true as const,
       githubAppEnabled: gitHubApp.enabled,
       buildSettings,
       vercelIntegrationEnabled: OrgIntegrationRepository.isVercelSupported,
@@ -213,27 +204,11 @@ export const action = dashboardAction(
   }
 );
 
-type IntegrationsData = Extract<
-  UseDataFunctionReturn<typeof loader>,
-  { canManageIntegrations: true }
->;
+export { PermissionDeniedBoundary as ErrorBoundary };
 
 export default function IntegrationsSettingsPage() {
-  const data = useTypedLoaderData<typeof loader>();
-
-  if (!data.canManageIntegrations) {
-    return (
-      <MainCenteredContainer>
-        <PermissionDenied message="With your current role, you can't manage integrations." />
-      </MainCenteredContainer>
-    );
-  }
-
-  return <IntegrationsSettings data={data} />;
-}
-
-function IntegrationsSettings({ data }: { data: IntegrationsData }) {
-  const { githubAppEnabled, buildSettings, vercelIntegrationEnabled } = data;
+  const { githubAppEnabled, buildSettings, vercelIntegrationEnabled } =
+    useTypedLoaderData<typeof loader>();
   const project = useProject();
   const organization = useOrganization();
   const environment = useEnvironment();