53 lines
2.2 KiB
Markdown
53 lines
2.2 KiB
Markdown
# Functional Design Plan — Unit 3: frontend-cms-page
|
|
|
|
## Scope
|
|
|
|
**Modify**: `frontend/src/` (existing React SPA, extended)
|
|
**Questions file**: `frontend-cms-page-fd-questions.md`
|
|
|
|
---
|
|
|
|
## Steps
|
|
|
|
### Part A — TypeScript Types
|
|
|
|
- [ ] **Step 1** — `src/api/types.ts` — add `CmsInstance` interface and `CmsInstanceStatus` type
|
|
|
|
### Part B — TanStack Query Hooks
|
|
|
|
- [ ] **Step 2** — `src/api/useCmsInstances.ts` — `GET /api/v1/CmsInstances`
|
|
- [ ] **Step 3** — `src/api/useAddCmsInstance.ts` — `POST /api/v1/CmsInstances`
|
|
- [ ] **Step 4** — `src/api/useUpdateCmsInstanceStatus.ts` — `PUT /api/v1/CmsInstances/{id}/status`
|
|
|
|
### Part C — Components
|
|
|
|
- [ ] **Step 5** — `src/components/cms/CmsInstanceList.tsx` — table with status badges; Inactive rows styled per Q2
|
|
- [ ] **Step 6** — `src/components/cms/AddCmsInstanceDialog.tsx` — modal form: Name, URL, ApiKey; error handling per Q4
|
|
- [ ] **Step 7** — `src/components/cms/SetStatusDialog.tsx` — status dropdown + conditional DisableMessage (mandatory when NotAvailable)
|
|
|
|
### Part D — Page
|
|
|
|
- [ ] **Step 8** — `src/pages/CmsPage.tsx` — replace placeholder; header + Add button; empty state per Q5; columns per Q1; UpdateStatusResult per Q3
|
|
|
|
### Part E — i18n
|
|
|
|
- [ ] **Step 9** — `src/i18n/locales/nl/translation.json` — add `cms.*` keys
|
|
- [ ] **Step 10** — `src/i18n/locales/en/translation.json` — add `cms.*` keys
|
|
|
|
### Part F — MSW Mocks
|
|
|
|
- [ ] **Step 11** — `src/mocks/cms/handlers.ts` — GET, POST, PUT handlers with in-memory state
|
|
- [ ] **Step 12** — `src/mocks/browser.ts` + `src/mocks/server.ts` — register cms handlers
|
|
|
|
### Part G — Tests
|
|
|
|
- [ ] **Step 13** — `src/api/useCmsInstances.test.ts` — GET hook
|
|
- [ ] **Step 14** — `src/api/useAddCmsInstance.test.ts` — POST mutation + cache invalidation
|
|
- [ ] **Step 15** — `src/api/useUpdateCmsInstanceStatus.test.ts` — PUT mutation + cache invalidation
|
|
- [ ] **Step 16** — `src/pages/CmsPage.test.tsx` — renders list, Add button, empty state, Owner-only guard
|
|
|
|
---
|
|
|
|
*Answers to design questions: see `frontend-cms-page-fd-questions.md`*
|
|
*Artifact path*: `aidlc-docs/features/master-cms-module/construction/plans/frontend-cms-page-functional-design-plan.md`
|