@shipfox/client-workflows 13.0.0 → 14.0.1

package/src/components/workflow-run-tabs/index.ts

@@ -0,0 +1,5 @@
+export {RunAnnotationSummaryLine} from './run-annotation-summary-line.js';
+export {RunAnnotationsEmpty} from './run-annotations-empty.js';
+export {RunJobsList} from './run-jobs-list.js';
+export {RunTabCount} from './run-tab-count.js';
+export {RunTabStrip} from './run-tab-strip.js';

package/src/components/workflow-run-tabs/run-annotation-summary-line.test.tsx

@@ -0,0 +1,69 @@
+import {
+  createMemoryHistory,
+  createRootRoute,
+  createRoute,
+  createRouter,
+  Outlet,
+  RouterProvider,
+} from '@tanstack/react-router';
+import {act, render, screen} from '@testing-library/react';
+import type {RunAnnotationSummary} from '#core/workflow-run-tabs.js';
+import type {WorkflowRunsSearch} from '#routes/inputs.js';
+import {RunAnnotationSummaryLine} from './run-annotation-summary-line.js';
+
+const ANNOTATION_SUMMARY: RunAnnotationSummary = {
+  total: 5,
+  error: 2,
+  warning: 1,
+  info: 2,
+  success: 0,
+};
+
+describe('RunAnnotationSummaryLine', () => {
+  test('links the severity breakdown into the Annotations panel', async () => {
+    await renderSummaryLine();
+
+    expect(screen.getByText('5 annotations')).toBeInTheDocument();
+    expect(screen.getByRole('link', {name: '2 errors'})).toHaveAttribute(
+      'href',
+      '/w/acme/p/project/runs/run-1?tab=annotations&severity=error',
+    );
+  });
+
+  test('clears a stale annotation when linking to a severity', async () => {
+    await renderSummaryLine({annotation: 'annotation-old'});
+
+    expect(screen.getByRole('link', {name: '2 errors'})).toHaveAttribute(
+      'href',
+      '/w/acme/p/project/runs/run-1?tab=annotations&severity=error',
+    );
+  });
+});
+
+async function renderSummaryLine(search: WorkflowRunsSearch = {}) {
+  const rootRoute = createRootRoute({component: Outlet});
+  const runRoute = createRoute({
+    getParentRoute: () => rootRoute,
+    path: '/w/$workspaceSlug/p/$projectSlug/runs/$workflowRunId',
+    component: () => (
+      <RunAnnotationSummaryLine
+        summary={ANNOTATION_SUMMARY}
+        workspaceSlug="acme"
+        projectSlug="project"
+        workflowRunId="run-1"
+        search={search}
+      />
+    ),
+  });
+  const router = createRouter({
+    history: createMemoryHistory({initialEntries: ['/w/acme/p/project/runs/run-1']}),
+    routeTree: rootRoute.addChildren([runRoute]),
+  });
+  await router.load();
+  let result: ReturnType<typeof render> | undefined;
+  await act(() => {
+    result = render(<RouterProvider router={router} />);
+  });
+  if (!result) throw new Error('Run annotation summary did not render.');
+  return result;
+}

package/src/components/workflow-run-tabs/run-annotation-summary-line.tsx

@@ -0,0 +1,97 @@
+import {Text} from '@shipfox/react-ui/typography';
+import {Link} from '@tanstack/react-router';
+import type {RunAnnotationSummary} from '#core/workflow-run-tabs.js';
+import {
+  WORKFLOW_RUN_ANNOTATION_SEVERITIES,
+  type WorkflowRunAnnotationSeverity,
+  type WorkflowRunsSearch,
+  workflowRunSearchParams,
+} from '#routes/inputs.js';
+import {MetadataSeparator} from '../workflow-run-summary/workflow-run-summary.js';
+
+export interface RunAnnotationSummaryLineProps {
+  summary?: RunAnnotationSummary | undefined;
+  workspaceSlug?: string | undefined;
+  projectSlug?: string | undefined;
+  workflowRunId?: string | undefined;
+  search?: WorkflowRunsSearch | undefined;
+}
+
+export function RunAnnotationSummaryLine({
+  summary,
+  workspaceSlug,
+  projectSlug,
+  workflowRunId,
+  search = {},
+}: RunAnnotationSummaryLineProps) {
+  if (!summary) return null;
+
+  const visibleSeverities = WORKFLOW_RUN_ANNOTATION_SEVERITIES.filter(
+    (severity) => summary[severity] > 0,
+  );
+
+  return (
+    <div className="flex flex-wrap items-center gap-x-8 gap-y-4 text-foreground-neutral-subtle">
+      <Text as="span" size="xs" className="shrink-0 text-foreground-neutral-subtle">
+        {summary.total} {pluralize('annotation', summary.total)}
+      </Text>
+      {visibleSeverities.map((severity) => (
+        <span key={severity} className="inline-flex shrink-0 items-center gap-8">
+          <MetadataSeparator />
+          <SeverityLink
+            count={summary[severity]}
+            severity={severity}
+            workspaceSlug={workspaceSlug}
+            projectSlug={projectSlug}
+            workflowRunId={workflowRunId}
+            search={search}
+          />
+        </span>
+      ))}
+    </div>
+  );
+}
+
+function SeverityLink({
+  count,
+  severity,
+  workspaceSlug,
+  projectSlug,
+  workflowRunId,
+  search,
+}: {
+  count: number;
+  severity: WorkflowRunAnnotationSeverity;
+  workspaceSlug?: string | undefined;
+  projectSlug?: string | undefined;
+  workflowRunId?: string | undefined;
+  search: WorkflowRunsSearch;
+}) {
+  const label = `${count} ${pluralize(severity, count)}`;
+  if (!workspaceSlug || !projectSlug || !workflowRunId) {
+    return <span className="text-foreground-highlight-interactive">{label}</span>;
+  }
+
+  const searchWithoutAnnotation = {...search};
+  delete searchWithoutAnnotation.annotation;
+
+  return (
+    <Link
+      to="/w/$workspaceSlug/p/$projectSlug/runs/$workflowRunId"
+      params={{workspaceSlug, projectSlug, workflowRunId}}
+      search={
+        workflowRunSearchParams(
+          {...searchWithoutAnnotation, tab: 'annotations', severity},
+          search,
+        ) as never
+      }
+      className="text-foreground-highlight-interactive outline-none hover:underline focus-visible:shadow-border-interactive-with-active"
+    >
+      {label}
+    </Link>
+  );
+}
+
+function pluralize(word: string, count: number): string {
+  return count === 1 ? word : `${word}s`;
+}

package/src/components/workflow-run-tabs/run-annotations-empty.tsx

@@ -0,0 +1,11 @@
+import {EmptyState} from '@shipfox/react-ui/empty-state';
+
+export function RunAnnotationsEmpty() {
+  return (
+    <EmptyState
+      icon="fileDamageLine"
+      title="No annotations"
+      description="This run has no annotations to show."
+    />
+  );
+}

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

@@ -0,0 +1,151 @@
+import {EmptyState} from '@shipfox/react-ui/empty-state';
+import {useTimeTick} from '@shipfox/react-ui/time-ticker';
+import {cn} from '@shipfox/react-ui/utils';
+import {
+  defaultJobExecution,
+  deriveJobDisplayStatus,
+  deriveJobExecutionDisplayStatus,
+  type Job,
+} from '#core/workflow-run.js';
+import {formatJobDurationAccessibleLabel} from '../job-graph/job-duration-format.js';
+import {JobDurationLabel} from '../job-graph/job-duration-label.js';
+import {JobCard} from '../workflow-run-view/job-card.js';
+import {WorkflowStatusIcon} from '../workflow-status/workflow-status-icon.js';
+
+export interface RunJobsListProps {
+  jobs: Job[];
+  selectedJobId?: string | undefined;
+  onSelectedJobChange: (jobId: string | undefined) => void;
+  workspaceSlug?: string | undefined;
+  selectedJobExecution: ReturnType<typeof defaultJobExecution>;
+  selectedAttemptId: string | null | undefined;
+  onSelectedJobExecutionChange: ((jobExecutionId: string | undefined) => void) | undefined;
+  onSelectedAttemptChange: ((attemptId: string | undefined) => void) | undefined;
+  sourcePanelId?: string | undefined;
+  sourceAvailable?: boolean | undefined;
+  focusedSourceStepId?: string | null | undefined;
+  onOpenStepSource?: Parameters<typeof JobCard>[0]['onOpenStepSource'];
+}
+
+export function RunJobsList({
+  jobs,
+  selectedJobId,
+  onSelectedJobChange,
+  workspaceSlug,
+  selectedJobExecution,
+  selectedAttemptId,
+  onSelectedJobExecutionChange,
+  onSelectedAttemptChange,
+  sourcePanelId,
+  sourceAvailable,
+  focusedSourceStepId,
+  onOpenStepSource,
+}: RunJobsListProps) {
+  useTimeTick();
+
+  if (jobs.length === 0) {
+    return (
+      <section
+        aria-label="Workflow jobs"
+        className="rounded-8 border border-border-neutral-base bg-background-components-base"
+      >
+        <div className="min-h-160">
+          <RunJobsEmptyState />
+        </div>
+      </section>
+    );
+  }
+
+  const orderedJobs = [...jobs].sort(compareJobs);
+
+  return (
+    <section aria-label="Workflow jobs" className="flex min-w-0 flex-col gap-8">
+      <ul aria-label="Run jobs" className="m-0 flex min-w-0 list-none flex-col gap-8 p-0">
+        {orderedJobs.map((job) => {
+          const selected = job.id === selectedJobId;
+          const status = deriveJobDisplayStatus(job);
+          const execution = defaultJobExecution(job);
+          const durationLabel = formatJobDurationAccessibleLabel(
+            job.displayDuration,
+            execution ? deriveJobExecutionDisplayStatus(execution) : undefined,
+          );
+          const rowLabel = [
+            job.displayName,
+            statusLabel(status),
+            durationLabel,
+            job.carriedOver ? 'reused' : undefined,
+          ]
+            .filter((part): part is string => Boolean(part))
+            .join(', ');
+
+          return (
+            <li key={job.id} className="min-w-0">
+              <button
+                type="button"
+                aria-expanded={selected}
+                aria-controls={selected ? `job-card-${job.id}` : undefined}
+                aria-label={rowLabel}
+                onClick={() => onSelectedJobChange(selected ? undefined : job.id)}
+                className={cn(
+                  'relative flex min-h-44 w-full min-w-0 items-center gap-8 rounded-8 bg-background-neutral-base px-12 text-left shadow-button-neutral outline-none transition-colors hover:bg-background-components-hover focus-visible:shadow-button-neutral-focus',
+                  selected &&
+                    'bg-background-components-hover hover:bg-background-components-pressed',
+                )}
+              >
+                {selected ? (
+                  <span
+                    aria-hidden="true"
+                    className="absolute inset-y-6 left-0 w-px rounded-full bg-border-highlights-interactive"
+                  />
+                ) : null}
+                <WorkflowStatusIcon status={status} size={14} tooltip={false} />
+                <span className="min-w-0 flex-1 truncate text-sm font-medium text-foreground-neutral-base">
+                  {job.displayName}
+                </span>
+                <JobDurationLabel duration={job.displayDuration} />
+              </button>
+              {selected ? (
+                <div id={`job-card-${job.id}`} className="mt-8">
+                  <JobCard
+                    workspaceSlug={workspaceSlug}
+                    job={job}
+                    selectedJobExecution={selectedJobExecution}
+                    selectedAttemptId={job.carriedOver ? undefined : selectedAttemptId}
+                    onSelectedJobExecutionChange={onSelectedJobExecutionChange}
+                    onSelectedAttemptChange={onSelectedAttemptChange}
+                    sourcePanelId={sourcePanelId}
+                    sourceAvailable={sourceAvailable}
+                    focusedSourceStepId={focusedSourceStepId}
+                    onOpenStepSource={onOpenStepSource}
+                  />
+                </div>
+              ) : null}
+            </li>
+          );
+        })}
+      </ul>
+    </section>
+  );
+}
+
+function RunJobsEmptyState() {
+  return (
+    <EmptyState
+      icon="componentLine"
+      title="No jobs yet"
+      description="This run has not materialized jobs."
+    />
+  );
+}
+
+function compareJobs(left: Job, right: Job): number {
+  return (
+    left.position - right.position ||
+    left.displayName.localeCompare(right.displayName) ||
+    left.id.localeCompare(right.id)
+  );
+}
+
+function statusLabel(status: ReturnType<typeof deriveJobDisplayStatus>): string {
+  return status === 'listening' ? 'Listening' : status.charAt(0).toUpperCase() + status.slice(1);
+}

package/src/components/workflow-run-tabs/run-tab-count.tsx

@@ -0,0 +1,28 @@
+import {Badge} from '@shipfox/react-ui/badge';
+
+export function RunTabCount({
+  count,
+  alertCount = 0,
+  alertLabel,
+}: {
+  count: number | undefined;
+  alertCount?: number | undefined;
+  alertLabel: string;
+}) {
+  if (count === undefined && alertCount <= 0) return null;
+
+  return (
+    <>
+      {count === undefined ? null : (
+        <Badge size="2xs" variant="neutral" aria-hidden="true">
+          {count}
+        </Badge>
+      )}
+      {alertCount > 0 ? (
+        <Badge size="2xs" variant="error" aria-hidden="true">
+          {alertCount} {alertLabel}
+        </Badge>
+      ) : null}
+    </>
+  );
+}

package/src/components/workflow-run-tabs/run-tab-strip.stories.tsx

@@ -0,0 +1,52 @@
+import {Tabs} from '@shipfox/react-ui/tabs';
+import type {Meta, StoryObj} from '@storybook/react';
+import type {RunAnnotationSummary} from '#core/workflow-run-tabs.js';
+import {RunTabStrip} from './run-tab-strip.js';
+
+const ANNOTATION_SUMMARY: RunAnnotationSummary = {
+  total: 8,
+  error: 2,
+  warning: 3,
+  info: 2,
+  success: 1,
+};
+
+const meta = {
+  title: 'Workflows/RunTabStrip',
+  component: RunTabStrip,
+  parameters: {layout: 'fullscreen'},
+  render: (args) => (
+    <div className="bg-background-neutral-background">
+      <Tabs defaultValue="summary">
+        <RunTabStrip {...args} />
+      </Tabs>
+    </div>
+  ),
+  args: {
+    jobCount: 6,
+    jobsFailed: 1,
+    annotationSummary: ANNOTATION_SUMMARY,
+  },
+} satisfies Meta<typeof RunTabStrip>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {};
+
+export const NoCounts: Story = {
+  args: {
+    jobCount: undefined,
+    annotationSummary: undefined,
+  },
+};
+
+export const NarrowLayout: Story = {
+  decorators: [
+    (Story) => (
+      <div className="w-[360px] max-w-full overflow-hidden border">
+        <Story />
+      </div>
+    ),
+  ],
+};

package/src/components/workflow-run-tabs/run-tab-strip.test.tsx

@@ -0,0 +1,117 @@
+import {Tabs} from '@shipfox/react-ui/tabs';
+import {
+  createMemoryHistory,
+  createRootRoute,
+  createRoute,
+  createRouter,
+  Outlet,
+  RouterProvider,
+} from '@tanstack/react-router';
+import {act, render, screen, within} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import type {RunAnnotationSummary} from '#core/workflow-run-tabs.js';
+import {RunTabStrip} from './run-tab-strip.js';
+
+const ANNOTATION_SUMMARY: RunAnnotationSummary = {
+  total: 5,
+  error: 2,
+  warning: 1,
+  info: 2,
+  success: 0,
+};
+
+describe('RunTabStrip', () => {
+  test('exposes tab counts and keyboard navigation', async () => {
+    const user = userEvent.setup();
+
+    await renderStrip({annotationSummary: ANNOTATION_SUMMARY, jobCount: 3, jobsFailed: 1});
+
+    const jobsTab = screen.getByRole('tab', {name: 'Jobs, 3 jobs, 1 failed'});
+    const annotationsTab = screen.getByRole('tab', {
+      name: 'Annotations, 5 annotations, 2 errors',
+    });
+    expect(within(jobsTab).getByText('3')).toHaveClass('bg-tag-neutral-bg');
+    expect(within(jobsTab).getByText('1 failed')).toHaveClass('bg-tag-error-bg');
+    expect(within(annotationsTab).getByText('5')).toHaveClass('bg-tag-neutral-bg');
+    expect(within(annotationsTab).getByText('2 errors')).toHaveClass('bg-tag-error-bg');
+    expect(screen.queryByRole('link', {name: '2 errors'})).not.toBeInTheDocument();
+    expect(screen.getByRole('tab', {name: 'Source'})).toHaveClass(
+      'data-[state=inactive]:text-foreground-neutral-subtle',
+      'data-[state=inactive]:hover:text-foreground-neutral-base',
+    );
+
+    const summary = screen.getByRole('tab', {name: 'Summary'});
+    expect(screen.getByRole('tablist', {name: 'Run sections'})).toHaveClass('min-w-full', 'px-16');
+    expect(summary.parentElement?.parentElement).toHaveClass('bg-background-neutral-background');
+    summary.focus();
+    await user.keyboard('{ArrowRight}');
+
+    expect(screen.getByRole('tab', {name: 'Jobs, 3 jobs, 1 failed'})).toHaveAttribute(
+      'aria-selected',
+      'true',
+    );
+    expect(screen.getByRole('tab', {name: 'Summary'})).toHaveAttribute('tabindex', '-1');
+  });
+
+  test('does not reserve count space when data is absent', async () => {
+    await renderStrip({annotationSummary: undefined, jobCount: undefined});
+
+    const jobsTab = screen.getByRole('tab', {name: 'Jobs'});
+    const annotationsTab = screen.getByRole('tab', {name: 'Annotations'});
+
+    expect(jobsTab).toBeInTheDocument();
+    expect(annotationsTab).toBeInTheDocument();
+    expect(jobsTab.querySelector('[data-slot="badge"]')).toBeNull();
+    expect(annotationsTab.querySelector('[data-slot="badge"]')).toBeNull();
+    expect(screen.queryByText('5 annotations')).not.toBeInTheDocument();
+  });
+
+  test('singularizes accessible count labels', async () => {
+    await renderStrip({
+      annotationSummary: {total: 1, error: 1, warning: 0, info: 0, success: 0},
+      jobCount: 1,
+      jobsFailed: 1,
+    });
+
+    expect(screen.getByRole('tab', {name: 'Jobs, 1 job, 1 failed'})).toBeInTheDocument();
+    expect(
+      screen.getByRole('tab', {name: 'Annotations, 1 annotation, 1 error'}),
+    ).toBeInTheDocument();
+  });
+});
+
+async function renderStrip({
+  annotationSummary,
+  jobCount,
+  jobsFailed = 0,
+}: {
+  annotationSummary?: RunAnnotationSummary | undefined;
+  jobCount?: number | undefined;
+  jobsFailed?: number | undefined;
+} = {}) {
+  const rootRoute = createRootRoute({component: Outlet});
+  const runRoute = createRoute({
+    getParentRoute: () => rootRoute,
+    path: '/w/$workspaceSlug/p/$projectSlug/runs/$workflowRunId',
+    component: () => (
+      <Tabs defaultValue="summary">
+        <RunTabStrip
+          jobCount={jobCount}
+          jobsFailed={jobsFailed}
+          annotationSummary={annotationSummary}
+        />
+      </Tabs>
+    ),
+  });
+  const router = createRouter({
+    history: createMemoryHistory({initialEntries: ['/w/acme/p/project/runs/run-1']}),
+    routeTree: rootRoute.addChildren([runRoute]),
+  });
+  await router.load();
+  let result: ReturnType<typeof render> | undefined;
+  await act(() => {
+    result = render(<RouterProvider router={router} />);
+  });
+  if (!result) throw new Error('Run tab strip did not render.');
+  return result;
+}

package/src/components/workflow-run-tabs/run-tab-strip.tsx

@@ -0,0 +1,97 @@
+import {TabsList, TabsTrigger} from '@shipfox/react-ui/tabs';
+import type {RunAnnotationSummary} from '#core/workflow-run-tabs.js';
+import {RunTabCount} from './run-tab-count.js';
+
+export interface RunTabStripProps {
+  jobCount?: number | undefined;
+  jobsFailed?: number | undefined;
+  annotationSummary?: RunAnnotationSummary | undefined;
+}
+
+export function RunTabStrip({jobCount, jobsFailed = 0, annotationSummary}: RunTabStripProps) {
+  const annotationCount = annotationSummary?.total;
+  const annotationErrors = annotationSummary?.error ?? 0;
+
+  return (
+    <div className="min-w-0 overflow-x-auto border-b border-border-neutral-base bg-background-neutral-background [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
+      <TabsList
+        aria-label="Run sections"
+        className="h-40 min-h-40 w-max min-w-full gap-16 px-16 [@media(pointer:coarse)]:h-44 [@media(pointer:coarse)]:min-h-44"
+      >
+        <TabsTrigger
+          value="summary"
+          className="h-40 min-h-40 py-0 text-xs data-[state=inactive]:text-foreground-neutral-subtle data-[state=inactive]:hover:text-foreground-neutral-base [@media(pointer:coarse)]:h-44 [@media(pointer:coarse)]:min-h-44"
+        >
+          Summary
+        </TabsTrigger>
+        <TabsTrigger
+          value="jobs"
+          aria-label={runTabAccessibleName({
+            label: 'Jobs',
+            total: jobCount,
+            totalSingular: 'job',
+            totalPlural: 'jobs',
+            alertCount: jobsFailed,
+            alertSingular: 'failed',
+            alertPlural: 'failed',
+          })}
+          className="h-40 min-h-40 gap-6 py-0 text-xs data-[state=inactive]:text-foreground-neutral-subtle data-[state=inactive]:hover:text-foreground-neutral-base [@media(pointer:coarse)]:h-44 [@media(pointer:coarse)]:min-h-44"
+        >
+          <span>Jobs</span>
+          <RunTabCount count={jobCount} alertCount={jobsFailed} alertLabel="failed" />
+        </TabsTrigger>
+        <TabsTrigger
+          value="annotations"
+          aria-label={runTabAccessibleName({
+            label: 'Annotations',
+            total: annotationCount,
+            totalSingular: 'annotation',
+            totalPlural: 'annotations',
+            alertCount: annotationErrors,
+            alertSingular: 'error',
+            alertPlural: 'errors',
+          })}
+          className="h-40 min-h-40 gap-6 py-0 text-xs data-[state=inactive]:text-foreground-neutral-subtle data-[state=inactive]:hover:text-foreground-neutral-base [@media(pointer:coarse)]:h-44 [@media(pointer:coarse)]:min-h-44"
+        >
+          <span>Annotations</span>
+          <RunTabCount
+            count={annotationCount}
+            alertCount={annotationErrors}
+            alertLabel={annotationErrors === 1 ? 'error' : 'errors'}
+          />
+        </TabsTrigger>
+        <TabsTrigger
+          value="source"
+          className="h-40 min-h-40 py-0 text-xs data-[state=inactive]:text-foreground-neutral-subtle data-[state=inactive]:hover:text-foreground-neutral-base [@media(pointer:coarse)]:h-44 [@media(pointer:coarse)]:min-h-44"
+        >
+          Source
+        </TabsTrigger>
+      </TabsList>
+    </div>
+  );
+}
+
+function runTabAccessibleName({
+  label,
+  total,
+  totalSingular,
+  totalPlural,
+  alertCount,
+  alertSingular,
+  alertPlural,
+}: {
+  label: string;
+  total: number | undefined;
+  totalSingular: string;
+  totalPlural: string;
+  alertCount: number;
+  alertSingular: string;
+  alertPlural: string;
+}): string {
+  const parts = [label];
+
+  if (total !== undefined) parts.push(`${total} ${total === 1 ? totalSingular : totalPlural}`);
+  if (alertCount > 0) parts.push(`${alertCount} ${alertCount === 1 ? alertSingular : alertPlural}`);
+
+  return parts.join(', ');
+}