mirror of
https://github.com/alkimake/paperclip.git
synced 2026-06-19 12:10:37 +09:00
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
GitHub
parent
eb452fba30
commit
012a738729
11 changed files with 763 additions and 7 deletions
|
|
@ -3,6 +3,7 @@
|
|||
import { describe, expect, it } from "vitest";
|
||||
import type { Issue } from "@paperclipai/shared";
|
||||
import {
|
||||
buildIssueSiblingNavigation,
|
||||
buildSubIssueProgressSummary,
|
||||
shouldRenderRichSubIssuesSection,
|
||||
shouldRenderSubIssueProgressSummary,
|
||||
|
|
@ -24,6 +25,21 @@ function issue(
|
|||
} as Issue;
|
||||
}
|
||||
|
||||
function siblingIssue(
|
||||
id: string,
|
||||
createdAt: string,
|
||||
blockedByIds: string[] = [],
|
||||
overrides: Partial<Issue> = {},
|
||||
): Issue {
|
||||
return {
|
||||
...issue(id, "todo", createdAt, blockedByIds),
|
||||
parentId: "parent-1",
|
||||
title: `Sibling ${id}`,
|
||||
hiddenAt: null,
|
||||
...overrides,
|
||||
} as Issue;
|
||||
}
|
||||
|
||||
describe("shouldRenderRichSubIssuesSection", () => {
|
||||
it("shows the rich sub-issues section while child issues are loading", () => {
|
||||
expect(shouldRenderRichSubIssuesSection(true, 0)).toBe(true);
|
||||
|
|
@ -78,3 +94,112 @@ describe("buildSubIssueProgressSummary", () => {
|
|||
expect(summary.target?.issue.id).toBe("2");
|
||||
});
|
||||
});
|
||||
|
||||
describe("buildIssueSiblingNavigation", () => {
|
||||
it("orders linear blocker chains before selecting previous and next siblings", () => {
|
||||
const current = siblingIssue("2", "2026-04-02T00:00:00.000Z", ["1"]);
|
||||
const navigation = buildIssueSiblingNavigation(current, [
|
||||
siblingIssue("3", "2026-04-03T00:00:00.000Z", ["2"]),
|
||||
siblingIssue("1", "2026-04-01T00:00:00.000Z"),
|
||||
current,
|
||||
]);
|
||||
|
||||
expect(navigation?.previous?.id).toBe("1");
|
||||
expect(navigation?.next?.id).toBe("3");
|
||||
expect(navigation?.currentIndex).toBe(1);
|
||||
expect(navigation?.totalCount).toBe(3);
|
||||
});
|
||||
|
||||
it("degrades branch and merge graphs to stable workflow order", () => {
|
||||
const current = siblingIssue("3", "2026-04-03T00:00:00.000Z", ["1"]);
|
||||
const navigation = buildIssueSiblingNavigation(current, [
|
||||
siblingIssue("4", "2026-04-04T00:00:00.000Z", ["2", "3"]),
|
||||
siblingIssue("2", "2026-04-02T00:00:00.000Z", ["1"]),
|
||||
current,
|
||||
siblingIssue("1", "2026-04-01T00:00:00.000Z"),
|
||||
]);
|
||||
|
||||
expect(navigation?.previous?.id).toBe("2");
|
||||
expect(navigation?.next?.id).toBe("4");
|
||||
});
|
||||
|
||||
it("falls back to created time and id when siblings have no direct blocker hints", () => {
|
||||
const current = siblingIssue("2", "2026-04-01T00:00:00.000Z");
|
||||
const navigation = buildIssueSiblingNavigation(current, [
|
||||
siblingIssue("3", "2026-04-02T00:00:00.000Z"),
|
||||
siblingIssue("1", "2026-04-01T00:00:00.000Z"),
|
||||
current,
|
||||
]);
|
||||
|
||||
expect(navigation?.previous?.id).toBe("1");
|
||||
expect(navigation?.next?.id).toBe("3");
|
||||
});
|
||||
|
||||
it("hides navigation for root issues without children or hidden current issues", () => {
|
||||
expect(buildIssueSiblingNavigation(siblingIssue("1", "2026-04-01T00:00:00.000Z", [], { parentId: null }), []))
|
||||
.toBeNull();
|
||||
expect(buildIssueSiblingNavigation(siblingIssue("1", "2026-04-01T00:00:00.000Z", [], { parentId: null }), [
|
||||
siblingIssue("2", "2026-04-02T00:00:00.000Z", [], { parentId: null }),
|
||||
])).toBeNull();
|
||||
expect(buildIssueSiblingNavigation(siblingIssue("1", "2026-04-01T00:00:00.000Z", [], { hiddenAt: new Date() }), []))
|
||||
.toBeNull();
|
||||
});
|
||||
|
||||
it("hides navigation when the current issue is the only visible child", () => {
|
||||
const current = siblingIssue("1", "2026-04-01T00:00:00.000Z");
|
||||
const navigation = buildIssueSiblingNavigation(current, [
|
||||
current,
|
||||
siblingIssue("2", "2026-04-02T00:00:00.000Z", [], { hiddenAt: new Date() }),
|
||||
]);
|
||||
|
||||
expect(navigation).toBeNull();
|
||||
});
|
||||
|
||||
it("returns only next for the first sibling and only previous for the last sibling", () => {
|
||||
const first = siblingIssue("1", "2026-04-01T00:00:00.000Z");
|
||||
const last = siblingIssue("3", "2026-04-03T00:00:00.000Z");
|
||||
const siblings = [
|
||||
siblingIssue("2", "2026-04-02T00:00:00.000Z"),
|
||||
last,
|
||||
first,
|
||||
];
|
||||
|
||||
expect(buildIssueSiblingNavigation(first, siblings)).toMatchObject({
|
||||
previous: null,
|
||||
next: { id: "2" },
|
||||
});
|
||||
expect(buildIssueSiblingNavigation(last, siblings)).toMatchObject({
|
||||
previous: { id: "2" },
|
||||
next: null,
|
||||
});
|
||||
});
|
||||
|
||||
it("uses the first direct child as next when a root issue has no sibling next", () => {
|
||||
const current = siblingIssue("1", "2026-04-01T00:00:00.000Z", [], { parentId: null });
|
||||
const navigation = buildIssueSiblingNavigation(current, [], [
|
||||
siblingIssue("3", "2026-04-03T00:00:00.000Z", ["2"], { parentId: "1" }),
|
||||
siblingIssue("2", "2026-04-02T00:00:00.000Z", [], { parentId: "1" }),
|
||||
]);
|
||||
|
||||
expect(navigation).toMatchObject({
|
||||
previous: null,
|
||||
next: { id: "2" },
|
||||
});
|
||||
});
|
||||
|
||||
it("uses the first direct child as next when the current sibling is last", () => {
|
||||
const current = siblingIssue("2", "2026-04-02T00:00:00.000Z");
|
||||
const navigation = buildIssueSiblingNavigation(current, [
|
||||
siblingIssue("1", "2026-04-01T00:00:00.000Z"),
|
||||
current,
|
||||
], [
|
||||
siblingIssue("4", "2026-04-04T00:00:00.000Z", ["3"], { parentId: "2" }),
|
||||
siblingIssue("3", "2026-04-03T00:00:00.000Z", [], { parentId: "2" }),
|
||||
]);
|
||||
|
||||
expect(navigation).toMatchObject({
|
||||
previous: { id: "1" },
|
||||
next: { id: "3" },
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue