@shipfox/client-workflows 12.0.1 → 13.0.0

package/src/components/workflow-run-list/job-status-strip.tsx

@@ -0,0 +1,189 @@
+import {Tooltip, TooltipContent, TooltipTrigger} from '@shipfox/react-ui/tooltip';
+import {Code, Text} from '@shipfox/react-ui/typography';
+import {cn} from '@shipfox/react-ui/utils';
+import {getWorkflowStatusVisual} from '#components/workflow-status/status-visuals.js';
+import {WorkflowStatusIcon} from '#components/workflow-status/workflow-status-icon.js';
+import type {JobStatus, WorkflowRunJobSummary, WorkflowRunJobs} from '#core/workflow-run.js';
+
+/**
+ * How many glyphs fit the strip's column before it starts costing the run name width.
+ *
+ * Sized so the widest case still fits the row's 160px strip column: seven 12px glyphs with
+ * 3px gaps is 102px, and the overflow indicator adds a glyph plus a count of at most five
+ * monospace characters, about 56px. Overshooting does not wrap, it paints over the duration
+ * column. This sits under the API's preview bound, so resizing the strip is a change here.
+ */
+const MAX_VISIBLE_JOBS = 7;
+const GLYPH_SIZE = 12;
+const MAX_TOOLTIP_JOB_NAMES = 6;
+
+/**
+ * Above this the overflow count is abbreviated.
+ *
+ * Nothing caps a workflow's job count, so an exact count is unbounded in width and would
+ * eventually push the strip over its column. Abbreviating keeps the label at most five
+ * characters for any magnitude, and the exact figure stays in the tooltip and the strip's
+ * accessible name, which is where a precise number is actually read.
+ */
+const MAX_EXACT_OVERFLOW_COUNT = 999;
+const COMPACT_COUNT_FORMAT = new Intl.NumberFormat('en', {
+  notation: 'compact',
+  maximumFractionDigits: 1,
+});
+
+// Worst-first, so the overflow glyph reports the most alarming thing it is standing in for.
+// A strip that hides a failure behind eight green discs would be worse than no strip at all.
+const STATUS_SEVERITY: Record<JobStatus, number> = {
+  failed: 5,
+  running: 4,
+  pending: 3,
+  cancelled: 2,
+  skipped: 1,
+  succeeded: 0,
+};
+
+const NOTABLE_STATUSES: readonly JobStatus[] = ['failed', 'running'];
+
+export interface JobStatusStripProps {
+  jobs: WorkflowRunJobs;
+  className?: string | undefined;
+}
+
+/**
+ * A run's jobs as a row of status glyphs, in graph order.
+ *
+ * This is the reason the list is worth its width: it answers "where did this run fail"
+ * without opening the run. Glyphs are silent to assistive tech and carry no tooltip of their
+ * own; the strip speaks once, as a summary, so a 40-job run does not read out 40 labels.
+ *
+ * What it draws comes from the preview; what it says comes from the counts, which cover every
+ * job including those the server never sent. That split is what lets the overflow glyph
+ * report a failure sitting past the preview instead of quietly dropping it.
+ */
+export function JobStatusStrip({jobs, className}: JobStatusStripProps) {
+  if (jobs.total === 0) return null;
+
+  const visible = jobs.preview.slice(0, MAX_VISIBLE_JOBS);
+  const hiddenCount = jobs.total - visible.length;
+  const overflowStatus = worstHiddenStatus(jobs, visible);
+  const summary = jobStatusSummary(jobs);
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <span
+          role="img"
+          aria-label={summary}
+          className={cn('inline-flex items-center gap-3', className)}
+        >
+          <span aria-hidden="true" className="inline-flex items-center gap-3">
+            {visible.map((job) => (
+              <WorkflowStatusIcon
+                key={job.id}
+                status={job.status}
+                size={GLYPH_SIZE}
+                // One ripple per running job, on every row, would turn a calm list into a
+                // field of pulses. The run's own glyph already carries the live edge.
+                ripple={false}
+                tooltip={false}
+              />
+            ))}
+            {hiddenCount > 0 && overflowStatus ? (
+              <span className="inline-flex items-center gap-2">
+                <WorkflowStatusIcon
+                  status={overflowStatus}
+                  size={GLYPH_SIZE}
+                  ripple={false}
+                  tooltip={false}
+                />
+                <Code
+                  as="span"
+                  variant="label"
+                  className="tabular-nums text-foreground-neutral-muted"
+                >
+                  +{overflowCountLabel(hiddenCount)}
+                </Code>
+              </span>
+            ) : null}
+          </span>
+        </span>
+      </TooltipTrigger>
+      <TooltipContent>
+        <JobStatusStripTooltip jobs={jobs} summary={summary} />
+      </TooltipContent>
+    </Tooltip>
+  );
+}
+
+function JobStatusStripTooltip({jobs, summary}: {jobs: WorkflowRunJobs; summary: string}) {
+  // Naming the jobs that need attention is the whole point of hovering; succeeded jobs are
+  // left to the counts so the tooltip stays a glance rather than a list. Only previewed jobs
+  // can be named, but the count of those left over is read off the totals, so a failure past
+  // the preview is still accounted for rather than silently missing.
+  const named = jobs.preview
+    .filter((job) => NOTABLE_STATUSES.includes(job.status))
+    .slice(0, MAX_TOOLTIP_JOB_NAMES);
+  const notableTotal = NOTABLE_STATUSES.reduce((total, status) => total + countOf(jobs, status), 0);
+  const remaining = notableTotal - named.length;
+
+  return (
+    <span className="block max-w-[280px]">
+      <Text as="span" size="xs" className="block">
+        {summary}
+      </Text>
+      {named.map((job) => (
+        <Code as="span" variant="label" key={job.id} className="mt-2 block truncate">
+          {getWorkflowStatusVisual(job.status).label.toLowerCase()} · {job.name ?? job.key}
+        </Code>
+      ))}
+      {remaining > 0 ? (
+        <Text as="span" size="xs" className="mt-2 block text-foreground-neutral-muted">
+          and {remaining} more
+        </Text>
+      ) : null}
+    </span>
+  );
+}
+
+/** "12 jobs: 9 succeeded, 2 failed, 1 running" — a count is not an accessible name on its own. */
+export function jobStatusSummary(jobs: WorkflowRunJobs): string {
+  const breakdown = [...jobs.statusCounts]
+    .sort((left, right) => STATUS_SEVERITY[right.status] - STATUS_SEVERITY[left.status])
+    .map(({status, count}) => `${count} ${getWorkflowStatusVisual(status).label.toLowerCase()}`)
+    .join(', ');
+
+  return `${jobs.total} ${jobs.total === 1 ? 'job' : 'jobs'}: ${breakdown}`;
+}
+
+/**
+ * The worst status among the jobs the strip is not drawing, found by subtracting what it
+ * draws from the run's totals rather than by inspecting jobs it was never sent.
+ */
+function worstHiddenStatus(
+  jobs: WorkflowRunJobs,
+  visible: readonly WorkflowRunJobSummary[],
+): JobStatus | null {
+  const hidden = new Map(jobs.statusCounts.map(({status, count}) => [status, count]));
+  for (const job of visible) {
+    const remaining = (hidden.get(job.status) ?? 0) - 1;
+    if (remaining > 0) hidden.set(job.status, remaining);
+    else hidden.delete(job.status);
+  }
+
+  let worst: JobStatus | null = null;
+  for (const [status, count] of hidden) {
+    if (count <= 0) continue;
+    if (worst === null || STATUS_SEVERITY[status] > STATUS_SEVERITY[worst]) worst = status;
+  }
+  return worst;
+}
+
+export function overflowCountLabel(hiddenCount: number): string {
+  return hiddenCount <= MAX_EXACT_OVERFLOW_COUNT
+    ? String(hiddenCount)
+    : COMPACT_COUNT_FORMAT.format(hiddenCount);
+}
+
+function countOf(jobs: WorkflowRunJobs, status: JobStatus): number {
+  return jobs.statusCounts.find((entry) => entry.status === status)?.count ?? 0;
+}

package/src/components/workflow-run-list/run-display.test.ts

@@ -1,53 +1,192 @@
 import {workflowRunListItem} from '#test/fixtures/workflow-run.js';
-import {runMatchesSearch, runMatchesStatusFilter} from './run-display.js';
+import {
+  runCalendarDate,
+  runMatchesFilters,
+  runMatchesSearch,
+  runMatchesStatusFilter,
+  workflowRunFacets,
+} from './run-display.js';
 
 describe('runMatchesSearch', () => {
   test('matches every run on a blank query', () => {
-    const matches = runMatchesSearch(workflowRunListItem(), '   ');
+    expect(runMatchesSearch(workflowRunListItem(), '   ')).toBe(true);
+  });
+
+  test('matches the run name case-insensitively', () => {
+    expect(runMatchesSearch(workflowRunListItem({name: 'Deploy Web'}), 'deploy')).toBe(true);
+  });
+
+  test('matches the run number, which the search box promises', () => {
+    expect(runMatchesSearch(workflowRunListItem({number: 5184}), '5184')).toBe(true);
+  });
+
+  test('matches the run id, so a pasted identifier finds its row', () => {
+    expect(runMatchesSearch(workflowRunListItem({id: 'ABCD1234-X'}), 'abcd1234-x')).toBe(true);
+  });
+
+  test('matches the workflow name even when the run has a different display name', () => {
+    const run = workflowRunListItem({name: 'Deploy to production', workflow_name: 'CI'});
+
+    expect(runMatchesSearch(run, 'CI')).toBe(true);
+  });
+
+  test('matches the trigger label', () => {
+    const run = workflowRunListItem({trigger_source: 'github_acme', trigger_event: 'push'});
 
-    expect(matches).toBe(true);
+    expect(runMatchesSearch(run, 'github_acme · push')).toBe(true);
   });
 
-  test('matches case-insensitively across id, name, status, and trigger', () => {
+  test('matches the branch, so a ref is findable without opening its filter', () => {
     const run = workflowRunListItem({
-      id: 'ABCD1234-X',
-      name: 'Deploy Production',
-      status: 'running',
-      trigger_provider: 'github',
-      trigger_source: 'github_acme',
-      trigger_event: 'push',
+      trigger_reference: {
+        repository: 'acme/api',
+        ref: 'refs/heads/release/v2',
+        commit: 'abcdef1234567890',
+        actor: null,
+      },
     });
 
-    expect(runMatchesSearch(run, 'abcd1234-x')).toBe(true);
-    expect(runMatchesSearch(run, 'deploy production')).toBe(true);
-    expect(runMatchesSearch(run, 'RUNNING')).toBe(true);
-    expect(runMatchesSearch(run, 'github_acme · push')).toBe(true);
+    expect(runMatchesSearch(run, 'release/v2')).toBe(true);
   });
 
-  test('returns false when nothing in the run contains the query', () => {
-    const matches = runMatchesSearch(workflowRunListItem(), 'no-such-run');
+  test('matches the short commit, which is the form the row shows', () => {
+    const run = workflowRunListItem({
+      trigger_reference: {
+        repository: 'acme/api',
+        ref: 'refs/heads/main',
+        commit: 'abcdef1234567890',
+        actor: null,
+      },
+    });
+
+    expect(runMatchesSearch(run, 'abcdef1')).toBe(true);
+  });
 
-    expect(matches).toBe(false);
+  test('reports no match for an unrelated query', () => {
+    expect(runMatchesSearch(workflowRunListItem(), 'no-such-run')).toBe(false);
   });
 });
 
 describe('runMatchesStatusFilter', () => {
-  test('matches every status when the filter is "all"', () => {
-    expect(runMatchesStatusFilter('succeeded', 'all')).toBe(true);
-    expect(runMatchesStatusFilter('cancelled', 'all')).toBe(true);
+  test('accepts every status when nothing is selected', () => {
+    expect(runMatchesStatusFilter('succeeded', undefined)).toBe(true);
+    expect(runMatchesStatusFilter('succeeded', [])).toBe(true);
   });
 
-  test('"failed" matches only failed runs', () => {
-    expect(runMatchesStatusFilter('failed', 'failed')).toBe(true);
-    expect(runMatchesStatusFilter('running', 'failed')).toBe(false);
-    expect(runMatchesStatusFilter('succeeded', 'failed')).toBe(false);
+  test('accepts a run matching any one of several selected statuses', () => {
+    expect(runMatchesStatusFilter('failed', ['succeeded', 'failed'])).toBe(true);
+    expect(runMatchesStatusFilter('cancelled', ['succeeded', 'failed'])).toBe(false);
   });
 
-  test('"running" reads as in-progress and also covers pending runs', () => {
-    expect(runMatchesStatusFilter('running', 'running')).toBe(true);
-    expect(runMatchesStatusFilter('pending', 'running')).toBe(true);
-    expect(runMatchesStatusFilter('succeeded', 'running')).toBe(false);
-    expect(runMatchesStatusFilter('failed', 'running')).toBe(false);
-    expect(runMatchesStatusFilter('cancelled', 'running')).toBe(false);
+  test('treats running as in-progress so a freshly queued run is not hidden', () => {
+    expect(runMatchesStatusFilter('pending', ['running'])).toBe(true);
+    expect(runMatchesStatusFilter('running', ['running'])).toBe(true);
+    expect(runMatchesStatusFilter('succeeded', ['running'])).toBe(false);
   });
 });
+
+describe('runMatchesFilters', () => {
+  const run = workflowRunListItem({
+    name: 'deploy-web',
+    status: 'failed',
+    trigger_event: 'push',
+    created_at: '2026-05-07T12:00:00.000Z',
+    trigger_reference: {
+      repository: 'acme/api',
+      ref: 'refs/heads/main',
+      commit: 'abcdef1234567890',
+      actor: 'octocat',
+    },
+  });
+
+  test('accepts a run matching every active dimension at once', () => {
+    expect(
+      runMatchesFilters(run, {
+        search: 'deploy',
+        status: ['failed'],
+        branch: ['main'],
+        actor: ['octocat'],
+        event: ['push'],
+      }),
+    ).toBe(true);
+  });
+
+  test.each([
+    ['status', {status: ['succeeded' as const]}],
+    ['branch', {branch: ['release']}],
+    ['actor', {actor: ['someone-else']}],
+    ['event', {event: ['pull_request']}],
+    ['search', {search: 'unrelated'}],
+  ])('rejects a run failing the %s dimension alone', (_dimension, criteria) => {
+    expect(runMatchesFilters(run, criteria)).toBe(false);
+  });
+
+  test('rejects a run that has no value at all for an active dimension', () => {
+    const withoutReference = workflowRunListItem({trigger_reference: null});
+
+    expect(runMatchesFilters(withoutReference, {branch: ['main']})).toBe(false);
+    expect(runMatchesFilters(withoutReference, {actor: ['octocat']})).toBe(false);
+  });
+
+  test('treats both date bounds as inclusive', () => {
+    const date = runCalendarDate(run) as string;
+
+    expect(runMatchesFilters(run, {after: date, before: date})).toBe(true);
+  });
+
+  test('excludes a run outside either bound', () => {
+    const date = runCalendarDate(run) as string;
+
+    expect(runMatchesFilters(run, {after: shiftDay(date, 1)})).toBe(false);
+    expect(runMatchesFilters(run, {before: shiftDay(date, -1)})).toBe(false);
+  });
+});
+
+describe('workflowRunFacets', () => {
+  test('collects sorted, deduplicated options from the loaded runs', () => {
+    const runs = [
+      workflowRunListItem({
+        id: '11111111-1111-4111-8111-000000000001',
+        trigger_event: 'push',
+        trigger_reference: {
+          repository: 'acme/api',
+          ref: 'refs/heads/main',
+          commit: 'aaaaaaa',
+          actor: 'octocat',
+        },
+      }),
+      workflowRunListItem({
+        id: '11111111-1111-4111-8111-000000000002',
+        trigger_event: 'pull_request',
+        trigger_reference: {
+          repository: 'acme/api',
+          ref: 'refs/heads/main',
+          commit: 'bbbbbbb',
+          actor: 'hubot',
+        },
+      }),
+    ];
+
+    expect(workflowRunFacets(runs)).toEqual({
+      branch: ['main'],
+      actor: ['hubot', 'octocat'],
+      event: ['pull_request', 'push'],
+    });
+  });
+
+  test('keeps a selected value no loaded run carries, so a shared link keeps its chip', () => {
+    const facets = workflowRunFacets([workflowRunListItem({trigger_reference: null})], {
+      branch: ['release/v2'],
+    });
+
+    expect(facets.branch).toEqual(['release/v2']);
+  });
+});
+
+function shiftDay(date: string, days: number): string {
+  const [year, month, day] = date.split('-').map(Number) as [number, number, number];
+  const shifted = new Date(year, month - 1, day + days);
+  const shiftedMonth = String(shifted.getMonth() + 1).padStart(2, '0');
+  const shiftedDay = String(shifted.getDate()).padStart(2, '0');
+  return `${shifted.getFullYear()}-${shiftedMonth}-${shiftedDay}`;
+}

package/src/components/workflow-run-list/run-display.ts

@@ -1,10 +1,39 @@
-import type {WorkflowRunListItem, WorkflowRunStatus} from '#core/workflow-run.js';
-import type {WorkflowRunListStatusFilter} from './types.js';
+import {
+  type WorkflowRunListItem,
+  type WorkflowRunStatus,
+  workflowRunActor,
+  workflowRunBranchLabel,
+  workflowRunCommitLabel,
+} from '#core/workflow-run.js';
+import type {WorkflowRunListStatus, WorkflowRunsSearch} from '#routes/inputs.js';
+
+export type WorkflowRunFilterCriteria = Pick<
+  WorkflowRunsSearch,
+  'search' | 'status' | 'branch' | 'actor' | 'event' | 'after' | 'before'
+>;
+
+/** The dimensions whose options are read off the loaded runs rather than a fixed enum. */
+export type WorkflowRunFacetName = 'branch' | 'actor' | 'event';
+
+export type WorkflowRunFacets = Record<WorkflowRunFacetName, string[]>;
 
 export function runMatchesSearch(run: WorkflowRunListItem, query: string): boolean {
   const needle = query.trim().toLowerCase();
   if (needle === '') return true;
-  const haystack = `${run.id} ${run.name} ${run.status} ${run.triggerLabel}`.toLowerCase();
+  const haystack = [
+    run.id,
+    run.name,
+    run.workflowName,
+    run.status,
+    run.triggerLabel,
+    run.number?.toString(),
+    workflowRunBranchLabel(run),
+    workflowRunCommitLabel(run),
+    workflowRunActor(run),
+  ]
+    .filter(Boolean)
+    .join(' ')
+    .toLowerCase();
   return haystack.includes(needle);
 }
 
@@ -12,11 +41,89 @@ const IN_PROGRESS_STATUSES: ReadonlySet<WorkflowRunStatus> = new Set(['pending',
 
 export function runMatchesStatusFilter(
   status: WorkflowRunStatus,
-  filter: WorkflowRunListStatusFilter,
+  selected: readonly WorkflowRunListStatus[] | undefined,
+): boolean {
+  if (!selected || selected.length === 0) return true;
+  return selected.some((filter) => {
+    // "Running" reads as in-progress: it covers freshly-queued `pending` runs (including the
+    // optimistic manual run inserted on fire) so they are not hidden the moment it is on.
+    if (filter === 'running') return IN_PROGRESS_STATUSES.has(status);
+    return status === filter;
+  });
+}
+
+/**
+ * Applies every active filter to one run.
+ *
+ * Filtering runs over the pages already fetched, which is what the rail did before this page
+ * existed. Making the API honor the same parameters across full history is ENG-512's job; the
+ * predicates here are written against the same dimension names so that swap stays local.
+ */
+export function runMatchesFilters(
+  run: WorkflowRunListItem,
+  criteria: WorkflowRunFilterCriteria,
 ): boolean {
-  if (filter === 'all') return true;
-  // "Running" reads as in-progress: it covers freshly-queued `pending` runs (including the
-  // optimistic manual run inserted on fire) so they are not hidden the moment the filter is on.
-  if (filter === 'running') return IN_PROGRESS_STATUSES.has(status);
-  return status === filter;
+  if (!runMatchesStatusFilter(run.status, criteria.status)) return false;
+  if (!matchesFacet(criteria.branch, workflowRunBranchLabel(run))) return false;
+  if (!matchesFacet(criteria.actor, workflowRunActor(run))) return false;
+  if (!matchesFacet(criteria.event, run.triggerEvent)) return false;
+  if (!matchesDateBounds(run, criteria)) return false;
+  return runMatchesSearch(run, criteria.search ?? '');
+}
+
+/**
+ * Filter options read off the loaded runs.
+ *
+ * Values the user already selected are folded in even when no loaded run carries them, so a
+ * shared link never renders as though its own filter were unset.
+ */
+export function workflowRunFacets(
+  runs: readonly WorkflowRunListItem[],
+  criteria: WorkflowRunFilterCriteria = {},
+): WorkflowRunFacets {
+  return {
+    branch: facetValues(runs.map(workflowRunBranchLabel), criteria.branch),
+    actor: facetValues(runs.map(workflowRunActor), criteria.actor),
+    event: facetValues(
+      runs.map((run) => run.triggerEvent),
+      criteria.event,
+    ),
+  };
+}
+
+/**
+ * The run's local calendar date, which is both what the date filters bound and what the row's
+ * relative time is derived from, so a filtered result never contradicts what a row shows.
+ */
+export function runCalendarDate(run: Pick<WorkflowRunListItem, 'createdAt'>): string | null {
+  const date = new Date(run.createdAt);
+  if (Number.isNaN(date.getTime())) return null;
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+  const day = String(date.getDate()).padStart(2, '0');
+  return `${date.getFullYear()}-${month}-${day}`;
+}
+
+function matchesFacet(selected: readonly string[] | undefined, value: string | null): boolean {
+  if (!selected || selected.length === 0) return true;
+  return value !== null && selected.includes(value);
+}
+
+function matchesDateBounds(run: WorkflowRunListItem, criteria: WorkflowRunFilterCriteria): boolean {
+  if (!criteria.after && !criteria.before) return true;
+  const date = runCalendarDate(run);
+  if (date === null) return false;
+  // Both bounds are inclusive, and `YYYY-MM-DD` sorts correctly as text.
+  if (criteria.after && date < criteria.after) return false;
+  if (criteria.before && date > criteria.before) return false;
+  return true;
+}
+
+function facetValues(
+  values: readonly (string | null)[],
+  selected: readonly string[] | undefined,
+): string[] {
+  const present = values.filter((value): value is string => Boolean(value));
+  return [...new Set([...present, ...(selected ?? [])])].sort((left, right) =>
+    left.localeCompare(right),
+  );
 }

package/src/components/workflow-run-list/types.ts

@@ -1,28 +1,32 @@
 import type {QueryLoadErrorQuery} from '@shipfox/client-ui';
 import type {WorkflowRunListItem} from '#core/workflow-run.js';
+import type {WorkflowRunFilterPatch, WorkflowRunsSearch} from '#routes/inputs.js';
 
-export type WorkflowRunListStatusFilter = 'all' | 'failed' | 'running';
+export type WorkflowRunListQuery = QueryLoadErrorQuery & {isPending: boolean};
 
-export interface WorkflowRunListProps {
-  workspaceId: string;
-  projectId: string;
-  selectedWorkflowRunId?: string | undefined;
+interface WorkflowRunListCommonProps {
+  workspaceSlug?: string | undefined;
+  projectSlug?: string | undefined;
   className?: string | undefined;
-  search?: string;
-  statusFilter?: WorkflowRunListStatusFilter;
-  onFiltersChange?: (filters: {search?: string; status?: WorkflowRunListStatusFilter}) => void;
+  /**
+   * The parsed URL search. Pair with `onFiltersChange` to keep it in the URL; omit the
+   * handler and the view holds filter state itself, which is what stories and isolated tests
+   * mount against.
+   */
+  search?: WorkflowRunsSearch;
+  onFiltersChange?: (patch: WorkflowRunFilterPatch) => void;
+  onClearFilters?: () => void;
+  hasNextPage?: boolean;
+  isFetchingNextPage?: boolean;
+  isFetchNextPageError?: boolean;
+  onLoadMore?: () => void;
 }
 
-export type WorkflowRunListQuery = QueryLoadErrorQuery & {isPending: boolean};
+export interface WorkflowRunListProps extends WorkflowRunListCommonProps {
+  projectId: string;
+}
 
-export interface WorkflowRunListViewProps {
+export interface WorkflowRunListViewProps extends WorkflowRunListCommonProps {
   runs: WorkflowRunListItem[];
   query: WorkflowRunListQuery;
-  workspaceId: string;
-  projectId: string;
-  selectedWorkflowRunId?: string | undefined;
-  className?: string | undefined;
-  search?: string;
-  statusFilter?: WorkflowRunListStatusFilter;
-  onFiltersChange?: (filters: {search?: string; status?: WorkflowRunListStatusFilter}) => void;
 }