@shipfox/client-workflows 14.0.1 → 15.0.0

package/dist/components/workflow-run-view/step-attempt-log-panel.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/components/workflow-run-view/step-attempt-log-panel.tsx"],"sourcesContent":["import {\n  isMissingStepLogStreamError,\n  LogView,\n  LogViewSkeleton,\n  useStepAttemptLogsQuery,\n} from '@shipfox/client-logs';\nimport {Button} from '@shipfox/react-ui/button';\nimport {Callout} from '@shipfox/react-ui/callout';\nimport {Text} from '@shipfox/react-ui/typography';\nimport {type UIEvent, useEffect, useRef} from 'react';\n\nconst TAIL_FOLLOW_THRESHOLD_PX = 24;\nconst INITIAL_LOG_ERROR_RETRY_COUNT = 5;\nconst INITIAL_LOG_ERROR_RETRY_DELAY_MS = 1_500;\nconst logSurfaceClasses = 'max-h-[40vh] rounded-8 md:max-h-[280px]';\n\nexport interface StepAttemptLogPanelProps {\n  stepId: string;\n  attempt: number;\n  attemptStatus: string;\n  initialErrorRetryCount?: number | undefined;\n  initialErrorRetryDelayMs?: number | undefined;\n}\n\nexport function StepAttemptLogPanel({\n  stepId,\n  attempt,\n  attemptStatus,\n  initialErrorRetryCount = INITIAL_LOG_ERROR_RETRY_COUNT,\n  initialErrorRetryDelayMs = INITIAL_LOG_ERROR_RETRY_DELAY_MS,\n}: StepAttemptLogPanelProps) {\n  const panelRef = useRef<HTMLDivElement>(null);\n  const shouldFollowTailRef = useRef(true);\n  const missingStreamRetryCount = attemptStatus === 'running' ? undefined : initialErrorRetryCount;\n  const retryMissingStream = attemptStatus === 'running' || isTerminalAttemptStatus(attemptStatus);\n  const query = useStepAttemptLogsQuery(stepId, attempt, {\n    retryMissingStream,\n    missingStreamRetryCount,\n    missingStreamRetryDelayMs: initialErrorRetryDelayMs,\n    initialErrorRetryCount,\n    initialErrorRetryDelayMs,\n  });\n  const records = query.data?.records ?? [];\n  const recordCount = records.length;\n  const anchorToFailure = attemptStatus === 'failed';\n  const missingActiveStream =\n    retryMissingStream && query.data === undefined && isMissingStepLogStreamError(query.error);\n  const initialError = query.isError && query.data === undefined && !missingActiveStream;\n  const staleError = query.isError && query.data !== undefined;\n\n  useEffect(() => {\n    if (recordCount === 0) return undefined;\n    if (anchorToFailure) return undefined;\n    if (!shouldFollowTailRef.current) return undefined;\n\n    const frame = scheduleAnimationFrame(() => {\n      const scrollElement = panelRef.current?.querySelector<HTMLElement>('[data-slot=\"log-rows\"]');\n      if (!scrollElement) return;\n      scrollElement.scrollTop = scrollElement.scrollHeight;\n    });\n\n    return () => {\n      cancelScheduledFrame(frame);\n    };\n  }, [anchorToFailure, recordCount]);\n\n  function handleLogScroll(event: UIEvent<HTMLDivElement>) {\n    const element = event.currentTarget;\n    const distanceFromBottom = element.scrollHeight - element.scrollTop - element.clientHeight;\n    shouldFollowTailRef.current = distanceFromBottom <= TAIL_FOLLOW_THRESHOLD_PX;\n  }\n\n  if (query.isPending) {\n    return <StepLogsLoadingSurface label=\"Loading logs\" />;\n  }\n\n  if (missingActiveStream) {\n    return <StepLogsLoadingSurface label=\"Waiting for logs\" />;\n  }\n\n  if (initialError) {\n    return <StepLogsError retrying={query.isFetching} onRetry={() => void query.refetch()} />;\n  }\n\n  return (\n    <div ref={panelRef} className=\"flex min-w-0 flex-col gap-8\">\n      {staleError ? (\n        <Callout role=\"alert\" type=\"warning\" className=\"px-10 py-8\">\n          <div className=\"flex min-w-0 flex-1 items-center justify-between gap-8\">\n            <Text size=\"xs\">Could not refresh logs.</Text>\n            <Button\n              type=\"button\"\n              size=\"2xs\"\n              variant=\"secondary\"\n              isLoading={query.isFetching}\n              onClick={() => void query.refetch()}\n            >\n              Retry\n            </Button>\n          </div>\n        </Callout>\n      ) : null}\n      <LogView\n        records={records}\n        emptyState={query.data?.complete ? 'complete' : 'pending'}\n        anchorToFailure={anchorToFailure}\n        className={logSurfaceClasses}\n        onScroll={handleLogScroll}\n      />\n    </div>\n  );\n}\n\nfunction StepLogsLoadingSurface({label}: {label: string}) {\n  return (\n    <div role=\"status\" aria-label={label}>\n      <LogViewSkeleton className={logSurfaceClasses} />\n    </div>\n  );\n}\n\nfunction scheduleAnimationFrame(callback: FrameRequestCallback): number {\n  if (typeof globalThis.requestAnimationFrame === 'function') {\n    return globalThis.requestAnimationFrame(callback);\n  }\n  return window.setTimeout(() => callback(Date.now()), 0);\n}\n\nfunction cancelScheduledFrame(frame: number) {\n  if (typeof globalThis.cancelAnimationFrame === 'function') {\n    globalThis.cancelAnimationFrame(frame);\n    return;\n  }\n  window.clearTimeout(frame);\n}\n\nfunction isTerminalAttemptStatus(status: string): boolean {\n  return status === 'succeeded' || status === 'failed' || status === 'cancelled';\n}\n\nfunction StepLogsError({retrying, onRetry}: {retrying: boolean; onRetry: () => void}) {\n  return (\n    <Callout role=\"alert\" type=\"error\" className=\"px-10 py-8\">\n      <div className=\"flex min-w-0 flex-1 items-center justify-between gap-8\">\n        <Text size=\"xs\">Could not load logs.</Text>\n        <Button type=\"button\" size=\"2xs\" variant=\"secondary\" isLoading={retrying} onClick={onRetry}>\n          Retry\n        </Button>\n      </div>\n    </Callout>\n  );\n}\n"],"names":["isMissingStepLogStreamError","LogView","LogViewSkeleton","useStepAttemptLogsQuery","Button","Callout","Text","useEffect","useRef","TAIL_FOLLOW_THRESHOLD_PX","INITIAL_LOG_ERROR_RETRY_COUNT","INITIAL_LOG_ERROR_RETRY_DELAY_MS","logSurfaceClasses","StepAttemptLogPanel","stepId","attempt","attemptStatus","initialErrorRetryCount","initialErrorRetryDelayMs","panelRef","shouldFollowTailRef","missingStreamRetryCount","undefined","retryMissingStream","isTerminalAttemptStatus","query","missingStreamRetryDelayMs","records","data","recordCount","length","anchorToFailure","missingActiveStream","error","initialError","isError","staleError","current","frame","scheduleAnimationFrame","scrollElement","querySelector","scrollTop","scrollHeight","cancelScheduledFrame","handleLogScroll","event","element","currentTarget","distanceFromBottom","clientHeight","isPending","StepLogsLoadingSurface","label","StepLogsError","retrying","isFetching","onRetry","refetch","div","ref","className","role","type","size","variant","isLoading","onClick","emptyState","complete","onScroll","aria-label","callback","globalThis","requestAnimationFrame","window","setTimeout","Date","now","cancelAnimationFrame","clearTimeout","status"],"mappings":"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"}

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

@@ -1,151 +0,0 @@
-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

@@ -1,28 +0,0 @@
-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

@@ -1,52 +0,0 @@
-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

@@ -1,117 +0,0 @@
-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

@@ -1,97 +0,0 @@
-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(', ');
-}