feat(sprints): interface de création et gestion des sprints (frontend)

Ticket #11 — surface UI de gestion des sprints (frontend pur).

- Nouveau composant SprintManager : création (nom optionnel), édition et
  gestion du cycle de vie d'un sprint, contrôles accessibles (pas de DnD).
- useTickets étendu aux opérations de gestion de sprint ; ports, adaptateurs
  (ticket.ts, mock/index.ts) et TicketsPanel câblés en conséquence.
- Tests Vitest associés (tickets.test.tsx).

Typecheck / vitest (497+ tests) / build verts.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
2026-07-05 21:11:37 +02:00
parent edd5486330
commit fa874b976e
8 changed files with 715 additions and 0 deletions

View File

@ -1815,6 +1815,7 @@ export class MockTicketGateway implements TicketGateway {
private carnets = new Map<string, Map<string, string>>();
private counters = new Map<string, number>();
private sprints = new Map<string, Map<string, Sprint>>();
private sprintCounters = new Map<string, number>();
constructor(private readonly system?: MockSystemGateway) {}
@ -2141,6 +2142,118 @@ export class MockTicketGateway implements TicketGateway {
});
return structuredClone(ticket);
}
async createSprint(projectId: string, name: string): Promise<Sprint> {
const sprints = this.projectSprints(projectId);
const seq = (this.sprintCounters.get(projectId) ?? 0) + 1;
this.sprintCounters.set(projectId, seq);
const order =
sprints.size === 0
? 1
: Math.max(...[...sprints.values()].map((s) => s.order)) + 1;
const sprint: Sprint = {
id: `mock-sprint-${projectId}-${seq}`,
order,
name,
status: "planned",
ticketCount: 0,
version: 1,
};
sprints.set(sprint.id, sprint);
this.system?.emit({
type: "sprintCreated",
sprintId: sprint.id,
order: sprint.order,
});
return structuredClone(sprint);
}
async renameSprint(
projectId: string,
sprintId: string,
name: string,
expectedVersion: number,
): Promise<Sprint> {
const sprint = this.requireSprint(projectId, sprintId);
this.guardSprint(sprint, expectedVersion);
sprint.name = name;
sprint.version += 1;
this.system?.emit({
type: "sprintRenamed",
sprintId,
name,
version: sprint.version,
});
return structuredClone(sprint);
}
async reorderSprints(
projectId: string,
orderedIds: string[],
): Promise<Sprint[]> {
const sprints = this.projectSprints(projectId);
for (const id of orderedIds) this.requireSprint(projectId, id);
// Assign 1-based order following the provided id sequence; ids omitted from
// `orderedIds` keep their relative order after the listed ones.
const rest = [...sprints.values()]
.filter((s) => !orderedIds.includes(s.id))
.sort((a, b) => a.order - b.order)
.map((s) => s.id);
[...orderedIds, ...rest].forEach((id, index) => {
const sprint = sprints.get(id);
if (sprint) {
sprint.order = index + 1;
this.system?.emit({
type: "sprintReordered",
sprintId: id,
order: sprint.order,
version: sprint.version,
});
}
});
return this.listSprints(projectId);
}
async deleteSprint(projectId: string, sprintId: string): Promise<void> {
this.requireSprint(projectId, sprintId);
// Delete unassigns the sprint's tickets (it does NOT delete them): they fall
// back to the "no sprint" bucket.
for (const ticket of this.projectTickets(projectId).values()) {
if (ticket.sprintId === sprintId) {
ticket.sprintId = null;
this.bump(ticket);
this.system?.emit({
type: "issueSprintChanged",
issueRef: ticket.ref,
from: sprintId,
to: null,
version: ticket.version,
});
}
}
this.projectSprints(projectId).delete(sprintId);
this.system?.emit({ type: "sprintDeleted", sprintId });
}
private requireSprint(projectId: string, sprintId: string): Sprint {
const sprint = this.projectSprints(projectId).get(sprintId);
if (!sprint) {
throw {
code: "NOT_FOUND",
message: `sprint ${sprintId} not found`,
} as GatewayError;
}
return sprint;
}
private guardSprint(sprint: Sprint, expectedVersion: number): void {
if (sprint.version !== expectedVersion) {
throw {
code: "INVALID",
message: `sprint version conflict: expected ${expectedVersion}, actual ${sprint.version}`,
} as GatewayError;
}
}
}
function mostRestrictive(

View File

@ -148,4 +148,38 @@ export class TauriTicketGateway implements TicketGateway {
request: { projectId, ref, sprintId, expectedVersion },
});
}
async createSprint(projectId: string, name: string): Promise<Sprint> {
return invoke<Sprint>("sprint_create", {
request: { projectId, name },
});
}
async renameSprint(
projectId: string,
sprintId: string,
name: string,
expectedVersion: number,
): Promise<Sprint> {
return invoke<Sprint>("sprint_rename", {
request: { projectId, sprintId, name, expectedVersion },
});
}
async reorderSprints(
projectId: string,
orderedIds: string[],
): Promise<Sprint[]> {
// `sprint_reorder` returns a `SprintListDto { items }`; unwrap to the array.
const list = await invoke<{ items: Sprint[] }>("sprint_reorder", {
request: { projectId, orderedIds },
});
return list.items;
}
async deleteSprint(projectId: string, sprintId: string): Promise<void> {
await invoke<void>("sprint_delete", {
request: { projectId, sprintId },
});
}
}

View File

@ -0,0 +1,286 @@
/**
* Sprint management overlay (ticket #11, F3).
*
* A full-screen dialog to create, rename, reorder (accessible up/down buttons,
* no drag-and-drop required) and delete sprints, plus add/remove tickets to a
* sprint. All behaviour comes from {@link useTickets} via the injected view-model
* — this component is pure presentation over the same hook instance the panel
* uses, so mutations reflect live.
*
* Deleting a sprint UNASSIGNS its tickets (they fall back to the backlog); it
* never deletes tickets — the confirmation says so explicitly.
*/
import { useState } from "react";
import { Button, Input, cn } from "@/shared";
import { TicketRef } from "./ticketMeta";
import type { TicketsViewModel } from "./useTickets";
const selectClass = cn(
"h-8 rounded-md bg-raised px-2 text-xs text-content",
"border border-border outline-none transition-colors",
"focus:border-primary disabled:cursor-not-allowed disabled:opacity-50",
);
export interface SprintManagerProps {
vm: TicketsViewModel;
onClose: () => void;
}
export function SprintManager({ vm, onClose }: SprintManagerProps) {
const items = vm.list?.items ?? [];
const sprints = [...vm.sprints].sort((a, b) => a.order - b.order);
const [newName, setNewName] = useState("");
// Local rename drafts keyed by sprint id; falls back to the stored name.
const [renameDrafts, setRenameDrafts] = useState<Record<string, string>>({});
// Sprint pending delete confirmation, or null.
const [confirmDelete, setConfirmDelete] = useState<
{ id: string; name: string } | null
>(null);
async function handleCreate(e: React.FormEvent) {
e.preventDefault();
// Name is optional in the UI; default to a positional name (the backend
// requires a non-empty name).
const name = newName.trim() || `Sprint ${sprints.length + 1}`;
const created = await vm.createSprint(name);
if (created) setNewName("");
}
return (
<div
className="fixed inset-0 z-50 flex flex-col bg-canvas"
role="dialog"
aria-modal="true"
aria-label="manage sprints"
>
{/* ── Header ── */}
<header className="flex shrink-0 items-center justify-between gap-3 border-b border-border px-5 py-3">
<span className="text-sm font-medium text-content">Manage sprints</span>
<Button size="sm" variant="ghost" onClick={onClose}>
Close
</Button>
</header>
{vm.error && (
<p
role="alert"
className="shrink-0 border-b border-danger/40 bg-danger/10 px-5 py-2 text-sm text-danger"
>
{vm.error}
</p>
)}
<div className="flex-1 overflow-auto p-5">
{/* ── Create ── */}
<form
onSubmit={handleCreate}
className="mb-5 flex items-center gap-2 rounded-md border border-border bg-raised/50 p-2"
>
<Input
aria-label="new sprint name"
placeholder="Sprint name (optional)"
value={newName}
onChange={(e) => setNewName(e.target.value)}
className="max-w-xs"
/>
<Button type="submit" size="sm" disabled={vm.busy}>
Create sprint
</Button>
</form>
{sprints.length === 0 ? (
<p className="text-sm text-muted">No sprints yet.</p>
) : (
<ul className="flex flex-col gap-4">
{sprints.map((sprint, index) => {
const inSprint = items.filter((t) => t.sprintId === sprint.id);
const addable = items.filter((t) => t.sprintId !== sprint.id);
const draft = renameDrafts[sprint.id] ?? sprint.name;
return (
<li
key={sprint.id}
aria-label={`sprint row ${sprint.name}`}
className="rounded-md border border-border p-3"
>
{/* ── Row header: order, rename, reorder, delete ── */}
<div className="flex flex-wrap items-center gap-2">
<span className="text-xs font-semibold text-muted">
#{sprint.order}
</span>
<Input
aria-label={`rename sprint ${sprint.name}`}
value={draft}
disabled={vm.busy}
onChange={(e) =>
setRenameDrafts((prev) => ({
...prev,
[sprint.id]: e.target.value,
}))
}
className="max-w-xs"
/>
<Button
size="sm"
aria-label={`save sprint ${sprint.name}`}
disabled={
vm.busy ||
draft.trim() === "" ||
draft.trim() === sprint.name
}
onClick={async () => {
const ok = await vm.renameSprint(
sprint.id,
draft.trim(),
);
if (ok) {
setRenameDrafts((prev) => {
const { [sprint.id]: _drop, ...rest } = prev;
return rest;
});
}
}}
>
Save
</Button>
<div className="ml-auto flex items-center gap-1">
<Button
size="sm"
variant="ghost"
aria-label={`move sprint ${sprint.name} up`}
disabled={vm.busy || index === 0}
onClick={() => void vm.moveSprint(sprint.id, "up")}
>
</Button>
<Button
size="sm"
variant="ghost"
aria-label={`move sprint ${sprint.name} down`}
disabled={vm.busy || index === sprints.length - 1}
onClick={() => void vm.moveSprint(sprint.id, "down")}
>
</Button>
<Button
size="sm"
variant="ghost"
aria-label={`delete sprint ${sprint.name}`}
disabled={vm.busy}
className="text-danger hover:text-danger"
onClick={() =>
setConfirmDelete({ id: sprint.id, name: sprint.name })
}
>
Delete
</Button>
</div>
</div>
{/* ── Tickets in this sprint ── */}
<div className="mt-3 flex flex-col gap-1">
{inSprint.length === 0 ? (
<p className="text-xs text-muted">No tickets in this sprint.</p>
) : (
<ul className="flex flex-col gap-1">
{inSprint.map((t) => (
<li
key={t.ref}
className="flex items-center gap-2 text-sm"
>
<TicketRef ticketRef={t.ref} />
<span className="min-w-0 flex-1 truncate text-content">
{t.title}
</span>
<Button
size="sm"
variant="ghost"
aria-label={`remove ${t.ref} from sprint`}
disabled={vm.busy}
onClick={() => void vm.assignSprint(t.ref, null)}
>
Remove
</Button>
</li>
))}
</ul>
)}
{/* Add an existing ticket (backlog or another sprint). */}
<select
aria-label={`add ticket to sprint ${sprint.name}`}
className={cn(selectClass, "mt-1 max-w-xs")}
value=""
disabled={vm.busy || addable.length === 0}
onChange={(e) => {
const ref = e.target.value;
if (ref) void vm.assignSprint(ref, sprint.id);
}}
>
<option value="">
{addable.length === 0
? "No tickets to add"
: "Add a ticket…"}
</option>
{addable.map((t) => (
<option key={t.ref} value={t.ref}>
{t.ref} {t.title}
</option>
))}
</select>
</div>
</li>
);
})}
</ul>
)}
</div>
{/* ── Delete confirmation ── */}
{confirmDelete && (
<div
role="dialog"
aria-modal="true"
aria-label="delete sprint confirmation"
className="fixed inset-0 z-[60] flex items-center justify-center bg-black/55 p-4"
>
<div className="w-full max-w-sm rounded-lg border border-border bg-surface p-5 shadow-xl">
<h4 className="text-sm font-semibold text-content">
Supprimer le sprint « {confirmDelete.name} »&nbsp;?
</h4>
<p className="mt-2 text-sm text-muted">
Les tickets de ce sprint ne seront pas supprimés&nbsp;: ils seront
simplement désassignés et retourneront au backlog «&nbsp;Sans
sprint&nbsp;».
</p>
<div className="mt-4 flex items-center justify-end gap-2">
<Button
size="sm"
variant="ghost"
aria-label="cancel delete sprint"
disabled={vm.busy}
onClick={() => setConfirmDelete(null)}
>
Annuler
</Button>
<Button
size="sm"
aria-label="confirm delete sprint"
className="text-danger hover:text-danger"
disabled={vm.busy}
onClick={async () => {
await vm.deleteSprint(confirmDelete.id);
setConfirmDelete(null);
}}
>
Supprimer
</Button>
</div>
</div>
</div>
)}
</div>
);
}

View File

@ -18,6 +18,7 @@ import type {
import { Button, Input, Panel, Spinner, cn } from "@/shared";
import { useTickets } from "./useTickets";
import { useProjectAgents } from "./useProjectAgents";
import { SprintManager } from "./SprintManager";
import {
PriorityBadge,
StatusBadge,
@ -44,6 +45,7 @@ export function TicketsPanel({ projectId, onOpen }: TicketsPanelProps) {
const vm = useTickets(projectId);
const { agents, nameOf } = useProjectAgents(projectId);
const [showCreate, setShowCreate] = useState(false);
const [showSprints, setShowSprints] = useState(false);
const [newTitle, setNewTitle] = useState("");
const [newPriority, setNewPriority] = useState<TicketPriority>("medium");
@ -90,6 +92,14 @@ export function TicketsPanel({ projectId, onOpen }: TicketsPanelProps) {
>
{showCreate ? "Cancel" : "New"}
</Button>
<Button
size="sm"
variant="ghost"
aria-label="manage sprints"
onClick={() => setShowSprints(true)}
>
Sprints
</Button>
<Button
size="sm"
variant="ghost"
@ -268,6 +278,10 @@ export function TicketsPanel({ projectId, onOpen }: TicketsPanelProps) {
</Button>
</div>
)}
{showSprints && (
<SprintManager vm={vm} onClose={() => setShowSprints(false)} />
)}
</Panel>
);
}

View File

@ -7,6 +7,8 @@ export { TicketsPanel } from "./TicketsPanel";
export type { TicketsPanelProps } from "./TicketsPanel";
export { TicketDetail } from "./TicketDetail";
export type { TicketDetailProps } from "./TicketDetail";
export { SprintManager } from "./SprintManager";
export type { SprintManagerProps } from "./SprintManager";
export { useTickets } from "./useTickets";
export type { TicketsViewModel } from "./useTickets";
export { useTicketDetail } from "./useTicketDetail";

View File

@ -428,3 +428,155 @@ describe("TicketsView", () => {
);
});
});
describe("SprintManager (#11)", () => {
let system: MockSystemGateway;
let ticket: MockTicketGateway;
let agent: MockAgentGateway;
beforeEach(() => {
system = new MockSystemGateway();
ticket = new MockTicketGateway(system);
agent = new MockAgentGateway();
});
/** Renders the view and opens the sprint-management overlay. */
async function openManager(): Promise<HTMLElement> {
renderView(ticket, system, agent);
await waitFor(() =>
expect(
screen.getByRole("button", { name: "manage sprints" }),
).toBeTruthy(),
);
fireEvent.click(screen.getByRole("button", { name: "manage sprints" }));
return screen.findByRole("dialog", { name: "manage sprints" });
}
it("creates a sprint", async () => {
const dialog = await openManager();
fireEvent.change(within(dialog).getByLabelText("new sprint name"), {
target: { value: "Alpha" },
});
fireEvent.click(within(dialog).getByText("Create sprint"));
await waitFor(async () => {
const sprints = await ticket.listSprints(PROJECT_ID);
expect(sprints.map((s) => s.name)).toEqual(["Alpha"]);
});
expect(
await within(dialog).findByLabelText("sprint row Alpha"),
).toBeTruthy();
});
it("creates a sprint with a default positional name when the name is empty", async () => {
const dialog = await openManager();
// Leave the name field empty and create → default "Sprint N" (here N=1).
expect(
(within(dialog).getByLabelText("new sprint name") as HTMLInputElement)
.value,
).toBe("");
fireEvent.click(within(dialog).getByText("Create sprint"));
await waitFor(async () => {
const sprints = await ticket.listSprints(PROJECT_ID);
expect(sprints.map((s) => s.name)).toEqual(["Sprint 1"]);
});
expect(
await within(dialog).findByLabelText("sprint row Sprint 1"),
).toBeTruthy();
});
it("renames a sprint", async () => {
ticket._seedSprint(PROJECT_ID, { id: "s1", order: 1, name: "Old" });
const dialog = await openManager();
fireEvent.change(
await within(dialog).findByLabelText("rename sprint Old"),
{ target: { value: "New" } },
);
fireEvent.click(within(dialog).getByLabelText("save sprint Old"));
await waitFor(async () => {
const [s] = await ticket.listSprints(PROJECT_ID);
expect(s.name).toBe("New");
});
});
it("reorders sprints via the accessible down button", async () => {
ticket._seedSprint(PROJECT_ID, { id: "s1", order: 1, name: "One" });
ticket._seedSprint(PROJECT_ID, { id: "s2", order: 2, name: "Two" });
const dialog = await openManager();
fireEvent.click(
await within(dialog).findByLabelText("move sprint One down"),
);
await waitFor(async () => {
const sprints = await ticket.listSprints(PROJECT_ID);
// "Two" is now first (order 1), "One" second.
expect(sprints.map((s) => s.name)).toEqual(["Two", "One"]);
});
});
it("deletes a sprint and unassigns (does not delete) its tickets", async () => {
ticket._seedSprint(PROJECT_ID, { id: "s1", order: 1, name: "Doomed" });
const t = await ticket.create(PROJECT_ID, { title: "Kept" });
await ticket.setTicketSprint(PROJECT_ID, t.ref, "s1", t.version);
const dialog = await openManager();
fireEvent.click(
await within(dialog).findByLabelText("delete sprint Doomed"),
);
// The confirmation explains tickets are unassigned, not deleted.
const confirm = await screen.findByRole("dialog", {
name: "delete sprint confirmation",
});
expect(confirm.textContent).toMatch(/ne seront pas supprimés/i);
fireEvent.click(within(confirm).getByLabelText("confirm delete sprint"));
await waitFor(async () => {
expect(await ticket.listSprints(PROJECT_ID)).toHaveLength(0);
});
// The ticket still exists, just unassigned.
const fresh = await ticket.read(PROJECT_ID, t.ref);
expect(fresh.sprintId).toBeNull();
expect(fresh.title).toBe("Kept");
});
it("adds a backlog ticket to a sprint via the add selector", async () => {
ticket._seedSprint(PROJECT_ID, { id: "s1", order: 1, name: "Target" });
const t = await ticket.create(PROJECT_ID, { title: "Backlog item" });
const dialog = await openManager();
fireEvent.change(
await within(dialog).findByLabelText("add ticket to sprint Target"),
{ target: { value: t.ref } },
);
await waitFor(async () => {
const fresh = await ticket.read(PROJECT_ID, t.ref);
expect(fresh.sprintId).toBe("s1");
});
});
it("removes a ticket from a sprint", async () => {
ticket._seedSprint(PROJECT_ID, { id: "s1", order: 1, name: "Holder" });
const t = await ticket.create(PROJECT_ID, { title: "Member" });
await ticket.setTicketSprint(PROJECT_ID, t.ref, "s1", t.version);
const dialog = await openManager();
fireEvent.click(
await within(dialog).findByLabelText(`remove ${t.ref} from sprint`),
);
await waitFor(async () => {
const fresh = await ticket.read(PROJECT_ID, t.ref);
expect(fresh.sprintId).toBeNull();
});
});
});

View File

@ -40,6 +40,20 @@ export interface TicketsViewModel {
* version column. Refreshes on the resulting `issueSprintChanged` event.
*/
assignSprint: (ref: string, sprintId: string | null) => Promise<boolean>;
/** Creates a sprint (#11). Returns the created sprint, or `null` on error. */
createSprint: (name: string) => Promise<Sprint | null>;
/** Renames a sprint using its current version (#11). */
renameSprint: (sprintId: string, name: string) => Promise<boolean>;
/**
* Moves a sprint one slot up/down in execution order via `reorderSprints`
* (#11). A no-op at the ends. Accessible (button-driven), non-DnD.
*/
moveSprint: (sprintId: string, direction: "up" | "down") => Promise<boolean>;
/**
* Deletes a sprint (#11). The backend unassigns its tickets (does NOT delete
* them). Refreshes both the sprint list and the tickets.
*/
deleteSprint: (sprintId: string) => Promise<boolean>;
}
function describe(e: unknown): string {
@ -116,6 +130,80 @@ export function useTickets(projectId: string): TicketsViewModel {
[projectId, ticket, refresh, refreshSprints],
);
const createSprint = useCallback(
async (name: string): Promise<Sprint | null> => {
setError(null);
try {
const created = await ticket.createSprint(projectId, name);
await refreshSprints();
return created;
} catch (e) {
setError(describe(e));
return null;
}
},
[projectId, ticket, refreshSprints],
);
const renameSprint = useCallback(
async (sprintId: string, name: string): Promise<boolean> => {
setError(null);
try {
const current = sprints.find((s) => s.id === sprintId);
if (!current) return false;
await ticket.renameSprint(projectId, sprintId, name, current.version);
await refreshSprints();
return true;
} catch (e) {
setError(describe(e));
return false;
}
},
[projectId, ticket, sprints, refreshSprints],
);
const moveSprint = useCallback(
async (sprintId: string, direction: "up" | "down"): Promise<boolean> => {
setError(null);
const ordered = [...sprints].sort((a, b) => a.order - b.order);
const index = ordered.findIndex((s) => s.id === sprintId);
const swapWith = direction === "up" ? index - 1 : index + 1;
if (index === -1 || swapWith < 0 || swapWith >= ordered.length) {
return false;
}
const next = [...ordered];
[next[index], next[swapWith]] = [next[swapWith], next[index]];
try {
await ticket.reorderSprints(
projectId,
next.map((s) => s.id),
);
await refreshSprints();
return true;
} catch (e) {
setError(describe(e));
return false;
}
},
[projectId, ticket, sprints, refreshSprints],
);
const deleteSprint = useCallback(
async (sprintId: string): Promise<boolean> => {
setError(null);
try {
await ticket.deleteSprint(projectId, sprintId);
// Delete unassigns tickets → refresh both projections.
await Promise.all([refresh(), refreshSprints()]);
return true;
} catch (e) {
setError(describe(e));
return false;
}
},
[projectId, ticket, refresh, refreshSprints],
);
useEffect(() => {
void refresh();
}, [refresh]);
@ -157,5 +245,9 @@ export function useTickets(projectId: string): TicketsViewModel {
refresh,
create,
assignSprint,
createSprint,
renameSprint,
moveSprint,
deleteSprint,
};
}

View File

@ -807,6 +807,28 @@ export interface TicketGateway {
sprintId: string | null,
expectedVersion: number,
): Promise<Ticket>;
/** Creates a sprint (name required by the backend) and returns it (#11). */
createSprint(projectId: string, name: string): Promise<Sprint>;
/**
* Renames a sprint. Optimistic concurrency: `expectedVersion` must match the
* sprint's current version (#11).
*/
renameSprint(
projectId: string,
sprintId: string,
name: string,
expectedVersion: number,
): Promise<Sprint>;
/**
* Reorders sprints to the given full list of ids (execution order). Returns
* the reordered sprint list (#11).
*/
reorderSprints(projectId: string, orderedIds: string[]): Promise<Sprint[]>;
/**
* Deletes a sprint. The backend unassigns its tickets (it does NOT delete
* them); they fall back to the "no sprint" bucket (#11).
*/
deleteSprint(projectId: string, sprintId: string): Promise<void>;
}
/**