fix(webapp): enforce manage:members on invite/resend/revoke routes + UI

Migrate the invite, invite-resend, and invite-revoke routes to
dashboardLoader/dashboardAction with a manage:members authorization block.
The resend/revoke routes have no URL params, so the org for the auth scope
is resolved from the form body (read via a cloned request) — from the
invite's organization (resend) or the slug field (revoke). Gate the
Resend/Revoke buttons on the team page with the existing canManageMembers
flag. Existing tenancy/inviter checks in the model layer are unchanged.

Author: matt-aitken

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

@@ -6,13 +6,11 @@ import {
   LockOpenIcon,
   UserPlusIcon,
 } from "@heroicons/react/20/solid";
-import type { ActionFunction, LoaderFunctionArgs } from "@remix-run/node";
 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 simplur from "simplur";
-import invariant from "tiny-invariant";
 import { z } from "zod";
 import { MainCenteredContainer } from "~/components/layout/AppLayout";
 import { Button, LinkButton } from "~/components/primitives/Buttons";
@@ -34,63 +32,71 @@ import { redirectWithSuccessMessage } from "~/models/message.server";
 import { TeamPresenter } from "~/presenters/TeamPresenter.server";
 import { scheduleEmail } from "~/services/scheduleEmail.server";
 import { rbac } from "~/services/rbac.server";
-import { requireUserId } from "~/services/session.server";
+import { dashboardAction, dashboardLoader } from "~/services/routeBuilders/dashboardBuilder";
 import { acceptInvitePath, organizationTeamPath, v3BillingPath } from "~/utils/pathBuilder";
 import { PurchaseSeatsModal } from "../_app.orgs.$organizationSlug.settings.team/route";
 
 const Params = z.object({
   organizationSlug: z.string(),
 });
 
-export const loader = async ({ request, params }: LoaderFunctionArgs) => {
-  const userId = await requireUserId(request);
-  const { organizationSlug } = Params.parse(params);
-
-  const organization = await $replica.organization.findFirst({
-    where: { slug: organizationSlug },
-    select: { id: true },
-  });
+async function resolveOrgIdFromSlug(slug: string): Promise<string | null> {
+  const org = await $replica.organization.findFirst({ where: { slug }, select: { id: true } });
+  return org?.id ?? null;
+}
 
-  if (!organization) {
-    throw new Response("Not Found", { status: 404 });
-  }
+export const loader = dashboardLoader(
+  {
+    params: Params,
+    context: async (params) => {
+      const organizationId = await resolveOrgIdFromSlug(params.organizationSlug);
+      return organizationId ? { organizationId } : {};
+    },
+    authorization: { action: "manage", resource: { type: "members" } },
+  },
+  async ({ user, context }) => {
+    const organizationId = context.organizationId;
+    if (!organizationId) {
+      throw new Response("Not Found", { status: 404 });
+    }
+    const userId = user.id;
 
-  const presenter = new TeamPresenter();
-  const result = await presenter.call({
-    userId,
-    organizationId: organization.id,
-  });
+    const presenter = new TeamPresenter();
+    const result = await presenter.call({
+      userId,
+      organizationId,
+    });
 
-  if (!result) {
-    throw new Response("Not Found", { status: 404 });
-  }
+    if (!result) {
+      throw new Response("Not Found", { status: 404 });
+    }
 
-  // Inviter's own role drives the "below their level" filter on the
-  // dropdown. Plus assignable role IDs already encode the org's plan
-  // tier — the intersection is what we offer.
-  const [inviterRole, assignableRoleIds, systemRoles] = await Promise.all([
-    rbac.getUserRole({ userId, organizationId: organization.id }),
-    rbac.getAssignableRoleIds(organization.id),
-    rbac.systemRoles(organization.id),
-  ]);
+    // Inviter's own role drives the "below their level" filter on the
+    // dropdown. Plus assignable role IDs already encode the org's plan
+    // tier — the intersection is what we offer.
+    const [inviterRole, assignableRoleIds, systemRoles] = await Promise.all([
+      rbac.getUserRole({ userId, organizationId }),
+      rbac.getAssignableRoleIds(organizationId),
+      rbac.systemRoles(organizationId),
+    ]);
 
-  // Build the dropdown's offerable set server-side: roles that are
-  // (a) assignable on the current plan AND (b) at or below the
-  // inviter's own level. The client just renders these — it doesn't
-  // need to know about the system-role catalogue or the ladder.
-  const assignableSet = new Set(assignableRoleIds);
-  const offerableRoleIds = systemRoles
-    ? result.roles
-        .filter(
-          (r) =>
-            assignableSet.has(r.id) &&
-            isAtOrBelow(systemRoles, inviterRole?.id ?? null, r.id)
-        )
-        .map((r) => r.id)
-    : [];
+    // Build the dropdown's offerable set server-side: roles that are
+    // (a) assignable on the current plan AND (b) at or below the
+    // inviter's own level. The client just renders these — it doesn't
+    // need to know about the system-role catalogue or the ladder.
+    const assignableSet = new Set(assignableRoleIds);
+    const offerableRoleIds = systemRoles
+      ? result.roles
+          .filter(
+            (r) =>
+              assignableSet.has(r.id) && isAtOrBelow(systemRoles, inviterRole?.id ?? null, r.id)
+          )
+          .map((r) => r.id)
+      : [];
 
-  return typedjson({ ...result, offerableRoleIds });
-};
+    return typedjson({ ...result, offerableRoleIds });
+  }
+);
 
 // Sentinel for "no RBAC role attached to invite" — the runtime
 // fallback will derive a role from the legacy OrgMember.role write at
@@ -153,101 +159,101 @@ const schema = z.object({
   rbacRoleId: z.string().optional(),
 });
 
-export const action: ActionFunction = async ({ request, params }) => {
-  const userId = await requireUserId(request);
-  const { organizationSlug } = params;
-  invariant(organizationSlug, "organizationSlug is required");
-
-  const formData = await request.formData();
-  const submission = parse(formData, { schema });
+export const action = dashboardAction(
+  {
+    params: Params,
+    context: async (params) => {
+      const organizationId = await resolveOrgIdFromSlug(params.organizationSlug);
+      return organizationId ? { organizationId } : {};
+    },
+    authorization: { action: "manage", resource: { type: "members" } },
+  },
+  async ({ request, params, user }) => {
+    const userId = user.id;
+    const { organizationSlug } = params;
 
-  if (!submission.value || submission.intent !== "submit") {
-    return json(submission);
-  }
+    const formData = await request.formData();
+    const submission = parse(formData, { schema });
 
-  // Resolve the RBAC role choice. NO_RBAC_ROLE / undefined / unknown
-  // role → don't pass one through; the runtime fallback handles it.
-  // Validation: the chosen role must be in the org's assignable set
-  // (plan-tier) and at or below the inviter's own level.
-  let resolvedRbacRoleId: string | null = null;
-  const submittedRbacRoleId = submission.value.rbacRoleId;
-  if (
-    submittedRbacRoleId &&
-    submittedRbacRoleId !== NO_RBAC_ROLE
-  ) {
-    const org = await $replica.organization.findFirst({
-      where: { slug: organizationSlug },
-      select: { id: true },
-    });
-    if (!org) {
-      return json({ errors: { body: "Organization not found" } }, { status: 404 });
+    if (!submission.value || submission.intent !== "submit") {
+      return json(submission);
     }
-    const [inviterRole, assignableRoleIds, systemRoles] = await Promise.all([
-      rbac.getUserRole({ userId, organizationId: org.id }),
-      rbac.getAssignableRoleIds(org.id),
-      rbac.systemRoles(org.id),
-    ]);
-    if (!systemRoles) {
-      // No plugin installed but the form somehow submitted a role id —
-      // ignore it (fall through to legacy behaviour rather than 400).
-      resolvedRbacRoleId = null;
-    } else {
-      const assignable = new Set(assignableRoleIds);
-      if (!assignable.has(submittedRbacRoleId)) {
-        return json(
-          { errors: { body: "You can't invite someone with this role on your current plan" } },
-          { status: 400 }
-        );
+
+    // Resolve the RBAC role choice. NO_RBAC_ROLE / undefined / unknown
+    // role → don't pass one through; the runtime fallback handles it.
+    // Validation: the chosen role must be in the org's assignable set
+    // (plan-tier) and at or below the inviter's own level.
+    let resolvedRbacRoleId: string | null = null;
+    const submittedRbacRoleId = submission.value.rbacRoleId;
+    if (submittedRbacRoleId && submittedRbacRoleId !== NO_RBAC_ROLE) {
+      const org = await $replica.organization.findFirst({
+        where: { slug: organizationSlug },
+        select: { id: true },
+      });
+      if (!org) {
+        return json({ errors: { body: "Organization not found" } }, { status: 404 });
       }
-      if (
-        !isAtOrBelow(
-          systemRoles,
-          inviterRole?.id ?? null,
-          submittedRbacRoleId
-        )
-      ) {
-        return json(
-          { errors: { body: "You can only invite members at or below your own role" } },
-          { status: 403 }
-        );
+      const [inviterRole, assignableRoleIds, systemRoles] = await Promise.all([
+        rbac.getUserRole({ userId, organizationId: org.id }),
+        rbac.getAssignableRoleIds(org.id),
+        rbac.systemRoles(org.id),
+      ]);
+      if (!systemRoles) {
+        // No plugin installed but the form somehow submitted a role id —
+        // ignore it (fall through to legacy behaviour rather than 400).
+        resolvedRbacRoleId = null;
+      } else {
+        const assignable = new Set(assignableRoleIds);
+        if (!assignable.has(submittedRbacRoleId)) {
+          return json(
+            { errors: { body: "You can't invite someone with this role on your current plan" } },
+            { status: 400 }
+          );
+        }
+        if (!isAtOrBelow(systemRoles, inviterRole?.id ?? null, submittedRbacRoleId)) {
+          return json(
+            { errors: { body: "You can only invite members at or below your own role" } },
+            { status: 403 }
+          );
+        }
+        resolvedRbacRoleId = submittedRbacRoleId;
       }
-      resolvedRbacRoleId = submittedRbacRoleId;
     }
-  }
 
-  try {
-    const invites = await inviteMembers({
-      slug: organizationSlug,
-      emails: submission.value.emails,
-      userId,
-      rbacRoleId: resolvedRbacRoleId,
-    });
+    try {
+      const invites = await inviteMembers({
+        slug: organizationSlug,
+        emails: submission.value.emails,
+        userId,
+        rbacRoleId: resolvedRbacRoleId,
+      });
 
-    for (const invite of invites) {
-      try {
-        await scheduleEmail({
-          email: "invite",
-          to: invite.email,
-          orgName: invite.organization.title,
-          inviterName: invite.inviter.name ?? undefined,
-          inviterEmail: invite.inviter.email,
-          inviteLink: `${env.LOGIN_ORIGIN}${acceptInvitePath(invite.token)}`,
-        });
-      } catch (error) {
-        console.error("Failed to send invite email");
-        console.error(error);
+      for (const invite of invites) {
+        try {
+          await scheduleEmail({
+            email: "invite",
+            to: invite.email,
+            orgName: invite.organization.title,
+            inviterName: invite.inviter.name ?? undefined,
+            inviterEmail: invite.inviter.email,
+            inviteLink: `${env.LOGIN_ORIGIN}${acceptInvitePath(invite.token)}`,
+          });
+        } catch (error) {
+          console.error("Failed to send invite email");
+          console.error(error);
+        }
       }
-    }
 
-    return redirectWithSuccessMessage(
-      organizationTeamPath(invites[0].organization),
-      request,
-      simplur`${submission.value.emails.length} member[|s] invited`
-    );
-  } catch (error: any) {
-    return json({ errors: { body: error.message } }, { status: 400 });
+      return redirectWithSuccessMessage(
+        organizationTeamPath(invites[0].organization),
+        request,
+        simplur`${submission.value.emails.length} member[|s] invited`
+      );
+    } catch (error: any) {
+      return json({ errors: { body: error.message } }, { status: 400 });
+    }
   }
-};
+);
 
 export default function Page() {
   const {
@@ -274,9 +280,7 @@ export default function Page() {
   // Default to the lowest-tier offered role (the loader returns roles
   // in its allRoles order, which the plugin emits Owner→Member; the
   // last entry is the most restrictive).
-  const defaultRoleId = showRolePicker
-    ? offerable[offerable.length - 1].id
-    : NO_RBAC_ROLE;
+  const defaultRoleId = showRolePicker ? offerable[offerable.length - 1].id : NO_RBAC_ROLE;
   const [selectedRoleId, setSelectedRoleId] = useState(defaultRoleId);
 
   const [form, { emails }] = useForm({
@@ -386,9 +390,7 @@ export default function Page() {
                   items={offerable}
                   variant="tertiary/medium"
                   dropdownIcon
-                  text={(v) =>
-                    offerable.find((r) => r.id === v)?.name ?? "Pick a role"
-                  }
+                  text={(v) => offerable.find((r) => r.id === v)?.name ?? "Pick a role"}
                   setValue={(next) => {
                     if (typeof next === "string") setSelectedRoleId(next);
                   }}
@@ -402,8 +404,7 @@ export default function Page() {
                   }
                 </Select>
                 <Paragraph variant="extra-small" className="text-text-dimmed">
-                  Invitees join with this role. They can be promoted later
-                  from the Team page.
+                  Invitees join with this role. They can be promoted later from the Team page.
                 </Paragraph>
               </InputGroup>
             ) : null}