@shipfox/client-triggers 0.2.0

package/src/components/events-list.tsx

@@ -0,0 +1,107 @@
+import {QueryLoadError} from '@shipfox/client-ui';
+import {Button} from '@shipfox/react-ui/button';
+import {Table, TableBody, TableHead, TableHeader, TableRow} from '@shipfox/react-ui/table';
+import type {TriggerEventFilters} from '#hooks/api/trigger-events.js';
+import {EventsFilterBar} from './events-filter-bar.js';
+import {
+  EventsListEmpty,
+  EventsListNoMatches,
+  EventsListSkeleton,
+  EventsListStaleError,
+} from './events-list-states.js';
+import {TriggerEventRow} from './trigger-event-row.js';
+import type {EventsListProps} from './types.js';
+
+function hasAnyFilter(filters: TriggerEventFilters): boolean {
+  return Boolean(
+    (filters.source && filters.source.length > 0) ||
+      (filters.event && filters.event.length > 0) ||
+      filters.from ||
+      filters.to ||
+      (filters.outcome && filters.outcome.length > 0),
+  );
+}
+
+export function EventsList({
+  events,
+  query,
+  facets,
+  filters,
+  onFiltersChange,
+  workspaceId,
+  hasNextPage,
+  isFetchingNextPage,
+  onLoadMore,
+  selectedEventId,
+  onSelectEvent,
+}: EventsListProps) {
+  const activeFilters = hasAnyFilter(filters);
+  const refreshFailed = query.isError && query.data !== undefined;
+  const showEmptyState = !query.isPending && !query.isError && events.length === 0;
+
+  function clearFilters() {
+    onFiltersChange({
+      source: undefined,
+      event: undefined,
+      outcome: undefined,
+      from: undefined,
+      to: undefined,
+    });
+  }
+
+  return (
+    <div className="flex min-h-0 flex-col overflow-hidden rounded-8 border border-border-neutral-base bg-background-neutral-base">
+      <EventsFilterBar
+        filters={filters}
+        onFiltersChange={onFiltersChange}
+        sources={facets?.sources}
+        events={facets?.events}
+        hasActiveFilters={activeFilters}
+        onClear={clearFilters}
+      />
+
+      {query.isPending ? <EventsListSkeleton /> : null}
+      {!query.isPending ? <QueryLoadError query={query} subject="events" icon="pulseLine" /> : null}
+      {!query.isPending && refreshFailed ? <EventsListStaleError query={query} /> : null}
+      {showEmptyState && !activeFilters ? <EventsListEmpty workspaceId={workspaceId} /> : null}
+      {showEmptyState && activeFilters ? <EventsListNoMatches onClear={clearFilters} /> : null}
+
+      {events.length > 0 ? (
+        <>
+          <Table>
+            <TableHeader className="sticky top-0 z-10">
+              <TableRow>
+                <TableHead>Event</TableHead>
+                <TableHead>Result</TableHead>
+                <TableHead className="text-right">Received</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {events.map((event) => (
+                <TriggerEventRow
+                  key={event.id}
+                  event={event}
+                  selected={event.id === selectedEventId}
+                  onSelect={onSelectEvent}
+                />
+              ))}
+            </TableBody>
+          </Table>
+          {hasNextPage ? (
+            <div className="flex justify-center p-16">
+              <Button
+                type="button"
+                variant="secondary"
+                size="sm"
+                isLoading={isFetchingNextPage}
+                onClick={onLoadMore}
+              >
+                Load more
+              </Button>
+            </div>
+          ) : null}
+        </>
+      ) : null}
+    </div>
+  );
+}

package/src/components/trigger-event-detail.stories.tsx

@@ -0,0 +1,169 @@
+import {argosScreenshot} from '@argos-ci/storybook/vitest';
+import type {TriggerEventDetailResponseDto} from '@shipfox/api-triggers-dto';
+import {RelativeTimeProvider} from '@shipfox/react-ui/relative-time';
+import type {Decorator, Meta, StoryObj} from '@storybook/react';
+import {
+  createMemoryHistory,
+  createRootRoute,
+  createRoute,
+  createRouter,
+  Outlet,
+  RouterProvider,
+} from '@tanstack/react-router';
+import {screen} from 'storybook/test';
+import {TriggerEventDetailView} from './trigger-event-detail.js';
+
+const WORKSPACE_ID = '11111111-1111-4111-8111-111111111111';
+const PROJECT_ID = '22222222-2222-4222-8222-222222222222';
+const RUN_ID = '33333333-3333-4333-8333-333333333333';
+
+function minutesAgo(minutes: number): string {
+  return new Date(Date.now() - minutes * 60_000).toISOString();
+}
+
+const withRouter: Decorator = (Story) => {
+  function StoryRoute() {
+    return (
+      <RelativeTimeProvider>
+        <div className="min-h-screen bg-background-subtle-base p-24">
+          <div className="ml-auto w-[400px]">
+            <Story />
+          </div>
+        </div>
+      </RelativeTimeProvider>
+    );
+  }
+
+  const rootRoute = createRootRoute({component: Outlet});
+  const storyRoute = createRoute({
+    getParentRoute: () => rootRoute,
+    path: '/',
+    component: StoryRoute,
+  });
+  const runRoute = createRoute({
+    getParentRoute: () => rootRoute,
+    path: '/workspaces/$wid/projects/$pid/runs/$workflowRunId',
+    component: StoryRoute,
+  });
+  const router = createRouter({
+    history: createMemoryHistory({initialEntries: ['/']}),
+    routeTree: rootRoute.addChildren([storyRoute, runRoute]),
+  });
+
+  return <RouterProvider router={router} />;
+};
+
+const routedEvent: TriggerEventDetailResponseDto = {
+  id: '44444444-4444-4444-8444-444444444444',
+  event_ref: 'github:delivery-179:push',
+  origin: 'integration',
+  workspace_id: WORKSPACE_ID,
+  provider: 'github',
+  source: 'github_acme',
+  event: 'push',
+  delivery_id: 'delivery-179',
+  connection_id: '55555555-5555-4555-8555-555555555555',
+  connection_name: 'ShipfoxHQ Production',
+  outcome: 'routed',
+  matched_count: 2,
+  payload: {
+    ref: 'refs/heads/main',
+    repository: {full_name: 'ShipfoxHQ/platform'},
+    head_commit: {id: '9f1a0f2c7a1b', message: 'Deploy event detail'},
+  },
+  received_at: minutesAgo(15),
+  processed_at: '2026-06-25T19:30:02.000Z',
+  created_at: '2026-06-25T19:30:00.000Z',
+  decisions: [
+    {
+      id: '66666666-6666-4666-8666-666666666666',
+      received_event_id: '44444444-4444-4444-8444-444444444444',
+      subscription_kind: 'trigger',
+      subscription_id: '77777777-7777-4777-8777-777777777777',
+      subscription_name: 'Deploy production',
+      workflow_definition_id: '88888888-8888-4888-8888-888888888888',
+      project_id: PROJECT_ID,
+      workflow_run_id: null,
+      job_id: null,
+      matcher_kind: null,
+      matcher_ordinal: null,
+      decision: 'triggered',
+      run_id: RUN_ID,
+      run_name: 'deploy-web #184',
+      reason: null,
+      created_at: '2026-06-25T19:30:02.000Z',
+    },
+    {
+      id: '99999999-9999-4999-8999-999999999999',
+      received_event_id: '44444444-4444-4444-8444-444444444444',
+      subscription_kind: 'trigger',
+      subscription_id: 'aaaaaaaa-aaaa-4aaa-8aaa-aaaaaaaaaaaa',
+      subscription_name: 'Mirror staging',
+      workflow_definition_id: 'bbbbbbbb-bbbb-4bbb-8bbb-bbbbbbbbbbbb',
+      project_id: PROJECT_ID,
+      workflow_run_id: null,
+      job_id: null,
+      matcher_kind: null,
+      matcher_ordinal: null,
+      decision: 'triggered',
+      run_id: 'cccccccc-cccc-4ccc-8ccc-cccccccccccc',
+      run_name: 'mirror-staging #51',
+      reason: null,
+      created_at: '2026-06-25T19:30:02.000Z',
+    },
+  ],
+};
+
+const discardedEvent: TriggerEventDetailResponseDto = {
+  ...routedEvent,
+  id: 'dddddddd-dddd-4ddd-8ddd-dddddddddddd',
+  event_ref: 'github:delivery-180:issue_comment',
+  event: 'issue_comment',
+  delivery_id: 'delivery-180',
+  outcome: 'discarded',
+  matched_count: 0,
+  payload: {action: 'created', comment: {body: '/preview'}},
+  processed_at: '2026-06-25T19:33:01.000Z',
+  decisions: [],
+};
+
+const meta = {
+  title: 'Triggers/EventDetail',
+  component: TriggerEventDetailView,
+  parameters: {
+    layout: 'fullscreen',
+    argos: {
+      modes: {
+        light: {theme: 'light'},
+        dark: {theme: 'dark'},
+      },
+    },
+  },
+  decorators: [withRouter],
+  args: {
+    workspaceId: WORKSPACE_ID,
+    event: routedEvent,
+    onBack: () => undefined,
+  },
+} satisfies Meta<typeof TriggerEventDetailView>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+async function captureDetail(ctx: Parameters<NonNullable<Story['play']>>[0], name: string) {
+  await screen.findByRole('complementary', {name: 'Event details'});
+  await argosScreenshot(ctx, name);
+}
+
+export const Playground: Story = {
+  play: async (ctx) => {
+    await captureDetail(ctx, 'Trigger Event Detail Playground');
+  },
+};
+
+export const Discarded: Story = {
+  args: {event: discardedEvent},
+  play: async (ctx) => {
+    await captureDetail(ctx, 'Trigger Event Detail Discarded');
+  },
+};

package/src/components/trigger-event-detail.test.tsx

@@ -0,0 +1,201 @@
+import type {TriggerEventDetailResponseDto} from '@shipfox/api-triggers-dto';
+import {RelativeTimeProvider} from '@shipfox/react-ui/relative-time';
+import {fireEvent, render, screen} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import type {ReactElement} from 'react';
+import {useTriggerEventQuery} from '#hooks/api/trigger-events.js';
+import {TriggerEventDetail, TriggerEventDetailView} from './trigger-event-detail.js';
+
+const WORKSPACE_ID = '11111111-1111-4111-8111-111111111111';
+const PROJECT_ID = '22222222-2222-4222-8222-222222222222';
+const RUN_ID = '33333333-3333-4333-8333-333333333333';
+const EVENT_ID = '44444444-4444-4444-8444-444444444444';
+const DEPLOY_RUN_LINK_NAME = /deploy-web #184/u;
+const PAYLOAD_REF_LINE = /"ref": "refs\/heads\/main"/u;
+
+const useTriggerEventQueryMock = vi.mocked(useTriggerEventQuery);
+
+function makeEvent(
+  overrides: Partial<TriggerEventDetailResponseDto> = {},
+): TriggerEventDetailResponseDto {
+  return {
+    id: EVENT_ID,
+    event_ref: 'github:delivery-179:push',
+    origin: 'integration',
+    workspace_id: WORKSPACE_ID,
+    provider: 'github',
+    source: 'github',
+    event: 'push',
+    delivery_id: 'delivery-179',
+    connection_id: '55555555-5555-4555-8555-555555555555',
+    connection_name: 'ShipfoxHQ Production',
+    outcome: 'routed',
+    matched_count: 1,
+    payload: {ref: 'refs/heads/main', action: 'push'},
+    received_at: '2026-06-25T19:30:00.000Z',
+    processed_at: '2026-06-25T19:30:02.000Z',
+    created_at: '2026-06-25T19:30:00.000Z',
+    decisions: [
+      {
+        id: '66666666-6666-4666-8666-666666666666',
+        received_event_id: EVENT_ID,
+        subscription_kind: 'trigger',
+        subscription_id: '77777777-7777-4777-8777-777777777777',
+        subscription_name: 'Deploy production',
+        workflow_definition_id: '88888888-8888-4888-8888-888888888888',
+        project_id: PROJECT_ID,
+        workflow_run_id: null,
+        job_id: null,
+        matcher_kind: null,
+        matcher_ordinal: null,
+        decision: 'triggered',
+        run_id: RUN_ID,
+        run_name: 'deploy-web #184',
+        reason: null,
+        created_at: '2026-06-25T19:30:02.000Z',
+      },
+    ],
+    ...overrides,
+  };
+}
+
+function renderWithProviders(ui: ReactElement) {
+  return render(<RelativeTimeProvider>{ui}</RelativeTimeProvider>);
+}
+
+function renderDetailView(event: TriggerEventDetailResponseDto, onBack = vi.fn()) {
+  return renderWithProviders(
+    <TriggerEventDetailView workspaceId={WORKSPACE_ID} event={event} onBack={onBack} />,
+  );
+}
+
+describe('TriggerEventDetailView', () => {
+  test('renders the result badge, run links, and payload', async () => {
+    renderDetailView(makeEvent());
+
+    expect(await screen.findByText('Triggered 1 workflow')).toBeInTheDocument();
+    expect(screen.getByText('Deploy production')).toBeInTheDocument();
+    expect(screen.getByRole('link', {name: DEPLOY_RUN_LINK_NAME})).toHaveAttribute(
+      'href',
+      `/workspaces/${WORKSPACE_ID}/projects/${PROJECT_ID}/runs/${RUN_ID}`,
+    );
+    expect(screen.getByText(PAYLOAD_REF_LINE)).toBeInTheDocument();
+  });
+
+  test('renders a no-subscriptions note for a discarded event', async () => {
+    renderDetailView(makeEvent({outcome: 'discarded', matched_count: 0, decisions: []}));
+
+    expect(await screen.findByText('No workflows triggered')).toBeInTheDocument();
+    expect(screen.getByText('No workflows are subscribed to this event.')).toBeInTheDocument();
+    expect(screen.queryByText('Matched workflows')).not.toBeInTheDocument();
+  });
+
+  test('renders failed decisions inline with their reason', async () => {
+    renderDetailView(
+      makeEvent({
+        outcome: 'errored',
+        decisions: [
+          {
+            id: '66666666-6666-4666-8666-666666666666',
+            received_event_id: EVENT_ID,
+            subscription_kind: 'trigger',
+            subscription_id: '77777777-7777-4777-8777-777777777777',
+            subscription_name: 'Deploy production',
+            workflow_definition_id: '88888888-8888-4888-8888-888888888888',
+            project_id: PROJECT_ID,
+            workflow_run_id: null,
+            job_id: null,
+            matcher_kind: null,
+            matcher_ordinal: null,
+            decision: 'dispatch-error',
+            run_id: null,
+            run_name: null,
+            reason: 'workflow definition deleted',
+            created_at: '2026-06-25T19:30:02.000Z',
+          },
+        ],
+      }),
+    );
+
+    expect(await screen.findByText('Failed')).toBeInTheDocument();
+    expect(screen.getByText('Deploy production')).toBeInTheDocument();
+    expect(screen.getByText('workflow definition deleted')).toBeInTheDocument();
+  });
+
+  test('renders null run fields without a run link', async () => {
+    renderDetailView(
+      makeEvent({
+        decisions: [
+          {
+            id: '66666666-6666-4666-8666-666666666666',
+            received_event_id: EVENT_ID,
+            subscription_kind: 'trigger',
+            subscription_id: '77777777-7777-4777-8777-777777777777',
+            subscription_name: 'Deploy production',
+            workflow_definition_id: '88888888-8888-4888-8888-888888888888',
+            project_id: PROJECT_ID,
+            workflow_run_id: null,
+            job_id: null,
+            matcher_kind: null,
+            matcher_ordinal: null,
+            decision: 'filter-error',
+            run_id: null,
+            run_name: null,
+            reason: null,
+            created_at: '2026-06-25T19:30:02.000Z',
+          },
+        ],
+      }),
+    );
+
+    expect(await screen.findByText('No run created')).toBeInTheDocument();
+    expect(screen.queryByRole('link')).not.toBeInTheDocument();
+  });
+
+  test('calls onBack from the focused detail panel control', async () => {
+    const onBack = vi.fn();
+    renderDetailView(makeEvent(), onBack);
+
+    await userEvent.click(await screen.findByRole('button', {name: 'Back to events'}));
+
+    expect(onBack).toHaveBeenCalledTimes(1);
+  });
+});
+
+describe('TriggerEventDetail', () => {
+  beforeEach(() => {
+    useTriggerEventQueryMock.mockReset();
+  });
+
+  test('renders a loading panel while the detail query is pending', async () => {
+    useTriggerEventQueryMock.mockReturnValue({
+      data: undefined,
+      isError: false,
+      refetch: vi.fn(),
+    } as unknown as ReturnType<typeof useTriggerEventQuery>);
+
+    renderWithProviders(
+      <TriggerEventDetail workspaceId={WORKSPACE_ID} eventId={EVENT_ID} onBack={vi.fn()} />,
+    );
+
+    expect(await screen.findByRole('button', {name: 'Back to events'})).toBeInTheDocument();
+  });
+
+  test('renders a retry action when the detail query fails', async () => {
+    const refetch = vi.fn();
+    useTriggerEventQueryMock.mockReturnValue({
+      data: undefined,
+      isError: true,
+      refetch,
+    } as unknown as ReturnType<typeof useTriggerEventQuery>);
+
+    renderWithProviders(
+      <TriggerEventDetail workspaceId={WORKSPACE_ID} eventId={EVENT_ID} onBack={vi.fn()} />,
+    );
+
+    fireEvent.click(await screen.findByRole('button', {name: 'Retry'}));
+
+    expect(screen.getByText('Event detail could not be loaded.')).toBeInTheDocument();
+    expect(refetch).toHaveBeenCalledTimes(1);
+  });
+});