70 lines
4.1 KiB
Markdown
70 lines
4.1 KiB
Markdown
# 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
|
|
|
|
- [x] 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`.
|
|
- [x] Admin navigation exposes Workflows and routes to the builder page.
|
|
- [x] Editor navigation does not expose Workflows.
|
|
- [x] Workflow list loads from the backend API and shows empty/error/loading states.
|
|
- [x] Workflow editor can create workflow drafts and persist metadata.
|
|
- [x] Workflow editor can add, edit, delete, and reorder stages.
|
|
- [x] Workflow editor can edit structured stage parts without converting them to opaque strings.
|
|
- [x] Activation/archive actions update UI state after successful API responses.
|
|
- [x] 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: Implemented frontend admin workflow builder.
|
|
- TDD plan: Use `apps/frontend/tests/admin_workflows.model.test.mjs` as the red pre-requirement, then add model helpers, API client methods, navigation, and the route UI.
|
|
- Red evidence: `node apps/frontend/tests/admin_workflows.model.test.mjs` failed because `features/admin-workflows/model.ts`, workflow API methods, and the Admin Workflows nav item were missing.
|
|
- Green evidence: `node apps/frontend/tests/admin_workflows.model.test.mjs` passed after adding workflow model/API/nav behavior.
|
|
- Refactor notes: Added shared workflow template contract types, dense Admin workflow list/create/editor UI, structured stage part JSON editing, stage reorder controls, activation/archive actions, audit display, and explicit frontend workspace root config for local Next runs.
|
|
- Verification output:
|
|
- `node apps/frontend/tests/admin_workflows.model.test.mjs` - passed.
|
|
- `node apps/frontend/tests/role-navigation.test.mjs` - passed: `role navigation hides Admin-only items for Editors`.
|
|
- `pnpm -C apps/frontend run test:ui` - passed.
|
|
- `pnpm -C apps/frontend run typecheck` - passed.
|
|
- Browser smoke was attempted with a local mock backend, but local Next dev startup is blocked by existing dependency drift: `Mismatching @next/swc version, detected: 15.5.4 while Next.js is on 16.2.6` and `bindings.lockfileTryAcquireSync is not a function`.
|