fix: enforce dashboard mutation permissions

Enforce the existing dashboard permissions on queue and environment
mutations, prompt detail reads, idempotency key resets, paid add-on
purchases, and organization changes. Controls you cannot use are
disabled with an explanation rather than failing on submit, and
allocation and quota-increase requests stay available.

Billing notices now render from a fixed set of known message keys
instead of caller-supplied copy, and the schedules add-on returns stable
error messages.

Permission checks scoped to a project now pass that project through, so
a project-level role override applies wherever one is configured.

Branch archival now respects the configured permissions for dashboard
sessions and personal access tokens, with disabled controls explaining
denied access. Existing API-key scope requirements are unchanged.

Mono-RevId: 5a7c999c836e2b7d9a72f17f3ca48fefe5d46e6d

Author: carderne

apps/webapp/app/components/navigation/EnvironmentSelector.tsx

@@ -184,10 +184,7 @@ export function EnvironmentSelector({
             <div className="p-1">
               <PopoverMenuItem
                 key="staging"
-                to={v3BillingPath(
-                  organization,
-                  "Upgrade to unlock a Staging environment for your projects."
-                )}
+                to={v3BillingPath(organization, "stagingEnvironment")}
                 title={
                   <div className="flex w-full items-center justify-between">
                     <EnvironmentCombo
@@ -202,10 +199,7 @@ export function EnvironmentSelector({
               />
               <PopoverMenuItem
                 key="preview"
-                to={v3BillingPath(
-                  organization,
-                  "Upgrade to unlock Preview environments for your projects."
-                )}
+                to={v3BillingPath(organization, "previewEnvironments")}
                 title={
                   <div className="flex w-full items-center justify-between">
                     <EnvironmentCombo

apps/webapp/app/components/queues/QueueControls.tsx

@@ -34,6 +34,7 @@ export function QueuePauseResumeButton({
   showTooltip = true,
   iconOnly = false,
   withQueueName = false,
+  disabled = false,
 }: {
   /** The "id" here is a friendlyId */
   queue: { id: string; name: string; paused: boolean };
@@ -45,13 +46,16 @@ export function QueuePauseResumeButton({
   iconOnly?: boolean;
   /** Render the full "Pause/Resume {name} queue" label instead of the short "Pause"/"Resume". */
   withQueueName?: boolean;
+  disabled?: boolean;
 }) {
   const [isOpen, setIsOpen] = useState(false);
 
   const label = queue.paused
     ? `Resumes the "${queue.name}" queue so its runs can be dequeued again.`
     : `Pauses all runs from being dequeued in the "${queue.name}" queue. Any executing runs will continue to run.`;
 
+  const tooltip = disabled ? "You don't have permission to manage queues" : label;
+
   const trigger = showTooltip ? (
     <div>
       <TooltipProvider disableHoverableContent={true}>
@@ -80,6 +84,7 @@ export function QueuePauseResumeButton({
                   fullWidth={fullWidth}
                   textAlignLeft={fullWidth}
                   aria-label={label}
+                  disabled={disabled}
                 >
                   {iconOnly
                     ? undefined
@@ -95,7 +100,7 @@ export function QueuePauseResumeButton({
             </div>
           </TooltipTrigger>
           <TooltipContent side="right" className={"text-xs"}>
-            {label}
+            {tooltip}
           </TooltipContent>
         </Tooltip>
       </TooltipProvider>
@@ -105,7 +110,14 @@ export function QueuePauseResumeButton({
       <PopoverMenuItem
         icon={queue.paused ? PlayIcon : PauseIcon}
         leadingIconClassName={queue.paused ? "text-success" : "text-warning"}
-        title={queue.paused ? "Resume..." : "Pause..."}
+        title={
+          disabled
+            ? "You don't have permission to manage queues"
+            : queue.paused
+              ? "Resume..."
+              : "Pause..."
+        }
+        disabled={disabled}
       />
     </DialogTrigger>
   );
@@ -158,13 +170,15 @@ export function QueueOverrideConcurrencyButton({
   queue,
   environmentConcurrencyLimit,
   trigger,
+  disabled = false,
 }: {
   queue: QueueItem & { concurrencyLimitOverridePercent: number | null };
   environmentConcurrencyLimit: number;
   /** How to render the dialog trigger. "menu-item" (default) is a PopoverMenuItem for row menus;
    * "button" is a standalone labeled button; "icon" is an icon-only button with the label in a
    * hover tooltip, for compact placements like the detail-page live blocks. */
   trigger?: "menu-item" | "button" | "icon";
+  disabled?: boolean;
 }) {
   const navigation = useNavigation();
   const [isOpen, setIsOpen] = useState(false);
@@ -208,7 +222,9 @@ export function QueueOverrideConcurrencyButton({
   const limitOverCap = Number.isFinite(limitNumber) && limitNumber > environmentConcurrencyLimit;
 
   const submitDisabled =
-    isLoading || (mode === "percent" ? !percentValid : !concurrencyLimit || limitOverCap);
+    disabled ||
+    isLoading ||
+    (mode === "percent" ? !percentValid : !concurrencyLimit || limitOverCap);
 
   const iconLabel = isOverridden ? "Edit override" : "Override limit";
 
@@ -226,12 +242,13 @@ export function QueueOverrideConcurrencyButton({
                     LeadingIcon={AdjustmentsHorizontalIcon}
                     leadingIconClassName="text-text-dimmed"
                     aria-label={iconLabel}
+                    disabled={disabled}
                   />
                 </DialogTrigger>
               </div>
             </TooltipTrigger>
             <TooltipContent side="right" className="text-xs">
-              {iconLabel}
+              {disabled ? "You don't have permission to manage queues" : iconLabel}
             </TooltipContent>
           </Tooltip>
         </TooltipProvider>
@@ -249,23 +266,32 @@ export function QueueOverrideConcurrencyButton({
                     aria-label={
                       isOverridden ? "Edit concurrency override" : "Override concurrency limit"
                     }
+                    disabled={disabled}
                   >
                     {isOverridden ? "Edit override" : "Override limit"}
                   </Button>
                 </DialogTrigger>
               </div>
             </TooltipTrigger>
             <TooltipContent side="bottom" className="max-w-[230px] text-xs">
-              Give this queue its own concurrency limit instead of the environment default. Set it
-              as a number or a percentage of the environment limit.
+              {disabled
+                ? "You don't have permission to manage queues"
+                : "Give this queue its own concurrency limit instead of the environment default. Set it as a number or a percentage of the environment limit."}
             </TooltipContent>
           </Tooltip>
         </TooltipProvider>
       ) : (
         <DialogTrigger asChild>
           <PopoverMenuItem
             icon={AdjustmentsHorizontalIcon}
-            title={isOverridden ? "Edit override…" : "Override limit…"}
+            title={
+              disabled
+                ? "You don't have permission to manage queues"
+                : isOverridden
+                  ? "Edit override…"
+                  : "Override limit…"
+            }
+            disabled={disabled}
           />
         </DialogTrigger>
       )}
@@ -382,7 +408,7 @@ export function QueueOverrideConcurrencyButton({
                       type="submit"
                       name="action"
                       value="queue-remove-override"
-                      disabled={isLoading}
+                      disabled={disabled || isLoading}
                       variant="danger/medium"
                     >
                       Remove override

apps/webapp/app/components/schedules/PurchaseSchedulesModal.tsx

@@ -34,6 +34,7 @@ type Props = {
   usedSchedules: number;
   maxQuota: number;
   planScheduleLimit: number;
+  canManageBilling: boolean;
   triggerButton?: ReactNode;
 };
 
@@ -44,6 +45,7 @@ export function PurchaseSchedulesModal({
   usedSchedules,
   maxQuota,
   planScheduleLimit,
+  canManageBilling,
   triggerButton,
 }: Props) {
   const showSelfServe = useShowSelfServe();
@@ -256,7 +258,10 @@ export function PurchaseSchedulesModal({
                   <Button
                     variant="danger/medium"
                     type="submit"
-                    disabled={isLoading || state === "need_to_delete"}
+                    disabled={!canManageBilling || isLoading || state === "need_to_delete"}
+                    tooltip={
+                      canManageBilling ? undefined : "You don't have permission to manage billing"
+                    }
                     LeadingIcon={isLoading ? SpinnerWhite : undefined}
                   >
                     <span className="tabular-nums">{`Remove ${formatNumber(
@@ -270,7 +275,10 @@ export function PurchaseSchedulesModal({
                   <Button
                     variant="primary/medium"
                     type="submit"
-                    disabled={isLoading || state === "no_change"}
+                    disabled={!canManageBilling || isLoading || state === "no_change"}
+                    tooltip={
+                      canManageBilling ? undefined : "You don't have permission to manage billing"
+                    }
                     LeadingIcon={isLoading ? SpinnerWhite : undefined}
                   >
                     <span className="tabular-nums">{`Purchase ${formatNumber(

apps/webapp/app/components/schedules/ScheduleLimitActions.tsx

@@ -9,6 +9,7 @@ import { PurchaseSchedulesModal, type SchedulePricing } from "./PurchaseSchedule
 type Props = {
   actionPath: string;
   canPurchaseSchedules: boolean;
+  canManageBilling: boolean;
   schedulePricing: SchedulePricing | null;
   extraSchedules: number;
   limits: { used: number; limit: number };
@@ -22,6 +23,7 @@ type Props = {
 export function ScheduleLimitActions({
   actionPath,
   canPurchaseSchedules,
+  canManageBilling,
   schedulePricing,
   extraSchedules,
   limits,
@@ -51,6 +53,7 @@ export function ScheduleLimitActions({
         usedSchedules={limits.used}
         maxQuota={maxScheduleQuota}
         planScheduleLimit={planScheduleLimit}
+        canManageBilling={canManageBilling}
         triggerButton={
           variant === "dialog" ? <Button variant="primary/small">Purchase more…</Button> : undefined
         }

apps/webapp/app/components/schedules/SchedulesUsageBar.tsx

@@ -12,6 +12,7 @@ type Props = {
   /** True when the plan would let them upgrade (vs being already on the highest plan). */
   canUpgrade: boolean;
   canPurchaseSchedules: boolean;
+  canManageBilling: boolean;
   extraSchedules: number;
   maxScheduleQuota: number;
   planScheduleLimit: number;
@@ -23,6 +24,7 @@ export function SchedulesUsageBar({
   requiresUpgrade,
   canUpgrade,
   canPurchaseSchedules,
+  canManageBilling,
   extraSchedules,
   maxScheduleQuota,
   planScheduleLimit,
@@ -79,6 +81,7 @@ export function SchedulesUsageBar({
           <ScheduleLimitActions
             actionPath={actionPath}
             canPurchaseSchedules={canPurchaseSchedules}
+            canManageBilling={canManageBilling}
             schedulePricing={schedulePricing}
             extraSchedules={extraSchedules}
             limits={limits}

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

@@ -4,7 +4,7 @@ import { ArrowUpCircleIcon, CheckIcon, EnvelopeIcon, PlusIcon } from "@heroicons
 import { BookOpenIcon } from "@heroicons/react/24/solid";
 import { DialogClose } from "@radix-ui/react-dialog";
 import { useFetcher, useSearchParams } from "@remix-run/react";
-import { type ActionFunctionArgs, json, type LoaderFunctionArgs } from "@remix-run/server-runtime";
+import { type ActionFunctionArgs, json } from "@remix-run/server-runtime";
 import { tryCatch } from "@trigger.dev/core/v3";
 import { useCallback, useEffect, useState } from "react";
 import { SearchInput } from "~/components/primitives/SearchInput";
@@ -63,6 +63,8 @@ import { BranchesPresenter } from "~/presenters/v3/BranchesPresenter.server";
 import { logger } from "~/services/logger.server";
 import { getCurrentPlan, getSelfServePurchaseBlockReason } from "~/services/platform.v3.server";
 import { requireUserId } from "~/services/session.server";
+import { dashboardLoader } from "~/services/routeBuilders/dashboardBuilder";
+import { resolveProjectAuthScope } from "~/services/projectAuthScope.server";
 import { cn } from "~/utils/cn";
 import {
   branchesPath,
@@ -96,32 +98,41 @@ const PurchaseSchema = z.discriminatedUnion("action", [
   }),
 ]);
 
-export const loader = async ({ request, params }: LoaderFunctionArgs) => {
-  const userId = await requireUserId(request);
-  const { projectParam } = ProjectParamSchema.parse(params);
-
-  const searchParams = new URL(request.url).searchParams;
-  const parsedSearchParams = BranchesOptions.safeParse(Object.fromEntries(searchParams));
-  const options = parsedSearchParams.success ? parsedSearchParams.data : {};
-
-  try {
-    const presenter = new BranchesPresenter();
-    const result = await presenter.call({
-      userId,
-      projectSlug: projectParam,
-      env: "preview",
-      ...options,
-    });
-
-    return typedjson(result);
-  } catch (error) {
-    logger.error("Error loading preview branches page", { error });
-    throw new Response(undefined, {
-      status: 400,
-      statusText: "Something went wrong, if this problem persists please contact support.",
-    });
+export const loader = dashboardLoader(
+  {
+    params: ProjectParamSchema,
+    context: (params) => resolveProjectAuthScope(params.organizationSlug, params.projectParam),
+  },
+  async ({ request, params, user, ability }) => {
+    const userId = user.id;
+    const { projectParam } = params;
+
+    const searchParams = new URL(request.url).searchParams;
+    const parsedSearchParams = BranchesOptions.safeParse(Object.fromEntries(searchParams));
+    const options = parsedSearchParams.success ? parsedSearchParams.data : {};
+
+    try {
+      const presenter = new BranchesPresenter();
+      const result = await presenter.call({
+        userId,
+        projectSlug: projectParam,
+        env: "preview",
+        ...options,
+      });
+
+      return typedjson({
+        ...result,
+        canArchiveBranches: ability.can("write", { type: "deployments", envType: "PREVIEW" }),
+      });
+    } catch (error) {
+      logger.error("Error loading preview branches page", { error });
+      throw new Response(undefined, {
+        status: 400,
+        statusText: "Something went wrong, if this problem persists please contact support.",
+      });
+    }
   }
-};
+);
 
 export async function action({ request, params }: ActionFunctionArgs) {
   const userId = await requireUserId(request);
@@ -206,6 +217,7 @@ export default function Page() {
     totalPages,
     hasBranches,
     canPurchaseBranches,
+    canArchiveBranches,
     extraBranches,
     branchPricing,
     maxBranchQuota,
@@ -401,7 +413,10 @@ export default function Page() {
                                       />
                                     )}
                                     {!branch.archivedAt ? (
-                                      <ArchiveButton environment={branch} />
+                                      <ArchiveButton
+                                        environment={branch}
+                                        canArchive={canArchiveBranches}
+                                      />
                                     ) : null}
                                   </>
                                 ) : null