fix(webapp): gate TaskRunsTable row menu + runs-index/errors bulk controls on write:runs

matt-aitken · matt-aitken · commit 5636b9bbb825 · 2026-06-15T11:56:57.000+01:00
Thread canCancelRuns/canReplayRuns (default true) through TaskRunsTable to
RunActionsCell: disable + tooltip the Cancel/Replay popover items and hide
the redundant hover icons when denied. The runs-index and errors loaders
compute the flags from the injected ability; gate the index Bulk action
button + r/c shortcuts and the errors Bulk replay link accordingly.
Display only; the action routes enforce write:runs. Permissive in OSS.
diff --git a/apps/webapp/app/components/runs/v3/TaskRunsTable.tsx b/apps/webapp/app/components/runs/v3/TaskRunsTable.tsx
@@ -76,6 +76,14 @@ type RunsTableProps = {
   disableAdjacentRows?: boolean;
   additionalTableState?: Record<string, string>;
   childrenStatusesBasePath?: string;
+  /**
+   * Display-only write:runs flags from the caller's loader. Default true so
+   * callers that don't pass them (and OSS, where the ability is permissive)
+   * keep the controls enabled. The cancel/replay action routes enforce
+   * write:runs regardless.
+   */
+  canCancelRuns?: boolean;
+  canReplayRuns?: boolean;
 };
 
 export function TaskRunsTable({
@@ -90,6 +98,8 @@ export function TaskRunsTable({
   variant = "dimmed",
   additionalTableState,
   childrenStatusesBasePath,
+  canCancelRuns = true,
+  canReplayRuns = true,
 }: RunsTableProps) {
   const regions = useRegions();
   const regionByMasterQueue = new Map(regions.map((r) => [r.masterQueue, r] as const));
@@ -464,9 +474,7 @@ export function TaskRunsTable({
                   <TableCell to={path}>
                     {run.region ? (
                       <RegionLabel
-                        region={
-                          regionByMasterQueue.get(run.region) ?? { name: run.region }
-                        }
+                        region={regionByMasterQueue.get(run.region) ?? { name: run.region }}
                         iconClassName="size-4"
                       />
                     ) : (
@@ -493,7 +501,12 @@ export function TaskRunsTable({
                     {run.tags.map((tag) => <RunTag key={tag} tag={tag} />) || "–"}
                   </div>
                 </TableCell>
-                <RunActionsCell run={run} path={path} />
+                <RunActionsCell
+                  run={run}
+                  path={path}
+                  canCancelRuns={canCancelRuns}
+                  canReplayRuns={canReplayRuns}
+                />
               </TableRow>
             );
           })
@@ -511,7 +524,17 @@ export function TaskRunsTable({
   );
 }
 
-function RunActionsCell({ run, path }: { run: NextRunListItem; path: string }) {
+function RunActionsCell({
+  run,
+  path,
+  canCancelRuns,
+  canReplayRuns,
+}: {
+  run: NextRunListItem;
+  path: string;
+  canCancelRuns: boolean;
+  canReplayRuns: boolean;
+}) {
   const location = useLocation();
 
   if (!run.isCancellable && !run.isReplayable) return <TableCell to={path}>{""}</TableCell>;
@@ -527,57 +550,85 @@ function RunActionsCell({ run, path }: { run: NextRunListItem; path: string }) {
             leadingIconClassName="text-blue-500"
             title="View run"
           />
-          {run.isCancellable && (
-            <Dialog>
-              <DialogTrigger
-                asChild
-                className="size-6 rounded-sm p-1 text-text-dimmed transition hover:bg-charcoal-700 hover:text-text-bright"
-              >
-                <Button
-                  variant="small-menu-item"
-                  LeadingIcon={NoSymbolIcon}
-                  leadingIconClassName="text-error"
-                  fullWidth
-                  textAlignLeft
-                  className="w-full px-1.5 py-[0.9rem]"
+          {run.isCancellable &&
+            (canCancelRuns ? (
+              <Dialog>
+                <DialogTrigger
+                  asChild
+                  className="size-6 rounded-sm p-1 text-text-dimmed transition hover:bg-charcoal-700 hover:text-text-bright"
                 >
-                  Cancel run
-                </Button>
-              </DialogTrigger>
-              <CancelRunDialog
-                runFriendlyId={run.friendlyId}
-                redirectPath={`${location.pathname}${location.search}`}
-              />
-            </Dialog>
-          )}
-          {run.isReplayable && (
-            <Dialog>
-              <DialogTrigger
-                asChild
-                className="h-6 w-6 rounded-sm p-1 text-text-dimmed transition hover:bg-charcoal-700 hover:text-text-bright"
+                  <Button
+                    variant="small-menu-item"
+                    LeadingIcon={NoSymbolIcon}
+                    leadingIconClassName="text-error"
+                    fullWidth
+                    textAlignLeft
+                    className="w-full px-1.5 py-[0.9rem]"
+                  >
+                    Cancel run
+                  </Button>
+                </DialogTrigger>
+                <CancelRunDialog
+                  runFriendlyId={run.friendlyId}
+                  redirectPath={`${location.pathname}${location.search}`}
+                />
+              </Dialog>
+            ) : (
+              <Button
+                variant="small-menu-item"
+                LeadingIcon={NoSymbolIcon}
+                leadingIconClassName="text-error"
+                fullWidth
+                textAlignLeft
+                className="w-full px-1.5 py-[0.9rem]"
+                disabled
+                tooltip="You don't have permission to cancel runs"
               >
-                <Button
-                  variant="small-menu-item"
-                  LeadingIcon={ArrowPathIcon}
-                  leadingIconClassName="text-success"
-                  fullWidth
-                  textAlignLeft
-                  className="w-full px-1.5 py-[0.9rem]"
+                Cancel run
+              </Button>
+            ))}
+          {run.isReplayable &&
+            (canReplayRuns ? (
+              <Dialog>
+                <DialogTrigger
+                  asChild
+                  className="h-6 w-6 rounded-sm p-1 text-text-dimmed transition hover:bg-charcoal-700 hover:text-text-bright"
                 >
-                  Replay run…
-                </Button>
-              </DialogTrigger>
-              <ReplayRunDialog
-                runFriendlyId={run.friendlyId}
-                failedRedirect={`${location.pathname}${location.search}`}
-              />
-            </Dialog>
-          )}
+                  <Button
+                    variant="small-menu-item"
+                    LeadingIcon={ArrowPathIcon}
+                    leadingIconClassName="text-success"
+                    fullWidth
+                    textAlignLeft
+                    className="w-full px-1.5 py-[0.9rem]"
+                  >
+                    Replay run…
+                  </Button>
+                </DialogTrigger>
+                <ReplayRunDialog
+                  runFriendlyId={run.friendlyId}
+                  failedRedirect={`${location.pathname}${location.search}`}
+                />
+              </Dialog>
+            ) : (
+              <Button
+                variant="small-menu-item"
+                LeadingIcon={ArrowPathIcon}
+                leadingIconClassName="text-success"
+                fullWidth
+                textAlignLeft
+                className="w-full px-1.5 py-[0.9rem]"
+                disabled
+                tooltip="You don't have permission to replay runs"
+              >
+                Replay run…
+              </Button>
+            ))}
         </>
       }
       hiddenButtons={
         <>
-          {run.isCancellable && (
+          {run.isCancellable && canCancelRuns && (
             <SimpleTooltip
               button={
                 <Dialog>
@@ -598,10 +649,10 @@ function RunActionsCell({ run, path }: { run: NextRunListItem; path: string }) {
               disableHoverableContent
             />
           )}
-          {run.isCancellable && run.isReplayable && (
+          {run.isCancellable && canCancelRuns && run.isReplayable && canReplayRuns && (
             <div className="mx-0.5 h-6 w-px bg-grid-dimmed" />
           )}
-          {run.isReplayable && (
+          {run.isReplayable && canReplayRuns && (
             <SimpleTooltip
               button={
                 <Dialog>
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.errors.$fingerprint/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.errors.$fingerprint/route.tsx
@@ -36,6 +36,7 @@ import { PageBody } from "~/components/layout/AppLayout";
 import { DirectionSchema, ListPagination } from "~/components/ListPagination";
 import { LogsVersionFilter } from "~/components/logs/LogsVersionFilter";
 import { LinkButton } from "~/components/primitives/Buttons";
+import { PermissionLink } from "~/components/primitives/PermissionLink";
 import { Callout } from "~/components/primitives/Callout";
 import { CopyableText } from "~/components/primitives/CopyableText";
 import { DateTime, RelativeDateTime } from "~/components/primitives/DateTime";
@@ -74,6 +75,8 @@ import {
 import { type NextRunList } from "~/presenters/v3/NextRunListPresenter.server";
 import { clickhouseFactory } from "~/services/clickhouse/clickhouseFactoryInstance.server";
 import { requireUser, requireUserId } from "~/services/session.server";
+import { rbac } from "~/services/rbac.server";
+import { checkPermissions } from "~/services/routeBuilders/permissions.server";
 import { cn } from "~/utils/cn";
 import {
   EnvironmentParamSchema,
@@ -282,19 +285,41 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
     )
     .catch(() => ({ data: [] as ErrorGroupActivity, versions: [] as string[] }));
 
+  // Display flags for the row-menu and bulk-replay controls — the cancel/
+  // replay action routes enforce write:runs independently. Permissive in OSS.
+  const runAuth = await rbac.authenticateSession(request, {
+    userId,
+    organizationId: project.organizationId,
+  });
+  const runPermissions = runAuth.ok
+    ? checkPermissions(runAuth.ability, {
+        canCancelRuns: { action: "write", resource: { type: "runs" } },
+        canReplayRuns: { action: "write", resource: { type: "runs" } },
+      })
+    : { canCancelRuns: true, canReplayRuns: true };
+
   return typeddefer({
     data: detailPromise,
     activity: activityPromise,
     organizationSlug,
     projectParam,
     envParam,
     fingerprint,
+    ...runPermissions,
   });
 };
 
 export default function Page() {
-  const { data, activity, organizationSlug, projectParam, envParam, fingerprint } =
-    useTypedLoaderData<typeof loader>();
+  const {
+    data,
+    activity,
+    organizationSlug,
+    projectParam,
+    envParam,
+    fingerprint,
+    canCancelRuns,
+    canReplayRuns,
+  } = useTypedLoaderData<typeof loader>();
 
   const location = useOptimisticLocation();
   const searchParams = new URLSearchParams(location.search);
@@ -387,6 +412,8 @@ export default function Page() {
                   projectParam={projectParam}
                   envParam={envParam}
                   fingerprint={fingerprint}
+                  canCancelRuns={canCancelRuns}
+                  canReplayRuns={canReplayRuns}
                 />
               );
             }}
@@ -405,6 +432,8 @@ function ErrorGroupDetail({
   projectParam,
   envParam,
   fingerprint,
+  canCancelRuns,
+  canReplayRuns,
 }: {
   errorGroup: ErrorGroupSummary | undefined;
   runList: NextRunList | undefined;
@@ -413,6 +442,8 @@ function ErrorGroupDetail({
   projectParam: string;
   envParam: string;
   fingerprint: string;
+  canCancelRuns: boolean;
+  canReplayRuns: boolean;
 }) {
   const { value, values } = useSearchParams();
   const organization = useOrganization();
@@ -482,7 +513,9 @@ function ErrorGroupDetail({
                   >
                     View all runs
                   </LinkButton>
-                  <LinkButton
+                  <PermissionLink
+                    hasPermission={canReplayRuns}
+                    noPermissionTooltip="You don't have permission to replay runs"
                     variant="secondary/small"
                     to={v3CreateBulkActionPath(
                       organization,
@@ -495,7 +528,7 @@ function ErrorGroupDetail({
                     LeadingIcon={ListCheckedIcon}
                   >
                     Bulk replay…
-                  </LinkButton>
+                  </PermissionLink>
                   <ListPagination list={runList} />
                 </div>
               )}
@@ -515,6 +548,8 @@ function ErrorGroupDetail({
                 isLoading={false}
                 variant="dimmed"
                 additionalTableState={{ errorId: ErrorId.toFriendlyId(fingerprint) }}
+                canCancelRuns={canCancelRuns}
+                canReplayRuns={canReplayRuns}
               />
             ) : (
               <div className="flex flex-1 flex-col items-center justify-center gap-3">
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs._index/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs._index/route.tsx
