close dropdown when model opens (#12060)

fixes #11900

changes desc:
1.moved confirmation model adjacent to dropdown component instead inside
it.
2.passing variables of useRecordGroupReorderConfirmationModal from
dropdown root component so confirmations model should remount get
updated with new state

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

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<ObjectOptionsContentId>();
 
   const { isDropdownOpen } = useDropdown(OBJECT_OPTIONS_DROPDOWN_ID);
-
+  const {
+    handleRecordGroupOrderChangeWithModal,
+    handleRecordGroupReorderConfirmClick,
+  } = useRecordGroupReorderConfirmationModal({
+    recordIndexId,
+    viewType,
+  });
   return (
-    <Dropdown
+    <>
-      dropdownId={OBJECT_OPTIONS_DROPDOWN_ID}
+      <Dropdown
-      dropdownHotkeyScope={{ scope: TableOptionsHotkeyScope.Dropdown }}
+        dropdownId={OBJECT_OPTIONS_DROPDOWN_ID}
-      dropdownOffset={{ y: DROPDOWN_OFFSET_Y }}
+        dropdownHotkeyScope={{ scope: TableOptionsHotkeyScope.Dropdown }}
-      clickableComponent={
+        dropdownOffset={{ y: DROPDOWN_OFFSET_Y }}
-        <StyledHeaderDropdownButton isUnfolded={isDropdownOpen}>
+        clickableComponent={
-          <Trans>Options</Trans>
+          <StyledHeaderDropdownButton isUnfolded={isDropdownOpen}>
-        </StyledHeaderDropdownButton>
+            <Trans>Options</Trans>
-      }
+          </StyledHeaderDropdownButton>
-      onClose={handleResetContent}
+        }
-      dropdownComponents={
+        onClose={handleResetContent}
-        <ObjectOptionsDropdownContext.Provider
+        dropdownComponents={
-          value={{
+          <ObjectOptionsDropdownContext.Provider
-            viewType,
+            value={{
-            objectMetadataItem,
+              viewType,
-            recordIndexId,
+              objectMetadataItem,
-            currentContentId,
+              recordIndexId,
-            onContentChange: handleContentChange,
+              currentContentId,
-            resetContent: handleResetContent,
+              onContentChange: handleContentChange,
-            dropdownId: OBJECT_OPTIONS_DROPDOWN_ID,
+              resetContent: handleResetContent,
-          }}
+              dropdownId: OBJECT_OPTIONS_DROPDOWN_ID,
-        >
+              handleRecordGroupOrderChangeWithModal,
-          <ObjectOptionsDropdownContent />
+            }}
-        </ObjectOptionsDropdownContext.Provider>
+          >
-      }
+            <ObjectOptionsDropdownContent />
-    />
+          </ObjectOptionsDropdownContext.Provider>
+        }
+      />
+      <RecordGroupReorderConfirmationModal
+        onConfirmClick={handleRecordGroupReorderConfirmClick}
+      />
+    </>
   );
 };

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 = () => {
           </DropdownMenuItemsContainer>
         </>
       )}
-      <RecordGroupReorderConfirmationModal
-        onConfirmClick={handleRecordGroupReorderConfirmClick}
-      />
     </>
   );
 };

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 =

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]);