Refactor useDropdown states to component state V2 (#12911)

This PR is a follow-up of the first refactor of dropdown hooks :
https://github.com/twentyhq/twenty/pull/12875

In this PR we continue by focusing on the replacement of those two
states that are still using the v1 of component states :

- isDropdownOpenComponentState
- dropdownPlacementComponentState

When then remove those two old states and now only use the new component
state v2.

## QA


Component | Status | Comments
-- | -- | --
RecordDetailRelationSectionDropdownToMany | Ok |  
RecordDetailRelationSectionDropdownToOne | Ok |  
WorkflowVariablesDropdown | Ok |  
DropdownInternalContainer | Ok | Tested on tables and boards fields

packages/twenty-front/src/modules/action-menu/components/__stories__/RecordIndexActionMenuDropdown.stories.tsx

@@ -8,7 +8,8 @@ import { ActionMenuContext } from '@/action-menu/contexts/ActionMenuContext';
 import { createMockActionMenuActions } from '@/action-menu/mock/action-menu-actions.mock';
 import { ActionMenuComponentInstanceContext } from '@/action-menu/states/contexts/ActionMenuComponentInstanceContext';
 import { recordIndexActionMenuDropdownPositionComponentState } from '@/action-menu/states/recordIndexActionMenuDropdownPositionComponentState';
-import { isDropdownOpenComponentState } from '@/ui/layout/dropdown/states/isDropdownOpenComponentState';
+
+import { isDropdownOpenComponentStateV2 } from '@/ui/layout/dropdown/states/isDropdownOpenComponentStateV2';
 import { extractComponentState } from '@/ui/utilities/state/component-state/utils/extractComponentState';
 import {
   RouterDecorator,
@@ -38,10 +39,9 @@ const meta: Meta<typeof RecordIndexActionMenuDropdown> = {
           );
 
           set(
-            extractComponentState(
+            isDropdownOpenComponentStateV2.atomFamily({
-              isDropdownOpenComponentState,
+              instanceId: 'action-menu-dropdown-story-action-menu',
-              'action-menu-dropdown-story-action-menu',
+            }),
-            ),
             true,
           );
         }}

packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationSectionDropdownToMany.tsx

@@ -18,6 +18,8 @@ import { ObjectRecord } from '@/object-record/types/ObjectRecord';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope';
+import { dropdownPlacementComponentStateV2 } from '@/ui/layout/dropdown/states/dropdownPlacementComponentStateV2';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
 import { IconPlus } from 'twenty-ui/display';
 import { LightIconButton } from 'twenty-ui/input';
@@ -50,7 +52,12 @@ export const RecordDetailRelationSectionDropdownToMany = () => {
     recordId,
   });
 
-  const { closeDropdown, dropdownPlacement } = useDropdown(dropdownId);
+  const { closeDropdown } = useDropdown(dropdownId);
+
+  const dropdownPlacement = useRecoilComponentValueV2(
+    dropdownPlacementComponentStateV2,
+    dropdownId,
+  );
 
   const setMultipleRecordPickerSearchFilter = useSetRecoilComponentStateV2(
     multipleRecordPickerSearchFilterComponentState,

packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationSectionDropdownToOne.tsx

@@ -18,6 +18,8 @@ import { ObjectRecord } from '@/object-record/types/ObjectRecord';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope';
+import { dropdownPlacementComponentStateV2 } from '@/ui/layout/dropdown/states/dropdownPlacementComponentStateV2';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
 import { IconForbid, IconPencil } from 'twenty-ui/display';
 import { LightIconButton } from 'twenty-ui/input';
@@ -52,7 +54,12 @@ export const RecordDetailRelationSectionDropdownToOne = () => {
     recordId,
   });
 
-  const { closeDropdown, dropdownPlacement } = useDropdown(dropdownId);
+  const { closeDropdown } = useDropdown(dropdownId);
+
+  const dropdownPlacement = useRecoilComponentValueV2(
+    dropdownPlacementComponentStateV2,
+    dropdownId,
+  );
 
   const setSingleRecordPickerSearchFilter = useSetRecoilComponentStateV2(
     singleRecordPickerSearchFilterComponentState,

packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useResetTableRowSelection.ts

@@ -6,11 +6,10 @@ import { recordIndexAllRecordIdsComponentSelector } from '@/object-record/record
 import { hasUserSelectedAllRowsComponentState } from '@/object-record/record-table/record-table-row/states/hasUserSelectedAllRowsFamilyState';
 import { isRowSelectedComponentFamilyState } from '@/object-record/record-table/record-table-row/states/isRowSelectedComponentFamilyState';
 import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext';
-import { isDropdownOpenComponentState } from '@/ui/layout/dropdown/states/isDropdownOpenComponentState';
+import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
 import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
 import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
 import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
-import { extractComponentState } from '@/ui/utilities/state/component-state/utils/extractComponentState';
 import { lastSelectedRowIndexComponentState } from '../../record-table-row/states/lastSelectedRowIndexComponentState';
 
 export const useResetTableRowSelection = (recordTableId?: string) => {
@@ -34,19 +33,14 @@ export const useResetTableRowSelection = (recordTableId?: string) => {
     recordTableIdFromContext,
   );
 
-  const isActionMenuDropdownOpenState = extractComponentState(
-    isDropdownOpenComponentState,
-    getActionMenuDropdownIdFromActionMenuId(
-      getActionMenuIdFromRecordIndexId(recordTableIdFromContext),
-    ),
-  );
-
   const lastSelectedRowIndexComponentCallbackState =
     useRecoilComponentCallbackStateV2(
       lastSelectedRowIndexComponentState,
       recordTableIdFromContext,
     );
 
+  const { closeDropdown } = useCloseDropdown();
+
   return useRecoilCallback(
     ({ set, snapshot }) =>
       () => {
@@ -61,15 +55,21 @@ export const useResetTableRowSelection = (recordTableId?: string) => {
 
         set(hasUserSelectedAllRowsState, false);
 
-        set(isActionMenuDropdownOpenState, false);
         set(lastSelectedRowIndexComponentCallbackState, null);
+
+        closeDropdown(
+          getActionMenuDropdownIdFromActionMenuId(
+            getActionMenuIdFromRecordIndexId(recordTableIdFromContext),
+          ),
+        );
       },
     [
       recordIndexAllRecordIdsSelector,
       hasUserSelectedAllRowsState,
-      isActionMenuDropdownOpenState,
       lastSelectedRowIndexComponentCallbackState,
       isRowSelectedFamilyState,
+      closeDropdown,
+      recordTableIdFromContext,
     ],
   );
 };

packages/twenty-front/src/modules/ui/layout/dropdown/components/internal/DropdownInternalContainer.tsx

@@ -2,6 +2,7 @@ import { RootStackingContextZIndices } from '@/ui/layout/constants/RootStackingC
 import { DropdownHotkeyScope } from '@/ui/layout/dropdown/constants/DropdownHotkeyScope';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 import { activeDropdownFocusIdState } from '@/ui/layout/dropdown/states/activeDropdownFocusIdState';
+import { dropdownPlacementComponentStateV2 } from '@/ui/layout/dropdown/states/dropdownPlacementComponentStateV2';
 import { dropdownMaxHeightComponentState } from '@/ui/layout/dropdown/states/internal/dropdownMaxHeightComponentState';
 import { dropdownMaxWidthComponentState } from '@/ui/layout/dropdown/states/internal/dropdownMaxWidthComponentState';
 import { OverlayContainer } from '@/ui/layout/overlay/components/OverlayContainer';
@@ -10,6 +11,7 @@ import { useHotkeysOnFocusedElement } from '@/ui/utilities/hotkey/hooks/useHotke
 import { ClickOutsideListenerContext } from '@/ui/utilities/pointer-event/contexts/ClickOutsideListenerContext';
 import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
+import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
 import styled from '@emotion/styled';
 import {
   FloatingPortal,
@@ -67,8 +69,7 @@ export const DropdownInternalContainer = ({
   excludedClickOutsideIds,
   isDropdownInModal = false,
 }: DropdownInternalContainerProps) => {
-  const { isDropdownOpen, closeDropdown, setDropdownPlacement } =
+  const { isDropdownOpen, closeDropdown } = useDropdown(dropdownId);
-    useDropdown(dropdownId);
 
   const activeDropdownFocusId = useRecoilValue(activeDropdownFocusIdState);
 
@@ -82,6 +83,12 @@ export const DropdownInternalContainer = ({
     dropdownId,
   );
 
+  const setDropdownPlacement = useSetRecoilComponentStateV2(
+    dropdownPlacementComponentStateV2,
+    dropdownId,
+  );
+
+  // TODO: remove this useEffect
   useEffect(() => {
     setDropdownPlacement(dropdownPlacement);
   }, [dropdownPlacement, setDropdownPlacement]);

packages/twenty-front/src/modules/ui/layout/dropdown/hooks/internal/useDropdownStates.ts

@@ -1,8 +1,5 @@
 import { DropdownScopeInternalContext } from '@/ui/layout/dropdown/scopes/scope-internal-context/DropdownScopeInternalContext';
-import { dropdownPlacementComponentState } from '@/ui/layout/dropdown/states/dropdownPlacementComponentState';
-import { isDropdownOpenComponentState } from '@/ui/layout/dropdown/states/isDropdownOpenComponentState';
 import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId';
-import { extractComponentState } from '@/ui/utilities/state/component-state/utils/extractComponentState';
 
 type UseDropdownStatesProps = {
   dropdownScopeId?: string;
@@ -18,13 +15,5 @@ export const useDropdownStates = ({
 
   return {
     scopeId,
-    dropdownPlacementState: extractComponentState(
-      dropdownPlacementComponentState,
-      scopeId,
-    ),
-    isDropdownOpenState: extractComponentState(
-      isDropdownOpenComponentState,
-      scopeId,
-    ),
   };
 };

packages/twenty-front/src/modules/ui/layout/dropdown/hooks/useCloseDropdown.ts

@@ -1,6 +1,6 @@
 import { DropdownComponentInstanceContext } from '@/ui/layout/dropdown/contexts/DropdownComponentInstanceContext';
 import { useGoBackToPreviousDropdownFocusId } from '@/ui/layout/dropdown/hooks/useGoBackToPreviousDropdownFocusId';
-import { isDropdownOpenComponentState } from '@/ui/layout/dropdown/states/isDropdownOpenComponentState';
+
 import { isDropdownOpenComponentStateV2 } from '@/ui/layout/dropdown/states/isDropdownOpenComponentStateV2';
 import { useRemoveFocusItemFromFocusStackById } from '@/ui/utilities/focus/hooks/useRemoveFocusItemFromFocusStackById';
 import { useAvailableComponentInstanceId } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceId';
@@ -36,15 +36,7 @@ export const useCloseDropdown = () => {
           )
           .getValue();
 
-        const isDropdownOpenLegacy = snapshot
+        if (isDropdownOpen) {
-          .getLoadable(
-            isDropdownOpenComponentState({
-              scopeId: dropdownComponentInstanceId,
-            }),
-          )
-          .getValue();
-
-        if (isDropdownOpen || isDropdownOpenLegacy) {
           removeFocusItemFromFocusStackById({
             focusId: dropdownComponentInstanceId,
           });
@@ -57,13 +49,6 @@ export const useCloseDropdown = () => {
             }),
             false,
           );
-
-          set(
-            isDropdownOpenComponentState({
-              scopeId: dropdownComponentInstanceId,
-            }),
-            false,
-          );
         }
       },
     [

packages/twenty-front/src/modules/ui/layout/dropdown/hooks/useDropdown.ts

@@ -1,13 +1,16 @@
-import { useRecoilCallback, useRecoilState } from 'recoil';
+import { useRecoilCallback } from 'recoil';
 
 import { useDropdownStates } from '@/ui/layout/dropdown/hooks/internal/useDropdownStates';
 import { useGoBackToPreviousDropdownFocusId } from '@/ui/layout/dropdown/hooks/useGoBackToPreviousDropdownFocusId';
 import { useSetActiveDropdownFocusIdAndMemorizePrevious } from '@/ui/layout/dropdown/hooks/useSetFocusedDropdownIdAndMemorizePrevious';
+import { dropdownPlacementComponentStateV2 } from '@/ui/layout/dropdown/states/dropdownPlacementComponentStateV2';
+import { isDropdownOpenComponentStateV2 } from '@/ui/layout/dropdown/states/isDropdownOpenComponentStateV2';
 import { usePushFocusItemToFocusStack } from '@/ui/utilities/focus/hooks/usePushFocusItemToFocusStack';
 import { useRemoveFocusItemFromFocusStackById } from '@/ui/utilities/focus/hooks/useRemoveFocusItemFromFocusStackById';
 import { FocusComponentType } from '@/ui/utilities/focus/types/FocusComponentType';
 import { GlobalHotkeysConfig } from '@/ui/utilities/hotkey/types/GlobalHotkeysConfig';
 import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
+import { useRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentStateV2';
 import { useCallback } from 'react';
 
 /**
@@ -22,8 +25,7 @@ export const useDropdown = (dropdownId?: string) => {
   const { removeFocusItemFromFocusStackById } =
     useRemoveFocusItemFromFocusStackById();
 
-  const { scopeId, isDropdownOpenState, dropdownPlacementState } =
+  const { scopeId } = useDropdownStates({ dropdownScopeId: dropdownId });
-    useDropdownStates({ dropdownScopeId: dropdownId });
 
   const { setActiveDropdownFocusIdAndMemorizePrevious } =
     useSetActiveDropdownFocusIdAndMemorizePrevious();
@@ -31,11 +33,14 @@ export const useDropdown = (dropdownId?: string) => {
   const { goBackToPreviousDropdownFocusId } =
     useGoBackToPreviousDropdownFocusId();
 
-  const [isDropdownOpen, setIsDropdownOpen] =
+  const [isDropdownOpen, setIsDropdownOpen] = useRecoilComponentStateV2(
-    useRecoilState(isDropdownOpenState);
+    isDropdownOpenComponentStateV2,
+    dropdownId ?? scopeId,
+  );
 
-  const [dropdownPlacement, setDropdownPlacement] = useRecoilState(
+  const [dropdownPlacement, setDropdownPlacement] = useRecoilComponentStateV2(
-    dropdownPlacementState,
+    dropdownPlacementComponentStateV2,
+    dropdownId ?? scopeId,
   );
 
   const closeDropdown = useCallback(() => {

packages/twenty-front/src/modules/ui/layout/dropdown/hooks/useOpenDropdown.ts

@@ -1,6 +1,6 @@
 import { DropdownComponentInstanceContext } from '@/ui/layout/dropdown/contexts/DropdownComponentInstanceContext';
 import { useSetActiveDropdownFocusIdAndMemorizePrevious } from '@/ui/layout/dropdown/hooks/useSetFocusedDropdownIdAndMemorizePrevious';
-import { isDropdownOpenComponentState } from '@/ui/layout/dropdown/states/isDropdownOpenComponentState';
+
 import { isDropdownOpenComponentStateV2 } from '@/ui/layout/dropdown/states/isDropdownOpenComponentStateV2';
 import { usePushFocusItemToFocusStack } from '@/ui/utilities/focus/hooks/usePushFocusItemToFocusStack';
 import { FocusComponentType } from '@/ui/utilities/focus/types/FocusComponentType';
@@ -34,13 +34,6 @@ export const useOpenDropdown = () => {
           throw new Error('Dropdown component instance ID is not defined');
         }
 
-        set(
-          isDropdownOpenComponentState({
-            scopeId: dropdownComponentInstanceId,
-          }),
-          true,
-        );
-
         set(
           isDropdownOpenComponentStateV2.atomFamily({
             instanceId: dropdownComponentInstanceId,

packages/twenty-front/src/modules/ui/layout/dropdown/hooks/useToggleDropdown.ts

@@ -1,7 +1,6 @@
 import { DropdownComponentInstanceContext } from '@/ui/layout/dropdown/contexts/DropdownComponentInstanceContext';
 import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
 import { useOpenDropdown } from '@/ui/layout/dropdown/hooks/useOpenDropdown';
-import { isDropdownOpenComponentState } from '@/ui/layout/dropdown/states/isDropdownOpenComponentState';
 import { isDropdownOpenComponentStateV2 } from '@/ui/layout/dropdown/states/isDropdownOpenComponentStateV2';
 import { GlobalHotkeysConfig } from '@/ui/utilities/hotkey/types/GlobalHotkeysConfig';
 import { useAvailableComponentInstanceId } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceId';
@@ -40,15 +39,7 @@ export const useToggleDropdown = () => {
           )
           .getValue();
 
-        const isDropdownOpenLegacy = snapshot
+        if (isDropdownOpen) {
-          .getLoadable(
-            isDropdownOpenComponentState({
-              scopeId: dropdownComponentInstanceId,
-            }),
-          )
-          .getValue();
-
-        if (isDropdownOpen || isDropdownOpenLegacy) {
           closeDropdown(dropdownComponentInstanceId);
         } else {
           openDropdown({

packages/twenty-front/src/modules/ui/layout/dropdown/states/dropdownPlacementComponentState.ts

@@ -1,9 +0,0 @@
-import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
-
-import { Placement } from '@floating-ui/react';
-
-export const dropdownPlacementComponentState =
-  createComponentState<Placement | null>({
-    key: 'dropdownPlacementComponentState',
-    defaultValue: null,
-  });

packages/twenty-front/src/modules/ui/layout/dropdown/states/dropdownPlacementComponentStateV2.ts

@@ -0,0 +1,11 @@
+import { DropdownComponentInstanceContext } from '@/ui/layout/dropdown/contexts/DropdownComponentInstanceContext';
+import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2';
+
+import { Placement } from '@floating-ui/react';
+
+export const dropdownPlacementComponentStateV2 =
+  createComponentStateV2<Placement | null>({
+    key: 'dropdownPlacementComponentState',
+    componentInstanceContext: DropdownComponentInstanceContext,
+    defaultValue: null,
+  });

packages/twenty-front/src/modules/ui/layout/dropdown/states/isDropdownOpenComponentState.ts

@@ -1,9 +0,0 @@
-import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
-
-/**
- * @deprecated Use `isDropdownOpenComponentStateV2` instead.
- */
-export const isDropdownOpenComponentState = createComponentState<boolean>({
-  key: 'isDropdownOpenComponentState',
-  defaultValue: false,
-});

packages/twenty-front/src/modules/workflow/workflow-variables/components/WorkflowVariablesDropdown.tsx

@@ -1,8 +1,8 @@
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { StyledDropdownButtonContainer } from '@/ui/layout/dropdown/components/StyledDropdownButtonContainer';
 import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
-import { isDropdownOpenComponentState } from '@/ui/layout/dropdown/states/isDropdownOpenComponentState';
+import { isDropdownOpenComponentStateV2 } from '@/ui/layout/dropdown/states/isDropdownOpenComponentStateV2';
-import { extractComponentState } from '@/ui/utilities/state/component-state/utils/extractComponentState';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { WorkflowVariablesDropdownFieldItems } from '@/workflow/workflow-variables/components/WorkflowVariablesDropdownFieldItems';
 import { WorkflowVariablesDropdownObjectItems } from '@/workflow/workflow-variables/components/WorkflowVariablesDropdownObjectItems';
 import { WorkflowVariablesDropdownWorkflowStepItems } from '@/workflow/workflow-variables/components/WorkflowVariablesDropdownWorkflowStepItems';
@@ -13,7 +13,6 @@ import { StepOutputSchema } from '@/workflow/workflow-variables/types/StepOutput
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { useState } from 'react';
-import { useRecoilValue } from 'recoil';
 import { isDefined } from 'twenty-shared/utils';
 import { IconVariablePlus } from 'twenty-ui/display';
 
@@ -48,8 +47,9 @@ export const WorkflowVariablesDropdown = ({
   const theme = useTheme();
 
   const dropdownId = `${SEARCH_VARIABLES_DROPDOWN_ID}-${inputId}`;
-  const isDropdownOpen = useRecoilValue(
+  const isDropdownOpen = useRecoilComponentValueV2(
-    extractComponentState(isDropdownOpenComponentState, dropdownId),
+    isDropdownOpenComponentStateV2,
+    dropdownId,
   );
   const { closeDropdown } = useCloseDropdown();
   const availableVariablesInWorkflowStep = useAvailableVariablesInWorkflowStep({