@shipfox/client-workflows 20.0.0 → 22.0.0

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

@@ -12,6 +12,7 @@ import {Callout} from '@shipfox/react-ui/callout';
 import {EmptyState} from '@shipfox/react-ui/empty-state';
 import {Icon, type IconName} from '@shipfox/react-ui/icon';
 import {LoadErrorState} from '@shipfox/react-ui/load-error-state';
+import {Panel} from '@shipfox/react-ui/panel';
 import {RelativeTime, RelativeTimeProvider} from '@shipfox/react-ui/relative-time';
 import {
   Sheet,
@@ -170,152 +171,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>
+        <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>
+        <WorkflowEmptyState sync={sync} />
+      </Panel>
+    );
   }
 
   return (
     <>
-      <div className="hidden rounded-8 border border-border-neutral-base 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;
+      <Panel>
+        <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>
-      </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>
+                        </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">
@@ -355,7 +365,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}) {

package/src/pages/workflow-job-detail-page.test.tsx

@@ -41,6 +41,19 @@ describe('WorkflowJobDetailPage', () => {
     jobAnnotations.value = [];
   });
 
+  test('lets the job detail route inherit its shell canvas', async () => {
+    configureApiClient({fetchImpl: vi.fn(() => new Promise<Response>(() => undefined))});
+
+    const {container} = renderJobPath();
+
+    expect(await screen.findByRole('region', {name: 'Loading workflow run'})).toBeInTheDocument();
+
+    const pageRoot = container.querySelector('[data-workflow-page-root="job-detail"]');
+
+    expect(pageRoot).not.toBeNull();
+    expect(pageRoot).not.toHaveClass('bg-background-subtle-base');
+  });
+
   test('links the job to its annotations without rendering one', async () => {
     jobAnnotations.value = [
       {
@@ -88,6 +101,7 @@ describe('WorkflowJobDetailPage', () => {
   });
 
   test('resolves an exact job execution and step attempt from a deep link', async () => {
+    const user = userEvent.setup();
     configureApiClient({fetchImpl: vi.fn(jobDetailFetch)});
 
     renderJobPath(
@@ -104,6 +118,24 @@ describe('WorkflowJobDetailPage', () => {
       await screen.findByRole('region', {name: 'tests output, attempt 2'}),
     ).toBeInTheDocument();
     expect(screen.getByRole('region', {name: 'release logs'})).toBeInTheDocument();
+    expect(screen.getByRole('textbox', {name: 'Search logs'})).toBeInTheDocument();
+    expect(screen.getByRole('button', {name: 'Refresh logs'})).toBeInTheDocument();
+    expect(screen.getByRole('button', {name: 'Log settings'})).toBeInTheDocument();
+    const testsAttempt = screen.getByRole('button', {name: 'tests, Succeeded, attempt 2'});
+    await user.click(testsAttempt);
+    await waitFor(() =>
+      expect(
+        screen.queryByRole('region', {name: 'tests output, attempt 2'}),
+      ).not.toBeInTheDocument(),
+    );
+    expect(screen.getByRole('textbox', {name: 'Search logs'})).toBeDisabled();
+    expect(screen.getByRole('button', {name: 'Refresh logs'})).toBeDisabled();
+
+    await user.click(testsAttempt);
+    expect(
+      await screen.findByRole('region', {name: 'tests output, attempt 2'}),
+    ).toBeInTheDocument();
+    expect(screen.getByRole('textbox', {name: 'Search logs'})).not.toBeDisabled();
     expect(screen.queryByRole('tab')).not.toBeInTheDocument();
     expect(screen.getByRole('img', {name: 'Job status: Succeeded'})).toBeInTheDocument();
     expect(screen.getByRole('heading', {name: 'deploy-web'})).toBeInTheDocument();

package/src/pages/workflow-job-detail-page.tsx

@@ -56,7 +56,10 @@ export function WorkflowJobDetailPage({
     [navigate],
   );
   return (
-    <div className="flex min-h-0 flex-1 overflow-hidden bg-background-neutral-background">
+    <div
+      data-workflow-page-root="job-detail"
+      className="flex min-h-0 min-w-0 flex-1 overflow-hidden"
+    >
       <WorkflowRunView
         projectId={projectId}
         workspaceSlug={workspaceSlug}
@@ -67,6 +70,7 @@ export function WorkflowJobDetailPage({
         jobSearch={search}
         jobContent={
           <JobDetailView
+            key={jobId}
             workspaceSlug={workspaceSlug}
             projectSlug={projectSlug}
             workflowRunId={workflowRunId}

package/src/pages/workflow-run-detail-page.tsx

@@ -17,7 +17,7 @@ export function WorkflowRunDetailPage({
   search = {},
 }: WorkflowRunDetailPageProps) {
   return (
-    <div className="flex min-h-0 flex-1 overflow-hidden bg-background-neutral-background">
+    <div data-workflow-page-root="run-detail" className="flex min-h-0 flex-1 overflow-hidden">
       <WorkflowRunView
         projectId={projectId}
         workspaceSlug={workspaceSlug}

package/src/pages/workflow-run-list-page.tsx

@@ -49,17 +49,15 @@ export function WorkflowRunsPage({
   );
 
   return (
-    <div className="flex min-h-0 flex-1 overflow-hidden bg-background-neutral-base">
-      <div className="mx-auto flex min-h-0 w-full max-w-[1120px] flex-1 flex-col px-frame py-frame">
-        <WorkflowRunList
-          projectId={projectId}
-          workspaceSlug={workspaceSlug}
-          projectSlug={projectSlug}
-          search={search}
-          onFiltersChange={onFiltersChange}
-          onClearFilters={onClearFilters}
-        />
-      </div>
+    <div data-workflow-page-root="runs" className="flex min-h-0 flex-1 flex-col overflow-hidden">
+      <WorkflowRunList
+        projectId={projectId}
+        workspaceSlug={workspaceSlug}
+        projectSlug={projectSlug}
+        search={search}
+        onFiltersChange={onFiltersChange}
+        onClearFilters={onClearFilters}
+      />
     </div>
   );
 }

package/src/pages/workflow-run-pages.test.tsx

@@ -72,6 +72,19 @@ describe('WorkflowRunPages', () => {
     expect(screen.queryByLabelText('Loading workflow run')).not.toBeInTheDocument();
   });
 
+  test('lets the list route inherit its shell canvas and width', async () => {
+    configureApiClient({fetchImpl: vi.fn(() => new Promise<Response>(() => undefined))});
+
+    const {container} = renderRunsPath();
+
+    await screen.findByLabelText('Workflow runs');
+    const pageRoot = container.querySelector('[data-workflow-page-root="runs"]');
+
+    expect(pageRoot).not.toBeNull();
+    expect(pageRoot).not.toHaveClass('bg-background-neutral-base');
+    expect(pageRoot).not.toHaveClass('max-w-[1120px]');
+  });
+
   test('keeps the list route and filters in place instead of redirecting to a run', async () => {
     configureApiClient({fetchImpl: createRunsListFetch()});
 
@@ -184,6 +197,19 @@ describe('WorkflowRunPages', () => {
     expect(currentSearch(router).tab).toBeUndefined();
   });
 
+  test('lets the run detail route inherit its shell canvas', async () => {
+    configureApiClient({fetchImpl: vi.fn(() => new Promise<Response>(() => undefined))});
+
+    const {container} = renderRunPath();
+
+    expect(await screen.findByRole('region', {name: 'Loading workflow run'})).toBeInTheDocument();
+
+    const pageRoot = container.querySelector('[data-workflow-page-root="run-detail"]');
+
+    expect(pageRoot).not.toBeNull();
+    expect(pageRoot).not.toHaveClass('bg-background-subtle-base');
+  });
+
   test('maps the removed Jobs tab URL to the graph Summary', async () => {
     configureApiClient({fetchImpl: createRunDetailFetch()});
 

package/src/routes/job-detail.tsx

@@ -4,7 +4,7 @@ import {validateWorkflowJobSearch, workflowJobRouteParams} from './inputs.js';
 import {ProjectRoute} from './project-route.js';
 
 export default defineRoute({
-  staticData: {layout: 'full-bleed'},
+  staticData: {frame: 'data'},
   validateSearch: validateWorkflowJobSearch,
   component: () => {
     const {workspaceSlug, projectSlug, workflowRunId, jobId} =

package/src/routes/run-detail.tsx

@@ -4,7 +4,7 @@ import {validateWorkflowRunsSearch, workflowRouteParams} from './inputs.js';
 import {ProjectRoute} from './project-route.js';
 
 export default defineRoute({
-  staticData: {layout: 'full-bleed'},
+  staticData: {frame: 'data'},
   validateSearch: validateWorkflowRunsSearch,
   component: () => {
     const {workspaceSlug, projectSlug, workflowRunId} = useRouteParams(workflowRouteParams);

package/src/routes/runs.tsx

@@ -4,7 +4,7 @@ import {validateWorkflowRunsSearch, workflowRouteParams} from './inputs.js';
 import {ProjectRoute} from './project-route.js';
 
 export default defineRoute({
-  staticData: {layout: 'full-bleed'},
+  staticData: {frame: 'data'},
   validateSearch: validateWorkflowRunsSearch,
   component: () => {
     const {workspaceSlug, projectSlug} = useRouteParams(workflowRouteParams);

package/src/routes/workflows.tsx

@@ -3,6 +3,7 @@ import {ProjectWorkflowsPage} from '#pages/project-workflows-page.js';
 import {ProjectRoute} from './project-route.js';
 
 export default defineRoute({
+  staticData: {frame: 'data'},
   component: () => {
     return (
       <ProjectRoute>{(project) => <ProjectWorkflowsPage projectId={project.id} />}</ProjectRoute>