admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Refactor useDropdown states to component state V2 (#12911)

Browse Source 
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
This commit is contained in:
Lucas Bordeau
2025-06-26 16:11:24 +02:00
committed by GitHub
parent fd7089cfc5
commit 658cd46336
14 changed files with 73 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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,

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

@ -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,

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

@ -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,
],
);
};