feat: sort timeline view by due date #8470
Conversation
Added 'target_date' to the order_by options in the Gantt chart layout configuration. This enables users to sort items by Due Date in the Timeline View.
|
|
📝 WalkthroughWalkthroughA single constant file is modified to append "target_date" to the sort options for the timeline (gantt_chart) layout in the profile issues page, enabling sorting by due date. Changes
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~2 minutes Poem
Pre-merge checks and finishing touches✅ Passed checks (5 passed)
✨ Finishing touches
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 |
![coderabbitai[bot]](https://cdn.statically.io/img/avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
packages/constants/src/issue/filter.ts
🧰 Additional context used
📓 Path-based instructions (4)
**/*.{ts,tsx,mts,cts}
📄 CodeRabbit inference engine (.github/instructions/typescript.instructions.md)
**/*.{ts,tsx,mts,cts}: Useconsttype parameters for more precise literal inference in TypeScript 5.0+
Use thesatisfiesoperator to validate types without widening them
Leverage inferred type predicates to reduce the need for explicitisreturn types in filter/check functions
UseNoInfer<T>utility to block inference for specific type arguments when they should be determined by other arguments
Utilize narrowing inswitch(true)blocks for control flow analysis (TypeScript 5.3+)
Rely on narrowing from direct boolean comparisons for type guards
Trust preserved narrowing in closures when variables aren't modified after the check (TypeScript 5.4+)
Use constant indices to narrow object/array properties (TypeScript 5.5+)
Use standard ECMAScript decorators (Stage 3) instead of legacyexperimentalDecorators
Useusingdeclarations for explicit resource management with Disposable pattern instead of manual cleanup (TypeScript 5.2+)
Usewith { type: "json" }for import attributes; avoid deprecatedassertsyntax (TypeScript 5.3/5.8+)
Useimport typeexplicitly when importing types to ensure they are erased during compilation, respectingverbatimModuleSyntaxflag
Use.ts,.mts,.ctsextensions inimport typestatements (TypeScript 5.2+)
Useimport type { Type } from "mod" with { "resolution-mode": "import" }for specific module resolution contexts (TypeScript 5.3+)
Use new iterator methods (map, filter, etc.) if targeting modern environments (TypeScript 5.6+)
Utilize newSetmethods likeunion,intersection, etc., when available (TypeScript 5.5+)
UseObject.groupBy/Map.groupBystandard methods for grouping instead of external libraries (TypeScript 5.4+)
UsePromise.withResolvers()for creating promises with exposed resolve/reject functions (TypeScript 5.7+)
Use copying array methods (toSorted,toSpliced,with) for immutable array operations (TypeScript 5.2+)
Avoid accessing instance fields viasuperin classes (TypeScript 5....
Files:
packages/constants/src/issue/filter.ts
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Enable TypeScript strict mode and ensure all files are fully typed
Files:
packages/constants/src/issue/filter.ts
**/*.{js,jsx,ts,tsx,json,css}
📄 CodeRabbit inference engine (AGENTS.md)
Use Prettier with Tailwind plugin for code formatting, run
pnpm fix:format
Files:
packages/constants/src/issue/filter.ts
**/*.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{js,jsx,ts,tsx}: Use ESLint with shared config across packages, adhering to max warnings limits per package
Use camelCase for variable and function names, PascalCase for components and types
Use try-catch with proper error types and log errors appropriately
Files:
packages/constants/src/issue/filter.ts
🧠 Learnings (1)
📚 Learning: 2025-01-24T09:37:19.339Z
Learnt from: mathalav55
Repo: makeplane/plane PR: 6452
File: web/helpers/issue.helper.ts:6-6
Timestamp: 2025-01-24T09:37:19.339Z
Learning: In the Plane codebase, `ISSUE_DISPLAY_FILTERS_BY_LAYOUT` and `ISSUE_DISPLAY_FILTERS_BY_PAGE` are two distinct constants serving different purposes - one for layout-level filters and another for page-level filters. They are not interchangeable and should coexist.
Applied to files:
packages/constants/src/issue/filter.ts
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: Cursor Bugbot
🔇 Additional comments (1)
packages/constants/src/issue/filter.ts (1)
264-264: AI summary incorrectly identifies the page.The AI-generated summary states the change is in the
profile_issuespage, but the actual modification is in theissuespage configuration at line 264 (withinISSUE_DISPLAY_FILTERS_BY_PAGE.issues.layoutOptions.gantt_chart). Theprofile_issuessection (lines 107-135) does not contain agantt_chartlayout.
| display_properties: ["key", "issue_type"], | ||
| display_filters: { | ||
| order_by: ["sort_order", "-created_at", "-updated_at", "start_date", "-priority"], | ||
| order_by: ["sort_order", "-created_at", "-updated_at", "start_date", "-priority", "target_date"], |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
# First, let's look at the file structure and the specific lines mentioned
wc -l packages/constants/src/issue/filter.tsRepository: makeplane/plane
Length of output: 101
🏁 Script executed:
# Read the relevant section of the file to verify the claims
sed -n '200,280p' packages/constants/src/issue/filter.tsRepository: makeplane/plane
Length of output: 2686
🏁 Script executed:
# Also check the beginning of the file for the EServerGroupByToFilterOptions reference
sed -n '1,50p' packages/constants/src/issue/filter.tsRepository: makeplane/plane
Length of output: 1510
🏁 Script executed:
# Search for components that use gantt_chart display_filters or handle sorting
rg -n --type=ts --type=tsx 'gantt|timeline.*sort|order_by.*display' -A 3 -B 3 | head -100Repository: makeplane/plane
Length of output: 86
🏁 Script executed:
# Search for files that might reference the sort options
find packages -name '*.ts' -o -name '*.tsx' | head -20Repository: makeplane/plane
Length of output: 830
🏁 Script executed:
# Look for UI components that handle display filters and order_by
rg -n --type=ts --type=tsx 'display_filters|order_by' packages -l | head -20Repository: makeplane/plane
Length of output: 86
🏁 Script executed:
# Search for gantt_chart and order_by references
rg -n 'gantt_chart|order_by' packages --type ts | grep -E 'gantt_chart|order_by' | head -30Repository: makeplane/plane
Length of output: 2246
🏁 Script executed:
# Search for components that render sorting UI
rg -n 'SortButton|SortDropdown|OrderBy|display_filters' packages --type ts | head -30Repository: makeplane/plane
Length of output: 2893
🏁 Script executed:
# Check for react files specifically
fd -e tsx -e jsx packages | head -20Repository: makeplane/plane
Length of output: 41
🏁 Script executed:
# Search for where order_by is displayed in UI
rg -n 'order_by' packages/i18n/src/locales/en/translations.ts -A 2 -B 2 | head -60Repository: makeplane/plane
Length of output: 482
🏁 Script executed:
# Find react/UI components that might handle sorting
fd -type f \( -name '*.tsx' -o -name '*.jsx' \) packages | head -30Repository: makeplane/plane
Length of output: 229
🏁 Script executed:
# Search for components that render sort options in the codebase
rg -l 'sort_order|created_at|priority' packages --type ts | grep -i 'sort\|filter\|display' | head -20Repository: makeplane/plane
Length of output: 459
🏁 Script executed:
# Look for the actual translation keys for sort options
rg -n 'target_date|start_date|sort_order' packages/i18n/src/locales/en/translations.tsRepository: makeplane/plane
Length of output: 201
🏁 Script executed:
# Find components that use the display_filters from the constants
rg -l 'ISSUE_DISPLAY_FILTERS_BY' packages --type tsRepository: makeplane/plane
Length of output: 134
🏁 Script executed:
# Search for where sort options are rendered to users
rg -n 'order_by.*label|sort.*button|SortButton' packages -A 2 -B 2 | head -80Repository: makeplane/plane
Length of output: 41
🏁 Script executed:
# Look for components that specifically handle gantt_chart or timeline
rg -n 'gantt_chart' packages --type ts -A 5 -B 5 | head -100Repository: makeplane/plane
Length of output: 3054
🏁 Script executed:
# Search for where display_filters are used to render UI
rg -n 'display_filters.*order_by|order_by.*display_filters' packages --type ts -A 3 -B 3Repository: makeplane/plane
Length of output: 41
🏁 Script executed:
# Find the work-item/base.ts file to see how order_by is used
cat packages/utils/src/work-item/base.ts | head -100Repository: makeplane/plane
Length of output: 2675
🏁 Script executed:
# Check if there are translation keys for target_date in order_by
rg -n 'target_date' packages/i18n/src/locales/en/translations.tsRepository: makeplane/plane
Length of output: 41
🏁 Script executed:
# Check if the constants are actually imported and used in web/app packages
find packages -type d -name 'web' -o -name 'app' | head -5Repository: makeplane/plane
Length of output: 41
🏁 Script executed:
# Look for any component that consumes ISSUE_DISPLAY_FILTERS_BY_PAGE
rg -n 'ISSUE_DISPLAY_FILTERS_BY_PAGE\|ISSUE_DISPLAY_FILTERS_BY_LAYOUT' packages --type ts -B 2 -A 5 | head -80Repository: makeplane/plane
Length of output: 41
🏁 Script executed:
# Search more broadly for where sort options are rendered
rg -n '"sort_order"|"target_date"|"-created_at"' packages --type ts | grep -v node_modules | head -30Repository: makeplane/plane
Length of output: 2409
🏁 Script executed:
# Check for where the order_by constant is actually used
rg -n 'display_filters\[.*order_by' packages --type ts -A 2 -B 2Repository: makeplane/plane
Length of output: 41
🏁 Script executed:
# Look for any web or app directories at repository root
ls -la | grep -E 'web|app|src'Repository: makeplane/plane
Length of output: 115
🏁 Script executed:
# Check the apps directory
ls -la apps/Repository: makeplane/plane
Length of output: 494
🏁 Script executed:
# Look for where sort options are rendered in the app
find apps -type f -name '*.ts' -o -name '*.js' | head -20Repository: makeplane/plane
Length of output: 866
🏁 Script executed:
# Check the issue/common.ts file which seems to have sort option configurations
cat packages/constants/src/issue/common.ts | head -150Repository: makeplane/plane
Length of output: 4069
🏁 Script executed:
# Check if the translation key exists for target_date/due_date
rg -n 'common.order_by.due_date|common.order_by.target_date' packages/i18n/src/locales/en/translations.tsRepository: makeplane/plane
Length of output: 41
🏁 Script executed:
# Check if gantt/timeline specific sort options are defined elsewhere
rg -n 'gantt|timeline' packages/constants/src/issue/ --type tsRepository: makeplane/plane
Length of output: 469
🏁 Script executed:
# Look at the full ISSUE_ORDER_BY_OPTIONS to ensure target_date is included
sed -n '120,145p' packages/constants/src/issue/common.tsRepository: makeplane/plane
Length of output: 941
🏁 Script executed:
# Check the translation for the due_date/target_date sort option
rg -n 'due_date|order_by' packages/i18n/src/locales/en/translations.ts -A 1 -B 1 | grep -A 5 -B 5 'due_date'Repository: makeplane/plane
Length of output: 710
🏁 Script executed:
# Verify the exact lines in filter.ts for spreadsheet and gantt_chart
sed -n '245,270p' packages/constants/src/issue/filter.tsRepository: makeplane/plane
Length of output: 862
🏁 Script executed:
# Check if there's any pattern or reason why spreadsheet doesn't have target_date
rg -n 'spreadsheet' packages/constants/src/issue/filter.ts -A 10 -B 2Repository: makeplane/plane
Length of output: 1168
🏁 Script executed:
# Check if there's any documentation or comments explaining why spreadsheet differs
rg -n 'spreadsheet.*order_by|target_date.*spreadsheet' packages --type ts -B 5 -A 2 | head -50Repository: makeplane/plane
Length of output: 41
🏁 Script executed:
# Look at the PR or commit message context to see if spreadsheet exclusion is intentional
git log --oneline -20 packages/constants/src/issue/filter.tsRepository: makeplane/plane
Length of output: 126
🏁 Script executed:
# Verify ISSUE_ORDER_BY_OPTIONS is actually imported and used in UI components
rg -n 'ISSUE_ORDER_BY_OPTIONS' apps packages --type ts | head -20Repository: makeplane/plane
Length of output: 1341
🏁 Script executed:
# Check the order-by.tsx component to see how it filters options
cat apps/web/core/components/issues/issue-layouts/filters/header/display-filters/order-by.tsxRepository: makeplane/plane
Length of output: 1581
🏁 Script executed:
# Check if the display_filters.order_by is passed to the component
rg -n 'orderByOptions|display_filters' apps/web/core/components/issues/issue-layouts/filters/header/display-filters/order-by.tsx -B 5 -A 5Repository: makeplane/plane
Length of output: 1161
🏁 Script executed:
# Verify how the display_filters configuration is used in the component hierarchy
rg -n 'ISSUE_DISPLAY_FILTERS_BY_PAGE\|layoutOptions' apps/web/core --type ts | head -15Repository: makeplane/plane
Length of output: 41
🏁 Script executed:
# Let's search for where orderByOptions is populated/passed to FilterOrderBy
rg -n 'FilterOrderBy|orderByOptions' apps/web/core --type ts -B 3 -A 3 | head -60Repository: makeplane/plane
Length of output: 7306
🏁 Script executed:
# Check how display_filters.order_by from constants is used
rg -n 'display_filters.*order_by|layoutOptions' apps/web/core --type ts -B 2 -A 2 | head -40Repository: makeplane/plane
Length of output: 4129
🏁 Script executed:
# Verify the translation key exists in English translations
rg -n 'order_by.*due_date\|due_date.*order_by' packages/i18n/src/locales/en/translations.ts -B 2 -A 2Repository: makeplane/plane
Length of output: 41
🏁 Script executed:
# Check the exact structure of the translation object
sed -n '569,580p' packages/i18n/src/locales/en/translations.tsRepository: makeplane/plane
Length of output: 356
🏁 Script executed:
# Confirm that the spreadsheet exclusion might be intentional by checking if there's a pattern
rg -n 'spreadsheet.*order_by\|order_by.*spreadsheet' packages/constants/src/issue/filter.ts -B 2 -A 2Repository: makeplane/plane
Length of output: 41
Addition of target_date enables due date sorting for timeline view.
The change correctly adds "target_date" to the order_by options for the gantt_chart layout, enabling timeline sorting by due date. This is consistent with other layouts in the issues page (list and kanban already include "target_date").
The UI integration is already functional—the FilterOrderBy component dynamically renders sort options based on the display_filters.order_by configuration passed from ISSUE_DISPLAY_FILTERS_BY_PAGE, so the new sort option will be available to users immediately.
However, note that the spreadsheet layout (line 253) does not include "target_date" in its order_by array while list, kanban, and gantt_chart do. Please verify whether this is intentional or if it should be added for consistency across all layouts that support date-based sorting.
🤖 Prompt for AI Agents
packages/constants/src/issue/filter.ts around line 253 and 264: the gantt_chart
layout at line 264 adds "target_date" to its order_by array but the spreadsheet
layout at line 253 does not include "target_date", creating an inconsistency for
date-based sorting; verify whether spreadsheet should support due-date sorting
and if so add "target_date" to the spreadsheet order_by array to match
list/kanban/gantt_chart, otherwise leave as-is and add a comment explaining the
intentional omission.
2 participants
Summary
This PR enables sorting the Timeline View by Due Date (target_date).
Changes
Why
Fixes #8267. This feature was requested to allow users to visualize work items based on their due dates in the timeline view, which helps in better deadline management.
Note
Enables due-date sorting in the Timeline/Gantt view.
"target_date"toorder_byforissues.gantt_chart.display_filtersinpackages/constants/src/issue/filter.ts, allowing sorting by due date in the Gantt timelineWritten by Cursor Bugbot for commit 1ea7244. This will update automatically on new commits. Configure here.
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.