From 18d04de67670a70f635bb0ab046e0e011c40f171 Mon Sep 17 00:00:00 2001 From: Harshit Singh <73997189+harshit078@users.noreply.github.com> Date: Wed, 6 Nov 2024 16:16:30 +0530 Subject: [PATCH] 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 Co-authored-by: Lucas Bordeau --- .../RightDrawerTitleRecordInlineCell.tsx | 34 +++++++++++++++++++ .../record-show/components/SummaryCard.tsx | 8 ++++- .../right-drawer/components/RightDrawer.tsx | 21 ++++++------ 3 files changed, 51 insertions(+), 12 deletions(-) create mode 100644 packages/twenty-front/src/modules/object-record/record-right-drawer/components/RightDrawerTitleRecordInlineCell.tsx diff --git a/packages/twenty-front/src/modules/object-record/record-right-drawer/components/RightDrawerTitleRecordInlineCell.tsx b/packages/twenty-front/src/modules/object-record/record-right-drawer/components/RightDrawerTitleRecordInlineCell.tsx new file mode 100644 index 000000000000..e349c4d52a4d --- /dev/null +++ b/packages/twenty-front/src/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( + `${recordId}-${fieldDefinition.metadata.fieldName}`, + ); + + const draftValue = useRecoilValue(getDraftValueSelector()); + + useListenRightDrawerClose(() => { + persistField(draftValue); + closeInlineCell(); + }); + + return ; +}; 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 index 05b76a1e939c..493854b129c8 100644 --- 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, }} > - + {isInRightDrawer ? ( + + ) : ( + + )} } 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 index 01d36bac0de6..7823f8a7c07e 100644 --- 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],