feat(layouts): add subgroup and gantt controls#291
Conversation
Co-Authored-By: OpenAI Codex <noreply@openai.com>
|
Warning Review limit reached
Next review available in: 53 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (2)
📝 WalkthroughWalkthroughThe PR adds persisted secondary grouping for issue lists and boards, including nested list sections and board swimlanes. It also makes the Gantt layout zoomable and editable through drag-to-move and edge-resize interactions. ChangesSecondary grouping across issue layouts
Interactive Gantt timeline
Estimated code review effort: 4 (Complex) | ~45 minutes Sequence Diagram(s)sequenceDiagram
participant User
participant IssueListPage
participant IssueLayoutBoard
participant IssueLayoutList
participant IssueLayoutGantt
User->>IssueListPage: select grouping or interact with layout
IssueListPage->>IssueLayoutList: provide nested grouping data
IssueListPage->>IssueLayoutBoard: provide swimlane settings
IssueListPage->>IssueLayoutGantt: provide inline update handler
IssueLayoutGantt->>IssueListPage: submit updated dates
Possibly related PRs
Suggested labels: Suggested reviewers: Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
@aditya-vithaldas Thank you for your contributions, we prefer keeping one issue -> one PR workflow, existing PRs can stay, but please follow that workflow if you open new PRs 🙌 |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: e2bfd09cf1
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| <Link | ||
| to={issueHref(issue.id)} | ||
| className="absolute top-1.5 flex h-5 items-center overflow-hidden rounded-(--radius-md) px-2 text-[11px] font-medium text-white shadow-sm no-underline transition-opacity hover:opacity-80" | ||
| onPointerDown={editable ? startTimelineDrag(issue, 'move') : undefined} |
There was a problem hiding this comment.
When an editable Gantt bar is moved by dragging the bar itself, the handler is attached to a Link, but the link remains natively draggable and the move path does not prevent the default pointer action. In browsers that start native link drag-and-drop, the custom pointer sequence can be cancelled before pointerup, so no date PATCH is sent and the window listeners may be left behind; disabling native dragging on the bar link or preventing the native drag for move gestures avoids making the new reschedule interaction unreliable.
Useful? React with 👍 / 👎.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@apps/web/src/components/project-issues/ProjectIssuesDisplayPanel.tsx`:
- Around line 221-226: Add selected-state accessibility semantics to the shared
RadioRow control: apply aria-pressed={selected} to its underlying button so
assistive technology can identify the active sub-group option. Update RadioRow
rather than only the ProjectIssuesDisplayPanel call site.
In `@apps/web/src/components/work-item/layouts/IssueLayoutBoard.tsx`:
- Around line 182-195: Update buildColumnSwimlanes in IssueLayoutBoard.tsx so it
does not return early when items is empty if showEmptyGroups is enabled; allow
buildGroupedIssues to run for empty columns while retaining the existing early
returns for subGroupBy values none and states, so configured empty swimlanes are
generated.
In `@apps/web/src/components/work-item/layouts/IssueLayoutGantt.tsx`:
- Around line 267-282: Disable native browser dragging on the Gantt bar link by
adding draggable={false} to the Link element in IssueLayoutGantt. Locate the
Link rendering the issue bar alongside onPointerDown and onClick, matching the
implementation used in IssueLayoutList.tsx.
- Around line 340-343: The issue date calculations mix UTC parsing, local-day
truncation, and fixed millisecond increments. Update the date helpers and their
callers in IssueLayoutGantt, including addDaysMs and the issue-date parsing
logic, to construct YYYY-MM-DD values as local calendar dates and advance them
with Date.setDate() rather than Date.parse(), startOfDay(), or DAY_MS
arithmetic.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: fddf3920-3b44-4d0a-bcf6-7fff15d3697d
📒 Files selected for processing (9)
apps/web/src/components/project-issues/ProjectIssuesDisplayPanel.tsxapps/web/src/components/work-item/layouts/IssueLayoutBoard.tsxapps/web/src/components/work-item/layouts/IssueLayoutGantt.tsxapps/web/src/components/work-item/layouts/IssueLayoutList.tsxapps/web/src/components/work-item/layouts/IssueLayoutTypes.tsapps/web/src/lib/moduleWorkItemsPrefs.tsapps/web/src/lib/projectIssuesDisplay.tsapps/web/src/lib/projectIssuesEvents.tsapps/web/src/pages/IssueListPage.tsx
| <RadioRow | ||
| key={opt.value} | ||
| value={opt.value} | ||
| label={opt.label} | ||
| selected={display.subGroupBy === opt.value} | ||
| onSelect={(v) => setDisplay((p) => ({ ...p, subGroupBy: v }))} |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Expose the selected sub-group to assistive technology.
RadioRow renders plain buttons and its visual checkmark is aria-hidden, so the new selector does not announce which option is selected. Add state semantics in the shared control, e.g. aria-pressed={selected}.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@apps/web/src/components/project-issues/ProjectIssuesDisplayPanel.tsx` around
lines 221 - 226, Add selected-state accessibility semantics to the shared
RadioRow control: apply aria-pressed={selected} to its underlying button so
assistive technology can identify the active sub-group option. Update RadioRow
rather than only the ProjectIssuesDisplayPanel call site.
| <Link | ||
| to={issueHref(issue.id)} | ||
| className="absolute top-1.5 flex h-5 items-center overflow-hidden rounded-(--radius-md) px-2 text-[11px] font-medium text-white shadow-sm no-underline transition-opacity hover:opacity-80" | ||
| onPointerDown={editable ? startTimelineDrag(issue, 'move') : undefined} | ||
| onClick={(event) => { | ||
| if (suppressClickRef.current) event.preventDefault(); | ||
| }} | ||
| className={`absolute top-1.5 flex h-5 items-center overflow-hidden rounded-(--radius-md) px-2 text-[11px] font-medium text-white shadow-sm no-underline transition-opacity hover:opacity-80 ${ | ||
| editable ? 'cursor-grab active:cursor-grabbing' : '' | ||
| }`} | ||
| style={{ | ||
| left: `${offset * DAY_PX + 2}px`, | ||
| width: `${span * DAY_PX - 4}px`, | ||
| left: `${offset * dayPx + 2}px`, | ||
| width: `${barWidth}px`, | ||
| backgroundColor: color, | ||
| }} | ||
| title={`${issue.name} · ${issue.start_date} → ${issue.target_date}`} | ||
| > |
There was a problem hiding this comment.
🩺 Stability & Availability | 🟡 Minor | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# Map the relevant files first
git ls-files 'apps/web/src/components/work-item/layouts/IssueLayoutGantt.tsx' \
'apps/web/src/components/work-item/layouts/IssueLayoutList.tsx'
echo "---- outline: IssueLayoutGantt.tsx ----"
ast-grep outline apps/web/src/components/work-item/layouts/IssueLayoutGantt.tsx --view expanded || true
echo "---- outline: IssueLayoutList.tsx ----"
ast-grep outline apps/web/src/components/work-item/layouts/IssueLayoutList.tsx --view expanded || true
echo "---- relevant lines in IssueLayoutGantt.tsx ----"
sed -n '70,120p' apps/web/src/components/work-item/layouts/IssueLayoutGantt.tsx
sed -n '255,290p' apps/web/src/components/work-item/layouts/IssueLayoutGantt.tsx
echo "---- relevant lines in IssueLayoutList.tsx ----"
sed -n '1,220p' apps/web/src/components/work-item/layouts/IssueLayoutList.tsxRepository: Devlaner/devlane
Length of output: 14711
Disable native dragging on the Gantt bar link. The bar is a native-draggable <a>, and move-mode pointer dragging skips preventDefault(), so a mouse drag can start the browser’s link-drag ghost and interfere with the timeline gesture. Add draggable={false} here, like IssueLayoutList.tsx.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@apps/web/src/components/work-item/layouts/IssueLayoutGantt.tsx` around lines
267 - 282, Disable native browser dragging on the Gantt bar link by adding
draggable={false} to the Link element in IssueLayoutGantt. Locate the Link
rendering the issue bar alongside onPointerDown and onClick, matching the
implementation used in IssueLayoutList.tsx.
| function addDaysMs(ms: number, days: number): number { | ||
| return ms + days * DAY_MS; | ||
| } | ||
|
|
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Inspect the unchanged date helpers to confirm local vs UTC parsing.
fd IssueLayoutGantt.tsx --exec sed -n '335,349p' {}
rg -nP '\bfunction\s+(parseDay|startOfDay)\b' apps/web/src -A6Repository: Devlaner/devlane
Length of output: 1859
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# Inspect the date formatting/persistence path around the reported lines.
sed -n '90,150p' apps/web/src/components/work-item/layouts/IssueLayoutGantt.tsx
printf '\n---\n'
sed -n '300,360p' apps/web/src/components/work-item/layouts/IssueLayoutGantt.tsx
# Probe DST behavior for local-day arithmetic in a representative DST timezone.
node - <<'JS'
function startOfDay(d) {
return new Date(d.getFullYear(), d.getMonth(), d.getDate());
}
function addDaysMs(ms, days) {
return ms + days * 86400000;
}
function formatInputDay(ms) {
const d = new Date(ms);
return `${d.getFullYear()}-${String(d.getMonth()+1).padStart(2,'0')}-${String(d.getDate()).padStart(2,'0')}`;
}
const tz = process.env.TZ || 'system';
const base = new Date('2021-11-06T00:00:00');
const parsed = startOfDay(base).getTime();
const next = addDaysMs(parsed, 1);
console.log(JSON.stringify({
tz,
baseLocal: base.toString(),
parsedLocal: new Date(parsed).toString(),
nextLocal: new Date(next).toString(),
nextDay: formatInputDay(next),
}, null, 2));
JSRepository: Devlaner/devlane
Length of output: 5005
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# Inspect the formatter used when persisting dates.
rg -n "function formatInputDay|formatInputDay\(" apps/web/src/components/work-item/layouts/IssueLayoutGantt.tsx -A8 -B4
# Probe parse/add/format behavior in DST-sensitive timezones.
node - <<'JS'
const DAY_MS = 86400000;
function startOfDay(d) {
return new Date(d.getFullYear(), d.getMonth(), d.getDate());
}
function parseDay(input) {
const t = Date.parse(input);
if (Number.isNaN(t)) return null;
return startOfDay(new Date(t)).getTime();
}
function addDaysMs(ms, days) {
return ms + days * DAY_MS;
}
function formatInputDay(ms) {
const d = new Date(ms);
return `${d.getFullYear()}-${String(d.getMonth()+1).padStart(2,'0')}-${String(d.getDate()).padStart(2,'0')}`;
}
for (const tz of ['UTC', 'America/New_York', 'Europe/Berlin']) {
process.env.TZ = tz;
const input = '2021-11-06';
const start = parseDay(input);
const next = addDaysMs(start, 1);
console.log(JSON.stringify({
tz,
input,
parsed: new Date(start).toString(),
added: new Date(next).toString(),
formatted: formatInputDay(next),
}));
}
JSRepository: Devlaner/devlane
Length of output: 1646
🏁 Script executed:
#!/bin/bash
set -euo pipefail
node - <<'JS'
const DAY_MS = 86400000;
function startOfDay(d) {
return new Date(d.getFullYear(), d.getMonth(), d.getDate());
}
function addDaysMs(ms, days) {
return ms + days * DAY_MS;
}
function fmt(ms) {
const d = new Date(ms);
return `${d.toString()} | ${d.getFullYear()}-${String(d.getMonth()+1).padStart(2,'0')}-${String(d.getDate()).padStart(2,'0')}`;
}
const cases = [
'2021-11-06',
'2021-11-07',
'2021-11-08',
'2021-03-13',
'2021-03-14',
'2021-03-15',
];
for (const tz of ['UTC', 'America/New_York', 'Europe/Berlin']) {
process.env.TZ = tz;
console.log(`TZ=${tz}`);
for (const input of cases) {
const parsed = Date.parse(input);
const sod = startOfDay(new Date(parsed)).getTime();
const plus1 = addDaysMs(sod, 1);
console.log(JSON.stringify({
input,
parsed: new Date(parsed).toString(),
sod: fmt(sod),
plus1: fmt(plus1),
roundTrip: `${new Date(sod).getFullYear()}-${String(new Date(sod).getMonth()+1).padStart(2,'0')}-${String(new Date(sod).getDate()).padStart(2,'0')}`,
plus1Day: `${new Date(plus1).getFullYear()}-${String(new Date(plus1).getMonth()+1).padStart(2,'0')}-${String(new Date(plus1).getDate()).padStart(2,'0')}`,
}));
}
}
JSRepository: Devlaner/devlane
Length of output: 5868
Use calendar-day math end-to-end for issue dates. Date.parse('YYYY-MM-DD'), startOfDay(), and addDaysMs() mix UTC parsing, local truncation, and fixed 24h arithmetic, which can persist the wrong day in some timezones and across DST boundaries. Parse these as local calendar dates and advance them with setDate() instead of milliseconds.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@apps/web/src/components/work-item/layouts/IssueLayoutGantt.tsx` around lines
340 - 343, The issue date calculations mix UTC parsing, local-day truncation,
and fixed millisecond increments. Update the date helpers and their callers in
IssueLayoutGantt, including addDaysMs and the issue-date parsing logic, to
construct YYYY-MM-DD values as local calendar dates and advance them with
Date.setDate() rather than Date.parse(), startOfDay(), or DAY_MS arithmetic.
|
@aditya-vithaldas please resolve the AI comments, and we can merge afterwards. |
2 participants
Summary
Adds a second display grouping dimension for project work items and makes the Gantt layout interactive with zoom and date rescheduling controls.
Linked issues
Closes #177
Closes #180
Type of change
feat:) — user-visible new capabilityfix:) — corrects broken behaviorrefactor:) — no behavior change, internal onlyperf:) — measurable improvementdocs:) — README / CLAUDE.md / planning docs onlytest:) — adds or corrects testschore:) — deps, tooling, CI, formattingstyle:) — visual / theming polish onlySurface
apps/api/)apps/web/)apps/api/migrations/)What changed
Sub-group bydisplay setting for project work items, with guardrails so it cannot match the primary group-by value.Why this approach
The project issue page already owns display state and optimistic inline updates, so this threads the new display setting and Gantt edits through the same flow instead of creating a second persistence path. Board swimlanes stay inside the existing state columns so drag-to-state remains unambiguous.
Database / migrations
No schema changes.
Breaking changes
Test plan
npm run validate(root) — typecheck + lint + prettier + go vet + go testnpm --prefix apps/web run buildScreenshots / recordings (UI changes)
Not captured; no seeded local browser session was available for the project work-items view.
Rollout notes
None.
AI assistance
OpenAI Codex— and AI-assisted commits include aCo-Authored-By:trailerChecklist
--no-verifybypass).envvalues committedSummary by CodeRabbit