fix: date range picker on cycles and modules list

[gakshita]

Description

This PR replaces the date range picker with a day picker for cycles and module layouts and details sidebar

Summary by CodeRabbit

• New Features

  • Enhanced date selection interfaces with separate dropdowns for start and due/target dates, featuring localized placeholder text and updated icons that provide clearer user cues.

• Refactor

  • Streamlined date change logic across components by consolidating parameters into a single payload and enhancing form value retrieval for improved consistency.

• UI Improvements

  • Refined layout and labeling of date input elements, ensuring an intuitive and responsive user experience.

[coderabbitai]

Walkthrough

The changes update various components to improve date handling by replacing the single range selector with separate date dropdowns. New icons from lucide-react have been introduced, and the useForm hook is now extended with getValues in multiple files. The handleDateChange function has been refactored across components to accept a single payload (or partial object) instead of separate parameters. These modifications span components in both cycles and modules, streamlining UI interactions and validation logic for date inputs.

Changes

Files	Change Summary
web/.../cycles/analytics-sidebar/sidebar-header.tsx, web/.../cycles/list/cycle-list-item-action.tsx	Updated import of new Calendar icons; replaced DateRangeDropdown with DateDropdown; updated useForm to include getValues; refactored handleDateChange to accept a single payload with optional start_date and end_date; implemented separate Controller components for each date field.
web/.../analytics-sidebar/root.tsx, web/.../modules/module-card-item.tsx, web/.../modules/module-list-item-action.tsx	Added new Calendar icons and localized placeholders; replaced DateRangeDropdown with two DateDropdown components for individual date selection; updated useForm to include getValues; refactored handleDateChange (or handleModuleDetailsChange) to accept a partial object, adding min/max date constraints for validation.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant DateDropdown
    participant Controller
    participant handleDateChange
    participant FormState

    User->>DateDropdown: Select start/end date
    DateDropdown->>Controller: Trigger onChange event
    Controller->>handleDateChange: Call with payload { start_date, end_date }
    handleDateChange-->>Controller: Return validation result
    Controller->>FormState: Update form state if valid

Loading

sequenceDiagram
    participant User
    participant DateDropdown
    participant ModuleComponent
    participant handleDateChange

    User->>DateDropdown: Select start/target date
    DateDropdown->>ModuleComponent: Trigger onChange event
    ModuleComponent->>handleDateChange: Call with payload { start_date/target_date }
    handleDateChange-->>ModuleComponent: Return validation status
    ModuleComponent->>User: Reflect updated module details

Loading

Possibly related PRs

• [WEB-2903] fix: active cycle update payload #6270: Refactors handleDateChange to use a single payload for date handling, similar to these changes.
• Fix: date range selector #6625: Replaces DateRangeDropdown with DateDropdown components and updates the date input logic.
• [WEB-3237, 3238] dev: date picker enhancements #6470: Consolidates date handling logic across components by refactoring the handleDateChange function to accept a payload.

Suggested labels

🌟enhancement, 🎨UI / UX, ⚙️backend

Suggested reviewers

• sriramveeraghanta
• aaryan610

Poem

I'm a hopping rabbit with a joyful pace,
In code I found a cleaner, brighter place.
With dropdowns split for every date,
And icons shining -- oh, how great!
I nibble carrots, I hop and cheer,
For smoother logic now appears!
🐰✨

✨ Finishing Touches

• 📝 Generate Docstrings (Beta)

---

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit testing code for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and generate unit testing code.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR. (Beta)
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (3)

web/core/components/modules/analytics-sidebar/root.tsx (1)

427-427: Remove console.log statement.

There's an unnecessary console.log statement that should be removed before merging.

-                      console.log(val);

web/core/components/cycles/list/cycle-list-item-action.tsx (2)

300-334: Properly implemented end date input with min date constraint

The end date dropdown correctly applies minimum date validation based on the start date, preventing users from selecting invalid date ranges. The UI is consistent with the start date dropdown and provides appropriate feedback.

Minor inconsistency: The start date uses value ?? null (line 268) while the end date uses getDate(value) ?? null (line 307). This difference in value handling might lead to unexpected behavior.

-              value={getDate(value) ?? null}
+              value={value ?? null}

---

261-337: Potential refactoring opportunity for date inputs

While the implementation is functionally correct, there's some code duplication between the start and end date components that could be refactored into a shared component.

Consider creating a reusable date component that accepts parameters for:

• Field name (start_date/end_date)
• Placeholder text
• Icon component
• Min/max date constraints
• Other specific behavior

This would reduce code duplication and make future modifications easier to maintain.

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between d08bce3 and c720842.

📒 Files selected for processing (5)

• web/core/components/cycles/analytics-sidebar/sidebar-header.tsx (5 hunks)
• web/core/components/cycles/list/cycle-list-item-action.tsx (6 hunks)
• web/core/components/modules/analytics-sidebar/root.tsx (5 hunks)
• web/core/components/modules/module-card-item.tsx (5 hunks)
• web/core/components/modules/module-list-item-action.tsx (2 hunks)

⏰ Context from checks skipped due to timeout of 90000ms (2)

• GitHub Check: Analyze (javascript)
• GitHub Check: Analyze (python)

🔇 Additional comments (17)

web/core/components/modules/module-card-item.tsx (3)

7-7: Added appropriate icons for new date pickers.

The addition of CalendarCheck2 and CalendarClock icons provides clear visual distinction between start and due date pickers, enhancing usability.

---

30-30: Good replacement of DateRangeDropdown with DateDropdown.

Switching from a single range picker to individual date pickers aligns well with the PR objective of improving the date selection UI.

---

239-272: Well-implemented separate date pickers for start and target dates.

The implementation of separate date pickers provides a clearer interface for users to select individual dates. The code includes:

• Proper validation with maxDate and minDate to ensure logical date sequencing
• Consistent styling and behavior between both pickers
• Appropriate icons to distinguish between start and due dates
• Tooltip support for better usability
• Correct handling of disabled states

web/core/components/modules/module-list-item-action.tsx (2)

7-7: Added appropriate icons for date pickers.

The addition of CalendarCheck2 and CalendarClock icons provides clear visual distinction between start and due date inputs.

---

141-172: Well-implemented separate date pickers with appropriate validation.

The replacement of the date range dropdown with two separate date pickers is well executed with:

• Proper date constraints (start date can't exceed target date and vice versa)
• Consistent styling and behavior
• Clear placeholders with proper translation
• Appropriate tooltips for improved usability

This change aligns with the PR objective of enhancing the date selection interface.

web/core/components/cycles/analytics-sidebar/sidebar-header.tsx (4)

7-15: Icons added for improved date picker UI.

The addition of specialized calendar icons helps distinguish between different date types in the UI.

---

66-66: Enhanced form handling with getValues.

Adding getValues to the useForm hook's destructured return improves form capabilities by allowing access to current form values without triggering re-renders.

---

157-183: Improved date change handler.

The refactored handleDateChange function now accepts a single payload object containing optional date properties, which simplifies the API and improves maintainability. The function also now returns the validation result, allowing consumers to react accordingly.

---

291-363: Replaced date range with separate date pickers and enhanced validation.

The implementation of separate date pickers with form controllers is well-executed. Each picker includes appropriate:

• Validation for date range logic
• Consistent styling
• Error handling
• Proper handling of disabled states

This approach aligns with the PR objective and improves the overall user experience.

web/core/components/modules/analytics-sidebar/root.tsx (4)

9-9: Added CalendarCheck2 icon for date dropdown.

The icon addition enhances visual distinction between different date types.

---

108-108: Enhanced form capabilities with getValues.

Adding getValues to the useForm hook improves access to current form values without triggering re-renders.

---

198-205: Simplified date change handler.

The refactored function now accepts a more flexible payload object instead of separate parameters, improving maintainability.

---

412-473: Improved date input UI with separate components.

The replacement of a single date range picker with two separate date inputs is well-implemented with:

• Clear section headers ("Start date" and "Due date")
• Consistent styling and behavior
• Proper validation for date sequencing
• Appropriate icons for visual distinction

This change aligns with the PR objective of improving date selection UI.

web/core/components/cycles/list/cycle-list-item-action.tsx (4)

7-7: Updated imports to align with new date picker approach

The change from a likely DateRangeDropdown to separate DateDropdown components with specialized calendar icons (CalendarCheck2 and CalendarClock) aligns well with the PR objective of replacing the date range picker with individual date controls.

Also applies to: 26-26

---

79-79: Good addition of getValues to useForm hook

Adding getValues is appropriate here as it allows for efficiently accessing form values without relying on the more resource-intensive watch method, which is especially important when dealing with date dependencies.

---

172-198: Improved date handling function with better return value

The refactoring of handleDateChange to accept a single payload object makes the function more flexible and maintainable. Adding a return value to indicate validation success is an important improvement that allows the UI components to respond accordingly.

---

261-296: Enhanced start date input with better validation and UX

The implementation of a dedicated start date dropdown with clear validation rules and proper UI feedback (icons, tooltips, placeholders) improves user experience. The conditional logic to set both dates when only one is selected helps maintain data consistency.

One small observation: If a user selects only a start date, the end date is automatically set to the same value. Please verify this is the intended behavior rather than keeping the end date empty or setting it to a default offset (e.g., start date + 1 week).