Adds frontend for cms page
This commit is contained in:
@@ -5,7 +5,7 @@
|
||||
- **Feature Slug**: master-cms-module
|
||||
- **Project Type**: Brownfield
|
||||
- **Start Date**: 2026-06-26T00:00:00Z
|
||||
- **Current Stage**: CONSTRUCTION - Unit 2 (slave-availability-extension) Code Generation
|
||||
- **Current Stage**: CONSTRUCTION - Unit 3 (frontend-cms-page) Code Generation Complete
|
||||
- **Branch**: unknown
|
||||
|
||||
## Workspace State
|
||||
@@ -51,6 +51,10 @@
|
||||
- [x] NFR Requirements — Complete (Unit 2)
|
||||
- [x] NFR Design — Complete (Unit 2)
|
||||
- [x] Code Generation — Complete (Unit 2)
|
||||
- [x] Functional Design — Complete (Unit 3)
|
||||
- [x] NFR Requirements — Complete (Unit 3)
|
||||
- [x] NFR Design — Complete (Unit 3)
|
||||
- [x] Code Generation — Complete (Unit 3)
|
||||
- [ ] Infrastructure Design — Skipped
|
||||
- [ ] Code Generation — Execute (per unit)
|
||||
- [ ] Build and Test — Execute
|
||||
|
||||
+116
@@ -0,0 +1,116 @@
|
||||
# Logical Components — Unit 3: frontend-cms-page
|
||||
|
||||
## Overview
|
||||
|
||||
```
|
||||
src/lib/schemas/
|
||||
├── auth.ts (existing — unchanged)
|
||||
├── users.ts (NEW — migrated from InviteUserDialog inline)
|
||||
└── cms.ts (NEW — addCmsInstanceSchema, setStatusSchema)
|
||||
|
||||
src/api/
|
||||
├── types.ts (extended — CmsInstance, CmsInstanceStatus, CreateCmsInstanceRequest,
|
||||
│ UpdateCmsInstanceStatusRequest, UpdateStatusResult)
|
||||
├── useCmsInstances.ts (NEW)
|
||||
├── useAddCmsInstance.ts (NEW)
|
||||
└── useUpdateCmsInstanceStatus.ts (NEW)
|
||||
|
||||
src/components/cms/
|
||||
├── CmsInstanceList.tsx (NEW)
|
||||
├── AddCmsInstanceDialog.tsx (NEW)
|
||||
└── SetStatusDialog.tsx (NEW)
|
||||
|
||||
src/components/users/
|
||||
└── InviteUserDialog.tsx (MODIFIED — schema import + serverError migration)
|
||||
|
||||
src/pages/
|
||||
└── CmsPage.tsx (MODIFIED — replace placeholder with full page)
|
||||
|
||||
src/i18n/locales/
|
||||
├── en/translation.json (MODIFIED — cms.* keys added)
|
||||
└── nl/translation.json (MODIFIED — cms.* keys added)
|
||||
|
||||
src/mocks/
|
||||
├── cms/handlers.ts (NEW — GET, POST, PUT MSW handlers)
|
||||
├── browser.ts (MODIFIED — register cms handlers)
|
||||
└── server.ts (MODIFIED — register cms handlers)
|
||||
|
||||
Test files:
|
||||
├── src/lib/schemas/cms.test.ts (NEW)
|
||||
├── src/lib/schemas/users.test.ts (NEW)
|
||||
├── src/api/useCmsInstances.test.ts (NEW)
|
||||
├── src/api/useAddCmsInstance.test.ts (NEW)
|
||||
├── src/api/useUpdateCmsInstanceStatus.test.ts (NEW)
|
||||
├── src/components/cms/AddCmsInstanceDialog.test.tsx (NEW)
|
||||
├── src/components/cms/SetStatusDialog.test.tsx (NEW)
|
||||
└── src/pages/CmsPage.test.tsx (MODIFIED — replace placeholder assertions)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Component Responsibilities
|
||||
|
||||
### `src/lib/schemas/cms.ts` — Validation Logic
|
||||
|
||||
| Export | Validates |
|
||||
|--------|-----------|
|
||||
| `addCmsInstanceSchema` | name (required, max 255), url (z.string().url()), apiKey (required) |
|
||||
| `AddCmsInstanceFormData` | Inferred type |
|
||||
| `setStatusSchema` | status (enum), disableMessage (required when NotAvailable via `.refine()`) |
|
||||
| `SetStatusFormData` | Inferred type |
|
||||
|
||||
### `src/lib/schemas/users.ts` — Migrated Schema
|
||||
|
||||
| Export | Source |
|
||||
|--------|--------|
|
||||
| `inviteUserSchema` | Migrated from `InviteUserDialog.tsx` inline — no behaviour change |
|
||||
| `InviteUserFormData` | Inferred type |
|
||||
|
||||
### `src/api/useCmsInstances.ts` — Query Hook
|
||||
|
||||
| Concern | Implementation |
|
||||
|---------|---------------|
|
||||
| Endpoint | `GET /api/v1/CmsInstances` |
|
||||
| Query key | `['cmsInstances']` |
|
||||
| Stale time | 30 000 ms |
|
||||
| Return type | `UseQueryResult<CmsInstance[], Error>` |
|
||||
|
||||
### `src/api/useAddCmsInstance.ts` — Mutation Hook
|
||||
|
||||
| Concern | Implementation |
|
||||
|---------|---------------|
|
||||
| Endpoint | `POST /api/v1/CmsInstances` |
|
||||
| Body | `CreateCmsInstanceRequest` |
|
||||
| On success | `invalidateQueries(['cmsInstances'])` |
|
||||
| Accepts | Optional `onError` callback (caller sets `serverError` state) |
|
||||
|
||||
### `src/api/useUpdateCmsInstanceStatus.ts` — Mutation Hook
|
||||
|
||||
| Concern | Implementation |
|
||||
|---------|---------------|
|
||||
| Endpoint | `PUT /api/v1/CmsInstances/{id}/status` |
|
||||
| Variables | `{ id: string } & UpdateCmsInstanceStatusRequest` |
|
||||
| Return | `UpdateStatusResult` |
|
||||
| On success | `invalidateQueries(['cmsInstances'])` |
|
||||
| Accepts | Optional `onSuccess` / `onError` callbacks |
|
||||
|
||||
### `src/mocks/cms/handlers.ts` — MSW Handlers
|
||||
|
||||
| Handler | Behaviour |
|
||||
|---------|-----------|
|
||||
| `GET /api/v1/CmsInstances` | Returns in-memory `cmsInstances[]` array |
|
||||
| `POST /api/v1/CmsInstances` | Pushes new instance to array; returns 201 + created instance |
|
||||
| `PUT /api/v1/CmsInstances/:id/status` | Updates instance in array; returns `UpdateStatusResult` |
|
||||
|
||||
In-memory state initialised with 1-2 seed instances to support development and test scenarios.
|
||||
|
||||
---
|
||||
|
||||
## Migration Summary
|
||||
|
||||
| File | Change | Reason |
|
||||
|------|--------|--------|
|
||||
| `InviteUserDialog.tsx` | Import schema from `@/lib/schemas/users` instead of inline | Pattern 1 (centralised schemas) |
|
||||
| `InviteUserDialog.tsx` | Replace `inviteUser.error` with `useState<string \| null>` | Pattern 2 (consistent error handling) |
|
||||
| `src/lib/schemas/users.ts` | New file — migrated `inviteSchema` | Pattern 1 |
|
||||
| `src/lib/schemas/users.test.ts` | New file — tests for `inviteUserSchema` | NFR-FE-04 |
|
||||
+156
@@ -0,0 +1,156 @@
|
||||
# NFR Design Patterns — Unit 3: frontend-cms-page
|
||||
|
||||
## Pattern 1 — Validation: Centralised Zod Schema Module
|
||||
|
||||
**NFR**: NFR-FE-01, NFR-FE-13, NFR-FE-14
|
||||
**Decision**: Q1 Other — all Zod form schemas live in `src/lib/schemas/`
|
||||
|
||||
### Rule
|
||||
Every form schema in the project is defined in `src/lib/schemas/{domain}.ts` and exported from that module. No schema is defined inline inside a component file.
|
||||
|
||||
### New files (this unit)
|
||||
|
||||
**`src/lib/schemas/cms.ts`**
|
||||
```typescript
|
||||
import { z } from 'zod';
|
||||
|
||||
export const addCmsInstanceSchema = z.object({
|
||||
name: z.string().min(1, 'Name is required').max(255),
|
||||
url: z.string().url('Must be a valid URL (include http:// or https://)'),
|
||||
apiKey: z.string().min(1, 'API key is required'),
|
||||
});
|
||||
export type AddCmsInstanceFormData = z.infer<typeof addCmsInstanceSchema>;
|
||||
|
||||
export const setStatusSchema = z.object({
|
||||
status: z.enum(['Available', 'NotAvailable', 'Inactive']),
|
||||
disableMessage: z.string().optional(),
|
||||
}).refine(
|
||||
(data) => data.status !== 'NotAvailable' || (data.disableMessage?.trim().length ?? 0) > 0,
|
||||
{ message: 'Disable message is required when status is Not Available', path: ['disableMessage'] }
|
||||
);
|
||||
export type SetStatusFormData = z.infer<typeof setStatusSchema>;
|
||||
```
|
||||
|
||||
### Migration (existing inline schema)
|
||||
|
||||
`InviteUserDialog.tsx` currently defines `inviteSchema` inline. As part of this unit, migrate it to **`src/lib/schemas/users.ts`**:
|
||||
|
||||
```typescript
|
||||
import { z } from 'zod';
|
||||
|
||||
export const inviteUserSchema = z.object({
|
||||
email: z.string().email(),
|
||||
role: z.enum(['Administrator', 'User']),
|
||||
});
|
||||
export type InviteUserFormData = z.infer<typeof inviteUserSchema>;
|
||||
```
|
||||
|
||||
`InviteUserDialog.tsx` then imports from `@/lib/schemas/users` and removes the inline definition.
|
||||
|
||||
### Test files
|
||||
- `src/lib/schemas/cms.test.ts` — tests for `addCmsInstanceSchema` (URL strictness, DisableMessage refinement) and `setStatusSchema`
|
||||
- `src/lib/schemas/users.test.ts` — tests for `inviteUserSchema` (migrated from inline, no behaviour change)
|
||||
|
||||
---
|
||||
|
||||
## Pattern 2 — Error Handling: Local Server Error State
|
||||
|
||||
**NFR**: NFR-FE-15 (field errors via `FieldError`), BR-FE-15/16 (FormErrorBanner for server errors)
|
||||
**Decision**: Q2 B — all forms use `useState<string | null>(null)` for server-side error messages
|
||||
|
||||
### Rule
|
||||
Every form component that calls a mutation owns a `const [serverError, setServerError] = useState<string | null>(null)` local state. The mutation's `onError` callback translates the error type to an i18n string and sets `serverError`. The `<FormErrorBanner>` receives `serverError`.
|
||||
|
||||
This pattern is adopted **project-wide**, including the migration of `InviteUserDialog` (currently using `mutation.error` directly).
|
||||
|
||||
### Standard implementation
|
||||
```typescript
|
||||
const [serverError, setServerError] = useState<string | null>(null);
|
||||
|
||||
const addInstance = useAddCmsInstance({
|
||||
onError: (err) => {
|
||||
if (err instanceof ProblemDetailsError && err.status === 409) {
|
||||
setServerError(t('cms.add.errors.conflict'));
|
||||
} else if (err instanceof NetworkError) {
|
||||
setServerError(t('errors.network'));
|
||||
} else {
|
||||
setServerError(t('errors.generic'));
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
// Reset on dialog close
|
||||
useEffect(() => {
|
||||
if (!open) {
|
||||
setServerError(null);
|
||||
addInstance.reset();
|
||||
reset();
|
||||
}
|
||||
}, [open]);
|
||||
```
|
||||
|
||||
### FormErrorBanner usage
|
||||
```tsx
|
||||
<FormErrorBanner
|
||||
error={serverError !== null ? { message: serverError } : null}
|
||||
onDismiss={() => setServerError(null)}
|
||||
/>
|
||||
```
|
||||
|
||||
### Migration (existing InviteUserDialog)
|
||||
`InviteUserDialog` currently passes `inviteUser.error` directly to `FormErrorBanner`. Migrate to local `useState<string | null>` + `onError` callback. Error message stays generic (`t('errors.generic')`) since invite errors are not status-code-specific.
|
||||
|
||||
---
|
||||
|
||||
## Pattern 3 — Form Lifecycle: Reset on Close
|
||||
|
||||
**NFR**: NFR-FE-01 (consistent patterns)
|
||||
|
||||
All dialog forms reset their full state (form values, server error, mutation state) when the dialog closes. Implemented via `useEffect` watching the `open` prop:
|
||||
|
||||
```typescript
|
||||
useEffect(() => {
|
||||
if (!open) {
|
||||
setServerError(null);
|
||||
mutation.reset();
|
||||
reset(); // react-hook-form reset
|
||||
}
|
||||
}, [open]);
|
||||
```
|
||||
|
||||
This pattern is already present in `InviteUserDialog` and is carried forward to `AddCmsInstanceDialog` and `SetStatusDialog`.
|
||||
|
||||
---
|
||||
|
||||
## Pattern 4 — Security: PasswordField for Credentials
|
||||
|
||||
**NFR**: NFR-FE-07, NFR-FE-08
|
||||
**Decision**: TSD-03
|
||||
|
||||
The `apiKey` field in `AddCmsInstanceDialog` uses the existing `PasswordField` component:
|
||||
|
||||
```tsx
|
||||
import { PasswordField } from '@/components/ui/PasswordField';
|
||||
|
||||
<PasswordField
|
||||
id="add-cms-apikey"
|
||||
label={t('cms.add.apiKeyLabel')}
|
||||
data-testid="add-cms-apikey"
|
||||
aria-invalid={errors.apiKey !== undefined}
|
||||
{...register('apiKey')}
|
||||
/>
|
||||
```
|
||||
|
||||
`PasswordField` already renders `type="password"` with a show/hide toggle button. No new component needed.
|
||||
|
||||
---
|
||||
|
||||
## Pattern 5 — Cache Invalidation: Pessimistic Refetch
|
||||
|
||||
**NFR**: NFR-FE-12
|
||||
|
||||
All mutations invalidate `['cmsInstances']` in `onSuccess` after the server confirms the operation. No optimistic updates. Consistent with `useUsers` / `useChangeRole` patterns in this project.
|
||||
|
||||
```typescript
|
||||
onSuccess: () => queryClient.invalidateQueries({ queryKey: ['cmsInstances'] }),
|
||||
```
|
||||
+41
@@ -0,0 +1,41 @@
|
||||
# NFR Requirements — Unit 3: frontend-cms-page
|
||||
|
||||
## Maintainability
|
||||
|
||||
| ID | Requirement | Rationale |
|
||||
|----|-------------|-----------|
|
||||
| NFR-FE-01 | All new components use `react-hook-form` + `zodResolver` + Zod schemas, consistent with `InviteUserDialog` and `LoginPage` patterns in this project. | Single validation strategy across the entire frontend. |
|
||||
| NFR-FE-02 | All user-visible strings are externalised in `src/i18n/locales/{lang}/translation.json` under the `cms.*` namespace. No hardcoded UI text in components. | Enables future language additions without code changes. |
|
||||
| NFR-FE-03 | Components follow the existing Shadcn/UI composition pattern: `Dialog`, `Table`, `Select`, `Badge`, `DropdownMenu` from `@/components/ui/*`. No third-party UI additions. | Keeps the component surface consistent and avoids dependency sprawl. |
|
||||
|
||||
## Testability
|
||||
|
||||
| ID | Requirement | Rationale |
|
||||
|----|-------------|-----------|
|
||||
| NFR-FE-04 | Test scope: **hooks + page integration + individual component tests** (Q2: C). Required test files: `useCmsInstances.test.ts`, `useAddCmsInstance.test.ts`, `useUpdateCmsInstanceStatus.test.ts`, `CmsPage.test.tsx`, `AddCmsInstanceDialog.test.tsx`, `SetStatusDialog.test.tsx`. | Matches precedent set by `InviteUserDialog.test.tsx`. Isolated component tests cover error states and conditional logic (DisableMessage) without needing a full page mount. |
|
||||
| NFR-FE-05 | MSW handlers cover all three API operations (GET list, POST create, PUT status) with at least one happy-path and one error variant per endpoint. | Handlers must be registered in both `src/mocks/browser.ts` (dev) and `src/mocks/server.ts` (tests). |
|
||||
| NFR-FE-06 | All interactive elements receive `data-testid` attributes following the existing naming convention (`cms-*`, e.g. `cms-add-button`, `cms-instance-row`, `cms-set-status-submit`). | Required for RTL `getByTestId` selectors in tests. |
|
||||
|
||||
## Security
|
||||
|
||||
| ID | Requirement | Rationale |
|
||||
|----|-------------|-----------|
|
||||
| NFR-FE-07 | The `apiKey` field in `AddCmsInstanceDialog` is rendered as `type="password"` using the existing `PasswordField` component (which includes a show/hide toggle). | Prevents shoulder-surfing of infrastructure credentials during the add flow (Q3: A). Reuses existing `PasswordField.tsx` component. |
|
||||
| NFR-FE-08 | The `apiKey` value is sent once to the backend on form submit. It is not stored in React state beyond the form lifecycle and is not logged to the console. | Credentials must not leak into browser DevTools' React state inspector or console logs. |
|
||||
| NFR-FE-09 | `CmsPage` relies on `RoleGuard allowedRoles={['Owner']}` at the route level. No additional role check is implemented inside the page or its components. | Single point of access control; avoids partial/inconsistent guards. See BR-FE-20. |
|
||||
|
||||
## Reliability
|
||||
|
||||
| ID | Requirement | Rationale |
|
||||
|----|-------------|-----------|
|
||||
| NFR-FE-10 | Loading state for `useCmsInstances` is rendered as `<p className="text-sm text-muted-foreground">{t('common.loading')}</p>`, consistent with `UsersPage`. No skeleton component is introduced. | Uniform loading UX without additional dependencies. |
|
||||
| NFR-FE-11 | Error state for `useCmsInstances` is rendered as `<p className="text-sm text-destructive">{t('errors.generic')}</p>`, consistent with `UsersPage`. | No custom error component needed. |
|
||||
| NFR-FE-12 | TanStack Query stale time for `useCmsInstances` is 30 000 ms. Cache is invalidated on every successful mutation (add or status update). | Balances freshness with network efficiency; avoids redundant refetches while dialogs are open. |
|
||||
|
||||
## Validation
|
||||
|
||||
| ID | Requirement | Rationale |
|
||||
|----|-------------|-----------|
|
||||
| NFR-FE-13 | URL field in `AddCmsInstanceDialog` uses `z.string().url()` (strict Zod URL validation). The user must supply a fully-qualified URL including protocol (e.g. `http://192.168.1.5:8080`). | Q1: A. Backend validates anyway; client-side strict validation prevents protocol-less entries from ever reaching the API. |
|
||||
| NFR-FE-14 | `react-hook-form` mode is set to `onTouched` for all new dialogs, consistent with `LoginPage`. Validation messages appear after a field is touched, not on initial render. | Avoids red errors appearing before the user has interacted with the form. |
|
||||
| NFR-FE-15 | Field-level validation errors are rendered using the existing `<FieldError>` component (`src/components/ui/FieldError.tsx`). | Consistent error presentation across all forms. |
|
||||
+50
@@ -0,0 +1,50 @@
|
||||
# Tech Stack Decisions — Unit 3: frontend-cms-page
|
||||
|
||||
## Existing stack — no changes
|
||||
|
||||
| Layer | Technology | Notes |
|
||||
|-------|-----------|-------|
|
||||
| UI components | Shadcn/UI | `Dialog`, `Table`, `Select`, `Badge`, `DropdownMenu` — all already present |
|
||||
| Styling | Tailwind CSS | `opacity-50` for Inactive rows (BR-FE-04) |
|
||||
| Data fetching | TanStack Query v5 | `useQuery` + `useMutation` pattern already used by `useUsers` |
|
||||
| Form state | react-hook-form + zodResolver | Used in `InviteUserDialog`, `LoginPage`, `SetupPage` |
|
||||
| Schema validation | Zod | `z.string().url()` for URL field (NFR-FE-13) |
|
||||
| Routing | TanStack Router | `/cms` route already exists; `RoleGuard` already wired |
|
||||
| i18n | react-i18next | New `cms.*` keys added to EN + NL locales |
|
||||
| Toasts | Sonner | `toast.success()` / `toast.error()` — already used throughout |
|
||||
| Testing | Vitest + React Testing Library + MSW | All already configured |
|
||||
| HTTP client | Custom `api-client` (`NetworkError`, `ProblemDetailsError`) | Same error types used across all existing hooks |
|
||||
|
||||
## Decisions made in this unit
|
||||
|
||||
### TSD-01 — URL validation: `z.string().url()` (strict)
|
||||
|
||||
**Decision**: Use Zod's built-in `z.string().url()` for the URL field.
|
||||
**Rationale**: Q1: A. Users must enter a fully-qualified URL with protocol. The backend validates anyway, but client-side strict validation stops obviously malformed input early and improves error feedback.
|
||||
**Implication**: Users entering `192.168.1.5:8080` will see a validation error. They must enter `http://192.168.1.5:8080`.
|
||||
|
||||
### TSD-02 — Test scope: hooks + page + component tests
|
||||
|
||||
**Decision**: Three test layers:
|
||||
1. Hook unit tests (`useCmsInstances.test.ts`, `useAddCmsInstance.test.ts`, `useUpdateCmsInstanceStatus.test.ts`) using `renderHook` + MSW server
|
||||
2. Page integration test (`CmsPage.test.tsx`) covering load, empty state, add flow, status flow
|
||||
3. Component tests (`AddCmsInstanceDialog.test.tsx`, `SetStatusDialog.test.tsx`) for error states and conditional logic
|
||||
|
||||
**Rationale**: Q2: C. Matches `InviteUserDialog.test.tsx` precedent. Dialog component tests are necessary to cover `FormErrorBanner` on HTTP 400 and the `DisableMessage` conditional show/hide (BR-FE-08) without a full page mount.
|
||||
|
||||
### TSD-03 — ApiKey field: `PasswordField` with show/hide toggle
|
||||
|
||||
**Decision**: Reuse the existing `PasswordField` component (`src/components/ui/PasswordField.tsx`) for the `apiKey` input.
|
||||
**Rationale**: Q3: A. Hides the credential from shoulder-surfing while allowing the user to reveal it for verification. No new component needed — `PasswordField` already implements the show/hide pattern.
|
||||
|
||||
### TSD-04 — Toast content: differentiated on `slaveContactSuccess`
|
||||
|
||||
**Decision**: Two distinct toast messages for `PUT /api/v1/CmsInstances/{id}/status`:
|
||||
- `slaveContactSuccess === true` → `t('cms.setStatus.successContactedToast')` = "Status updated — cliënt confirmed"
|
||||
- `slaveContactSuccess === false` → `t('cms.setStatus.successUnreachableToast')` = "Status saved — cliënt unreachable"
|
||||
|
||||
**Rationale**: Q3 FD: B + user terminology preference (no "slave" in UI). Both cases are HTTP 200; the distinction is surfaced via the `UpdateStatusResult.slaveContactSuccess` field from the backend.
|
||||
|
||||
### TSD-05 — `FormErrorBanner` component name
|
||||
|
||||
The project has both `FormBannerError` (`src/components/ui/FormBannerError.tsx`) and `FormErrorBanner` (`src/components/ui/FormErrorBanner.tsx`). The dialogs use `FormErrorBanner` (as used in `InviteUserDialog`). The `AddCmsInstanceDialog` and `SetStatusDialog` will import from `@/components/ui/FormErrorBanner`.
|
||||
+242
@@ -0,0 +1,242 @@
|
||||
# Code Generation Plan — Unit 3: frontend-cms-page
|
||||
|
||||
## Unit Context
|
||||
|
||||
**Workspace root**: `K:\Development\Projects\SlpModularCms`
|
||||
**Frontend root**: `frontend/src/`
|
||||
**Project type**: Brownfield
|
||||
**FD artifacts**: `aidlc-docs/features/master-cms-module/construction/frontend-cms-page/functional-design/`
|
||||
**NFR artifacts**: `aidlc-docs/features/master-cms-module/construction/frontend-cms-page/nfr-requirements/` + `nfr-design/`
|
||||
|
||||
## Dependencies
|
||||
|
||||
- Backend API (`CmsInstanceController`) implemented in Unit 1 (master-backend) ✅
|
||||
- Existing frontend: `src/api/types.ts`, `src/lib/schemas/auth.ts`, `src/mocks/index.ts`, `src/pages/CmsPage.tsx` (placeholder)
|
||||
- MSW: existing `mocks/index.ts` pattern with feature folders
|
||||
|
||||
## Cross-cutting migrations (part of this unit)
|
||||
|
||||
- `InviteUserDialog.tsx`: schema → `@/lib/schemas/users`, error state → `useState<string | null>`
|
||||
- New schema files: `src/lib/schemas/users.ts`, `src/lib/schemas/cms.ts`
|
||||
|
||||
---
|
||||
|
||||
## Steps
|
||||
|
||||
### Step 1 — `src/api/types.ts` (MODIFY)
|
||||
Add CMS domain types after existing types:
|
||||
- `CmsInstanceStatus` union type (`'Available' | 'NotAvailable' | 'Inactive'`)
|
||||
- `CmsInstance` interface (id, name, url, status, disableMessage, lastContactedAt, lastStatusPushedAt, lastIntegrityCheckFailedAt)
|
||||
- `CreateCmsInstanceRequest` interface (name, url, apiKey)
|
||||
- `UpdateCmsInstanceStatusRequest` interface (status, disableMessage)
|
||||
- `UpdateStatusResult` interface (success, slaveContactSuccess)
|
||||
|
||||
### Step 2 — `src/lib/schemas/users.ts` (CREATE)
|
||||
Migrate `inviteSchema` from `InviteUserDialog.tsx` to `src/lib/schemas/users.ts`:
|
||||
- Export `inviteUserSchema` (z.object: email z.string().email(), role z.enum(['Administrator','User']))
|
||||
- Export `InviteUserFormData` inferred type
|
||||
|
||||
### Step 3 — `src/lib/schemas/cms.ts` (CREATE)
|
||||
- `addCmsInstanceSchema`: name (min 1, max 255), url (z.string().url()), apiKey (min 1)
|
||||
- `AddCmsInstanceFormData` inferred type
|
||||
- `setStatusSchema`: status enum + `.refine()` requiring disableMessage when NotAvailable
|
||||
- `SetStatusFormData` inferred type
|
||||
|
||||
### Step 4 — `src/lib/schemas/users.test.ts` (CREATE)
|
||||
Tests for migrated `inviteUserSchema`:
|
||||
- Valid email + role → passes
|
||||
- Invalid email → fails
|
||||
- Missing role → fails
|
||||
|
||||
### Step 5 — `src/lib/schemas/cms.test.ts` (CREATE)
|
||||
Tests for both schemas:
|
||||
- `addCmsInstanceSchema`: valid data passes; missing name/apiKey fails; `z.string().url()` — `http://valid.url` passes, `no-protocol` fails
|
||||
- `setStatusSchema`: Available without disableMessage passes; NotAvailable without disableMessage fails; NotAvailable with disableMessage passes
|
||||
|
||||
### Step 6 — `src/components/users/InviteUserDialog.tsx` (MODIFY)
|
||||
Two changes (pattern migration):
|
||||
1. Replace inline `inviteSchema` + `InviteFormData` with import from `@/lib/schemas/users`
|
||||
2. Replace `inviteUser.error` passed to `<FormErrorBanner>` with local `useState<string | null>(null)` + `onError` callback setting generic error message
|
||||
|
||||
### Step 7 — `src/mocks/cms/handlers.ts` (CREATE)
|
||||
In-memory MSW handlers:
|
||||
- `let mockCmsInstances: CmsInstance[]` with 2 seed entries (one Available, one Inactive)
|
||||
- `resetMockCmsInstances()` export
|
||||
- `GET /api/v1/CmsInstances` → return array
|
||||
- `POST /api/v1/CmsInstances` → create instance (status=Available), push to array, return 201 + instance
|
||||
- `PUT /api/v1/CmsInstances/:id/status` → update instance in array, return `UpdateStatusResult { success: true, slaveContactSuccess: true }`
|
||||
|
||||
### Step 8 — `src/mocks/index.ts` (MODIFY)
|
||||
- Import `cmsHandlers` from `./cms/handlers`
|
||||
- Add `...cmsHandlers` to `handlers` array
|
||||
- Re-export `cmsHandlers` and `resetMockCmsInstances`
|
||||
|
||||
### Step 9 — `src/api/useCmsInstances.ts` (CREATE)
|
||||
```typescript
|
||||
export function useCmsInstances() {
|
||||
return useQuery<CmsInstance[], Error>({
|
||||
queryKey: ['cmsInstances'],
|
||||
queryFn: () => api.get<CmsInstance[]>('/api/v1/CmsInstances'),
|
||||
staleTime: 30_000,
|
||||
});
|
||||
}
|
||||
```
|
||||
|
||||
### Step 10 — `src/api/useAddCmsInstance.ts` (CREATE)
|
||||
```typescript
|
||||
export function useAddCmsInstance(options?: MutationOptions) {
|
||||
const queryClient = useQueryClient();
|
||||
return useMutation<CmsInstance, Error, CreateCmsInstanceRequest>({
|
||||
mutationFn: (data) => api.post<CmsInstance>('/api/v1/CmsInstances', data),
|
||||
onSuccess: () => queryClient.invalidateQueries({ queryKey: ['cmsInstances'] }),
|
||||
...options,
|
||||
});
|
||||
}
|
||||
```
|
||||
|
||||
### Step 11 — `src/api/useUpdateCmsInstanceStatus.ts` (CREATE)
|
||||
```typescript
|
||||
export function useUpdateCmsInstanceStatus(options?: MutationOptions) {
|
||||
const queryClient = useQueryClient();
|
||||
return useMutation<UpdateStatusResult, Error, { id: string } & UpdateCmsInstanceStatusRequest>({
|
||||
mutationFn: ({ id, ...body }) =>
|
||||
api.put<UpdateStatusResult>(`/api/v1/CmsInstances/${id}/status`, body),
|
||||
onSuccess: () => queryClient.invalidateQueries({ queryKey: ['cmsInstances'] }),
|
||||
...options,
|
||||
});
|
||||
}
|
||||
```
|
||||
|
||||
### Step 12 — `src/i18n/locales/en/translation.json` (MODIFY)
|
||||
Replace existing `"cms": { "title": ..., "description": ... }` with full `cms.*` key tree (from frontend-components.md i18n section).
|
||||
|
||||
### Step 13 — `src/i18n/locales/nl/translation.json` (MODIFY)
|
||||
Replace existing `"cms": { "title": ..., "description": ... }` with full `cms.*` key tree in Dutch.
|
||||
|
||||
### Step 14 — `src/components/cms/CmsInstanceList.tsx` (CREATE)
|
||||
Table component:
|
||||
- Props: `instances: CmsInstance[]`, `onSetStatus: (instance: CmsInstance) => void`
|
||||
- Shadcn `Table` with 6 columns (Name, URL, Status, Last Contact, Disable Message, Actions)
|
||||
- Status badge: green/red/muted per BR-FE-05..07
|
||||
- Inactive row: `className={instance.status === 'Inactive' ? 'opacity-50' : ''}`
|
||||
- Actions: `DropdownMenu` with "Set Status" item
|
||||
- `data-testid` on row (`cms-instance-row`), badge, and actions trigger
|
||||
|
||||
### Step 15 — `src/components/cms/AddCmsInstanceDialog.tsx` (CREATE)
|
||||
Dialog with react-hook-form + `addCmsInstanceSchema`:
|
||||
- Fields: name (text), url (text), apiKey (`PasswordField`)
|
||||
- `useState<string | null>(null)` for serverError
|
||||
- `onError` callback: ProblemDetailsError 409 → specific message, NetworkError → `errors.network`, else → `errors.generic`
|
||||
- `useEffect` on `open` → reset form + serverError + mutation
|
||||
- `FormErrorBanner`, `FieldError`, `data-testid` on all fields and submit button
|
||||
|
||||
### Step 16 — `src/components/cms/SetStatusDialog.tsx` (CREATE)
|
||||
Dialog with react-hook-form + `setStatusSchema`:
|
||||
- Fields: status (Shadcn `Select`), disableMessage (conditional text, only when NotAvailable)
|
||||
- `useState<string | null>(null)` for serverError
|
||||
- `onSuccess`: close dialog, toast message based on `result.slaveContactSuccess` (BR-FE-12/13)
|
||||
- `onError`: set serverError from toast (generic)
|
||||
- `useEffect` on `open` or `instance` change → reset
|
||||
- `data-testid` on select, disableMessage input, submit button
|
||||
|
||||
### Step 17 — `src/pages/CmsPage.tsx` (MODIFY)
|
||||
Replace placeholder with full page:
|
||||
- State: `addDialogOpen`, `statusTarget`
|
||||
- `useCmsInstances()` hook
|
||||
- Header row: title + "Add CMS" button (data-testid="cms-add-button")
|
||||
- Loading/error text per NFR-FE-10/11
|
||||
- Empty state (BR-FE-18) vs `CmsInstanceList`
|
||||
- `AddCmsInstanceDialog` + `SetStatusDialog`
|
||||
- Remove old `data-testid="cms-placeholder"` (test file updated in step 18)
|
||||
|
||||
### Step 18 — `src/pages/CmsPage.test.tsx` (MODIFY)
|
||||
Replace existing placeholder-only tests with:
|
||||
- `renders list of CMS instances` (happy path with seed data)
|
||||
- `renders empty state when no instances` (MSW returns [])
|
||||
- `opens AddCmsInstanceDialog on button click`
|
||||
- `adds a CMS instance successfully`
|
||||
- `redirects unauthenticated users to login` (existing — keep)
|
||||
|
||||
### Step 19 — `src/api/useCmsInstances.test.ts` (CREATE)
|
||||
- Returns list on success
|
||||
- Handles network error
|
||||
|
||||
### Step 20 — `src/api/useAddCmsInstance.test.ts` (CREATE)
|
||||
- Creates instance + invalidates cache on success (HTTP 201)
|
||||
- Calls onError on HTTP 400
|
||||
|
||||
### Step 21 — `src/api/useUpdateCmsInstanceStatus.test.ts` (CREATE)
|
||||
- Updates status + invalidates cache on success
|
||||
- Returns UpdateStatusResult with slaveContactSuccess flag
|
||||
|
||||
### Step 22 — `src/components/cms/AddCmsInstanceDialog.test.tsx` (CREATE)
|
||||
- Renders fields and submit button
|
||||
- Shows FieldError for missing name
|
||||
- Shows FieldError for invalid URL (non-URL format)
|
||||
- Shows FormErrorBanner on HTTP 400
|
||||
- Resets form on dialog close
|
||||
|
||||
### Step 23 — `src/components/cms/SetStatusDialog.test.tsx` (CREATE)
|
||||
- DisableMessage field hidden when status ≠ NotAvailable
|
||||
- DisableMessage field shown and required when status = NotAvailable
|
||||
- Form blocks submit when DisableMessage empty + NotAvailable
|
||||
|
||||
---
|
||||
|
||||
## File Summary
|
||||
|
||||
| # | File | Action |
|
||||
|---|------|--------|
|
||||
| 1 | `frontend/src/api/types.ts` | MODIFY — add 5 CMS types |
|
||||
| 2 | `frontend/src/lib/schemas/users.ts` | CREATE — migrated inviteUserSchema |
|
||||
| 3 | `frontend/src/lib/schemas/cms.ts` | CREATE — addCmsInstanceSchema, setStatusSchema |
|
||||
| 4 | `frontend/src/lib/schemas/users.test.ts` | CREATE |
|
||||
| 5 | `frontend/src/lib/schemas/cms.test.ts` | CREATE |
|
||||
| 6 | `frontend/src/components/users/InviteUserDialog.tsx` | MODIFY — schema import + serverError migration |
|
||||
| 7 | `frontend/src/mocks/cms/handlers.ts` | CREATE — MSW handlers |
|
||||
| 8 | `frontend/src/mocks/index.ts` | MODIFY — register cmsHandlers |
|
||||
| 9 | `frontend/src/api/useCmsInstances.ts` | CREATE |
|
||||
| 10 | `frontend/src/api/useAddCmsInstance.ts` | CREATE |
|
||||
| 11 | `frontend/src/api/useUpdateCmsInstanceStatus.ts` | CREATE |
|
||||
| 12 | `frontend/src/i18n/locales/en/translation.json` | MODIFY — cms.* keys |
|
||||
| 13 | `frontend/src/i18n/locales/nl/translation.json` | MODIFY — cms.* keys |
|
||||
| 14 | `frontend/src/components/cms/CmsInstanceList.tsx` | CREATE |
|
||||
| 15 | `frontend/src/components/cms/AddCmsInstanceDialog.tsx` | CREATE |
|
||||
| 16 | `frontend/src/components/cms/SetStatusDialog.tsx` | CREATE |
|
||||
| 17 | `frontend/src/pages/CmsPage.tsx` | MODIFY — replace placeholder |
|
||||
| 18 | `frontend/src/pages/CmsPage.test.tsx` | MODIFY — full test suite |
|
||||
| 19 | `frontend/src/api/useCmsInstances.test.ts` | CREATE |
|
||||
| 20 | `frontend/src/api/useAddCmsInstance.test.ts` | CREATE |
|
||||
| 21 | `frontend/src/api/useUpdateCmsInstanceStatus.test.ts` | CREATE |
|
||||
| 22 | `frontend/src/components/cms/AddCmsInstanceDialog.test.tsx` | CREATE |
|
||||
| 23 | `frontend/src/components/cms/SetStatusDialog.test.tsx` | CREATE |
|
||||
|
||||
**Total**: 16 new files, 7 modified files
|
||||
|
||||
---
|
||||
|
||||
## Step Completion Tracking
|
||||
|
||||
- [x] Step 1 — types.ts
|
||||
- [x] Step 2 — schemas/users.ts
|
||||
- [x] Step 3 — schemas/cms.ts
|
||||
- [x] Step 4 — schemas/users.test.ts
|
||||
- [x] Step 5 — schemas/cms.test.ts
|
||||
- [x] Step 6 — InviteUserDialog.tsx migration
|
||||
- [x] Step 7 — mocks/cms/handlers.ts
|
||||
- [x] Step 8 — mocks/index.ts
|
||||
- [x] Step 9 — useCmsInstances.ts
|
||||
- [x] Step 10 — useAddCmsInstance.ts
|
||||
- [x] Step 11 — useUpdateCmsInstanceStatus.ts
|
||||
- [x] Step 12 — en/translation.json
|
||||
- [x] Step 13 — nl/translation.json
|
||||
- [x] Step 14 — CmsInstanceList.tsx
|
||||
- [x] Step 15 — AddCmsInstanceDialog.tsx
|
||||
- [x] Step 16 — SetStatusDialog.tsx
|
||||
- [x] Step 17 — CmsPage.tsx
|
||||
- [x] Step 18 — CmsPage.test.tsx
|
||||
- [x] Step 19 — useCmsInstances.test.ts
|
||||
- [x] Step 20 — useAddCmsInstance.test.ts
|
||||
- [x] Step 21 — useUpdateCmsInstanceStatus.test.ts
|
||||
- [x] Step 22 — AddCmsInstanceDialog.test.tsx
|
||||
- [x] Step 23 — SetStatusDialog.test.tsx
|
||||
+22
@@ -0,0 +1,22 @@
|
||||
# NFR Design Plan — Unit 3: frontend-cms-page
|
||||
|
||||
## Unit Context
|
||||
|
||||
**Unit**: `frontend-cms-page`
|
||||
**Inputs**: nfr-requirements.md, tech-stack-decisions.md
|
||||
**Key NFR design concerns**: Zod schema organisation, error-handling pattern for hooks
|
||||
|
||||
---
|
||||
|
||||
## Execution Steps
|
||||
|
||||
- [x] **Step 1** — Analyze answers; flag ambiguities
|
||||
- [x] **Step 2** — Generate `nfr-design-patterns.md`
|
||||
- [x] **Step 3** — Generate `logical-components.md`
|
||||
- [x] **Step 4** — Update `aidlc-state.md`
|
||||
- [ ] **Step 5** — Present completion message for approval
|
||||
|
||||
---
|
||||
|
||||
*Questions file*: `frontend-cms-page-nfr-design-questions.md`
|
||||
*Artifact path*: `aidlc-docs/features/master-cms-module/construction/plans/frontend-cms-page-nfr-design-plan.md`
|
||||
+34
@@ -0,0 +1,34 @@
|
||||
# NFR Design Questions — Unit 3: frontend-cms-page
|
||||
|
||||
Please answer each question by filling in the letter after the `[Answer]:` tag.
|
||||
If none of the options match, choose the last option (Other) and describe your preference.
|
||||
|
||||
---
|
||||
|
||||
## Question 1
|
||||
Where should the Zod form schemas for `AddCmsInstanceDialog` and `SetStatusDialog` live?
|
||||
|
||||
Context: `src/lib/schemas/auth.ts` holds shared auth schemas (used by LoginPage, SetupPage, InviteCompletePage, and tested in `auth.test.ts`). `InviteUserDialog` defines its schema inline.
|
||||
|
||||
A) **Inline in each component file** — `addInstanceSchema` defined inside `AddCmsInstanceDialog.tsx`, `setStatusSchema` inside `SetStatusDialog.tsx`. Pragmatic: each schema is single-use and lives next to the form that uses it. Consistent with `InviteUserDialog.tsx` pattern.
|
||||
|
||||
B) **Centralised in `src/lib/schemas/cms.ts`** — Both schemas exported from a single module, tested separately in `src/lib/schemas/cms.test.ts`. Consistent with the `auth.ts` pattern; schemas are independently testable.
|
||||
|
||||
C) Other (please describe after [Answer]: tag below)
|
||||
|
||||
[Answer]: C, I want all schemas to live in the src/lib/schemas folder. Do it also for schemas that are inlin or otherwise not in that directory to make it consistent and easy to find.
|
||||
|
||||
---
|
||||
|
||||
## Question 2
|
||||
How should hook-level API errors be surfaced to the component?
|
||||
|
||||
Context: TanStack Query exposes `mutation.error` on the mutation object. Two approaches are used in this project:
|
||||
|
||||
A) **`mutation.error` prop** — component reads `mutation.error` directly and passes `{ message: mutation.error.message }` to `FormErrorBanner`. Pattern used by `InviteUserDialog` (`inviteUser.error`). No extra state.
|
||||
|
||||
B) **Local `useState<string | null>(null)`** — component owns a `serverError` string, set in the mutation `onError` callback. Pattern used by `LoginPage`. Allows custom i18n error messages per status code (e.g. 409 Conflict → "Name already in use").
|
||||
|
||||
C) Other (please describe after [Answer]: tag below)
|
||||
|
||||
[Answer]: B, also make it consistent accross the projects if possible.
|
||||
+3
-3
@@ -18,7 +18,7 @@ C) **Custom** — Must start with `http://` or `https://`, but the rest is not v
|
||||
|
||||
D) Other (please describe after [Answer]: tag below)
|
||||
|
||||
[Answer]:
|
||||
[Answer]: A
|
||||
|
||||
---
|
||||
|
||||
@@ -33,7 +33,7 @@ C) **Hooks + page + component tests** — In addition to B, dedicated tests for
|
||||
|
||||
D) Other (please describe after [Answer]: tag below)
|
||||
|
||||
[Answer]:
|
||||
[Answer]: C
|
||||
|
||||
---
|
||||
|
||||
@@ -48,4 +48,4 @@ B) **`type="text"`** — Visible. Easier to verify the pasted value is correct.
|
||||
|
||||
C) Other (please describe after [Answer]: tag below)
|
||||
|
||||
[Answer]:
|
||||
[Answer]: A
|
||||
|
||||
+4
-4
@@ -10,10 +10,10 @@
|
||||
|
||||
## Execution Steps
|
||||
|
||||
- [ ] **Step 1** — Analyze answers; flag ambiguities
|
||||
- [ ] **Step 2** — Generate `nfr-requirements.md`
|
||||
- [ ] **Step 3** — Generate `tech-stack-decisions.md`
|
||||
- [ ] **Step 4** — Update `aidlc-state.md`
|
||||
- [x] **Step 1** — Analyze answers; flag ambiguities
|
||||
- [x] **Step 2** — Generate `nfr-requirements.md`
|
||||
- [x] **Step 3** — Generate `tech-stack-decisions.md`
|
||||
- [x] **Step 4** — Update `aidlc-state.md`
|
||||
- [ ] **Step 5** — Present completion message for approval
|
||||
|
||||
---
|
||||
|
||||
@@ -82,6 +82,35 @@ export interface ChangeRolePayload {
|
||||
|
||||
export type AvailabilityStatus = 'Available' | 'Maintenance' | 'NotAvailable';
|
||||
|
||||
export type CmsInstanceStatus = 'Available' | 'NotAvailable' | 'Inactive';
|
||||
|
||||
export interface CmsInstance {
|
||||
id: string;
|
||||
name: string;
|
||||
url: string;
|
||||
status: CmsInstanceStatus;
|
||||
disableMessage: string | null;
|
||||
lastContactedAt: string | null;
|
||||
lastStatusPushedAt: string | null;
|
||||
lastIntegrityCheckFailedAt: string | null;
|
||||
}
|
||||
|
||||
export interface CreateCmsInstanceRequest {
|
||||
name: string;
|
||||
url: string;
|
||||
apiKey: string;
|
||||
}
|
||||
|
||||
export interface UpdateCmsInstanceStatusRequest {
|
||||
status: CmsInstanceStatus;
|
||||
disableMessage: string | null;
|
||||
}
|
||||
|
||||
export interface UpdateStatusResult {
|
||||
success: boolean;
|
||||
slaveContactSuccess: boolean;
|
||||
}
|
||||
|
||||
export interface AvailabilityResponse {
|
||||
status: AvailabilityStatus;
|
||||
checkedAt: string; // ISO 8601
|
||||
|
||||
@@ -0,0 +1,54 @@
|
||||
import { renderHook, waitFor, act } from '@testing-library/react';
|
||||
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
|
||||
import { http, HttpResponse } from 'msw';
|
||||
import { createElement } from 'react';
|
||||
import { describe, expect, it, vi } from 'vitest';
|
||||
import { server } from '@/mocks/server';
|
||||
import { API_BASE } from '@/mocks/auth/fixtures';
|
||||
import { useAddCmsInstance } from './useAddCmsInstance';
|
||||
|
||||
function createWrapper() {
|
||||
const queryClient = new QueryClient({
|
||||
defaultOptions: { queries: { retry: false }, mutations: { retry: false } },
|
||||
});
|
||||
return ({ children }: { children: React.ReactNode }) =>
|
||||
createElement(QueryClientProvider, { client: queryClient }, children);
|
||||
}
|
||||
|
||||
const CMS_URL = `${API_BASE}/api/v1/CmsInstances`;
|
||||
|
||||
describe('useAddCmsInstance', () => {
|
||||
it('returns created instance on success', async () => {
|
||||
const { result } = renderHook(() => useAddCmsInstance(), { wrapper: createWrapper() });
|
||||
|
||||
await act(async () => {
|
||||
await result.current.mutateAsync({
|
||||
name: 'Test CMS',
|
||||
url: 'http://test.example.com',
|
||||
apiKey: 'secret',
|
||||
});
|
||||
});
|
||||
|
||||
await waitFor(() => expect(result.current.isSuccess).toBe(true));
|
||||
expect(result.current.data?.name).toBe('Test CMS');
|
||||
});
|
||||
|
||||
it('calls onError callback on HTTP 400', async () => {
|
||||
server.use(http.post(CMS_URL, () => HttpResponse.json({}, { status: 400 })));
|
||||
|
||||
const onError = vi.fn();
|
||||
const { result } = renderHook(() => useAddCmsInstance({ onError }), {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
await act(async () => {
|
||||
try {
|
||||
await result.current.mutateAsync({ name: 'X', url: 'http://x.com', apiKey: 'k' });
|
||||
} catch {
|
||||
// expected
|
||||
}
|
||||
});
|
||||
|
||||
await waitFor(() => expect(onError).toHaveBeenCalled());
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,14 @@
|
||||
import { useMutation, useQueryClient, type UseMutationOptions } from '@tanstack/react-query';
|
||||
import { api } from '@/lib/api-client';
|
||||
import type { CmsInstance, CreateCmsInstanceRequest } from './types';
|
||||
|
||||
export function useAddCmsInstance(
|
||||
options?: Pick<UseMutationOptions<CmsInstance, Error, CreateCmsInstanceRequest>, 'onError'>,
|
||||
) {
|
||||
const queryClient = useQueryClient();
|
||||
return useMutation<CmsInstance, Error, CreateCmsInstanceRequest>({
|
||||
mutationFn: (data) => api.post<CmsInstance>('/api/v1/CmsInstances', data),
|
||||
onSuccess: () => queryClient.invalidateQueries({ queryKey: ['cmsInstances'] }),
|
||||
...options,
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
import { renderHook, waitFor } from '@testing-library/react';
|
||||
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
|
||||
import { http, HttpResponse } from 'msw';
|
||||
import { createElement } from 'react';
|
||||
import { describe, expect, it } from 'vitest';
|
||||
import { server } from '@/mocks/server';
|
||||
import { API_BASE } from '@/mocks/auth/fixtures';
|
||||
import { getMockCmsInstances } from '@/mocks/cms/handlers';
|
||||
import { useCmsInstances } from './useCmsInstances';
|
||||
|
||||
function createWrapper() {
|
||||
const queryClient = new QueryClient({
|
||||
defaultOptions: { queries: { retry: false }, mutations: { retry: false } },
|
||||
});
|
||||
return ({ children }: { children: React.ReactNode }) =>
|
||||
createElement(QueryClientProvider, { client: queryClient }, children);
|
||||
}
|
||||
|
||||
const CMS_URL = `${API_BASE}/api/v1/CmsInstances`;
|
||||
|
||||
describe('useCmsInstances', () => {
|
||||
it('starts in loading state', () => {
|
||||
const { result } = renderHook(() => useCmsInstances(), { wrapper: createWrapper() });
|
||||
expect(result.current.isPending).toBe(true);
|
||||
});
|
||||
|
||||
it('returns the instances list on success', async () => {
|
||||
const { result } = renderHook(() => useCmsInstances(), { wrapper: createWrapper() });
|
||||
await waitFor(() => expect(result.current.isPending).toBe(false));
|
||||
|
||||
expect(result.current.isError).toBe(false);
|
||||
expect(result.current.data).toHaveLength(getMockCmsInstances().length);
|
||||
expect(result.current.data?.[0].name).toBe(getMockCmsInstances()[0].name);
|
||||
});
|
||||
|
||||
it('enters error state on network error', async () => {
|
||||
server.use(http.get(CMS_URL, () => HttpResponse.json({}, { status: 500 })));
|
||||
|
||||
const { result } = renderHook(() => useCmsInstances(), { wrapper: createWrapper() });
|
||||
await waitFor(() => expect(result.current.isPending).toBe(false));
|
||||
|
||||
expect(result.current.isError).toBe(true);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,11 @@
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { api } from '@/lib/api-client';
|
||||
import type { CmsInstance } from './types';
|
||||
|
||||
export function useCmsInstances() {
|
||||
return useQuery<CmsInstance[], Error>({
|
||||
queryKey: ['cmsInstances'],
|
||||
queryFn: () => api.get<CmsInstance[]>('/api/v1/CmsInstances'),
|
||||
staleTime: 30_000,
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,64 @@
|
||||
import { renderHook, waitFor, act } from '@testing-library/react';
|
||||
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
|
||||
import { http, HttpResponse } from 'msw';
|
||||
import { createElement } from 'react';
|
||||
import { describe, expect, it, vi } from 'vitest';
|
||||
import { server } from '@/mocks/server';
|
||||
import { API_BASE } from '@/mocks/auth/fixtures';
|
||||
import { useUpdateCmsInstanceStatus } from './useUpdateCmsInstanceStatus';
|
||||
|
||||
function createWrapper() {
|
||||
const queryClient = new QueryClient({
|
||||
defaultOptions: { queries: { retry: false }, mutations: { retry: false } },
|
||||
});
|
||||
return ({ children }: { children: React.ReactNode }) =>
|
||||
createElement(QueryClientProvider, { client: queryClient }, children);
|
||||
}
|
||||
|
||||
const INSTANCE_ID = 'aaaaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa';
|
||||
const STATUS_URL = `${API_BASE}/api/v1/CmsInstances/${INSTANCE_ID}/status`;
|
||||
|
||||
describe('useUpdateCmsInstanceStatus', () => {
|
||||
it('returns UpdateStatusResult on success', async () => {
|
||||
const onSuccess = vi.fn();
|
||||
const { result } = renderHook(() => useUpdateCmsInstanceStatus({ onSuccess }), {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
await act(async () => {
|
||||
await result.current.mutateAsync({
|
||||
id: INSTANCE_ID,
|
||||
status: 'NotAvailable',
|
||||
disableMessage: 'Under maintenance',
|
||||
});
|
||||
});
|
||||
|
||||
await waitFor(() => expect(onSuccess).toHaveBeenCalled());
|
||||
const callArg = onSuccess.mock.calls[0][0];
|
||||
expect(callArg.success).toBe(true);
|
||||
expect(callArg.slaveContactSuccess).toBe(true);
|
||||
});
|
||||
|
||||
it('calls onError on network failure', async () => {
|
||||
server.use(http.put(STATUS_URL, () => HttpResponse.json({}, { status: 500 })));
|
||||
|
||||
const onError = vi.fn();
|
||||
const { result } = renderHook(() => useUpdateCmsInstanceStatus({ onError }), {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
await act(async () => {
|
||||
try {
|
||||
await result.current.mutateAsync({
|
||||
id: INSTANCE_ID,
|
||||
status: 'Available',
|
||||
disableMessage: null,
|
||||
});
|
||||
} catch {
|
||||
// expected
|
||||
}
|
||||
});
|
||||
|
||||
await waitFor(() => expect(onError).toHaveBeenCalled());
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,20 @@
|
||||
import { useMutation, useQueryClient, type UseMutationOptions } from '@tanstack/react-query';
|
||||
import { api } from '@/lib/api-client';
|
||||
import type { UpdateCmsInstanceStatusRequest, UpdateStatusResult } from './types';
|
||||
|
||||
type UpdateVariables = { id: string } & UpdateCmsInstanceStatusRequest;
|
||||
|
||||
export function useUpdateCmsInstanceStatus(
|
||||
options?: Pick<UseMutationOptions<UpdateStatusResult, Error, UpdateVariables>, 'onSuccess' | 'onError'>,
|
||||
) {
|
||||
const queryClient = useQueryClient();
|
||||
return useMutation<UpdateStatusResult, Error, UpdateVariables>({
|
||||
mutationFn: ({ id, ...body }) =>
|
||||
api.put<UpdateStatusResult>(`/api/v1/CmsInstances/${id}/status`, body),
|
||||
onSuccess: (data, variables, context) => {
|
||||
queryClient.invalidateQueries({ queryKey: ['cmsInstances'] });
|
||||
options?.onSuccess?.(data, variables, context);
|
||||
},
|
||||
onError: options?.onError,
|
||||
});
|
||||
}
|
||||
@@ -1,4 +1,4 @@
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import { useQuery, useMutation, useQueryClient, type UseMutationOptions } from '@tanstack/react-query';
|
||||
import { api } from '@/lib/api-client';
|
||||
import type { UserListItem, InviteUserPayload, InviteUserResponse, ChangeRolePayload, UserRole } from './types';
|
||||
|
||||
@@ -10,11 +10,14 @@ export function useUsers() {
|
||||
});
|
||||
}
|
||||
|
||||
export function useInviteUser() {
|
||||
export function useInviteUser(
|
||||
options?: Pick<UseMutationOptions<InviteUserResponse, Error, InviteUserPayload>, 'onError'>,
|
||||
) {
|
||||
const queryClient = useQueryClient();
|
||||
return useMutation<InviteUserResponse, Error, InviteUserPayload>({
|
||||
mutationFn: (data) => api.post<InviteUserResponse>('/api/v1/Users/invite', data),
|
||||
onSuccess: () => queryClient.invalidateQueries({ queryKey: ['users'] }),
|
||||
...options,
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,71 @@
|
||||
import { beforeEach, describe, expect, it } from 'vitest';
|
||||
import { screen } from '@testing-library/react';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { http, HttpResponse } from 'msw';
|
||||
import { renderApp, mockAuthenticated } from '@/test/utils';
|
||||
import { server } from '@/mocks/server';
|
||||
import { API_BASE } from '@/mocks/auth/fixtures';
|
||||
import { resetMockCmsInstances } from '@/mocks/cms/handlers';
|
||||
import { _resetSetupStatusCache } from '@/router';
|
||||
|
||||
beforeEach(() => {
|
||||
_resetSetupStatusCache();
|
||||
resetMockCmsInstances();
|
||||
});
|
||||
|
||||
async function openDialog() {
|
||||
mockAuthenticated();
|
||||
renderApp('/cms');
|
||||
await screen.findByTestId('cms-add-button', {}, { timeout: 5000 });
|
||||
await userEvent.click(screen.getByTestId('cms-add-button'));
|
||||
expect(screen.getByTestId('add-cms-name')).toBeInTheDocument();
|
||||
}
|
||||
|
||||
describe('AddCmsInstanceDialog', () => {
|
||||
it('shows name, url and apiKey fields on open', async () => {
|
||||
await openDialog();
|
||||
expect(screen.getByTestId('add-cms-name')).toBeInTheDocument();
|
||||
expect(screen.getByTestId('add-cms-url')).toBeInTheDocument();
|
||||
expect(screen.getByTestId('add-cms-apikey-input')).toBeInTheDocument();
|
||||
expect(screen.getByTestId('add-cms-submit')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows field error when name is empty', async () => {
|
||||
await openDialog();
|
||||
await userEvent.click(screen.getByTestId('add-cms-url'));
|
||||
await userEvent.click(screen.getByTestId('add-cms-name'));
|
||||
await userEvent.tab();
|
||||
expect(await screen.findByTestId('add-cms-name-error')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows field error when URL has no protocol', async () => {
|
||||
await openDialog();
|
||||
await userEvent.type(screen.getByTestId('add-cms-url'), 'cms.example.com');
|
||||
await userEvent.tab();
|
||||
expect(await screen.findByTestId('add-cms-url-error')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows FormErrorBanner on HTTP 400', async () => {
|
||||
server.use(
|
||||
http.post(`${API_BASE}/api/v1/CmsInstances`, () =>
|
||||
HttpResponse.json({ title: 'Bad Request' }, { status: 400 }),
|
||||
),
|
||||
);
|
||||
await openDialog();
|
||||
await userEvent.type(screen.getByTestId('add-cms-name'), 'CMS');
|
||||
await userEvent.type(screen.getByTestId('add-cms-url'), 'http://example.com');
|
||||
await userEvent.type(screen.getByTestId('add-cms-apikey-input'), 'key');
|
||||
await userEvent.click(screen.getByTestId('add-cms-submit'));
|
||||
|
||||
expect(await screen.findByTestId('form-error-banner')).toBeInTheDocument();
|
||||
expect(screen.getByTestId('add-cms-name')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('resets form when dialog is closed and reopened', async () => {
|
||||
await openDialog();
|
||||
await userEvent.type(screen.getByTestId('add-cms-name'), 'Typed value');
|
||||
await userEvent.keyboard('{Escape}');
|
||||
await userEvent.click(screen.getByTestId('cms-add-button'));
|
||||
expect((screen.getByTestId('add-cms-name') as HTMLInputElement).value).toBe('');
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,138 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import { toast } from 'sonner';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { PasswordField } from '@/components/ui/PasswordField';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from '@/components/ui/dialog';
|
||||
import { FormErrorBanner } from '@/components/ui/FormErrorBanner';
|
||||
import { FieldError } from '@/components/ui/FieldError';
|
||||
import { useAddCmsInstance } from '@/api/useAddCmsInstance';
|
||||
import { NetworkError, ProblemDetailsError } from '@/lib/api-client';
|
||||
import { addCmsInstanceSchema, type AddCmsInstanceFormData } from '@/lib/schemas/cms';
|
||||
|
||||
interface AddCmsInstanceDialogProps {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
}
|
||||
|
||||
export function AddCmsInstanceDialog({ open, onOpenChange }: AddCmsInstanceDialogProps) {
|
||||
const { t } = useTranslation();
|
||||
const [serverError, setServerError] = useState<string | null>(null);
|
||||
|
||||
const addInstance = useAddCmsInstance({
|
||||
onError: (err) => {
|
||||
if (err instanceof ProblemDetailsError && err.status === 409) {
|
||||
setServerError(t('cms.add.errors.conflict'));
|
||||
} else if (err instanceof NetworkError) {
|
||||
setServerError(t('errors.network'));
|
||||
} else {
|
||||
setServerError(t('errors.generic'));
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
reset,
|
||||
formState: { errors, isSubmitting },
|
||||
} = useForm<AddCmsInstanceFormData>({
|
||||
resolver: zodResolver(addCmsInstanceSchema),
|
||||
mode: 'onTouched',
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) {
|
||||
setServerError(null);
|
||||
addInstance.reset();
|
||||
reset();
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [open]);
|
||||
|
||||
const onSubmit = handleSubmit(async (values) => {
|
||||
setServerError(null);
|
||||
try {
|
||||
await addInstance.mutateAsync(values);
|
||||
toast.success(t('cms.add.successToast'));
|
||||
onOpenChange(false);
|
||||
} catch {
|
||||
// error shown via serverError state
|
||||
}
|
||||
});
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="sm:max-w-md">
|
||||
<DialogHeader>
|
||||
<DialogTitle>{t('cms.add.title')}</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<form onSubmit={onSubmit} noValidate className="space-y-4">
|
||||
<FormErrorBanner
|
||||
error={serverError !== null ? { message: serverError } : null}
|
||||
onDismiss={() => setServerError(null)}
|
||||
/>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="add-cms-name">{t('cms.add.nameLabel')}</Label>
|
||||
<Input
|
||||
id="add-cms-name"
|
||||
type="text"
|
||||
data-testid="add-cms-name"
|
||||
aria-invalid={errors.name !== undefined}
|
||||
{...register('name')}
|
||||
/>
|
||||
{errors.name && (
|
||||
<FieldError message={errors.name.message} testId="add-cms-name-error" />
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="add-cms-url">{t('cms.add.urlLabel')}</Label>
|
||||
<Input
|
||||
id="add-cms-url"
|
||||
type="text"
|
||||
placeholder="http://cms.example.com"
|
||||
data-testid="add-cms-url"
|
||||
aria-invalid={errors.url !== undefined}
|
||||
{...register('url')}
|
||||
/>
|
||||
{errors.url && (
|
||||
<FieldError message={errors.url.message} testId="add-cms-url-error" />
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="add-cms-apikey">{t('cms.add.apiKeyLabel')}</Label>
|
||||
<PasswordField
|
||||
id="add-cms-apikey"
|
||||
{...register('apiKey')}
|
||||
/>
|
||||
{errors.apiKey && (
|
||||
<FieldError message={errors.apiKey.message} testId="add-cms-apikey-error" />
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
className="w-full"
|
||||
disabled={isSubmitting || addInstance.isPending}
|
||||
data-testid="add-cms-submit"
|
||||
>
|
||||
{isSubmitting || addInstance.isPending ? '…' : t('cms.add.submitButton')}
|
||||
</Button>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,97 @@
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { MoreHorizontal } from 'lucide-react';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from '@/components/ui/table';
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from '@/components/ui/dropdown-menu';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import type { CmsInstance, CmsInstanceStatus } from '@/api/types';
|
||||
|
||||
function statusBadgeVariant(status: CmsInstanceStatus) {
|
||||
if (status === 'Available') return 'secondary';
|
||||
if (status === 'NotAvailable') return 'destructive';
|
||||
return 'outline';
|
||||
}
|
||||
|
||||
function formatDate(iso: string | null): string {
|
||||
if (!iso) return '—';
|
||||
return new Date(iso).toLocaleString(undefined, { dateStyle: 'medium', timeStyle: 'short' });
|
||||
}
|
||||
|
||||
interface CmsInstanceListProps {
|
||||
instances: CmsInstance[];
|
||||
onSetStatus: (instance: CmsInstance) => void;
|
||||
}
|
||||
|
||||
export function CmsInstanceList({ instances, onSetStatus }: CmsInstanceListProps) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>{t('cms.table.name')}</TableHead>
|
||||
<TableHead>{t('cms.table.url')}</TableHead>
|
||||
<TableHead>{t('cms.table.status')}</TableHead>
|
||||
<TableHead>{t('cms.table.lastContact')}</TableHead>
|
||||
<TableHead>{t('cms.table.disableMessage')}</TableHead>
|
||||
<TableHead>{t('cms.table.actions')}</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{instances.map((instance) => (
|
||||
<TableRow
|
||||
key={instance.id}
|
||||
data-testid="cms-instance-row"
|
||||
className={instance.status === 'Inactive' ? 'opacity-50' : ''}
|
||||
>
|
||||
<TableCell>{instance.name}</TableCell>
|
||||
<TableCell>{instance.url}</TableCell>
|
||||
<TableCell>
|
||||
<Badge
|
||||
variant={statusBadgeVariant(instance.status)}
|
||||
data-testid="cms-instance-status-badge"
|
||||
>
|
||||
{t(`cms.status.${instance.status}`)}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell>{formatDate(instance.lastContactedAt)}</TableCell>
|
||||
<TableCell>{instance.disableMessage ?? '—'}</TableCell>
|
||||
<TableCell>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
data-testid="cms-instance-actions-trigger"
|
||||
>
|
||||
<MoreHorizontal className="size-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem
|
||||
data-testid="cms-instance-set-status"
|
||||
onClick={() => onSetStatus(instance)}
|
||||
>
|
||||
{t('cms.actions.setStatus')}
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
import { beforeEach, describe, expect, it } from 'vitest';
|
||||
import { screen } from '@testing-library/react';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { renderApp, mockAuthenticated } from '@/test/utils';
|
||||
import { resetMockCmsInstances } from '@/mocks/cms/handlers';
|
||||
import { _resetSetupStatusCache } from '@/router';
|
||||
|
||||
beforeEach(() => {
|
||||
_resetSetupStatusCache();
|
||||
resetMockCmsInstances();
|
||||
});
|
||||
|
||||
async function openSetStatusDialog() {
|
||||
mockAuthenticated();
|
||||
renderApp('/cms');
|
||||
const triggers = await screen.findAllByTestId('cms-instance-actions-trigger', {}, { timeout: 5000 });
|
||||
await userEvent.click(triggers[0]);
|
||||
await userEvent.click(await screen.findByTestId('cms-instance-set-status'));
|
||||
expect(screen.getByTestId('set-status-select')).toBeInTheDocument();
|
||||
}
|
||||
|
||||
describe('SetStatusDialog', () => {
|
||||
it('opens with status select and submit button', async () => {
|
||||
await openSetStatusDialog();
|
||||
expect(screen.getByTestId('set-status-select')).toBeInTheDocument();
|
||||
expect(screen.getByTestId('set-status-submit')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('does not show DisableMessage field when status is Available', async () => {
|
||||
await openSetStatusDialog();
|
||||
expect(screen.queryByTestId('set-status-disable-message')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows DisableMessage field when NotAvailable is selected', async () => {
|
||||
await openSetStatusDialog();
|
||||
await userEvent.click(screen.getByTestId('set-status-select'));
|
||||
await userEvent.click(await screen.findByRole('option', { name: 'Unavailable' }));
|
||||
expect(await screen.findByTestId('set-status-disable-message')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('blocks submit when NotAvailable is selected but DisableMessage is empty', async () => {
|
||||
await openSetStatusDialog();
|
||||
await userEvent.click(screen.getByTestId('set-status-select'));
|
||||
await userEvent.click(await screen.findByRole('option', { name: 'Unavailable' }));
|
||||
await screen.findByTestId('set-status-disable-message');
|
||||
await userEvent.click(screen.getByTestId('set-status-submit'));
|
||||
expect(await screen.findByTestId('set-status-disable-message-error')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,181 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useForm, Controller } from 'react-hook-form';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import { toast } from 'sonner';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from '@/components/ui/dialog';
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select';
|
||||
import { FormErrorBanner } from '@/components/ui/FormErrorBanner';
|
||||
import { FieldError } from '@/components/ui/FieldError';
|
||||
import { useUpdateCmsInstanceStatus } from '@/api/useUpdateCmsInstanceStatus';
|
||||
import { NetworkError } from '@/lib/api-client';
|
||||
import { setStatusSchema, type SetStatusFormData } from '@/lib/schemas/cms';
|
||||
import type { CmsInstance, CmsInstanceStatus } from '@/api/types';
|
||||
|
||||
interface SetStatusDialogProps {
|
||||
instance: CmsInstance | null;
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
}
|
||||
|
||||
const statusOptions: CmsInstanceStatus[] = ['Available', 'NotAvailable', 'Inactive'];
|
||||
|
||||
export function SetStatusDialog({ instance, open, onOpenChange }: SetStatusDialogProps) {
|
||||
const { t } = useTranslation();
|
||||
const [serverError, setServerError] = useState<string | null>(null);
|
||||
|
||||
const updateStatus = useUpdateCmsInstanceStatus({
|
||||
onSuccess: (result) => {
|
||||
if (result.slaveContactSuccess) {
|
||||
toast.success(t('cms.setStatus.successContactedToast'));
|
||||
} else {
|
||||
toast.success(t('cms.setStatus.successUnreachableToast'));
|
||||
}
|
||||
onOpenChange(false);
|
||||
},
|
||||
onError: (err) => {
|
||||
if (err instanceof NetworkError) {
|
||||
setServerError(t('errors.network'));
|
||||
} else {
|
||||
setServerError(t('errors.generic'));
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
control,
|
||||
watch,
|
||||
reset,
|
||||
formState: { errors, isSubmitting },
|
||||
} = useForm<SetStatusFormData>({
|
||||
resolver: zodResolver(setStatusSchema),
|
||||
mode: 'onTouched',
|
||||
defaultValues: { status: 'Available', disableMessage: '' },
|
||||
});
|
||||
|
||||
const selectedStatus = watch('status');
|
||||
|
||||
useEffect(() => {
|
||||
if (!open || !instance) {
|
||||
setServerError(null);
|
||||
updateStatus.reset();
|
||||
reset({ status: 'Available', disableMessage: '' });
|
||||
} else {
|
||||
reset({
|
||||
status: instance.status,
|
||||
disableMessage: instance.disableMessage ?? '',
|
||||
});
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [open, instance]);
|
||||
|
||||
const onSubmit = handleSubmit(async (values) => {
|
||||
if (!instance) return;
|
||||
setServerError(null);
|
||||
try {
|
||||
await updateStatus.mutateAsync({
|
||||
id: instance.id,
|
||||
status: values.status,
|
||||
disableMessage: values.status === 'NotAvailable' ? (values.disableMessage ?? null) : null,
|
||||
});
|
||||
} catch {
|
||||
// error shown via serverError state
|
||||
}
|
||||
});
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="sm:max-w-md">
|
||||
<DialogHeader>
|
||||
<DialogTitle>{t('cms.setStatus.title')}</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<form onSubmit={onSubmit} noValidate className="space-y-4">
|
||||
<FormErrorBanner
|
||||
error={serverError !== null ? { message: serverError } : null}
|
||||
onDismiss={() => setServerError(null)}
|
||||
/>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="set-status-status">{t('cms.setStatus.statusLabel')}</Label>
|
||||
<Controller
|
||||
name="status"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<Select
|
||||
value={field.value}
|
||||
onValueChange={(val) => field.onChange(val as CmsInstanceStatus)}
|
||||
>
|
||||
<SelectTrigger
|
||||
id="set-status-status"
|
||||
data-testid="set-status-select"
|
||||
aria-invalid={errors.status !== undefined}
|
||||
>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{statusOptions.map((s) => (
|
||||
<SelectItem key={s} value={s}>
|
||||
{t(`cms.status.${s}`)}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
)}
|
||||
/>
|
||||
{errors.status && (
|
||||
<FieldError message={errors.status.message} testId="set-status-status-error" />
|
||||
)}
|
||||
</div>
|
||||
|
||||
{selectedStatus === 'NotAvailable' && (
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="set-status-disable-message">
|
||||
{t('cms.setStatus.disableMessageLabel')}
|
||||
</Label>
|
||||
<Input
|
||||
id="set-status-disable-message"
|
||||
type="text"
|
||||
placeholder={t('cms.setStatus.disableMessagePlaceholder')}
|
||||
data-testid="set-status-disable-message"
|
||||
aria-invalid={errors.disableMessage !== undefined}
|
||||
{...register('disableMessage')}
|
||||
/>
|
||||
{errors.disableMessage && (
|
||||
<FieldError
|
||||
message={errors.disableMessage.message}
|
||||
testId="set-status-disable-message-error"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
className="w-full"
|
||||
disabled={isSubmitting || updateStatus.isPending}
|
||||
data-testid="set-status-submit"
|
||||
>
|
||||
{isSubmitting || updateStatus.isPending ? '…' : t('cms.setStatus.submitButton')}
|
||||
</Button>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
@@ -1,7 +1,6 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import { z } from 'zod';
|
||||
import { toast } from 'sonner';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Button } from '@/components/ui/button';
|
||||
@@ -23,12 +22,8 @@ import {
|
||||
import { FormErrorBanner } from '@/components/ui/FormErrorBanner';
|
||||
import { FieldError } from '@/components/ui/FieldError';
|
||||
import { useInviteUser } from '@/api/useUsers';
|
||||
|
||||
const inviteSchema = z.object({
|
||||
email: z.string().email(),
|
||||
role: z.enum(['Administrator', 'User']),
|
||||
});
|
||||
type InviteFormData = z.infer<typeof inviteSchema>;
|
||||
import { inviteUserSchema, type InviteUserFormData } from '@/lib/schemas/users';
|
||||
import { NetworkError } from '@/lib/api-client';
|
||||
|
||||
interface InviteUserDialogProps {
|
||||
open: boolean;
|
||||
@@ -39,12 +34,22 @@ export function InviteUserDialog({ open, onOpenChange }: InviteUserDialogProps)
|
||||
const { t } = useTranslation();
|
||||
const [step, setStep] = useState<1 | 2>(1);
|
||||
const [inviteLink, setInviteLink] = useState<string | null>(null);
|
||||
const inviteUser = useInviteUser();
|
||||
const [serverError, setServerError] = useState<string | null>(null);
|
||||
const inviteUser = useInviteUser({
|
||||
onError: (err) => {
|
||||
if (err instanceof NetworkError) {
|
||||
setServerError(t('errors.network'));
|
||||
} else {
|
||||
setServerError(t('errors.generic'));
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) {
|
||||
setStep(1);
|
||||
setInviteLink(null);
|
||||
setServerError(null);
|
||||
inviteUser.reset();
|
||||
reset();
|
||||
}
|
||||
@@ -57,17 +62,18 @@ export function InviteUserDialog({ open, onOpenChange }: InviteUserDialogProps)
|
||||
setValue,
|
||||
reset,
|
||||
formState: { errors, isSubmitting },
|
||||
} = useForm<InviteFormData>({
|
||||
resolver: zodResolver(inviteSchema),
|
||||
} = useForm<InviteUserFormData>({
|
||||
resolver: zodResolver(inviteUserSchema),
|
||||
});
|
||||
|
||||
const onSubmit = handleSubmit(async (values) => {
|
||||
setServerError(null);
|
||||
try {
|
||||
const response = await inviteUser.mutateAsync(values);
|
||||
setInviteLink(response.inviteLink);
|
||||
setStep(2);
|
||||
} catch {
|
||||
// error shown via inviteUser.error
|
||||
// error shown via serverError state
|
||||
}
|
||||
});
|
||||
|
||||
@@ -89,8 +95,8 @@ export function InviteUserDialog({ open, onOpenChange }: InviteUserDialogProps)
|
||||
{step === 1 && (
|
||||
<form onSubmit={onSubmit} noValidate className="space-y-4">
|
||||
<FormErrorBanner
|
||||
error={inviteUser.error ? { message: inviteUser.error.message } : null}
|
||||
onDismiss={() => inviteUser.reset()}
|
||||
error={serverError !== null ? { message: serverError } : null}
|
||||
onDismiss={() => setServerError(null)}
|
||||
/>
|
||||
|
||||
<div className="space-y-2">
|
||||
|
||||
@@ -184,8 +184,48 @@
|
||||
"branding": { "title": "Branding / Theme", "comingSoon": "Coming soon" }
|
||||
},
|
||||
"cms": {
|
||||
"title": "Content Management System",
|
||||
"description": "This is where you will manage your CMS content. This feature is coming soon."
|
||||
"title": "CMS Instances",
|
||||
"addButton": "Add CMS",
|
||||
"emptyState": {
|
||||
"heading": "No CMS instances yet",
|
||||
"description": "Add your first CMS instance to get started."
|
||||
},
|
||||
"table": {
|
||||
"name": "Name",
|
||||
"url": "URL",
|
||||
"status": "Status",
|
||||
"lastContact": "Last Contact",
|
||||
"disableMessage": "Disable Message",
|
||||
"actions": "Actions"
|
||||
},
|
||||
"status": {
|
||||
"Available": "Available",
|
||||
"NotAvailable": "Unavailable",
|
||||
"Inactive": "Inactive"
|
||||
},
|
||||
"actions": {
|
||||
"setStatus": "Set Status"
|
||||
},
|
||||
"add": {
|
||||
"title": "Add CMS Instance",
|
||||
"nameLabel": "Name",
|
||||
"urlLabel": "URL",
|
||||
"apiKeyLabel": "API Key",
|
||||
"submitButton": "Add",
|
||||
"successToast": "CMS instance added successfully",
|
||||
"errors": {
|
||||
"conflict": "A CMS instance with this name or URL already exists."
|
||||
}
|
||||
},
|
||||
"setStatus": {
|
||||
"title": "Set Status",
|
||||
"statusLabel": "Status",
|
||||
"disableMessageLabel": "Disable Message",
|
||||
"disableMessagePlaceholder": "Reason for disabling…",
|
||||
"submitButton": "Save",
|
||||
"successContactedToast": "Status updated — cliënt confirmed",
|
||||
"successUnreachableToast": "Status saved — cliënt unreachable"
|
||||
}
|
||||
},
|
||||
"error": {
|
||||
"403": {
|
||||
|
||||
@@ -184,8 +184,48 @@
|
||||
"branding": { "title": "Huisstijl / Thema", "comingSoon": "Binnenkort beschikbaar" }
|
||||
},
|
||||
"cms": {
|
||||
"title": "Content Management Systeem",
|
||||
"description": "Hier beheert u straks uw CMS-inhoud. Deze functie is binnenkort beschikbaar."
|
||||
"title": "CMS-instanties",
|
||||
"addButton": "CMS toevoegen",
|
||||
"emptyState": {
|
||||
"heading": "Nog geen CMS-instanties",
|
||||
"description": "Voeg uw eerste CMS-instantie toe om aan de slag te gaan."
|
||||
},
|
||||
"table": {
|
||||
"name": "Naam",
|
||||
"url": "URL",
|
||||
"status": "Status",
|
||||
"lastContact": "Laatste contact",
|
||||
"disableMessage": "Uitschakelreden",
|
||||
"actions": "Acties"
|
||||
},
|
||||
"status": {
|
||||
"Available": "Beschikbaar",
|
||||
"NotAvailable": "Niet beschikbaar",
|
||||
"Inactive": "Inactief"
|
||||
},
|
||||
"actions": {
|
||||
"setStatus": "Status instellen"
|
||||
},
|
||||
"add": {
|
||||
"title": "CMS-instantie toevoegen",
|
||||
"nameLabel": "Naam",
|
||||
"urlLabel": "URL",
|
||||
"apiKeyLabel": "API-sleutel",
|
||||
"submitButton": "Toevoegen",
|
||||
"successToast": "CMS-instantie succesvol toegevoegd",
|
||||
"errors": {
|
||||
"conflict": "Er bestaat al een CMS-instantie met deze naam of URL."
|
||||
}
|
||||
},
|
||||
"setStatus": {
|
||||
"title": "Status instellen",
|
||||
"statusLabel": "Status",
|
||||
"disableMessageLabel": "Uitschakelreden",
|
||||
"disableMessagePlaceholder": "Reden voor uitschakelen…",
|
||||
"submitButton": "Opslaan",
|
||||
"successContactedToast": "Status bijgewerkt — cliënt bevestigd",
|
||||
"successUnreachableToast": "Status opgeslagen — cliënt niet bereikbaar"
|
||||
}
|
||||
},
|
||||
"error": {
|
||||
"403": {
|
||||
|
||||
@@ -0,0 +1,69 @@
|
||||
import { describe, expect, it } from 'vitest';
|
||||
import { addCmsInstanceSchema, setStatusSchema } from './cms';
|
||||
|
||||
describe('addCmsInstanceSchema', () => {
|
||||
it('accepts valid data', () => {
|
||||
const result = addCmsInstanceSchema.safeParse({
|
||||
name: 'My CMS',
|
||||
url: 'http://192.168.1.5:8080',
|
||||
apiKey: 'secret-key',
|
||||
});
|
||||
expect(result.success).toBe(true);
|
||||
});
|
||||
|
||||
it('accepts https URLs', () => {
|
||||
const result = addCmsInstanceSchema.safeParse({
|
||||
name: 'My CMS',
|
||||
url: 'https://cms.example.com',
|
||||
apiKey: 'secret-key',
|
||||
});
|
||||
expect(result.success).toBe(true);
|
||||
});
|
||||
|
||||
it('rejects missing name', () => {
|
||||
const result = addCmsInstanceSchema.safeParse({ name: '', url: 'http://example.com', apiKey: 'k' });
|
||||
expect(result.success).toBe(false);
|
||||
});
|
||||
|
||||
it('rejects URL without protocol', () => {
|
||||
const result = addCmsInstanceSchema.safeParse({ name: 'CMS', url: 'cms.example.com', apiKey: 'k' });
|
||||
expect(result.success).toBe(false);
|
||||
});
|
||||
|
||||
it('rejects bare IP without protocol', () => {
|
||||
const result = addCmsInstanceSchema.safeParse({ name: 'CMS', url: '192.168.1.5:8080', apiKey: 'k' });
|
||||
expect(result.success).toBe(false);
|
||||
});
|
||||
|
||||
it('rejects missing apiKey', () => {
|
||||
const result = addCmsInstanceSchema.safeParse({ name: 'CMS', url: 'http://example.com', apiKey: '' });
|
||||
expect(result.success).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
describe('setStatusSchema', () => {
|
||||
it('accepts Available without disableMessage', () => {
|
||||
const result = setStatusSchema.safeParse({ status: 'Available' });
|
||||
expect(result.success).toBe(true);
|
||||
});
|
||||
|
||||
it('accepts Inactive without disableMessage', () => {
|
||||
const result = setStatusSchema.safeParse({ status: 'Inactive' });
|
||||
expect(result.success).toBe(true);
|
||||
});
|
||||
|
||||
it('accepts NotAvailable with a disableMessage', () => {
|
||||
const result = setStatusSchema.safeParse({ status: 'NotAvailable', disableMessage: 'System down' });
|
||||
expect(result.success).toBe(true);
|
||||
});
|
||||
|
||||
it('rejects NotAvailable without disableMessage', () => {
|
||||
const result = setStatusSchema.safeParse({ status: 'NotAvailable' });
|
||||
expect(result.success).toBe(false);
|
||||
});
|
||||
|
||||
it('rejects NotAvailable with blank disableMessage', () => {
|
||||
const result = setStatusSchema.safeParse({ status: 'NotAvailable', disableMessage: ' ' });
|
||||
expect(result.success).toBe(false);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,25 @@
|
||||
import { z } from 'zod';
|
||||
|
||||
export const addCmsInstanceSchema = z.object({
|
||||
name: z.string().min(1, 'Name is required').max(255, 'Name must be 255 characters or fewer'),
|
||||
url: z.string().url('Must be a valid URL (include http:// or https://)'),
|
||||
apiKey: z.string().min(1, 'API key is required'),
|
||||
});
|
||||
|
||||
export type AddCmsInstanceFormData = z.infer<typeof addCmsInstanceSchema>;
|
||||
|
||||
export const setStatusSchema = z
|
||||
.object({
|
||||
status: z.enum(['Available', 'NotAvailable', 'Inactive']),
|
||||
disableMessage: z.string().optional(),
|
||||
})
|
||||
.refine(
|
||||
(data) =>
|
||||
data.status !== 'NotAvailable' || (data.disableMessage?.trim().length ?? 0) > 0,
|
||||
{
|
||||
message: 'Disable message is required when status is Not Available',
|
||||
path: ['disableMessage'],
|
||||
},
|
||||
);
|
||||
|
||||
export type SetStatusFormData = z.infer<typeof setStatusSchema>;
|
||||
@@ -0,0 +1,24 @@
|
||||
import { describe, expect, it } from 'vitest';
|
||||
import { inviteUserSchema } from './users';
|
||||
|
||||
describe('inviteUserSchema', () => {
|
||||
it('accepts valid email and role', () => {
|
||||
const result = inviteUserSchema.safeParse({ email: 'user@example.com', role: 'Administrator' });
|
||||
expect(result.success).toBe(true);
|
||||
});
|
||||
|
||||
it('rejects invalid email', () => {
|
||||
const result = inviteUserSchema.safeParse({ email: 'not-an-email', role: 'User' });
|
||||
expect(result.success).toBe(false);
|
||||
});
|
||||
|
||||
it('rejects missing role', () => {
|
||||
const result = inviteUserSchema.safeParse({ email: 'user@example.com' });
|
||||
expect(result.success).toBe(false);
|
||||
});
|
||||
|
||||
it('rejects invalid role value', () => {
|
||||
const result = inviteUserSchema.safeParse({ email: 'user@example.com', role: 'Owner' });
|
||||
expect(result.success).toBe(false);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,8 @@
|
||||
import { z } from 'zod';
|
||||
|
||||
export const inviteUserSchema = z.object({
|
||||
email: z.string().email(),
|
||||
role: z.enum(['Administrator', 'User']),
|
||||
});
|
||||
|
||||
export type InviteUserFormData = z.infer<typeof inviteUserSchema>;
|
||||
@@ -0,0 +1,66 @@
|
||||
import { http, HttpResponse } from 'msw';
|
||||
import type { CmsInstance, UpdateStatusResult } from '@/api/types';
|
||||
import { API_BASE } from '../auth/fixtures';
|
||||
|
||||
const seed: CmsInstance[] = [
|
||||
{
|
||||
id: 'aaaaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa',
|
||||
name: 'Main CMS',
|
||||
url: 'http://cms.example.com',
|
||||
status: 'Available',
|
||||
disableMessage: null,
|
||||
lastContactedAt: '2026-06-30T10:00:00.000Z',
|
||||
lastStatusPushedAt: '2026-06-30T10:00:00.000Z',
|
||||
lastIntegrityCheckFailedAt: null,
|
||||
},
|
||||
{
|
||||
id: 'bbbbbbbb-bbbb-bbbb-bbbb-bbbbbbbbbbbb',
|
||||
name: 'Legacy CMS',
|
||||
url: 'http://legacy.example.com',
|
||||
status: 'Inactive',
|
||||
disableMessage: null,
|
||||
lastContactedAt: null,
|
||||
lastStatusPushedAt: null,
|
||||
lastIntegrityCheckFailedAt: null,
|
||||
},
|
||||
];
|
||||
|
||||
let mockCmsInstances: CmsInstance[] = [...seed];
|
||||
|
||||
export const resetMockCmsInstances = () => {
|
||||
mockCmsInstances = [...seed];
|
||||
};
|
||||
|
||||
export const getMockCmsInstances = () => mockCmsInstances;
|
||||
|
||||
export const cmsHandlers = [
|
||||
http.get(`${API_BASE}/api/v1/CmsInstances`, () => HttpResponse.json(mockCmsInstances)),
|
||||
|
||||
http.post(`${API_BASE}/api/v1/CmsInstances`, async ({ request }) => {
|
||||
const body = (await request.json()) as { name: string; url: string; apiKey: string };
|
||||
const newInstance: CmsInstance = {
|
||||
id: crypto.randomUUID(),
|
||||
name: body.name,
|
||||
url: body.url,
|
||||
status: 'Available',
|
||||
disableMessage: null,
|
||||
lastContactedAt: null,
|
||||
lastStatusPushedAt: null,
|
||||
lastIntegrityCheckFailedAt: null,
|
||||
};
|
||||
mockCmsInstances = [...mockCmsInstances, newInstance];
|
||||
return HttpResponse.json(newInstance, { status: 201 });
|
||||
}),
|
||||
|
||||
http.put(`${API_BASE}/api/v1/CmsInstances/:id/status`, async ({ params, request }) => {
|
||||
const { id } = params as { id: string };
|
||||
const body = (await request.json()) as { status: CmsInstance['status']; disableMessage: string | null };
|
||||
mockCmsInstances = mockCmsInstances.map((instance) =>
|
||||
instance.id === id
|
||||
? { ...instance, status: body.status, disableMessage: body.disableMessage }
|
||||
: instance,
|
||||
);
|
||||
const result: UpdateStatusResult = { success: true, slaveContactSuccess: true };
|
||||
return HttpResponse.json(result);
|
||||
}),
|
||||
];
|
||||
@@ -3,13 +3,15 @@ import { userHandlers } from './users/handlers';
|
||||
import { setupHandlers } from './setup/handlers';
|
||||
import { invitationHandlers } from './invitation/handlers';
|
||||
import { availabilityHandlers } from './availability/handlers';
|
||||
import { cmsHandlers } from './cms/handlers';
|
||||
|
||||
/** All default MSW handlers, composed from feature folders (Q3-B). */
|
||||
export const handlers = [...authHandlers, ...userHandlers, ...setupHandlers, ...invitationHandlers, ...availabilityHandlers];
|
||||
export const handlers = [...authHandlers, ...userHandlers, ...setupHandlers, ...invitationHandlers, ...availabilityHandlers, ...cmsHandlers];
|
||||
|
||||
export { authHandlers } from './auth/handlers';
|
||||
export { userHandlers } from './users/handlers';
|
||||
export { setupHandlers, setupUninitializedHandlers, setupConflictHandlers, setupNetworkErrorHandlers } from './setup/handlers';
|
||||
export { invitationHandlers } from './invitation/handlers';
|
||||
export { availabilityHandlers } from './availability/handlers';
|
||||
export { cmsHandlers, resetMockCmsInstances, getMockCmsInstances } from './cms/handlers';
|
||||
export * from './auth/fixtures';
|
||||
|
||||
@@ -1,19 +1,70 @@
|
||||
import { beforeEach, describe, expect, it } from 'vitest';
|
||||
import { screen } from '@testing-library/react';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { http, HttpResponse } from 'msw';
|
||||
import { renderApp, mockAuthenticated, mockGuest } from '@/test/utils';
|
||||
import { server } from '@/mocks/server';
|
||||
import { API_BASE } from '@/mocks/auth/fixtures';
|
||||
import { resetMockCmsInstances } from '@/mocks/cms/handlers';
|
||||
import { _resetSetupStatusCache } from '@/router';
|
||||
|
||||
beforeEach(() => {
|
||||
_resetSetupStatusCache();
|
||||
resetMockCmsInstances();
|
||||
});
|
||||
|
||||
const CMS_URL = `${API_BASE}/api/v1/CmsInstances`;
|
||||
|
||||
describe('CmsPage', () => {
|
||||
it('renders the CMS page title and placeholder', async () => {
|
||||
it('renders the page title and Add button', async () => {
|
||||
mockAuthenticated();
|
||||
renderApp('/cms');
|
||||
|
||||
expect(await screen.findByTestId('cms-title', {}, { timeout: 5000 })).toBeInTheDocument();
|
||||
expect(screen.getByTestId('cms-placeholder')).toBeInTheDocument();
|
||||
expect(screen.getByTestId('cms-add-button')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders list of CMS instances from seed data', async () => {
|
||||
mockAuthenticated();
|
||||
renderApp('/cms');
|
||||
|
||||
const rows = await screen.findAllByTestId('cms-instance-row', {}, { timeout: 5000 });
|
||||
expect(rows.length).toBe(2);
|
||||
});
|
||||
|
||||
it('renders empty state when no instances exist', async () => {
|
||||
mockAuthenticated();
|
||||
server.use(http.get(CMS_URL, () => HttpResponse.json([])));
|
||||
renderApp('/cms');
|
||||
|
||||
expect(await screen.findByTestId('cms-empty-state', {}, { timeout: 5000 })).toBeInTheDocument();
|
||||
expect(screen.getByTestId('cms-empty-add-button')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('opens AddCmsInstanceDialog when Add button is clicked', async () => {
|
||||
mockAuthenticated();
|
||||
renderApp('/cms');
|
||||
|
||||
await screen.findByTestId('cms-add-button', {}, { timeout: 5000 });
|
||||
await userEvent.click(screen.getByTestId('cms-add-button'));
|
||||
|
||||
expect(await screen.findByTestId('add-cms-name')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('adds a CMS instance successfully', async () => {
|
||||
mockAuthenticated();
|
||||
renderApp('/cms');
|
||||
|
||||
await screen.findByTestId('cms-add-button', {}, { timeout: 5000 });
|
||||
await userEvent.click(screen.getByTestId('cms-add-button'));
|
||||
|
||||
await userEvent.type(screen.getByTestId('add-cms-name'), 'New CMS');
|
||||
await userEvent.type(screen.getByTestId('add-cms-url'), 'http://new.example.com');
|
||||
await userEvent.type(screen.getByTestId('add-cms-apikey-input'), 'secret-key');
|
||||
await userEvent.click(screen.getByTestId('add-cms-submit'));
|
||||
|
||||
const rows = await screen.findAllByTestId('cms-instance-row', {}, { timeout: 5000 });
|
||||
expect(rows.length).toBe(3);
|
||||
});
|
||||
|
||||
it('redirects unauthenticated users to login', async () => {
|
||||
|
||||
@@ -1,17 +1,72 @@
|
||||
import { useState } from 'react';
|
||||
import { LayoutGrid } from 'lucide-react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { CmsInstanceList } from '@/components/cms/CmsInstanceList';
|
||||
import { AddCmsInstanceDialog } from '@/components/cms/AddCmsInstanceDialog';
|
||||
import { SetStatusDialog } from '@/components/cms/SetStatusDialog';
|
||||
import { useCmsInstances } from '@/api/useCmsInstances';
|
||||
import type { CmsInstance } from '@/api/types';
|
||||
|
||||
export function CmsPage() {
|
||||
const { t } = useTranslation();
|
||||
const [addDialogOpen, setAddDialogOpen] = useState(false);
|
||||
const [statusTarget, setStatusTarget] = useState<CmsInstance | null>(null);
|
||||
const { data: instances, isPending, isError } = useCmsInstances();
|
||||
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center py-16 text-center space-y-4">
|
||||
<LayoutGrid className="size-12 text-muted-foreground" />
|
||||
<h1 className="text-2xl font-semibold" data-testid="cms-title">
|
||||
{t('cms.title')}
|
||||
</h1>
|
||||
<p className="text-muted-foreground max-w-sm" data-testid="cms-placeholder">
|
||||
{t('cms.description')}
|
||||
</p>
|
||||
<div className="space-y-4 p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<h1 className="text-2xl font-semibold" data-testid="cms-title">
|
||||
{t('cms.title')}
|
||||
</h1>
|
||||
<Button
|
||||
onClick={() => setAddDialogOpen(true)}
|
||||
data-testid="cms-add-button"
|
||||
>
|
||||
{t('cms.addButton')}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{isPending && (
|
||||
<p className="text-sm text-muted-foreground">{t('common.loading')}</p>
|
||||
)}
|
||||
|
||||
{isError && (
|
||||
<p className="text-sm text-destructive">{t('errors.generic')}</p>
|
||||
)}
|
||||
|
||||
{!isPending && !isError && instances?.length === 0 && (
|
||||
<div
|
||||
className="flex flex-col items-center justify-center py-16 text-center space-y-4"
|
||||
data-testid="cms-empty-state"
|
||||
>
|
||||
<LayoutGrid className="size-12 text-muted-foreground" />
|
||||
<h2 className="text-xl font-semibold">{t('cms.emptyState.heading')}</h2>
|
||||
<p className="text-muted-foreground max-w-sm">{t('cms.emptyState.description')}</p>
|
||||
<Button onClick={() => setAddDialogOpen(true)} data-testid="cms-empty-add-button">
|
||||
{t('cms.addButton')}
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!isPending && !isError && instances && instances.length > 0 && (
|
||||
<CmsInstanceList
|
||||
instances={instances}
|
||||
onSetStatus={(instance) => setStatusTarget(instance)}
|
||||
/>
|
||||
)}
|
||||
|
||||
<AddCmsInstanceDialog
|
||||
open={addDialogOpen}
|
||||
onOpenChange={setAddDialogOpen}
|
||||
/>
|
||||
|
||||
<SetStatusDialog
|
||||
instance={statusTarget}
|
||||
open={statusTarget !== null}
|
||||
onOpenChange={(open) => { if (!open) setStatusTarget(null); }}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -6,7 +6,7 @@ using SlpModularCms.Modules.Master.Services;
|
||||
namespace SlpModularCms.Modules.Master.Controllers;
|
||||
|
||||
[ApiController]
|
||||
[Route("[controller]")]
|
||||
[Route("CmsInstances")]
|
||||
[Authorize(Policy = "OwnerOnly")]
|
||||
public class CmsInstanceController(ICmsInstanceService service) : ControllerBase
|
||||
{
|
||||
|
||||
+72
@@ -0,0 +1,72 @@
|
||||
// <auto-generated />
|
||||
using System;
|
||||
using Microsoft.EntityFrameworkCore;
|
||||
using Microsoft.EntityFrameworkCore.Infrastructure;
|
||||
using Microsoft.EntityFrameworkCore.Metadata;
|
||||
using Microsoft.EntityFrameworkCore.Migrations;
|
||||
using Microsoft.EntityFrameworkCore.Storage.ValueConversion;
|
||||
using SlpModularCms.Modules.Master.Data;
|
||||
|
||||
#nullable disable
|
||||
|
||||
namespace SlpModularCms.Modules.Master.Migrations
|
||||
{
|
||||
[DbContext(typeof(MasterDbContext))]
|
||||
[Migration("20260630210103_InitialCreate")]
|
||||
partial class InitialCreate
|
||||
{
|
||||
/// <inheritdoc />
|
||||
protected override void BuildTargetModel(ModelBuilder modelBuilder)
|
||||
{
|
||||
#pragma warning disable 612, 618
|
||||
modelBuilder
|
||||
.HasAnnotation("ProductVersion", "10.0.9")
|
||||
.HasAnnotation("Relational:MaxIdentifierLength", 128);
|
||||
|
||||
SqlServerModelBuilderExtensions.UseIdentityColumns(modelBuilder);
|
||||
|
||||
modelBuilder.Entity("SlpModularCms.Modules.Master.Data.Entities.CmsInstance", b =>
|
||||
{
|
||||
b.Property<Guid>("Id")
|
||||
.ValueGeneratedOnAdd()
|
||||
.HasColumnType("uniqueidentifier");
|
||||
|
||||
b.Property<string>("ApiKey")
|
||||
.IsRequired()
|
||||
.HasMaxLength(1000)
|
||||
.HasColumnType("nvarchar(1000)");
|
||||
|
||||
b.Property<string>("DisableMessage")
|
||||
.HasMaxLength(500)
|
||||
.HasColumnType("nvarchar(500)");
|
||||
|
||||
b.Property<DateTimeOffset?>("LastContactedAt")
|
||||
.HasColumnType("datetimeoffset");
|
||||
|
||||
b.Property<DateTimeOffset?>("LastIntegrityCheckFailedAt")
|
||||
.HasColumnType("datetimeoffset");
|
||||
|
||||
b.Property<DateTimeOffset?>("LastStatusPushedAt")
|
||||
.HasColumnType("datetimeoffset");
|
||||
|
||||
b.Property<string>("Name")
|
||||
.IsRequired()
|
||||
.HasMaxLength(200)
|
||||
.HasColumnType("nvarchar(200)");
|
||||
|
||||
b.Property<int>("Status")
|
||||
.HasColumnType("int");
|
||||
|
||||
b.Property<string>("Url")
|
||||
.IsRequired()
|
||||
.HasMaxLength(500)
|
||||
.HasColumnType("nvarchar(500)");
|
||||
|
||||
b.HasKey("Id");
|
||||
|
||||
b.ToTable("MasterCmsInstances", (string)null);
|
||||
});
|
||||
#pragma warning restore 612, 618
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
using System;
|
||||
using Microsoft.EntityFrameworkCore.Migrations;
|
||||
|
||||
#nullable disable
|
||||
|
||||
namespace SlpModularCms.Modules.Master.Migrations
|
||||
{
|
||||
/// <inheritdoc />
|
||||
public partial class InitialCreate : Migration
|
||||
{
|
||||
/// <inheritdoc />
|
||||
protected override void Up(MigrationBuilder migrationBuilder)
|
||||
{
|
||||
migrationBuilder.CreateTable(
|
||||
name: "MasterCmsInstances",
|
||||
columns: table => new
|
||||
{
|
||||
Id = table.Column<Guid>(type: "uniqueidentifier", nullable: false),
|
||||
Name = table.Column<string>(type: "nvarchar(200)", maxLength: 200, nullable: false),
|
||||
Url = table.Column<string>(type: "nvarchar(500)", maxLength: 500, nullable: false),
|
||||
ApiKey = table.Column<string>(type: "nvarchar(1000)", maxLength: 1000, nullable: false),
|
||||
Status = table.Column<int>(type: "int", nullable: false),
|
||||
DisableMessage = table.Column<string>(type: "nvarchar(500)", maxLength: 500, nullable: true),
|
||||
LastContactedAt = table.Column<DateTimeOffset>(type: "datetimeoffset", nullable: true),
|
||||
LastStatusPushedAt = table.Column<DateTimeOffset>(type: "datetimeoffset", nullable: true),
|
||||
LastIntegrityCheckFailedAt = table.Column<DateTimeOffset>(type: "datetimeoffset", nullable: true)
|
||||
},
|
||||
constraints: table =>
|
||||
{
|
||||
table.PrimaryKey("PK_MasterCmsInstances", x => x.Id);
|
||||
});
|
||||
}
|
||||
|
||||
/// <inheritdoc />
|
||||
protected override void Down(MigrationBuilder migrationBuilder)
|
||||
{
|
||||
migrationBuilder.DropTable(
|
||||
name: "MasterCmsInstances");
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,69 @@
|
||||
// <auto-generated />
|
||||
using System;
|
||||
using Microsoft.EntityFrameworkCore;
|
||||
using Microsoft.EntityFrameworkCore.Infrastructure;
|
||||
using Microsoft.EntityFrameworkCore.Metadata;
|
||||
using Microsoft.EntityFrameworkCore.Storage.ValueConversion;
|
||||
using SlpModularCms.Modules.Master.Data;
|
||||
|
||||
#nullable disable
|
||||
|
||||
namespace SlpModularCms.Modules.Master.Migrations
|
||||
{
|
||||
[DbContext(typeof(MasterDbContext))]
|
||||
partial class MasterDbContextModelSnapshot : ModelSnapshot
|
||||
{
|
||||
protected override void BuildModel(ModelBuilder modelBuilder)
|
||||
{
|
||||
#pragma warning disable 612, 618
|
||||
modelBuilder
|
||||
.HasAnnotation("ProductVersion", "10.0.9")
|
||||
.HasAnnotation("Relational:MaxIdentifierLength", 128);
|
||||
|
||||
SqlServerModelBuilderExtensions.UseIdentityColumns(modelBuilder);
|
||||
|
||||
modelBuilder.Entity("SlpModularCms.Modules.Master.Data.Entities.CmsInstance", b =>
|
||||
{
|
||||
b.Property<Guid>("Id")
|
||||
.ValueGeneratedOnAdd()
|
||||
.HasColumnType("uniqueidentifier");
|
||||
|
||||
b.Property<string>("ApiKey")
|
||||
.IsRequired()
|
||||
.HasMaxLength(1000)
|
||||
.HasColumnType("nvarchar(1000)");
|
||||
|
||||
b.Property<string>("DisableMessage")
|
||||
.HasMaxLength(500)
|
||||
.HasColumnType("nvarchar(500)");
|
||||
|
||||
b.Property<DateTimeOffset?>("LastContactedAt")
|
||||
.HasColumnType("datetimeoffset");
|
||||
|
||||
b.Property<DateTimeOffset?>("LastIntegrityCheckFailedAt")
|
||||
.HasColumnType("datetimeoffset");
|
||||
|
||||
b.Property<DateTimeOffset?>("LastStatusPushedAt")
|
||||
.HasColumnType("datetimeoffset");
|
||||
|
||||
b.Property<string>("Name")
|
||||
.IsRequired()
|
||||
.HasMaxLength(200)
|
||||
.HasColumnType("nvarchar(200)");
|
||||
|
||||
b.Property<int>("Status")
|
||||
.HasColumnType("int");
|
||||
|
||||
b.Property<string>("Url")
|
||||
.IsRequired()
|
||||
.HasMaxLength(500)
|
||||
.HasColumnType("nvarchar(500)");
|
||||
|
||||
b.HasKey("Id");
|
||||
|
||||
b.ToTable("MasterCmsInstances", (string)null);
|
||||
});
|
||||
#pragma warning restore 612, 618
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user