fix(webapp): address PR review feedback on region filter

Move regions to the org-layout loader and expose them via a useRegions
hook (mirroring useEnvironment), so every TaskRunsTable consumer (runs,
errors, schedules, waitpoints) renders the column with friendly names
and flag icons. Drops the resource loader and per-route region fetch.

Also fixes the "Clear all filters" button not appearing when only a
region filter is set (regions was missing from the hasFilters check).

Author: ericallam

apps/webapp/app/components/runs/v3/RunFilters.tsx

@@ -62,7 +62,7 @@ import { useShortcutKeys } from "~/hooks/useShortcutKeys";
 import { ShortcutKey } from "~/components/primitives/ShortcutKey";
 import { type loader as tagsLoader } from "~/routes/resources.environments.$envId.runs.tags";
 import { type loader as queuesLoader } from "~/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.queues";
-import { type loader as regionsLoader } from "~/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.regions";
+import { useRegions } from "~/hooks/useRegions";
 import { RegionLabel } from "./RegionLabel";
 import { type loader as versionsLoader } from "~/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.versions";
 import { Button } from "../../primitives/Buttons";
@@ -383,6 +383,7 @@ export function RunsFilters(props: RunFiltersProps) {
     searchParams.has("runId") ||
     searchParams.has("scheduleId") ||
     searchParams.has("queues") ||
+    searchParams.has("regions") ||
     searchParams.has("machines") ||
     searchParams.has("versions") ||
     searchParams.has("errorId") ||
@@ -1292,10 +1293,8 @@ function RegionsDropdown({
   searchValue: string;
   onClose?: () => void;
 }) {
-  const organization = useOrganization();
-  const project = useProject();
-  const environment = useEnvironment();
   const { values, replace } = useSearchParams();
+  const regions = useRegions();
 
   const handleChange = (values: string[]) => {
     clearSearchValue();
@@ -1308,41 +1307,29 @@ function RegionsDropdown({
 
   const selected = values("regions").filter((v) => v !== "");
 
-  const fetcher = useFetcher<typeof regionsLoader>();
-
-  useEffect(() => {
-    if (fetcher.state === "idle" && fetcher.data === undefined) {
-      fetcher.load(
-        `/resources/orgs/${organization.slug}/projects/${project.slug}/env/${environment.slug}/regions`
-      );
-    }
-  }, [fetcher.state, fetcher.data, organization.slug, project.slug, environment.slug]);
-
   const filtered = useMemo(() => {
     type RegionItem = { masterQueue: string; name: string; location?: string };
     const items: RegionItem[] = [];
 
     for (const masterQueue of selected) {
-      const known = fetcher.data?.regions.find((r) => r.masterQueue === masterQueue);
+      const known = regions.find((r) => r.masterQueue === masterQueue);
       if (!known) {
         items.push({ masterQueue, name: masterQueue });
       }
     }
 
-    if (fetcher.data) {
-      for (const region of fetcher.data.regions) {
-        if (!items.some((i) => i.masterQueue === region.masterQueue)) {
-          items.push({
-            masterQueue: region.masterQueue,
-            name: region.name,
-            location: region.location,
-          });
-        }
+    for (const region of regions) {
+      if (!items.some((i) => i.masterQueue === region.masterQueue)) {
+        items.push({
+          masterQueue: region.masterQueue,
+          name: region.name,
+          location: region.location,
+        });
       }
     }
 
     return matchSorter(items, searchValue, { keys: ["name", "masterQueue"] });
-  }, [searchValue, fetcher.data, selected.join(",")]);
+  }, [searchValue, regions, selected.join(",")]);
 
   return (
     <SelectProvider value={selected} setValue={handleChange} virtualFocus={true}>
@@ -1362,7 +1349,6 @@ function RegionsDropdown({
           render={(props) => (
             <div className="flex items-center justify-stretch">
               <input {...props} placeholder={"Filter by region..."} />
-              {fetcher.state === "loading" && <Spinner color="muted" />}
             </div>
           )}
         />
@@ -1378,9 +1364,7 @@ function RegionsDropdown({
                 </SelectItem>
               ))
             : null}
-          {filtered.length === 0 && fetcher.state !== "loading" && (
-            <SelectItem disabled>No regions found</SelectItem>
-          )}
+          {filtered.length === 0 && <SelectItem disabled>No regions found</SelectItem>}
         </SelectList>
       </SelectPopover>
     </SelectProvider>
@@ -1389,33 +1373,11 @@ function RegionsDropdown({
 
 function AppliedRegionsFilter() {
   const { values, del } = useSearchParams();
-  const organization = useOrganization();
-  const project = useProject();
   const environment = useEnvironment();
-  const fetcher = useFetcher<typeof regionsLoader>();
+  const knownRegions = useRegions();
 
   const regions = values("regions");
 
-  useEffect(() => {
-    if (
-      regions.length > 0 &&
-      !regions.every((v) => v === "") &&
-      fetcher.state === "idle" &&
-      fetcher.data === undefined
-    ) {
-      fetcher.load(
-        `/resources/orgs/${organization.slug}/projects/${project.slug}/env/${environment.slug}/regions`
-      );
-    }
-  }, [
-    regions.join(","),
-    fetcher.state,
-    fetcher.data,
-    organization.slug,
-    project.slug,
-    environment.slug,
-  ]);
-
   if (environment.type === "DEVELOPMENT") {
     return null;
   }
@@ -1425,7 +1387,7 @@ function AppliedRegionsFilter() {
   }
 
   const labels = regions.map((mq) => {
-    const match = fetcher.data?.regions.find((r) => r.masterQueue === mq);
+    const match = knownRegions.find((r) => r.masterQueue === mq);
     return match?.name ?? mq;
   });
 

apps/webapp/app/components/runs/v3/TaskRunsTable.tsx

@@ -23,6 +23,7 @@ import { useSelectedItems } from "~/components/primitives/SelectedItemsProvider"
 import { SimpleTooltip } from "~/components/primitives/Tooltip";
 import { TruncatedCopyableValue } from "~/components/primitives/TruncatedCopyableValue";
 import { useEnvironment } from "~/hooks/useEnvironment";
+import { useRegions } from "~/hooks/useRegions";
 import { useFeatures } from "~/hooks/useFeatures";
 import { useOrganization } from "~/hooks/useOrganizations";
 import { useProject } from "~/hooks/useProject";
@@ -73,7 +74,6 @@ type RunsTableProps = {
   variant?: TableVariant;
   disableAdjacentRows?: boolean;
   additionalTableState?: Record<string, string>;
-  regions?: { masterQueue: string; name: string; location?: string }[];
 };
 
 export function TaskRunsTable({
@@ -87,11 +87,9 @@ export function TaskRunsTable({
   allowSelection = false,
   variant = "dimmed",
   additionalTableState,
-  regions,
 }: RunsTableProps) {
-  const regionByMasterQueue = new Map(
-    (regions ?? []).map((r) => [r.masterQueue, r] as const)
-  );
+  const regions = useRegions();
+  const regionByMasterQueue = new Map(regions.map((r) => [r.masterQueue, r] as const));
   const organization = useOrganization();
   const project = useProject();
   const environment = useEnvironment();

apps/webapp/app/hooks/useRegions.tsx

@@ -0,0 +1,16 @@
+import { type UIMatch } from "@remix-run/react";
+import { type UseDataFunctionReturn } from "remix-typedjson";
+import type { loader as orgLoader } from "~/routes/_app.orgs.$organizationSlug/route";
+import { organizationMatchId } from "./useOrganizations";
+import { useTypedMatchesData } from "./useTypedMatchData";
+
+export type MatchedRegion = UseDataFunctionReturn<typeof orgLoader>["regions"][number];
+
+export function useRegions(matches?: UIMatch[]): MatchedRegion[] {
+  const routeMatch = useTypedMatchesData<typeof orgLoader>({
+    id: organizationMatchId,
+    matches,
+  });
+
+  return routeMatch?.regions ?? [];
+}

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

@@ -44,7 +44,6 @@ import { findProjectBySlug } from "~/models/project.server";
 import { findEnvironmentBySlug } from "~/models/runtimeEnvironment.server";
 import { getRunFiltersFromRequest } from "~/presenters/RunFilters.server";
 import { NextRunListPresenter } from "~/presenters/v3/NextRunListPresenter.server";
-import { RegionsPresenter } from "~/presenters/v3/RegionsPresenter.server";
 import { clickhouseClient } from "~/services/clickhouseInstance.server";
 import {
   setRootOnlyFilterPreference,
@@ -95,18 +94,6 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
     ...filters,
   });
 
-  const regionsPresenter = new RegionsPresenter();
-  const regions = await regionsPresenter
-    .call({ userId, projectSlug: project.slug })
-    .then(({ regions }) =>
-      regions.map((r) => ({
-        masterQueue: r.masterQueue,
-        name: r.name,
-        location: r.location,
-      }))
-    )
-    .catch(() => [] as { masterQueue: string; name: string; location?: string }[]);
-
   // Only persist rootOnly when no tasks are filtered. While a task filter is active,
   // the toggle's URL value can be a temporary auto-flip (or a user override scoped to
   // the current task filter), and we don't want either bleeding into the saved
@@ -125,14 +112,13 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
       data: list,
       rootOnlyDefault: filters.rootOnly,
       filters,
-      regions,
     },
     headers ? { headers } : undefined
   );
 };
 
 export default function Page() {
-  const { data, rootOnlyDefault, filters, regions } = useTypedLoaderData<typeof loader>();
+  const { data, rootOnlyDefault, filters } = useTypedLoaderData<typeof loader>();
   const { isConnected } = useDevPresence();
   const project = useProject();
   const environment = useEnvironment();
@@ -191,7 +177,6 @@ export default function Page() {
                       selectedItems={selectedItems}
                       rootOnlyDefault={rootOnlyDefault}
                       filters={filters}
-                      regions={regions}
                     />
                   );
                 }}
@@ -209,13 +194,11 @@ function RunsList({
   selectedItems,
   rootOnlyDefault,
   filters,
-  regions,
 }: {
   list: Awaited<UseDataFunctionReturn<typeof loader>["data"]>;
   selectedItems: Set<string>;
   rootOnlyDefault: boolean;
   filters: TaskRunListSearchFilters;
-  regions: { masterQueue: string; name: string; location?: string }[];
 }) {
   const navigation = useNavigation();
   const isLoading = navigation.state !== "idle";
@@ -324,7 +307,6 @@ function RunsList({
                   isLoading={isLoading}
                   allowSelection
                   rootOnlyDefault={rootOnlyDefault}
-                  regions={regions}
                 />
               </div>
             )}

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

@@ -7,6 +7,7 @@ import { prisma } from "~/db.server";
 import { useOptionalOrganization } from "~/hooks/useOrganizations";
 import { useTypedMatchesData } from "~/hooks/useTypedMatchData";
 import { OrganizationsPresenter } from "~/presenters/OrganizationsPresenter.server";
+import { RegionsPresenter, type Region } from "~/presenters/v3/RegionsPresenter.server";
 import { getImpersonationId } from "~/services/impersonation.server";
 import { getCachedUsage, getCurrentPlan } from "~/services/platform.v3.server";
 import { requireUser } from "~/services/session.server";
@@ -88,7 +89,10 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   firstDayOfNextMonth.setUTCDate(1);
   firstDayOfNextMonth.setUTCHours(0, 0, 0, 0);
 
-  const [plan, usage, customDashboards] = await Promise.all([
+  const shouldLoadRegions =
+    !!projectParam && !!environment && environment.type !== "DEVELOPMENT";
+
+  const [plan, usage, customDashboards, regions] = await Promise.all([
     getCurrentPlan(organization.id),
     getCachedUsage(organization.id, { from: firstDayOfMonth, to: firstDayOfNextMonth }),
     prisma.metricsDashboard.findMany({
@@ -100,6 +104,12 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
       },
       orderBy: { createdAt: "desc" },
     }),
+    shouldLoadRegions
+      ? new RegionsPresenter()
+          .call({ userId: user.id, projectSlug: projectParam! })
+          .then(({ regions }) => regions)
+          .catch(() => [] as Region[])
+      : Promise.resolve([] as Region[]),
   ]);
 
   let hasExceededFreeTier = false;
@@ -147,6 +157,7 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
     organization,
     project,
     environment,
+    regions,
     isImpersonating: !!impersonationId,
     currentPlan: { ...plan, v3Usage: { ...usage, hasExceededFreeTier, usagePercentage } },
     customDashboards: customDashboardsWithWidgetCount,