@shipfox/client-workflows 4.0.0 → 5.0.0

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

@@ -0,0 +1,443 @@
+import type {DefinitionDto, DefinitionSyncSummaryDto} from '@shipfox/api-definitions-dto';
+import {ApiError} from '@shipfox/client-api';
+import {SourceStrip, useDefinitionsInfiniteQuery, useProjectQuery} from '@shipfox/client-projects';
+import {QueryLoadError} from '@shipfox/client-ui';
+import {Button} from '@shipfox/react-ui/button';
+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 {RelativeTime, RelativeTimeProvider} from '@shipfox/react-ui/relative-time';
+import {
+  Sheet,
+  SheetBody,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from '@shipfox/react-ui/sheet';
+import {Skeleton} from '@shipfox/react-ui/skeleton';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@shipfox/react-ui/table';
+import {toast} from '@shipfox/react-ui/toast';
+import {Code, Header, Text} from '@shipfox/react-ui/typography';
+import {useState} from 'react';
+import {useFireManualWorkflowMutation} from '#hooks/api/workflow-runs.js';
+
+export function ProjectWorkflowsPage({projectId}: {projectId: string}) {
+  return (
+    <RelativeTimeProvider>
+      <ProjectWorkflowsPageInner projectId={projectId} />
+    </RelativeTimeProvider>
+  );
+}
+
+function ProjectWorkflowsPageInner({projectId}: {projectId: string}) {
+  const projectQuery = useProjectQuery(projectId);
+  const definitionsQuery = useDefinitionsInfiniteQuery(projectId);
+  const fireManual = useFireManualWorkflowMutation();
+  const [selectedDefinition, setSelectedDefinition] = useState<DefinitionDto | null>(null);
+  const [runError, setRunError] = useState<{definitionId: string; message: string} | null>(null);
+  const definitions = definitionsQuery.data?.pages.flatMap((page) => page.definitions) ?? [];
+  const sync = definitionsQuery.data?.pages[0]?.sync;
+
+  async function handleRun(definition: DefinitionDto) {
+    setRunError(null);
+    if (!definition.manual_trigger) return;
+    try {
+      await fireManual.mutateAsync({projectId, definitionId: definition.id});
+      toast.success('Run queued');
+    } catch (error) {
+      const message = errorMessage(error, 'Could not queue run.');
+      setRunError({definitionId: definition.id, message});
+      toast.error(message);
+    }
+  }
+
+  return (
+    <div className="flex w-full flex-col gap-24">
+      {projectQuery.isPending ? (
+        <div className="flex flex-col gap-12">
+          <Skeleton className="h-28 w-1/3" />
+          <Skeleton className="h-18 w-1/2" />
+        </div>
+      ) : null}
+
+      {projectQuery.isError && projectQuery.data === undefined ? (
+        projectQuery.error instanceof ApiError && projectQuery.error.status === 404 ? (
+          <EmptyState
+            icon="errorWarningLine"
+            title="Project not found"
+            description="This project doesn't exist, or you don't have access to it."
+          />
+        ) : (
+          <QueryLoadError query={projectQuery} subject="project" />
+        )
+      ) : null}
+
+      {projectQuery.data ? (
+        <>
+          <header className="flex flex-col gap-4">
+            <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.connection_id}
+            externalRepositoryId={projectQuery.data.source.external_repository_id}
+            sync={sync}
+            isPending={definitionsQuery.isPending}
+          />
+
+          <WorkflowSyncAlert sync={sync} />
+
+          <WorkflowDefinitionsList
+            definitions={definitions}
+            isPending={definitionsQuery.isPending}
+            isError={definitionsQuery.isError}
+            sync={sync ?? null}
+            runError={runError}
+            runningDefinitionId={
+              fireManual.isPending && fireManual.variables
+                ? fireManual.variables.definitionId
+                : null
+            }
+            hasNextPage={definitionsQuery.hasNextPage}
+            isFetchingNextPage={definitionsQuery.isFetchingNextPage}
+            isFetchNextPageError={definitionsQuery.isFetchNextPageError}
+            onRetry={() => definitionsQuery.refetch()}
+            onLoadMore={() => definitionsQuery.fetchNextPage()}
+            onOpenDefinition={setSelectedDefinition}
+            onRun={(definition) => {
+              void handleRun(definition);
+            }}
+          />
+        </>
+      ) : null}
+
+      <DefinitionSheet
+        definition={selectedDefinition}
+        onOpenChange={(open) => {
+          if (!open) setSelectedDefinition(null);
+        }}
+      />
+    </div>
+  );
+}
+
+function WorkflowDefinitionsList({
+  definitions,
+  isPending,
+  isError,
+  sync,
+  runError,
+  runningDefinitionId,
+  hasNextPage,
+  isFetchingNextPage,
+  isFetchNextPageError,
+  onRetry,
+  onLoadMore,
+  onOpenDefinition,
+  onRun,
+}: {
+  definitions: DefinitionDto[];
+  isPending: boolean;
+  isError: boolean;
+  sync: DefinitionSyncSummaryDto | null;
+  runError: {definitionId: string; message: string} | null;
+  runningDefinitionId: string | null;
+  hasNextPage: boolean;
+  isFetchingNextPage: boolean;
+  isFetchNextPageError: boolean;
+  onRetry: () => void;
+  onLoadMore: () => void;
+  onOpenDefinition: (definition: DefinitionDto) => void;
+  onRun: (definition: DefinitionDto) => void;
+}) {
+  if (isPending) {
+    return (
+      <div className="flex flex-col gap-8">
+        <Skeleton className="h-40 w-full" />
+        <Skeleton className="h-40 w-full" />
+        <Skeleton className="h-40 w-full" />
+      </div>
+    );
+  }
+
+  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"
+      />
+    );
+  }
+
+  if (definitions.length === 0) {
+    return <WorkflowEmptyState sync={sync} />;
+  }
+
+  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;
+
+              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-2">
+                      <button
+                        type="button"
+                        onClick={() => onOpenDefinition(definition)}
+                        className="flex min-w-0 flex-col gap-2 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.config_path ?? '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.updated_at} />
+                  </TableCell>
+                  <TableCell>
+                    {definition.manual_trigger ? (
+                      <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;
+
+          return (
+            <div
+              key={definition.id}
+              className="flex flex-col gap-10 border-b border-border-neutral-base p-12 last:border-b-0"
+            >
+              <button
+                type="button"
+                className="flex min-w-0 items-start gap-10 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-4">
+                  <Text size="sm" bold className="break-words">
+                    {definition.name}
+                  </Text>
+                  <Code className="break-words text-foreground-neutral-muted">
+                    {definition.config_path ?? 'Manual definition'}
+                  </Code>
+                </div>
+              </button>
+              <div className="flex items-center justify-between gap-8">
+                <Text size="xs" className="text-foreground-neutral-muted">
+                  Updated <RelativeTime value={definition.updated_at} />
+                </Text>
+                {definition.manual_trigger ? (
+                  <Button size="sm" isLoading={isRunning} onClick={() => onRun(definition)}>
+                    Run
+                  </Button>
+                ) : null}
+              </div>
+              {runErrorMessage ? (
+                <Text size="xs" className="text-tag-error-text">
+                  {runErrorMessage}
+                </Text>
+              ) : null}
+            </div>
+          );
+        })}
+      </div>
+
+      {isFetchNextPageError ? (
+        <Callout role="alert" type="error">
+          <div className="flex items-center justify-between gap-12">
+            <Text size="sm">Could not load more workflows.</Text>
+            <Button size="sm" variant="secondary" onClick={onLoadMore}>
+              Retry
+            </Button>
+          </div>
+        </Callout>
+      ) : null}
+
+      {hasNextPage ? (
+        <div className="flex justify-center">
+          <Button size="sm" variant="secondary" isLoading={isFetchingNextPage} onClick={onLoadMore}>
+            Load more
+          </Button>
+        </div>
+      ) : null}
+    </>
+  );
+}
+
+function sourceIcon(source: 'manual' | 'vcs'): IconName {
+  return source === 'vcs' ? ('gitBranchLine' as IconName) : ('terminalLine' as IconName);
+}
+
+function WorkflowEmptyState({sync}: {sync: DefinitionSyncSummaryDto | null}) {
+  const message =
+    sync?.status === 'failed' && sync.last_error_code === 'no-workflow-files'
+      ? 'No workflow files found under .shipfox/workflows/.'
+      : sync?.status === 'failed'
+        ? (sync.last_error_message ?? 'Workflow definitions could not be synced.')
+        : sync?.status === 'syncing'
+          ? 'Workflow definitions are being discovered.'
+          : sync?.status === 'succeeded'
+            ? 'No workflow definitions found.'
+            : 'Workflow sync has not reported yet.';
+
+  return <EmptyState icon="flowChart" title="No workflows" description={message} />;
+}
+
+function WorkflowSyncAlert({sync}: {sync: DefinitionSyncSummaryDto | null | undefined}) {
+  if (sync?.status !== 'failed') return null;
+
+  return (
+    <Callout role="alert" type="error">
+      <div className="flex flex-col gap-4">
+        <Text size="sm" bold>
+          Workflow sync failed
+        </Text>
+        <Text size="sm">
+          {sync.last_error_message ?? 'The latest workflow sync failed before definitions updated.'}
+        </Text>
+      </div>
+    </Callout>
+  );
+}
+
+function DefinitionSheet({
+  definition,
+  onOpenChange,
+}: {
+  definition: DefinitionDto | null;
+  onOpenChange: (open: boolean) => void;
+}) {
+  const normalizedJson = definition
+    ? JSON.stringify(
+        {
+          workflow_document: definition.workflow_document,
+          workflow_model: definition.workflow_model,
+        },
+        null,
+        2,
+      )
+    : '';
+
+  return (
+    <Sheet open={Boolean(definition)} onOpenChange={onOpenChange}>
+      <SheetContent className="w-full sm:max-w-[560px]">
+        {definition ? (
+          <>
+            <SheetHeader>
+              <SheetTitle>{definition.name}</SheetTitle>
+              <SheetDescription>
+                {definition.config_path ?? 'Manual workflow definition'}
+              </SheetDescription>
+            </SheetHeader>
+            <SheetBody className="gap-18">
+              <div className="grid w-full gap-10">
+                <Metadata label="Definition id" value={definition.id} />
+                <Metadata label="Source" value={definition.source} />
+                <Metadata label="Ref" value={definition.ref ?? 'Not set'} />
+                <Metadata label="SHA" value={definition.sha ?? 'Not set'} />
+              </div>
+              <div className="flex w-full flex-col gap-8">
+                <Text size="sm" bold>
+                  Normalized definition
+                </Text>
+                <pre className="max-h-[52vh] w-full overflow-auto rounded-8 border border-border-neutral-base bg-background-neutral-subtle p-12 scrollbar">
+                  <Code as="code" className="whitespace-pre text-foreground-neutral-base">
+                    {normalizedJson}
+                  </Code>
+                </pre>
+              </div>
+            </SheetBody>
+          </>
+        ) : null}
+      </SheetContent>
+    </Sheet>
+  );
+}
+
+function Metadata({label, value}: {label: string; value: string}) {
+  return (
+    <div className="min-w-0 py-12 first:pt-0 last:pb-0">
+      <Text size="xs" className="text-foreground-neutral-muted">
+        {label}
+      </Text>
+      <Text size="sm" className="break-words">
+        {value}
+      </Text>
+    </div>
+  );
+}
+
+function errorMessage(error: unknown, fallback: string) {
+  if (error instanceof ApiError && error.message) return error.message;
+  if (error instanceof Error && error.message) return error.message;
+  return fallback;
+}

package/src/routes/workflows.tsx

@@ -0,0 +1,10 @@
+import {defineRoute} from '@shipfox/client-shell/runtime';
+import {useParams} from '@tanstack/react-router';
+import {ProjectWorkflowsPage} from '#pages/project-workflows-page.js';
+
+export default defineRoute({
+  component: () => {
+    const {pid} = useParams({strict: false}) as {pid: string};
+    return <ProjectWorkflowsPage projectId={pid} />;
+  },
+});

package/test/pages.tsx

@@ -1,4 +1,6 @@
 import {configureApiClient} from '@shipfox/client-api';
+import {type AuthState, authStateAtom} from '@shipfox/client-shell/runtime';
+import {Toaster} from '@shipfox/react-ui/toast';
 import {QueryClient, QueryClientProvider} from '@tanstack/react-query';
 import {
   createMemoryHistory,
@@ -10,6 +12,7 @@ import {
   useParams,
 } from '@tanstack/react-router';
 import {type RenderResult, render} from '@testing-library/react';
+import {createStore, Provider as JotaiProvider} from 'jotai';
 import type {ReactElement} from 'react';
 
 // The workflow run page navigates with the router (run rows are links and the page redirects
@@ -19,6 +22,15 @@ import type {ReactElement} from 'react';
 // the real route wiring so a redirect re-renders the page with the run it landed on.
 export const PROJECT_TEST_WID = '11111111-1111-4111-8111-111111111111';
 
+// Pages that render components depending on `useActiveWorkspace()` (e.g. the project source
+// strip) need an authenticated workspace matching `$wid` in the atom `client-shell/runtime`
+// reads. A fixed membership id is fine here: nothing in these tests asserts on it.
+const authState: AuthState = {
+  status: 'authenticated',
+  token: 'token',
+  workspaces: [{id: PROJECT_TEST_WID, name: 'Acme', membershipId: 'm-1'}],
+};
+
 export function jsonResponse(body: unknown, init: ResponseInit = {}) {
   return new Response(JSON.stringify(body), {
     status: 200,
@@ -45,6 +57,11 @@ function createTestRouter(
       return renderPage({workflowRunId});
     },
   });
+  const workflowsRoute = createRoute({
+    getParentRoute: () => rootRoute,
+    path: '/workspaces/$wid/projects/$pid/workflows',
+    component: () => renderPage({}),
+  });
   const modelProviderSettingsRoute = createRoute({
     getParentRoute: () => rootRoute,
     path: '/workspaces/$wid/settings/agents',
@@ -53,7 +70,12 @@ function createTestRouter(
 
   return createRouter({
     history: createMemoryHistory({initialEntries: [path]}),
-    routeTree: rootRoute.addChildren([runsRoute, runDetailRoute, modelProviderSettingsRoute]),
+    routeTree: rootRoute.addChildren([
+      runsRoute,
+      runDetailRoute,
+      workflowsRoute,
+      modelProviderSettingsRoute,
+    ]),
   });
 }
 
@@ -66,12 +88,17 @@ export function renderProjectPage(
 } {
   const queryClient = new QueryClient({defaultOptions: {queries: {retry: false}}});
   const router = createTestRouter(path, renderPage);
+  const store = createStore();
+  store.set(authStateAtom, authState);
 
   configureApiClient({baseUrl: 'https://api.example.test'});
 
   const result = render(
     <QueryClientProvider client={queryClient}>
-      <RouterProvider router={router} />
+      <JotaiProvider store={store}>
+        <RouterProvider router={router} />
+        <Toaster />
+      </JotaiProvider>
     </QueryClientProvider>,
   );