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