9025c64c0b
Système de gestion de traductions pensé en CMS headless : un back-office pour ceux qui traduisent, une API pour ce qui consomme. Architecture - Symfony 7.4 / API Platform 4.3 / MariaDB 11.4, SPA React 19 servie en même origine — ce qui rend viable le cookie de session plutôt qu'un jeton en localStorage. - Deux APIs séparées : Management (session ou clé) et Delivery (stateless, clé seule). Les fusionner ferait porter à chaque lecture de bundle le coût de la session. - Stockage canonique en ICU MessageFormat, sérialisation par plateforme. Le format d'une plateforme ne contamine pas la base. - Publication par releases immuables ; le déploiement est un déplacement de pointeur, donc le rollback aussi. - Isolation multi-organisation par filtre Doctrine, avec un test d'architecture qui casse la CI si une entité échappe à l'invariant. Éditeur, deux vues - Par langue : source et cible, jamais douze colonnes. Grille virtualisée, saisie sans bouton « Enregistrer », panneau de contexte permanent. - Par clé : une clé, toutes ses langues empilées et repliées. Répond à « ce libellé est-il prêt partout ? ». - Mode Focus dans les deux : une file à vider, ⌘↵ pour enchaîner. - Le traducteur ne voit jamais d'ICU : pastilles de variables, un champ par catégorie CLDR de la langue cible. Administration - Deux niveaux : projet (membres, clés API, plateformes) et organisation (annuaire des comptes, création de projets). - Invitations par e-mail, jeton 256 bits stocké haché. - Désactiver un compte coupe les sessions en cours, pas seulement les connexions suivantes. - Les plateformes s'archivent ; ni elles ni les environnements ne se suppriment — la trace explique pourquoi telle clé existe. CLI tqs - PHAR autonome de 3 Mo, autoloader généré : le dépôt client ne dépend ni de Composer ni de la disponibilité de TQ-Slator. - init / push / pull / status ; le sync est non destructif par défaut et son prune est scopé plateforme. 126 tests, PHPStan niveau 8. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
721 lines
30 KiB
TypeScript
721 lines
30 KiB
TypeScript
import { useState } from 'react';
|
|
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
|
|
import { useParams } from 'react-router-dom';
|
|
import { api } from '@/api/client';
|
|
import type { AdminEnvironment, AdminPlatform, PlatformList } from '@/api/types';
|
|
import { humanMessage } from '@/auth/AuthProvider';
|
|
import { ProjectNav } from '@/components/ProjectNav';
|
|
import { RequiresAdmin } from '@/components/RequiresAdmin';
|
|
|
|
const KIND_LABELS: Record<string, string> = {
|
|
web: 'Application web',
|
|
ios: 'iOS',
|
|
android: 'Android',
|
|
backend: 'Back-end',
|
|
email: 'E-mails',
|
|
other: 'Autre',
|
|
};
|
|
|
|
/**
|
|
* Les surfaces d'un projet, et ses cibles de déploiement.
|
|
*
|
|
* Deux notions distinctes réunies sur un écran parce qu'on s'y rend pour la
|
|
* même raison : rendre un projet livrable. Une **plateforme** dit quelles clés
|
|
* entrent dans un fichier et dans quelle syntaxe ; un **environnement** dit
|
|
* quelle version de ce fichier est servie. Il faut les deux, et un projet neuf
|
|
* n'a que le second.
|
|
*/
|
|
export function PlatformsPage() {
|
|
const { projectUuid = '' } = useParams();
|
|
|
|
const stats = useQuery({ queryKey: ['stats', projectUuid], queryFn: () => api.stats(projectUuid) });
|
|
const platforms = useQuery({
|
|
queryKey: ['platforms', projectUuid],
|
|
queryFn: () => api.platforms(projectUuid),
|
|
});
|
|
const environments = useQuery({
|
|
queryKey: ['environments', projectUuid],
|
|
queryFn: () => api.environments(projectUuid),
|
|
});
|
|
|
|
if (stats.isSuccess && !stats.data.viewer.canAdminister) {
|
|
return <RequiresAdmin projectUuid={projectUuid} />;
|
|
}
|
|
|
|
const active = platforms.data?.platforms.filter((p) => !p.isArchived) ?? [];
|
|
const archived = platforms.data?.platforms.filter((p) => p.isArchived) ?? [];
|
|
|
|
return (
|
|
<div className="flex h-full flex-col bg-ink-100">
|
|
<header className="shrink-0 border-b border-ink-200 bg-white px-4 py-2.5">
|
|
<ProjectNav
|
|
projectUuid={projectUuid}
|
|
canAdminister={stats.data?.viewer.canAdminister ?? false}
|
|
/>
|
|
</header>
|
|
|
|
<div className="min-h-0 flex-1 overflow-y-auto">
|
|
<div className="mx-auto max-w-4xl px-6 py-8">
|
|
<h1 className="text-xl font-semibold tracking-tight text-ink-900">
|
|
Plateformes et environnements
|
|
</h1>
|
|
<p className="mt-1 text-sm text-ink-500">
|
|
Ce que {stats.data?.projectName} produit, et où cela est servi.
|
|
</p>
|
|
|
|
{/* Le cas du projet neuf : il a ses environnements mais aucune
|
|
plateforme, donc rien à livrer. Le dire avant que
|
|
l'utilisateur ne découvre l'échec au moment de publier. */}
|
|
{platforms.isSuccess && active.length === 0 && (
|
|
<p className="mt-5 rounded-md border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-900">
|
|
Aucune plateforme active : ce projet ne peut produire aucun fichier de
|
|
traduction. Déclarez-en une pour rendre la publication possible.
|
|
</p>
|
|
)}
|
|
|
|
<section className="mt-6">
|
|
<h2 className="mb-3 text-[11px] font-semibold uppercase tracking-wide text-ink-400">
|
|
Plateformes
|
|
</h2>
|
|
|
|
<div className="divide-y divide-ink-100 overflow-hidden rounded-lg border border-ink-200 bg-white">
|
|
{active.map((platform) => (
|
|
<PlatformRow
|
|
key={platform.uuid}
|
|
projectUuid={projectUuid}
|
|
platform={platform}
|
|
options={platforms.data}
|
|
isLastActive={active.length === 1}
|
|
/>
|
|
))}
|
|
|
|
{active.length === 0 && platforms.isSuccess && (
|
|
<p className="px-4 py-6 text-center text-sm text-ink-400">
|
|
Aucune plateforme active.
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
<CreatePlatformForm
|
|
projectUuid={projectUuid}
|
|
options={platforms.data}
|
|
onDone={() => void platforms.refetch()}
|
|
/>
|
|
</section>
|
|
|
|
{archived.length > 0 && (
|
|
<section className="mt-8">
|
|
<h2 className="mb-3 text-[11px] font-semibold uppercase tracking-wide text-ink-400">
|
|
Archivées
|
|
</h2>
|
|
|
|
{/* Archivées et non supprimées : les clés leur restent
|
|
rattachées, et c'est cette trace qui explique
|
|
pourquoi telle clé existe. */}
|
|
<div className="divide-y divide-ink-100 overflow-hidden rounded-lg border border-dashed border-ink-300 bg-white opacity-75">
|
|
{archived.map((platform) => (
|
|
<PlatformRow
|
|
key={platform.uuid}
|
|
projectUuid={projectUuid}
|
|
platform={platform}
|
|
options={platforms.data}
|
|
isLastActive={false}
|
|
/>
|
|
))}
|
|
</div>
|
|
</section>
|
|
)}
|
|
|
|
<section className="mt-10">
|
|
<h2 className="mb-3 text-[11px] font-semibold uppercase tracking-wide text-ink-400">
|
|
Environnements
|
|
</h2>
|
|
|
|
<div className="divide-y divide-ink-100 overflow-hidden rounded-lg border border-ink-200 bg-white">
|
|
{environments.data?.environments.map((environment) => (
|
|
<EnvironmentRow
|
|
key={environment.uuid}
|
|
projectUuid={projectUuid}
|
|
environment={environment}
|
|
/>
|
|
))}
|
|
</div>
|
|
|
|
<CreateEnvironmentForm
|
|
projectUuid={projectUuid}
|
|
onDone={() => void environments.refetch()}
|
|
/>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ── Plateformes ──────────────────────────────────────────────────────────
|
|
|
|
function PlatformRow({
|
|
projectUuid,
|
|
platform,
|
|
options,
|
|
isLastActive,
|
|
}: {
|
|
projectUuid: string;
|
|
platform: AdminPlatform;
|
|
options: PlatformList | undefined;
|
|
isLastActive: boolean;
|
|
}) {
|
|
const queryClient = useQueryClient();
|
|
const [editing, setEditing] = useState(false);
|
|
const [name, setName] = useState(platform.name);
|
|
const [format, setFormat] = useState(platform.messageFormat);
|
|
const [layout, setLayout] = useState(platform.exportLayout);
|
|
const [maxLength, setMaxLength] = useState(platform.defaultMaxLength?.toString() ?? '');
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
const refresh = () => void queryClient.invalidateQueries({ queryKey: ['platforms', projectUuid] });
|
|
|
|
const save = useMutation({
|
|
mutationFn: () =>
|
|
api.updatePlatform(projectUuid, platform.uuid, {
|
|
name,
|
|
messageFormat: format,
|
|
exportLayout: layout,
|
|
defaultMaxLength: maxLength === '' ? null : Number(maxLength),
|
|
}),
|
|
onSuccess: () => {
|
|
setError(null);
|
|
setEditing(false);
|
|
refresh();
|
|
},
|
|
onError: (caught) => setError(humanMessage(caught)),
|
|
});
|
|
|
|
const toggleArchive = useMutation({
|
|
mutationFn: () =>
|
|
api.updatePlatform(projectUuid, platform.uuid, { isArchived: !platform.isArchived }),
|
|
onSuccess: () => {
|
|
setError(null);
|
|
refresh();
|
|
},
|
|
onError: (caught) => setError(humanMessage(caught)),
|
|
});
|
|
|
|
if (editing) {
|
|
return (
|
|
<form
|
|
onSubmit={(e) => {
|
|
e.preventDefault();
|
|
save.mutate();
|
|
}}
|
|
className="space-y-3 bg-ink-50 px-4 py-4"
|
|
>
|
|
<div className="flex flex-wrap gap-3">
|
|
<input
|
|
required
|
|
value={name}
|
|
onChange={(e) => setName(e.target.value)}
|
|
className="min-w-48 flex-1 rounded-md border border-ink-300 px-3 py-2 text-sm outline-none focus:border-accent"
|
|
/>
|
|
|
|
{/* Le slug est en lecture seule : il est dans les URL de
|
|
livraison, dans les tqs.config.json des dépôts clients et
|
|
dans les scripts d'intégration continue. Le changer
|
|
casserait tout cela sans qu'aucune erreur ne remonte. */}
|
|
<span
|
|
className="rounded-md border border-dashed border-ink-300 bg-ink-100 px-3 py-2 font-mono text-sm text-ink-400"
|
|
title="Le slug n'est pas modifiable : il apparaît dans les URL de livraison et dans la configuration des dépôts clients."
|
|
>
|
|
{platform.slug}
|
|
</span>
|
|
|
|
<select
|
|
value={format}
|
|
onChange={(e) => setFormat(e.target.value)}
|
|
className="rounded-md border border-ink-300 bg-white px-3 py-2 text-sm outline-none focus:border-accent"
|
|
>
|
|
{options?.formats.map((f) => (
|
|
<option key={f.value} value={f.value}>
|
|
{f.value} (.{f.fileExtension})
|
|
</option>
|
|
))}
|
|
</select>
|
|
|
|
<select
|
|
value={layout}
|
|
onChange={(e) => setLayout(e.target.value as 'nested' | 'flat')}
|
|
className="rounded-md border border-ink-300 bg-white px-3 py-2 text-sm outline-none focus:border-accent"
|
|
>
|
|
<option value="nested">imbriqué</option>
|
|
<option value="flat">à plat</option>
|
|
</select>
|
|
|
|
<input
|
|
type="number"
|
|
min={1}
|
|
value={maxLength}
|
|
onChange={(e) => setMaxLength(e.target.value)}
|
|
placeholder="longueur max"
|
|
className="w-32 rounded-md border border-ink-300 px-3 py-2 text-sm outline-none focus:border-accent"
|
|
/>
|
|
</div>
|
|
|
|
{error && <p className="text-xs text-red-600">{error}</p>}
|
|
|
|
<div className="flex items-center gap-3">
|
|
<button
|
|
type="submit"
|
|
disabled={save.isPending}
|
|
className="rounded-md bg-accent px-3 py-1.5 text-sm font-medium text-white hover:bg-indigo-700 disabled:bg-ink-300"
|
|
>
|
|
Enregistrer
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
setEditing(false);
|
|
setError(null);
|
|
}}
|
|
className="text-sm text-ink-500 hover:text-ink-800"
|
|
>
|
|
Annuler
|
|
</button>
|
|
</div>
|
|
</form>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="px-4 py-3">
|
|
<div className="flex flex-wrap items-center gap-x-3 gap-y-1">
|
|
<span className="text-sm font-medium text-ink-800">{platform.name}</span>
|
|
<span className="font-mono text-[11px] text-ink-400">{platform.slug}</span>
|
|
<span className="rounded bg-ink-100 px-1.5 py-0.5 text-[11px] text-ink-600">
|
|
{KIND_LABELS[platform.kind] ?? platform.kind}
|
|
</span>
|
|
|
|
{!platform.acceptsPush && !platform.isArchived && (
|
|
<span
|
|
className="rounded bg-amber-100 px-1.5 py-0.5 text-[11px] text-amber-900"
|
|
title="Le CLI ne peut pas pousser de clés dans ce format."
|
|
>
|
|
push impossible
|
|
</span>
|
|
)}
|
|
|
|
<span className="ml-auto flex shrink-0 items-center gap-2 text-xs">
|
|
{!platform.isArchived && (
|
|
<button
|
|
onClick={() => setEditing(true)}
|
|
className="rounded border border-ink-300 px-2 py-1 text-ink-600 hover:bg-ink-100"
|
|
>
|
|
Modifier
|
|
</button>
|
|
)}
|
|
|
|
<button
|
|
onClick={() => toggleArchive.mutate()}
|
|
disabled={toggleArchive.isPending || (isLastActive && !platform.isArchived)}
|
|
title={
|
|
isLastActive && !platform.isArchived
|
|
? 'Dernière plateforme active : l\'archiver rendrait toute publication impossible.'
|
|
: undefined
|
|
}
|
|
className={`rounded border px-2 py-1 transition-colors disabled:cursor-not-allowed disabled:opacity-40 ${
|
|
platform.isArchived
|
|
? 'border-ink-300 text-ink-600 hover:bg-ink-100'
|
|
: 'border-amber-300 text-amber-800 hover:bg-amber-50'
|
|
}`}
|
|
>
|
|
{platform.isArchived ? 'Désarchiver' : 'Archiver'}
|
|
</button>
|
|
</span>
|
|
</div>
|
|
|
|
<div className="mt-1.5 flex flex-wrap gap-x-3 text-[11px] text-ink-400">
|
|
<span className="font-mono">
|
|
{platform.messageFormat} · {platform.exportLayout === 'nested' ? 'imbriqué' : 'à plat'}
|
|
</span>
|
|
{/* Le chiffre qui rend l'archivage décidable : « 0 clé » se
|
|
retire sans réfléchir, « 340 clés » demande de vérifier. */}
|
|
<span>
|
|
{platform.keyCount} clé{platform.keyCount > 1 ? 's' : ''}
|
|
</span>
|
|
{platform.defaultMaxLength !== null && (
|
|
<span>longueur max {platform.defaultMaxLength}</span>
|
|
)}
|
|
{platform.isArchived && platform.archivedAt !== null && (
|
|
<span>archivée le {new Date(platform.archivedAt).toLocaleDateString('fr-FR')}</span>
|
|
)}
|
|
</div>
|
|
|
|
{error && <p className="mt-2 text-xs text-red-600">{error}</p>}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function CreatePlatformForm({
|
|
projectUuid,
|
|
options,
|
|
onDone,
|
|
}: {
|
|
projectUuid: string;
|
|
options: PlatformList | undefined;
|
|
onDone: () => void;
|
|
}) {
|
|
const [open, setOpen] = useState(false);
|
|
const [name, setName] = useState('');
|
|
const [slug, setSlug] = useState('');
|
|
const [kind, setKind] = useState('web');
|
|
const [format, setFormat] = useState('icu');
|
|
const [layout, setLayout] = useState('nested');
|
|
const [maxLength, setMaxLength] = useState('');
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
const create = useMutation({
|
|
mutationFn: () =>
|
|
api.createPlatform(projectUuid, {
|
|
name,
|
|
slug,
|
|
kind,
|
|
messageFormat: format,
|
|
exportLayout: layout,
|
|
defaultMaxLength: maxLength === '' ? null : Number(maxLength),
|
|
}),
|
|
onSuccess: () => {
|
|
setError(null);
|
|
setName('');
|
|
setSlug('');
|
|
setMaxLength('');
|
|
setOpen(false);
|
|
onDone();
|
|
},
|
|
onError: (caught) => setError(humanMessage(caught)),
|
|
});
|
|
|
|
if (!open) {
|
|
return (
|
|
<button
|
|
onClick={() => setOpen(true)}
|
|
className="mt-3 rounded-md border border-ink-300 bg-white px-3 py-1.5 text-sm text-ink-700 transition-colors hover:bg-ink-50"
|
|
>
|
|
Ajouter une plateforme
|
|
</button>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<form
|
|
onSubmit={(e) => {
|
|
e.preventDefault();
|
|
create.mutate();
|
|
}}
|
|
className="mt-3 rounded-lg border border-ink-200 bg-white p-5 shadow-sm"
|
|
>
|
|
<h3 className="mb-4 text-sm font-medium text-ink-800">Nouvelle plateforme</h3>
|
|
|
|
<div className="flex flex-wrap gap-3">
|
|
<input
|
|
required
|
|
value={name}
|
|
onChange={(e) => {
|
|
setName(e.target.value);
|
|
setSlug(slugify(e.target.value));
|
|
}}
|
|
placeholder="Nom de la plateforme"
|
|
className="min-w-48 flex-1 rounded-md border border-ink-300 px-3 py-2 text-sm outline-none focus:border-accent"
|
|
/>
|
|
|
|
<input
|
|
required
|
|
value={slug}
|
|
onChange={(e) => setSlug(e.target.value)}
|
|
placeholder="slug"
|
|
className="w-40 rounded-md border border-ink-300 px-3 py-2 font-mono text-sm outline-none focus:border-accent"
|
|
/>
|
|
|
|
<select
|
|
value={kind}
|
|
onChange={(e) => {
|
|
setKind(e.target.value);
|
|
// Le format suit le type par défaut : une app web se
|
|
// traduit presque toujours en i18next, une app iOS en
|
|
// ICU. Le choix reste modifiable juste à côté.
|
|
const suggested = options?.kinds.find((k) => k.value === e.target.value);
|
|
if (suggested && options?.formats.some((f) => f.value === suggested.defaultMessageFormat)) {
|
|
setFormat(suggested.defaultMessageFormat);
|
|
}
|
|
}}
|
|
className="rounded-md border border-ink-300 bg-white px-3 py-2 text-sm outline-none focus:border-accent"
|
|
>
|
|
{options?.kinds.map((k) => (
|
|
<option key={k.value} value={k.value}>
|
|
{KIND_LABELS[k.value] ?? k.value}
|
|
</option>
|
|
))}
|
|
</select>
|
|
|
|
<select
|
|
value={format}
|
|
onChange={(e) => setFormat(e.target.value)}
|
|
className="rounded-md border border-ink-300 bg-white px-3 py-2 text-sm outline-none focus:border-accent"
|
|
>
|
|
{options?.formats.map((f) => (
|
|
<option key={f.value} value={f.value}>
|
|
{f.value} (.{f.fileExtension})
|
|
</option>
|
|
))}
|
|
</select>
|
|
|
|
<select
|
|
value={layout}
|
|
onChange={(e) => setLayout(e.target.value)}
|
|
className="rounded-md border border-ink-300 bg-white px-3 py-2 text-sm outline-none focus:border-accent"
|
|
>
|
|
<option value="nested">imbriqué</option>
|
|
<option value="flat">à plat</option>
|
|
</select>
|
|
|
|
<input
|
|
type="number"
|
|
min={1}
|
|
value={maxLength}
|
|
onChange={(e) => setMaxLength(e.target.value)}
|
|
placeholder="longueur max"
|
|
className="w-32 rounded-md border border-ink-300 px-3 py-2 text-sm outline-none focus:border-accent"
|
|
/>
|
|
</div>
|
|
|
|
<p className="mt-3 text-[11px] text-ink-400">
|
|
Seuls les formats disposant d'un sérialiseur sont proposés. Le slug n'est plus
|
|
modifiable ensuite : il apparaît dans les URL de livraison et dans la configuration
|
|
des dépôts clients.
|
|
</p>
|
|
|
|
{error && (
|
|
<p className="mt-3 max-h-24 overflow-y-auto rounded bg-red-50 px-3 py-2 text-xs text-red-700">
|
|
{error}
|
|
</p>
|
|
)}
|
|
|
|
<div className="mt-4 flex items-center gap-3">
|
|
<button
|
|
type="submit"
|
|
disabled={create.isPending}
|
|
className="rounded-md bg-accent px-3 py-2 text-sm font-medium text-white hover:bg-indigo-700 disabled:bg-ink-300"
|
|
>
|
|
{create.isPending ? 'Création…' : 'Créer la plateforme'}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => setOpen(false)}
|
|
className="text-sm text-ink-500 hover:text-ink-800"
|
|
>
|
|
Annuler
|
|
</button>
|
|
</div>
|
|
</form>
|
|
);
|
|
}
|
|
|
|
// ── Environnements ───────────────────────────────────────────────────────
|
|
|
|
function EnvironmentRow({
|
|
projectUuid,
|
|
environment,
|
|
}: {
|
|
projectUuid: string;
|
|
environment: AdminEnvironment;
|
|
}) {
|
|
const queryClient = useQueryClient();
|
|
const [editing, setEditing] = useState(false);
|
|
const [name, setName] = useState(environment.name);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
const save = useMutation({
|
|
mutationFn: () => api.updateEnvironment(projectUuid, environment.uuid, { name }),
|
|
onSuccess: () => {
|
|
setError(null);
|
|
setEditing(false);
|
|
void queryClient.invalidateQueries({ queryKey: ['environments', projectUuid] });
|
|
},
|
|
onError: (caught) => setError(humanMessage(caught)),
|
|
});
|
|
|
|
return (
|
|
<div className="px-4 py-3">
|
|
<div className="flex flex-wrap items-center gap-x-3 gap-y-1">
|
|
{editing ? (
|
|
<input
|
|
autoFocus
|
|
value={name}
|
|
onChange={(e) => setName(e.target.value)}
|
|
onBlur={() => save.mutate()}
|
|
onKeyDown={(e) => {
|
|
if (e.key === 'Enter') save.mutate();
|
|
if (e.key === 'Escape') {
|
|
setName(environment.name);
|
|
setEditing(false);
|
|
}
|
|
}}
|
|
className="rounded border border-accent px-2 py-1 text-sm outline-none"
|
|
/>
|
|
) : (
|
|
<button
|
|
onClick={() => setEditing(true)}
|
|
className="text-sm font-medium text-ink-800 hover:text-accent"
|
|
>
|
|
{environment.name}
|
|
</button>
|
|
)}
|
|
|
|
<span className="font-mono text-[11px] text-ink-400">{environment.slug}</span>
|
|
|
|
{/* Rien de déployé = LA cause d'un bundle introuvable côté
|
|
client. La voir ici évite de la chercher ailleurs. */}
|
|
{environment.currentRelease === null ? (
|
|
<span className="rounded bg-amber-100 px-1.5 py-0.5 text-[11px] text-amber-900">
|
|
rien de déployé
|
|
</span>
|
|
) : (
|
|
<span className="rounded bg-emerald-100 px-1.5 py-0.5 text-[11px] font-medium text-emerald-800">
|
|
{environment.currentRelease.label}
|
|
</span>
|
|
)}
|
|
|
|
<span className="ml-auto text-[11px] text-ink-400">
|
|
{environment.activeKeyCount} clé{environment.activeKeyCount > 1 ? 's' : ''} d'accès
|
|
{environment.totalKeyCount > environment.activeKeyCount &&
|
|
` (${environment.totalKeyCount - environment.activeKeyCount} révoquée${
|
|
environment.totalKeyCount - environment.activeKeyCount > 1 ? 's' : ''
|
|
})`}
|
|
</span>
|
|
</div>
|
|
|
|
{environment.currentRelease !== null && (
|
|
<p className="mt-1.5 text-[11px] text-ink-400">
|
|
{environment.currentRelease.keyCount} clés · déployée le{' '}
|
|
{environment.currentRelease.publishedAt !== null
|
|
? new Date(environment.currentRelease.publishedAt).toLocaleDateString('fr-FR')
|
|
: '—'}
|
|
</p>
|
|
)}
|
|
|
|
{error && <p className="mt-2 text-xs text-red-600">{error}</p>}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function CreateEnvironmentForm({
|
|
projectUuid,
|
|
onDone,
|
|
}: {
|
|
projectUuid: string;
|
|
onDone: () => void;
|
|
}) {
|
|
const [open, setOpen] = useState(false);
|
|
const [name, setName] = useState('');
|
|
const [slug, setSlug] = useState('');
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
const create = useMutation({
|
|
mutationFn: () => api.createEnvironment(projectUuid, { name, slug }),
|
|
onSuccess: () => {
|
|
setError(null);
|
|
setName('');
|
|
setSlug('');
|
|
setOpen(false);
|
|
onDone();
|
|
},
|
|
onError: (caught) => setError(humanMessage(caught)),
|
|
});
|
|
|
|
if (!open) {
|
|
return (
|
|
<div className="mt-3">
|
|
<button
|
|
onClick={() => setOpen(true)}
|
|
className="rounded-md border border-ink-300 bg-white px-3 py-1.5 text-sm text-ink-700 transition-colors hover:bg-ink-50"
|
|
>
|
|
Ajouter un environnement
|
|
</button>
|
|
{/* Dit une fois, ici, plutôt que découvert au moment où l'on
|
|
cherche le bouton qui n'existe pas. */}
|
|
<p className="mt-2 text-[11px] text-ink-400">
|
|
Un environnement ne se supprime pas : les applications qui l'interrogent
|
|
cesseraient d'être servies, sans qu'aucun signal ne parte d'ici.
|
|
</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<form
|
|
onSubmit={(e) => {
|
|
e.preventDefault();
|
|
create.mutate();
|
|
}}
|
|
className="mt-3 rounded-lg border border-ink-200 bg-white p-5 shadow-sm"
|
|
>
|
|
<h3 className="mb-4 text-sm font-medium text-ink-800">Nouvel environnement</h3>
|
|
|
|
<div className="flex flex-wrap gap-3">
|
|
<input
|
|
required
|
|
value={name}
|
|
onChange={(e) => {
|
|
setName(e.target.value);
|
|
setSlug(slugify(e.target.value));
|
|
}}
|
|
placeholder="Nom (Recette client, Préproduction…)"
|
|
className="min-w-56 flex-1 rounded-md border border-ink-300 px-3 py-2 text-sm outline-none focus:border-accent"
|
|
/>
|
|
<input
|
|
required
|
|
value={slug}
|
|
onChange={(e) => setSlug(e.target.value)}
|
|
placeholder="slug"
|
|
className="w-40 rounded-md border border-ink-300 px-3 py-2 font-mono text-sm outline-none focus:border-accent"
|
|
/>
|
|
</div>
|
|
|
|
<p className="mt-3 text-[11px] text-ink-400">
|
|
Le slug entre dans l'URL de livraison :{' '}
|
|
<span className="font-mono">/delivery/v1/{projet}/{slug || 'slug'}/…</span>{' '}
|
|
— il n'est plus modifiable ensuite.
|
|
</p>
|
|
|
|
{error && (
|
|
<p className="mt-3 max-h-24 overflow-y-auto rounded bg-red-50 px-3 py-2 text-xs text-red-700">
|
|
{error}
|
|
</p>
|
|
)}
|
|
|
|
<div className="mt-4 flex items-center gap-3">
|
|
<button
|
|
type="submit"
|
|
disabled={create.isPending}
|
|
className="rounded-md bg-accent px-3 py-2 text-sm font-medium text-white hover:bg-indigo-700 disabled:bg-ink-300"
|
|
>
|
|
{create.isPending ? 'Création…' : 'Créer l\'environnement'}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => setOpen(false)}
|
|
className="text-sm text-ink-500 hover:text-ink-800"
|
|
>
|
|
Annuler
|
|
</button>
|
|
</div>
|
|
</form>
|
|
);
|
|
}
|
|
|
|
function slugify(value: string): string {
|
|
return value
|
|
.toLowerCase()
|
|
.normalize('NFD')
|
|
.replace(/[\u0300-\u036f]/g, '')
|
|
.replace(/[^a-z0-9]+/g, '-')
|
|
.replace(/^-|-$/g, '');
|
|
}
|