feat : audit log (table + writer + listener + API + admin UI + timeline) (#9)
## Résumé
Implémente le journal d'audit append-only couvrant les 5 tickets de `doc/audit-log.md` et embarque au passage plusieurs corrections périphériques (sidebar Admin/Mon compte, drawer RBAC, Swagger, schema_filter Doctrine) ainsi que l'initialisation de la suite e2e Playwright. Toutes les mutations Doctrine sur les entités portant `#[Auditable]` sont tracées dans une table PostgreSQL dédiée, exposée en lecture seule via API Platform et consultable par les admins dans une page dédiée.
## Ce qui change
### Audit log — cœur de la PR
**Backend**
- Migration : table `audit_log` (UUID v7 natif Postgres en PK, `jsonb changes`, 3 index pour tri chrono, par entité et par utilisateur).
- `AuditLogWriter` : service bas-niveau, écrit via une connexion DBAL dédiée `audit` (même DSN que `default`, service séparé) pour sortir de la transaction ORM en batch. Blacklist defense-in-depth `password`/`plainPassword`/`token`/`secret`.
- `RequestIdProvider` : UUID v4 généré au `kernel.request` principal, injecté dans chaque ligne d'audit de la requête.
- Attributs `#[Auditable]` / `#[AuditIgnore]` dans `src/Shared/Domain/Attribute/` (accessibles par tous les modules).
- `AuditListener` : capture `onFlush` / écriture `postFlush` avec pattern swap-and-clear contre les flushes ré-entrants. Erreurs loguées, jamais propagées. Entité `User` annotée (password / plainPassword ignorés).
- API Platform read-only `/api/audit-logs` (permission RBAC `core.audit_log.view`) : `GET` collection paginée + `GET` item, pas de POST/PUT/PATCH/DELETE. Filtres `entity_type`, `entity_id`, `action`, `performed_by`, `performed_at[after]`/`[before]`.
- `DbalPaginator` implémentant `PaginatorInterface` : `hydra:view` généré automatiquement par API Platform, pas de construction manuelle.
- Ressource `AuditLogEntityTypesResource` + provider dédié pour peupler le filtre par type d'entité côté UI (réponse cachée, pas de requête à chaque ouverture du drawer).
- Permission `core.audit_log.view` déclarée dans `CoreModule::permissions()`.
- `audit_log` exclu du `schema_filter` Doctrine : plus de faux diff sur `make migration-diff`.
**Frontend**
- Page admin `/admin/audit-log` : tableau paginé, filtres locaux (état dans le composant, non persistés dans l'URL — conforme règle CLAUDE.md « Tableaux : pas de persistance URL »), drawer de détail (diff + timeline complète de l'entité), badges colorés par action.
- Composable partagé `useAuditLog` avec `resetAuditLog()` auto-enregistré sur `onAuthSessionCleared` (règle CLAUDE.md composables singletons).
- Composant réutilisable `<AuditTimeline :entity-type :entity-id>` : garde permission (pas d'appel API sans le droit), lazy loading (10 items + bouton « Voir plus »), dates relatives FR via `Intl.RelativeTimeFormat`, skeleton loader.
- Entrée sidebar « Journal d'audit » gated sur `core.audit_log.view` + clés i18n imbriquées dans `fr.json`.
### Fixes embarqués
- **Review fixes audit-log** (commits `37eafd2`, `1505e84`, `99c77eb`) : précision des timestamps, `ESCAPE` sur les `LIKE`, plafond pagination, diverses remarques du 1er tour de review.
- **Sidebar** (`701a480`, `e2fbf51`) : nouvelle section « Administration » + groupe « Mon compte », gate de section sur permissions, « Tableau de bord » déplacé dans « Mon compte ». Convention admin documentée.
- **Drawer RBAC utilisateurs** (`617ee31`, `5f5afcc`) : corrige l'affichage des sites et l'écrasement via merge-patch (garde anti-écrasement + spec `GET /users/{id}/rbac` documentée).
- **Swagger UI** (`6db955f`) : réactivé en ajoutant `symfony/twig-bundle` aux deps (régression depuis l'arrivée d'API Platform 4.2).
- **`phpunit.dist.xml`** : `<env APP_ENV=dev>` forçait la suite à tourner sous `framework.test=false` (→ `test.service_container` introuvable) ; `JWT_PASSPHRASE` ne matchait pas les clés de dev. Corrigés pour débloquer la suite.
### E2E Playwright (nouveau, commit `4603ab2`)
- `playwright.config.ts` + structure `frontend/tests/e2e/` (personas, helpers `loginAs`, page objects `LoginPage` + `SidebarComponent`).
- Specs : `auth/login.spec.ts` + `permissions/sidebar-visibility.spec.ts` (vérifie la visibilité de la sidebar par rôle RBAC).
- Commande `SeedE2ECommand` pour préparer un jeu de données déterministe côté backend.
- `make e2e` ajouté au Makefile.
## Décisions techniques
- **UUID v7 natif Postgres** (16 octets vs 36 en varchar) : index `performed_at` ~40 % plus petit sur une table append-only à croissance infinie.
- **`entity_type` format `module.Entity`** (ex: `core.User`) : évite les collisions si deux modules ont des entités de même nom.
- **`performed_by` dénormalisé** (string, pas FK) : le nom persiste même après suppression de l'utilisateur.
- **Connexion DBAL dédiée `audit`** : évite l'entanglement transactionnel entre audit et ORM en batch.
- **`ManyToMany` non audité** : limitation connue (`getEntityChangeSet()` ne couvre pas les collections) ; extension future via `getScheduledCollectionUpdates()` si besoin.
- **Filtres locaux non persistés dans l'URL** : choix assumé (cf. CLAUDE.md) pour éviter le couplage table ↔ routeur.
## Test plan
- [x] `make test` : 218 tests passent (writer unitaires + listener intégration + API fonctionnels + UserRbacProcessor).
- [x] `npm run lint` + `npm run test` + `npm run build` (frontend).
- [x] Migration appliquée sur dev + test, `audit_log` ignoré par `schema_filter`.
- [x] Permissions synchronisées (`app:sync-permissions`).
- [x] Swagger `/api/docs` accessible de nouveau.
- [ ] Playwright : `make e2e` vert en local (login + sidebar-visibility).
- [ ] Vérifier en local : création/modif/suppression d'un user apparaît dans `/admin/audit-log`.
- [ ] Vérifier : user sans `core.audit_log.view` → 403 sur l'endpoint + item absent de la sidebar.
- [ ] Vérifier : expansion d'une ligne affiche la timeline de l'entité avec dates relatives FR.
- [ ] Vérifier : drawer RBAC utilisateur n'écrase plus la liste des sites au `PATCH`.
## Points d'attention pour le review
- `AuditListener` : pattern swap-and-clear sur `postFlush` — relire la gestion des flushes ré-entrants.
- `DbalPaginator` : vérifier que l'absence d'`Iterator` custom ne casse pas la normalisation API Platform sur collections vides.
- `UserRbacProcessor` : logique merge-patch + garde anti-écrasement des sites (régression corrigée dans `617ee31`).
- Playwright : nouvelle dépendance de dev, s'assurer que `make e2e` ne fait pas partie du pipeline CI par défaut (à brancher explicitement).
Co-authored-by: Matthieu <mtholot19@gmail.com>
Reviewed-on: MALIO-DEV/Coltura#9
Co-authored-by: matthieu <matthieu@yuno.malio.fr>
Co-committed-by: matthieu <matthieu@yuno.malio.fr>
This commit was merged in pull request #9.
This commit is contained in:
@@ -13,10 +13,12 @@
|
||||
"actions": "Actions"
|
||||
},
|
||||
"sidebar": {
|
||||
"general": {
|
||||
"section": "Général",
|
||||
"administration": {
|
||||
"section": "Administration"
|
||||
},
|
||||
"account": {
|
||||
"section": "Mon compte",
|
||||
"dashboard": "Tableau de bord",
|
||||
"admin": "Administration",
|
||||
"logout": "Déconnexion"
|
||||
},
|
||||
"commercial": {
|
||||
@@ -26,7 +28,10 @@
|
||||
"core": {
|
||||
"roles": "Gestion des rôles",
|
||||
"users": "Utilisateurs",
|
||||
"sites": "Sites"
|
||||
"audit_log": "Journal d'audit"
|
||||
},
|
||||
"sites": {
|
||||
"admin": "Sites"
|
||||
}
|
||||
},
|
||||
"dashboard": {
|
||||
@@ -66,6 +71,40 @@
|
||||
"switchSuccess": "Site courant changé"
|
||||
}
|
||||
},
|
||||
"audit": {
|
||||
"action": {
|
||||
"create": "Création",
|
||||
"update": "Modification",
|
||||
"delete": "Suppression"
|
||||
},
|
||||
"entity": {
|
||||
"core_user": "Utilisateur",
|
||||
"core_role": "Rôle",
|
||||
"core_permission": "Permission",
|
||||
"sites_site": "Site"
|
||||
},
|
||||
"empty": "Aucune activité enregistrée",
|
||||
"no_results": "Aucun résultat pour ces filtres",
|
||||
"timeline": {
|
||||
"empty": "Aucun historique",
|
||||
"load_more": "Voir plus"
|
||||
},
|
||||
"filters": {
|
||||
"reset": "Réinitialiser",
|
||||
"date_from": "Du",
|
||||
"date_to": "Au",
|
||||
"entity_type": "Type d'entité",
|
||||
"user": "Utilisateur",
|
||||
"action": "Action",
|
||||
"all_actions": "Toutes les actions"
|
||||
},
|
||||
"detail": {
|
||||
"field": "Champ",
|
||||
"old_value": "Ancienne valeur",
|
||||
"new_value": "Nouvelle valeur"
|
||||
},
|
||||
"detail_title": "Détail de l'entrée"
|
||||
},
|
||||
"success": {
|
||||
"auth": {
|
||||
"logout": "Deconnexion reussie"
|
||||
@@ -102,7 +141,8 @@
|
||||
},
|
||||
"permissions": {
|
||||
"selectAll": "Tout selectionner",
|
||||
"noPermissions": "Aucune permission disponible"
|
||||
"noPermissions": "Aucune permission disponible",
|
||||
"loadFailed": "Impossible de charger le catalogue de permissions. L'enregistrement est désactivé pour éviter tout écrasement accidentel."
|
||||
}
|
||||
},
|
||||
"users": {
|
||||
@@ -126,12 +166,28 @@
|
||||
"noEffectivePermissions": "Aucune permission effective",
|
||||
"sourceRole": "via {role}",
|
||||
"sourceDirect": "Direct",
|
||||
"lastAdminWarning": "Impossible de retirer le statut administrateur du dernier admin"
|
||||
"lastAdminWarning": "Impossible de retirer le statut administrateur du dernier admin",
|
||||
"loadFailed": "Impossible de charger les droits de cet utilisateur. L'enregistrement est désactivé pour éviter tout écrasement accidentel."
|
||||
},
|
||||
"toast": {
|
||||
"updated": "Permissions mises à jour avec succès"
|
||||
}
|
||||
},
|
||||
"auditLog": {
|
||||
"title": "Journal d'audit",
|
||||
"table": {
|
||||
"performedAt": "Date",
|
||||
"performedBy": "Utilisateur",
|
||||
"entityType": "Entité",
|
||||
"entityId": "ID",
|
||||
"action": "Action",
|
||||
"summary": "Résumé"
|
||||
},
|
||||
"pagination": {
|
||||
"previous": "Précédent",
|
||||
"next": "Suivant"
|
||||
}
|
||||
},
|
||||
"sites": {
|
||||
"title": "Gestion des sites",
|
||||
"newSite": "Nouveau site",
|
||||
|
||||
@@ -33,7 +33,15 @@
|
||||
<h4 class="mb-3 text-sm font-semibold text-neutral-700">
|
||||
{{ t('admin.roles.form.permissions') }}
|
||||
</h4>
|
||||
<div v-if="permissionsByModule.length === 0" class="text-sm text-neutral-400">
|
||||
<!-- Etat d'erreur explicite : sans ce message, un drawer vide
|
||||
ressemblerait a un role legitimement sans permissions. -->
|
||||
<div
|
||||
v-if="permissionsLoadFailed"
|
||||
class="rounded border border-red-200 bg-red-50 p-3 text-sm text-red-700"
|
||||
>
|
||||
{{ t('admin.roles.permissions.loadFailed') }}
|
||||
</div>
|
||||
<div v-else-if="permissionsByModule.length === 0" class="text-sm text-neutral-400">
|
||||
{{ t('admin.roles.permissions.noPermissions') }}
|
||||
</div>
|
||||
<div class="flex flex-col gap-4">
|
||||
@@ -70,7 +78,7 @@
|
||||
<MalioButton
|
||||
:label="t('common.save')"
|
||||
variant="primary"
|
||||
:disabled="saving"
|
||||
:disabled="saving || permissionsLoadFailed"
|
||||
@click="handleSave"
|
||||
/>
|
||||
</div>
|
||||
@@ -102,6 +110,11 @@ const emit = defineEmits<{
|
||||
|
||||
const saving = ref(false)
|
||||
const allPermissions = ref<Permission[]>([])
|
||||
// Signale un echec de chargement du catalogue de permissions : on bloque
|
||||
// alors la sauvegarde pour eviter qu'un drawer ouvert avec zero permission
|
||||
// visible (cas d'un 403 ou d'une panne reseau) n'ecrase silencieusement
|
||||
// toutes les permissions du role.
|
||||
const permissionsLoadFailed = ref(false)
|
||||
|
||||
const form = ref({
|
||||
label: '',
|
||||
@@ -129,12 +142,21 @@ const permissionsByModule = computed<PermissionModule[]>(() => {
|
||||
|
||||
// Charger les permissions au montage
|
||||
async function loadPermissions() {
|
||||
const data = await api.get<{ member: Permission[] }>(
|
||||
'/permissions',
|
||||
{ 'orphan': false, itemsPerPage: 999 },
|
||||
{ toast: false },
|
||||
)
|
||||
allPermissions.value = data.member
|
||||
permissionsLoadFailed.value = false
|
||||
try {
|
||||
const data = await api.get<{ member: Permission[] }>(
|
||||
'/permissions',
|
||||
{ 'orphan': false, itemsPerPage: 999 },
|
||||
// `toast: true` : en cas d'echec (403, reseau, 500), l'utilisateur
|
||||
// voit l'erreur remonter. Sans ce feedback, un catalogue vide
|
||||
// ressemblerait a un role sans permissions disponibles.
|
||||
{ toast: true },
|
||||
)
|
||||
allPermissions.value = data.member
|
||||
} catch {
|
||||
allPermissions.value = []
|
||||
permissionsLoadFailed.value = true
|
||||
}
|
||||
}
|
||||
|
||||
// Remplir le formulaire quand le role change
|
||||
|
||||
@@ -6,6 +6,16 @@
|
||||
@update:model-value="emit('update:modelValue', $event)"
|
||||
>
|
||||
<div class="flex flex-col gap-6 p-4">
|
||||
<!-- Etat d'erreur de chargement des referentiels : bloque la
|
||||
sauvegarde pour empecher un ecrasement silencieux des droits. -->
|
||||
<div
|
||||
v-if="loadFailed"
|
||||
class="flex items-center gap-2 rounded-lg border border-red-300 bg-red-50 px-4 py-3 text-sm text-red-800"
|
||||
>
|
||||
<Icon name="mdi:alert-circle-outline" class="size-5 shrink-0" />
|
||||
{{ t('admin.users.drawer.loadFailed') }}
|
||||
</div>
|
||||
|
||||
<!-- Avertissement auto-edition -->
|
||||
<div
|
||||
v-if="isSelfEdit"
|
||||
@@ -103,7 +113,7 @@
|
||||
<MalioButton
|
||||
:label="t('common.save')"
|
||||
variant="primary"
|
||||
:disabled="saving"
|
||||
:disabled="saving || loadFailed"
|
||||
@click="handleSave"
|
||||
/>
|
||||
</div>
|
||||
@@ -112,7 +122,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { Permission, Role, UserListItem, EffectivePermission } from '~/shared/types/rbac'
|
||||
import type { Permission, Role, UserListItem, UserRbacDetail, EffectivePermission } from '~/shared/types/rbac'
|
||||
import type { Site } from '~/shared/types/sites'
|
||||
|
||||
interface PermissionModule {
|
||||
@@ -138,6 +148,10 @@ const saving = ref(false)
|
||||
const allRoles = ref<Role[]>([])
|
||||
const allPermissions = ref<Permission[]>([])
|
||||
const allSites = ref<Site[]>([])
|
||||
// Signale un echec de chargement des referentiels : on bloque alors la
|
||||
// sauvegarde pour eviter qu'un drawer ouvert sans donnees (403, reseau)
|
||||
// n'ecrase silencieusement l'etat RBAC du user (vidage roles/permissions/sites).
|
||||
const loadFailed = ref(false)
|
||||
|
||||
const form = ref({ isAdmin: false })
|
||||
const selectedRoleIds = ref(new Set<number>())
|
||||
@@ -206,39 +220,56 @@ const effectivePermissions = computed<EffectivePermission[]>(() => {
|
||||
.sort((a, b) => a.code.localeCompare(b.code))
|
||||
})
|
||||
|
||||
// Charger roles, permissions et sites en parallele pour minimiser le TTFB
|
||||
// a l'ouverture du drawer.
|
||||
async function loadData() {
|
||||
const [rolesData, permsData, sitesData] = await Promise.all([
|
||||
api.get<{ member: Role[] }>('/roles', {}, { toast: false }),
|
||||
api.get<{ member: Permission[] }>('/permissions', { orphan: false, itemsPerPage: 999 }, { toast: false }),
|
||||
api.get<{ member: Site[] }>('/sites', { itemsPerPage: 999 }, { toast: false }),
|
||||
])
|
||||
allRoles.value = rolesData.member
|
||||
allPermissions.value = permsData.member
|
||||
allSites.value = sitesData.member
|
||||
// Charger les referentiels (roles, permissions, sites) + le detail RBAC du user
|
||||
// en parallele pour minimiser le TTFB a l'ouverture du drawer.
|
||||
// Le detail RBAC est la seule source de verite pour l'etat initial du formulaire :
|
||||
// props.user vient de la liste /api/users qui n'expose pas les sites (groupe leger).
|
||||
async function loadData(userId: number) {
|
||||
loadFailed.value = false
|
||||
try {
|
||||
const [rolesData, permsData, sitesData, userRbac] = await Promise.all([
|
||||
// `toast: true` : en cas d'echec, l'utilisateur voit un toast
|
||||
// d'erreur. Sans ce feedback, le drawer s'afficherait vide et la
|
||||
// sauvegarde ecraserait silencieusement l'etat RBAC du user.
|
||||
api.get<{ member: Role[] }>('/roles', {}, { toast: true }),
|
||||
api.get<{ member: Permission[] }>('/permissions', { orphan: false, itemsPerPage: 999 }, { toast: true }),
|
||||
api.get<{ member: Site[] }>('/sites', { itemsPerPage: 999 }, { toast: true }),
|
||||
api.get<UserRbacDetail>(`/users/${userId}/rbac`, {}, { toast: true }),
|
||||
])
|
||||
allRoles.value = rolesData.member
|
||||
allPermissions.value = permsData.member
|
||||
allSites.value = sitesData.member
|
||||
|
||||
form.value.isAdmin = userRbac.isAdmin
|
||||
selectedRoleIds.value = new Set((userRbac.roles ?? []).map(iriToId))
|
||||
selectedDirectPermissionIds.value = new Set((userRbac.directPermissions ?? []).map(iriToId))
|
||||
selectedSiteIds.value = new Set((userRbac.sites ?? []).map(iriToId))
|
||||
} catch {
|
||||
loadFailed.value = true
|
||||
allRoles.value = []
|
||||
allPermissions.value = []
|
||||
allSites.value = []
|
||||
resetForm()
|
||||
}
|
||||
}
|
||||
|
||||
// Remplir le formulaire quand le user change
|
||||
watch(() => props.user, (user) => {
|
||||
if (user) {
|
||||
form.value.isAdmin = user.isAdmin
|
||||
selectedRoleIds.value = new Set(user.roles.map(iriToId))
|
||||
selectedDirectPermissionIds.value = new Set(user.directPermissions.map(iriToId))
|
||||
selectedSiteIds.value = new Set((user.sites ?? []).map(iriToId))
|
||||
} else {
|
||||
form.value.isAdmin = false
|
||||
selectedRoleIds.value = new Set()
|
||||
selectedDirectPermissionIds.value = new Set()
|
||||
selectedSiteIds.value = new Set()
|
||||
function resetForm() {
|
||||
form.value.isAdmin = false
|
||||
selectedRoleIds.value = new Set()
|
||||
selectedDirectPermissionIds.value = new Set()
|
||||
selectedSiteIds.value = new Set()
|
||||
}
|
||||
|
||||
// Recharger a l'ouverture OU quand le user change pendant que le drawer est ouvert.
|
||||
// Le watch combine evite un double fetch si les deux changent dans le meme tick.
|
||||
watch([() => props.modelValue, () => props.user?.id], ([open, userId]) => {
|
||||
if (open && userId) {
|
||||
loadData(userId)
|
||||
} else if (!open) {
|
||||
resetForm()
|
||||
}
|
||||
}, { immediate: true })
|
||||
|
||||
// Charger les donnees quand le drawer s'ouvre
|
||||
watch(() => props.modelValue, (open) => {
|
||||
if (open) loadData()
|
||||
})
|
||||
|
||||
function toggleRole(id: number, selected: boolean) {
|
||||
const ids = new Set(selectedRoleIds.value)
|
||||
if (selected) ids.add(id)
|
||||
|
||||
422
frontend/modules/core/pages/admin/audit-log.vue
Normal file
422
frontend/modules/core/pages/admin/audit-log.vue
Normal file
@@ -0,0 +1,422 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="flex items-center justify-between">
|
||||
<h1 class="text-xl font-bold text-primary-500 sm:text-2xl">
|
||||
{{ t('admin.auditLog.title') }}
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<!-- Filtres -->
|
||||
<section class="mt-4 rounded border border-gray-200 bg-white p-4">
|
||||
<!-- Labels uniformes au-dessus : les composants Malio sont utilises sans
|
||||
leur `label` flottant interne pour ne pas mixer deux patterns de label. -->
|
||||
<div class="grid grid-cols-1 items-start gap-3 md:grid-cols-5">
|
||||
<!-- TODO(malio-ui): remplacer par un composant Malio quand la lib
|
||||
exposera un datetime picker. Cf. exception documentee dans
|
||||
CLAUDE.md (section "Composants formulaires"). -->
|
||||
<div>
|
||||
<label class="mb-1 block text-xs font-medium text-gray-600">
|
||||
{{ t('audit.filters.date_from') }}
|
||||
</label>
|
||||
<input
|
||||
v-model="filters.performedAtAfter"
|
||||
type="datetime-local"
|
||||
class="h-[40px] w-full rounded-md border border-m-muted bg-white px-3 text-sm outline-none focus-visible:border-2 focus-visible:border-m-primary"
|
||||
>
|
||||
</div>
|
||||
<!-- TODO(malio-ui): idem ci-dessus. -->
|
||||
<div>
|
||||
<label class="mb-1 block text-xs font-medium text-gray-600">
|
||||
{{ t('audit.filters.date_to') }}
|
||||
</label>
|
||||
<input
|
||||
v-model="filters.performedAtBefore"
|
||||
type="datetime-local"
|
||||
class="h-[40px] w-full rounded-md border border-m-muted bg-white px-3 text-sm outline-none focus-visible:border-2 focus-visible:border-m-primary"
|
||||
>
|
||||
</div>
|
||||
<div>
|
||||
<label class="mb-1 block text-xs font-medium text-gray-600">
|
||||
{{ t('audit.filters.entity_type') }}
|
||||
</label>
|
||||
<div class="[&>div>div]:!mt-0">
|
||||
<MalioSelectCheckbox
|
||||
v-model="selectedEntityTypes"
|
||||
:options="entityTypeOptions"
|
||||
:display-select-all="true"
|
||||
:display-tag="true"
|
||||
min-width="w-full"
|
||||
text-field="text-sm"
|
||||
text-value="text-sm"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="mb-1 block text-xs font-medium text-gray-600">
|
||||
{{ t('audit.filters.user') }}
|
||||
</label>
|
||||
<MalioInputText
|
||||
v-model="performedByInput"
|
||||
icon-name="mdi:account-search"
|
||||
input-class="text-sm"
|
||||
group-class="h-10"
|
||||
/>
|
||||
</div>
|
||||
<!-- TODO(malio-ui): remplacer par MalioSelect quand la lib
|
||||
supportera de maniere fiable des options a valeur string
|
||||
(cf. note Lesstime CLAUDE.md). Exception documentee dans
|
||||
CLAUDE.md (section "Composants formulaires"). -->
|
||||
<div>
|
||||
<label class="mb-1 block text-xs font-medium text-gray-600">
|
||||
{{ t('audit.filters.action') }}
|
||||
</label>
|
||||
<select
|
||||
v-model="actionValue"
|
||||
class="h-[40px] w-full rounded-md border border-m-muted bg-white px-3 text-sm outline-none focus-visible:border-2 focus-visible:border-m-primary"
|
||||
>
|
||||
<option value="">{{ t('audit.filters.all_actions') }}</option>
|
||||
<option v-for="opt in actionOptions" :key="opt.value" :value="opt.value">
|
||||
{{ opt.label }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-3 flex justify-end">
|
||||
<MalioButton
|
||||
variant="tertiary"
|
||||
:label="t('audit.filters.reset')"
|
||||
button-class="text-xs"
|
||||
@click="resetFilters"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Tableau -->
|
||||
<MalioDataTable
|
||||
class="mt-4"
|
||||
:columns="columns"
|
||||
:items="rows"
|
||||
:total-items="totalItems"
|
||||
:page="filters.page ?? 1"
|
||||
:per-page="filters.itemsPerPage ?? 10"
|
||||
:per-page-options="[10, 25, 50]"
|
||||
:empty-message="isFiltered ? t('audit.no_results') : t('audit.empty')"
|
||||
@update:page="onPageChange"
|
||||
@update:per-page="onPerPageChange"
|
||||
@row-click="onRowClick"
|
||||
>
|
||||
<template #cell-action="{ item }">
|
||||
<span
|
||||
class="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium"
|
||||
:class="actionBadgeClass(item.action as string)"
|
||||
>
|
||||
{{ t(`audit.action.${item.action}`) }}
|
||||
</span>
|
||||
</template>
|
||||
<template #cell-entityType="{ item }">
|
||||
<span
|
||||
class="text-xs"
|
||||
:title="item.entityType as string"
|
||||
>{{ formatEntityType(item.entityType as string) }}</span>
|
||||
</template>
|
||||
<template #cell-entityId="{ item }">
|
||||
<span class="font-mono text-xs">{{ item.entityId }}</span>
|
||||
</template>
|
||||
<template #cell-summary="{ item }">
|
||||
<span class="text-xs text-gray-600">{{ item.summary }}</span>
|
||||
</template>
|
||||
</MalioDataTable>
|
||||
|
||||
<!-- Drawer detail : diff courant + timeline complete de l'entite -->
|
||||
<MalioDrawer
|
||||
v-model="drawerOpen"
|
||||
:title="drawerTitle"
|
||||
drawer-class="max-w-2xl"
|
||||
>
|
||||
<div v-if="selectedEntry">
|
||||
<AuditLogDetail :entry="selectedEntry" />
|
||||
<div class="mt-4 border-t border-gray-200 pt-3">
|
||||
<h3
|
||||
class="text-sm font-medium text-gray-700 mb-2"
|
||||
:title="selectedEntry.entityType"
|
||||
>
|
||||
{{ formatEntityType(selectedEntry.entityType) }} #{{ selectedEntry.entityId }}
|
||||
</h3>
|
||||
<AuditTimeline
|
||||
:entity-type="selectedEntry.entityType"
|
||||
:entity-id="selectedEntry.entityId"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</MalioDrawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, nextTick, onMounted, reactive, ref, watch } from 'vue'
|
||||
import type { AuditLogEntry, AuditLogFilters } from '~/shared/types'
|
||||
|
||||
const { t, te } = useI18n()
|
||||
const { can } = usePermissions()
|
||||
const { fetchLogsCached, fetchEntityTypes } = useAuditLog()
|
||||
|
||||
// Traduit un identifiant `module.Entity` (ex: `core.User`, `sites.Site`) en
|
||||
// libelle lisible via la cle i18n `audit.entity.<module>_<entity>`. Si aucune
|
||||
// traduction n'existe, on retombe sur l'identifiant brut pour rester debug-friendly.
|
||||
function formatEntityType(type: string): string {
|
||||
const key = `audit.entity.${type.toLowerCase().replace(/\./g, '_')}`
|
||||
return te(key) ? t(key) : type
|
||||
}
|
||||
|
||||
// Protection cote UI : le middleware `modules.global.ts` filtre deja les
|
||||
// routes desactivees, mais si quelqu'un atterit ici sans la permission on
|
||||
// renvoie une 403 plutot que de flasher un ecran vide.
|
||||
if (!can('core.audit_log.view')) {
|
||||
throw createError({ statusCode: 403, statusMessage: 'Forbidden' })
|
||||
}
|
||||
|
||||
useHead({ title: t('admin.auditLog.title') })
|
||||
|
||||
// Etat des filtres : local uniquement, JAMAIS persiste dans l'URL (cf. regle
|
||||
// CLAUDE.md "Tableau : pas de persistance URL").
|
||||
const filters = reactive<AuditLogFilters>({
|
||||
performedAtAfter: undefined,
|
||||
performedAtBefore: undefined,
|
||||
entityType: undefined,
|
||||
performedBy: undefined,
|
||||
action: undefined,
|
||||
page: 1,
|
||||
itemsPerPage: 10,
|
||||
})
|
||||
|
||||
// Multi-selection entity_type : bind dedie au MalioSelectCheckbox.
|
||||
// Attention : les composants Malio attendent `{ label, value }` (pas `{ text }`).
|
||||
const selectedEntityTypes = ref<(string | number)[]>([])
|
||||
const entityTypes = ref<string[]>([])
|
||||
// On garde l'identifiant technique comme `value` pour l'envoi API, mais on
|
||||
// affiche le libelle traduit quand il existe (fallback: identifiant brut).
|
||||
const entityTypeOptions = computed(() =>
|
||||
entityTypes.value.map(type => ({ value: type, label: formatEntityType(type) })),
|
||||
)
|
||||
|
||||
// Bind champ performedBy : MalioInputText attend `string | null`, on ne peut
|
||||
// pas binder directement un `string | undefined` reactive.
|
||||
const performedByInput = ref<string>('')
|
||||
|
||||
// Action : MalioSelect ne gere pas fiablement des options a valeur string (cf.
|
||||
// note Lesstime CLAUDE.md). On utilise un `<select>` natif stylise comme les
|
||||
// inputs dates pour garder un look coherent. '' = "toutes les actions".
|
||||
const actionValue = ref<string>('')
|
||||
const actionOptions = [
|
||||
{ value: 'create', label: t('audit.action.create') },
|
||||
{ value: 'update', label: t('audit.action.update') },
|
||||
{ value: 'delete', label: t('audit.action.delete') },
|
||||
]
|
||||
|
||||
const entries = ref<AuditLogEntry[]>([])
|
||||
const totalItems = ref(0)
|
||||
const loading = ref(false)
|
||||
|
||||
const drawerOpen = ref(false)
|
||||
const selectedEntry = ref<AuditLogEntry | null>(null)
|
||||
|
||||
const columns = [
|
||||
{ key: 'performedAt', label: t('admin.auditLog.table.performedAt') },
|
||||
{ key: 'performedBy', label: t('admin.auditLog.table.performedBy') },
|
||||
{ key: 'entityType', label: t('admin.auditLog.table.entityType') },
|
||||
{ key: 'entityId', label: t('admin.auditLog.table.entityId') },
|
||||
{ key: 'action', label: t('admin.auditLog.table.action') },
|
||||
{ key: 'summary', label: t('admin.auditLog.table.summary') },
|
||||
]
|
||||
|
||||
// Transforme chaque AuditLogEntry en ligne compatible MalioDataTable.
|
||||
// On conserve `id` pour retrouver l'entry complete sur row-click.
|
||||
const rows = computed(() =>
|
||||
entries.value.map(entry => ({
|
||||
id: entry.id,
|
||||
performedAt: formatDate(entry.performedAt),
|
||||
performedBy: entry.performedBy,
|
||||
entityType: entry.entityType,
|
||||
entityId: entry.entityId,
|
||||
action: entry.action,
|
||||
summary: summarize(entry),
|
||||
})),
|
||||
)
|
||||
|
||||
const drawerTitle = computed(() =>
|
||||
selectedEntry.value
|
||||
? `${formatEntityType(selectedEntry.value.entityType)} #${selectedEntry.value.entityId}`
|
||||
: t('audit.detail_title'),
|
||||
)
|
||||
|
||||
const isFiltered = computed(() =>
|
||||
Boolean(filters.performedAtAfter || filters.performedAtBefore
|
||||
|| (Array.isArray(filters.entityType) ? filters.entityType.length : filters.entityType)
|
||||
|| filters.performedBy || filters.action),
|
||||
)
|
||||
|
||||
// Anti-race : chaque fetch incremente un compteur ; seul le dernier en date
|
||||
// ecrit les resultats dans `entries`/`totalItems`. Evite qu'une reponse tardive
|
||||
// (reseau lent) n'ecrase les resultats d'une requete ulterieure.
|
||||
let requestToken = 0
|
||||
|
||||
// Pendant un reset, on suspend temporairement les watchers pour ne pas
|
||||
// declencher 4 fetchs paralleles (un par champ mute). Les watchers Vue 3
|
||||
// sont asynchrones (microtask) : il faut attendre un `nextTick` avant de
|
||||
// les relacher, sinon le flag est deja `false` au moment ou ils s'executent
|
||||
// et les fetchs partent quand meme. Un seul loadEntries() est appele
|
||||
// explicitement apres la liberation.
|
||||
let watchersSuspended = false
|
||||
|
||||
async function resetFilters(): Promise<void> {
|
||||
watchersSuspended = true
|
||||
filters.performedAtAfter = undefined
|
||||
filters.performedAtBefore = undefined
|
||||
filters.entityType = undefined
|
||||
filters.performedBy = undefined
|
||||
filters.action = undefined
|
||||
filters.page = 1
|
||||
selectedEntityTypes.value = []
|
||||
performedByInput.value = ''
|
||||
actionValue.value = ''
|
||||
// Les watchers mute de Vue 3 se planifient en microtask : on attend
|
||||
// leur execution avec le flag `true`, puis on libere.
|
||||
await nextTick()
|
||||
watchersSuspended = false
|
||||
loadEntries()
|
||||
}
|
||||
|
||||
async function loadEntries(): Promise<void> {
|
||||
const token = ++requestToken
|
||||
loading.value = true
|
||||
try {
|
||||
const data = await fetchLogsCached({
|
||||
...filters,
|
||||
// Convertit datetime-local (YYYY-MM-DDTHH:MM) en ISO pour l'API.
|
||||
performedAtAfter: filters.performedAtAfter ? toIso(filters.performedAtAfter) : undefined,
|
||||
performedAtBefore: filters.performedAtBefore ? toIso(filters.performedAtBefore) : undefined,
|
||||
})
|
||||
// Reponse obsolete (un fetch plus recent a ete lance entre-temps) :
|
||||
// on ignore le resultat pour ne pas overwrite l'etat courant.
|
||||
if (token !== requestToken) return
|
||||
entries.value = data.member ?? []
|
||||
totalItems.value = data.totalItems ?? 0
|
||||
} catch {
|
||||
// En cas d'echec (reseau, 403, 500...), on reset l'etat pour ne pas
|
||||
// laisser l'utilisateur croire que les donnees affichees sont a jour.
|
||||
// Le toast d'erreur est deja emis par `useApi()` via useAuditLog.
|
||||
if (token === requestToken) {
|
||||
entries.value = []
|
||||
totalItems.value = 0
|
||||
}
|
||||
} finally {
|
||||
if (token === requestToken) {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Debounce auto-importe depuis `frontend/shared/utils/debounce.ts` : evite
|
||||
// un refetch a chaque frappe sur le champ texte performedBy (reseau + SQL)
|
||||
// et laisse l'utilisateur finir sa saisie avant de lancer la requete.
|
||||
const debouncedReload = debounce(() => loadEntries(), 300)
|
||||
|
||||
function toIso(localDateTime: string): string {
|
||||
// datetime-local n'a pas de timezone : on assume heure locale et on
|
||||
// laisse le navigateur generer l'ISO via Date().
|
||||
return new Date(localDateTime).toISOString()
|
||||
}
|
||||
|
||||
function formatDate(iso: string): string {
|
||||
return new Date(iso).toLocaleString('fr-FR', {
|
||||
dateStyle: 'short',
|
||||
timeStyle: 'short',
|
||||
})
|
||||
}
|
||||
|
||||
function actionBadgeClass(action: string): string {
|
||||
switch (action) {
|
||||
case 'create': return 'bg-green-100 text-green-800'
|
||||
case 'update': return 'bg-yellow-100 text-yellow-800'
|
||||
case 'delete': return 'bg-red-100 text-red-800'
|
||||
default: return 'bg-gray-100 text-gray-800'
|
||||
}
|
||||
}
|
||||
|
||||
function summarize(entry: AuditLogEntry): string {
|
||||
const keys = Object.keys(entry.changes)
|
||||
if (keys.length === 0) return '—'
|
||||
if (keys.length <= 3) return keys.join(', ')
|
||||
return `${keys.slice(0, 3).join(', ')}… (+${keys.length - 3})`
|
||||
}
|
||||
|
||||
function onRowClick(item: Record<string, unknown>): void {
|
||||
const entry = entries.value.find(e => e.id === item.id)
|
||||
if (entry) {
|
||||
selectedEntry.value = entry
|
||||
drawerOpen.value = true
|
||||
}
|
||||
}
|
||||
|
||||
function onPageChange(value: number): void {
|
||||
filters.page = value
|
||||
loadEntries()
|
||||
}
|
||||
|
||||
function onPerPageChange(value: number): void {
|
||||
filters.itemsPerPage = value
|
||||
filters.page = 1
|
||||
loadEntries()
|
||||
}
|
||||
|
||||
// Sync MalioSelectCheckbox -> filters.entityType + reset page 1 + reload.
|
||||
watch(selectedEntityTypes, values => {
|
||||
if (watchersSuspended) return
|
||||
filters.entityType = values.length > 0 ? values.map(v => String(v)) : undefined
|
||||
filters.page = 1
|
||||
loadEntries()
|
||||
})
|
||||
|
||||
// Sync select action natif -> filters.action.
|
||||
watch(actionValue, value => {
|
||||
if (watchersSuspended) return
|
||||
filters.action = value === '' ? undefined : value
|
||||
filters.page = 1
|
||||
loadEntries()
|
||||
})
|
||||
|
||||
// Sync performedBy : frappe utilisateur -> debounce 300ms pour eviter un
|
||||
// refetch par caractere. Le reset passe par debouncedReload egalement pour
|
||||
// coalescer si plusieurs watchers tirent en meme temps.
|
||||
watch(performedByInput, value => {
|
||||
if (watchersSuspended) return
|
||||
filters.performedBy = value === '' ? undefined : value
|
||||
filters.page = 1
|
||||
debouncedReload()
|
||||
})
|
||||
|
||||
// Synchronisation reactive : tout changement de dates declenche un fetch +
|
||||
// reset de la pagination a la page 1.
|
||||
watch(
|
||||
() => [filters.performedAtAfter, filters.performedAtBefore],
|
||||
() => {
|
||||
if (watchersSuspended) return
|
||||
filters.page = 1
|
||||
loadEntries()
|
||||
},
|
||||
)
|
||||
|
||||
onMounted(async () => {
|
||||
// Charge les entity types en parallele de la liste principale : un
|
||||
// echec du premier endpoint (ex: reseau flaky) ne doit pas empecher
|
||||
// le tableau d'audit de s'afficher. En cas d'erreur, on laisse le
|
||||
// filtre vide — l'utilisateur pourra quand meme consulter le journal.
|
||||
try {
|
||||
entityTypes.value = await fetchEntityTypes()
|
||||
} catch {
|
||||
entityTypes.value = []
|
||||
}
|
||||
await loadEntries()
|
||||
})
|
||||
</script>
|
||||
@@ -114,6 +114,10 @@ async function loadRoles() {
|
||||
{ toast: false },
|
||||
)
|
||||
roles.value = data.member
|
||||
} catch {
|
||||
// Reset sur echec pour ne pas afficher de donnees stale (ancienne
|
||||
// requete reussie avant une perte reseau ou 403).
|
||||
roles.value = []
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
|
||||
@@ -38,7 +38,6 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { UserListItem } from '~/shared/types/rbac'
|
||||
import type { Site } from '~/shared/types/sites'
|
||||
|
||||
const { t } = useI18n()
|
||||
const api = useApi()
|
||||
@@ -49,24 +48,21 @@ useHead({ title: t('admin.users.title') })
|
||||
const canManage = computed(() => can('core.users.manage'))
|
||||
|
||||
const users = ref<UserListItem[]>([])
|
||||
const sitesById = ref(new Map<number, Site>())
|
||||
const loading = ref(false)
|
||||
const drawerOpen = ref(false)
|
||||
const selectedUser = ref<UserListItem | null>(null)
|
||||
|
||||
// La colonne "Sites" n'est plus affichee dans la liste : le detail des sites
|
||||
// rattaches est consulte/edite via le drawer (GET /users/{id}/rbac). Garder
|
||||
// un payload leger sur /api/users facilite la pagination et evite de fuiter
|
||||
// l'info cross-site aux users partageant juste un site avec l'appelant.
|
||||
const columns = [
|
||||
{ key: 'username', label: t('admin.users.table.username') },
|
||||
{ key: 'admin', label: t('admin.users.table.admin') },
|
||||
{ key: 'roles', label: t('admin.users.table.roles') },
|
||||
{ key: 'directPermissions', label: t('admin.users.table.directPermissions') },
|
||||
{ key: 'sites', label: t('admin.users.table.sites') },
|
||||
]
|
||||
|
||||
// Extraire l'id numerique depuis une IRI API Platform type `/api/sites/3`.
|
||||
function iriToId(iri: string): number {
|
||||
return Number(iri.split('/').pop())
|
||||
}
|
||||
|
||||
const userItems = computed(() =>
|
||||
users.value.map(user => ({
|
||||
id: user.id,
|
||||
@@ -74,27 +70,19 @@ const userItems = computed(() =>
|
||||
admin: user.isAdmin,
|
||||
roles: user.roles.length,
|
||||
directPermissions: user.directPermissions.length,
|
||||
// Affichage : liste des noms de sites separes par virgule. Les IRIs
|
||||
// du payload /api/users (groupe user:list) sont resolues via la Map
|
||||
// construite en parallele depuis /api/sites.
|
||||
sites: (user.sites ?? [])
|
||||
.map(iri => sitesById.value.get(iriToId(iri))?.name)
|
||||
.filter((name): name is string => Boolean(name))
|
||||
.join(', '),
|
||||
})),
|
||||
)
|
||||
|
||||
async function loadUsers() {
|
||||
loading.value = true
|
||||
try {
|
||||
// Chargement parallele : les sites alimentent la Map de resolution
|
||||
// IRI→name pour la colonne "Sites" de la table.
|
||||
const [usersData, sitesData] = await Promise.all([
|
||||
api.get<{ member: UserListItem[] }>('/users', {}, { toast: false }),
|
||||
api.get<{ member: Site[] }>('/sites', { itemsPerPage: 999 }, { toast: false }),
|
||||
])
|
||||
const usersData = await api.get<{ member: UserListItem[] }>('/users', {}, { toast: false })
|
||||
users.value = usersData.member
|
||||
sitesById.value = new Map(sitesData.member.map(s => [s.id, s]))
|
||||
} catch {
|
||||
// Reset sur echec pour ne pas afficher de donnees stale (ancienne
|
||||
// requete reussie avant une perte reseau ou 403). Pas de toast par
|
||||
// design ici : on laisse la liste vide parler d'elle-meme.
|
||||
users.value = []
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
|
||||
@@ -11,6 +11,7 @@ const auth = useAuthStore()
|
||||
const { resetSidebar } = useSidebar()
|
||||
const { resetModules } = useModules()
|
||||
const { resetCurrentSite } = useCurrentSite()
|
||||
const { resetAuditLog } = useAuditLog()
|
||||
|
||||
onMounted(async () => {
|
||||
try {
|
||||
@@ -18,13 +19,14 @@ onMounted(async () => {
|
||||
} finally {
|
||||
// Les resets sont garantis meme si auth.logout() rejette : eviter
|
||||
// qu'un user suivant (connecte sur le meme onglet) voie l'etat de
|
||||
// l'ancien. Les trois fonctions reset sont synchrones et ne
|
||||
// l'ancien. Toutes les fonctions reset sont synchrones et ne
|
||||
// peuvent pas throw (juste des assignations reactives).
|
||||
// navigateTo est dans le finally pour garantir la redirection
|
||||
// meme si auth.logout() lance une exception (ex: reseau coupé).
|
||||
resetSidebar()
|
||||
resetModules()
|
||||
resetCurrentSite()
|
||||
resetAuditLog()
|
||||
await navigateTo('/login')
|
||||
}
|
||||
})
|
||||
|
||||
@@ -118,6 +118,10 @@ async function loadSites() {
|
||||
{ toast: false },
|
||||
)
|
||||
sites.value = data.member
|
||||
} catch {
|
||||
// Reset sur echec pour ne pas afficher de donnees stale (ancienne
|
||||
// requete reussie avant une perte reseau ou 403).
|
||||
sites.value = []
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
|
||||
64
frontend/package-lock.json
generated
64
frontend/package-lock.json
generated
@@ -20,6 +20,7 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@nuxt/eslint-config": "^1.9.0",
|
||||
"@playwright/test": "^1.59.1",
|
||||
"@typescript-eslint/eslint-plugin": "^8.44.1",
|
||||
"@typescript-eslint/parser": "^8.44.1",
|
||||
"@vitejs/plugin-vue": "^6.0.6",
|
||||
@@ -3895,6 +3896,22 @@
|
||||
"node": ">=14"
|
||||
}
|
||||
},
|
||||
"node_modules/@playwright/test": {
|
||||
"version": "1.59.1",
|
||||
"resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.59.1.tgz",
|
||||
"integrity": "sha512-PG6q63nQg5c9rIi4/Z5lR5IVF7yU5MqmKaPOe0HSc0O2cX1fPi96sUQu5j7eo4gKCkB2AnNGoWt7y4/Xx3Kcqg==",
|
||||
"dev": true,
|
||||
"license": "Apache-2.0",
|
||||
"dependencies": {
|
||||
"playwright": "1.59.1"
|
||||
},
|
||||
"bin": {
|
||||
"playwright": "cli.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/@polka/url": {
|
||||
"version": "1.0.0-next.29",
|
||||
"resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.29.tgz",
|
||||
@@ -12613,6 +12630,53 @@
|
||||
"pathe": "^2.0.3"
|
||||
}
|
||||
},
|
||||
"node_modules/playwright": {
|
||||
"version": "1.59.1",
|
||||
"resolved": "https://registry.npmjs.org/playwright/-/playwright-1.59.1.tgz",
|
||||
"integrity": "sha512-C8oWjPR3F81yljW9o5OxcWzfh6avkVwDD2VYdwIGqTkl+OGFISgypqzfu7dOe4QNLL2aqcWBmI3PMtLIK233lw==",
|
||||
"dev": true,
|
||||
"license": "Apache-2.0",
|
||||
"dependencies": {
|
||||
"playwright-core": "1.59.1"
|
||||
},
|
||||
"bin": {
|
||||
"playwright": "cli.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"fsevents": "2.3.2"
|
||||
}
|
||||
},
|
||||
"node_modules/playwright-core": {
|
||||
"version": "1.59.1",
|
||||
"resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.59.1.tgz",
|
||||
"integrity": "sha512-HBV/RJg81z5BiiZ9yPzIiClYV/QMsDCKUyogwH9p3MCP6IYjUFu/MActgYAvK0oWyV9NlwM3GLBjADyWgydVyg==",
|
||||
"dev": true,
|
||||
"license": "Apache-2.0",
|
||||
"bin": {
|
||||
"playwright-core": "cli.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/playwright/node_modules/fsevents": {
|
||||
"version": "2.3.2",
|
||||
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
|
||||
"integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
|
||||
"dev": true,
|
||||
"hasInstallScript": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"darwin"
|
||||
],
|
||||
"engines": {
|
||||
"node": "^8.16.0 || ^10.6.0 || >=11.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/pluralize": {
|
||||
"version": "8.0.0",
|
||||
"resolved": "https://registry.npmjs.org/pluralize/-/pluralize-8.0.0.tgz",
|
||||
|
||||
@@ -12,7 +12,9 @@
|
||||
"lint": "eslint .",
|
||||
"lint:fix": "eslint . --fix",
|
||||
"test": "vitest run",
|
||||
"test:watch": "vitest"
|
||||
"test:watch": "vitest",
|
||||
"test:e2e": "playwright test",
|
||||
"test:e2e:ui": "playwright test --ui"
|
||||
},
|
||||
"dependencies": {
|
||||
"@malio/layer-ui": "^1.4.2",
|
||||
@@ -28,6 +30,7 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@nuxt/eslint-config": "^1.9.0",
|
||||
"@playwright/test": "^1.59.1",
|
||||
"@typescript-eslint/eslint-plugin": "^8.44.1",
|
||||
"@typescript-eslint/parser": "^8.44.1",
|
||||
"@vitejs/plugin-vue": "^6.0.6",
|
||||
|
||||
42
frontend/playwright.config.ts
Normal file
42
frontend/playwright.config.ts
Normal file
@@ -0,0 +1,42 @@
|
||||
import { defineConfig, devices } from '@playwright/test'
|
||||
|
||||
/**
|
||||
* Config Playwright pour les tests E2E de Coltura.
|
||||
*
|
||||
* Pre-requis avant de lancer :
|
||||
* 1. Les containers Docker tournent (`make start`)
|
||||
* 2. Le dev server Nuxt est lance (`make dev-nuxt`) sur le port 3004
|
||||
* 3. Les personas E2E sont seedes (`make seed-e2e` — cf. SeedE2ECommand cote back)
|
||||
*
|
||||
* La baseURL cible le dev server Nuxt (HMR) en dev local ; surcharger avec
|
||||
* PLAYWRIGHT_BASE_URL=http://localhost:8083 pour taper sur le build Nginx
|
||||
* (au plus pres de la prod, utile en CI).
|
||||
*/
|
||||
export default defineConfig({
|
||||
testDir: './tests/e2e',
|
||||
|
||||
// Interdit `test.only` en CI pour ne pas skipper involontairement la suite.
|
||||
forbidOnly: !!process.env.CI,
|
||||
|
||||
// Pas de retry en local (bugs a reproduire), 2 retries en CI (flaky mitige).
|
||||
retries: process.env.CI ? 2 : 0,
|
||||
|
||||
// Parallelisme : 1 worker local pour faciliter le debug, defaut en CI.
|
||||
workers: process.env.CI ? undefined : 1,
|
||||
|
||||
reporter: process.env.CI ? [['github'], ['html', { open: 'never' }]] : 'list',
|
||||
|
||||
use: {
|
||||
baseURL: process.env.PLAYWRIGHT_BASE_URL || 'http://localhost:3004',
|
||||
trace: 'on-first-retry',
|
||||
screenshot: 'only-on-failure',
|
||||
video: 'retain-on-failure',
|
||||
},
|
||||
|
||||
projects: [
|
||||
{
|
||||
name: 'chromium',
|
||||
use: { ...devices['Desktop Chrome'] },
|
||||
},
|
||||
],
|
||||
})
|
||||
@@ -1,2 +1,2 @@
|
||||
User-Agent: *
|
||||
Disallow:
|
||||
Disallow: /
|
||||
|
||||
100
frontend/shared/components/audit/AuditLogDetail.vue
Normal file
100
frontend/shared/components/audit/AuditLogDetail.vue
Normal file
@@ -0,0 +1,100 @@
|
||||
<template>
|
||||
<!--
|
||||
Vue de detail d'une ligne d'audit : tableau field/old/new pour une
|
||||
update, sinon snapshot complet sous forme de liste { cle: valeur }.
|
||||
-->
|
||||
<div class="text-sm">
|
||||
<p class="text-xs text-gray-500 mb-2">
|
||||
<span v-if="entry.ipAddress">IP: {{ entry.ipAddress }}</span>
|
||||
<span v-if="entry.requestId" class="ml-3">Req: {{ entry.requestId }}</span>
|
||||
</p>
|
||||
|
||||
<div v-if="entry.action === 'update'">
|
||||
<!-- Tableau de comparaison field/old/new. MalioDataTable n'est
|
||||
pas adapte ici : cas presentationnel non-paginable (cf.
|
||||
exception documentee dans CLAUDE.md). -->
|
||||
<table class="min-w-full border border-gray-200 text-xs">
|
||||
<thead class="bg-gray-100">
|
||||
<tr>
|
||||
<th class="px-2 py-1 text-left font-medium">{{ t('audit.detail.field') }}</th>
|
||||
<th class="px-2 py-1 text-left font-medium">{{ t('audit.detail.old_value') }}</th>
|
||||
<th class="px-2 py-1 text-left font-medium">{{ t('audit.detail.new_value') }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(diff, field) in updateDiff" :key="field" class="border-t border-gray-200">
|
||||
<td class="px-2 py-1 font-mono">{{ field }}</td>
|
||||
<td class="px-2 py-1 text-red-700">{{ formatValue(diff.old) }}</td>
|
||||
<td class="px-2 py-1 text-green-700">{{ formatValue(diff.new) }}</td>
|
||||
</tr>
|
||||
<!-- Modifications de collections to-many : shape different
|
||||
{ added: [ids], removed: [ids] } → affiche + et - sur
|
||||
la meme ligne pour garder une colonne field unique. -->
|
||||
<tr v-for="(diff, field) in collectionDiff" :key="`col-${field}`" class="border-t border-gray-200">
|
||||
<td class="px-2 py-1 font-mono">{{ field }}</td>
|
||||
<td class="px-2 py-1 text-red-700">
|
||||
<span v-if="diff.removed.length">− {{ diff.removed.join(', ') }}</span>
|
||||
<span v-else class="text-gray-400">∅</span>
|
||||
</td>
|
||||
<td class="px-2 py-1 text-green-700">
|
||||
<span v-if="diff.added.length">+ {{ diff.added.join(', ') }}</span>
|
||||
<span v-else class="text-gray-400">∅</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div v-else class="space-y-1">
|
||||
<div v-for="(value, key) in entry.changes" :key="key" class="flex gap-2">
|
||||
<span class="font-mono text-xs text-gray-600">{{ key }}:</span>
|
||||
<span class="text-xs">{{ formatValue(value) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import type { AuditLogEntry } from '~/shared/types'
|
||||
|
||||
const props = defineProps<{ entry: AuditLogEntry }>()
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
// Extrait les entrees au shape { old, new } pour les updates scalaires.
|
||||
const updateDiff = computed<Record<string, { old: unknown; new: unknown }>>(() => {
|
||||
const out: Record<string, { old: unknown; new: unknown }> = {}
|
||||
for (const [key, value] of Object.entries(props.entry.changes)) {
|
||||
if (value && typeof value === 'object' && 'old' in value && 'new' in value) {
|
||||
out[key] = value as { old: unknown; new: unknown }
|
||||
}
|
||||
}
|
||||
return out
|
||||
})
|
||||
|
||||
// Extrait les entrees au shape { added, removed } pour les modifications
|
||||
// de collections to-many (cf. AuditListener::captureCollectionChange).
|
||||
const collectionDiff = computed<Record<string, { added: unknown[]; removed: unknown[] }>>(() => {
|
||||
const out: Record<string, { added: unknown[]; removed: unknown[] }> = {}
|
||||
for (const [key, value] of Object.entries(props.entry.changes)) {
|
||||
if (value && typeof value === 'object' && 'added' in value && 'removed' in value) {
|
||||
const diff = value as { added: unknown; removed: unknown }
|
||||
out[key] = {
|
||||
added: Array.isArray(diff.added) ? diff.added : [],
|
||||
removed: Array.isArray(diff.removed) ? diff.removed : [],
|
||||
}
|
||||
}
|
||||
}
|
||||
return out
|
||||
})
|
||||
|
||||
function formatValue(value: unknown): string {
|
||||
if (value === null || value === undefined) return '∅'
|
||||
// Passe par i18n plutot qu'un hardcode FR : si une autre locale est
|
||||
// ajoutee, le rendu s'adapte sans nouvelle passe sur ce composant.
|
||||
if (typeof value === 'boolean') return value ? t('common.yes') : t('common.no')
|
||||
if (typeof value === 'object') return JSON.stringify(value)
|
||||
return String(value)
|
||||
}
|
||||
</script>
|
||||
252
frontend/shared/components/audit/AuditTimeline.vue
Normal file
252
frontend/shared/components/audit/AuditTimeline.vue
Normal file
@@ -0,0 +1,252 @@
|
||||
<template>
|
||||
<!--
|
||||
Garde permission : aucun rendu DOM ni appel API si l'utilisateur n'a
|
||||
pas le droit. On wrappe le contenu dans un bloc v-if plutot qu'un div
|
||||
vide pour eviter de polluer la layout quand le composant est embarque
|
||||
dans une page qui rend deja sa propre structure.
|
||||
-->
|
||||
<div v-if="canView" class="audit-timeline">
|
||||
<!-- Skeleton loader initial -->
|
||||
<ul v-if="loading && entries.length === 0" class="space-y-3">
|
||||
<li v-for="i in 3" :key="i" class="flex gap-3">
|
||||
<div class="h-3 w-3 rounded-full bg-gray-200 animate-pulse mt-1.5" />
|
||||
<div class="flex-1 space-y-2">
|
||||
<div class="h-3 w-1/3 rounded bg-gray-200 animate-pulse" />
|
||||
<div class="h-2 w-2/3 rounded bg-gray-100 animate-pulse" />
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p
|
||||
v-else-if="!loading && entries.length === 0"
|
||||
class="text-sm text-gray-500 italic"
|
||||
>
|
||||
{{ t('audit.timeline.empty') }}
|
||||
</p>
|
||||
|
||||
<ul v-else class="relative border-l-2 border-gray-200 pl-6 space-y-5">
|
||||
<li
|
||||
v-for="entry in entries"
|
||||
:key="entry.id"
|
||||
class="relative"
|
||||
>
|
||||
<!-- Dot sur la barre verticale. Couleur selon action. -->
|
||||
<span
|
||||
class="absolute -left-[31px] top-1 h-3 w-3 rounded-full ring-2 ring-white"
|
||||
:class="dotClass(entry.action)"
|
||||
/>
|
||||
|
||||
<div class="flex items-start justify-between gap-4">
|
||||
<div class="flex-1 min-w-0">
|
||||
<p class="text-sm">
|
||||
<span class="font-medium">{{ entry.performedBy }}</span>
|
||||
<span class="text-gray-500"> — {{ t(`audit.action.${entry.action}`) }}</span>
|
||||
</p>
|
||||
|
||||
<!-- Update : diff field-by-field. Create/Delete : liste des champs. -->
|
||||
<div v-if="entry.action === 'update'" class="mt-1 text-xs text-gray-600 space-y-0.5">
|
||||
<div v-for="(diff, field) in updateDiff(entry)" :key="field">
|
||||
<span class="font-medium">{{ field }}</span> :
|
||||
<span class="line-through text-red-600">{{ formatValue(diff.old) }}</span>
|
||||
<span class="mx-1">→</span>
|
||||
<span class="text-green-700">{{ formatValue(diff.new) }}</span>
|
||||
</div>
|
||||
<!-- Modifications de collections to-many. -->
|
||||
<div v-for="(diff, field) in collectionDiff(entry)" :key="`col-${field}`">
|
||||
<span class="font-medium">{{ field }}</span> :
|
||||
<span v-if="diff.removed.length" class="text-red-600">−{{ diff.removed.join(', ') }}</span>
|
||||
<span v-if="diff.removed.length && diff.added.length" class="mx-1"> </span>
|
||||
<span v-if="diff.added.length" class="text-green-700">+{{ diff.added.join(', ') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="mt-1 text-xs text-gray-600">
|
||||
{{ snapshotSummary(entry) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Date relative FR + tooltip absolu -->
|
||||
<time
|
||||
:title="absoluteDate(entry.performedAt)"
|
||||
class="shrink-0 text-xs text-gray-500"
|
||||
>
|
||||
{{ relativeDate(entry.performedAt) }}
|
||||
</time>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!-- Lazy loading : bouton "Voir plus" si plus de pages. -->
|
||||
<div v-if="hasMore" class="mt-4 flex justify-center">
|
||||
<MalioButton
|
||||
variant="tertiary"
|
||||
:label="loading ? t('common.loading') : t('audit.timeline.load_more')"
|
||||
:disabled="loading"
|
||||
button-class="text-sm"
|
||||
@click="loadMore"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, ref, toRefs, watch } from 'vue'
|
||||
import type { AuditLogEntry } from '~/shared/types'
|
||||
|
||||
const props = defineProps<{
|
||||
entityType: string
|
||||
entityId: string | number
|
||||
}>()
|
||||
|
||||
const { entityType, entityId } = toRefs(props)
|
||||
|
||||
const { t, locale } = useI18n()
|
||||
const { can } = usePermissions()
|
||||
const { fetchEntityLogs } = useAuditLog()
|
||||
|
||||
const canView = computed(() => can('core.audit_log.view'))
|
||||
|
||||
const entries = ref<AuditLogEntry[]>([])
|
||||
const page = ref(1)
|
||||
const totalItems = ref(0)
|
||||
const loading = ref(false)
|
||||
|
||||
// Lazy loading : 10 items par page cote UX. On aligne la pagination backend
|
||||
// (itemsPerPage=10 dans fetchEntityLogs) avec cette taille pour eviter de
|
||||
// slicer cote client — sinon les items 11-30 de chaque page etaient ignores.
|
||||
const PAGE_SIZE = 10
|
||||
|
||||
// Anti-race : un utilisateur qui change rapidement d'entite affichee (ouvre
|
||||
// une ligne puis une autre dans le tableau admin) peut declencher deux fetchs
|
||||
// dont le premier repond en retard et ecrase l'etat de la seconde timeline.
|
||||
// On incremente un token a chaque fetch ; seule la derniere requete ecrit le
|
||||
// resultat. loadMore() est aussi protege : une reponse tardive append sur
|
||||
// une timeline dont l'entite a deja change serait visuellement confuse.
|
||||
let requestToken = 0
|
||||
|
||||
const hasMore = computed(() => entries.value.length < totalItems.value)
|
||||
|
||||
async function loadPage(targetPage: number, append: boolean): Promise<void> {
|
||||
if (!canView.value) return
|
||||
|
||||
const token = ++requestToken
|
||||
loading.value = true
|
||||
try {
|
||||
const data = await fetchEntityLogs(entityType.value, entityId.value, targetPage, PAGE_SIZE)
|
||||
if (token !== requestToken) return
|
||||
const items = data.member ?? []
|
||||
entries.value = append ? [...entries.value, ...items] : items
|
||||
totalItems.value = data.totalItems ?? entries.value.length
|
||||
page.value = targetPage
|
||||
} catch {
|
||||
if (token !== requestToken) return
|
||||
// Erreur silencieuse (timeline secondaire) — useApi n'affiche pas de toast avec toast: false.
|
||||
entries.value = append ? entries.value : []
|
||||
} finally {
|
||||
if (token === requestToken) {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function loadMore(): Promise<void> {
|
||||
await loadPage(page.value + 1, true)
|
||||
}
|
||||
|
||||
function dotClass(action: string): string {
|
||||
switch (action) {
|
||||
case 'create': return 'bg-green-500'
|
||||
case 'update': return 'bg-yellow-500'
|
||||
case 'delete': return 'bg-red-500'
|
||||
default: return 'bg-gray-400'
|
||||
}
|
||||
}
|
||||
|
||||
// Relativise une date via Intl.RelativeTimeFormat. On selectionne l'unite
|
||||
// la plus grossiere possible (secondes < minutes < heures < jours < semaines
|
||||
// < mois < annees). La locale suit dynamiquement celle de l'app pour qu'un
|
||||
// switch de langue prenne effet sans nouveau mount (recomputed = cache
|
||||
// par-locale). Paliers mois/annee approximes (30.44j / 365.25j) : suffisant
|
||||
// pour un affichage humain, la tooltip absoluteDate garde la date exacte.
|
||||
const rtf = computed(() => new Intl.RelativeTimeFormat(locale.value, { numeric: 'auto' }))
|
||||
|
||||
function relativeDate(iso: string): string {
|
||||
const diffMs = Date.now() - new Date(iso).getTime()
|
||||
const diffSec = Math.round(diffMs / 1000)
|
||||
const absSec = Math.abs(diffSec)
|
||||
const sign = -Math.sign(diffSec)
|
||||
const fmt = rtf.value
|
||||
|
||||
if (absSec < 60) return fmt.format(sign * absSec, 'second')
|
||||
if (absSec < 3600) return fmt.format(sign * Math.round(absSec / 60), 'minute')
|
||||
if (absSec < 86400) return fmt.format(sign * Math.round(absSec / 3600), 'hour')
|
||||
if (absSec < 604800) return fmt.format(sign * Math.round(absSec / 86400), 'day')
|
||||
if (absSec < 2629800) return fmt.format(sign * Math.round(absSec / 604800), 'week') // < ~30.44j
|
||||
if (absSec < 31557600) return fmt.format(sign * Math.round(absSec / 2629800), 'month') // < ~365.25j
|
||||
return fmt.format(sign * Math.round(absSec / 31557600), 'year')
|
||||
}
|
||||
|
||||
function absoluteDate(iso: string): string {
|
||||
// Meme logique : la locale de formatage suit celle de l'app.
|
||||
return new Date(iso).toLocaleString(locale.value, {
|
||||
dateStyle: 'medium',
|
||||
timeStyle: 'short',
|
||||
})
|
||||
}
|
||||
|
||||
function updateDiff(entry: AuditLogEntry): Record<string, { old: unknown; new: unknown }> {
|
||||
// Format attendu: { champ: { old, new } }. On filtre defensivement les
|
||||
// valeurs qui ne correspondent pas a ce shape (pas d'erreur runtime).
|
||||
const out: Record<string, { old: unknown; new: unknown }> = {}
|
||||
for (const [key, value] of Object.entries(entry.changes)) {
|
||||
if (value && typeof value === 'object' && 'old' in value && 'new' in value) {
|
||||
const diff = value as { old: unknown; new: unknown }
|
||||
out[key] = diff
|
||||
}
|
||||
}
|
||||
return out
|
||||
}
|
||||
|
||||
function collectionDiff(entry: AuditLogEntry): Record<string, { added: unknown[]; removed: unknown[] }> {
|
||||
// Format to-many : { champ: { added: [ids], removed: [ids] } } produit
|
||||
// par AuditListener::captureCollectionChange.
|
||||
const out: Record<string, { added: unknown[]; removed: unknown[] }> = {}
|
||||
for (const [key, value] of Object.entries(entry.changes)) {
|
||||
if (value && typeof value === 'object' && 'added' in value && 'removed' in value) {
|
||||
const diff = value as { added: unknown; removed: unknown }
|
||||
out[key] = {
|
||||
added: Array.isArray(diff.added) ? diff.added : [],
|
||||
removed: Array.isArray(diff.removed) ? diff.removed : [],
|
||||
}
|
||||
}
|
||||
}
|
||||
return out
|
||||
}
|
||||
|
||||
function snapshotSummary(entry: AuditLogEntry): string {
|
||||
const keys = Object.keys(entry.changes)
|
||||
if (keys.length === 0) return '—'
|
||||
if (keys.length <= 4) return keys.join(', ')
|
||||
return `${keys.slice(0, 4).join(', ')}…`
|
||||
}
|
||||
|
||||
function formatValue(value: unknown): string {
|
||||
if (value === null || value === undefined) return '∅'
|
||||
// Passe par i18n plutot qu'un hardcode FR : si une autre locale est
|
||||
// ajoutee, le rendu s'adapte sans nouvelle passe sur ce composant.
|
||||
if (typeof value === 'boolean') return value ? t('common.yes') : t('common.no')
|
||||
if (typeof value === 'object') return JSON.stringify(value)
|
||||
return String(value)
|
||||
}
|
||||
|
||||
// Reload si l'entite affichee change.
|
||||
watch([entityType, entityId], () => {
|
||||
entries.value = []
|
||||
page.value = 1
|
||||
totalItems.value = 0
|
||||
loadPage(1, false)
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
loadPage(1, false)
|
||||
})
|
||||
</script>
|
||||
144
frontend/shared/composables/useAuditLog.ts
Normal file
144
frontend/shared/composables/useAuditLog.ts
Normal file
@@ -0,0 +1,144 @@
|
||||
import { ref } from 'vue'
|
||||
import type { AuditLogEntityTypes, AuditLogEntry, AuditLogFilters } from '~/shared/types'
|
||||
import type { HydraCollection } from '~/shared/utils/api'
|
||||
import { onAuthSessionCleared } from '~/shared/stores/auth'
|
||||
|
||||
/**
|
||||
* Cache module-level : evite un double-fetch si la page et le composant
|
||||
* Timeline demandent la meme page simultanement. Volontairement minimaliste :
|
||||
* on ne cache que le dernier resultat, pas un LRU par filtre — un CRM interne
|
||||
* n'en a pas besoin et le cache complexe complique le reset.
|
||||
*
|
||||
* Un logout / 401 doit purger ce cache : on s'enregistre au callback
|
||||
* `onAuthSessionCleared` expose par auth.ts.
|
||||
*/
|
||||
const lastCollection = ref<HydraCollection<AuditLogEntry> | null>(null)
|
||||
|
||||
function resetAuditLog(): void {
|
||||
lastCollection.value = null
|
||||
}
|
||||
|
||||
// Auto-enregistrement singleton : si la session est invalidee (401,
|
||||
// logout) le cache est purge automatiquement, evitant qu'un autre user
|
||||
// connecte ensuite ne voit des donnees residuelles.
|
||||
onAuthSessionCleared(resetAuditLog)
|
||||
|
||||
/**
|
||||
* Traduit le modele front (camelCase) en query params API Platform
|
||||
* (snake_case, avec la syntaxe performed_at[after] / [before]).
|
||||
*
|
||||
* @returns objet plat directement consommable par `useApi().get(url, query)`.
|
||||
*/
|
||||
function buildQuery(filters: AuditLogFilters | undefined): Record<string, string | number | string[]> {
|
||||
const query: Record<string, string | number | string[]> = {}
|
||||
if (!filters) return query
|
||||
|
||||
// `entity_type` : chaine simple ou liste pour un filtre multi-selection.
|
||||
// Cote PHP, la syntaxe `entity_type[]=X&entity_type[]=Y` est requise pour
|
||||
// que $_GET['entity_type'] soit un tableau (sinon "last wins").
|
||||
if (Array.isArray(filters.entityType)) {
|
||||
if (filters.entityType.length > 0) query['entity_type[]'] = filters.entityType
|
||||
} else if (filters.entityType) {
|
||||
query.entity_type = filters.entityType
|
||||
}
|
||||
if (filters.entityId) query.entity_id = filters.entityId
|
||||
if (filters.action) query.action = filters.action
|
||||
if (filters.performedBy) query.performed_by = filters.performedBy
|
||||
if (filters.performedAtAfter) query['performed_at[after]'] = filters.performedAtAfter
|
||||
if (filters.performedAtBefore) query['performed_at[before]'] = filters.performedAtBefore
|
||||
if (filters.page) query.page = filters.page
|
||||
if (filters.itemsPerPage) query.itemsPerPage = filters.itemsPerPage
|
||||
|
||||
return query
|
||||
}
|
||||
|
||||
/**
|
||||
* Composable partage entre la page globale d'audit (admin) et le composant
|
||||
* Timeline. Expose des methodes de lecture + une fonction `resetAuditLog()`
|
||||
* pour purger le cache (conforme a la regle CLAUDE.md sur les composables
|
||||
* singletons, cf. `useSidebar.resetSidebar`).
|
||||
*/
|
||||
// Accept explicitement JSON-LD : API Platform 4 retourne un tableau PLAT (liste
|
||||
// d'items, sans envelope de pagination) sous `application/json`, et un objet
|
||||
// Hydra complet avec `member`, `totalItems` et `view` (first/last/next/previous)
|
||||
// sous `application/ld+json`. Pour obtenir `view` cote front — indispensable
|
||||
// a la pagination prev/next — on force donc ld+json.
|
||||
const JSONLD_HEADERS = { Accept: 'application/ld+json' } as const
|
||||
|
||||
export function useAuditLog() {
|
||||
const api = useApi()
|
||||
|
||||
async function fetchLogs(filters?: AuditLogFilters): Promise<HydraCollection<AuditLogEntry>> {
|
||||
return api.get<HydraCollection<AuditLogEntry>>(
|
||||
'/audit-logs',
|
||||
buildQuery(filters),
|
||||
{ toast: false, headers: JSONLD_HEADERS },
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* Variante de `fetchLogs` qui met a jour le cache `lastCollection`.
|
||||
* N'est utilisee que par la page admin — le composant Timeline appelle
|
||||
* `fetchEntityLogs` qui bypass le cache pour ne pas polluer la reference
|
||||
* page-level quand plusieurs timelines sont ouvertes.
|
||||
*/
|
||||
async function fetchLogsCached(filters?: AuditLogFilters): Promise<HydraCollection<AuditLogEntry>> {
|
||||
const data = await fetchLogs(filters)
|
||||
lastCollection.value = data
|
||||
return data
|
||||
}
|
||||
|
||||
async function fetchLogById(id: string): Promise<AuditLogEntry> {
|
||||
return api.get<AuditLogEntry>(`/audit-logs/${id}`, {}, { toast: false, headers: JSONLD_HEADERS })
|
||||
}
|
||||
|
||||
/**
|
||||
* Liste des valeurs distinctes de `entity_type` pour alimenter le filtre
|
||||
* multi-selection. Alimente par un endpoint DBAL, aucune cache cote front
|
||||
* (la liste peut evoluer a chaque nouvelle ecriture d'audit).
|
||||
*/
|
||||
async function fetchEntityTypes(): Promise<string[]> {
|
||||
const data = await api.get<AuditLogEntityTypes>(
|
||||
'/audit-log-entity-types',
|
||||
{},
|
||||
{ toast: false, headers: JSONLD_HEADERS },
|
||||
)
|
||||
return data.entityTypes ?? []
|
||||
}
|
||||
|
||||
async function fetchEntityLogs(
|
||||
entityType: string,
|
||||
entityId: string | number,
|
||||
page: number = 1,
|
||||
itemsPerPage: number = 10,
|
||||
): Promise<HydraCollection<AuditLogEntry>> {
|
||||
// Volontairement via `fetchLogs` (sans cache) pour ne pas ecraser
|
||||
// `lastCollection` — la timeline peut etre rendue simultanement a
|
||||
// la page globale et doit rester independante.
|
||||
//
|
||||
// Le backend pagine a 30 par defaut (paginationItemsPerPage) ; on
|
||||
// passe explicitement itemsPerPage ici pour que la taille de page
|
||||
// soit alignee avec l'UX timeline (10 items + bouton "Voir plus").
|
||||
// Sans ce param, le client slice a 10 et rate 20 entrees par page.
|
||||
return fetchLogs({
|
||||
entityType,
|
||||
entityId: String(entityId),
|
||||
page,
|
||||
itemsPerPage,
|
||||
})
|
||||
}
|
||||
|
||||
// API publique : on expose volontairement deux noms distincts pour les
|
||||
// deux contrats (cache/no-cache). Aliaser `fetchLogs` vers la version
|
||||
// cachee trompait les appelants : un consommateur qui destructurait
|
||||
// `{ fetchLogs }` en pensant faire un appel neutre polluait en realite
|
||||
// `lastCollection`, effet indetectable sans lire l'impl.
|
||||
return {
|
||||
lastCollection,
|
||||
fetchLogsCached,
|
||||
fetchLogById,
|
||||
fetchEntityLogs,
|
||||
fetchEntityTypes,
|
||||
resetAuditLog,
|
||||
}
|
||||
}
|
||||
@@ -2,14 +2,23 @@
|
||||
* Composable de lecture des modules actifs (source : `/api/modules`).
|
||||
*
|
||||
* State singleton au niveau module : `useSidebar` suit la meme convention.
|
||||
* Chargement idempotent via le flag `loaded`, reset explicite au logout
|
||||
* (voir pages/logout.vue).
|
||||
* Chargement idempotent via le flag `loaded`, reset automatique au logout
|
||||
* via `onAuthSessionCleared` (cf. CLAUDE.md : « composables avec state
|
||||
* singleton doivent etre reinitialises au logout »).
|
||||
*/
|
||||
import { ref } from 'vue'
|
||||
import { onAuthSessionCleared } from '~/shared/stores/auth'
|
||||
|
||||
const activeModuleIds = ref<string[]>([])
|
||||
const loaded = ref(false)
|
||||
|
||||
function resetModulesState(): void {
|
||||
activeModuleIds.value = []
|
||||
loaded.value = false
|
||||
}
|
||||
|
||||
onAuthSessionCleared(resetModulesState)
|
||||
|
||||
export function useModules() {
|
||||
async function loadModules() {
|
||||
try {
|
||||
@@ -35,8 +44,7 @@ export function useModules() {
|
||||
}
|
||||
|
||||
function resetModules() {
|
||||
activeModuleIds.value = []
|
||||
loaded.value = false
|
||||
resetModulesState()
|
||||
}
|
||||
|
||||
return {
|
||||
|
||||
@@ -1,10 +1,23 @@
|
||||
import { ref } from 'vue'
|
||||
import type { SidebarSection } from '~/shared/types'
|
||||
import { onAuthSessionCleared } from '~/shared/stores/auth'
|
||||
|
||||
const sections = ref<SidebarSection[]>([])
|
||||
const disabledRoutes = ref<string[]>([])
|
||||
const loaded = ref(false)
|
||||
|
||||
function resetSidebarState(): void {
|
||||
sections.value = []
|
||||
disabledRoutes.value = []
|
||||
loaded.value = false
|
||||
}
|
||||
|
||||
// Auto-enregistrement singleton : purge la sidebar sur 401/logout pour
|
||||
// eviter qu'un nouvel utilisateur logue sur le meme onglet voie transitoirement
|
||||
// les items de l'ancienne session (cf. CLAUDE.md : « composables avec state
|
||||
// singleton doivent etre reinitialises au logout »).
|
||||
onAuthSessionCleared(resetSidebarState)
|
||||
|
||||
export function useSidebar() {
|
||||
async function loadSidebar() {
|
||||
try {
|
||||
@@ -31,9 +44,7 @@ export function useSidebar() {
|
||||
}
|
||||
|
||||
function resetSidebar() {
|
||||
sections.value = []
|
||||
disabledRoutes.value = []
|
||||
loaded.value = false
|
||||
resetSidebarState()
|
||||
}
|
||||
|
||||
return {
|
||||
|
||||
@@ -9,3 +9,44 @@ export interface SidebarSection {
|
||||
icon: string
|
||||
items: SidebarItem[]
|
||||
}
|
||||
|
||||
/**
|
||||
* Entree d'audit telle qu'elle est renvoyee par GET /api/audit-logs.
|
||||
*
|
||||
* `changes` est un payload libre dont le format depend de `action` :
|
||||
* - `create` / `delete` : snapshot complet { champ: valeur } ;
|
||||
* - `update` : diff { champ: { old, new } }.
|
||||
*/
|
||||
export interface AuditLogEntry {
|
||||
id: string
|
||||
entityType: string
|
||||
entityId: string
|
||||
action: 'create' | 'update' | 'delete'
|
||||
changes: Record<string, unknown>
|
||||
performedBy: string
|
||||
performedAt: string
|
||||
ipAddress: string | null
|
||||
requestId: string | null
|
||||
}
|
||||
|
||||
/**
|
||||
* Filtres combinables en query params (AND) pour GET /api/audit-logs.
|
||||
* Les bornes de date utilisent la syntaxe API Platform `performed_at[after]` /
|
||||
* `performed_at[before]`.
|
||||
*/
|
||||
export interface AuditLogFilters {
|
||||
/** Chaine pour un seul type, liste pour un filtre multi-selection. */
|
||||
entityType?: string | string[]
|
||||
entityId?: string
|
||||
action?: string
|
||||
performedBy?: string
|
||||
performedAtAfter?: string
|
||||
performedAtBefore?: string
|
||||
page?: number
|
||||
itemsPerPage?: number
|
||||
}
|
||||
|
||||
export interface AuditLogEntityTypes {
|
||||
id: string
|
||||
entityTypes: string[]
|
||||
}
|
||||
|
||||
@@ -21,7 +21,19 @@ export interface UserListItem {
|
||||
isAdmin: boolean
|
||||
roles: string[]
|
||||
directPermissions: string[]
|
||||
/** IRIs des sites autorises (ticket 2 module Sites). */
|
||||
}
|
||||
|
||||
/**
|
||||
* Detail RBAC d'un user, renvoye par GET /api/users/{id}/rbac (groupe user:rbac:read).
|
||||
* Utilise par UserRbacDrawer pour initialiser son formulaire avec l'etat complet
|
||||
* (sites inclus). Le endpoint de liste /api/users reste volontairement leger et
|
||||
* n'expose pas ces champs.
|
||||
*/
|
||||
export interface UserRbacDetail {
|
||||
id: number
|
||||
isAdmin: boolean
|
||||
roles: string[]
|
||||
directPermissions: string[]
|
||||
sites: string[]
|
||||
}
|
||||
|
||||
|
||||
52
frontend/shared/utils/__tests__/debounce.test.ts
Normal file
52
frontend/shared/utils/__tests__/debounce.test.ts
Normal file
@@ -0,0 +1,52 @@
|
||||
import { describe, it, expect, vi } from 'vitest'
|
||||
import { debounce } from '../debounce'
|
||||
|
||||
describe('debounce', () => {
|
||||
it('attend delay ms avant d\'appeler fn une seule fois apres plusieurs invocations rapides', () => {
|
||||
vi.useFakeTimers()
|
||||
const fn = vi.fn()
|
||||
const debounced = debounce(fn, 100)
|
||||
|
||||
debounced()
|
||||
debounced()
|
||||
debounced()
|
||||
expect(fn).not.toHaveBeenCalled()
|
||||
|
||||
vi.advanceTimersByTime(100)
|
||||
expect(fn).toHaveBeenCalledTimes(1)
|
||||
|
||||
vi.useRealTimers()
|
||||
})
|
||||
|
||||
it('passe les arguments du dernier appel a fn', () => {
|
||||
vi.useFakeTimers()
|
||||
const fn = vi.fn<(a: string, b: number) => void>()
|
||||
const debounced = debounce(fn, 50)
|
||||
|
||||
debounced('first', 1)
|
||||
debounced('second', 2)
|
||||
debounced('third', 3)
|
||||
vi.advanceTimersByTime(50)
|
||||
|
||||
expect(fn).toHaveBeenCalledTimes(1)
|
||||
expect(fn).toHaveBeenCalledWith('third', 3)
|
||||
|
||||
vi.useRealTimers()
|
||||
})
|
||||
|
||||
it('autorise plusieurs executions espacees dans le temps', () => {
|
||||
vi.useFakeTimers()
|
||||
const fn = vi.fn()
|
||||
const debounced = debounce(fn, 50)
|
||||
|
||||
debounced()
|
||||
vi.advanceTimersByTime(50)
|
||||
expect(fn).toHaveBeenCalledTimes(1)
|
||||
|
||||
debounced()
|
||||
vi.advanceTimersByTime(50)
|
||||
expect(fn).toHaveBeenCalledTimes(2)
|
||||
|
||||
vi.useRealTimers()
|
||||
})
|
||||
})
|
||||
@@ -1,8 +1,33 @@
|
||||
/**
|
||||
* Schemas Hydra / API Platform 4.
|
||||
*
|
||||
* Important : API Platform 4 abandonne le prefixe `hydra:` dans les noms de
|
||||
* proprietes (compare a la version 3). Un GET /api/audit-logs renvoie :
|
||||
* { "@context": ..., "@id": ..., "@type": "...",
|
||||
* "member": [...],
|
||||
* "totalItems": 30,
|
||||
* "view": { "@id": ..., "@type": "...", "first": ..., "next": ..., ... } }
|
||||
*
|
||||
* En `application/json` (sans ld), API Platform retourne un simple tableau
|
||||
* plat sans ces metadonnees — on doit donc explicitement demander
|
||||
* `application/ld+json` (via l'option `headers: { Accept: ... }` de useApi)
|
||||
* pour avoir acces a la pagination.
|
||||
*/
|
||||
export interface HydraView {
|
||||
'@id'?: string
|
||||
'@type'?: string
|
||||
first?: string
|
||||
last?: string
|
||||
next?: string
|
||||
previous?: string
|
||||
}
|
||||
|
||||
export interface HydraCollection<T> {
|
||||
'hydra:member': T[]
|
||||
'hydra:totalItems': number
|
||||
member: T[]
|
||||
totalItems: number
|
||||
view?: HydraView
|
||||
}
|
||||
|
||||
export function extractHydraMembers<T>(collection: HydraCollection<T>): T[] {
|
||||
return collection['hydra:member'] ?? []
|
||||
return collection.member ?? []
|
||||
}
|
||||
|
||||
15
frontend/shared/utils/debounce.ts
Normal file
15
frontend/shared/utils/debounce.ts
Normal file
@@ -0,0 +1,15 @@
|
||||
/**
|
||||
* Utilitaire de debounce partage.
|
||||
*
|
||||
* Retarde l'execution d'une fonction : chaque appel reset un timer et
|
||||
* l'execution reelle n'a lieu qu'apres `delay` ms sans nouvelle invocation.
|
||||
* Utile pour eviter un spam d'appels reseau sur un champ de recherche
|
||||
* (une requete par touche -> une seule requete apres la derniere frappe).
|
||||
*/
|
||||
export function debounce<T extends (...args: never[]) => void>(fn: T, delay: number): T {
|
||||
let timer: ReturnType<typeof setTimeout> | null = null
|
||||
return ((...args: Parameters<T>) => {
|
||||
if (null !== timer) clearTimeout(timer)
|
||||
timer = setTimeout(() => fn(...args), delay)
|
||||
}) as T
|
||||
}
|
||||
112
frontend/tests/e2e/_fixtures/personas.ts
Normal file
112
frontend/tests/e2e/_fixtures/personas.ts
Normal file
@@ -0,0 +1,112 @@
|
||||
/**
|
||||
* Definition des 6 personas utilises dans les tests E2E.
|
||||
*
|
||||
* Source de verite unique partagee entre :
|
||||
* - le seed backend (`bin/console app:seed-e2e`)
|
||||
* - les tests Playwright (via `loginAs`)
|
||||
*
|
||||
* Regle : chaque persona cible une case precise de la matrice RBAC.
|
||||
* Si tu ajoutes une permission au domaine, tu NE crees pas un nouveau
|
||||
* persona par reflexe — tu ajustes un persona existant si possible.
|
||||
* L'objectif est de garder ce set petit et comprehensible a 6 mois.
|
||||
*
|
||||
* IMPORTANT : ces personas sont recrees a chaque `app:seed-e2e`. Ne jamais
|
||||
* reutiliser les users dev (admin/alice/bob) dans les tests : ils evoluent
|
||||
* au gre des fixtures de demo et casseraient la suite E2E.
|
||||
*/
|
||||
|
||||
export type PersonaKey =
|
||||
| 'super-admin'
|
||||
| 'user-full'
|
||||
| 'user-readonly'
|
||||
| 'user-users-only'
|
||||
| 'user-audit-only'
|
||||
| 'user-nothing'
|
||||
|
||||
export interface Persona {
|
||||
key: PersonaKey
|
||||
username: string
|
||||
password: string
|
||||
isAdmin: boolean
|
||||
// Permissions directes attribuees en dur (on bypasse les roles pour
|
||||
// garder le seed simple et la correspondance test<->permission directe).
|
||||
permissions: string[]
|
||||
// Contenu attendu de la sidebar (admin links). Utilise par le test
|
||||
// sidebar-visibility pour driver la matrice. Les valeurs correspondent
|
||||
// aux slugs de route (`/admin/<slug>`), volontairement stables quand
|
||||
// la copie/i18n change.
|
||||
expectedAdminLinks: Array<'users' | 'roles' | 'sites' | 'audit-log'>
|
||||
}
|
||||
|
||||
const SHARED_PASSWORD = 'e2e-secret'
|
||||
|
||||
export const personas: Record<PersonaKey, Persona> = {
|
||||
'super-admin': {
|
||||
key: 'super-admin',
|
||||
username: 'e2e.super-admin',
|
||||
password: SHARED_PASSWORD,
|
||||
isAdmin: true,
|
||||
permissions: [],
|
||||
expectedAdminLinks: ['users', 'roles', 'sites', 'audit-log'],
|
||||
},
|
||||
'user-full': {
|
||||
key: 'user-full',
|
||||
username: 'e2e.user-full',
|
||||
password: SHARED_PASSWORD,
|
||||
isAdmin: false,
|
||||
permissions: [
|
||||
'core.users.view',
|
||||
'core.users.manage',
|
||||
'core.roles.view',
|
||||
'core.roles.manage',
|
||||
'core.audit_log.view',
|
||||
'sites.view',
|
||||
'sites.manage',
|
||||
'sites.bypass_scope',
|
||||
],
|
||||
expectedAdminLinks: ['users', 'roles', 'sites', 'audit-log'],
|
||||
},
|
||||
'user-readonly': {
|
||||
key: 'user-readonly',
|
||||
username: 'e2e.user-readonly',
|
||||
password: SHARED_PASSWORD,
|
||||
isAdmin: false,
|
||||
permissions: [
|
||||
'core.users.view',
|
||||
'core.roles.view',
|
||||
'core.audit_log.view',
|
||||
'sites.view',
|
||||
],
|
||||
expectedAdminLinks: ['users', 'roles', 'sites', 'audit-log'],
|
||||
},
|
||||
'user-users-only': {
|
||||
key: 'user-users-only',
|
||||
username: 'e2e.user-users-only',
|
||||
password: SHARED_PASSWORD,
|
||||
isAdmin: false,
|
||||
permissions: ['core.users.view', 'core.users.manage'],
|
||||
expectedAdminLinks: ['users'],
|
||||
},
|
||||
'user-audit-only': {
|
||||
key: 'user-audit-only',
|
||||
username: 'e2e.user-audit-only',
|
||||
password: SHARED_PASSWORD,
|
||||
isAdmin: false,
|
||||
permissions: ['core.audit_log.view'],
|
||||
expectedAdminLinks: ['audit-log'],
|
||||
},
|
||||
'user-nothing': {
|
||||
key: 'user-nothing',
|
||||
username: 'e2e.user-nothing',
|
||||
password: SHARED_PASSWORD,
|
||||
isAdmin: false,
|
||||
permissions: [],
|
||||
expectedAdminLinks: [],
|
||||
},
|
||||
}
|
||||
|
||||
export function getPersona(key: PersonaKey): Persona {
|
||||
return personas[key]
|
||||
}
|
||||
|
||||
export const ALL_ADMIN_LINKS = ['users', 'roles', 'sites', 'audit-log'] as const
|
||||
65
frontend/tests/e2e/auth/login.spec.ts
Normal file
65
frontend/tests/e2e/auth/login.spec.ts
Normal file
@@ -0,0 +1,65 @@
|
||||
import { expect, test } from '@playwright/test'
|
||||
import { LoginPage } from '../helpers/pages/LoginPage'
|
||||
import { getPersona } from '../_fixtures/personas'
|
||||
|
||||
/**
|
||||
* Tests du flow login/logout via l'UI.
|
||||
*
|
||||
* C'est le SEUL fichier qui traverse le formulaire pour de vrai. Les autres
|
||||
* specs utilisent `loginAs()` qui pose directement le cookie BEARER via API,
|
||||
* 10x plus rapide et decouple du form HTML.
|
||||
*/
|
||||
test.describe('Login', () => {
|
||||
test('login valide pose le cookie BEARER et redirige vers /', async ({ page, context }) => {
|
||||
const superAdmin = getPersona('super-admin')
|
||||
const loginPage = new LoginPage(page)
|
||||
|
||||
await loginPage.goto()
|
||||
await loginPage.fillAndSubmit(superAdmin.username, superAdmin.password)
|
||||
|
||||
// La redirection se fait apres un `navigateTo('/')` dans login.vue.
|
||||
await page.waitForURL('/')
|
||||
await expect(page).toHaveURL('/')
|
||||
|
||||
// Le cookie BEARER (HTTP-only) doit etre pose par Symfony.
|
||||
const cookies = await context.cookies()
|
||||
const bearer = cookies.find(c => c.name === 'BEARER')
|
||||
expect(bearer, 'Le cookie BEARER doit etre pose apres un login valide').toBeDefined()
|
||||
expect(bearer?.httpOnly).toBe(true)
|
||||
})
|
||||
|
||||
test('login invalide reste sur /login et n\'emet pas de cookie', async ({ page, context }) => {
|
||||
const loginPage = new LoginPage(page)
|
||||
|
||||
await loginPage.goto()
|
||||
await loginPage.fillAndSubmit('e2e.super-admin', 'wrong-password')
|
||||
|
||||
// On ne doit PAS etre redirige — le handleSubmit swallow la 401 via toast,
|
||||
// le user reste sur /login pour corriger.
|
||||
await page.waitForTimeout(500)
|
||||
await expect(page).toHaveURL(/\/login$/)
|
||||
|
||||
const cookies = await context.cookies()
|
||||
const bearer = cookies.find(c => c.name === 'BEARER')
|
||||
expect(bearer, 'Aucun cookie BEARER ne doit etre pose apres un login invalide').toBeUndefined()
|
||||
})
|
||||
|
||||
test('logout efface le cookie et redirige vers /login', async ({ page, context }) => {
|
||||
const superAdmin = getPersona('super-admin')
|
||||
const loginPage = new LoginPage(page)
|
||||
|
||||
// 1. Login d'abord
|
||||
await loginPage.goto()
|
||||
await loginPage.fillAndSubmit(superAdmin.username, superAdmin.password)
|
||||
await page.waitForURL('/')
|
||||
|
||||
// 2. Navigation vers /logout (il y a un lien "Deconnexion" dans la sidebar)
|
||||
await page.goto('/logout')
|
||||
await page.waitForURL(/\/login$/)
|
||||
|
||||
// 3. Le cookie BEARER doit avoir ete supprime par le firewall de logout
|
||||
const cookies = await context.cookies()
|
||||
const bearer = cookies.find(c => c.name === 'BEARER')
|
||||
expect(bearer, 'Le cookie BEARER doit etre supprime apres logout').toBeUndefined()
|
||||
})
|
||||
})
|
||||
45
frontend/tests/e2e/helpers/loginAs.ts
Normal file
45
frontend/tests/e2e/helpers/loginAs.ts
Normal file
@@ -0,0 +1,45 @@
|
||||
import type { BrowserContext, Page } from '@playwright/test'
|
||||
import { type PersonaKey, getPersona } from '../_fixtures/personas'
|
||||
|
||||
/**
|
||||
* Login programmatique : pose le cookie BEARER via l'API sans passer par le
|
||||
* formulaire de login.
|
||||
*
|
||||
* Utilise ce helper dans TOUS les tests qui ne testent pas le flow login
|
||||
* lui-meme (sidebar visibility, route guards, etc.). Ca evite de payer 2s
|
||||
* par test sur le form HTML et ca isole les tests : si le form login casse,
|
||||
* seul `login.spec.ts` est rouge, pas toute la suite.
|
||||
*
|
||||
* Impl : on issue une requete POST /api/login_check avec les creds du persona.
|
||||
* Nginx reecrit vers /login_check, Symfony pose le cookie BEARER sur le
|
||||
* context du browser. Apres ca, n'importe quelle navigation est authentifiee.
|
||||
*/
|
||||
export async function loginAs(context: BrowserContext, persona: PersonaKey, baseURL?: string): Promise<void> {
|
||||
const { username, password } = getPersona(persona)
|
||||
const base = baseURL ?? 'http://localhost:3004'
|
||||
|
||||
const response = await context.request.post(`${base}/api/login_check`, {
|
||||
data: { username, password },
|
||||
})
|
||||
|
||||
if (!response.ok()) {
|
||||
const body = await response.text()
|
||||
throw new Error(
|
||||
`loginAs(${persona}) a echoue : ${response.status()} ${body}. `
|
||||
+ 'Verifier que le backend tourne et que `make seed-e2e` a ete lance.',
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Helper d'appoint quand on veut tester VIA l'UI (login.spec.ts uniquement).
|
||||
* Passe par le formulaire rendu, clique sur le bouton. A ne PAS utiliser
|
||||
* dans les autres tests — preferer `loginAs()`.
|
||||
*/
|
||||
export async function loginViaForm(page: Page, persona: PersonaKey): Promise<void> {
|
||||
const { username, password } = getPersona(persona)
|
||||
await page.goto('/login')
|
||||
await page.getByLabel("Nom d'utilisateur").fill(username)
|
||||
await page.getByLabel('Mot de passe').fill(password)
|
||||
await page.getByRole('button', { name: 'Se connecter' }).click()
|
||||
}
|
||||
32
frontend/tests/e2e/helpers/pages/LoginPage.ts
Normal file
32
frontend/tests/e2e/helpers/pages/LoginPage.ts
Normal file
@@ -0,0 +1,32 @@
|
||||
import type { Locator, Page } from '@playwright/test'
|
||||
|
||||
/**
|
||||
* Page Object du formulaire de login (/login).
|
||||
*
|
||||
* Selecteurs : on s'appuie sur les labels/roles accessibles (stable vs les
|
||||
* changements de CSS/Tailwind). Le jour ou on veut un selecteur plus dur,
|
||||
* on ajoute des `data-testid` sur login.vue.
|
||||
*/
|
||||
export class LoginPage {
|
||||
readonly page: Page
|
||||
readonly usernameInput: Locator
|
||||
readonly passwordInput: Locator
|
||||
readonly submitButton: Locator
|
||||
|
||||
constructor(page: Page) {
|
||||
this.page = page
|
||||
this.usernameInput = page.getByLabel("Nom d'utilisateur")
|
||||
this.passwordInput = page.getByLabel('Mot de passe')
|
||||
this.submitButton = page.getByRole('button', { name: 'Se connecter' })
|
||||
}
|
||||
|
||||
async goto(): Promise<void> {
|
||||
await this.page.goto('/login')
|
||||
}
|
||||
|
||||
async fillAndSubmit(username: string, password: string): Promise<void> {
|
||||
await this.usernameInput.fill(username)
|
||||
await this.passwordInput.fill(password)
|
||||
await this.submitButton.click()
|
||||
}
|
||||
}
|
||||
33
frontend/tests/e2e/helpers/pages/SidebarComponent.ts
Normal file
33
frontend/tests/e2e/helpers/pages/SidebarComponent.ts
Normal file
@@ -0,0 +1,33 @@
|
||||
import type { Locator, Page } from '@playwright/test'
|
||||
|
||||
export type AdminLinkSlug = 'users' | 'roles' | 'sites' | 'audit-log'
|
||||
|
||||
/**
|
||||
* Page Object de la sidebar (MalioSidebar), scope sur les items "admin".
|
||||
*
|
||||
* Strategie selecteur : `a[href=...]` plutot que le texte i18n. Le slug de
|
||||
* route ne change pas quand on retraduit ou renomme une entree — c'est le
|
||||
* selecteur le plus stable pour cette suite.
|
||||
*
|
||||
* Si un jour la sidebar change et les slugs bougent, on met a jour CE
|
||||
* fichier uniquement ; les specs continuent de passer.
|
||||
*/
|
||||
export class SidebarComponent {
|
||||
readonly page: Page
|
||||
|
||||
constructor(page: Page) {
|
||||
this.page = page
|
||||
}
|
||||
|
||||
adminLink(slug: AdminLinkSlug): Locator {
|
||||
return this.page.locator(`a[href="/admin/${slug}"]`)
|
||||
}
|
||||
|
||||
accountDashboardLink(): Locator {
|
||||
return this.page.locator('a[href="/"]').first()
|
||||
}
|
||||
|
||||
logoutLink(): Locator {
|
||||
return this.page.locator('a[href="/logout"]')
|
||||
}
|
||||
}
|
||||
84
frontend/tests/e2e/permissions/sidebar-visibility.spec.ts
Normal file
84
frontend/tests/e2e/permissions/sidebar-visibility.spec.ts
Normal file
@@ -0,0 +1,84 @@
|
||||
import { expect, test } from '@playwright/test'
|
||||
import { loginAs } from '../helpers/loginAs'
|
||||
import { SidebarComponent } from '../helpers/pages/SidebarComponent'
|
||||
import { ALL_ADMIN_LINKS, type PersonaKey, getPersona, personas } from '../_fixtures/personas'
|
||||
|
||||
/**
|
||||
* Test strategique : la matrice persona <-> liens admin visibles.
|
||||
*
|
||||
* Valide que `SidebarProvider` (back) + `useSidebar` (front) filtrent bien
|
||||
* les items admin selon les permissions RBAC de chaque user.
|
||||
*
|
||||
* Regle d'evolution : ajouter une permission ou un persona = 1 ligne a
|
||||
* modifier dans `personas.ts` et cote back (`SeedE2ECommand`) + `sidebar.php`.
|
||||
* Ce fichier ne bouge pas.
|
||||
*/
|
||||
test.describe('Sidebar visibility', () => {
|
||||
const personaKeys: PersonaKey[] = [
|
||||
'super-admin',
|
||||
'user-full',
|
||||
'user-readonly',
|
||||
'user-users-only',
|
||||
'user-audit-only',
|
||||
'user-nothing',
|
||||
]
|
||||
|
||||
for (const key of personaKeys) {
|
||||
const persona = getPersona(key)
|
||||
|
||||
test(`${persona.key} ne voit que ses liens admin autorises`, async ({ page, context }) => {
|
||||
await loginAs(context, persona.key)
|
||||
await page.goto('/')
|
||||
|
||||
const sidebar = new SidebarComponent(page)
|
||||
|
||||
// Attente semantique : on ancre sur un lien toujours present pour
|
||||
// tout user authentifie (Mon compte > Tableau de bord). Remplace
|
||||
// `networkidle` qui est reconnu instable en CI (SPAs avec polling
|
||||
// ou HMR peuvent ne jamais quitter cet etat).
|
||||
await expect(sidebar.accountDashboardLink()).toBeVisible({ timeout: 10000 })
|
||||
|
||||
for (const link of ALL_ADMIN_LINKS) {
|
||||
const locator = sidebar.adminLink(link)
|
||||
const shouldBeVisible = persona.expectedAdminLinks.includes(link)
|
||||
|
||||
if (shouldBeVisible) {
|
||||
await expect(
|
||||
locator,
|
||||
`${persona.key} doit voir le lien /admin/${link}`,
|
||||
).toBeVisible()
|
||||
} else {
|
||||
await expect(
|
||||
locator,
|
||||
`${persona.key} ne doit PAS voir le lien /admin/${link}`,
|
||||
).toHaveCount(0)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
test('user-nothing voit toujours le dashboard et le logout (section Mon compte sans permission)', async ({
|
||||
page,
|
||||
context,
|
||||
}) => {
|
||||
// La section "Mon compte" n'est gardee par aucune permission : tout user
|
||||
// authentifie voit le dashboard et peut se deconnecter. Ce test protege
|
||||
// contre une regression qui mettrait un gate RBAC par inadvertance
|
||||
// dessus — ca bloquerait le logout de users sans permissions.
|
||||
await loginAs(context, 'user-nothing')
|
||||
await page.goto('/')
|
||||
|
||||
const sidebar = new SidebarComponent(page)
|
||||
// Meme strategie que ci-dessus : ancrage semantique plutot que
|
||||
// `networkidle` pour eviter les faux timeouts en CI.
|
||||
await expect(sidebar.accountDashboardLink()).toBeVisible({ timeout: 10000 })
|
||||
await expect(sidebar.logoutLink()).toBeVisible()
|
||||
})
|
||||
|
||||
test('la liste des personas dans personas.ts couvre toutes les combinaisons admin attendues', () => {
|
||||
// Test meta : si quelqu'un ajoute un persona dans personas.ts sans le
|
||||
// seeder cote back (SeedE2ECommand), le test sidebar pour ce persona
|
||||
// echouera (loginAs 401). Ce test rappelle la coherence attendue.
|
||||
expect(Object.keys(personas)).toEqual(personaKeys)
|
||||
})
|
||||
})
|
||||
@@ -7,6 +7,10 @@ export default defineConfig({
|
||||
test: {
|
||||
environment: 'happy-dom',
|
||||
globals: true,
|
||||
// Exclure les tests E2E Playwright : meme extension .spec.ts mais
|
||||
// runtime different (navigateur vrai vs happy-dom). Playwright les
|
||||
// ramasse via son propre testDir declare dans playwright.config.ts.
|
||||
exclude: ['**/node_modules/**', '**/dist/**', 'tests/e2e/**'],
|
||||
},
|
||||
resolve: {
|
||||
alias: {
|
||||
|
||||
Reference in New Issue
Block a user