@shipfox/client-workflows 12.0.2 → 13.0.0

package/src/components/workflow-run-list/workflow-run-list-view.tsx

@@ -1,73 +1,103 @@
 import {TimeTickerProvider} from '@shipfox/react-ui/time-ticker';
+import {Header} from '@shipfox/react-ui/typography';
 import {cn} from '@shipfox/react-ui/utils';
-import {useState} from 'react';
-import {runMatchesSearch, runMatchesStatusFilter} from './run-display.js';
+import {useId, useMemo, useState} from 'react';
+import {
+  applyWorkflowRunFilterPatch,
+  clearWorkflowRunFilters,
+  hasWorkflowRunFilters,
+  type WorkflowRunFilterPatch,
+  type WorkflowRunsSearch,
+} from '#routes/inputs.js';
+import {runMatchesFilters, workflowRunFacets} from './run-display.js';
 import type {WorkflowRunListViewProps} from './types.js';
+import {WorkflowRunFilters} from './workflow-run-filters.js';
 import {WorkflowRunListContent} from './workflow-run-list-content.js';
-import {WorkflowRunListHeader} from './workflow-run-list-header.js';
+
+const EMPTY_SEARCH: WorkflowRunsSearch = {};
 
 export function WorkflowRunListView({
   runs,
   query,
-  workspaceId,
-  projectId,
-  selectedWorkflowRunId,
+  workspaceSlug,
+  projectSlug,
   className,
-  search = '',
-  statusFilter = 'all',
+  search = EMPTY_SEARCH,
   onFiltersChange,
+  onClearFilters,
+  hasNextPage = false,
+  isFetchingNextPage = false,
+  isFetchNextPageError = false,
+  onLoadMore,
 }: WorkflowRunListViewProps) {
-  const [localSearch, setLocalSearch] = useState(search);
-  const [localStatusFilter, setLocalStatusFilter] = useState(statusFilter);
+  const headingId = useId();
+  const [localSearch, setLocalSearch] = useState<WorkflowRunsSearch>(search);
   const currentSearch = onFiltersChange ? search : localSearch;
-  const currentStatusFilter = onFiltersChange ? statusFilter : localStatusFilter;
 
-  const filteredRuns = runs.filter((run) => {
-    if (!runMatchesStatusFilter(run.status, currentStatusFilter)) return false;
-    return runMatchesSearch(run, currentSearch);
-  });
+  const filteredRuns = useMemo(
+    () => runs.filter((run) => runMatchesFilters(run, currentSearch)),
+    [runs, currentSearch],
+  );
+  const facets = useMemo(() => workflowRunFacets(runs, currentSearch), [runs, currentSearch]);
+  const hasActiveFilters = hasWorkflowRunFilters(currentSearch);
+
+  function handleFiltersChange(patch: WorkflowRunFilterPatch) {
+    if (onFiltersChange) onFiltersChange(patch);
+    else setLocalSearch((previous) => applyWorkflowRunFilterPatch(previous, patch));
+  }
 
   function handleClearFilters() {
-    if (onFiltersChange) onFiltersChange({});
-    else {
-      setLocalSearch('');
-      setLocalStatusFilter('all');
-    }
+    // Uncontrolled, the view owns the filters, so it clears them itself and still reports the
+    // change; a caller that passes only `onClearFilters` would otherwise see nothing happen.
+    if (!onFiltersChange) setLocalSearch(clearWorkflowRunFilters);
+    else if (!onClearFilters) onFiltersChange(CLEAR_ALL_FILTERS);
+    onClearFilters?.();
   }
 
   return (
     <TimeTickerProvider intervalMs={1000} reducedMotionIntervalMs={10_000}>
-      <aside
-        className={cn(
-          'flex w-304 shrink-0 flex-col border-r border-border-neutral-base bg-background-subtle-base',
-          className,
-        )}
-        aria-label="Workflow runs"
+      <section
+        aria-labelledby={headingId}
+        className={cn('flex min-h-0 min-w-0 flex-1 flex-col gap-12', className)}
       >
-        <WorkflowRunListHeader
-          query={currentSearch}
-          onQueryChange={(next) => {
-            if (onFiltersChange)
-              onFiltersChange({...(next ? {search: next} : {}), status: currentStatusFilter});
-            else setLocalSearch(next);
-          }}
-          statusFilter={currentStatusFilter}
-          onStatusFilterChange={(next) => {
-            if (onFiltersChange)
-              onFiltersChange({...(currentSearch ? {search: currentSearch} : {}), status: next});
-            else setLocalStatusFilter(next);
-          }}
+        {/* The tab strip above already reads "Runs", so the page heading is for structure and
+            assistive tech rather than a second visible title competing with it. */}
+        <Header id={headingId} variant="h1" className="sr-only">
+          Workflow runs
+        </Header>
+
+        <WorkflowRunFilters
+          search={currentSearch}
+          facets={facets}
+          onChange={handleFiltersChange}
+          onClear={handleClearFilters}
+          hasActiveFilters={hasActiveFilters}
         />
+
         <WorkflowRunListContent
           query={query}
           totalRuns={runs.length}
           runs={filteredRuns}
-          workspaceId={workspaceId}
-          projectId={projectId}
-          selectedWorkflowRunId={selectedWorkflowRunId}
+          workspaceSlug={workspaceSlug}
+          projectSlug={projectSlug}
+          hasActiveFilters={hasActiveFilters}
           onClearFilters={handleClearFilters}
+          hasNextPage={hasNextPage}
+          isFetchingNextPage={isFetchingNextPage}
+          isFetchNextPageError={isFetchNextPageError}
+          {...(onLoadMore ? {onLoadMore} : {})}
         />
-      </aside>
+      </section>
     </TimeTickerProvider>
   );
 }
+
+const CLEAR_ALL_FILTERS: WorkflowRunFilterPatch = {
+  search: undefined,
+  status: undefined,
+  branch: undefined,
+  actor: undefined,
+  event: undefined,
+  after: undefined,
+  before: undefined,
+};

package/src/components/workflow-run-list/workflow-run-list.stories.tsx

@@ -1,9 +1,10 @@
+import type {JobStatusDto} from '@shipfox/api-workflows-dto';
 import {Code} from '@shipfox/react-ui/typography';
 import type {Meta, StoryObj} from '@storybook/react';
 import type {ReactNode} from 'react';
 import {expect, userEvent, within} from 'storybook/test';
 import type {WorkflowRunListItem, WorkflowRunStatus} from '#core/workflow-run.js';
-import {sequencedWorkflowRunListItem} from '#test/fixtures/workflow-run.js';
+import {sequencedWorkflowRunListItem, workflowRunJobsFixture} from '#test/fixtures/workflow-run.js';
 import type {WorkflowRunListQuery} from './types.js';
 import {WorkflowRunListView} from './workflow-run-list-view.js';
 
@@ -21,30 +22,68 @@ function makeQuery(overrides: Partial<WorkflowRunListQuery> = {}): WorkflowRunLi
   };
 }
 
-function makeRun(status: WorkflowRunStatus, name: string, minutesAgo: number): WorkflowRunListItem {
-  return sequencedWorkflowRunListItem(status, name, minutesAgo);
+const JOB_STRIP_NAME = /jobs:/u;
+const STATUS_FILTER = /^Status\b.*filter$/u;
+
+let commitSequence = 0;
+
+// Distinct, plausible SHAs: a story that repeats one commit down the list reads as a bug in
+// the row rather than as sample data.
+function nextCommit(): string {
+  commitSequence += 1;
+  return (commitSequence * 0x9e3779b1).toString(16).padStart(8, '0').repeat(5).slice(0, 40);
+}
+
+function makeRun(
+  status: WorkflowRunStatus,
+  name: string,
+  minutesAgo: number,
+  {
+    ref = 'refs/heads/main',
+    actor = 'octocat',
+    jobs = [],
+  }: {ref?: string; actor?: string; jobs?: JobStatusDto[]} = {},
+): WorkflowRunListItem {
+  return sequencedWorkflowRunListItem(status, name, minutesAgo, {
+    workflow_name: name,
+    trigger_reference: {repository: 'acme/checkout-api', ref, commit: nextCommit(), actor},
+    ...workflowRunJobsFixture(jobs),
+  });
 }
 
 const SAMPLE_RUNS: WorkflowRunListItem[] = [
-  makeRun('running', 'deploy-web', 1),
-  makeRun('failed', 'integration-tests', 4),
-  makeRun('succeeded', 'build-image', 12),
-  makeRun('cancelled', 'lint-and-type', 38),
-  makeRun('pending', 'release-prod', 0),
-  makeRun('succeeded', 'release-production-multi-region-with-canary-and-smoke-tests', 95),
+  makeRun('running', 'deploy-web', 1, {
+    ref: 'refs/pull/482/head',
+    jobs: ['succeeded', 'succeeded', 'running', 'pending'],
+  }),
+  makeRun('failed', 'integration-tests', 4, {
+    ref: 'refs/heads/release/v2',
+    actor: 'hubot',
+    jobs: ['succeeded', 'failed', 'skipped', 'skipped'],
+  }),
+  makeRun('succeeded', 'build-image', 12, {jobs: ['succeeded', 'succeeded']}),
+  makeRun('cancelled', 'lint-and-type', 38, {
+    actor: 'dependabot',
+    jobs: ['succeeded', 'cancelled'],
+  }),
+  makeRun('pending', 'release-prod', 2),
+  makeRun('succeeded', 'release-production-multi-region-with-canary-and-smoke-tests', 95, {
+    ref: 'refs/tags/v2.14.0',
+    jobs: ['succeeded', 'succeeded', 'succeeded', 'succeeded', 'succeeded'],
+  }),
 ];
 
-// One story on the full rail. The data states (loading / empty / errors / runs) are
-// driven by args; search, status filter, "clear filters" and "no matches" are live in
-// the rendered toolbar since the view owns that state. The decorator gives the rail a
-// real height so `flex-1` content scrolls the way it does in the app shell.
+// One story on the full-width page. The data states (loading / empty / errors / runs) are
+// driven by args; search, the filter menus, "clear filters" and "no matches" are live in the
+// rendered toolbar since the view owns that state. The decorator gives the list the 1120px
+// content cap and a real height, so `flex-1` scrolls the way it does in the app shell.
 const meta = {
   title: 'Workflows/WorkflowRunList',
   component: WorkflowRunListView,
   parameters: {layout: 'centered'},
   decorators: [
     (Story) => (
-      <div className="flex h-600">
+      <div className="flex h-600 w-[1120px] max-w-full bg-background-neutral-base p-24">
         <Story />
       </div>
     ),
@@ -52,8 +91,8 @@ const meta = {
   args: {
     runs: SAMPLE_RUNS,
     query: makeQuery(),
-    workspaceId: 'ws-demo',
-    projectId: 'proj-demo',
+    workspaceSlug: 'acme',
+    projectSlug: 'checkout-api',
   },
 } satisfies Meta<typeof WorkflowRunListView>;
 
@@ -62,8 +101,69 @@ type Story = StoryObj<typeof meta>;
 
 export const Playground: Story = {};
 
-export const Selected: Story = {
-  args: {selectedWorkflowRunId: SAMPLE_RUNS[1].id},
+/**
+ * The row under its one-line threshold, at the 720px a 768px viewport leaves the column.
+ *
+ * The row's breakpoints are container queries, so narrowing the wrapper is enough to reach
+ * this state: identity and numerics hold line one, provenance drops beneath, and the actor
+ * and job strip give up their columns. The filter row still renders inline because the sheet
+ * it collapses into is keyed to the viewport, not the container.
+ */
+export const NarrowLayout: Story = {
+  decorators: [
+    (Story) => (
+      <div className="flex w-[720px] max-w-full">
+        <Story />
+      </div>
+    ),
+  ],
+  play: async ({canvasElement}) => {
+    const canvas = within(canvasElement);
+
+    await expect(await canvas.findByText('deploy-web')).toBeVisible();
+    // The branch stays on the provenance line; the actor is the column that gives way. It is
+    // still in the DOM, so visibility is what distinguishes "dropped for width" from
+    // "never rendered". `dependabot` is the one actor a single run carries.
+    await expect(canvas.getByText('release/v2')).toBeVisible();
+    await expect(canvas.getByText('dependabot')).not.toBeVisible();
+    await expect(canvas.queryByRole('img', {name: JOB_STRIP_NAME})).not.toBeInTheDocument();
+  },
+};
+
+/**
+ * Row density against the three strip sizes the threshold has to survive: comfortably under
+ * it, comfortably over it, and far enough over that the overflow count carries the failure.
+ */
+export const JobStripDensity: Story = {
+  args: {
+    runs: [
+      makeRun('succeeded', 'two-jobs', 2, {jobs: ['succeeded', 'succeeded']}),
+      makeRun('failed', 'twelve-jobs', 6, {
+        jobs: [
+          'succeeded',
+          'succeeded',
+          'succeeded',
+          'failed',
+          'succeeded',
+          'succeeded',
+          'skipped',
+          'skipped',
+          'succeeded',
+          'succeeded',
+          'succeeded',
+          'succeeded',
+        ],
+      }),
+      makeRun('running', 'forty-jobs', 9, {
+        jobs: [
+          ...(Array.from({length: 8}, () => 'succeeded') as JobStatusDto[]),
+          ...(Array.from({length: 4}, () => 'running') as JobStatusDto[]),
+          'failed',
+          ...(Array.from({length: 27}, () => 'pending') as JobStatusDto[]),
+        ],
+      }),
+    ],
+  },
 };
 
 export const DataStates: Story = {
@@ -94,16 +194,36 @@ export const TestNoMatches: Story = {
     const canvas = within(canvasElement);
     await userEvent.type(canvas.getByLabelText('Search runs'), 'no-such-run');
     await expect(await canvas.findByText('No matching runs')).toBeInTheDocument();
+    await expect(canvas.getByRole('button', {name: 'Show all runs'})).toBeInTheDocument();
+  },
+};
+
+export const TestMultiSelectFilter: Story = {
+  play: async ({canvasElement}) => {
+    const canvas = within(canvasElement);
+    await userEvent.click(canvas.getByRole('button', {name: STATUS_FILTER}));
+    const menu = await within(document.body).findByRole('menu');
+    await userEvent.click(within(menu).getByRole('menuitemcheckbox', {name: 'Failed'}));
+    await userEvent.click(within(menu).getByRole('menuitemcheckbox', {name: 'Cancelled'}));
+    await userEvent.keyboard('{Escape}');
+
+    // Radix keeps the rest of the document `aria-hidden` until the menu finishes closing, so
+    // the trigger is queried with a retrying matcher rather than read on the next tick.
+    await expect(await canvas.findByRole('button', {name: STATUS_FILTER})).toHaveTextContent(
+      'Status · 2',
+    );
+    await expect(canvas.getByText('integration-tests')).toBeInTheDocument();
+    await expect(canvas.queryByText('build-image')).not.toBeInTheDocument();
   },
 };
 
 function StateExample({label, children}: {label: string; children: ReactNode}) {
   return (
-    <div className="flex w-304 flex-col gap-8">
+    <div className="flex min-w-0 flex-col gap-8">
       <Code variant="label" className="text-foreground-neutral-subtle">
         {label}
       </Code>
-      <div className="flex h-560 rounded-8 border border-border-neutral-base bg-background-neutral-base">
+      <div className="flex h-560 rounded-8 border border-border-neutral-base bg-background-neutral-base p-16">
         {children}
       </div>
     </div>

package/src/components/workflow-run-list/workflow-run-list.tsx

@@ -1,19 +1,26 @@
-import {useMemo} from 'react';
+import {useCallback, useMemo} from 'react';
 import type {WorkflowRunListItem} from '#core/workflow-run.js';
 import {useWorkflowRunsInfiniteQuery} from '#hooks/api/workflow-runs.js';
 import type {WorkflowRunListProps} from './types.js';
 import {WorkflowRunListView} from './workflow-run-list-view.js';
 
 export function WorkflowRunList({
-  workspaceId,
   projectId,
-  selectedWorkflowRunId,
+  workspaceSlug,
+  projectSlug,
   className,
-  search = '',
-  statusFilter = 'all',
+  search,
   onFiltersChange,
+  onClearFilters,
+  hasNextPage,
+  isFetchingNextPage,
+  isFetchNextPageError,
+  onLoadMore,
 }: WorkflowRunListProps) {
   const query = useWorkflowRunsInfiniteQuery(projectId, {});
+  const handleLoadMore = useCallback(() => {
+    void query.fetchNextPage();
+  }, [query.fetchNextPage]);
   const runs = useMemo<WorkflowRunListItem[]>(
     () => query.data?.pages.flatMap((page) => page.runs) ?? [],
     [query.data],
@@ -23,13 +30,16 @@ export function WorkflowRunList({
     <WorkflowRunListView
       runs={runs}
       query={query}
-      workspaceId={workspaceId}
-      projectId={projectId}
-      selectedWorkflowRunId={selectedWorkflowRunId}
+      workspaceSlug={workspaceSlug}
+      projectSlug={projectSlug}
       className={className}
-      search={search}
-      statusFilter={statusFilter}
+      {...(search ? {search} : {})}
       {...(onFiltersChange ? {onFiltersChange} : {})}
+      {...(onClearFilters ? {onClearFilters} : {})}
+      hasNextPage={hasNextPage ?? query.hasNextPage}
+      isFetchingNextPage={isFetchingNextPage ?? query.isFetchingNextPage}
+      isFetchNextPageError={isFetchNextPageError ?? query.isFetchNextPageError}
+      onLoadMore={onLoadMore ?? handleLoadMore}
     />
   );
 }