feat(sprints): surface frontend du modèle de sprints
Ticket #10 — volet frontend des sprints. - Domaine et ports frontend étendus au modèle de sprints (domain/index.ts, ports/index.ts). - Adaptateurs : ticket.ts et mock/index.ts câblent les opérations sprints. - UI tickets : useTickets + TicketsPanel exposent le rattachement/gestion des sprints, avec tests Vitest associés. Typecheck / vitest / build verts. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@ -9,7 +9,12 @@
|
||||
|
||||
import { useState } from "react";
|
||||
|
||||
import type { TicketPriority, TicketStatus } from "@/domain";
|
||||
import type {
|
||||
Sprint,
|
||||
TicketPriority,
|
||||
TicketStatus,
|
||||
TicketSummary,
|
||||
} from "@/domain";
|
||||
import { Button, Input, Panel, Spinner, cn } from "@/shared";
|
||||
import { useTickets } from "./useTickets";
|
||||
import { useProjectAgents } from "./useProjectAgents";
|
||||
@ -44,6 +49,20 @@ export function TicketsPanel({ projectId, onOpen }: TicketsPanelProps) {
|
||||
|
||||
const items = vm.list?.items ?? [];
|
||||
|
||||
// Group tickets by sprint (ticket #10): one ordered section per sprint that
|
||||
// holds tickets, then a "Sans sprint" bucket. Tickets referencing an unknown
|
||||
// sprint fall into the bucket so none are ever hidden.
|
||||
const sprintIds = new Set(vm.sprints.map((s) => s.id));
|
||||
const grouped = vm.sprints
|
||||
.map((sprint) => ({
|
||||
sprint,
|
||||
tickets: items.filter((t) => t.sprintId === sprint.id),
|
||||
}))
|
||||
.filter((g) => g.tickets.length > 0);
|
||||
const noSprint = items.filter(
|
||||
(t) => !t.sprintId || !sprintIds.has(t.sprintId),
|
||||
);
|
||||
|
||||
async function submitCreate(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
if (!newTitle.trim()) return;
|
||||
@ -196,7 +215,7 @@ export function TicketsPanel({ projectId, onOpen }: TicketsPanelProps) {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ── List ── */}
|
||||
{/* ── List, grouped by sprint (F2) ── */}
|
||||
{vm.busy && vm.list === null ? (
|
||||
<div className="flex items-center gap-2 text-sm text-muted">
|
||||
<Spinner size={14} />
|
||||
@ -205,33 +224,31 @@ export function TicketsPanel({ projectId, onOpen }: TicketsPanelProps) {
|
||||
) : items.length === 0 ? (
|
||||
<p className="text-sm text-muted">No tickets.</p>
|
||||
) : (
|
||||
<ul className="flex flex-col divide-y divide-border">
|
||||
{items.map((t) => (
|
||||
<li key={t.ref} className="py-2 first:pt-0 last:pb-0">
|
||||
<div className="flex items-start gap-2">
|
||||
<TicketRef ticketRef={t.ref} onOpen={onOpen} className="mt-0.5" />
|
||||
<button
|
||||
type="button"
|
||||
className="min-w-0 flex-1 text-left"
|
||||
onClick={() => onOpen(t.ref)}
|
||||
>
|
||||
<span className="block truncate text-sm font-medium text-content hover:underline">
|
||||
{t.title}
|
||||
</span>
|
||||
{t.assignedAgentIds.length > 0 && (
|
||||
<span className="mt-0.5 block truncate text-xs text-muted">
|
||||
{t.assignedAgentIds.map(nameOf).join(", ")}
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
<span className="flex shrink-0 flex-col items-end gap-1">
|
||||
<StatusBadge status={t.status} />
|
||||
<PriorityBadge priority={t.priority} />
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
<div className="flex flex-col gap-4">
|
||||
{grouped.map((g) => (
|
||||
<SprintSection
|
||||
key={g.sprint.id}
|
||||
heading={g.sprint.name}
|
||||
count={g.tickets.length}
|
||||
tickets={g.tickets}
|
||||
sprints={vm.sprints}
|
||||
onOpen={onOpen}
|
||||
nameOf={nameOf}
|
||||
onAssignSprint={vm.assignSprint}
|
||||
/>
|
||||
))}
|
||||
</ul>
|
||||
{noSprint.length > 0 && (
|
||||
<SprintSection
|
||||
heading="Sans sprint"
|
||||
count={noSprint.length}
|
||||
tickets={noSprint}
|
||||
sprints={vm.sprints}
|
||||
onOpen={onOpen}
|
||||
nameOf={nameOf}
|
||||
onAssignSprint={vm.assignSprint}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{vm.list?.nextCursor && (
|
||||
@ -254,3 +271,81 @@ export function TicketsPanel({ projectId, onOpen }: TicketsPanelProps) {
|
||||
</Panel>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* One sprint section (F2): a heading with the ticket count and the grouped
|
||||
* ticket rows. Each row carries a simple sprint selector wired to
|
||||
* `onAssignSprint` (assignment only — creation/reorder is ticket #11).
|
||||
*/
|
||||
function SprintSection({
|
||||
heading,
|
||||
count,
|
||||
tickets,
|
||||
sprints,
|
||||
onOpen,
|
||||
nameOf,
|
||||
onAssignSprint,
|
||||
}: {
|
||||
heading: string;
|
||||
count: number;
|
||||
tickets: TicketSummary[];
|
||||
sprints: Sprint[];
|
||||
onOpen: (ref: string) => void;
|
||||
nameOf: (id: string) => string;
|
||||
onAssignSprint: (ref: string, sprintId: string | null) => void;
|
||||
}) {
|
||||
return (
|
||||
<section aria-label={`sprint section ${heading}`}>
|
||||
<h3 className="mb-1 flex items-center gap-2 text-xs font-semibold uppercase tracking-wide text-muted">
|
||||
{heading}
|
||||
<span className="rounded-full bg-raised px-1.5 text-[10px] font-medium text-muted">
|
||||
{count}
|
||||
</span>
|
||||
</h3>
|
||||
<ul className="flex flex-col divide-y divide-border">
|
||||
{tickets.map((t) => (
|
||||
<li key={t.ref} className="py-2 first:pt-0 last:pb-0">
|
||||
<div className="flex items-start gap-2">
|
||||
<TicketRef ticketRef={t.ref} onOpen={onOpen} className="mt-0.5" />
|
||||
<button
|
||||
type="button"
|
||||
className="min-w-0 flex-1 text-left"
|
||||
onClick={() => onOpen(t.ref)}
|
||||
>
|
||||
<span className="block truncate text-sm font-medium text-content hover:underline">
|
||||
{t.title}
|
||||
</span>
|
||||
{t.assignedAgentIds.length > 0 && (
|
||||
<span className="mt-0.5 block truncate text-xs text-muted">
|
||||
{t.assignedAgentIds.map(nameOf).join(", ")}
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
<span className="flex shrink-0 flex-col items-end gap-1">
|
||||
<StatusBadge status={t.status} />
|
||||
<PriorityBadge priority={t.priority} />
|
||||
</span>
|
||||
</div>
|
||||
<div className="mt-1 pl-6">
|
||||
<select
|
||||
aria-label={`sprint for ${t.ref}`}
|
||||
className={selectClass}
|
||||
value={t.sprintId ?? ""}
|
||||
onChange={(e) =>
|
||||
onAssignSprint(t.ref, e.target.value || null)
|
||||
}
|
||||
>
|
||||
<option value="">— No sprint —</option>
|
||||
{sprints.map((s) => (
|
||||
<option key={s.id} value={s.id}>
|
||||
{s.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
@ -347,6 +347,71 @@ describe("TicketsView", () => {
|
||||
await waitFor(() => expect(onClose).toHaveBeenCalledTimes(1));
|
||||
});
|
||||
|
||||
it("groups tickets by sprint with a « Sans sprint » bucket (#10)", async () => {
|
||||
// Two ordered sprints + one ticket in each + one loose ticket.
|
||||
ticket._seedSprint(PROJECT_ID, { id: "s1", order: 1, name: "Sprint One" });
|
||||
ticket._seedSprint(PROJECT_ID, { id: "s2", order: 2, name: "Sprint Two" });
|
||||
const t1 = await ticket.create(PROJECT_ID, { title: "In one" });
|
||||
const t2 = await ticket.create(PROJECT_ID, { title: "In two" });
|
||||
await ticket.create(PROJECT_ID, { title: "Loose" });
|
||||
await ticket.setTicketSprint(PROJECT_ID, t1.ref, "s1", t1.version);
|
||||
await ticket.setTicketSprint(PROJECT_ID, t2.ref, "s2", t2.version);
|
||||
|
||||
renderView(ticket, system, agent);
|
||||
|
||||
// Sections appear in sprint `order`, then the "Sans sprint" bucket last.
|
||||
await screen.findByRole("region", { name: "sprint section Sprint One" });
|
||||
const sections = screen
|
||||
.getAllByRole("region")
|
||||
.map((r) => r.getAttribute("aria-label"))
|
||||
.filter((l) => l?.startsWith("sprint section"));
|
||||
expect(sections).toEqual([
|
||||
"sprint section Sprint One",
|
||||
"sprint section Sprint Two",
|
||||
"sprint section Sans sprint",
|
||||
]);
|
||||
|
||||
// The loose ticket lives in the bucket, the others under their sprint.
|
||||
const bucket = screen.getByRole("region", { name: "sprint section Sans sprint" });
|
||||
expect(within(bucket).getByText("Loose")).toBeTruthy();
|
||||
const one = screen.getByRole("region", { name: "sprint section Sprint One" });
|
||||
expect(within(one).getByText("In one")).toBeTruthy();
|
||||
});
|
||||
|
||||
it("assigns a ticket to a sprint via the row selector (#10)", async () => {
|
||||
ticket._seedSprint(PROJECT_ID, { id: "s1", order: 1, name: "Sprint One" });
|
||||
const t = await ticket.create(PROJECT_ID, { title: "Movable" });
|
||||
|
||||
renderView(ticket, system, agent);
|
||||
|
||||
// It starts in the "Sans sprint" bucket.
|
||||
const bucket = await screen.findByRole("region", {
|
||||
name: "sprint section Sans sprint",
|
||||
});
|
||||
expect(within(bucket).getByText("Movable")).toBeTruthy();
|
||||
|
||||
// Pick the sprint in the row selector → assign it.
|
||||
fireEvent.change(screen.getByLabelText(`sprint for ${t.ref}`), {
|
||||
target: { value: "s1" },
|
||||
});
|
||||
|
||||
// The gateway recorded the membership…
|
||||
await waitFor(async () => {
|
||||
const fresh = await ticket.read(PROJECT_ID, t.ref);
|
||||
expect(fresh.sprintId).toBe("s1");
|
||||
});
|
||||
// …and the UI regrouped it under Sprint One, emptying the bucket.
|
||||
await waitFor(() => {
|
||||
const one = screen.getByRole("region", {
|
||||
name: "sprint section Sprint One",
|
||||
});
|
||||
expect(within(one).getByText("Movable")).toBeTruthy();
|
||||
});
|
||||
expect(
|
||||
screen.queryByRole("region", { name: "sprint section Sans sprint" }),
|
||||
).toBeNull();
|
||||
});
|
||||
|
||||
it("copies a delegation context prompt (F7)", async () => {
|
||||
const writeText = stubClipboard();
|
||||
const t = await ticket.create(PROJECT_ID, { title: "Delegate me" });
|
||||
|
||||
@ -5,22 +5,41 @@
|
||||
* `Issue*` domain events (via {@link SystemGateway}) to refresh the list on any
|
||||
* ticket mutation — including those made by agents through MCP. Filters/search
|
||||
* are part of the query and drive a re-fetch when they change.
|
||||
*
|
||||
* Sprints (ticket #10): the hook also loads the project's sprints so the panel
|
||||
* can group tickets by sprint, and exposes `assignSprint` to move a ticket into
|
||||
* or out of a sprint. Sprint lifecycle events refresh the sprint list.
|
||||
*/
|
||||
|
||||
import { useCallback, useEffect, useMemo, useState } from "react";
|
||||
|
||||
import { isTicketEvent, type GatewayError, type Ticket, type TicketList } from "@/domain";
|
||||
import {
|
||||
isSprintEvent,
|
||||
isTicketEvent,
|
||||
type GatewayError,
|
||||
type Sprint,
|
||||
type Ticket,
|
||||
type TicketList,
|
||||
} from "@/domain";
|
||||
import type { CreateTicketInput, TicketListQuery } from "@/ports";
|
||||
import { useGateways } from "@/app/di";
|
||||
|
||||
export interface TicketsViewModel {
|
||||
list: TicketList | null;
|
||||
/** The project's sprints, ordered by `order` (ticket #10). */
|
||||
sprints: Sprint[];
|
||||
error: string | null;
|
||||
busy: boolean;
|
||||
query: TicketListQuery;
|
||||
setQuery: (next: TicketListQuery) => void;
|
||||
refresh: () => Promise<void>;
|
||||
create: (input: CreateTicketInput) => Promise<Ticket | null>;
|
||||
/**
|
||||
* Assigns a ticket to a sprint (or clears it with `sprintId === null`). Reads
|
||||
* the ticket's current version first so the summary-based list needs no
|
||||
* version column. Refreshes on the resulting `issueSprintChanged` event.
|
||||
*/
|
||||
assignSprint: (ref: string, sprintId: string | null) => Promise<boolean>;
|
||||
}
|
||||
|
||||
function describe(e: unknown): string {
|
||||
@ -33,6 +52,7 @@ function describe(e: unknown): string {
|
||||
export function useTickets(projectId: string): TicketsViewModel {
|
||||
const { ticket, system } = useGateways();
|
||||
const [list, setList] = useState<TicketList | null>(null);
|
||||
const [sprints, setSprints] = useState<Sprint[]>([]);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [busy, setBusy] = useState(false);
|
||||
const [query, setQuery] = useState<TicketListQuery>({});
|
||||
@ -55,6 +75,14 @@ export function useTickets(projectId: string): TicketsViewModel {
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [projectId, ticket, queryKey]);
|
||||
|
||||
const refreshSprints = useCallback(async () => {
|
||||
try {
|
||||
setSprints(await ticket.listSprints(projectId));
|
||||
} catch (e) {
|
||||
setError(describe(e));
|
||||
}
|
||||
}, [projectId, ticket]);
|
||||
|
||||
const create = useCallback(
|
||||
async (input: CreateTicketInput): Promise<Ticket | null> => {
|
||||
setError(null);
|
||||
@ -70,10 +98,32 @@ export function useTickets(projectId: string): TicketsViewModel {
|
||||
[projectId, ticket, refresh],
|
||||
);
|
||||
|
||||
const assignSprint = useCallback(
|
||||
async (ref: string, sprintId: string | null): Promise<boolean> => {
|
||||
setError(null);
|
||||
try {
|
||||
const current = await ticket.read(projectId, ref);
|
||||
await ticket.setTicketSprint(projectId, ref, sprintId, current.version);
|
||||
// The `issueSprintChanged` event refreshes the list; refresh the sprint
|
||||
// counts too (and update immediately in case events are not wired).
|
||||
await Promise.all([refresh(), refreshSprints()]);
|
||||
return true;
|
||||
} catch (e) {
|
||||
setError(describe(e));
|
||||
return false;
|
||||
}
|
||||
},
|
||||
[projectId, ticket, refresh, refreshSprints],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
void refresh();
|
||||
}, [refresh]);
|
||||
|
||||
useEffect(() => {
|
||||
void refreshSprints();
|
||||
}, [refreshSprints]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!system) return;
|
||||
let unsubscribe: (() => void) | undefined;
|
||||
@ -81,6 +131,11 @@ export function useTickets(projectId: string): TicketsViewModel {
|
||||
void system
|
||||
.onDomainEvent((event) => {
|
||||
if (isTicketEvent(event)) void refresh();
|
||||
// Sprint membership (`issueSprintChanged`) and sprint lifecycle events
|
||||
// both change the grouping → refresh the sprint list.
|
||||
if (isSprintEvent(event) || event.type === "issueSprintChanged") {
|
||||
void refreshSprints();
|
||||
}
|
||||
})
|
||||
.then((u) => {
|
||||
if (cancelled) u();
|
||||
@ -90,7 +145,17 @@ export function useTickets(projectId: string): TicketsViewModel {
|
||||
cancelled = true;
|
||||
unsubscribe?.();
|
||||
};
|
||||
}, [refresh, system]);
|
||||
}, [refresh, refreshSprints, system]);
|
||||
|
||||
return { list, error, busy, query, setQuery, refresh, create };
|
||||
return {
|
||||
list,
|
||||
sprints,
|
||||
error,
|
||||
busy,
|
||||
query,
|
||||
setQuery,
|
||||
refresh,
|
||||
create,
|
||||
assignSprint,
|
||||
};
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user