6554947671
# Modal API Refactoring This PR refactors the modal system to use an imperative approach for setting hotkey scopes, addressing race conditions that occurred with the previous effect-based implementation. Fixes #11986 Closes #12087 ## Key Changes: - **New Modal API**: Introduced a `useModal` hook with `openModal`, `closeModal`, and `toggleModal` functions, similar to the existing dropdown API - **Modal Identification**: Added a `modalId` prop to uniquely identify modals - **State Management**: Introduced `isModalOpenedComponentState` and removed individual boolean state atoms (like `isRemoveSortingModalOpenState`) - **Modal Constants**: Added consistent modal ID constants (e.g., `FavoriteFolderDeleteModalId`, `RecordIndexRemoveSortingModalId`) for better maintainability - **Mount Effects**: Created mount effect components (like `AuthModalMountEffect`) to handle initial modal opening where needed ## Implementation Details: - Modified `Modal` and `ConfirmationModal` components to accept the new `modalId` prop - Added a component-state-based approach using `ModalComponentInstanceContext` to track modal state - Introduced imperative modal handlers that properly manage hotkey scopes - Components like `ActionModal` and `AttachmentList` now use the new `useModal` hook for better control over modal state ## Benefits: - **Race Condition Prevention**: Hotkey scopes are now set imperatively, eliminating race conditions - **Consistent API**: Modal and dropdown now share similar patterns, improving developer experience ## Tests to do before merging: 1. Action Modals (Modal triggered by an action, for example the delete action) 2. Auth Modal (`AuthModal.tsx` and `AuthModalMountEffect.tsx`) - Test that auth modal opens automatically on mount - Verify authentication flow works properly 3. Email Verification Sent Modal (in `SignInUp.tsx`) - Verify this modal displays correctly 4. Attachment Preview Modal (in `AttachmentList.tsx`) - Test opening preview modal by clicking on attachments - Verify close, download functionality works - Test modal navigation and interactions 5. Favorite Folder Delete Modal (`CurrentWorkspaceMemberFavorites.tsx`) - Test deletion confirmation flow - Check that modal opens when attempting to delete folders with favorites 6. Record Board Remove Sorting Modal (`RecordBoard.tsx` using `RecordIndexRemoveSortingModalId`) - Test that modal appears when trying to drag records with sorting enabled - Verify sorting removal works correctly 7. Record Group Reorder Confirmation Modal (`RecordGroupReorderConfirmationModal.tsx`) - Test group reordering with sorting enabled - Verify confirmation modal properly handles sorting removal 8. Confirmation Modal (base component used by several modals) - Test all variants with different confirmation options For each modal, verify: - Opening/closing behavior - Hotkey support (Esc to close, Enter to confirm where applicable) - Click outside behavior - Proper z-index stacking - Any modal-specific functionality
61 lines
1.7 KiB
TypeScript
61 lines
1.7 KiB
TypeScript
import { FavoriteFolderHotkeyScope } from '@/favorites/constants/FavoriteFolderRightIconDropdownHotkeyScope';
|
|
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
|
|
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
|
|
import { IconDotsVertical, IconPencil, IconTrash } from 'twenty-ui/display';
|
|
import { LightIconButton } from 'twenty-ui/input';
|
|
import { MenuItem } from 'twenty-ui/navigation';
|
|
|
|
type FavoriteFolderNavigationDrawerItemDropdownProps = {
|
|
folderId: string;
|
|
onRename: () => void;
|
|
onDelete: () => void;
|
|
closeDropdown: () => void;
|
|
};
|
|
|
|
export const FavoriteFolderNavigationDrawerItemDropdown = ({
|
|
folderId,
|
|
onRename,
|
|
onDelete,
|
|
closeDropdown,
|
|
}: FavoriteFolderNavigationDrawerItemDropdownProps) => {
|
|
const handleRename = () => {
|
|
closeDropdown();
|
|
onRename();
|
|
};
|
|
|
|
const handleDelete = () => {
|
|
closeDropdown();
|
|
onDelete();
|
|
};
|
|
|
|
return (
|
|
<Dropdown
|
|
dropdownId={`favorite-folder-edit-${folderId}`}
|
|
dropdownHotkeyScope={{
|
|
scope: FavoriteFolderHotkeyScope.FavoriteFolderRightIconDropdown,
|
|
}}
|
|
data-select-disable
|
|
clickableComponent={
|
|
<LightIconButton Icon={IconDotsVertical} accent="tertiary" />
|
|
}
|
|
dropdownPlacement="bottom-start"
|
|
dropdownComponents={
|
|
<DropdownMenuItemsContainer>
|
|
<MenuItem
|
|
LeftIcon={IconPencil}
|
|
onClick={handleRename}
|
|
accent="default"
|
|
text="Rename"
|
|
/>
|
|
<MenuItem
|
|
LeftIcon={IconTrash}
|
|
onClick={handleDelete}
|
|
accent="danger"
|
|
text="Delete"
|
|
/>
|
|
</DropdownMenuItemsContainer>
|
|
}
|
|
/>
|
|
);
|
|
};
|