eho/atomic-design-poc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Architect-review remediation: enforce conventions, prod-safe tooling, one form idiom, resilience seams

Browse Source 
Acts on the showcase review. Four workstreams; all tests green
(npm run lint, 70 FE tests, ng build, 33 backend tests).

Enforcement + CI:
- eslint.config.mjs bans `any` and enforces layer/context boundaries
  (domain ≠ Angular; herregistratie → registratie → shared, auth → shared);
  `npm run lint` added; ajv 6 scoped to ESLint via nested override.
- .github/workflows/ci.yml: FE lint+check:tokens+test+build, backend dotnet test,
  and an API-client drift check.

One form idiom (the headline finding):
- change-request-form converged onto the wizard pattern — change-request.machine.ts
  (Model/Msg/reduce + value objects) + submit-change-request.ts (Result) + a real
  POST /api/v1/change-requests (server re-validates). Spec + story added; the detail
  page no longer holds an ad-hoc success signal.

Resilience/observability seam:
- api-client.provider.ts: request timeout, X-Correlation-Id, Idempotency-Key for
  writes; comments naming the retry/auth seams.
- Backend logs correlation id + a no-PII submit-audit line; /api/v1 prefix +
  backward-compat note; client regenerated.

Quick wins:
- Dev tooling excluded from prod: scenario.interceptor wired only under isDevMode()
  (?scenario= inert in prod); debug panel @if(isDev) (tree-shaken out).
- src/environments + apiBaseUrl into provideApiClient (angular.json fileReplacements).
- Backend /health + /health/ready.
- Debug view PII-minimised (redactProfile: name/address/DOB redacted, BIG masked).
- IntakePolicyAdapter (removes inline resource in the intake wizard).
- README de-staled; CLAUDE.md gains EN/NL + forms-one-idiom + lint/CI notes.
- Stories: text-input, link, data-row, site-header, site-footer, change-request-form.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
eho
2026-06-27 08:25:51 +02:00
co-authored by Claude Opus 4.8
parent cf570a8132
commit d08f3877f7
35 changed files with 1803 additions and 145 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/shared/infrastructure/api-client.provider.ts
+32 -14
View File
@@ -1,31 +1,48 @@
import { Provider } from '@angular/core';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { firstValueFrom } from 'rxjs';
import { firstValueFrom, timeout, TimeoutError } from 'rxjs';
import { ApiClient, ProblemDetails } from './api-client';
import { environment } from '../../../environments/environment';
/** Single place every API call passes through: the seam for cross-cutting concerns. */
const REQUEST_TIMEOUT_MS = 10_000;
/**
* Adapts Angular's HttpClient to the fetch-shaped interface the NSwag-generated
* client expects, so every API call flows through HttpClient interceptors — the
* `?scenario=` toggle (scenario.interceptor.ts) and any future auth header. The
* generated client is the only place HTTP shapes are known; this is the only
* place it meets Angular's HTTP stack.
* client expects, so every API call flows through HttpClient interceptors (the
* `?scenario=` toggle) and the cross-cutting concerns below. The generated client
* is the only place HTTP shapes are known; this is the only place it meets
* Angular's HTTP stack — i.e. the one seam to add:
* - timeout (done — REQUEST_TIMEOUT_MS),
* - correlation id (done — X-Correlation-Id, echoed in backend logs),
* - idempotency key for writes (done — Idempotency-Key; a real retry would thread
* a STABLE key per logical submit so re-sends dedupe; here it's per-attempt),
* - auth: attach `Authorization: Bearer …` here (one line) when real DigiD lands,
* - retry/backoff: wrap the pipe with rxjs `retry({ count, delay })` here.
*/
function httpClientFetch(http: HttpClient) {
return {
async fetch(url: RequestInfo, init?: RequestInit): Promise<Response> {
const method = (init?.method ?? 'GET').toUpperCase();
const headers = (init?.headers ?? {}) as Record<string, string>;
const headers: Record<string, string> = {
...((init?.headers ?? {}) as Record<string, string>),
'X-Correlation-Id': crypto.randomUUID(),
};
if (method !== 'GET') headers['Idempotency-Key'] = crypto.randomUUID();
try {
const res = await firstValueFrom(
http.request(method, url as string, {
body: init?.body as string | undefined,
headers,
observe: 'response',
responseType: 'text',
}),
http
.request(method, url as string, {
body: init?.body as string | undefined,
headers,
observe: 'response',
responseType: 'text',
})
.pipe(timeout(REQUEST_TIMEOUT_MS)),
);
return new Response(res.body ?? '', { status: res.status || 200 });
} catch (e) {
if (e instanceof TimeoutError) return new Response('', { status: 504 });
const err = e as HttpErrorResponse;
const body = typeof err.error === 'string' ? err.error : JSON.stringify(err.error ?? {});
// ponytail: clamp to a Response-constructible status (an aborted/interceptor
@@ -37,11 +54,12 @@ function httpClientFetch(http: HttpClient) {
};
}
/** Provide a root ApiClient that talks through HttpClient (relative `/api` base URL). */
/** Provide a root ApiClient that talks through HttpClient. Base URL comes from the
* environment (relative '' in dev → proxy; configurable per deployment). */
export function provideApiClient(): Provider {
return {
provide: ApiClient,
useFactory: (http: HttpClient) => new ApiClient('', httpClientFetch(http)),
useFactory: (http: HttpClient) => new ApiClient(environment.apiBaseUrl, httpClientFetch(http)),
deps: [HttpClient],
};
}
src/app/shared/infrastructure/api-client.ts
+126 -8
View File
@@ -17,11 +17,77 @@ export class ApiClient {
this.baseUrl = baseUrl ?? "";
}
/**
* @return OK
*/
health(): Promise<void> {
let url_ = this.baseUrl + "/health";
url_ = url_.replace(/[?&]$/, "");
let options_: RequestInit = {
method: "GET",
headers: {
}
};
return this.http.fetch(url_, options_).then((_response: Response) => {
return this.processHealth(_response);
});
}
protected processHealth(response: Response): Promise<void> {
const status = response.status;
let _headers: any = {}; if (response.headers && response.headers.forEach) { response.headers.forEach((v: any, k: any) => _headers[k] = v); };
if (status === 200) {
return response.text().then((_responseText) => {
return;
});
} else if (status !== 200 && status !== 204) {
return response.text().then((_responseText) => {
return throwException("An unexpected server error occurred.", status, _responseText, _headers);
});
}
return Promise.resolve<void>(null as any);
}
/**
* @return OK
*/
ready(): Promise<void> {
let url_ = this.baseUrl + "/health/ready";
url_ = url_.replace(/[?&]$/, "");
let options_: RequestInit = {
method: "GET",
headers: {
}
};
return this.http.fetch(url_, options_).then((_response: Response) => {
return this.processReady(_response);
});
}
protected processReady(response: Response): Promise<void> {
const status = response.status;
let _headers: any = {}; if (response.headers && response.headers.forEach) { response.headers.forEach((v: any, k: any) => _headers[k] = v); };
if (status === 200) {
return response.text().then((_responseText) => {
return;
});
} else if (status !== 200 && status !== 204) {
return response.text().then((_responseText) => {
return throwException("An unexpected server error occurred.", status, _responseText, _headers);
});
}
return Promise.resolve<void>(null as any);
}
/**
* @return OK
*/
dashboardView(): Promise<DashboardViewDto> {
let url_ = this.baseUrl + "/api/dashboard-view";
let url_ = this.baseUrl + "/api/v1/dashboard-view";
url_ = url_.replace(/[?&]$/, "");
let options_: RequestInit = {
@@ -57,7 +123,7 @@ export class ApiClient {
* @return OK
*/
notes(): Promise<AantekeningDto[]> {
let url_ = this.baseUrl + "/api/notes";
let url_ = this.baseUrl + "/api/v1/notes";
url_ = url_.replace(/[?&]$/, "");
let options_: RequestInit = {
@@ -93,7 +159,7 @@ export class ApiClient {
* @return OK
*/
address(): Promise<BrpAddressDto> {
let url_ = this.baseUrl + "/api/brp/address";
let url_ = this.baseUrl + "/api/v1/brp/address";
url_ = url_.replace(/[?&]$/, "");
let options_: RequestInit = {
@@ -129,7 +195,7 @@ export class ApiClient {
* @return OK
*/
diplomas(): Promise<DuoLookupDto> {
let url_ = this.baseUrl + "/api/duo/diplomas";
let url_ = this.baseUrl + "/api/v1/duo/diplomas";
url_ = url_.replace(/[?&]$/, "");
let options_: RequestInit = {
@@ -165,7 +231,7 @@ export class ApiClient {
* @return OK
*/
policy(): Promise<IntakePolicyDto> {
let url_ = this.baseUrl + "/api/intake/policy";
let url_ = this.baseUrl + "/api/v1/intake/policy";
url_ = url_.replace(/[?&]$/, "");
let options_: RequestInit = {
@@ -201,7 +267,7 @@ export class ApiClient {
* @return OK
*/
registrations(body: RegistratieRequest): Promise<ReferentieResponse> {
let url_ = this.baseUrl + "/api/registrations";
let url_ = this.baseUrl + "/api/v1/registrations";
url_ = url_.replace(/[?&]$/, "");
const content_ = JSON.stringify(body);
@@ -247,7 +313,7 @@ export class ApiClient {
* @return OK
*/
herregistraties(body: HerregistratieRequest): Promise<ReferentieResponse> {
let url_ = this.baseUrl + "/api/herregistraties";
let url_ = this.baseUrl + "/api/v1/herregistraties";
url_ = url_.replace(/[?&]$/, "");
const content_ = JSON.stringify(body);
@@ -293,7 +359,7 @@ export class ApiClient {
* @return OK
*/
intakes(body: IntakeRequest): Promise<ReferentieResponse> {
let url_ = this.baseUrl + "/api/intakes";
let url_ = this.baseUrl + "/api/v1/intakes";
url_ = url_.replace(/[?&]$/, "");
const content_ = JSON.stringify(body);
@@ -334,6 +400,52 @@ export class ApiClient {
}
return Promise.resolve<ReferentieResponse>(null as any);
}
/**
* @return OK
*/
changeRequests(body: ChangeRequestRequest): Promise<ReferentieResponse> {
let url_ = this.baseUrl + "/api/v1/change-requests";
url_ = url_.replace(/[?&]$/, "");
const content_ = JSON.stringify(body);
let options_: RequestInit = {
body: content_,
method: "POST",
headers: {
"Content-Type": "application/json",
"Accept": "application/json"
}
};
return this.http.fetch(url_, options_).then((_response: Response) => {
return this.processChangeRequests(_response);
});
}
protected processChangeRequests(response: Response): Promise<ReferentieResponse> {
const status = response.status;
let _headers: any = {}; if (response.headers && response.headers.forEach) { response.headers.forEach((v: any, k: any) => _headers[k] = v); };
if (status === 200) {
return response.text().then((_responseText) => {
let result200: any = null;
result200 = _responseText === "" ? null : JSON.parse(_responseText, this.jsonParseReviver) as ReferentieResponse;
return result200;
});
} else if (status === 422) {
return response.text().then((_responseText) => {
let result422: any = null;
result422 = _responseText === "" ? null : JSON.parse(_responseText, this.jsonParseReviver) as ProblemDetails;
return throwException("Unprocessable Content", status, _responseText, _headers, result422);
});
} else if (status !== 200 && status !== 204) {
return response.text().then((_responseText) => {
return throwException("An unexpected server error occurred.", status, _responseText, _headers);
});
}
return Promise.resolve<ReferentieResponse>(null as any);
}
}
export interface AantekeningDto {
@@ -353,6 +465,12 @@ export interface BrpAddressDto {
adres?: AdresDto;
}
export interface ChangeRequestRequest {
straat?: string | undefined;
postcode?: string | undefined;
woonplaats?: string | undefined;
}
export interface DashboardViewDto {
registration?: RegistrationDto;
person?: PersonDto;