feat(frontend): full FR i18n via react-i18next + 2-tab engagement detail (sprint 12) #14

Merged
knacky merged 14 commits from sprint/12-i18n-fr into main 2026-06-22 08:25:51 +00:00
6 changed files with 15 additions and 11 deletions
Showing only changes of commit ac0bc8d1b2 - Show all commits

View File

@@ -124,7 +124,7 @@ export function Layout(): JSX.Element {
{/* footer — fixed dark slab, never inverts */} {/* footer — fixed dark slab, never inverts */}
<footer className="bg-slab text-slab-text"> <footer className="bg-slab text-slab-text">
<div className="mx-auto w-full max-w-page px-xl py-xl text-[12px] text-slab-muted"> <div className="mx-auto w-full max-w-page px-xl py-xl text-[12px] text-slab-muted">
Mimic Internal Purple Team tooling. Authorized engagements only. {t('nav.footer')}
</div> </div>
</footer> </footer>
</div> </div>

View File

@@ -1,5 +1,5 @@
import { useTranslation } from 'react-i18next';
import type { SimulationStatus } from '@/api/types'; import type { SimulationStatus } from '@/api/types';
import { simulationStatusLabel } from '@/i18n/status';
const STYLES: Record<SimulationStatus, string> = { const STYLES: Record<SimulationStatus, string> = {
pending: 'bg-cloud text-graphite border border-hairline', pending: 'bg-cloud text-graphite border border-hairline',
@@ -9,13 +9,14 @@ const STYLES: Record<SimulationStatus, string> = {
}; };
export function SimulationStatusBadge({ status }: { status: SimulationStatus }): JSX.Element { export function SimulationStatusBadge({ status }: { status: SimulationStatus }): JSX.Element {
const { t } = useTranslation();
return ( return (
<span <span
className={`inline-flex items-center rounded-pill px-3 py-[6px] text-[14px] leading-[1.3] font-medium ${STYLES[status]}`} className={`inline-flex items-center rounded-pill px-3 py-[6px] text-[14px] leading-[1.3] font-medium ${STYLES[status]}`}
data-testid="simulation-status-badge" data-testid="simulation-status-badge"
data-status={status} data-status={status}
> >
{simulationStatusLabel(status)} {t(`status.simulation.${status}`)}
</span> </span>
); );
} }

View File

@@ -1,5 +1,5 @@
import { useTranslation } from 'react-i18next';
import type { EngagementStatus } from '@/api/types'; import type { EngagementStatus } from '@/api/types';
import { engagementStatusLabel } from '@/i18n/status';
const STYLES: Record<EngagementStatus, string> = { const STYLES: Record<EngagementStatus, string> = {
planned: 'bg-warn-soft text-warn border border-warn', planned: 'bg-warn-soft text-warn border border-warn',
@@ -8,13 +8,14 @@ const STYLES: Record<EngagementStatus, string> = {
}; };
export function StatusBadge({ status }: { status: EngagementStatus }): JSX.Element { export function StatusBadge({ status }: { status: EngagementStatus }): JSX.Element {
const { t } = useTranslation();
return ( return (
<span <span
className={`inline-flex items-center rounded-pill px-3 py-[6px] text-[14px] leading-[1.3] font-medium ${STYLES[status]}`} className={`inline-flex items-center rounded-pill px-3 py-[6px] text-[14px] leading-[1.3] font-medium ${STYLES[status]}`}
data-testid="status-badge" data-testid="status-badge"
data-status={status} data-status={status}
> >
{engagementStatusLabel(status)} {t(`status.engagement.${status}`)}
</span> </span>
); );
} }

View File

@@ -23,7 +23,8 @@
"templates": "Templates", "templates": "Templates",
"users": "Utilisateurs", "users": "Utilisateurs",
"signOut": "Se déconnecter", "signOut": "Se déconnecter",
"brand": "Mimic" "brand": "Mimic",
"footer": "Mimic — Outillage interne Purple Team. Engagements autorisés uniquement."
}, },
"auth": { "auth": {
"login": { "login": {

View File

@@ -12,7 +12,7 @@ import { SimulationList } from '@/components/SimulationList';
import { ExportEngagementButton } from '@/components/ExportEngagementButton'; import { ExportEngagementButton } from '@/components/ExportEngagementButton';
import { BackLink } from '@/components/BackLink'; import { BackLink } from '@/components/BackLink';
import { Tabs } from '@/components/Tabs'; import { Tabs } from '@/components/Tabs';
import { formatDateTime } from '@/lib/format'; import { formatDate } from '@/lib/format';
type TabId = 'description' | 'simulations'; type TabId = 'description' | 'simulations';
@@ -78,13 +78,13 @@ export function EngagementDetailPage(): JSX.Element {
<header className="flex items-start justify-between gap-md"> <header className="flex items-start justify-between gap-md">
<dl className="grid grid-cols-2 gap-x-lg gap-y-xxs text-caption-md"> <dl className="grid grid-cols-2 gap-x-lg gap-y-xxs text-caption-md">
<dt className="text-graphite">{t('engagement.detail.schedule.startDate')}</dt> <dt className="text-graphite">{t('engagement.detail.schedule.startDate')}</dt>
<dd className="font-mono">{eng.start_date}</dd> <dd className="font-mono">{formatDate(eng.start_date)}</dd>
<dt className="text-graphite">{t('engagement.detail.schedule.endDate')}</dt> <dt className="text-graphite">{t('engagement.detail.schedule.endDate')}</dt>
<dd className="font-mono">{eng.end_date ?? '—'}</dd> <dd className="font-mono">{eng.end_date ? formatDate(eng.end_date) : '—'}</dd>
<dt className="text-graphite">{t('engagement.detail.schedule.status')}</dt> <dt className="text-graphite">{t('engagement.detail.schedule.status')}</dt>
<dd><StatusBadge status={eng.status} /></dd> <dd><StatusBadge status={eng.status} /></dd>
<dt className="text-graphite">{t('engagement.detail.schedule.createdAt')}</dt> <dt className="text-graphite">{t('engagement.detail.schedule.createdAt')}</dt>
<dd className="font-mono">{formatDateTime(eng.created_at)}</dd> <dd className="font-mono">{formatDate(eng.created_at)}</dd>
</dl> </dl>
{canEditEngagements ? ( {canEditEngagements ? (
<Link to={`/engagements/${eng.id}/edit`} className="btn-outline shrink-0"> <Link to={`/engagements/${eng.id}/edit`} className="btn-outline shrink-0">

View File

@@ -1,4 +1,5 @@
import { Fragment, useState, type FormEvent } from 'react'; import { Fragment, useState, type FormEvent } from 'react';
import { formatDate } from '@/lib/format';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { extractApiError } from '@/api/client'; import { extractApiError } from '@/api/client';
import type { Role, User } from '@/api/types'; import type { Role, User } from '@/api/types';
@@ -225,7 +226,7 @@ export function UsersAdminPage(): JSX.Element {
disabled={patchMutation.isPending} disabled={patchMutation.isPending}
/> />
</td> </td>
<td className="text-charcoal font-mono">{u.created_at}</td> <td className="text-charcoal font-mono">{formatDate(u.created_at)}</td>
<td className="text-right"> <td className="text-right">
<div className="inline-flex gap-sm"> <div className="inline-flex gap-sm">
<button <button