feat(webapp): move Display control next to pagination and add it to task run lists

Move the Display button out of the runs filter row to sit just left of the pagination controls, and surface it on the per-task, scheduled, agent and error run lists (in each Runs toolbar next to pagination) so columns can be customized there too.
This commit is contained in:
Eric Allam
2026-08-18 10:22:11 +01:00
parent 1517eb211e
commit 2d3140fb2b
7 changed files with 18 additions and 8 deletions
@@ -68,7 +68,6 @@ import { type loader as versionsLoader } from "~/routes/resources.orgs.$organiza
import { makeFriendlyIdValidator } from "~/utils/friendlyId";
import { Button } from "../../primitives/Buttons";
import { AIFilterInput } from "./AIFilterInput";
import { RunsDisplayOptions } from "./RunsDisplayOptions";
import { BulkActionTypeCombo } from "./BulkAction";
import { RegionLabel } from "./RegionLabel";
import {
@@ -416,7 +415,6 @@ export function RunsFilters(props: RunFiltersProps) {
/>
</Form>
)}
<RunsDisplayOptions />
</div>
);
}
@@ -128,7 +128,7 @@ export function RunsDisplayOptions() {
<>
<Popover>
<PopoverTrigger asChild>
<Button variant="secondary/small" LeadingIcon={ViewColumnsIcon} className="ml-auto">
<Button variant="secondary/small" LeadingIcon={ViewColumnsIcon}>
Display
</Button>
</PopoverTrigger>
@@ -39,6 +39,7 @@ import {
} from "~/presenters/v3/AgentDetailPresenter.server";
import { NextRunListPresenter } from "~/presenters/v3/NextRunListPresenter.server";
import { getRunColumnsForSelect } from "~/presenters/v3/runColumnsFromRequest.server";
import { RunsDisplayOptions } from "~/components/runs/v3/RunsDisplayOptions";
import { SessionListPresenter } from "~/presenters/v3/SessionListPresenter.server";
import { clickhouseFactory } from "~/services/clickhouse/clickhouseFactoryInstance.server";
import { getResizableSnapshot } from "~/services/resizablePanel.server";
@@ -337,11 +338,14 @@ export default function Page() {
</TypedAwait>
</Suspense>
) : (
<Suspense fallback={null}>
<TypedAwait resolve={runList} errorElement={null}>
{(list) => (list ? <ListPagination list={list} /> : null)}
</TypedAwait>
</Suspense>
<>
<RunsDisplayOptions />
<Suspense fallback={null}>
<TypedAwait resolve={runList} errorElement={null}>
{(list) => (list ? <ListPagination list={list} /> : null)}
</TypedAwait>
</Suspense>
</>
)}
</div>
</TabContainer>
@@ -75,6 +75,7 @@ import {
} from "~/presenters/v3/ErrorGroupPresenter.server";
import { type NextRunList } from "~/presenters/v3/NextRunListPresenter.server";
import { getRunColumnsForSelect } from "~/presenters/v3/runColumnsFromRequest.server";
import { RunsDisplayOptions } from "~/components/runs/v3/RunsDisplayOptions";
import { clickhouseFactory } from "~/services/clickhouse/clickhouseFactoryInstance.server";
import { requireUser, requireUserId } from "~/services/session.server";
import { rbac } from "~/services/rbac.server";
@@ -536,6 +537,7 @@ function ErrorGroupDetail({
>
Bulk replay
</PermissionLink>
<RunsDisplayOptions />
<ListPagination list={runList} />
</div>
)}
@@ -39,6 +39,7 @@ import { StepNumber } from "~/components/primitives/StepNumber";
import { TextLink } from "~/components/primitives/TextLink";
import { SimpleTooltip } from "~/components/primitives/Tooltip";
import { RunsFilters, type TaskRunListSearchFilters } from "~/components/runs/v3/RunFilters";
import { RunsDisplayOptions } from "~/components/runs/v3/RunsDisplayOptions";
import { TaskRunsTable } from "~/components/runs/v3/TaskRunsTable";
import { BULK_ACTION_RUN_LIMIT } from "~/consts";
import { $replica } from "~/db.server";
@@ -404,6 +405,7 @@ function RunsList({
)}
</span>
</Button>
<RunsDisplayOptions />
<ListPagination list={list} />
</div>
</div>
@@ -76,6 +76,7 @@ import { findProjectBySlug } from "~/models/project.server";
import { findEnvironmentBySlug } from "~/models/runtimeEnvironment.server";
import { NextRunListPresenter } from "~/presenters/v3/NextRunListPresenter.server";
import { getRunColumnsForSelect } from "~/presenters/v3/runColumnsFromRequest.server";
import { RunsDisplayOptions } from "~/components/runs/v3/RunsDisplayOptions";
import { ScheduleListPresenter } from "~/presenters/v3/ScheduleListPresenter.server";
import {
TaskDetailPresenter,
@@ -371,6 +372,7 @@ export default function Page() {
onClick={() => showNewRunsRef.current()}
/>
) : null}
<RunsDisplayOptions />
<Suspense fallback={null}>
<TypedAwait resolve={runList} errorElement={null}>
{(list) => (list ? <ListPagination list={list} /> : null)}
@@ -47,6 +47,7 @@ import { findProjectBySlug } from "~/models/project.server";
import { findEnvironmentBySlug } from "~/models/runtimeEnvironment.server";
import { NextRunListPresenter } from "~/presenters/v3/NextRunListPresenter.server";
import { getRunColumnsForSelect } from "~/presenters/v3/runColumnsFromRequest.server";
import { RunsDisplayOptions } from "~/components/runs/v3/RunsDisplayOptions";
import {
TaskDetailPresenter,
type TaskActivity,
@@ -268,6 +269,7 @@ export default function Page() {
onClick={() => showNewRunsRef.current()}
/>
) : null}
<RunsDisplayOptions />
<Suspense fallback={null}>
<TypedAwait resolve={runList} errorElement={null}>
{(list) => (list ? <ListPagination list={list} /> : null)}