diff --git a/frontend/src/features/tickets/SprintManager.tsx b/frontend/src/features/tickets/SprintManager.tsx index ec333e8..b59ac4c 100644 --- a/frontend/src/features/tickets/SprintManager.tsx +++ b/frontend/src/features/tickets/SprintManager.tsx @@ -9,13 +9,22 @@ * * Deleting a sprint UNASSIGNS its tickets (they fall back to the backlog); it * never deletes tickets — the confirmation says so explicitly. + * + * Ticket view (#37): the sprint tickets are read through this component's OWN + * {@link useTicketSearch} instance — independent of the main Tickets panel + * filter — so tickets stay visible once closed (no default `statuses` filter) + * and can be filtered/sorted per status/priority via the shared + * {@link TicketFacetsBar}. Rows show their {@link StatusBadge}/{@link + * PriorityBadge}. Grouping by sprint is done client-side on the returned rows. */ import { useState } from "react"; import { Button, Input } from "@/shared"; -import { TicketRef } from "./ticketMeta"; +import { PriorityBadge, StatusBadge, TicketRef } from "./ticketMeta"; +import { TicketFacetsBar } from "./TicketFacetsBar"; import { TicketPicker } from "./TicketPicker"; +import { useTicketSearch } from "./useTicketSearch"; import type { TicketsViewModel } from "./useTickets"; export interface SprintManagerProps { @@ -25,7 +34,11 @@ export interface SprintManagerProps { } export function SprintManager({ projectId, vm, onClose }: SprintManagerProps) { - const items = vm.list?.items ?? []; + // Own ticket query, independent of the main panel filter (#37). No default + // `statuses` → closed/done tickets remain visible; the facets bar below drives + // per-status/priority filtering + sort of the whole sprint view. + const search = useTicketSearch(projectId, { refreshOnEvents: true }); + const items = search.rows; const sprints = [...vm.sprints].sort((a, b) => a.order - b.order); const [newName, setNewName] = useState(""); @@ -92,13 +105,37 @@ export function SprintManager({ projectId, vm, onClose }: SprintManagerProps) { + {/* ── Sprint-ticket filters (#37) — independent of the main panel; + filters/sorts every sprint's tickets by status/priority/text. ── */} +
+ +
+ + {search.error && ( +

+ {search.error} +

+ )} + {sprints.length === 0 ? (

No sprints yet.

) : ( )} + + {/* More sprint tickets may exist beyond the first page (#37). */} + {search.hasMore && ( +
+ +
+ )} {/* ── Delete confirmation ── */} diff --git a/frontend/src/features/tickets/tickets.test.tsx b/frontend/src/features/tickets/tickets.test.tsx index 98d84d4..f2f7041 100644 --- a/frontend/src/features/tickets/tickets.test.tsx +++ b/frontend/src/features/tickets/tickets.test.tsx @@ -955,4 +955,84 @@ describe("SprintManager (#11)", () => { expect(fresh.sprintId).toBeNull(); }); }); + + /** Seeds sprint "Holder" with one open and one closed ticket assigned. */ + async function seedSprintWithOpenAndClosed(): Promise { + ticket._seedSprint(PROJECT_ID, { id: "s1", order: 1, name: "Holder" }); + const openT = await ticket.create(PROJECT_ID, { + title: "Open member", + priority: "high", + }); + await ticket.setTicketSprint(PROJECT_ID, openT.ref, "s1", openT.version); + const closedT = await ticket.create(PROJECT_ID, { + title: "Closed member", + priority: "low", + }); + const upd = await ticket.update(PROJECT_ID, closedT.ref, { + status: "closed", + expectedVersion: closedT.version, + }); + await ticket.setTicketSprint(PROJECT_ID, closedT.ref, "s1", upd.version); + } + + it("keeps closed tickets visible in the sprint with status/priority badges (#37)", async () => { + await seedSprintWithOpenAndClosed(); + const dialog = await openManager(); + + const row = await within(dialog).findByLabelText("sprint row Holder"); + // Both the open and the closed ticket are listed (closed is NOT hidden). + expect(within(row).getByText("Open member")).toBeTruthy(); + expect(within(row).getByText("Closed member")).toBeTruthy(); + // Each row carries its status + priority badge (scoped to the sprint row so + // the facet-bar labels don't collide). + expect(within(row).getByText("Closed")).toBeTruthy(); + expect(within(row).getByText("Open")).toBeTruthy(); + expect(within(row).getByText("High")).toBeTruthy(); + expect(within(row).getByText("Low")).toBeTruthy(); + }); + + it("filters the sprint tickets by status via its own facets bar (#37)", async () => { + await seedSprintWithOpenAndClosed(); + const dialog = await openManager(); + + await within(dialog).findByText("Open member"); + expect(within(dialog).getByText("Closed member")).toBeTruthy(); + + // Constrain the sprint view to Closed only → the open ticket drops out. + fireEvent.click(within(dialog).getByLabelText("filter status Closed")); + await waitFor(() => + expect(within(dialog).queryByText("Open member")).toBeNull(), + ); + expect(within(dialog).getByText("Closed member")).toBeTruthy(); + + // Clearing the facet brings the open ticket back. + fireEvent.click(within(dialog).getByLabelText("filter status Closed")); + await waitFor(() => + expect(within(dialog).getByText("Open member")).toBeTruthy(), + ); + }); + + it("sprint ticket view is independent of the main panel filter (#37)", async () => { + await seedSprintWithOpenAndClosed(); + + renderView(ticket, system, agent); + await waitFor(() => + expect( + screen.getByRole("button", { name: "manage sprints" }), + ).toBeTruthy(), + ); + + // Constrain the MAIN Tickets panel to Open only → the closed ticket leaves + // the main list (there is a single main facets bar on screen at this point). + fireEvent.click(screen.getByLabelText("filter status Open")); + await waitFor(() => expect(screen.queryByText("Closed member")).toBeNull()); + + // Open the sprint manager: its own query ignores the main filter, so the + // closed ticket is still shown inside its sprint. + fireEvent.click(screen.getByRole("button", { name: "manage sprints" })); + const dialog = await screen.findByRole("dialog", { name: "manage sprints" }); + const row = await within(dialog).findByLabelText("sprint row Holder"); + expect(await within(row).findByText("Closed member")).toBeTruthy(); + expect(within(row).getByText("Open member")).toBeTruthy(); + }); }); diff --git a/frontend/src/features/tickets/useTicketSearch.ts b/frontend/src/features/tickets/useTicketSearch.ts index b6a7e61..55f1651 100644 --- a/frontend/src/features/tickets/useTicketSearch.ts +++ b/frontend/src/features/tickets/useTicketSearch.ts @@ -27,6 +27,7 @@ import type { TicketStatus, TicketSummary, } from "@/domain"; +import { isSprintEvent, isTicketEvent } from "@/domain"; import type { TicketListQuery, TicketListSort } from "@/ports"; import { useGateways } from "@/app/di"; @@ -54,6 +55,13 @@ export interface UseTicketSearchOptions { excludeRefs?: TicketRef[]; /** Debounce applied to the free-text search, in ms (default 200). */ debounceMs?: number; + /** + * When true, subscribe to `Issue*`/`sprint*` domain events and re-fetch the + * first page on any ticket/sprint mutation. Off by default because the + * {@link TicketPicker} popup is short-lived and only reads; the sprint view + * (#37) enables it so its independent query stays in sync with add/remove. + */ + refreshOnEvents?: boolean; } export interface TicketSearchViewModel { @@ -78,6 +86,8 @@ export interface TicketSearchViewModel { hasMore: boolean; /** Loads and appends the next page (no-op when exhausted or busy). */ loadMore: () => void; + /** Forces a first-page re-fetch (e.g. after an external mutation). */ + refresh: () => void; /** Resolves a row's `#ref` to the full picker result (reads id + number). */ resolve: (ref: TicketRef) => Promise; } @@ -100,8 +110,9 @@ export function useTicketSearch( projectId: string, options: UseTicketSearchOptions = {}, ): TicketSearchViewModel { - const { initialQuery, excludeRefs, debounceMs = 200 } = options; - const { ticket } = useGateways(); + const { initialQuery, excludeRefs, debounceMs = 200, refreshOnEvents } = + options; + const { ticket, system } = useGateways(); const [facets, setFacets] = useState({ statuses: initialQuery?.statuses, @@ -118,6 +129,10 @@ export function useTicketSearch( const [cursor, setCursor] = useState(undefined); const [busy, setBusy] = useState(false); const [error, setError] = useState(null); + // Bumped to force a first-page re-fetch without changing the query (used by + // `refresh` and the domain-event subscription). + const [reloadNonce, setReloadNonce] = useState(0); + const refresh = useCallback(() => setReloadNonce((n) => n + 1), []); const limit = initialQuery?.limit; // Stable set so identity only changes when the caller passes new refs. @@ -190,8 +205,31 @@ export function useTicketSearch( }); // `buildQuery`/`projectId`/`ticket` are captured via `queryKey`; listing // them would refetch on every render (fresh object identities). + // `reloadNonce` is an explicit refetch trigger (refresh / domain events). // eslint-disable-next-line react-hooks/exhaustive-deps - }, [queryKey, projectId, ticket]); + }, [queryKey, projectId, ticket, reloadNonce]); + + // Optional live refresh: on any ticket/sprint mutation, re-fetch the first + // page so an externally-driven change (e.g. sprint add/remove) reflects here. + useEffect(() => { + if (!refreshOnEvents || !system) return; + let unsubscribe: (() => void) | undefined; + let cancelled = false; + void system + .onDomainEvent((event) => { + if (isTicketEvent(event) || isSprintEvent(event)) { + setReloadNonce((n) => n + 1); + } + }) + .then((u) => { + if (cancelled) u(); + else unsubscribe = u; + }); + return () => { + cancelled = true; + unsubscribe?.(); + }; + }, [refreshOnEvents, system]); const loadMore = useCallback(() => { if (busy || !cursor) return; @@ -277,6 +315,7 @@ export function useTicketSearch( setSort, hasMore: cursor !== undefined, loadMore, + refresh, resolve, }; }