@shipfox/client-triggers 0.2.0

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

@@ -0,0 +1,317 @@
+import type {TriggerDecisionDto, TriggerEventDetailResponseDto} from '@shipfox/api-triggers-dto';
+import {Badge} from '@shipfox/react-ui/badge';
+import {Button} from '@shipfox/react-ui/button';
+import {Callout} from '@shipfox/react-ui/callout';
+import {
+  CodeBlock,
+  CodeBlockBody,
+  CodeBlockContent,
+  CodeBlockCopyButton,
+  CodeBlockFilename,
+  CodeBlockFiles,
+  CodeBlockHeader,
+  CodeBlockItem,
+} from '@shipfox/react-ui/code-block';
+import {EmptyState} from '@shipfox/react-ui/empty-state';
+import {Icon} from '@shipfox/react-ui/icon';
+import {RelativeTime} from '@shipfox/react-ui/relative-time';
+import {Skeleton} from '@shipfox/react-ui/skeleton';
+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 {Link} from '@tanstack/react-router';
+import {useMemo} from 'react';
+import {useTriggerEventQuery} from '#hooks/api/trigger-events.js';
+import {triggerEventResult} from './trigger-event-result.js';
+import {TriggerSourceIcon} from './trigger-source-icon.js';
+
+const PANEL_CLASS =
+  'min-h-0 rounded-8 border border-border-neutral-base bg-background-neutral-base';
+
+export interface TriggerEventDetailProps {
+  workspaceId: string;
+  eventId?: string | undefined;
+  onBack: () => void;
+}
+
+export function TriggerEventDetail({workspaceId, eventId, onBack}: TriggerEventDetailProps) {
+  const query = useTriggerEventQuery(eventId);
+
+  if (!eventId) return <TriggerEventDetailPlaceholder />;
+  if (query.data) {
+    return <TriggerEventDetailView workspaceId={workspaceId} event={query.data} onBack={onBack} />;
+  }
+  if (query.isError)
+    return <TriggerEventDetailError onBack={onBack} onRetry={() => query.refetch()} />;
+  return <TriggerEventDetailLoading onBack={onBack} />;
+}
+
+export function TriggerEventDetailView({
+  workspaceId,
+  event,
+  onBack,
+}: {
+  workspaceId: string;
+  event: TriggerEventDetailResponseDto;
+  onBack: () => void;
+}) {
+  const result = triggerEventResult(event);
+  const eventLabel = triggerEventDisplayLabel(event);
+  const fullEventLabel = triggerEventFullLabel(event);
+  const formattedPayload = useMemo(
+    () => JSON.stringify(event.payload ?? null, null, 2) ?? 'null',
+    [event.payload],
+  );
+
+  return (
+    <aside
+      aria-label="Event details"
+      className={cn(PANEL_CLASS, 'flex min-h-0 flex-col overflow-hidden')}
+    >
+      <div className="flex shrink-0 flex-col gap-12 border-b border-border-neutral-base p-16">
+        <Button
+          type="button"
+          variant="transparentMuted"
+          size="sm"
+          iconLeft="arrowLeftLine"
+          className="self-start min-[900px]:hidden"
+          onClick={onBack}
+        >
+          Back to events
+        </Button>
+        <div className="flex min-w-0 items-start justify-between gap-12">
+          <div className="flex min-w-0 flex-col gap-4">
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <button
+                  type="button"
+                  aria-label={fullEventLabel}
+                  className="flex min-w-0 items-center gap-6 rounded-6 border-0 bg-transparent p-0 text-left outline-none focus-visible:shadow-button-neutral-focus"
+                >
+                  <TriggerSourceIcon
+                    provider={event.provider}
+                    source={event.source}
+                    aria-hidden="true"
+                    className="size-16 shrink-0 text-foreground-neutral-muted"
+                  />
+                  <Code as="span" variant="label" className="truncate text-foreground-neutral-base">
+                    {eventLabel}
+                  </Code>
+                </button>
+              </TooltipTrigger>
+              <TooltipContent>
+                <Code as="span" variant="label" className="block max-w-[360px] break-words">
+                  {fullEventLabel}
+                </Code>
+              </TooltipContent>
+            </Tooltip>
+            <Text size="xs" className="truncate text-foreground-neutral-muted">
+              <RelativeTime value={event.received_at} />
+            </Text>
+          </div>
+          <Badge variant={result.badge} size="xs">
+            {result.label}
+          </Badge>
+        </div>
+      </div>
+
+      <div className="flex min-h-0 flex-1 flex-col gap-20 overflow-y-auto p-16 scrollbar">
+        <EventRuns workspaceId={workspaceId} event={event} />
+        <EventPayload payload={formattedPayload} />
+      </div>
+    </aside>
+  );
+}
+
+function triggerEventDisplayLabel(event: Pick<TriggerEventDetailResponseDto, 'event' | 'source'>) {
+  return event.event || event.source;
+}
+
+function triggerEventFullLabel(event: Pick<TriggerEventDetailResponseDto, 'event' | 'source'>) {
+  return [event.source, event.event].filter(Boolean).join(' · ');
+}
+
+function TriggerEventDetailPlaceholder() {
+  return (
+    <aside
+      aria-label="Event details"
+      className={cn(
+        PANEL_CLASS,
+        'hidden min-h-[240px] items-center justify-center p-24 min-[900px]:flex',
+      )}
+    >
+      <EmptyState icon="pulseLine" variant="compact" title="No event selected" />
+    </aside>
+  );
+}
+
+function TriggerEventDetailLoading({onBack}: {onBack: () => void}) {
+  return (
+    <aside
+      aria-label="Event details"
+      className={cn(PANEL_CLASS, 'flex min-h-[320px] flex-col gap-16 p-16')}
+    >
+      <Button
+        type="button"
+        variant="transparentMuted"
+        size="sm"
+        iconLeft="arrowLeftLine"
+        className="self-start min-[900px]:hidden"
+        onClick={onBack}
+      >
+        Back to events
+      </Button>
+      <div className="flex flex-col gap-8">
+        <Skeleton className="h-16 w-160" />
+        <Skeleton className="h-12 w-120" />
+      </div>
+      <Skeleton className="h-96" />
+      <Skeleton className="h-160" />
+    </aside>
+  );
+}
+
+function TriggerEventDetailError({onBack, onRetry}: {onBack: () => void; onRetry: () => void}) {
+  return (
+    <aside aria-label="Event details" className={cn(PANEL_CLASS, 'flex flex-col gap-16 p-16')}>
+      <Button
+        type="button"
+        variant="transparentMuted"
+        size="sm"
+        iconLeft="arrowLeftLine"
+        className="self-start min-[900px]:hidden"
+        onClick={onBack}
+      >
+        Back to events
+      </Button>
+      <Callout role="alert" type="error">
+        <div className="flex items-center justify-between gap-12">
+          <Text size="sm">Event detail could not be loaded.</Text>
+          <Button type="button" variant="secondary" size="xs" onClick={onRetry}>
+            Retry
+          </Button>
+        </div>
+      </Callout>
+    </aside>
+  );
+}
+
+function EventRuns({
+  workspaceId,
+  event,
+}: {
+  workspaceId: string;
+  event: TriggerEventDetailResponseDto;
+}) {
+  if (event.decisions.length === 0) {
+    if (event.outcome === 'discarded') {
+      return (
+        <Text size="sm" className="text-foreground-neutral-muted">
+          No workflows are subscribed to this event.
+        </Text>
+      );
+    }
+    return null;
+  }
+
+  return (
+    <section aria-labelledby="trigger-event-runs-heading" className="flex flex-col gap-6">
+      <Text id="trigger-event-runs-heading" size="sm" bold>
+        Matched workflows
+      </Text>
+      <ul className="-mx-8 flex flex-col gap-1">
+        {event.decisions.map((decision) => (
+          <DecisionRow key={decision.id} workspaceId={workspaceId} decision={decision} />
+        ))}
+      </ul>
+    </section>
+  );
+}
+
+function DecisionRow({workspaceId, decision}: {workspaceId: string; decision: TriggerDecisionDto}) {
+  if (decision.decision !== 'triggered' || !decision.run_id || !decision.run_name) {
+    return (
+      <li className="flex min-w-0 items-start gap-8 rounded-6 px-8 py-6">
+        <Icon
+          name="cornerDownRightLine"
+          className="mt-2 size-14 shrink-0 text-foreground-neutral-disabled"
+          aria-hidden="true"
+        />
+        <div className="flex min-w-0 flex-col gap-1">
+          <Text size="sm" className="min-w-0 truncate text-foreground-neutral-base">
+            {decision.subscription_name}
+          </Text>
+          {decision.reason ? (
+            <Text size="xs" className="text-foreground-highlight-error">
+              {decision.reason}
+            </Text>
+          ) : (
+            <Text size="xs" className="text-foreground-neutral-disabled">
+              No run created
+            </Text>
+          )}
+        </div>
+      </li>
+    );
+  }
+
+  return (
+    <li>
+      <Link
+        to="/workspaces/$wid/projects/$pid/runs/$workflowRunId"
+        params={{wid: workspaceId, pid: decision.project_id, workflowRunId: decision.run_id}}
+        className="flex min-w-0 items-start gap-8 rounded-6 px-8 py-6 transition-colors hover:bg-background-components-hover focus-visible:shadow-border-interactive-with-active focus-visible:outline-none"
+      >
+        <Icon
+          name="cornerDownRightLine"
+          className="mt-3 size-14 shrink-0 text-foreground-neutral-muted"
+          aria-hidden="true"
+        />
+        <span className="flex min-w-0 flex-col gap-1">
+          <Text as="span" size="sm" className="min-w-0 truncate text-foreground-neutral-base">
+            {decision.subscription_name}
+          </Text>
+          <Code as="span" variant="label" className="truncate text-foreground-neutral-muted">
+            {decision.run_name}
+          </Code>
+        </span>
+      </Link>
+    </li>
+  );
+}
+
+function EventPayload({payload}: {payload: string}) {
+  const data = [{language: 'json', filename: 'payload.json', code: payload}];
+
+  return (
+    <section aria-labelledby="trigger-event-payload-heading" className="flex flex-col gap-6">
+      <Text id="trigger-event-payload-heading" size="sm" bold>
+        Payload
+      </Text>
+      <CodeBlock
+        data={data}
+        className="flex h-auto max-h-[min(360px,45vh)] flex-col rounded-8 bg-background-contrast-base shadow-none"
+      >
+        <CodeBlockHeader className="shrink-0 border-b border-border-contrast-base bg-background-contrast-base px-10 py-6">
+          <CodeBlockFiles>
+            {(item) => <CodeBlockFilename value={item.filename}>{item.filename}</CodeBlockFilename>}
+          </CodeBlockFiles>
+          <CodeBlockCopyButton />
+        </CodeBlockHeader>
+        <CodeBlockBody className="min-h-0 overflow-auto scrollbar">
+          {(item) => (
+            <CodeBlockItem
+              value={item.filename}
+              lineNumbers={false}
+              className="px-0 pb-0 [&>div]:rounded-none [&>div]:border-0 [&>div]:bg-background-contrast-base [&>div]:dark:bg-background-contrast-base [&_code]:!text-foreground-neutral-on-color"
+            >
+              <CodeBlockContent language="json" syntaxHighlighting={false}>
+                {item.code}
+              </CodeBlockContent>
+            </CodeBlockItem>
+          )}
+        </CodeBlockBody>
+      </CodeBlock>
+    </section>
+  );
+}

package/src/components/trigger-event-result.test.ts

@@ -0,0 +1,40 @@
+import {triggerEventResult} from './trigger-event-result.js';
+
+describe('triggerEventResult', () => {
+  test('routed reads as triggered workflows and pluralizes', () => {
+    expect(triggerEventResult({outcome: 'routed', matched_count: 2}).label).toBe(
+      'Triggered 2 workflows',
+    );
+    expect(triggerEventResult({outcome: 'routed', matched_count: 1}).label).toBe(
+      'Triggered 1 workflow',
+    );
+  });
+
+  test('routed uses the info badge and is not failed', () => {
+    const result = triggerEventResult({outcome: 'routed', matched_count: 1});
+
+    expect(result.badge).toBe('info');
+    expect(result.isFailure).toBe(false);
+  });
+
+  test('discarded reads as no workflows triggered', () => {
+    const result = triggerEventResult({outcome: 'discarded', matched_count: 0});
+
+    expect(result.label).toBe('No workflows triggered');
+    expect(result.badge).toBe('neutral');
+  });
+
+  test('failed and errored read as failed with the error badge', () => {
+    for (const outcome of ['failed', 'errored'] as const) {
+      const result = triggerEventResult({outcome, matched_count: 1});
+
+      expect(result.label).toBe('Failed');
+      expect(result.badge).toBe('error');
+      expect(result.isFailure).toBe(true);
+    }
+  });
+
+  test('received reads as evaluating', () => {
+    expect(triggerEventResult({outcome: 'received', matched_count: 0}).label).toBe('Evaluating…');
+  });
+});

package/src/components/trigger-event-result.ts

@@ -0,0 +1,40 @@
+import type {TriggerEventListItemDto} from '@shipfox/api-triggers-dto';
+import type {BadgeVariant} from '@shipfox/react-ui/badge';
+
+export interface TriggerEventResult {
+  label: string;
+  badge: BadgeVariant;
+  isFailure: boolean;
+}
+
+/**
+ * Collapses the raw event outcome into the single result an operator cares about:
+ * how many workflows it triggered (or that it failed). `routed`/`discarded` are not
+ * surfaced as distinct states - both are successfully-processed events that differ
+ * only by match count.
+ */
+export function triggerEventResult(
+  event: Pick<TriggerEventListItemDto, 'outcome' | 'matched_count'>,
+): TriggerEventResult {
+  switch (event.outcome) {
+    case 'routed': {
+      const plural = event.matched_count === 1 ? '' : 's';
+      return {
+        label: `Triggered ${event.matched_count} workflow${plural}`,
+        badge: 'info',
+        isFailure: false,
+      };
+    }
+    case 'discarded':
+      return {label: 'No workflows triggered', badge: 'neutral', isFailure: false};
+    case 'failed':
+    case 'errored':
+      return {label: 'Failed', badge: 'error', isFailure: true};
+    case 'received':
+      return {label: 'Evaluating…', badge: 'neutral', isFailure: false};
+    default: {
+      const _exhaustive: never = event.outcome;
+      return {label: 'Unknown', badge: 'warning', isFailure: false};
+    }
+  }
+}

package/src/components/trigger-event-row.tsx

@@ -0,0 +1,86 @@
+import type {TriggerEventListItemDto} from '@shipfox/api-triggers-dto';
+import {RelativeTime} from '@shipfox/react-ui/relative-time';
+import {TableCell, TableRow} from '@shipfox/react-ui/table';
+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 type {MouseEvent} from 'react';
+import {triggerEventResult} from './trigger-event-result.js';
+import {TriggerSourceIcon} from './trigger-source-icon.js';
+
+interface TriggerEventRowProps {
+  event: TriggerEventListItemDto;
+  selected: boolean;
+  onSelect: (eventId: string) => void;
+}
+
+export function TriggerEventRow({event, selected, onSelect}: TriggerEventRowProps) {
+  const result = triggerEventResult(event);
+  const eventLabel = triggerEventDisplayLabel(event);
+  const fullEventLabel = triggerEventFullLabel(event);
+
+  function handleRowClick(clickEvent: MouseEvent<HTMLTableRowElement>) {
+    const target = clickEvent.target;
+    if (target instanceof HTMLElement && target.closest('button,a')) return;
+    onSelect(event.id);
+  }
+
+  return (
+    <TableRow
+      data-selected={selected ? 'true' : undefined}
+      className="cursor-pointer"
+      onClick={handleRowClick}
+    >
+      <TableCell>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <button
+              type="button"
+              className="flex min-w-0 items-center gap-6 rounded-6 text-left outline-none focus-visible:shadow-button-neutral-focus"
+              onClick={() => onSelect(event.id)}
+              aria-label={`Open details for ${fullEventLabel}`}
+            >
+              <TriggerSourceIcon
+                provider={event.provider}
+                source={event.source}
+                aria-hidden="true"
+                className="size-16 shrink-0 text-foreground-neutral-muted"
+              />
+              <Code as="span" variant="label" className="truncate text-foreground-neutral-base">
+                {eventLabel}
+              </Code>
+            </button>
+          </TooltipTrigger>
+          <TooltipContent>
+            <Code as="span" variant="label" className="block max-w-[360px] break-words">
+              {fullEventLabel}
+            </Code>
+          </TooltipContent>
+        </Tooltip>
+      </TableCell>
+      <TableCell>
+        <Text
+          size="sm"
+          className={cn(
+            result.isFailure ? 'text-foreground-highlight-error' : 'text-foreground-neutral-subtle',
+          )}
+        >
+          {result.label}
+        </Text>
+      </TableCell>
+      <TableCell className="text-right">
+        <Code as="span" variant="label" className="text-foreground-neutral-muted">
+          <RelativeTime value={event.received_at} />
+        </Code>
+      </TableCell>
+    </TableRow>
+  );
+}
+
+function triggerEventDisplayLabel(event: Pick<TriggerEventListItemDto, 'event' | 'source'>) {
+  return event.event || event.source;
+}
+
+function triggerEventFullLabel(event: Pick<TriggerEventListItemDto, 'event' | 'source'>) {
+  return [event.source, event.event].filter(Boolean).join(' · ');
+}

package/src/components/trigger-source-icon.react.test.tsx

@@ -0,0 +1,34 @@
+import {render} from '@testing-library/react';
+import {TriggerSourceIcon} from './trigger-source-icon.js';
+
+describe('TriggerSourceIcon', () => {
+  it('exposes a labeled icon to assistive tech when it is the sole identifier', () => {
+    const {container} = render(
+      <TriggerSourceIcon provider={null} source="manual" aria-label="Manual" />,
+    );
+
+    const svg = container.querySelector('svg');
+    expect(svg).toHaveAttribute('aria-label', 'Manual');
+    expect(svg).not.toHaveAttribute('aria-hidden');
+  });
+
+  it('hides the icon from assistive tech when marked decorative', () => {
+    const {container} = render(<TriggerSourceIcon provider={null} source="manual" aria-hidden />);
+
+    const svg = container.querySelector('svg');
+    expect(svg).toHaveAttribute('aria-hidden', 'true');
+  });
+
+  it('forwards class names so callers control sizing and color', () => {
+    const {container} = render(
+      <TriggerSourceIcon
+        provider="github"
+        source="github_acme"
+        className="size-16 text-foreground-neutral-muted"
+      />,
+    );
+
+    const svg = container.querySelector('svg');
+    expect(svg).toHaveClass('size-16', 'text-foreground-neutral-muted');
+  });
+});

package/src/components/trigger-source-icon.test.ts

@@ -0,0 +1,23 @@
+import {getTriggerSourceIcon} from './trigger-source-icon.js';
+
+describe('getTriggerSourceIcon', () => {
+  test('maps the system sources manual and cron to their own icons', () => {
+    expect(getTriggerSourceIcon({provider: null, source: 'manual'})).toBe('cursorLine');
+    expect(getTriggerSourceIcon({provider: null, source: 'cron'})).toBe('timeLine');
+  });
+
+  test('resolves integration icons from provider while preserving slug sources', () => {
+    const icon = getTriggerSourceIcon({provider: 'github', source: 'github_acme'});
+
+    expect(icon).toBe('github');
+  });
+
+  test('falls back for unknown or empty providers', () => {
+    expect(getTriggerSourceIcon({provider: 'gitlab', source: 'gitlab_acme'})).toBe('componentLine');
+    expect(getTriggerSourceIcon({provider: '', source: 'github_acme'})).toBe('componentLine');
+    expect(getTriggerSourceIcon({provider: null, source: 'github_acme'})).toBe('componentLine');
+    expect(getTriggerSourceIcon({provider: undefined, source: 'github_acme'})).toBe(
+      'componentLine',
+    );
+  });
+});

package/src/components/trigger-source-icon.tsx

@@ -0,0 +1,36 @@
+import {getIntegrationIcon} from '@shipfox/client-integrations';
+import {Icon, type IconName} from '@shipfox/react-ui/icon';
+import type {ComponentProps} from 'react';
+
+const SYSTEM_TRIGGER_SOURCE_ICONS: Record<string, IconName> = {
+  manual: 'cursorLine',
+  cron: 'timeLine',
+};
+
+/**
+ * Gives first-class icons to system trigger sources; integration sources keep
+ * using the integration catalog and its fallback.
+ */
+export function getTriggerSourceIcon({
+  provider,
+  source,
+}: {
+  provider: string | null | undefined;
+  source: string | null | undefined;
+}): IconName {
+  const systemIcon = source ? SYSTEM_TRIGGER_SOURCE_ICONS[source] : undefined;
+  return systemIcon ?? getIntegrationIcon(provider);
+}
+
+export interface TriggerSourceIconProps extends Omit<ComponentProps<typeof Icon>, 'name'> {
+  provider: string | null | undefined;
+  source: string | null | undefined;
+}
+
+/**
+ * Preserves the base icon props so callers can decide whether the glyph is
+ * decorative or labeled.
+ */
+export function TriggerSourceIcon({provider, source, ...props}: TriggerSourceIconProps) {
+  return <Icon name={getTriggerSourceIcon({provider, source})} {...props} />;
+}

package/src/components/types.ts

@@ -0,0 +1,22 @@
+import type {
+  TriggerEventFacetsResponseDto,
+  TriggerEventListItemDto,
+} from '@shipfox/api-triggers-dto';
+import type {QueryLoadErrorQuery} from '@shipfox/client-ui';
+import type {TriggerEventFilters} from '#hooks/api/trigger-events.js';
+
+export type TriggerEventsListQuery = QueryLoadErrorQuery & {isPending: boolean};
+
+export interface EventsListProps {
+  events: TriggerEventListItemDto[];
+  query: TriggerEventsListQuery;
+  facets: TriggerEventFacetsResponseDto | undefined;
+  filters: TriggerEventFilters;
+  onFiltersChange: (patch: Partial<TriggerEventFilters>) => void;
+  workspaceId: string;
+  hasNextPage: boolean;
+  isFetchingNextPage: boolean;
+  onLoadMore: () => void;
+  selectedEventId?: string | undefined;
+  onSelectEvent: (eventId: string) => void;
+}