diff --git a/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdown.tsx b/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdown.tsx index 2f18306bb..8bc64e672 100644 --- a/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdown.tsx +++ b/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdown.tsx @@ -5,6 +5,8 @@ import { ObjectOptionsDropdownContent } from '@/object-record/object-options-dro import { OBJECT_OPTIONS_DROPDOWN_ID } from '@/object-record/object-options-dropdown/constants/ObjectOptionsDropdownId'; import { ObjectOptionsDropdownContext } from '@/object-record/object-options-dropdown/states/contexts/ObjectOptionsDropdownContext'; import { ObjectOptionsContentId } from '@/object-record/object-options-dropdown/types/ObjectOptionsContentId'; +import { RecordGroupReorderConfirmationModal } from '@/object-record/record-group/components/RecordGroupReorderConfirmationModal'; +import { useRecordGroupReorderConfirmationModal } from '@/object-record/record-group/hooks/useRecordGroupReorderConfirmationModal'; import { TableOptionsHotkeyScope } from '@/object-record/record-table/types/TableOptionsHotkeyScope'; import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown'; import { StyledHeaderDropdownButton } from '@/ui/layout/dropdown/components/StyledHeaderDropdownButton'; @@ -27,33 +29,45 @@ export const ObjectOptionsDropdown = ({ useCurrentContentId(); const { isDropdownOpen } = useDropdown(OBJECT_OPTIONS_DROPDOWN_ID); - + const { + handleRecordGroupOrderChangeWithModal, + handleRecordGroupReorderConfirmClick, + } = useRecordGroupReorderConfirmationModal({ + recordIndexId, + viewType, + }); return ( - - Options - - } - onClose={handleResetContent} - dropdownComponents={ - - - - } - /> + <> + + Options + + } + onClose={handleResetContent} + dropdownComponents={ + + + + } + /> + + ); }; diff --git a/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownRecordGroupsContent.tsx b/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownRecordGroupsContent.tsx index 88f5cb233..72f95264a 100644 --- a/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownRecordGroupsContent.tsx +++ b/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownRecordGroupsContent.tsx @@ -2,9 +2,7 @@ import { useEffect } from 'react'; import { OBJECT_OPTIONS_DROPDOWN_ID } from '@/object-record/object-options-dropdown/constants/ObjectOptionsDropdownId'; import { useOptionsDropdown } from '@/object-record/object-options-dropdown/hooks/useOptionsDropdown'; -import { RecordGroupReorderConfirmationModal } from '@/object-record/record-group/components/RecordGroupReorderConfirmationModal'; import { RecordGroupsVisibilityDropdownSection } from '@/object-record/record-group/components/RecordGroupsVisibilityDropdownSection'; -import { useRecordGroupReorderConfirmationModal } from '@/object-record/record-group/hooks/useRecordGroupReorderConfirmationModal'; import { useRecordGroupVisibility } from '@/object-record/record-group/hooks/useRecordGroupVisibility'; import { recordGroupFieldMetadataComponentState } from '@/object-record/record-group/states/recordGroupFieldMetadataComponentState'; import { hiddenRecordGroupIdsComponentSelector } from '@/object-record/record-group/states/selectors/hiddenRecordGroupIdsComponentSelector'; @@ -41,9 +39,9 @@ export const ObjectOptionsDropdownRecordGroupsContent = () => { const { viewType, currentContentId, - recordIndexId, onContentChange, resetContent, + handleRecordGroupOrderChangeWithModal, } = useOptionsDropdown(); const { currentView } = useGetCurrentViewOnly(); @@ -76,15 +74,6 @@ export const ObjectOptionsDropdownRecordGroupsContent = () => { } = useRecordGroupVisibility({ viewType, }); - - const { - handleRecordGroupOrderChangeWithModal, - handleRecordGroupReorderConfirmClick, - } = useRecordGroupReorderConfirmationModal({ - recordIndexId, - viewType, - }); - useEffect(() => { if ( currentContentId === 'hiddenRecordGroups' && @@ -203,9 +192,6 @@ export const ObjectOptionsDropdownRecordGroupsContent = () => { )} - ); }; diff --git a/packages/twenty-front/src/modules/object-record/object-options-dropdown/states/contexts/ObjectOptionsDropdownContext.ts b/packages/twenty-front/src/modules/object-record/object-options-dropdown/states/contexts/ObjectOptionsDropdownContext.ts index fcfc16eee..1cd2e1911 100644 --- a/packages/twenty-front/src/modules/object-record/object-options-dropdown/states/contexts/ObjectOptionsDropdownContext.ts +++ b/packages/twenty-front/src/modules/object-record/object-options-dropdown/states/contexts/ObjectOptionsDropdownContext.ts @@ -1,6 +1,7 @@ import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem'; import { ObjectOptionsContentId } from '@/object-record/object-options-dropdown/types/ObjectOptionsContentId'; import { ViewType } from '@/views/types/ViewType'; +import { OnDragEndResponder } from '@hello-pangea/dnd'; import { createContext } from 'react'; export type ObjectOptionsDropdownContextValue = { @@ -11,6 +12,7 @@ export type ObjectOptionsDropdownContextValue = { onContentChange: (key: ObjectOptionsContentId) => void; resetContent: () => void; dropdownId: string; + handleRecordGroupOrderChangeWithModal?: OnDragEndResponder; }; export const ObjectOptionsDropdownContext = diff --git a/packages/twenty-front/src/modules/object-record/record-group/hooks/useRecordGroupReorderConfirmationModal.ts b/packages/twenty-front/src/modules/object-record/record-group/hooks/useRecordGroupReorderConfirmationModal.ts index b9802be7e..47d5a5614 100644 --- a/packages/twenty-front/src/modules/object-record/record-group/hooks/useRecordGroupReorderConfirmationModal.ts +++ b/packages/twenty-front/src/modules/object-record/record-group/hooks/useRecordGroupReorderConfirmationModal.ts @@ -3,6 +3,7 @@ import { useReorderRecordGroups } from '@/object-record/record-group/hooks/useRe import { RecordGroupSort } from '@/object-record/record-group/types/RecordGroupSort'; import { recordIndexRecordGroupSortComponentState } from '@/object-record/record-index/states/recordIndexRecordGroupSortComponentState'; import { recordIndexRecordGroupIsDraggableSortComponentSelector } from '@/object-record/record-index/states/selectors/recordIndexRecordGroupIsDraggableSortComponentSelector'; +import { useCloseAnyOpenDropdown } from '@/ui/layout/dropdown/hooks/useCloseAnyOpenDropdown'; import { useGoBackToPreviousDropdownFocusId } from '@/ui/layout/dropdown/hooks/useGoBackToPreviousDropdownFocusId'; import { useSetActiveDropdownFocusIdAndMemorizePrevious } from '@/ui/layout/dropdown/hooks/useSetFocusedDropdownIdAndMemorizePrevious'; import { useModal } from '@/ui/layout/modal/hooks/useModal'; @@ -53,9 +54,11 @@ export const useRecordGroupReorderConfirmationModal = ({ const setRecordGroupSort = useSetRecoilComponentStateV2( recordIndexRecordGroupSortComponentState, ); + const { closeAnyOpenDropdown } = useCloseAnyOpenDropdown(); const handleDragEndWithModal: OnDragEndResponder = (result, provided) => { if (!isDragableSortRecordGroup) { + closeAnyOpenDropdown(); openModal(RECORD_GROUP_REORDER_CONFIRMATION_MODAL_ID); setActiveDropdownFocusIdAndMemorizePrevious(null); setPendingDragEndHandlerParams([result, provided]);