bert.hausmans/crewli
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(form-builder): admin UI completion — server filters, KPIs, resource expansion (WS-6 sessie 3c)

Browse Source 
Closes the four production gaps that emerged from sessie 3b's admin UI.
What we ship here is final: no further rework planned before production.

Backend
- IndexFailuresRequest validates state/search/failed_at_from/failed_at_to/
  listener_class. orgIndex + platformIndex apply them via a single
  applyIndexFilters() helper. Search runs case-insensitive `LIKE` on
  exception_message; SQL wildcards in user input are escaped.
- New /kpis aggregate endpoint per scope (orgKpis, platformKpis) returns
  open / resolved_30d / dismissed_30d / total_submissions in O(1) COUNTs.
  Replaces sessie 3b's client-side bucketing of an oversized list.
- Resource expansion: organisation_name, form_schema_label,
  resolved_by_user_name, dismissed_by_user_name, exception_trace,
  retry_history[]. Eager-loading via indexEagerLoads()/detailEagerLoads()
  prevents N+1 (verified by query-count assertion in test).
- New 2026_04_28_181000 migration adds exception_trace (longtext nullable)
  to form_submission_action_failures. ApplyBindingsOnFormSubmit listener
  now captures $e->getTraceAsString() at failure time.
- New FormSubmissionActionFailureRetryAttemptResource exposes per-attempt
  data (timestamp, actor name, outcome, exception details) inside
  retry_history[]. Index payloads omit the field via whenLoaded() to keep
  list responses lean.

Frontend (apps/app)
- Types updated to mirror the expanded resource shape and the new KPI
  endpoint contract. FormFailuresKpis is now { open, resolved_30d,
  dismissed_30d, total_submissions } (server-aggregate).
- useFormFailures composable forwards all 5 server filters via
  buildIndexParams() (strips empty/whitespace). useFormFailuresKpis hits
  the dedicated /kpis endpoint per scope.
- FormFailuresTable replaces client-side bucketing with server-side
  filtering, adds listener_class + date-range filter inputs, and renames
  the 4th KPI tile to "Submissions" (was "Totaal").
- FormFailureDetail renders organisation_name + form_schema_label in the
  header, surfaces an expandable stack-trace card, names the resolved/
  dismissed actor in the timeline, and replaces the "v1 placeholder"
  retry-history card with a full per-attempt timeline.

ESLint config gap (apps/app)
- New .eslintrc.cjs adapted from the Vuexy reference, minus Vuexy-internal
  rules. `pnpm lint` now runs successfully (was previously broken — the
  package.json script referenced a missing config). The 80 baseline
  violations across the codebase are pre-existing and out of scope for
  this session.

Tests + gates
- 24 new backend tests across filter, kpis, and resource-shape suites.
  Backend: 1462 → 1486 passing, 0 → 0 failing. Larastan clean. Rector
  dry-run unchanged at 354 (pre-Task-1 baseline from f18b55b).
- 3 new vitest tests in apps/app (filter wiring, KPI endpoint, KPI tile
  values from /kpis). Vitest: 38 → 41 passing. tsc clean. Portal
  unchanged (113 vitest, tsc clean).
- 5 backfill rollback tests bumped --step counts +1 for the new migration.
- Ws6FoundationMigrationTest down/up chain now includes exception_trace
  before the parent table is restored.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
bert.hausmans
2026-04-28 23:29:58 +02:00
parent b47e096a55
commit 192353f4bc
31 changed files with 1557 additions and 230 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
apps/app/src/composables/api/__tests__/useFormFailures.spec.ts
View File

@@ -3,6 +3,15 @@ import { mount } from '@vue/test-utils'
import { beforeEach, describe, expect, it, vi } from 'vitest'
import { defineComponent, h, ref } from 'vue'
import {
useDismissFailure,
useFormFailure,
useFormFailures,
useFormFailuresKpis,
useResolveFailure,
useRetryFailure,
} from '../useFormFailures'
const mockGet = vi.fn()
const mockPost = vi.fn()
@@ -13,14 +22,6 @@ vi.mock('@/lib/axios', () => ({
},
}))
import {
useDismissFailure,
useFormFailure,
useFormFailures,
useResolveFailure,
useRetryFailure,
} from '../useFormFailures'
function flushAsync(): Promise<void> {
return new Promise(resolve => setTimeout(resolve, 0))
}
@@ -82,6 +83,62 @@ describe('useFormFailures (list)', () => {
expect(mockGet).not.toHaveBeenCalled()
})
it('forwards server-side filters and strips empty values', async () => {
mockGet.mockResolvedValue({ data: { data: [], links: {}, meta: { current_page: 1, per_page: 25, total: 0, last_page: 1 } } })
mountWithQuery(() => useFormFailures(
ref({
page: 2,
per_page: 25,
state: 'open',
search: ' crowd_type ',
listener_class: 'App\\Listeners\\FormBuilder\\ApplyBindingsOnFormSubmit',
failed_at_from: '2026-01-01',
failed_at_to: '',
}),
'platform',
))
await flushAsync()
expect(mockGet).toHaveBeenCalledWith('/admin/form-failures', {
params: {
page: 2,
per_page: 25,
state: 'open',
search: 'crowd_type',
listener_class: 'App\\Listeners\\FormBuilder\\ApplyBindingsOnFormSubmit',
failed_at_from: '2026-01-01',
},
})
})
})
describe('useFormFailuresKpis', () => {
it('GETs the platform /kpis endpoint and unwraps data', async () => {
mockGet.mockResolvedValue({ data: { data: { open: 3, resolved_30d: 5, dismissed_30d: 1, total_submissions: 42 } } })
const { vm } = mountWithQuery(() => useFormFailuresKpis('platform'))
await flushAsync()
expect(mockGet).toHaveBeenCalledWith('/admin/form-failures/kpis')
expect((vm.result as { data: { value: unknown } }).data.value).toEqual({
open: 3,
resolved_30d: 5,
dismissed_30d: 1,
total_submissions: 42,
})
})
it('GETs the org-scoped /kpis endpoint', async () => {
mockGet.mockResolvedValue({ data: { data: { open: 0, resolved_30d: 0, dismissed_30d: 0, total_submissions: 0 } } })
mountWithQuery(() => useFormFailuresKpis('org', ref('01H-org-id')))
await flushAsync()
expect(mockGet).toHaveBeenCalledWith('/organisations/01H-org-id/form-failures/kpis')
})
})
describe('useFormFailure (single)', () => {
@@ -115,6 +172,7 @@ describe('useResolveFailure', () => {
mockPost.mockResolvedValue({ data: { data: { id: 'X', state: 'resolved' } } })
const { vm } = mountWithQuery(() => useResolveFailure('platform'))
await vm.result.mutateAsync({ failureId: 'X', payload: { note: 'fixed' } })
expect(mockPost).toHaveBeenCalledWith('/admin/form-failures/X/resolve', { note: 'fixed' })
@@ -124,6 +182,7 @@ describe('useResolveFailure', () => {
mockPost.mockResolvedValue({ data: { data: { id: 'X', state: 'resolved' } } })
const { vm } = mountWithQuery(() => useResolveFailure('platform'))
await vm.result.mutateAsync({ failureId: 'X', payload: { note: ' ' } })
expect(mockPost).toHaveBeenCalledWith('/admin/form-failures/X/resolve', {})
@@ -135,6 +194,7 @@ describe('useDismissFailure', () => {
mockPost.mockResolvedValue({ data: { data: { id: 'X', state: 'dismissed' } } })
const { vm } = mountWithQuery(() => useDismissFailure('platform'))
await vm.result.mutateAsync({
failureId: 'X',
payload: { reason_type: 'other', note: 'manual triage' },
@@ -150,6 +210,7 @@ describe('useDismissFailure', () => {
mockPost.mockResolvedValue({ data: { data: { id: 'X', state: 'dismissed' } } })
const { vm } = mountWithQuery(() => useDismissFailure('platform'))
await vm.result.mutateAsync({ failureId: 'X', payload: { reason_type: 'schema_deleted' } })
expect(mockPost).toHaveBeenCalledWith(

77
apps/app/src/composables/api/useFormFailures.ts
View File

@@ -12,7 +12,7 @@ import type {
/**
* TanStack Vue Query composables for the FormSubmissionActionFailure
* admin endpoints landed in WS-6 sessie 2.
* admin endpoints.
*
* Routes (matching api/routes/api.php):
* - Platform (super_admin): /api/v1/admin/form-failures
@@ -21,6 +21,10 @@ import type {
* Both scopes share the same controller methods + resource shape; the
* scope argument selects the URL prefix and the cache key family. The
* org-scope variant additionally requires `orgId`.
*
* Sessie 3c — index now accepts server-side filters (state/search/
* failed_at_from/failed_at_to/listener_class) and a separate `/kpis`
* endpoint replaces the client-side bucketing of an oversized list.
*/
interface PaginatedResponse<T> {
@@ -41,14 +45,12 @@ interface SingleResponse<T> {
export type FormFailureScope = 'platform' | 'org'
function basePath(scope: FormFailureScope, orgId?: MaybeRef<string | undefined>): string {
if (scope === 'platform') {
if (scope === 'platform')
return '/admin/form-failures'
}
const id = unref(orgId)
if (!id) {
if (!id)
throw new Error('useFormFailures: org scope requires orgId')
}
return `/organisations/${id}/form-failures`
}
@@ -57,6 +59,30 @@ function listKey(scope: FormFailureScope, orgId: MaybeRef<string | undefined>, p
return ['form-failures', scope, unref(orgId) ?? null, unref(params)]
}
/**
* Strip empty/undefined keys so the URL stays clean and the React Query
* key family doesn't fragment over stable (vs. dirty) inputs.
*/
function buildIndexParams(p: FormFailuresListParams): Record<string, string | number> {
const out: Record<string, string | number> = {}
if (p.page !== undefined)
out.page = p.page
if (p.per_page !== undefined)
out.per_page = p.per_page
if (p.state !== undefined && p.state !== null)
out.state = p.state
if (p.listener_class && p.listener_class.trim() !== '')
out.listener_class = p.listener_class
if (p.failed_at_from && p.failed_at_from.trim() !== '')
out.failed_at_from = p.failed_at_from
if (p.failed_at_to && p.failed_at_to.trim() !== '')
out.failed_at_to = p.failed_at_to
if (p.search && p.search.trim() !== '')
out.search = p.search.trim()
return out
}
export function useFormFailures(
params: MaybeRef<FormFailuresListParams>,
scope: FormFailureScope,
@@ -66,11 +92,9 @@ export function useFormFailures(
queryKey: computed(() => listKey(scope, orgId, params)),
queryFn: async () => {
const p = unref(params)
const { data } = await apiClient.get<PaginatedResponse<FormFailure>>(basePath(scope, orgId), {
params: {
page: p.page,
per_page: p.per_page,
},
params: buildIndexParams(p),
})
return data
@@ -80,33 +104,18 @@ export function useFormFailures(
}
/**
* KPI counts derived client-side via 3 parallel state-filtered list calls
* + the unfiltered total. The backend doesn't (yet) ship aggregate counts;
* doing it client-side keeps this session in scope (no backend changes
* per the prompt).
* Server-side KPI aggregate. Single COUNT-per-metric query — independent
* of tenant volume. Replaces sessie 3b's client-side bucketing.
*/
export function useFormFailuresKpis(scope: FormFailureScope, orgId?: MaybeRef<string | undefined>) {
return useQuery({
queryKey: ['form-failures-kpis', scope, computed(() => unref(orgId) ?? null)],
queryFn: async (): Promise<FormFailuresKpis> => {
const path = basePath(scope, orgId)
const [allRes] = await Promise.all([
apiClient.get<PaginatedResponse<FormFailure>>(path, { params: { per_page: 100 } }),
])
const { data } = await apiClient.get<SingleResponse<FormFailuresKpis>>(
`${basePath(scope, orgId)}/kpis`,
)
// Backend currently lists everything in failed_at-DESC order; bucket
// by client-side `state`. With per_page=100 this covers practically
// all open + closed failures for any single tenant. Backlog item
// tracks moving to a server-side count endpoint.
const all = allRes.data.data
const counts: FormFailuresKpis = { open: 0, resolved: 0, dismissed: 0, total: allRes.data.meta.total }
for (const f of all) {
if (f.state === 'open') counts.open += 1
else if (f.state === 'resolved') counts.resolved += 1
else if (f.state === 'dismissed') counts.dismissed += 1
}
return counts
return data.data
},
enabled: () => scope === 'platform' || !!unref(orgId),
})
@@ -134,8 +143,10 @@ function invalidateFamily(qc: ReturnType<typeof useQueryClient>, scope: FormFail
qc.invalidateQueries({ queryKey: ['form-failures', scope] })
qc.invalidateQueries({ queryKey: ['form-failures-kpis', scope] })
qc.invalidateQueries({ queryKey: ['form-failure', scope] })
// Pipeline retry succeeds → submission state may also change.
qc.invalidateQueries({ queryKey: ['form-submissions'] })
// Touch orgId to silence "unused" lint when scope === 'platform'.
void unref(orgId)
}
@@ -164,9 +175,8 @@ export function useResolveFailure(scope: FormFailureScope, orgId?: MaybeRef<stri
// FormRequest treats an absent key and a null value identically,
// but keeping the payload tight avoids audit-log noise.
const body: Record<string, string> = {}
if (payload.note && payload.note.trim() !== '') {
if (payload.note && payload.note.trim() !== '')
body.note = payload.note.trim()
}
const { data } = await apiClient.post<SingleResponse<FormFailure>>(
`${basePath(scope, orgId)}/${failureId}/resolve`,
@@ -185,9 +195,8 @@ export function useDismissFailure(scope: FormFailureScope, orgId?: MaybeRef<stri
return useMutation({
mutationFn: async ({ failureId, payload }: { failureId: string; payload: DismissFailurePayload }) => {
const body: Record<string, string> = { reason_type: payload.reason_type }
if (payload.note && payload.note.trim() !== '') {
if (payload.note && payload.note.trim() !== '')
body.note = payload.note.trim()
}
const { data } = await apiClient.post<SingleResponse<FormFailure>>(
`${basePath(scope, orgId)}/${failureId}/dismiss`,