@shipfox/client-workflows 12.0.2 → 14.0.0

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

@@ -0,0 +1,100 @@
+import {Button} from '@shipfox/react-ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from '@shipfox/react-ui/dropdown-menu';
+import {Text} from '@shipfox/react-ui/typography';
+import {cn} from '@shipfox/react-ui/utils';
+
+export interface WorkflowRunFilterOption {
+  value: string;
+  label: string;
+}
+
+export interface WorkflowRunFilterMenuProps {
+  label: string;
+  options: readonly WorkflowRunFilterOption[];
+  selected: readonly string[];
+  onChange: (next: string[]) => void;
+  /** Shown in place of the option list when nothing is loaded to filter by. */
+  emptyMessage: string;
+  className?: string | undefined;
+}
+
+/**
+ * One multi-select filter.
+ *
+ * The trigger states its own value rather than only a count, because a toolbar of five
+ * buttons that all read "Branch" forces the user to open each one to find out what is on.
+ * Checked items keep the menu open: choosing two branches should not cost two round trips.
+ */
+export function WorkflowRunFilterMenu({
+  label,
+  options,
+  selected,
+  onChange,
+  emptyMessage,
+  className,
+}: WorkflowRunFilterMenuProps) {
+  const active = selected.length > 0;
+  const triggerText = triggerLabel(label, options, selected);
+
+  function toggle(value: string) {
+    onChange(
+      selected.includes(value) ? selected.filter((entry) => entry !== value) : [...selected, value],
+    );
+  }
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          type="button"
+          variant="secondary"
+          size="sm"
+          iconRight="arrowDownSLine"
+          // Mirrors the visible label so the selected value is not sighted-only; an aria-label
+          // replaces the button's contents as its accessible name rather than adding to them.
+          aria-label={`${triggerText} filter`}
+          className={cn('max-w-[200px]', !active && 'text-foreground-neutral-subtle', className)}
+        >
+          <span className="min-w-0 truncate">{triggerText}</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start" className="max-h-[320px] w-[240px] overflow-y-auto">
+        {options.length === 0 ? (
+          <Text as="p" size="xs" className="px-8 py-6 text-foreground-neutral-muted">
+            {emptyMessage}
+          </Text>
+        ) : (
+          options.map((option) => (
+            <DropdownMenuCheckboxItem
+              key={option.value}
+              checked={selected.includes(option.value)}
+              closeOnSelect={false}
+              onSelect={() => toggle(option.value)}
+            >
+              {option.label}
+            </DropdownMenuCheckboxItem>
+          ))
+        )}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+function triggerLabel(
+  label: string,
+  options: readonly WorkflowRunFilterOption[],
+  selected: readonly string[],
+): string {
+  if (selected.length === 0) return label;
+  if (selected.length === 1) {
+    const [value] = selected;
+    const option = options.find((entry) => entry.value === value);
+    return `${label}: ${option?.label ?? value}`;
+  }
+  return `${label} · ${selected.length}`;
+}

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

@@ -0,0 +1,243 @@
+import {Button} from '@shipfox/react-ui/button';
+import {DateRangePicker} from '@shipfox/react-ui/date-range-picker';
+import {Icon} from '@shipfox/react-ui/icon';
+import {Input} from '@shipfox/react-ui/input';
+import {Label} from '@shipfox/react-ui/label';
+import {
+  Sheet,
+  SheetBody,
+  SheetContent,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from '@shipfox/react-ui/sheet';
+import {useState} from 'react';
+import {getWorkflowStatusVisual} from '#components/workflow-status/status-visuals.js';
+import {
+  WORKFLOW_RUN_LIST_STATUSES,
+  type WorkflowRunFilterPatch,
+  type WorkflowRunListStatus,
+  type WorkflowRunsSearch,
+} from '#routes/inputs.js';
+import type {WorkflowRunFacets} from './run-display.js';
+import {WorkflowRunFilterMenu, type WorkflowRunFilterOption} from './workflow-run-filter-menu.js';
+
+const STATUS_OPTIONS: WorkflowRunFilterOption[] = WORKFLOW_RUN_LIST_STATUSES.map((status) => ({
+  value: status,
+  label: getWorkflowStatusVisual(status).label,
+}));
+
+export interface WorkflowRunFiltersProps {
+  search: WorkflowRunsSearch;
+  facets: WorkflowRunFacets;
+  onChange: (patch: WorkflowRunFilterPatch) => void;
+  onClear: () => void;
+  hasActiveFilters: boolean;
+}
+
+/**
+ * The run list filter row.
+ *
+ * Inline from `md` up, and behind a sheet below it, where a five-control toolbar would eat
+ * the viewport the list is supposed to fill. Both layouts render the same controls, so the
+ * narrow surface is the full filter set rather than a reduced one.
+ */
+export function WorkflowRunFilters({
+  search,
+  facets,
+  onChange,
+  onClear,
+  hasActiveFilters,
+}: WorkflowRunFiltersProps) {
+  const [sheetOpen, setSheetOpen] = useState(false);
+
+  return (
+    <div className="flex flex-wrap items-center gap-8">
+      <Input
+        value={search.search ?? ''}
+        onChange={(event) => onChange({search: event.target.value})}
+        placeholder="Search runs by name, number, branch, or commit"
+        aria-label="Search runs"
+        size="small"
+        className="min-w-[240px] flex-1"
+        iconLeft={<Icon name="searchLine" className="size-14 text-foreground-neutral-muted" />}
+      />
+
+      <div className="hidden flex-wrap items-center gap-8 md:flex">
+        <WorkflowRunFilterControls search={search} facets={facets} onChange={onChange} />
+        {hasActiveFilters ? <ClearFiltersButton onClear={onClear} /> : null}
+      </div>
+
+      <Sheet open={sheetOpen} onOpenChange={setSheetOpen}>
+        <SheetTrigger asChild>
+          <Button
+            type="button"
+            variant="secondary"
+            size="sm"
+            iconLeft="filterLine"
+            className="md:hidden"
+          >
+            Filters
+          </Button>
+        </SheetTrigger>
+        <SheetContent side="bottom" aria-describedby={undefined}>
+          <SheetHeader>
+            <SheetTitle>Filter runs</SheetTitle>
+          </SheetHeader>
+          <SheetBody className="flex flex-col gap-12">
+            <WorkflowRunFilterControls
+              search={search}
+              facets={facets}
+              onChange={onChange}
+              stacked
+            />
+          </SheetBody>
+          <SheetFooter>
+            <Button
+              type="button"
+              variant="secondary"
+              size="sm"
+              disabled={!hasActiveFilters}
+              onClick={onClear}
+            >
+              Clear filters
+            </Button>
+            <Button type="button" variant="primary" size="sm" onClick={() => setSheetOpen(false)}>
+              Show runs
+            </Button>
+          </SheetFooter>
+        </SheetContent>
+      </Sheet>
+    </div>
+  );
+}
+
+function WorkflowRunFilterControls({
+  search,
+  facets,
+  onChange,
+  stacked = false,
+}: {
+  search: WorkflowRunsSearch;
+  facets: WorkflowRunFacets;
+  onChange: (patch: WorkflowRunFilterPatch) => void;
+  stacked?: boolean;
+}) {
+  const controlClassName = stacked ? 'w-full max-w-none' : undefined;
+
+  return (
+    <>
+      <WorkflowRunFilterMenu
+        label="Status"
+        options={STATUS_OPTIONS}
+        selected={search.status ?? []}
+        onChange={(next) => onChange({status: next as WorkflowRunListStatus[]})}
+        emptyMessage="No statuses available."
+        className={controlClassName}
+      />
+      <WorkflowRunFilterMenu
+        label="Branch"
+        options={toOptions(facets.branch)}
+        selected={search.branch ?? []}
+        onChange={(branch) => onChange({branch})}
+        emptyMessage="No branches in the loaded runs."
+        className={controlClassName}
+      />
+      <WorkflowRunFilterMenu
+        label="Actor"
+        options={toOptions(facets.actor)}
+        selected={search.actor ?? []}
+        onChange={(actor) => onChange({actor})}
+        emptyMessage="No actors in the loaded runs."
+        className={controlClassName}
+      />
+      <WorkflowRunFilterMenu
+        label="Event"
+        options={toOptions(facets.event)}
+        selected={search.event ?? []}
+        onChange={(event) => onChange({event})}
+        emptyMessage="No events in the loaded runs."
+        className={controlClassName}
+      />
+      {stacked ? (
+        <div className="flex flex-col gap-6">
+          <Label>Created between</Label>
+          <RunDateRangeFilter search={search} onChange={onChange} />
+        </div>
+      ) : (
+        <RunDateRangeFilter search={search} onChange={onChange} />
+      )}
+    </>
+  );
+}
+
+function RunDateRangeFilter({
+  search,
+  onChange,
+}: {
+  search: WorkflowRunsSearch;
+  onChange: (patch: WorkflowRunFilterPatch) => void;
+}) {
+  return (
+    <DateRangePicker
+      size="small"
+      aria-label="Filter runs by creation date"
+      // The shared picker renders a value only when both bounds are set, so a one-sided filter
+      // would otherwise read as unset. Naming the active bound keeps it visible without
+      // inventing the bound the user did not choose.
+      placeholder={partialDateLabel(search) ?? 'Any date'}
+      dateRange={{
+        ...(search.after ? {start: fromCalendarDate(search.after)} : {}),
+        ...(search.before ? {end: fromCalendarDate(search.before)} : {}),
+      }}
+      onDateRangeSelect={(range) =>
+        onChange({
+          after: range?.start ? toCalendarDate(range.start) : undefined,
+          before: range?.end ? toCalendarDate(range.end) : undefined,
+        })
+      }
+      onClear={() => onChange({after: undefined, before: undefined})}
+    />
+  );
+}
+
+function ClearFiltersButton({onClear}: {onClear: () => void}) {
+  return (
+    <Button
+      type="button"
+      variant="transparentMuted"
+      size="sm"
+      iconLeft="closeLine"
+      onClick={onClear}
+    >
+      Clear filters
+    </Button>
+  );
+}
+
+/** Describes a bound the picker cannot display on its own, or nothing when it can. */
+function partialDateLabel(search: WorkflowRunsSearch): string | undefined {
+  if (search.after && search.before) return undefined;
+  if (search.after) return `From ${search.after}`;
+  if (search.before) return `Until ${search.before}`;
+  return undefined;
+}
+
+function toOptions(values: readonly string[]): WorkflowRunFilterOption[] {
+  return values.map((value) => ({value, label: value}));
+}
+
+// The bounds are local calendar dates, matching how each row's date reads, so the picker and
+// the URL agree with what the list shows rather than with UTC.
+function toCalendarDate(date: Date): string {
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+  const day = String(date.getDate()).padStart(2, '0');
+  return `${date.getFullYear()}-${month}-${day}`;
+}
+
+function fromCalendarDate(value: string): Date | undefined {
+  const [year, month, day] = value.split('-').map(Number) as [number, number, number];
+  const date = new Date(year, month - 1, day);
+  return Number.isNaN(date.getTime()) ? undefined : date;
+}

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

@@ -3,6 +3,7 @@ import type {WorkflowRunListItem} from '#core/workflow-run.js';
 import type {WorkflowRunListQuery} from './types.js';
 import {
   WorkflowRunListEmpty,
+  WorkflowRunListLoadMore,
   WorkflowRunListNoMatches,
   WorkflowRunListSkeleton,
   WorkflowRunListStaleError,
@@ -13,26 +14,42 @@ interface WorkflowRunListContentProps {
   query: WorkflowRunListQuery;
   totalRuns: number;
   runs: WorkflowRunListItem[];
-  workspaceId: string;
-  projectId: string;
-  selectedWorkflowRunId?: string | undefined;
+  workspaceSlug?: string | undefined;
+  projectSlug?: string | undefined;
+  hasActiveFilters: boolean;
   onClearFilters: () => void;
+  hasNextPage: boolean;
+  isFetchingNextPage: boolean;
+  isFetchNextPageError: boolean;
+  onLoadMore?: () => void;
 }
 
 export function WorkflowRunListContent({
   query,
   totalRuns,
   runs,
-  workspaceId,
-  projectId,
-  selectedWorkflowRunId,
+  workspaceSlug,
+  projectSlug,
+  hasActiveFilters,
   onClearFilters,
+  hasNextPage,
+  isFetchingNextPage,
+  isFetchNextPageError,
+  onLoadMore,
 }: WorkflowRunListContentProps) {
   const {isPending, isError} = query;
   // A refetch that fails after a prior success keeps the rows on screen behind a slim
   // banner. QueryLoadError owns the inverse case (errored before anything loaded) and
-  // self-gates to nothing here once data exists.
+  // self-gates to nothing here once data exists. A failed fetch never renders as an empty
+  // list: "nothing here" and "we could not find out" are different answers.
   const refreshFailed = isError && query.data !== undefined;
+  // Keyed off "we have an answer" rather than "no error", so a stale refresh still reports
+  // whether the filters match anything instead of leaving the list blank under the banner.
+  const hasLoaded = !isPending && query.data !== undefined;
+  // An empty result is only an empty *list* when no filter is on. With filters active it is a
+  // no-matches state even at zero loaded runs, so the way out is clearing them.
+  const showEmptyState = hasLoaded && totalRuns === 0 && !hasActiveFilters;
+  const showNoMatches = hasLoaded && runs.length === 0 && !showEmptyState;
 
   return (
     <div className="min-h-0 flex-1 overflow-y-auto">
@@ -41,18 +58,29 @@ export function WorkflowRunListContent({
         <QueryLoadError query={query} subject="workflow runs" icon="pulseLine" />
       ) : null}
       {!isPending && refreshFailed ? <WorkflowRunListStaleError query={query} /> : null}
-      {!isPending && !isError && totalRuns === 0 ? <WorkflowRunListEmpty /> : null}
-      {!isPending && totalRuns > 0 && runs.length === 0 ? (
-        <WorkflowRunListNoMatches onClear={onClearFilters} />
+      {showEmptyState ? (
+        <WorkflowRunListEmpty workspaceSlug={workspaceSlug} projectSlug={projectSlug} />
       ) : null}
-      {!isPending && runs.length > 0 ? (
-        <WorkflowRunRowList
-          runs={runs}
-          workspaceId={workspaceId}
-          projectId={projectId}
-          selectedWorkflowRunId={selectedWorkflowRunId}
+      {showNoMatches ? (
+        <WorkflowRunListNoMatches
+          onClear={onClearFilters}
+          hasNextPage={hasNextPage}
+          isFetchingNextPage={isFetchingNextPage}
+          isFetchNextPageError={isFetchNextPageError}
+          {...(onLoadMore ? {onLoadMore} : {})}
         />
       ) : null}
+      {!isPending && runs.length > 0 ? (
+        <>
+          <WorkflowRunRowList runs={runs} workspaceSlug={workspaceSlug} projectSlug={projectSlug} />
+          <WorkflowRunListLoadMore
+            hasNextPage={hasNextPage}
+            isFetchingNextPage={isFetchingNextPage}
+            isFetchNextPageError={isFetchNextPageError}
+            {...(onLoadMore ? {onLoadMore} : {})}
+          />
+        </>
+      ) : null}
     </div>
   );
 }

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

@@ -4,24 +4,33 @@ import {Callout} from '@shipfox/react-ui/callout';
 import {EmptyState} from '@shipfox/react-ui/empty-state';
 import {Skeleton} from '@shipfox/react-ui/skeleton';
 import {Text} from '@shipfox/react-ui/typography';
+import {Link} from '@tanstack/react-router';
 
+const SKELETON_ROW_COUNT = 8;
+
+/**
+ * Placeholder rows at the real row height, so the list does not resize under the cursor when
+ * the first page lands. Only the initial load renders these: a refetch keeps the rows it has,
+ * per the design system's rule against animating frequently-updating data.
+ */
 export function WorkflowRunListSkeleton() {
   return (
-    <div className="flex flex-col gap-4 p-8" role="status" aria-label="Loading runs">
-      {Array.from({length: 6}).map((_, index) => (
+    <div
+      className="@container divide-y divide-border-neutral-base border-t border-border-neutral-base"
+      role="status"
+      aria-label="Loading runs"
+    >
+      {Array.from({length: SKELETON_ROW_COUNT}).map((_, index) => (
         <div
           // biome-ignore lint/suspicious/noArrayIndexKey: skeleton row, stable position
           key={index}
-          className="flex flex-col gap-3 rounded-8 border border-transparent px-10 py-7"
+          className="flex items-center gap-10 px-12 py-8 @min-[976px]:h-44 @min-[976px]:py-0"
         >
-          <div className="flex h-20 items-center gap-7">
-            <Skeleton className="size-6 shrink-0 rounded-full" />
-            <Skeleton className="h-12 w-1/3" />
-          </div>
-          <div className="flex h-20 items-center gap-6 pl-13">
-            <Skeleton className="h-12 flex-1" />
-            <Skeleton className="h-12 w-40" />
-          </div>
+          <Skeleton className="size-14 shrink-0 rounded-full" />
+          <Skeleton className="h-12 w-[220px] max-w-[40%]" />
+          <Skeleton className="ml-auto hidden h-12 w-96 @min-[1040px]:block" />
+          <Skeleton className="h-12 w-48" />
+          <Skeleton className="h-12 w-48" />
         </div>
       ))}
     </div>
@@ -35,7 +44,7 @@ export function WorkflowRunListSkeleton() {
  */
 export function WorkflowRunListStaleError({query}: {query: QueryLoadErrorQuery}) {
   return (
-    <div className="border-b border-border-neutral-base p-8">
+    <div className="pb-8">
       <Callout role="alert" type="error">
         <div className="flex items-center justify-between gap-8">
           <Text size="xs">Could not refresh workflow runs.</Text>
@@ -56,31 +65,123 @@ export function WorkflowRunListStaleError({query}: {query: QueryLoadErrorQuery})
   );
 }
 
-export function WorkflowRunListEmpty() {
+export function WorkflowRunListEmpty({
+  workspaceSlug,
+  projectSlug,
+}: {
+  workspaceSlug?: string | undefined;
+  projectSlug?: string | undefined;
+}) {
   return (
-    <div className="p-16">
-      <EmptyState
-        icon="pulseLine"
-        title="No runs yet"
-        description="Runs from this project's workflows will appear here as soon as one is launched."
-      />
-    </div>
+    <EmptyState
+      icon="pulseLine"
+      title="No runs yet"
+      description="Runs from this project's workflows appear here the moment one is launched."
+      action={
+        workspaceSlug && projectSlug ? (
+          <Button asChild type="button" size="sm" variant="primary">
+            <Link
+              to="/w/$workspaceSlug/p/$projectSlug/workflows"
+              params={{workspaceSlug, projectSlug}}
+            >
+              View workflows
+            </Link>
+          </Button>
+        ) : null
+      }
+    />
   );
 }
 
-export function WorkflowRunListNoMatches({onClear}: {onClear: () => void}) {
+/**
+ * The filtered-empty state, deliberately distinct from the unfiltered one: someone who
+ * filtered their way to nothing needs a way back out, not an onboarding call to action.
+ *
+ * Its reset is worded as its outcome rather than repeating the toolbar's "Clear filters"
+ * verbatim, so the two controls on screen read as one action offered twice rather than two
+ * different ones. It is also the only reset within reach below `md`, where the toolbar's
+ * lives inside the filter sheet.
+ */
+export function WorkflowRunListNoMatches({
+  onClear,
+  hasNextPage,
+  isFetchingNextPage,
+  isFetchNextPageError,
+  onLoadMore,
+}: {
+  onClear: () => void;
+  hasNextPage: boolean;
+  isFetchingNextPage: boolean;
+  isFetchNextPageError: boolean;
+  onLoadMore?: () => void;
+}) {
   return (
-    <div className="p-16">
+    <div className="flex flex-col gap-8">
+      {isFetchNextPageError ? (
+        <Callout role="alert" type="error">
+          Could not load more workflow runs. Try again to continue searching older runs.
+        </Callout>
+      ) : null}
       <EmptyState
         icon="filterOffLine"
-        title="No matching runs"
-        description="No runs match your current search or status filter."
+        title={hasNextPage ? 'No matches in loaded history' : 'No matching runs'}
+        description={
+          hasNextPage
+            ? 'No loaded run matches these filters. Load more to search further back.'
+            : 'No run matches these filters.'
+        }
         action={
-          <Button type="button" size="sm" variant="secondary" onClick={onClear}>
-            Clear filters
-          </Button>
+          <div className="flex flex-wrap justify-center gap-8">
+            {hasNextPage && onLoadMore ? (
+              <Button
+                type="button"
+                size="sm"
+                variant="primary"
+                isLoading={isFetchingNextPage}
+                onClick={onLoadMore}
+              >
+                Load more runs
+              </Button>
+            ) : null}
+            <Button type="button" size="sm" variant="secondary" onClick={onClear}>
+              Show all runs
+            </Button>
+          </div>
         }
       />
     </div>
   );
 }
+
+export function WorkflowRunListLoadMore({
+  hasNextPage,
+  isFetchingNextPage,
+  isFetchNextPageError,
+  onLoadMore,
+}: {
+  hasNextPage: boolean;
+  isFetchingNextPage: boolean;
+  isFetchNextPageError: boolean;
+  onLoadMore?: () => void;
+}) {
+  if (!hasNextPage || !onLoadMore) return null;
+
+  return (
+    <div className="flex flex-col items-center gap-8 border-t border-border-neutral-base py-12">
+      {isFetchNextPageError ? (
+        <Callout role="alert" type="error">
+          Could not load more workflow runs. Try again.
+        </Callout>
+      ) : null}
+      <Button
+        type="button"
+        size="sm"
+        variant="secondary"
+        isLoading={isFetchingNextPage}
+        onClick={onLoadMore}
+      >
+        Load more runs
+      </Button>
+    </div>
+  );
+}