content-factory/tasks/022-admin-workflow-builder-ui.md

Task 022: Admin Workflow Builder UI

Development description: Build the Admin dashboard workflow builder so Admins can create workflows and edit their ordered stages and stage parts from the frontend using the existing FSD structure.

Implementation Details

• Frontend FSD boundaries:
  • pages/admin-workflows owns the route-level page.
  • features/admin-workflows owns workflow list/create/edit interactions.
  • entities/workflow-template owns workflow template types, selectors, and formatters if shared across pages.
  • shared/pipeline-api owns HTTP client methods only.
• Admin navigation:
  • Add Workflows item to Admin navigation.
  • Keep Editor navigation unchanged.
• Workflow list:
  • Show name, status, version, updated timestamp, stage count, and active/archive actions.
  • Allow creating a new draft workflow.
• Workflow editor:
  • Edit workflow metadata.
  • Add/edit/delete stages.
  • Reorder stages.
  • Edit stage parts as structured rows/cards with type, title, config payload, and acceptance criteria.
  • Edit human approval flag, owner role, runner profile key, retry policy, required inputs, and expected outputs.
• UX constraints:
  • Use dense Admin dashboard layout consistent with existing Admin screens.
  • Avoid marketing/landing-page treatment.
  • Show API errors inline near the relevant form/action.
  • Disable destructive actions while requests are pending.
• Tests:
  • Add frontend model tests for workflow builder state transitions.
  • Add API client tests/mocks if the current test pattern supports them.

Public Interface

• Admin can open /admin/workflows, create a draft workflow, edit stages/parts, reorder stages, activate, and archive.
• Editor does not see the Workflows nav item.

Acceptance Criteria

• TDD pre-requirement: before implementation, write one failing frontend model test for creating a workflow draft and adding/reordering stages; proceed one behavior at a time and record evidence in Result.
• Admin navigation exposes Workflows and routes to the builder page.
• Editor navigation does not expose Workflows.
• Workflow list loads from the backend API and shows empty/error/loading states.
• Workflow editor can create workflow drafts and persist metadata.
• Workflow editor can add, edit, delete, and reorder stages.
• Workflow editor can edit structured stage parts without converting them to opaque strings.
• Activation/archive actions update UI state after successful API responses.
• Frontend code follows the existing FSD folder boundaries.

Verification

• Run frontend workflow builder model tests.
• Run frontend Admin navigation tests.
• Run frontend typecheck.
• Manually verify Admin workflow create/edit/reorder/activate/archive in Docker Compose.

Result

• Status: Not started.
• TDD plan:
• Red evidence:
• Green evidence:
• Refactor notes:
• Verification output: