@shipfox/client-workflows 21.0.0 → 22.0.1

package/src/components/workflow-run-view/workflow-run-view.tsx

@@ -1,6 +1,7 @@
 import {ApiError} from '@shipfox/client-api';
 import {QueryLoadError} from '@shipfox/client-ui';
 import {EmptyState} from '@shipfox/react-ui/empty-state';
+import {Panel, PanelBody, PanelHeader} from '@shipfox/react-ui/panel';
 import {RelativeTimeProvider} from '@shipfox/react-ui/relative-time';
 import {
   Select,
@@ -11,7 +12,6 @@ import {
 } from '@shipfox/react-ui/select';
 import {toast} from '@shipfox/react-ui/toast';
 import {Text} from '@shipfox/react-ui/typography';
-import {cn} from '@shipfox/react-ui/utils';
 import {useNavigate} from '@tanstack/react-router';
 import {type ReactNode, useEffect, useMemo} from 'react';
 import {buildRunAnnotationList, type RunAnnotationSummary} from '#core/run-annotation.js';
@@ -54,7 +54,6 @@ import {
 } from './workflow-run-states.js';
 
 type RunWorkspaceSection = Exclude<WorkflowRunTab, 'jobs'>;
-const RUN_WORKSPACE_FRAME_CLASS_NAME = 'mx-auto w-full max-w-[calc(240px_+_1120px)]';
 
 export interface WorkflowRunViewProps {
   projectId: string;
@@ -159,7 +158,6 @@ function RunViewContent({
   const activeSection = runWorkspaceSection(tab);
   const cancelMutation = useCancelWorkflowRunMutation(runData);
   const sourceSnapshot = runData?.sourceSnapshot ?? null;
-  const hasJobContent = Boolean(jobContent);
   const resolvedSelection =
     runData && selection ? resolveWorkflowRunSelection({run: runData, selection}) : undefined;
   const highlightedLineRange = resolvedSelection?.step?.sourceLocation ?? null;
@@ -316,10 +314,7 @@ function RunViewContent({
       >
         <div
           data-run-workspace-frame
-          className={cn(
-            'flex min-h-0 min-w-0 w-full flex-1 flex-col min-[768px]:flex-row',
-            !hasJobContent && RUN_WORKSPACE_FRAME_CLASS_NAME,
-          )}
+          className="flex min-h-0 min-w-0 w-full flex-1 flex-col min-[768px]:flex-row"
         >
           {runData && workspaceSlug && projectSlug ? (
             <RunWorkspaceNav
@@ -403,16 +398,20 @@ function RunSectionContent({
         aria-label="All jobs summary"
         className="min-h-0 flex-1 overflow-auto pb-panel pt-[16px]"
       >
-        <div className="mx-auto flex w-full flex-col gap-group px-frame">
+        <div className="flex w-full flex-col gap-group">
           <Text as="h2" className="sr-only">
             All jobs summary
           </Text>
-          <JobGraph
-            run={run}
-            selectedJobId={selectedJobId}
-            onSelectedJobChange={onSelectGraphJob}
-            className="min-h-160 overflow-hidden"
-          />
+          <Panel className="min-h-160">
+            <PanelBody className="min-h-160 bg-background-components-base p-0">
+              <JobGraph
+                run={run}
+                selectedJobId={selectedJobId}
+                onSelectedJobChange={onSelectGraphJob}
+                className="min-h-160 overflow-hidden"
+              />
+            </PanelBody>
+          </Panel>
         </div>
       </section>
     );
@@ -439,28 +438,33 @@ function RunSectionContent({
       aria-label="Workflow source"
       className="min-h-0 flex-1 overflow-auto pb-panel pt-[16px]"
     >
-      <div className="mx-auto flex min-h-full w-full flex-col px-frame">
+      <div className="flex min-h-full w-full flex-col">
         <Text as="h2" className="sr-only">
           Workflow source
         </Text>
-        {sourceSnapshot ? (
-          <WorkflowSourceContent
-            source={sourceSnapshot}
-            highlightedLineRange={highlightedLineRange}
-            scrollHighlightedIntoView
-          />
-        ) : (
-          <EmptyState
-            className="min-h-160 w-full"
-            icon="fileDamageLine"
-            title="Source snapshot unavailable"
-            description={
-              run.isTemporary
-                ? 'Temporary runs do not capture workflow source.'
-                : 'This run was created before workflow source snapshots were captured.'
-            }
-          />
-        )}
+        <Panel className="min-h-160 flex-1">
+          <PanelBody className="min-h-160 flex-1 p-0">
+            {sourceSnapshot ? (
+              <WorkflowSourceContent
+                source={sourceSnapshot}
+                highlightedLineRange={highlightedLineRange}
+                scrollHighlightedIntoView
+              />
+            ) : (
+              <EmptyState
+                variant="panel"
+                className="min-h-160"
+                icon="fileDamageLine"
+                title="Source snapshot unavailable"
+                description={
+                  run.isTemporary
+                    ? 'Temporary runs do not capture workflow source.'
+                    : 'This run was created before workflow source snapshots were captured.'
+                }
+              />
+            )}
+          </PanelBody>
+        </Panel>
       </div>
     </section>
   );
@@ -534,45 +538,49 @@ function RunAnnotationsSection({
       aria-label="Run annotations"
       className="min-h-0 flex-1 overflow-auto pb-panel pt-[16px]"
     >
-      <div className="mx-auto flex w-full flex-col gap-group px-frame">
+      <div className="flex w-full flex-col">
         <Text as="h2" className="sr-only">
           Annotations
         </Text>
-        <div className="flex flex-wrap items-center justify-between gap-inline">
-          <RunAnnotationSummaryLine
-            summary={annotationSummary}
-            workspaceSlug={workspaceSlug}
-            projectSlug={projectSlug}
-            workflowRunId={run.id}
-            search={selection}
-          />
-          <AnnotationJobFilter
-            jobs={run.jobs}
-            selectedJobId={selectedJob?.id}
-            onSelect={onSelectAnnotationJob}
-          />
-        </div>
-        <RunAnnotationList
-          // Remounting on a filter or run-attempt change resets the render window, so the next
-          // list never inherits a "show more" position from different data.
-          key={`${run.id}:${run.runAttempt.attempt}:${severity ?? 'all'}:${selectedJob?.id ?? 'all'}`}
-          query={annotations.query}
-          entries={entries}
-          derivedAnnotations={derivedAnnotations}
-          workspaceSlug={workspaceSlug}
-          projectSlug={projectSlug}
-          workflowRunId={run.id}
-          runAttempt={run.runAttempt.attempt}
-          // A run with no annotations at all offers no filter to clear, whatever the URL says.
-          filtered={Boolean(
-            (severity || selectedJob || selection?.annotation) &&
-              ((annotationSummary?.total ?? 0) > 0 || hasSynthesizedJobAnnotations),
-          )}
-          filteredJobName={selectedJob?.displayName}
-          filteredSeverity={severity}
-          onClearFilters={onClearAnnotationFilters}
-          selectedAnnotationId={selection?.annotation}
-        />
+        <Panel>
+          <PanelHeader className="flex-wrap">
+            <RunAnnotationSummaryLine
+              summary={annotationSummary}
+              workspaceSlug={workspaceSlug}
+              projectSlug={projectSlug}
+              workflowRunId={run.id}
+              search={selection}
+            />
+            <AnnotationJobFilter
+              jobs={run.jobs}
+              selectedJobId={selectedJob?.id}
+              onSelect={onSelectAnnotationJob}
+            />
+          </PanelHeader>
+          <PanelBody className="gap-group p-panel">
+            <RunAnnotationList
+              // Remounting on a filter or run-attempt change resets the render window, so the next
+              // list never inherits a "show more" position from different data.
+              key={`${run.id}:${run.runAttempt.attempt}:${severity ?? 'all'}:${selectedJob?.id ?? 'all'}`}
+              query={annotations.query}
+              entries={entries}
+              derivedAnnotations={derivedAnnotations}
+              workspaceSlug={workspaceSlug}
+              projectSlug={projectSlug}
+              workflowRunId={run.id}
+              runAttempt={run.runAttempt.attempt}
+              // A run with no annotations at all offers no filter to clear, whatever the URL says.
+              filtered={Boolean(
+                (severity || selectedJob || selection?.annotation) &&
+                  ((annotationSummary?.total ?? 0) > 0 || hasSynthesizedJobAnnotations),
+              )}
+              filteredJobName={selectedJob?.displayName}
+              filteredSeverity={severity}
+              onClearFilters={onClearAnnotationFilters}
+              selectedAnnotationId={selection?.annotation}
+            />
+          </PanelBody>
+        </Panel>
       </div>
     </section>
   );
@@ -674,7 +682,7 @@ function RunWorkspaceNavSkeleton() {
   return (
     <aside
       aria-label="Loading run navigation"
-      className="hidden w-240 shrink-0 border-r border-border-neutral-base p-panel-compact min-[768px]:block"
+      className="hidden w-240 shrink-0 p-panel-compact min-[768px]:block"
     >
       <div className="flex flex-col gap-group">
         <div className="h-32 rounded-4 bg-background-components-subtle" />

package/src/pages/project-workflows-page.test.tsx

@@ -12,15 +12,25 @@ const PROJECT_ID = '44444444-4444-4444-8444-444444444444';
 const CONNECTION_ID = '33333333-3333-4333-8333-333333333333';
 
 describe('ProjectWorkflowsPage', () => {
-  test('renders workflow definitions and the source strip', async () => {
+  test('renders workflow definitions and their panel regions', async () => {
     configureApiClient({fetchImpl: createProjectDetailFetch()});
 
     renderWorkflowsPage();
 
-    expect(await screen.findByRole('heading', {name: 'Workflows'})).toBeInTheDocument();
-    expect(screen.getAllByText('Deploy production')[0]).toBeInTheDocument();
+    expect((await screen.findAllByText('Deploy production'))[0]).toBeInTheDocument();
+    expect(screen.getByRole('heading', {name: 'Workflows'})).toHaveClass('sr-only');
+    expect(
+      screen.queryByText('Synced workflow definitions for this project source.'),
+    ).not.toBeInTheDocument();
     expect(screen.getAllByText('.shipfox/workflows/deploy.yml')[0]).toBeInTheDocument();
-    expect(screen.getByRole('region', {name: 'Project source'})).toBeInTheDocument();
+    const sourcePanel = screen
+      .getByRole('region', {name: 'Project source'})
+      .closest('[data-slot="panel"]');
+    const definitionsPanel = screen.getByRole('region', {name: 'Workflow definitions'});
+    expect(sourcePanel).toBeInTheDocument();
+    expect(definitionsPanel).toBeInTheDocument();
+    expect(sourcePanel).not.toBe(definitionsPanel);
+    expect(screen.getByRole('table').closest('[data-slot="panel"]')).toBe(definitionsPanel);
     // Source strip resolves connection display_name from the integrations
     // workspace cache; external_repository_id renders as a Code chip.
     expect(await screen.findByText('Acme GitHub')).toBeInTheDocument();

package/src/pages/project-workflows-page.tsx

@@ -68,6 +68,10 @@ function ProjectWorkflowsPageInner({projectId}: {projectId: string}) {
 
   return (
     <div className="flex w-full flex-col gap-section">
+      <Header variant="h1" className="sr-only">
+        Workflows
+      </Header>
+
       {projectQuery.isPending ? (
         <div className="flex flex-col gap-cluster">
           <Skeleton className="h-28 w-1/3" />
@@ -89,13 +93,6 @@ function ProjectWorkflowsPageInner({projectId}: {projectId: string}) {
 
       {projectQuery.data ? (
         <>
-          <header className="flex flex-col gap-tight">
-            <Header variant="h2">Workflows</Header>
-            <Text size="sm" className="text-foreground-neutral-muted">
-              Synced workflow definitions for this project source.
-            </Text>
-          </header>
-
           <SourceStrip
             connectionId={projectQuery.data.source.connectionId}
             externalRepositoryId={projectQuery.data.source.externalRepositoryId}
@@ -171,152 +168,161 @@ function WorkflowDefinitionsList({
 }) {
   if (isPending) {
     return (
-      <div className="flex flex-col gap-inline">
-        <Skeleton className="h-40 w-full" />
-        <Skeleton className="h-40 w-full" />
-        <Skeleton className="h-40 w-full" />
-      </div>
+      <Panel role="status" aria-label="Loading workflows" className="divide-y">
+        <Skeleton className="h-44 w-full rounded-none" />
+        <Skeleton className="h-44 w-full rounded-none" />
+        <Skeleton className="h-44 w-full rounded-none" />
+      </Panel>
     );
   }
 
   if (isError && definitions.length === 0) {
     return (
-      <LoadErrorState
-        title="Couldn't load workflows"
-        description="Definitions could not be loaded. Source metadata remains visible."
-        onRetry={onRetry}
-        retryLabel="Retry loading workflows"
-      />
+      <Panel role="region" aria-label="Workflow definitions">
+        <LoadErrorState
+          title="Couldn't load workflows"
+          description="Definitions could not be loaded. Source metadata remains visible."
+          onRetry={onRetry}
+          retryLabel="Retry loading workflows"
+          variant="panel"
+        />
+      </Panel>
     );
   }
 
   if (definitions.length === 0) {
-    return <WorkflowEmptyState sync={sync} />;
+    return (
+      <Panel role="region" aria-label="Workflow definitions">
+        <WorkflowEmptyState sync={sync} />
+      </Panel>
+    );
   }
 
   return (
     <>
-      <Panel className="hidden md:flex">
-        <Table>
-          <TableHeader>
-            <TableRow>
-              <TableHead className="w-40"></TableHead>
-              <TableHead>Workflow</TableHead>
-              <TableHead className="w-180">Updated</TableHead>
-              <TableHead className="w-80 text-right"></TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            {definitions.map((definition) => {
-              const runErrorMessage =
-                runError?.definitionId === definition.id ? runError.message : null;
-              const isRunning = runningDefinitionId === definition.id;
+      <Panel role="region" aria-label="Workflow definitions">
+        <div className="hidden md:block">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead className="w-40"></TableHead>
+                <TableHead>Workflow</TableHead>
+                <TableHead className="w-180">Updated</TableHead>
+                <TableHead className="w-80 text-right"></TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {definitions.map((definition) => {
+                const runErrorMessage =
+                  runError?.definitionId === definition.id ? runError.message : null;
+                const isRunning = runningDefinitionId === definition.id;
 
-              return (
-                // The workflow-name cell holds a `<button>` so the row is
-                // keyboard-reachable (Tab focuses, Enter/Space activates
-                // via native button semantics). The TableRow itself is no
-                // longer clickable: a row-level onClick would be invisible
-                // to keyboard users and require custom keydown handling.
-                // The `group` class on the row still drives the Run button
-                // reveal on hover or focus-within.
-                <TableRow key={definition.id} className="group">
-                  <TableCell>
-                    <Icon
-                      name={sourceIcon(definition.source)}
-                      className="size-16 text-foreground-neutral-muted"
-                      aria-hidden="true"
-                    />
-                  </TableCell>
-                  <TableCell className="max-w-260">
-                    <div className="flex min-w-0 flex-col gap-tight">
-                      <button
-                        type="button"
-                        onClick={() => onOpenDefinition(definition)}
-                        className="flex min-w-0 flex-col gap-tight text-left outline-none focus-visible:shadow-border-interactive-with-active rounded-4"
-                      >
-                        <Text size="sm" bold className="truncate">
-                          {definition.name}
-                        </Text>
-                        <Code className="truncate text-foreground-neutral-muted">
-                          {definition.configPath ?? 'Manual definition'}
-                        </Code>
-                      </button>
-                      {runErrorMessage ? (
-                        <Text size="xs" className="text-tag-error-text">
-                          {runErrorMessage}
-                        </Text>
-                      ) : null}
-                    </div>
-                  </TableCell>
-                  <TableCell className="text-foreground-neutral-muted">
-                    <RelativeTime value={definition.updatedAt} />
-                  </TableCell>
-                  <TableCell>
-                    {definition.manualTrigger ? (
-                      <div className="flex justify-end opacity-0 transition-opacity group-hover:opacity-100 group-focus-within:opacity-100">
-                        <Button size="xs" isLoading={isRunning} onClick={() => onRun(definition)}>
-                          Run
-                        </Button>
+                return (
+                  // The workflow-name cell holds a `<button>` so the row is
+                  // keyboard-reachable (Tab focuses, Enter/Space activates
+                  // via native button semantics). The TableRow itself is no
+                  // longer clickable: a row-level onClick would be invisible
+                  // to keyboard users and require custom keydown handling.
+                  // The `group` class on the row still drives the Run button
+                  // reveal on hover or focus-within.
+                  <TableRow key={definition.id} className="group">
+                    <TableCell>
+                      <Icon
+                        name={sourceIcon(definition.source)}
+                        className="size-16 text-foreground-neutral-muted"
+                        aria-hidden="true"
+                      />
+                    </TableCell>
+                    <TableCell className="max-w-260">
+                      <div className="flex min-w-0 flex-col gap-tight">
+                        <button
+                          type="button"
+                          onClick={() => onOpenDefinition(definition)}
+                          className="flex min-w-0 flex-col gap-tight rounded-4 text-left outline-none focus-visible:shadow-border-interactive-with-active"
+                        >
+                          <Text size="sm" bold className="truncate">
+                            {definition.name}
+                          </Text>
+                          <Code className="truncate text-foreground-neutral-muted">
+                            {definition.configPath ?? 'Manual definition'}
+                          </Code>
+                        </button>
+                        {runErrorMessage ? (
+                          <Text size="xs" className="text-tag-error-text">
+                            {runErrorMessage}
+                          </Text>
+                        ) : null}
                       </div>
-                    ) : null}
-                  </TableCell>
-                </TableRow>
-              );
-            })}
-          </TableBody>
-        </Table>
-      </Panel>
+                    </TableCell>
+                    <TableCell className="text-foreground-neutral-muted">
+                      <RelativeTime value={definition.updatedAt} />
+                    </TableCell>
+                    <TableCell>
+                      {definition.manualTrigger ? (
+                        <div className="flex justify-end opacity-0 transition-opacity group-hover:opacity-100 group-focus-within:opacity-100">
+                          <Button size="xs" isLoading={isRunning} onClick={() => onRun(definition)}>
+                            Run
+                          </Button>
+                        </div>
+                      ) : null}
+                    </TableCell>
+                  </TableRow>
+                );
+              })}
+            </TableBody>
+          </Table>
+        </div>
 
-      <div className="flex flex-col rounded-8 border border-border-neutral-base md:hidden">
-        {definitions.map((definition) => {
-          const runErrorMessage =
-            runError?.definitionId === definition.id ? runError.message : null;
-          const isRunning = runningDefinitionId === definition.id;
+        <div className="flex flex-col md:hidden">
+          {definitions.map((definition) => {
+            const runErrorMessage =
+              runError?.definitionId === definition.id ? runError.message : null;
+            const isRunning = runningDefinitionId === definition.id;
 
-          return (
-            <div
-              key={definition.id}
-              className="flex flex-col gap-inline border-b border-border-neutral-base p-panel-compact last:border-b-0"
-            >
-              <button
-                type="button"
-                className="flex min-w-0 items-start gap-inline text-left"
-                onClick={() => onOpenDefinition(definition)}
+            return (
+              <div
+                key={definition.id}
+                className="flex flex-col gap-inline border-b border-border-neutral-base p-panel-compact last:border-b-0"
               >
-                <Icon
-                  name={sourceIcon(definition.source)}
-                  className="size-16 shrink-0 text-foreground-neutral-muted"
-                  aria-hidden="true"
-                />
-                <div className="flex min-w-0 flex-col gap-tight">
-                  <Text size="sm" bold className="break-words">
-                    {definition.name}
+                <button
+                  type="button"
+                  className="flex min-w-0 items-start gap-inline text-left"
+                  onClick={() => onOpenDefinition(definition)}
+                >
+                  <Icon
+                    name={sourceIcon(definition.source)}
+                    className="size-16 shrink-0 text-foreground-neutral-muted"
+                    aria-hidden="true"
+                  />
+                  <div className="flex min-w-0 flex-col gap-tight">
+                    <Text size="sm" bold className="break-words">
+                      {definition.name}
+                    </Text>
+                    <Code className="break-words text-foreground-neutral-muted">
+                      {definition.configPath ?? 'Manual definition'}
+                    </Code>
+                  </div>
+                </button>
+                <div className="flex items-center justify-between gap-inline">
+                  <Text size="xs" className="text-foreground-neutral-muted">
+                    Updated <RelativeTime value={definition.updatedAt} />
                   </Text>
-                  <Code className="break-words text-foreground-neutral-muted">
-                    {definition.configPath ?? 'Manual definition'}
-                  </Code>
+                  {definition.manualTrigger ? (
+                    <Button size="sm" isLoading={isRunning} onClick={() => onRun(definition)}>
+                      Run
+                    </Button>
+                  ) : null}
                 </div>
-              </button>
-              <div className="flex items-center justify-between gap-inline">
-                <Text size="xs" className="text-foreground-neutral-muted">
-                  Updated <RelativeTime value={definition.updatedAt} />
-                </Text>
-                {definition.manualTrigger ? (
-                  <Button size="sm" isLoading={isRunning} onClick={() => onRun(definition)}>
-                    Run
-                  </Button>
+                {runErrorMessage ? (
+                  <Text size="xs" className="text-tag-error-text">
+                    {runErrorMessage}
+                  </Text>
                 ) : null}
               </div>
-              {runErrorMessage ? (
-                <Text size="xs" className="text-tag-error-text">
-                  {runErrorMessage}
-                </Text>
-              ) : null}
-            </div>
-          );
-        })}
-      </div>
+            );
+          })}
+        </div>
+      </Panel>
 
       {isFetchNextPageError ? (
         <Callout role="alert" type="error">
@@ -356,7 +362,7 @@ function WorkflowEmptyState({sync}: {sync: DefinitionSyncSummary | null}) {
             ? 'No workflow definitions found.'
             : 'Workflow sync has not reported yet.';
 
-  return <EmptyState icon="flowChart" title="No workflows" description={message} />;
+  return <EmptyState icon="flowChart" title="No workflows" description={message} variant="panel" />;
 }
 
 function WorkflowSyncAlert({sync}: {sync: DefinitionSyncSummary | null | undefined}) {