fix: RightDrawer doesn't save context values when clickedOutside

[harshit078]

Description

• This PR fixes RightDrawer doesn't save context values when clickedOutside #7728

Changes

Screen.Recording.2024-10-16.at.3.08.48.AM.mov

[greptile-apps]

PR Summary

This PR addresses an issue where the RightDrawer component wasn't saving context values when clicked outside, by implementing a debounced close function.

• Introduced debounced closeRightDrawer function in packages/twenty-front/src/modules/ui/layout/right-drawer/components/RightDrawer.tsx to prevent immediate closure
• Modified click outside listener callback to use the debounced close function
• Imported debounce function from lodash to create the delayed closure mechanism
• Adjusted RightDrawer component to maintain state of inputs when clicking outside
• Resolved issue RightDrawer doesn't save context values when clickedOutside #7728 where cell container was clipping through the body on outside clicks

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

[greptile-apps]

style: Consider using a more specific import to reduce bundle size

[greptile-apps]

logic: Update dependency array to include closeRightDrawer

[bosiraphael]

Hello @harshit078, thank you for contributing :) Even if your solution works, I'm not sure that it is the right approach.
The bug happens because closeRightDrawer is a recoilCallback and is thus executed outside of the flow of react. I asked @lucasbordeau why it was that way and apparently it was needed for the email threads. I think the right solution is to rename closeRightDrawer to closeRightDrawerRecoilCallback inside useRightDrawer and to export closeRightDrawer like this:

const setIsRightDrawerOpen = useSetRecoilState(isRightDrawerOpenState);
const setIsRightDrawerMinimized = useSetRecoilState(
    isRightDrawerMinimizedState,
  );
 const closeRightDrawer = () => {
    setIsRightDrawerOpen(false);
    setIsRightDrawerMinimized(false);
  };

I'll let @charlesBochet and @lucasbordeau confirm though.

[charlesBochet]

/award 200

[oss-gg]

Awarding harshit078: 200 points 🕹️ Well done! Check out your new contribution on oss.gg/harshit078

[lucasbordeau]

@harshit078 We want to avoid debouncing as it is non deterministic.

Could you try with useListenRightDrawerClose ? Maybe in the drawer title component ?

[lucasbordeau]

@harshit078 When we need to debounce, it's generally a code smell because it means the underlying logic is too complex, we'll work on that to refactor this part, so the logic to persist a field can be deterministically and easily called before closing the right drawer.

[lucasbordeau]

Follow-up issues : #8361 and #8360

[github-actions]

Thanks @harshit078 for your contribution!
This marks your 36th PR on the repo. You're top 1% of all our contributors 🎉
See contributor page - Share on LinkedIn - Share on Twitter

[sentry-io]

Sentry Issue: TWENTY-FRONT-2TZ