[WEB-2915] fix: Modules reordering through drag and drop

[rahulramesha]

Description

This PR makes change to use getBlockById from the module timeline store instead of the props being passed down to fix the re ordering of modules in timeline chart

Type of Change

• Bug fix (non-breaking change which fixes an issue)
• Feature (non-breaking change which adds functionality)
• Improvement (change that would cause existing functionality to not work as expected)
• Code refactoring
• Performance improvements
• Documentation update

Summary by CodeRabbit

• New Features

  • Enhanced Gantt chart sidebar with improved state management
  • Integrated new timeline chart hook for more dynamic data retrieval

• Refactor

  • Updated component to use MobX observer for reactive state updates
  • Simplified component props and data fetching mechanism

[coderabbitai]

Walkthrough

The pull request modifies the ModuleGanttSidebar component in the Gantt chart sidebar module. The primary changes involve wrapping the component with the observer function from MobX, removing the getBlockById prop, and introducing the useTimeLineChart hook to retrieve block data. This shift represents a move towards a more reactive programming model using MobX, simplifying the component's prop management and state retrieval mechanism.

Changes

File	Change Summary
web/core/components/gantt-chart/sidebar/modules/sidebar.tsx	- Wrapped component with observer from mobx-react - Removed getBlockById prop - Added useTimeLineChart hook with ETimeLineTypeType.MODULE - Simplified import statements

Possibly related PRs

• [WEB-2803] fix: Timeline chart half block dragging #6135: Modifications to useGanttResizable hook related to Gantt chart functionality
• chore: Remove shouldIgnoreDependencies flags while dragging in timeline view #6150: Refining logic for block dragging in Gantt chart
• [WEB-2316] chore: fix animation performance on kanban group virtualization #5666: Animation performance changes in Kanban layout
• [WEB-2774]fix:reordering favorites and favorite folders #6119: Changes to component props in FavoriteFolder
• [WEB-2878]fix: draft creation #6230: Issue creation process modifications
• [WEB-2889] fix: global views sorting when hyper model is enabled. #6280: Sorting functionality in global views
• [WEB-3033] fix: active cycle graph tooltip and endpoint validation #6306: Improvements to useCyclesDetails function

Suggested labels

🌐frontend

Suggested reviewers

• sriramveeraghanta
• SatishGandham

Poem

🐰 In the realm of Gantt's design,
MobX dances, state aligns
Hooks replace the old refrain
Sidebar's logic now more plain
Reactive magic, code divine! 🚀

---

📜 Recent review details

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

📥 Commits

Reviewing files that changed from the base of the PR and between a6216be and 1a910ac.

📒 Files selected for processing (1)

• web/core/components/gantt-chart/sidebar/modules/sidebar.tsx (3 hunks)

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

• GitHub Check: lint-web
• GitHub Check: Analyze (javascript)

🔇 Additional comments (4)

web/core/components/gantt-chart/sidebar/modules/sidebar.tsx (4)

3-3: MobX observer import looks appropriate.
No issues spotted with importing observer from mobx-react; it's consistent with the move to a more reactive data flow.

---

7-10: Good import structure for IBlockUpdateData and useTimeLineChart.
Neatly organized imports and relevant type usage. Appears consistent with the new approach of retrieving data via the useTimeLineChart hook.

---

61-61: Closing bracket.
No issues found here; the component structure is properly closed.

---

24-27: Observer wrapper and hook usage aligned with the new reactive approach.
Wrapping the component with observer ensures it will correctly respond to observable state changes. Using getBlockById from useTimeLineChart is a clean way to retrieve block data.

Please confirm that all references to getBlockById from other parts of the component or codebase have been updated accordingly to avoid stale references. You can run the following script to locate all calls:

✅ Verification successful

All usages of getBlockById are properly reactive and consistent

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Verify that all usage of getBlockById is updated across the codebase.
rg -A 3 "getBlockById"

Length of output: 6855

---

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.