fix: RightDrawer doesn't save context values when clickedOutside (#7729)

## Description - This PR fixes #7728 ## Changes https://github.com/user-attachments/assets/1e66cab3-9009-4c01-9ac6-22651b0ff5e7 --------- Co-authored-by: bosiraphael <[email protected]> Co-authored-by: Lucas Bordeau <[email protected]>
twentyhq · Nov 6, 2024 · 18d04de · 18d04de
1 parent 7f51eb8
commit 18d04de
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 12 deletions.
diff --git a/...modules/object-record/record-right-drawer/components/RightDrawerTitleRecordInlineCell.tsx b/...modules/object-record/record-right-drawer/components/RightDrawerTitleRecordInlineCell.tsx
@@ -0,0 +1,34 @@
+import { FieldContext } from '@/object-record/record-field/contexts/FieldContext';
+import { usePersistField } from '@/object-record/record-field/hooks/usePersistField';
+import { useRecordFieldInput } from '@/object-record/record-field/hooks/useRecordFieldInput';
+import { RecordInlineCell } from '@/object-record/record-inline-cell/components/RecordInlineCell';
+import { useInlineCell } from '@/object-record/record-inline-cell/hooks/useInlineCell';
+import { useListenRightDrawerClose } from '@/ui/layout/right-drawer/hooks/useListenRightDrawerClose';
+import { useContext } from 'react';
+import { useRecoilValue } from 'recoil';
+
+// TODO: this should be better implemented if we refactor field input so that it's easier to implement logic like that
+// Idea : maybe we could use draftValue instead of the newValue in the events
+// Idea : we can remove all our listeners in the many input types and replace them with a onClose event that gives the event type
+//   (tab, shift-tab, click-outside, escape, enter) and the newValue, that will reduce the boilerplate
+//   and also the need to have our difficult to understand persist logic
+//   the goal would be that we could easily call usePersistField anywhere under a FieldContext and it would work
+export const RightDrawerTitleRecordInlineCell = () => {
+  const { closeInlineCell } = useInlineCell();
+  const persistField = usePersistField();
+
+  const { recordId, fieldDefinition } = useContext(FieldContext);
+
+  const { getDraftValueSelector } = useRecordFieldInput<unknown>(
+    `${recordId}-${fieldDefinition.metadata.fieldName}`,
+  );
+
+  const draftValue = useRecoilValue(getDraftValueSelector());
+
+  useListenRightDrawerClose(() => {
+    persistField(draftValue);
+    closeInlineCell();
+  });
+
+  return <RecordInlineCell />;
+};
diff --git a/packages/twenty-front/src/modules/object-record/record-show/components/SummaryCard.tsx b/packages/twenty-front/src/modules/object-record/record-show/components/SummaryCard.tsx
@@ -3,6 +3,7 @@ import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSi
 import { FieldContext } from '@/object-record/record-field/contexts/FieldContext';
 import { RecordInlineCell } from '@/object-record/record-inline-cell/components/RecordInlineCell';
 import { InlineCellHotkeyScope } from '@/object-record/record-inline-cell/types/InlineCellHotkeyScope';
+import { RightDrawerTitleRecordInlineCell } from '@/object-record/record-right-drawer/components/RightDrawerTitleRecordInlineCell';
 import { useRecordShowContainerActions } from '@/object-record/record-show/hooks/useRecordShowContainerActions';
 import { useRecordShowContainerData } from '@/object-record/record-show/hooks/useRecordShowContainerData';
 import { ShowPageSummaryCard } from '@/ui/layout/show-page/components/ShowPageSummaryCard';
@@ -18,6 +19,7 @@ type SummaryCardProps = {
   isInRightDrawer: boolean;
 };
 
+// TODO: refactor all this hierarchy of right drawer / show page record to avoid drill down
 export const SummaryCard = ({
   objectNameSingular,
   objectRecordId,
@@ -86,7 +88,11 @@ export const SummaryCard = ({
             isCentered: !isMobile,
           }}
         >
-          <RecordInlineCell readonly={isReadOnly} />
+          {isInRightDrawer ? (
+            <RightDrawerTitleRecordInlineCell />
+          ) : (
+            <RecordInlineCell readonly={isReadOnly} />
+          )}
         </FieldContext.Provider>
       }
       avatarType={recordIdentifier?.avatarType ?? 'rounded'}

diff --git a/packages/twenty-front/src/modules/ui/layout/right-drawer/components/RightDrawer.tsx b/packages/twenty-front/src/modules/ui/layout/right-drawer/components/RightDrawer.tsx
@@ -1,3 +1,11 @@
+import { RIGHT_DRAWER_CLICK_OUTSIDE_LISTENER_ID } from '@/ui/layout/right-drawer/constants/RightDrawerClickOutsideListener';
+import { isRightDrawerAnimationCompletedState } from '@/ui/layout/right-drawer/states/isRightDrawerAnimationCompletedState';
+import { isRightDrawerMinimizedState } from '@/ui/layout/right-drawer/states/isRightDrawerMinimizedState';
+import { rightDrawerCloseEventState } from '@/ui/layout/right-drawer/states/rightDrawerCloseEventsState';
+import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
+import { useClickOutsideListener } from '@/ui/utilities/pointer-event/hooks/useClickOutsideListener';
+import { ClickOutsideMode } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
+import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { motion } from 'framer-motion';
@@ -9,15 +17,6 @@ import {
   useSetRecoilState,
 } from 'recoil';
 import { Key } from 'ts-key-enum';
-
-import { RIGHT_DRAWER_CLICK_OUTSIDE_LISTENER_ID } from '@/ui/layout/right-drawer/constants/RightDrawerClickOutsideListener';
-import { isRightDrawerAnimationCompletedState } from '@/ui/layout/right-drawer/states/isRightDrawerAnimationCompletedState';
-import { isRightDrawerMinimizedState } from '@/ui/layout/right-drawer/states/isRightDrawerMinimizedState';
-import { rightDrawerCloseEventState } from '@/ui/layout/right-drawer/states/rightDrawerCloseEventsState';
-import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
-import { useClickOutsideListener } from '@/ui/utilities/pointer-event/hooks/useClickOutsideListener';
-import { ClickOutsideMode } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
-import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 import { isDefined } from '~/utils/isDefined';
 
 import { useRightDrawer } from '../hooks/useRightDrawer';
@@ -129,9 +128,9 @@ export const RightDrawer = () => {
 
           if (isRightDrawerOpen && !isRightDrawerMinimized) {
             set(rightDrawerCloseEventState, event);
-            closeRightDrawer();
-
             emitRightDrawerCloseEvent();
+
+            closeRightDrawer();
           }
         },
       [closeRightDrawer],