fix(webapp): let an impersonating admin preview the Queue Metrics UI (#4736)

## Summary

The Queue Metrics dashboard UI is gated by a per-org feature flag, so
there was no way to look at it for a real org without turning it on for
every member of that org. An admin impersonating into an org now sees
the metrics UI there regardless of the flag, so it can be checked
against real data before anyone else in the org sees it.

Nothing changes for a normal session: a member of an org whose flag is
off still gets the classic Queues page, and the gated sub-routes still
404.

## Design

The gate had no request and only resolved the org flag. It now takes the
request and resolves impersonation itself, rather than each caller
computing a boolean and passing it in, so the rule lives in one place
and a new call site cannot forget it. Seven call sites gate on this,
which is exactly why.

Two things narrow the bypass:

- It keys on **impersonation**, not `user.admin`. Impersonation is
scoped to one org and is deliberate; keying on admin status would
silently hand every admin the preview in their own day-to-day orgs.
- It yields to the **view-as-user** toggle. That toggle exists so an
impersonating admin can see what the member sees, and unreleased UI
leaking through it would make it lie. Suppressing a read-only view there
stays inside the display-only contract in `hasAdminDisplayAccess` (added
in #4421).

The bypass also stays behind the gate's existing org-membership lookup.
Since the acting user id is the impersonation target, that lookup is
what keeps the preview confined to the org actually being impersonated
into.

Verified end-to-end against a running instance across the matrix: member
with the flag off gets the classic view and 404s; the same org under
impersonation gets the metrics view and a 200; flipping view-as-user
returns it to the member's exact experience and back; and the flag-on
path is unchanged. An admin who is merely a member, not impersonating,
still gets the classic view.

One thing worth flagging: a few route comments say that with the flag
off no metrics reads fire. That remains true for every member session
and for the org as a whole, but an admin actively previewing does
exercise that org's real Redis and ClickHouse reads. That is inherent to
previewing, and bounded to one admin session.

Author: ericallam

apps/webapp/app/presenters/v3/RunQueueMetricsPresenter.server.ts

@@ -41,6 +41,7 @@ const DELAY_GRID_MS = 5 * 60 * 1000;
  * waiting to start, live counts and recent delay percentiles. Null when flag off.
  */
 export async function resolveRunQueueMetrics(options: {
+  request: Request;
   userId: string;
   organizationSlug: string;
   projectParam: string;
@@ -52,10 +53,10 @@ export async function resolveRunQueueMetrics(options: {
     queue: { name: string; concurrencyKey?: string | null };
   };
 }): Promise<RunQueueMetrics | null> {
-  const { userId, organizationSlug, projectParam, envParam, run } = options;
+  const { request, userId, organizationSlug, projectParam, envParam, run } = options;
 
   try {
-    if (!(await canAccessQueueMetricsUi({ userId, organizationSlug }))) {
+    if (!(await canAccessQueueMetricsUi({ request, userId, organizationSlug }))) {
       return null;
     }
 

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

@@ -63,7 +63,7 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   // URL), so gate it per-org like the rest of the Queue Metrics view.
   if (
     dashboardKey === "queues" &&
-    !(await canAccessQueueMetricsUi({ userId: user.id, organizationSlug }))
+    !(await canAccessQueueMetricsUi({ request, userId: user.id, organizationSlug }))
   ) {
     throw new Response(undefined, { status: 404, statusText: "Not found" });
   }

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

@@ -170,7 +170,11 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
 
   // Per-org gate for the metrics UI. When off, this org gets the classic Queues page and
   // no metrics query fires.
-  const queueMetricsUiEnabled = await canAccessQueueMetricsUi({ userId, organizationSlug });
+  const queueMetricsUiEnabled = await canAccessQueueMetricsUi({
+    request,
+    userId,
+    organizationSlug,
+  });
 
   const maxPeriodDays = queueMetricsUiEnabled
     ? await queueMetricsMaxPeriodDays(environment.organizationId)

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

@@ -106,7 +106,7 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
 
   // This whole page is part of the metrics UI; gate it per-org (the list already hides
   // the only link to it, this is defense in depth).
-  if (!(await canAccessQueueMetricsUi({ userId, organizationSlug }))) {
+  if (!(await canAccessQueueMetricsUi({ request, userId, organizationSlug }))) {
     throw new Response(undefined, { status: 404, statusText: "Not found" });
   }
 

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

@@ -159,7 +159,7 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   // Live queue counts for the sidebar Queue property (flag on only; the property itself
   // is not rendered without them, so flag off = no extra reads and no UI change).
   let queueMetrics: { live: QueueLiveCounts; ids: QueueMetricIds } | null = null;
-  if (task.queue && (await canAccessQueueMetricsUi({ userId, organizationSlug }))) {
+  if (task.queue && (await canAccessQueueMetricsUi({ request, userId, organizationSlug }))) {
     const queueName = task.queue.name;
     const [lengths, concurrency] = await Promise.all([
       engine.lengthOfQueues(environment, [queueName]),

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

@@ -119,7 +119,7 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   // Live queue counts (two O(1) Redis reads) shown in the sidebar; history charts fetch
   // client-side through the metric resource. Flag off = no extra reads at all.
   let queueMetrics: { live: QueueLiveCounts; ids: QueueMetricIds } | null = null;
-  if (task.queue && (await canAccessQueueMetricsUi({ userId, organizationSlug }))) {
+  if (task.queue && (await canAccessQueueMetricsUi({ request, userId, organizationSlug }))) {
     const queueName = task.queue.name;
     const [lengths, concurrency] = await Promise.all([
       engine.lengthOfQueues(environment, [queueName]),

apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam.spans.$spanParam/route.tsx

@@ -171,6 +171,7 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
     // `type === "run" | "span"` discriminant downstream in `SpanView`.
     if (result.type === "run") {
       const queueMetrics = await resolveRunQueueMetrics({
+        request,
         userId,
         organizationSlug,
         projectParam,

apps/webapp/app/routes/resources.queues.concurrency-keys.ts

@@ -107,6 +107,7 @@ export const action = async ({ request }: ActionFunctionArgs) => {
   // this endpoint's data isn't reachable for orgs that can't see the UI. 404 (not 403) to hide it.
   if (
     !(await canAccessQueueMetricsUi({
+      request,
       userId,
       organizationSlug: environment.organization.slug,
     }))

apps/webapp/app/utils/queueMetricsUiAccess.test.ts

@@ -0,0 +1,54 @@
+import { describe, expect, it } from "vitest";
+import { resolveQueueMetricsUiAccess } from "./queueMetricsUiAccess";
+
+describe("resolveQueueMetricsUiAccess", () => {
+  it("allows access when the org flag is on", () => {
+    expect(
+      resolveQueueMetricsUiAccess({
+        flagEnabled: true,
+        isImpersonating: false,
+        isViewingAsUser: false,
+      })
+    ).toBe(true);
+  });
+
+  it("denies access when the org flag is off and the session is not impersonating", () => {
+    expect(
+      resolveQueueMetricsUiAccess({
+        flagEnabled: false,
+        isImpersonating: false,
+        isViewingAsUser: false,
+      })
+    ).toBe(false);
+  });
+
+  it("allows an impersonating admin to preview the UI with the org flag off", () => {
+    expect(
+      resolveQueueMetricsUiAccess({
+        flagEnabled: false,
+        isImpersonating: true,
+        isViewingAsUser: false,
+      })
+    ).toBe(true);
+  });
+
+  it("withholds the preview while the admin is viewing as the user", () => {
+    expect(
+      resolveQueueMetricsUiAccess({
+        flagEnabled: false,
+        isImpersonating: true,
+        isViewingAsUser: true,
+      })
+    ).toBe(false);
+  });
+
+  it("keeps access for an org whose flag is on even while viewing as the user", () => {
+    expect(
+      resolveQueueMetricsUiAccess({
+        flagEnabled: true,
+        isImpersonating: true,
+        isViewingAsUser: true,
+      })
+    ).toBe(true);
+  });
+});

apps/webapp/app/utils/queueMetricsUiAccess.ts

@@ -0,0 +1,41 @@
+/**
+ * The rule for who sees the Queue Metrics dashboard UI.
+ *
+ * Kept pure and free of server-only imports so it can be unit tested directly,
+ * and so there is one definition of the rule for the server gate to share.
+ */
+
+/**
+ * Resolves the per-org feature flag against the request's impersonation state.
+ *
+ * The bypass exists so an admin can preview the UI for a real org before it is
+ * revealed to that org's members, which the flag alone cannot express: flags are
+ * org-scoped, so turning one on to look at the UI exposes every member of the org.
+ *
+ * It keys on impersonation rather than `user.admin` because impersonation is
+ * scoped to one org and is a deliberate act, where admin status is neither — an
+ * admin browsing their own orgs would otherwise silently get the preview
+ * everywhere.
+ *
+ * It yields to `isViewingAsUser`, which is the admin asking to see exactly what
+ * the member sees; previewing unreleased UI through that toggle would make it
+ * lie. Suppressing the preview there only ever hides a read-only view, so it
+ * stays inside the display-only contract that toggle is held to.
+ *
+ * The caller is responsible for only reporting `isImpersonating` for an
+ * impersonation into a member of the org being resolved, so the bypass cannot
+ * reach across orgs.
+ */
+export function resolveQueueMetricsUiAccess(options: {
+  flagEnabled: boolean;
+  isImpersonating: boolean;
+  isViewingAsUser: boolean;
+}): boolean {
+  const { flagEnabled, isImpersonating, isViewingAsUser } = options;
+
+  if (flagEnabled) {
+    return true;
+  }
+
+  return isImpersonating && !isViewingAsUser;
+}