fix: reset table selection when navigating away from index page

[samyakpiya]

Fixes #9132

Purpose

Currently, when navigating away from an index page and returning, previously checked selections remain checked. This fix ensures the selection context is properly reset on navigation.

Changes

• Add RecordIndexResetSelectionEffect component to handle selection cleanup
• Integrate effect into RecordIndexPage
• Uses existing useResetTableRowSelection hook to clear selections

Testing

1. Go to any index page (e.g., Companies)
2. Select some records using checkboxes
3. Navigate to a detail page
4. Return to the index page
5. Verify that no records are selected

Demo

I've recorded a short video demonstrating how this PR fixes the issue:

Loom Video Link

Before fix: Selections persist after navigation
After fix: Selections are properly reset

[greptile-apps]

PR Summary

Adds a new cleanup effect component to reset table row selections when navigating away from index pages, fixing the issue of persisting selections between page navigations.

• Added new packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexResetSelectionEffect.tsx to handle selection cleanup on unmount
• Integrated RecordIndexResetSelectionEffect into RecordIndexPage.tsx within the component hierarchy
• Uses useResetTableRowSelection hook to clear row selections and close action menu dropdown
• Leverages React's useEffect cleanup function for proper selection state management

_{💡 (1/5) You can manually trigger the bot by mentioning @greptileai in a comment!}

_{2 file(s) reviewed, no comment(s)
Edit PR Review Bot Settings | Greptile}

[github-actions]

Welcome!

Hello there, congrats on your first PR! We're excited to have you contributing to this project.
By submitting your Pull Request, you acknowledge that you agree with the terms of our Contributor License Agreement.

Generated by 🚫 dangerJS against 6caabf4

[charlesBochet]

LGTM, thank you :)

[charlesBochet]

@samyakpiya I have approved first but we actually would like to test a different pattern. We are trying to get rid of the useEffects completely on the codebase

The right way to do that is to let the caller synchronously reset the table selection. But how could the link in RecordDetailSectionHeader know that it should reset the table selection: let's introduce a component that will include a <Link to={...} onClick{resetTableSelection} />

[charlesBochet]

see comment above

[samyakpiya]

@charlesBochet Thanks for the feedback! I understand we want to move away from useEffect and handle the selection reset synchronously through the Link component's onClick. I'll update the PR to implement this pattern instead.

[samyakpiya]

@charlesBochet I've considered the pattern you suggested but have some technical concerns to discuss.

The current suggestion to handle reset via <Link onClick={resetTableSelection}> would only cover the show page → index page navigation path. However, shouldn't the table selection reset whenever we leave the index page, regardless of destination? For instance:

1. Workspace switches
2. Direct URL changes (browser back/forward)
3. Navigation to any other route
4. External links

Additionally, implementing this through Links would require lifting state management up the component tree to make the reset function available to both index and show pages.

Would it make more sense to handle this at the routing/navigation level instead? This would ensure consistent behavior regardless of how the user leaves the index page. I'm happy to explore alternative patterns that don't use useEffect while still covering all these edge cases.