@shipfox/client-workflows 12.0.2 → 14.0.0

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(', ');
+}

package/src/components/workflow-run-view/agent-config-failure-callout.stories.tsx

@@ -12,7 +12,6 @@ import {within} from 'storybook/test';
 import type {AgentStepConfig, StepError} from '#core/workflow-run.js';
 import {AgentConfigFailureCallout} from './agent-config-failure-callout.js';
 
-const WORKSPACE_ID = '44444444-4444-4444-8444-444444444444';
 const AGENTS_LINK_NAME = 'Configure Agents';
 
 const config: AgentStepConfig = {
@@ -42,7 +41,7 @@ const meta = {
       });
       const agentSettingsRoute = createRoute({
         getParentRoute: () => rootRoute,
-        path: '/workspaces/$wid/settings/agents',
+        path: '/w/$workspaceSlug/settings/agents',
         component: () => null,
       });
       const router = createRouter({
@@ -54,7 +53,7 @@ const meta = {
     },
   ],
   args: {
-    workspaceId: WORKSPACE_ID,
+    workspaceSlug: 'acme',
     config,
     error: makeError('provider_not_configured'),
   },

package/src/components/workflow-run-view/agent-config-failure-callout.tsx

@@ -10,11 +10,11 @@ import {Link} from '@tanstack/react-router';
 import type {AgentStepConfig, StepError} from '#core/workflow-run.js';
 
 export function AgentConfigFailureCallout({
-  workspaceId,
+  workspaceSlug,
   config,
   error,
 }: {
-  workspaceId: string;
+  workspaceSlug?: string | undefined;
   config: AgentStepConfig | null;
   error: StepError | null;
 }) {
@@ -25,10 +25,10 @@ export function AgentConfigFailureCallout({
       <AlertContent>
         <AlertTitle>{copy.title}</AlertTitle>
         <AlertDescription>{copy.description}</AlertDescription>
-        {copy.showProviderCta ? (
+        {copy.showProviderCta && workspaceSlug ? (
           <AlertActions>
             <Button asChild size="2xs" variant="secondary" iconRight="chevronRight">
-              <Link to="/workspaces/$wid/settings/agents" params={{wid: workspaceId}}>
+              <Link to="/w/$workspaceSlug/settings/agents" params={{workspaceSlug}}>
                 Configure Agents
               </Link>
             </Button>

package/src/components/workflow-run-view/job-card.stories.tsx

@@ -18,7 +18,6 @@ import {
 import type {StepExpandedContext} from '../step-list/index.js';
 import {JobCard} from './job-card.js';
 
-const WORKSPACE_ID = '44444444-4444-4444-8444-444444444444';
 const SWITCH_EXECUTION_PATTERN = /Switch job execution/;
 const EXECUTION_FIVE_PATTERN = /#5/;
 
@@ -41,7 +40,6 @@ const meta = {
     ),
   ],
   args: {
-    workspaceId: WORKSPACE_ID,
     job: singleExecutionJob(),
     selectedJobExecution: singleExecutionJob().jobExecutions[0],
     selectedAttemptId: null,
@@ -73,7 +71,7 @@ export const States: Story = {
       <StorySection label="single execution">
         <JobCardStory job={singleExecutionJob()} />
       </StorySection>
-      <StorySection label="display name fallback">
+      <StorySection label="execution name with missing job name">
         <JobCardStory job={keyFallbackJob()} />
       </StorySection>
       <StorySection label="queueing execution">
@@ -126,13 +124,13 @@ export const ListeningProgression: Story = {
       <StorySection label="pending, no executions">
         <JobCardStory job={listeningJobPending()} />
       </StorySection>
-      <StorySection label="running, 0 executions">
+      <StorySection label="listening, 0 executions">
         <JobCardStory job={listeningJobNoExecutions()} />
       </StorySection>
-      <StorySection label="running, 1 running execution">
+      <StorySection label="listening, 1 running execution">
         <JobCardStory job={listeningJobOneExecution()} initialJobExecutionId="exec-listen-one-1" />
       </StorySection>
-      <StorySection label="running, mixed executions">
+      <StorySection label="listening, mixed executions">
         <JobCardStory job={listeningJobMixedExecutions()} initialJobExecutionId="exec-listen-6" />
       </StorySection>
       <StorySection label="failed, resolved">
@@ -145,19 +143,19 @@ export const ListeningProgression: Story = {
 export const ManyExecutions: Story = {
   render: () => (
     <div className="flex flex-col gap-16">
-      <StorySection label="running, 64 executions, short name">
+      <StorySection label="listening, 64 executions, short name">
         <JobCardStory
           job={manyExecutionsListeningJob('gate', 'job-many-short')}
           initialJobExecutionId="exec-many-job-many-short-64"
         />
       </StorySection>
-      <StorySection label="running, 64 executions, medium name">
+      <StorySection label="listening, 64 executions, medium name">
         <JobCardStory
           job={manyExecutionsListeningJob('release-gates', 'job-many-medium')}
           initialJobExecutionId="exec-many-job-many-medium-64"
         />
       </StorySection>
-      <StorySection label="running, 64 executions, long name">
+      <StorySection label="listening, 64 executions, long name">
         <JobCardStory
           job={manyExecutionsListeningJob(
             'release-production-multi-region-with-canary-validation',
@@ -233,7 +231,6 @@ function JobCardStory({
 
   return (
     <JobCard
-      workspaceId={WORKSPACE_ID}
       job={job}
       selectedJobExecution={selectedJobExecution}
       selectedAttemptId={selectedAttemptId}
@@ -715,6 +712,10 @@ function makeTriggerEvent(
     event,
     delivery_id: `delivery-${sequence}`,
     received_at: listeningTimestamp(sequence, 1),
+    project: null,
+    repository: null,
+    ref: null,
+    commit: null,
     data: {sequence},
   };
 }