Add flow filter combobox to /runs page

ui-v2/src/components/flow-runs/flow-runs-list/flow-runs-filters/flow-filter.stories.tsx

@@ -0,0 +1,62 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { useState } from "react";
+import { FlowFilter } from "./flow-filter";
+
+const queryClient = new QueryClient({
+	defaultOptions: {
+		queries: {
+			retry: false,
+		},
+	},
+});
+
+const meta: Meta<typeof FlowFilter> = {
+	title: "Components/FlowRuns/FlowFilter",
+	component: FlowFilter,
+	decorators: [
+		(Story) => (
+			<QueryClientProvider client={queryClient}>
+				<div className="w-64">
+					<Story />
+				</div>
+			</QueryClientProvider>
+		),
+	],
+	parameters: {
+		docs: {
+			description: {
+				component:
+					"A combobox filter for selecting flows to filter flow runs by.",
+			},
+		},
+	},
+};
+
+export default meta;
+type Story = StoryObj<typeof FlowFilter>;
+
+const FlowFilterWithState = ({
+	initialSelectedFlows = new Set<string>(),
+}: {
+	initialSelectedFlows?: Set<string>;
+}) => {
+	const [selectedFlows, setSelectedFlows] =
+		useState<Set<string>>(initialSelectedFlows);
+	return (
+		<FlowFilter
+			selectedFlows={selectedFlows}
+			onSelectFlows={setSelectedFlows}
+		/>
+	);
+};
+
+export const Default: Story = {
+	render: () => <FlowFilterWithState />,
+};
+
+export const WithSelectedFlows: Story = {
+	render: () => (
+		<FlowFilterWithState initialSelectedFlows={new Set(["flow-1", "flow-2"])} />
+	),
+};

ui-v2/src/components/flow-runs/flow-runs-list/flow-runs-filters/flow-filter.test.tsx

@@ -0,0 +1,88 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { useState } from "react";
+import { beforeAll, describe, expect, it, vi } from "vitest";
+import { FlowFilter } from "./flow-filter";
+
+beforeAll(() => {
+	Object.defineProperty(HTMLElement.prototype, "scrollIntoView", {
+		value: vi.fn(),
+		configurable: true,
+		writable: true,
+	});
+});
+
+function renderWithQueryClient(ui: React.ReactElement) {
+	const queryClient = new QueryClient({
+		defaultOptions: { queries: { retry: false }, mutations: { retry: false } },
+	});
+	return render(
+		<QueryClientProvider client={queryClient}>{ui}</QueryClientProvider>,
+	);
+}
+
+describe("FlowFilter", () => {
+	const TestFlowFilter = ({
+		initialSelectedFlows = new Set<string>(),
+	}: {
+		initialSelectedFlows?: Set<string>;
+	}) => {
+		const [selectedFlows, setSelectedFlows] =
+			useState<Set<string>>(initialSelectedFlows);
+		return (
+			<FlowFilter
+				selectedFlows={selectedFlows}
+				onSelectFlows={setSelectedFlows}
+			/>
+		);
+	};
+
+	it("renders with 'All flows' when no flows are selected", () => {
+		renderWithQueryClient(<TestFlowFilter />);
+
+		expect(
+			screen.getByRole("button", { name: /filter by flow/i }),
+		).toBeVisible();
+		expect(screen.getByText("All flows")).toBeVisible();
+	});
+
+	it("opens dropdown and shows 'All flows' option", async () => {
+		const user = userEvent.setup();
+		renderWithQueryClient(<TestFlowFilter />);
+
+		await user.click(screen.getByRole("button", { name: /filter by flow/i }));
+
+		await waitFor(() => {
+			expect(screen.getByPlaceholderText("Search flows...")).toBeVisible();
+		});
+
+		expect(screen.getByRole("option", { name: /all flows/i })).toBeVisible();
+	});
+
+	it("shows search input in dropdown", async () => {
+		const user = userEvent.setup();
+		renderWithQueryClient(<TestFlowFilter />);
+
+		await user.click(screen.getByRole("button", { name: /filter by flow/i }));
+
+		await waitFor(() => {
+			expect(screen.getByPlaceholderText("Search flows...")).toBeVisible();
+		});
+	});
+
+	it("has 'All flows' checkbox checked by default", async () => {
+		const user = userEvent.setup();
+		renderWithQueryClient(<TestFlowFilter />);
+
+		await user.click(screen.getByRole("button", { name: /filter by flow/i }));
+
+		await waitFor(() => {
+			expect(screen.getByRole("option", { name: /all flows/i })).toBeVisible();
+		});
+
+		const allFlowsOption = screen.getByRole("option", { name: /all flows/i });
+		const allFlowsCheckbox = allFlowsOption.querySelector('[role="checkbox"]');
+		expect(allFlowsCheckbox).toHaveAttribute("data-state", "checked");
+	});
+});

ui-v2/src/components/flow-runs/flow-runs-list/flow-runs-filters/flow-filter.tsx

@@ -0,0 +1,154 @@
+import { useQuery } from "@tanstack/react-query";
+import { useDeferredValue, useMemo, useState } from "react";
+import { buildListFlowsQuery, type Flow } from "@/api/flows";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+	Combobox,
+	ComboboxCommandEmtpy,
+	ComboboxCommandGroup,
+	ComboboxCommandInput,
+	ComboboxCommandItem,
+	ComboboxCommandList,
+	ComboboxContent,
+	ComboboxTrigger,
+} from "@/components/ui/combobox";
+import { Typography } from "@/components/ui/typography";
+
+const MAX_FLOWS_DISPLAYED = 2;
+
+type FlowFilterProps = {
+	selectedFlows: Set<string>;
+	onSelectFlows: (flows: Set<string>) => void;
+};
+
+export const FlowFilter = ({
+	selectedFlows,
+	onSelectFlows,
+}: FlowFilterProps) => {
+	const [search, setSearch] = useState("");
+	const deferredSearch = useDeferredValue(search);
+
+	const { data: flows = [] } = useQuery(
+		buildListFlowsQuery({
+			flows: deferredSearch
+				? {
+						operator: "and_",
+						name: { like_: deferredSearch },
+					}
+				: undefined,
+			limit: 100,
+			offset: 0,
+			sort: "NAME_ASC",
+		}),
+	);
+
+	const { data: selectedFlowsData = [] } = useQuery(
+		buildListFlowsQuery(
+			{
+				flows:
+					selectedFlows.size > 0
+						? {
+								operator: "and_",
+								id: { any_: Array.from(selectedFlows) },
+							}
+						: undefined,
+				limit: selectedFlows.size || 1,
+				offset: 0,
+				sort: "NAME_ASC",
+			},
+			{ enabled: selectedFlows.size > 0 },
+		),
+	);
+
+	const handleSelectFlow = (flowId: string) => {
+		const updatedFlows = new Set(selectedFlows);
+		if (selectedFlows.has(flowId)) {
+			updatedFlows.delete(flowId);
+		} else {
+			updatedFlows.add(flowId);
+		}
+		onSelectFlows(updatedFlows);
+	};
+
+	const handleClearAll = () => {
+		onSelectFlows(new Set());
+	};
+
+	const renderSelectedFlows = () => {
+		if (selectedFlows.size === 0) {
+			return "All flows";
+		}
+
+		const selectedFlowNames = selectedFlowsData
+			.filter((flow) => selectedFlows.has(flow.id))
+			.map((flow) => flow.name);
+
+		const visible = selectedFlowNames.slice(0, MAX_FLOWS_DISPLAYED);
+		const extraCount = selectedFlowNames.length - MAX_FLOWS_DISPLAYED;
+
+		return (
+			<div className="flex flex-1 min-w-0 items-center gap-2">
+				<div className="flex flex-1 min-w-0 items-center gap-2 overflow-hidden">
+					<span className="truncate">{visible.join(", ")}</span>
+				</div>
+				{extraCount > 0 && (
+					<Typography variant="bodySmall" className="shrink-0">
+						+ {extraCount}
+					</Typography>
+				)}
+			</div>
+		);
+	};
+
+	const filteredFlows = useMemo(() => {
+		return flows.filter(
+			(flow: Flow) =>
+				!deferredSearch ||
+				flow.name.toLowerCase().includes(deferredSearch.toLowerCase()),
+		);
+	}, [flows, deferredSearch]);
+
+	return (
+		<Combobox>
+			<ComboboxTrigger
+				aria-label="Filter by flow"
+				selected={selectedFlows.size === 0}
+			>
+				{renderSelectedFlows()}
+			</ComboboxTrigger>
+			<ComboboxContent>
+				<ComboboxCommandInput
+					value={search}
+					onValueChange={setSearch}
+					placeholder="Search flows..."
+				/>
+				<ComboboxCommandList>
+					<ComboboxCommandEmtpy>No flows found</ComboboxCommandEmtpy>
+					<ComboboxCommandGroup>
+						<ComboboxCommandItem
+							aria-label="All flows"
+							onSelect={handleClearAll}
+							closeOnSelect={false}
+							value="__all__"
+						>
+							<Checkbox checked={selectedFlows.size === 0} />
+							All flows
+						</ComboboxCommandItem>
+						{filteredFlows.map((flow: Flow) => (
+							<ComboboxCommandItem
+								key={flow.id}
+								aria-label={flow.name}
+								onSelect={() => handleSelectFlow(flow.id)}
+								closeOnSelect={false}
+								value={flow.id}
+							>
+								<Checkbox checked={selectedFlows.has(flow.id)} />
+								{flow.name}
+							</ComboboxCommandItem>
+						))}
+					</ComboboxCommandGroup>
+				</ComboboxCommandList>
+			</ComboboxContent>
+		</Combobox>
+	);
+};

ui-v2/src/components/flow-runs/flow-runs-list/flow-runs-pagination.tsx

@@ -110,7 +110,7 @@ export const FlowRunsPagination = ({
 						/>
 					</PaginationItem>
 					<PaginationItem className="text-sm">
-						Page {pagination.page} of {pages}
+						Page {pages === 0 ? 0 : pagination.page} of {pages}
 					</PaginationItem>
 					<PaginationItem>
 						<PaginationNextButton

ui-v2/src/components/flow-runs/flow-runs-list/index.ts

@@ -7,6 +7,7 @@ export {
 	dateRangeValueToUrlState,
 	urlStateToDateRangeValue,
 } from "./flow-runs-filters/date-range-url-state";
+export { FlowFilter } from "./flow-runs-filters/flow-filter";
 export {
 	SORT_FILTERS,
 	type SortFilters,

ui-v2/src/components/runs/runs-page.stories.tsx

@@ -80,6 +80,7 @@ const RunsPageWithState = ({
 	initialFlowRunSearch = "",
 	initialSelectedStates = new Set<FlowRunState>(),
 	initialDateRange = {},
+	initialSelectedFlows = new Set<string>(),
 }: {
 	initialFlowRuns?: typeof MOCK_FLOW_RUNS;
 	initialFlowRunsCount?: number;
@@ -88,6 +89,7 @@ const RunsPageWithState = ({
 	initialFlowRunSearch?: string;
 	initialSelectedStates?: Set<FlowRunState>;
 	initialDateRange?: DateRangeUrlState;
+	initialSelectedFlows?: Set<string>;
 }) => {
 	const [tab, setTab] = useState<"flow-runs" | "task-runs">("flow-runs");
 	const [pagination, setPagination] = useState<PaginationState>({
@@ -102,6 +104,8 @@ const RunsPageWithState = ({
 	);
 	const [dateRange, setDateRange] =
 		useState<DateRangeUrlState>(initialDateRange);
+	const [selectedFlows, setSelectedFlows] =
+		useState<Set<string>>(initialSelectedFlows);
 
 	return (
 		<RunsPage
@@ -121,6 +125,8 @@ const RunsPageWithState = ({
 			onFlowRunSearchChange={setFlowRunSearch}
 			selectedStates={selectedStates}
 			onStateFilterChange={setSelectedStates}
+			selectedFlows={selectedFlows}
+			onFlowFilterChange={setSelectedFlows}
 			dateRange={dateRange}
 			onDateRangeChange={setDateRange}
 		/>

ui-v2/src/components/runs/runs-page.tsx

@@ -5,6 +5,7 @@ import type { FlowRunCardData } from "@/components/flow-runs/flow-run-card";
 import {
 	DateRangeFilter,
 	type DateRangeUrlState,
+	FlowFilter,
 	type FlowRunState,
 	FlowRunsList,
 	FlowRunsPagination,
@@ -47,6 +48,8 @@ type RunsPageProps = {
 	onFlowRunSearchChange: (search: string) => void;
 	selectedStates: Set<FlowRunState>;
 	onStateFilterChange: (states: Set<FlowRunState>) => void;
+	selectedFlows: Set<string>;
+	onFlowFilterChange: (flows: Set<string>) => void;
 	dateRange: DateRangeUrlState;
 	onDateRangeChange: (dateRange: DateRangeUrlState) => void;
 };
@@ -69,6 +72,8 @@ export const RunsPage = ({
 	onFlowRunSearchChange,
 	selectedStates,
 	onStateFilterChange,
+	selectedFlows,
+	onFlowFilterChange,
 	dateRange,
 	onDateRangeChange,
 }: RunsPageProps) => {
@@ -125,6 +130,12 @@ export const RunsPage = ({
 										onSelectFilter={onStateFilterChange}
 									/>
 								</div>
+								<div className="w-64">
+									<FlowFilter
+										selectedFlows={selectedFlows}
+										onSelectFlows={onFlowFilterChange}
+									/>
+								</div>
 								<DateRangeFilter
 									value={dateRange}
 									onValueChange={onDateRangeChange}