fix(webapp): don't reload runs list when toggling bulk action inspector

Prevent runs list revalidation and loading states when toggling the
bulk action inspector. Filter, pagination, and explicit refresh
behavior are unchanged.

Author: kathiekiwi

.server-changes/runs-bulk-action-no-reload.md

@@ -0,0 +1,6 @@
+---
+area: webapp
+type: fix
+---
+
+Stop reloading the runs list when opening or closing the bulk action inspector

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

@@ -1,7 +1,7 @@
 import { BeakerIcon, BookOpenIcon } from "@heroicons/react/24/solid";
-import { type MetaFunction, useNavigation, useRevalidator } from "@remix-run/react";
+import { type MetaFunction, useLocation, useNavigation, useRevalidator } from "@remix-run/react";
 import { type LoaderFunctionArgs } from "@remix-run/server-runtime";
-import { Suspense } from "react";
+import { Suspense, useState } from "react";
 import {
   TypedAwait,
   typeddefer,
@@ -56,7 +56,6 @@ import { cn } from "~/utils/cn";
 import {
   docsPath,
   EnvironmentParamSchema,
-  v3CreateBulkActionPath,
   v3ProjectPath,
   v3TestPath,
   v3TestTaskPath,
@@ -65,8 +64,11 @@ import { throwNotFound } from "~/utils/httpErrors";
 import { ListPagination } from "../../components/ListPagination";
 import { CreateBulkActionInspector } from "../resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.bulkaction";
 import { Callout } from "~/components/primitives/Callout";
+import { isRunsListLoading, shouldRevalidateRunsList } from "./shouldRevalidateRunsList";
 import { useRunsLiveReload } from "./useRunsLiveReload";
 
+export { shouldRevalidateRunsList as shouldRevalidate };
+
 export const meta: MetaFunction = () => {
   return [
     {
@@ -209,8 +211,9 @@ function RunsList({
   filters: TaskRunListSearchFilters;
 }) {
   const revalidator = useRevalidator();
+  const location = useLocation();
   const navigation = useNavigation();
-  const isLoading = navigation.state !== "idle";
+  const isLoading = isRunsListLoading(navigation, location.search);
   const organization = useOrganization();
   const project = useProject();
   const environment = useEnvironment();
@@ -244,7 +247,7 @@ function RunsList({
     shortcut: { key: "r" },
     action: (e) => {
       replace({
-        bulkInspector: "true",
+        bulkInspector: "show",
         action: "replay",
         mode: selectedItems.size > 0 ? "selected" : undefined,
       });
@@ -254,14 +257,21 @@ function RunsList({
     shortcut: { key: "c" },
     action: (e) => {
       replace({
-        bulkInspector: "true",
+        bulkInspector: "show",
         action: "cancel",
         mode: selectedItems.size > 0 ? "selected" : undefined,
       });
     },
   });
 
   const isShowingBulkActionInspector = has("bulkInspector") && list.hasAnyRuns;
+  const [isBulkInspectorPanelCollapsed, setIsBulkInspectorPanelCollapsed] = useState(
+    !isShowingBulkActionInspector
+  );
+  // Keep content mounted until onCollapseChange reports the panel is fully collapsed.
+  const showBulkInspectorContent =
+    isShowingBulkActionInspector || !isBulkInspectorPanelCollapsed;
+
   return (
     <ResizablePanelGroup orientation="horizontal" className="max-h-full">
       <ResizablePanel id="runs-main" min={"100px"}>
@@ -310,39 +320,41 @@ function RunsList({
                         </Button>
                       </span>
                     )}
-                    {!isShowingBulkActionInspector && (
-                      <LinkButton
-                        variant="secondary/small"
-                        to={v3CreateBulkActionPath(
-                          organization,
-                          project,
-                          environment,
-                          filters,
-                          selectedItems.size > 0 ? "selected" : undefined
-                        )}
-                        LeadingIcon={ListCheckedIcon}
-                        className={selectedItems.size > 0 ? "pr-1" : undefined}
-                        tooltip={
-                          <div className="-mr-1 flex items-center gap-3 text-xs text-text-dimmed">
-                            <div className="flex items-center gap-0.5">
-                              <span>Replay</span>
-                              <ShortcutKey shortcut={{ key: "r" }} variant={"small"} />
-                            </div>
-                            <div className="flex items-center gap-0.5">
-                              <span>Cancel</span>
-                              <ShortcutKey shortcut={{ key: "c" }} variant={"small"} />
-                            </div>
+                    {/* Stay mounted while the inspector is open to avoid toolbar layout shift. */}
+                    <Button
+                      variant="secondary/small"
+                      disabled={isShowingBulkActionInspector}
+                      onClick={() =>
+                        replace({
+                          bulkInspector: "show",
+                          mode: selectedItems.size > 0 ? "selected" : undefined,
+                        })
+                      }
+                      LeadingIcon={ListCheckedIcon}
+                      className={cn(
+                        selectedItems.size > 0 ? "pr-1" : undefined,
+                        isShowingBulkActionInspector && "pointer-events-none invisible"
+                      )}
+                      tooltip={
+                        <div className="-mr-1 flex items-center gap-3 text-xs text-text-dimmed">
+                          <div className="flex items-center gap-0.5">
+                            <span>Replay</span>
+                            <ShortcutKey shortcut={{ key: "r" }} variant={"small"} />
                           </div>
-                        }
-                      >
-                        <span className="flex items-center gap-x-1 whitespace-nowrap text-text-bright">
-                          <span>Bulk action</span>
-                          {selectedItems.size > 0 && (
-                            <Badge variant="rounded">{selectedItems.size}</Badge>
-                          )}
-                        </span>
-                      </LinkButton>
-                    )}
+                          <div className="flex items-center gap-0.5">
+                            <span>Cancel</span>
+                            <ShortcutKey shortcut={{ key: "c" }} variant={"small"} />
+                          </div>
+                        </div>
+                      }
+                    >
+                      <span className="flex items-center gap-x-1 whitespace-nowrap text-text-bright">
+                        <span>Bulk action</span>
+                        {selectedItems.size > 0 && (
+                          <Badge variant="rounded">{selectedItems.size}</Badge>
+                        )}
+                      </span>
+                    </Button>
                     <ListPagination list={list} />
                   </div>
                 </div>
@@ -374,12 +386,12 @@ function RunsList({
         className="overflow-hidden"
         collapsible
         collapsed={!isShowingBulkActionInspector}
-        onCollapseChange={() => {}}
+        onCollapseChange={setIsBulkInspectorPanelCollapsed}
         collapsedSize="0px"
         collapseAnimation={RESIZABLE_PANEL_ANIMATION}
       >
         <div className="h-full" style={{ minWidth: 400 }}>
-          {isShowingBulkActionInspector && (
+          {showBulkInspectorContent && (
             <CreateBulkActionInspector
               filters={filters}
               selectedItems={selectedItems}

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

@@ -0,0 +1,65 @@
+import type { Navigation, ShouldRevalidateFunction } from "@remix-run/react";
+
+/** Search params that only control the bulk-action inspector UI, not list data. */
+export const RUNS_BULK_INSPECTOR_UI_SEARCH_PARAMS = ["bulkInspector", "action", "mode"] as const;
+
+/** Returns a copy with bulk-inspector UI params removed. */
+export function stripBulkInspectorUiParams(params: URLSearchParams): URLSearchParams {
+  const stripped = new URLSearchParams(params);
+  for (const key of RUNS_BULK_INSPECTOR_UI_SEARCH_PARAMS) {
+    stripped.delete(key);
+  }
+  return stripped;
+}
+
+export function searchParamsEqualIgnoringBulkInspectorUiState(
+  current: URLSearchParams,
+  next: URLSearchParams
+) {
+  return (
+    stripBulkInspectorUiParams(current).toString() === stripBulkInspectorUiParams(next).toString()
+  );
+}
+
+/** True when navigation should show the runs table loading state (excludes bulk-inspector UI toggles). */
+export function isRunsListLoading(navigation: Navigation, currentSearch: string): boolean {
+  if (navigation.state === "idle" || !navigation.location) {
+    return false;
+  }
+
+  const currentParams = new URLSearchParams(currentSearch);
+  const nextParams = new URLSearchParams(navigation.location.search);
+
+  if (searchParamsEqualIgnoringBulkInspectorUiState(currentParams, nextParams)) {
+    return false;
+  }
+
+  return true;
+}
+
+/**
+ * Skip runs list loader revalidation when only bulk-inspector UI params change.
+ * Explicit revalidate() (unchanged URL) and filter/pagination changes still revalidate.
+ */
+export const shouldRevalidateRunsList: ShouldRevalidateFunction = ({
+  currentUrl,
+  nextUrl,
+  defaultShouldRevalidate,
+}) => {
+  if (currentUrl.pathname !== nextUrl.pathname) {
+    return defaultShouldRevalidate;
+  }
+
+  const currentParams = new URLSearchParams(currentUrl.search);
+  const nextParams = new URLSearchParams(nextUrl.search);
+
+  if (currentParams.toString() === nextParams.toString()) {
+    return defaultShouldRevalidate;
+  }
+
+  if (searchParamsEqualIgnoringBulkInspectorUiState(currentParams, nextParams)) {
+    return false;
+  }
+
+  return defaultShouldRevalidate;
+};

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

@@ -4,8 +4,9 @@ import { useTypedFetcher } from "remix-typedjson";
 import { useInterval } from "~/hooks/useInterval";
 import type { NextRunListItem } from "~/presenters/v3/NextRunListPresenter.server";
 import type { loader as liveRunsLoader } from "../resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.live";
+import { stripBulkInspectorUiParams } from "./shouldRevalidateRunsList";
 
-const RUNS_SEARCH_PARAMS_TO_REMOVE = ["cursor", "direction", "bulkInspector", "action", "mode"];
+const RUNS_PAGINATION_SEARCH_PARAMS = ["cursor", "direction"] as const;
 const RUNS_POLL_INTERVAL_MS = 3000;
 /** Check for new runs every N poll ticks (~6s at 3s interval). */
 const NEW_RUNS_EVERY_N_POLL_TICKS = 2;
@@ -30,8 +31,8 @@ function maxCreatedAtMs(runs: ListedRun[]): number | undefined {
 }
 
 function filterParamsWithoutPagination(search: string) {
-  const params = new URLSearchParams(search);
-  for (const key of RUNS_SEARCH_PARAMS_TO_REMOVE) {
+  const params = stripBulkInspectorUiParams(new URLSearchParams(search));
+  for (const key of RUNS_PAGINATION_SEARCH_PARAMS) {
     params.delete(key);
   }
   return params;

apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.bulkaction.tsx

@@ -23,7 +23,7 @@ import {
   AccordionItem,
   AccordionTrigger,
 } from "~/components/primitives/Accordion";
-import { Button, LinkButton } from "~/components/primitives/Buttons";
+import { Button } from "~/components/primitives/Buttons";
 import { CheckboxWithLabel } from "~/components/primitives/Checkbox";
 import {
   Dialog,
@@ -51,10 +51,11 @@ import { redirectWithErrorMessage, redirectWithSuccessMessage } from "~/models/m
 import { findProjectBySlug } from "~/models/project.server";
 import { findEnvironmentBySlug } from "~/models/runtimeEnvironment.server";
 import { CreateBulkActionPresenter } from "~/presenters/v3/CreateBulkActionPresenter.server";
+import { RUNS_BULK_INSPECTOR_UI_SEARCH_PARAMS } from "~/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs._index/shouldRevalidateRunsList";
 import { logger } from "~/services/logger.server";
 import { requireUserId } from "~/services/session.server";
 import { cn } from "~/utils/cn";
-import { EnvironmentParamSchema, v3BulkActionPath, v3RunsPath } from "~/utils/pathBuilder";
+import { EnvironmentParamSchema, v3BulkActionPath } from "~/utils/pathBuilder";
 import { BulkActionService } from "~/v3/services/bulk/BulkActionV2.server";
 
 export async function loader({ request, params }: LoaderFunctionArgs) {
@@ -187,7 +188,7 @@ export function CreateBulkActionInspector({
   const project = useProject();
   const environment = useEnvironment();
   const fetcher = useTypedFetcher<typeof loader>();
-  const { value, replace } = useSearchParams();
+  const { value, replace, del } = useSearchParams();
   const [action, setAction] = useState<BulkActionAction>(
     bulkActionActionFromString(value("action"))
   );
@@ -208,9 +209,6 @@ export function CreateBulkActionInspector({
 
   const data = fetcher.data != null ? fetcher.data : undefined;
 
-  const closedSearchParams = new URLSearchParams(location.search);
-  closedSearchParams.delete("bulkInspector");
-
   const impactedCountElement =
     mode === "selected" ? selectedItems.size : <EstimatedCount count={data?.count} />;
 
@@ -225,13 +223,10 @@ export function CreateBulkActionInspector({
       <div className="grid h-full max-h-full grid-rows-[2.5rem_1fr_3.25rem] overflow-hidden bg-background-bright">
         <div className="mx-3 flex items-center justify-between gap-2 border-b border-grid-dimmed">
           <Header2 className="whitespace-nowrap">Create a bulk action</Header2>
-          <LinkButton
-            to={`${v3RunsPath(
-              organization,
-              project,
-              environment
-            )}?${closedSearchParams.toString()}`}
+          <Button
+            type="button"
             variant="minimal/small"
+            onClick={() => del([...RUNS_BULK_INSPECTOR_UI_SEARCH_PARAMS])}
             TrailingIcon={ExitIcon}
             shortcut={{ key: "esc" }}
             shortcutPosition="before-trailing-icon"