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

Replaced useDropdown calls by useCloseDropdown, useOpenDropdown and useToggleDropdown (#12958)

Browse Source 
This PR replaces the many calls of useDropdown by the new standalone
hooks : useCloseDropdown, useOpenDropdown and useToggleDropdown.

This will allow to remove useDropdown and then the dropdown recoil
component state v1.

A big round of QA has been made, with some bugs caught along the way.

Closes https://github.com/twentyhq/core-team-issues/issues/1155
Closes https://github.com/twentyhq/core-team-issues/issues/618

## QA

Component|Status|Comment
|---|---|---|
CurrentWorkspaceMemberFavorites|Ok|
FavoriteFolderPickerFooter|Ok|
AdvancedFilterAddFilterRuleSelect|Ok|
AdvancedFilterRecordFilterGroupOptionsDropdown|Ok|
AdvancedFilterRecordFilterOperandSelectContent|Ok|
AdvancedFilterRecordFilterOptionsDropdown|Ok|
useAdvancedFilterFieldSelectDropdown|Ok|
ObjectFilterDropdownBooleanSelect|Ok|
ObjectFilterDropdownOptionSelect|Ok|
ObjectOptionsDropdown|Ok|
ObjectOptionsDropdownLayoutContent|Ok|
ObjectSortDropdownButton|Ok|
useCloseSortDropdown|Ok|
FormDateTimeFieldInput|Ok|Bug detected, cannot select a month or a year,
see issue https://github.com/twentyhq/twenty/issues/12922
FormSingleRecordPicker|Ok|
MultiItemFieldMenuItem|Ok|
RecordDetailRelationRecordsListItem|Ok|
RecordDetailRelationSection|Ok|
RecordDetailRelationSectionDropdownToMany|Ok|
RecordDetailRelationSectionDropdownToOne|Ok|
RecordTableColumnAggregateFooterDropdownSubmenuContent|Ok|
RecordTableColumnAggregateFooterAggregateOperationMenuItems|Ok|
RecordTableColumnAggregateFooterMenuContent|Ok|
RecordTableColumnAggregateFooterValueCell|Ok|
RecordTableColumnHeadDropdownMenu|Ok|
RecordTableHeaderPlusButtonContent|Ok|
useTriggerActionMenuDropdown|Ok|
MultipleSelectDropdown|Ok|
RecordBoardColumnHeaderAggregateDropdownButton|Ok|
SettingsDataModelFieldSelectFormOptionRow|Ok|
SettingsDataModelNewFieldBreadcrumbDropDown|Ok|
SettingsObjectFieldActiveActionDropdown|Ok|
SettingsObjectFieldInactiveActionDropdown|Ok|
SettingsObjectInactiveMenuDropDown|Ok|
SettingsSecurityApprovedAccessDomainRowDropdownMenu|Couldn’t test|
SettingsSecuritySSORowDropdownMenu|Couldn’t test|
SettingsAccountsRowDropdownMenu|Ok|
SettingsRoleAssignment|Ok|
SettingsServerlessFunctionTabEnvironmentVariableTableRow|Couldn’t test|
MatchColumnToFieldSelect|Ok|
SubMatchingSelectDropdownButton|Ok|Removed conflicting duplicate open
dropdown
SubMatchingSelectRowRightDropdown|Ok|
CurrencyPickerDropdownButton|Ok|
IconPicker|Ok|
DateTimePicker|Ok|
PhoneCountryPickerDropdownButton|OK|
Select|Ok|
Dropdown|Ok|Not QAing all dropdowns in the app because the ones of this
QA are enough to show up that Dropdown is behaving correctly on a lot of
use cases
DropdownMenuInnerSelect|Ok|
TabList|Ok|Removed onClickOutside called in dropdown clickable
component, validated with Raph who recently worked on this
DateInput|Ok|
MultiWorkspaceDropdownDefaultComponents|Ok|
AdvancedFilterChip|Ok|
EditableFilterDropdownButton|Ok|
UpdateViewButtonGroup|Ok|
ViewBarDetailsAddFilterButton|Ok|
ViewBarFilterButton|Ok|
ViewBarFilterDropdown|Ok|
ViewBarFilterDropdownAdvancedFilterButton|Ok|
ViewPickerDropdown|Ok|
ViewPickerListContent|Ok|
ViewPickerOptionDropdown|Ok|
WorkflowEditTriggerDatabaseEventForm|Ok|
WorkflowVariablesDropdownWorkflowStepItems|Ok|
AttachmentDropdown|Ok|
SupportDropdown|Ok|

Co-authored-by: Charles Bochet <charlesBochet@users.noreply.github.com>
Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
Lucas Bordeau
2025-07-02 18:38:45 +02:00
committed by GitHub
parent a19a73a977
commit a7b9a0710e
70 changed files with 352 additions and 426 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
packages/twenty-front/src/modules/views/view-picker/components/ViewPickerDropdown.tsx
View File

@ -3,7 +3,8 @@ import styled from '@emotion/styled';
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { StyledDropdownButtonContainer } from '@/ui/layout/dropdown/components/StyledDropdownButtonContainer';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { isDropdownOpenComponentStateV2 } from '@/ui/layout/dropdown/states/isDropdownOpenComponentStateV2';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import { useGetRecordIndexTotalCount } from '@/views/hooks/internal/useGetRecordIndexTotalCount';
import { useGetCurrentViewOnly } from '@/views/hooks/useGetCurrentViewOnly';
import { ViewPickerContentCreateMode } from '@/views/view-picker/components/ViewPickerContentCreateMode';
@ -51,7 +52,8 @@ export const ViewPickerDropdown = () => {
const { totalCount } = useGetRecordIndexTotalCount();
const { isDropdownOpen: isViewsListDropdownOpen } = useDropdown(
const isDropdownOpen = useRecoilComponentValueV2(
isDropdownOpenComponentStateV2,
VIEW_PICKER_DROPDOWN_ID,
);
@ -61,7 +63,7 @@ export const ViewPickerDropdown = () => {
const CurrentViewIcon = getIcon(currentView?.icon);
const handleClickOutside = async () => {
if (isViewsListDropdownOpen && viewPickerMode === 'edit') {
if (isDropdownOpen && viewPickerMode === 'edit') {
await updateViewFromCurrentState();
}
setViewPickerMode('list');
@ -74,7 +76,7 @@ export const ViewPickerDropdown = () => {
dropdownPlacement="bottom-start"
onClickOutside={handleClickOutside}
clickableComponent={
<StyledDropdownButtonContainer isUnfolded={isViewsListDropdownOpen}>
<StyledDropdownButtonContainer isUnfolded={isDropdownOpen}>
{currentView && CurrentViewIcon ? (
<CurrentViewIcon size={theme.icon.size.md} />
) : (

6
packages/twenty-front/src/modules/views/view-picker/components/ViewPickerListContent.tsx
View File

@ -9,7 +9,7 @@ import { DraggableList } from '@/ui/layout/draggable-list/components/DraggableLi
import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
import { useChangeView } from '@/views/hooks/useChangeView';
import { useGetCurrentViewOnly } from '@/views/hooks/useGetCurrentViewOnly';
@ -51,11 +51,11 @@ export const ViewPickerListContent = () => {
const { updateView } = useUpdateView();
const { changeView } = useChangeView();
const { closeDropdown } = useDropdown(VIEW_PICKER_DROPDOWN_ID);
const { closeDropdown } = useCloseDropdown();
const handleViewSelect = (viewId: string) => {
changeView(viewId);
closeDropdown();
closeDropdown(VIEW_PICKER_DROPDOWN_ID);
};
const handleAddViewButtonClick = () => {

12
packages/twenty-front/src/modules/views/view-picker/components/ViewPickerOptionDropdown.tsx
View File

@ -2,7 +2,7 @@ import { useCreateFavorite } from '@/favorites/hooks/useCreateFavorite';
import { useFavorites } from '@/favorites/hooks/useFavorites';
import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
import { MenuItemWithOptionDropdown } from '@/ui/navigation/menu-item/components/MenuItemWithOptionDropdown';
import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
import { View } from '@/views/types/View';
@ -33,8 +33,10 @@ export const ViewPickerOptionDropdown = ({
view,
handleViewSelect,
}: ViewPickerOptionDropdownProps) => {
const dropdownId = `view-picker-options-${view.id}`;
const { t } = useLingui();
const { closeDropdown } = useDropdown(`view-picker-options-${view.id}`);
const { closeDropdown } = useCloseDropdown();
const { getIcon } = useIcons();
const [isHovered, setIsHovered] = useState(false);
const { deleteViewFromCurrentState } = useDeleteViewFromCurrentState();
@ -54,7 +56,7 @@ export const ViewPickerOptionDropdown = ({
const handleDelete = () => {
setViewPickerReferenceViewId(view.id);
deleteViewFromCurrentState();
closeDropdown();
closeDropdown(dropdownId);
};
const handleAddToFavorites = () => {
@ -64,7 +66,7 @@ export const ViewPickerOptionDropdown = ({
setViewPickerReferenceViewId(view.id);
setViewPickerMode('favorite-folders-picker');
}
closeDropdown();
closeDropdown(dropdownId);
};
return (
@ -103,7 +105,7 @@ export const ViewPickerOptionDropdown = ({
text={t`Edit`}
onClick={(event) => {
onEdit(event, view.id);
closeDropdown();
closeDropdown(dropdownId);
}}
/>
<MenuItem