@shipfox/client-triggers 0.2.0

package/package.json

@@ -0,0 +1,92 @@
+{
+  "name": "@shipfox/client-triggers",
+  "license": "MIT",
+  "version": "0.2.0",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ShipfoxHQ/shipfox.git",
+    "directory": "libs/client/triggers"
+  },
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "imports": {
+    "#*": {
+      "types": "./src/*",
+      "workspace-source": "./src/*",
+      "development": "./src/*",
+      "default": "./dist/*"
+    }
+  },
+  "exports": {
+    ".": {
+      "development": {
+        "types": "./src/index.ts",
+        "default": "./src/index.ts"
+      },
+      "default": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      }
+    }
+  },
+  "dependencies": {
+    "@swc/helpers": "^0.5.17",
+    "@shipfox/api-triggers-dto": "2.0.0",
+    "@shipfox/client-api": "0.2.0",
+    "@shipfox/client-integrations": "0.2.0",
+    "@shipfox/client-ui": "0.2.0",
+    "@shipfox/react-ui": "0.3.1"
+  },
+  "peerDependencies": {
+    "@tanstack/react-query": "^5.101.0",
+    "@tanstack/react-router": "^1.170.16",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "zod": "^4.4.3"
+  },
+  "devDependencies": {
+    "@argos-ci/cli": "^5.0.0",
+    "@argos-ci/storybook": "^6.0.0",
+    "@storybook/addon-vitest": "^10.3.6",
+    "@storybook/react": "^10.0.0",
+    "@storybook/react-vite": "^10.0.0",
+    "@tailwindcss/vite": "^4.1.13",
+    "@tanstack/react-query": "^5.101.0",
+    "@tanstack/react-router": "^1.170.16",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/react": "^19.1.11",
+    "@types/react-dom": "^19.1.7",
+    "@vitejs/plugin-react": "^6.0.0",
+    "@vitest/browser-playwright": "^4.1.5",
+    "happy-dom": "^20.8.3",
+    "jsdom": "^29.0.0",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
+    "storybook": "^10.0.0",
+    "storybook-addon-pseudo-states": "^10.0.0",
+    "tailwindcss": "^4.1.13",
+    "vite": "^8.0.3",
+    "vitest": "^4.1.5",
+    "zod": "^4.4.3",
+    "@shipfox/biome": "1.8.1",
+    "@shipfox/client-test-setup": "0.0.2",
+    "@shipfox/swc": "1.2.5",
+    "@shipfox/ts-config": "1.3.8",
+    "@shipfox/vitest": "1.2.2",
+    "@shipfox/typescript": "1.1.6"
+  },
+  "scripts": {
+    "build": "shipfox-swc",
+    "check": "shipfox-biome-check",
+    "check:fix": "shipfox-biome-check --write",
+    "storybook": "storybook dev -p 6008",
+    "storybook:build": "storybook build -o storybook-static",
+    "test": "shipfox-vitest-run",
+    "test:watch": "shipfox-vitest-watch",
+    "type": "shipfox-tsc-check",
+    "type:emit": "shipfox-tsc-emit"
+  }
+}

package/src/components/events-filter-bar.tsx

@@ -0,0 +1,191 @@
+import type {TriggerEventFacetItemDto, TriggerEventOutcomeDto} from '@shipfox/api-triggers-dto';
+import {Button} from '@shipfox/react-ui/button';
+import {Collapsible, CollapsibleContent, CollapsibleTrigger} from '@shipfox/react-ui/collapsible';
+import {Combobox, type ComboboxOption} from '@shipfox/react-ui/combobox';
+import {type DateRange, DateRangePicker} from '@shipfox/react-ui/date-range-picker';
+import {Text} from '@shipfox/react-ui/typography';
+import {cn} from '@shipfox/react-ui/utils';
+import {type ReactNode, useState} from 'react';
+import type {TriggerEventFilters} from '#hooks/api/trigger-events.js';
+
+// Filters expose the same plain-language results shown in the table. `failed`
+// includes `errored` so the Failed filter does not hide rows rendered as failed.
+const RESULT_FILTERS: {
+  value: TriggerEventOutcomeDto;
+  selects: TriggerEventOutcomeDto[];
+  label: string;
+}[] = [
+  {value: 'routed', selects: ['routed'], label: 'Triggered'},
+  {value: 'discarded', selects: ['discarded'], label: 'No match'},
+  {value: 'failed', selects: ['failed', 'errored'], label: 'Failed'},
+  {value: 'received', selects: ['received'], label: 'Evaluating'},
+];
+
+const RESULT_OPTIONS: ComboboxOption[] = RESULT_FILTERS.map(({value, label}) => ({value, label}));
+
+function toOptions(facets: TriggerEventFacetItemDto[] | undefined): ComboboxOption[] {
+  return (facets ?? []).map((facet) => ({
+    value: facet.value,
+    label: `${facet.value} (${facet.count})`,
+  }));
+}
+
+interface EventsFilterBarProps {
+  filters: TriggerEventFilters;
+  onFiltersChange: (patch: Partial<TriggerEventFilters>) => void;
+  sources: TriggerEventFacetItemDto[] | undefined;
+  events: TriggerEventFacetItemDto[] | undefined;
+  hasActiveFilters: boolean;
+  onClear: () => void;
+}
+
+export function EventsFilterBar({
+  filters,
+  onFiltersChange,
+  sources,
+  events,
+  hasActiveFilters,
+  onClear,
+}: EventsFilterBarProps) {
+  const [open, setOpen] = useState(false);
+
+  const dateRange: DateRange | undefined =
+    filters.from || filters.to
+      ? {
+          start: filters.from ? new Date(filters.from) : undefined,
+          end: filters.to ? new Date(filters.to) : undefined,
+        }
+      : undefined;
+
+  const selectedOutcomes = new Set(filters.outcome ?? []);
+  const resultValue = RESULT_FILTERS.filter(({selects}) =>
+    selects.some((outcome) => selectedOutcomes.has(outcome)),
+  ).map(({value}) => value);
+
+  // Count active dimensions, not selected options, so the badge stays stable as chips grow.
+  const activeCount =
+    (dateRange ? 1 : 0) +
+    (filters.source?.length ? 1 : 0) +
+    (filters.event?.length ? 1 : 0) +
+    (resultValue.length > 0 ? 1 : 0);
+
+  function handleResultValue(values: string[]) {
+    const next = RESULT_FILTERS.filter(({value}) => values.includes(value)).flatMap(
+      ({selects}) => selects,
+    );
+    onFiltersChange({outcome: next.length > 0 ? next : undefined});
+  }
+
+  function handleDateRange(range: DateRange | undefined) {
+    const from = range?.start ? new Date(range.start).toISOString() : undefined;
+    let to: string | undefined;
+    if (range?.end) {
+      // The backend filters received_at <= to; extend to end-of-day so the picked end
+      // date is inclusive rather than cutting off at its midnight.
+      const end = new Date(range.end);
+      end.setHours(23, 59, 59, 999);
+      to = end.toISOString();
+    }
+    onFiltersChange({from, to});
+  }
+
+  return (
+    <Collapsible open={open} onOpenChange={setOpen}>
+      <div className="flex items-center justify-between gap-8 border-b border-border-neutral-base px-12 py-8">
+        <CollapsibleTrigger asChild>
+          <Button
+            type="button"
+            variant="secondary"
+            size="sm"
+            iconLeft="filter3Line"
+            iconRight={open ? 'arrowUpSLine' : 'arrowDownSLine'}
+          >
+            {activeCount > 0 ? `Filters (${activeCount})` : 'Filters'}
+          </Button>
+        </CollapsibleTrigger>
+        {hasActiveFilters ? (
+          <Button type="button" size="2xs" variant="transparentMuted" onClick={onClear}>
+            Clear filters
+          </Button>
+        ) : null}
+      </div>
+      <CollapsibleContent>
+        <div className="grid grid-cols-1 gap-x-12 gap-y-10 border-b border-border-neutral-base px-12 py-12 min-[520px]:grid-cols-2">
+          <FilterField label="Date" className="col-span-full">
+            <DateRangePicker
+              size="small"
+              className="w-full"
+              {...(dateRange ? {dateRange} : {})}
+              onDateRangeSelect={handleDateRange}
+              onClear={() => onFiltersChange({from: undefined, to: undefined})}
+              placeholder="Any date"
+            />
+          </FilterField>
+          <FilterField label="Result">
+            <Combobox
+              multiple
+              size="small"
+              aria-label="Filter by result"
+              options={RESULT_OPTIONS}
+              value={resultValue}
+              onValueChange={handleResultValue}
+              placeholder="All results"
+              emptyState="No results"
+              className="w-full"
+              maxVisibleChips={2}
+            />
+          </FilterField>
+          <FilterField label="Source">
+            <Combobox
+              multiple
+              size="small"
+              options={toOptions(sources)}
+              value={filters.source ?? []}
+              onValueChange={(value) =>
+                onFiltersChange({source: value.length > 0 ? value : undefined})
+              }
+              placeholder="All sources"
+              emptyState="No sources yet"
+              className="w-full"
+              maxVisibleChips={2}
+            />
+          </FilterField>
+          <FilterField label="Event">
+            <Combobox
+              multiple
+              size="small"
+              options={toOptions(events)}
+              value={filters.event ?? []}
+              onValueChange={(value) =>
+                onFiltersChange({event: value.length > 0 ? value : undefined})
+              }
+              placeholder="All events"
+              emptyState="No events yet"
+              className="w-full"
+              maxVisibleChips={2}
+            />
+          </FilterField>
+        </div>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}
+
+function FilterField({
+  label,
+  className,
+  children,
+}: {
+  label: string;
+  className?: string;
+  children: ReactNode;
+}) {
+  return (
+    <div className={cn('flex min-w-0 flex-col gap-4', className)}>
+      <Text size="xs" className="font-medium text-foreground-neutral-muted">
+        {label}
+      </Text>
+      {children}
+    </div>
+  );
+}

package/src/components/events-list-states.tsx

@@ -0,0 +1,89 @@
+import type {QueryLoadErrorQuery} from '@shipfox/client-ui';
+import {Button} from '@shipfox/react-ui/button';
+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';
+
+export function EventsListSkeleton() {
+  return (
+    <div className="flex flex-col gap-8 p-8" role="status" aria-label="Loading events">
+      {Array.from({length: 8}).map((_, index) => (
+        <div
+          // biome-ignore lint/suspicious/noArrayIndexKey: skeleton row, stable position
+          key={index}
+          className="flex h-20 items-center gap-12"
+        >
+          <Skeleton className="size-6 shrink-0 rounded-full" />
+          <Skeleton className="h-12 w-1/4" />
+          <Skeleton className="h-12 w-20" />
+          <Skeleton className="ml-auto h-12 w-40" />
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export function EventsListEmpty({workspaceId}: {workspaceId: string}) {
+  return (
+    <div className="p-16">
+      <EmptyState
+        icon="pulseLine"
+        title="No events yet"
+        description="Events appear here once a connected integration delivers one or you fire a trigger."
+        action={
+          <Button asChild size="sm" variant="secondary">
+            <Link to="/workspaces/$wid/settings/integrations" params={{wid: workspaceId}}>
+              Configure integrations
+            </Link>
+          </Button>
+        }
+      />
+    </div>
+  );
+}
+
+export function EventsListNoMatches({onClear}: {onClear: () => void}) {
+  return (
+    <div className="p-16">
+      <EmptyState
+        icon="filterOffLine"
+        title="No matching events"
+        description="No events match your current filters."
+        action={
+          <Button type="button" size="sm" variant="secondary" onClick={onClear}>
+            Clear filters
+          </Button>
+        }
+      />
+    </div>
+  );
+}
+
+/**
+ * Slim banner shown when a background refetch fails after a prior success, so the loaded
+ * rows stay on screen with the retry inline rather than being wiped by a full placeholder.
+ */
+export function EventsListStaleError({query}: {query: QueryLoadErrorQuery}) {
+  return (
+    <div className="p-8">
+      <Callout role="alert" type="error">
+        <div className="flex items-center justify-between gap-8">
+          <Text size="xs">Could not refresh events.</Text>
+          <Button
+            type="button"
+            size="2xs"
+            variant="secondary"
+            isLoading={query.isFetching}
+            onClick={() => {
+              void query.refetch();
+            }}
+          >
+            Retry
+          </Button>
+        </div>
+      </Callout>
+    </div>
+  );
+}

package/src/components/events-list.stories.tsx

@@ -0,0 +1,141 @@
+import type {
+  TriggerEventFacetsResponseDto,
+  TriggerEventListItemDto,
+  TriggerEventOutcomeDto,
+} from '@shipfox/api-triggers-dto';
+import {RelativeTimeProvider} from '@shipfox/react-ui/relative-time';
+import {Code} from '@shipfox/react-ui/typography';
+import type {Decorator, Meta, StoryObj} from '@storybook/react';
+import type {ReactNode} from 'react';
+import {EventsList} from './events-list.js';
+import type {TriggerEventsListQuery} from './types.js';
+
+const STORY_NOW = '2026-06-25T20:00:00.000Z';
+const STORY_NOW_MS = Date.parse(STORY_NOW);
+
+// Typed so meta's inferred type stays nameable (TS2883) under the package's tsconfig.
+const withWidth: Decorator = (Story) => (
+  <RelativeTimeProvider now={STORY_NOW}>
+    <div className="w-[900px]">
+      <Story />
+    </div>
+  </RelativeTimeProvider>
+);
+
+function makeQuery(overrides: Partial<TriggerEventsListQuery> = {}): TriggerEventsListQuery {
+  return {
+    isPending: false,
+    isError: false,
+    isFetching: false,
+    data: {pages: [], pageParams: []},
+    error: null,
+    refetch: () => undefined,
+    ...overrides,
+  };
+}
+
+let seq = 0;
+function makeEvent(
+  outcome: TriggerEventOutcomeDto,
+  provider: string | null,
+  source: string,
+  event: string,
+  matchedCount: number,
+  minutesAgo: number,
+): TriggerEventListItemDto {
+  seq += 1;
+  return {
+    id: `evt-${String(seq).padStart(8, '0')}`,
+    event_ref: `ref-${seq}`,
+    origin: 'integration',
+    workspace_id: 'ws-demo',
+    provider,
+    source,
+    event,
+    delivery_id: `delivery-${String(seq).padStart(6, '0')}`,
+    connection_id: 'conn-demo',
+    outcome,
+    matched_count: matchedCount,
+    received_at: new Date(STORY_NOW_MS - minutesAgo * 60_000).toISOString(),
+    processed_at: new Date(STORY_NOW_MS - minutesAgo * 60_000).toISOString(),
+    created_at: new Date(STORY_NOW_MS - minutesAgo * 60_000).toISOString(),
+  };
+}
+
+const SAMPLE_EVENTS: TriggerEventListItemDto[] = [
+  makeEvent('received', 'github', 'github_acme', 'push', 0, 0),
+  makeEvent('routed', 'github', 'github_acme', 'push', 2, 3),
+  makeEvent('routed', 'gitea', 'gitea_acme', 'pull_request', 1, 12),
+  makeEvent('discarded', 'github', 'github_acme', 'issue_comment', 0, 38),
+  makeEvent('failed', 'gitlab', 'gitlab_acme', 'push', 1, 95),
+];
+
+const SAMPLE_FACETS: TriggerEventFacetsResponseDto = {
+  sources: [
+    {value: 'github_acme', count: 3},
+    {value: 'gitea_acme', count: 1},
+    {value: 'gitlab_acme', count: 1},
+  ],
+  events: [
+    {value: 'push', count: 3},
+    {value: 'pull_request', count: 1},
+    {value: 'issue_comment', count: 1},
+  ],
+};
+
+const meta = {
+  title: 'Triggers/EventsList',
+  component: EventsList,
+  parameters: {layout: 'padded'},
+  decorators: [withWidth],
+  args: {
+    events: SAMPLE_EVENTS,
+    query: makeQuery(),
+    facets: SAMPLE_FACETS,
+    filters: {},
+    onFiltersChange: () => undefined,
+    workspaceId: 'ws-demo',
+    hasNextPage: false,
+    isFetchingNextPage: false,
+    onLoadMore: () => undefined,
+    selectedEventId: 'evt-00000002',
+    onSelectEvent: () => undefined,
+  },
+} satisfies Meta<typeof EventsList>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {};
+
+export const DataStates: Story = {
+  render: (args) => (
+    <div className="flex flex-col gap-32">
+      <StateExample label="Loading">
+        <EventsList {...args} events={[]} query={makeQuery({isPending: true, data: undefined})} />
+      </StateExample>
+      <StateExample label="Empty">
+        <EventsList {...args} events={[]} facets={{sources: [], events: []}} />
+      </StateExample>
+      <StateExample label="No matches">
+        <EventsList {...args} events={[]} filters={{outcome: ['failed']}} />
+      </StateExample>
+      <StateExample label="Load error">
+        <EventsList {...args} events={[]} query={makeQuery({isError: true, data: undefined})} />
+      </StateExample>
+    </div>
+  ),
+};
+
+function StateExample({label, children}: {label: string; children: ReactNode}) {
+  return (
+    <div className="flex flex-col gap-8">
+      <Code variant="label" className="text-foreground-neutral-subtle">
+        {label}
+      </Code>
+      <div className="min-h-280 rounded-8 border border-border-neutral-base bg-background-neutral-base p-12">
+        {children}
+      </div>
+    </div>
+  );
+}

package/src/components/events-list.test.tsx

@@ -0,0 +1,173 @@
+import type {TriggerEventListItemDto} from '@shipfox/api-triggers-dto';
+import {RelativeTimeProvider} from '@shipfox/react-ui/relative-time';
+import {render, screen} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import {EventsList} from './events-list.js';
+import type {EventsListProps} from './types.js';
+
+function makeEvent(overrides: Partial<TriggerEventListItemDto> = {}): TriggerEventListItemDto {
+  return {
+    id: 'evt-1',
+    event_ref: 'ref-1',
+    origin: 'integration',
+    workspace_id: 'ws-1',
+    provider: 'github',
+    source: 'github_acme',
+    event: 'push',
+    delivery_id: 'delivery-1',
+    connection_id: 'conn-1',
+    outcome: 'routed',
+    matched_count: 2,
+    received_at: '2026-06-01T00:00:00.000Z',
+    processed_at: '2026-06-01T00:00:00.000Z',
+    created_at: '2026-06-01T00:00:00.000Z',
+    ...overrides,
+  };
+}
+
+function makeProps(overrides: Partial<EventsListProps> = {}): EventsListProps {
+  return {
+    events: [makeEvent()],
+    query: {
+      isPending: false,
+      isError: false,
+      isFetching: false,
+      data: {pages: [], pageParams: []},
+      error: null,
+      refetch: () => undefined,
+    },
+    facets: {sources: [{value: 'github_acme', count: 1}], events: [{value: 'push', count: 1}]},
+    filters: {},
+    onFiltersChange: vi.fn(),
+    workspaceId: 'ws-1',
+    hasNextPage: false,
+    isFetchingNextPage: false,
+    onLoadMore: vi.fn(),
+    selectedEventId: undefined,
+    onSelectEvent: vi.fn(),
+    ...overrides,
+  };
+}
+
+function renderList(props: EventsListProps) {
+  return render(
+    <RelativeTimeProvider>
+      <EventsList {...props} />
+    </RelativeTimeProvider>,
+  );
+}
+
+const FILTERS_TOGGLE = /Filters/u;
+
+async function openFilters() {
+  await userEvent.click(screen.getByRole('button', {name: FILTERS_TOGGLE}));
+}
+
+async function selectResult(label: string) {
+  const user = userEvent.setup();
+
+  await openFilters();
+  await user.click(screen.getByRole('combobox', {name: 'Filter by result'}));
+  await user.click(await screen.findByRole('option', {name: label}));
+}
+
+describe('EventsList', () => {
+  test('renders a row per event with its match summary', () => {
+    renderList(makeProps());
+
+    expect(screen.getByText('Triggered 2 workflows')).toBeInTheDocument();
+  });
+
+  test('still renders rows when the facets query failed', () => {
+    renderList(makeProps({facets: undefined}));
+
+    expect(screen.getByText('Triggered 2 workflows')).toBeInTheDocument();
+  });
+
+  test('shows the no-matches state and clears active filters', async () => {
+    const onFiltersChange = vi.fn();
+    renderList(makeProps({events: [], filters: {outcome: ['failed']}, onFiltersChange}));
+
+    expect(screen.getByText('No matching events')).toBeInTheDocument();
+
+    // Both the filter bar and the empty state expose a "Clear filters" button; either clears.
+    const [clearButton] = screen.getAllByRole('button', {name: 'Clear filters'});
+    if (!clearButton) throw new Error('expected a Clear filters button');
+    await userEvent.click(clearButton);
+
+    expect(onFiltersChange).toHaveBeenCalledWith(expect.objectContaining({outcome: undefined}));
+  });
+
+  test('empty list filters do not count as active filters', () => {
+    renderList(makeProps({filters: {source: [], event: [], outcome: []}}));
+
+    expect(screen.getByText('Triggered 2 workflows')).toBeInTheDocument();
+    expect(screen.queryByRole('button', {name: 'Clear filters'})).not.toBeInTheDocument();
+  });
+
+  test('selecting a result reports the filter patch', async () => {
+    const onFiltersChange = vi.fn();
+    renderList(makeProps({onFiltersChange}));
+
+    await selectResult('Triggered');
+
+    expect(onFiltersChange).toHaveBeenCalledWith({outcome: ['routed']});
+  });
+
+  test('removing the last active result clears the filter to undefined', async () => {
+    const onFiltersChange = vi.fn();
+    renderList(makeProps({filters: {outcome: ['routed']}, onFiltersChange}));
+
+    await openFilters();
+    await userEvent.click(screen.getByLabelText('Remove Triggered'));
+
+    expect(onFiltersChange).toHaveBeenCalledWith({outcome: undefined});
+  });
+
+  test('the Failed option folds errored in with failed', async () => {
+    const onFiltersChange = vi.fn();
+    renderList(makeProps({onFiltersChange}));
+
+    await selectResult('Failed');
+
+    expect(onFiltersChange).toHaveBeenCalledWith({outcome: ['failed', 'errored']});
+  });
+
+  test('an errored-only filter shows Failed as selected', async () => {
+    renderList(makeProps({filters: {outcome: ['errored']}}));
+
+    await openFilters();
+
+    expect(screen.getByLabelText('Remove Failed')).toBeInTheDocument();
+  });
+
+  test('selects an event from the event cell button', async () => {
+    const onSelectEvent = vi.fn();
+    renderList(makeProps({onSelectEvent}));
+
+    await userEvent.click(
+      screen.getByRole('button', {name: 'Open details for github_acme · push'}),
+    );
+
+    expect(onSelectEvent).toHaveBeenCalledWith('evt-1');
+  });
+
+  test('selects an event when the row is clicked', async () => {
+    const onSelectEvent = vi.fn();
+    renderList(makeProps({onSelectEvent}));
+    const row = screen.getByText('Triggered 2 workflows').closest('tr');
+    if (!row) throw new Error('expected an event row');
+
+    await userEvent.click(row);
+
+    expect(onSelectEvent).toHaveBeenCalledWith('evt-1');
+  });
+
+  test('marks the selected event row', () => {
+    renderList(makeProps({selectedEventId: 'evt-1'}));
+
+    expect(
+      screen.getByRole('button', {name: 'Open details for github_acme · push'}).closest('tr'),
+    ).toHaveAttribute('data-selected', 'true');
+  });
+});