Add ordered sub-issue navigation (#5938)
## Thinking Path > - Paperclip orchestrates AI-agent companies through company-scoped issues, comments, and execution context. > - The issue detail page is the board surface where operators and agents inspect a task in its parent/child workflow. > - Ordered sub-issues need a low-friction way to move through work without returning to the parent list after every issue. > - Existing issue detail navigation only covered sibling transitions and did not continue into a parent issue's first ordered child. > - This pull request adds ordered previous/next navigation for issue detail views and extends it to continue from a parent or last sibling into the first direct child. > - The benefit is a smoother review/execution path through hierarchical work while preserving hidden issue filtering and dependency-aware ordering. ## What Changed - Added `IssueSiblingNavigation` and route-state handling so issue detail footers can link to previous/next ordered issues. - Extended sub-issue ordering helpers to build navigation from siblings plus direct children, including root-parent and last-sibling-to-first-child cases. - Added page, component, and library tests for ordered sibling navigation, child fallback navigation, hidden issues, and link rendering. - Fixed the quicklook blur/click race Greptile found by deferring close until after portaled link clicks can complete, with a regression test. - Polished the navigation landmark label so it remains accurate when the next target is a direct child rather than a sibling. ## Verification - `pnpm exec vitest run src/components/IssueLinkQuicklook.test.tsx src/lib/issue-detail-subissues.test.ts src/components/IssueSiblingNavigation.test.tsx src/pages/IssueDetail.test.tsx --config vitest.config.ts` from `ui/` - 31 tests passed. - `pnpm --filter @paperclipai/ui typecheck` - passed. - `git diff --check` - passed. - GitHub PR checks on latest head `34046be2` - passed: Greptile Review, verify, e2e, Canary Dry Run, policy, Snyk, and serialized server shards. - Screenshots: not captured in this heartbeat; this PR is a draft and the changed states are covered by focused component/page tests. ## Risks - Low risk; this is a UI navigation addition with no database or API contract changes. - The main behavioral risk is navigation ordering drift if `workflowSort` expectations change later. - The IssueDetail navigation now waits for child issue loading, which avoids stale child fallback links but can delay footer navigation briefly while data loads. > For core feature work, check [`ROADMAP.md`](ROADMAP.md) first and discuss it in `#dev` before opening the PR. Feature PRs that overlap with planned core work may need to be redirected - check the roadmap first. See `CONTRIBUTING.md`. ## Model Used - OpenAI Codex, GPT-5 coding agent with repository tool use and shell execution. ## Checklist - [x] I have included a thinking path that traces from project context to this change - [x] I have specified the model used (with version and capability details) - [x] I have checked ROADMAP.md and confirmed this PR does not duplicate planned core work - [x] I have run tests locally and they pass - [x] I have added or updated tests where applicable - [ ] If this change affects the UI, I have included before/after screenshots - [x] I have updated relevant documentation to reflect my changes - [x] I have considered and documented any risks above - [x] I will address all Greptile and reviewer comments before requesting merge --------- Co-authored-by: Paperclip <noreply@paperclip.ing>
This commit is contained in:
Dotta
@@ -2,7 +2,7 @@
|
||||
|
||||
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
||||
import type { Agent, Issue, IssueTreeControlPreview, IssueTreeHold } from "@paperclipai/shared";
|
||||
import { act, type ButtonHTMLAttributes, type ReactNode } from "react";
|
||||
import { act, type AnchorHTMLAttributes, type ButtonHTMLAttributes, type ReactNode } from "react";
|
||||
import { createRoot, type Root } from "react-dom/client";
|
||||
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
|
||||
import { canBoardResolveRecoveryAction, IssueDetail } from "./IssueDetail";
|
||||
@@ -110,7 +110,24 @@ vi.mock("../api/instanceSettings", () => ({
|
||||
}));
|
||||
|
||||
vi.mock("@/lib/router", () => ({
|
||||
Link: ({ children, to }: { children?: ReactNode; to: string }) => <a href={to}>{children}</a>,
|
||||
Link: ({
|
||||
children,
|
||||
to,
|
||||
state: _state,
|
||||
issuePrefetch: _issuePrefetch,
|
||||
issueQuicklookSide: _issueQuicklookSide,
|
||||
issueQuicklookAlign: _issueQuicklookAlign,
|
||||
...props
|
||||
}: {
|
||||
children?: ReactNode;
|
||||
to: string;
|
||||
state?: unknown;
|
||||
issuePrefetch?: unknown;
|
||||
issueQuicklookSide?: unknown;
|
||||
issueQuicklookAlign?: unknown;
|
||||
} & AnchorHTMLAttributes<HTMLAnchorElement>) => (
|
||||
<a href={to} {...props}>{children}</a>
|
||||
),
|
||||
useLocation: () => ({ pathname: "/issues/PAP-1", search: "", hash: "", state: null }),
|
||||
useNavigate: () => mockNavigate,
|
||||
useNavigationType: () => "PUSH",
|
||||
@@ -197,6 +214,7 @@ vi.mock("../components/IssueChatThread", () => ({
|
||||
onStopRun?: (runId: string) => Promise<void>;
|
||||
stopRunLabel?: string;
|
||||
stoppingRunLabel?: string;
|
||||
footer?: ReactNode;
|
||||
}) => {
|
||||
mockIssueChatThreadRender(props);
|
||||
return (
|
||||
@@ -207,6 +225,7 @@ vi.mock("../components/IssueChatThread", () => ({
|
||||
{props.stopRunLabel ?? "Stop run"}
|
||||
</button>
|
||||
) : null}
|
||||
{props.footer}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
@@ -839,6 +858,116 @@ describe("IssueDetail", () => {
|
||||
expect(consoleErrorSpy).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it("renders sibling previous and next navigation at the chat footer", async () => {
|
||||
const issue = createIssue({
|
||||
id: "issue-2",
|
||||
identifier: "PAP-2",
|
||||
issueNumber: 2,
|
||||
parentId: "parent-1",
|
||||
title: "Current sibling",
|
||||
createdAt: new Date("2026-04-02T00:00:00.000Z"),
|
||||
});
|
||||
const previous = createIssue({
|
||||
id: "issue-1",
|
||||
identifier: "PAP-1",
|
||||
issueNumber: 1,
|
||||
parentId: "parent-1",
|
||||
title: "Previous sibling",
|
||||
status: "done",
|
||||
createdAt: new Date("2026-04-01T00:00:00.000Z"),
|
||||
});
|
||||
const next = createIssue({
|
||||
id: "issue-3",
|
||||
identifier: "PAP-3",
|
||||
issueNumber: 3,
|
||||
parentId: "parent-1",
|
||||
title: "Next sibling",
|
||||
blockedBy: [{ id: "issue-2" }] as Issue["blockedBy"],
|
||||
createdAt: new Date("2026-04-03T00:00:00.000Z"),
|
||||
});
|
||||
|
||||
mockIssuesApi.get.mockResolvedValue(issue);
|
||||
mockIssuesApi.list.mockImplementation((_companyId, filters?: { descendantOf?: string; parentId?: string }) => {
|
||||
if (filters?.parentId === "parent-1") return Promise.resolve([next, previous, issue]);
|
||||
return Promise.resolve([]);
|
||||
});
|
||||
|
||||
await act(async () => {
|
||||
root.render(
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<IssueDetail />
|
||||
</QueryClientProvider>,
|
||||
);
|
||||
});
|
||||
await flushReact();
|
||||
await flushReact();
|
||||
|
||||
expect(mockIssuesApi.list).toHaveBeenCalledWith("company-1", {
|
||||
parentId: "parent-1",
|
||||
includeBlockedBy: true,
|
||||
});
|
||||
expect(container.querySelector('a[aria-label="Previous sub-issue: PAP-1 - Previous sibling"]')).toBeTruthy();
|
||||
expect(container.querySelector('a[aria-label="Next sub-issue: PAP-3 - Next sibling"]')).toBeTruthy();
|
||||
expect(container.textContent).toContain("Previous");
|
||||
expect(container.textContent).toContain("Previous sibling");
|
||||
expect(container.textContent).toContain("Next");
|
||||
expect(container.textContent).toContain("Next sibling");
|
||||
expect(mockIssueChatThreadRender.mock.calls.at(-1)?.[0].footer).toBeTruthy();
|
||||
});
|
||||
|
||||
it("uses the first child issue as next navigation for parent issues without a sibling next", async () => {
|
||||
const parent = createIssue({
|
||||
id: "issue-parent",
|
||||
identifier: "PAP-10",
|
||||
issueNumber: 10,
|
||||
parentId: null,
|
||||
title: "Plan parent",
|
||||
createdAt: new Date("2026-04-01T00:00:00.000Z"),
|
||||
});
|
||||
const firstChild = createIssue({
|
||||
id: "issue-child-1",
|
||||
identifier: "PAP-11",
|
||||
issueNumber: 11,
|
||||
parentId: "issue-parent",
|
||||
title: "First child",
|
||||
createdAt: new Date("2026-04-02T00:00:00.000Z"),
|
||||
});
|
||||
const secondChild = createIssue({
|
||||
id: "issue-child-2",
|
||||
identifier: "PAP-12",
|
||||
issueNumber: 12,
|
||||
parentId: "issue-parent",
|
||||
title: "Second child",
|
||||
blockedBy: [{ id: "issue-child-1" }] as Issue["blockedBy"],
|
||||
createdAt: new Date("2026-04-03T00:00:00.000Z"),
|
||||
});
|
||||
|
||||
mockIssuesApi.get.mockResolvedValue(parent);
|
||||
mockIssuesApi.list.mockImplementation((_companyId, filters?: { descendantOf?: string; parentId?: string }) => {
|
||||
if (filters?.descendantOf === "issue-parent") return Promise.resolve([secondChild, firstChild]);
|
||||
return Promise.resolve([]);
|
||||
});
|
||||
|
||||
await act(async () => {
|
||||
root.render(
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<IssueDetail />
|
||||
</QueryClientProvider>,
|
||||
);
|
||||
});
|
||||
await flushReact();
|
||||
await flushReact();
|
||||
|
||||
expect(mockIssuesApi.list).toHaveBeenCalledWith("company-1", {
|
||||
descendantOf: "issue-parent",
|
||||
includeBlockedBy: true,
|
||||
});
|
||||
expect(container.querySelector('a[aria-label="Next sub-issue: PAP-11 - First child"]')).toBeTruthy();
|
||||
expect(container.textContent).toContain("Next");
|
||||
expect(container.textContent).toContain("First child");
|
||||
expect(mockIssueChatThreadRender.mock.calls.at(-1)?.[0].footer).toBeTruthy();
|
||||
});
|
||||
|
||||
it("passes blocker attention to the issue detail header status icon", async () => {
|
||||
mockIssuesApi.get.mockResolvedValue(createIssue({
|
||||
status: "blocked",
|
||||
|
||||
Reference in New Issue
Block a user