Modal API Refactoring (#12062)
# 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
This commit is contained in:
@ -1,7 +1,7 @@
|
||||
import { defaultSpreadsheetImportProps } from '@/spreadsheet-import/provider/components/SpreadsheetImport';
|
||||
import {
|
||||
SpreadsheetImportDialogOptions,
|
||||
SpreadsheetImportFields
|
||||
SpreadsheetImportDialogOptions,
|
||||
SpreadsheetImportFields
|
||||
} from '@/spreadsheet-import/types';
|
||||
import { SpreadsheetColumns } from '@/spreadsheet-import/types/SpreadsheetColumns';
|
||||
import { FieldMetadataType } from 'twenty-shared/types';
|
||||
@ -131,7 +131,6 @@ export const mockRsiValues = mockComponentBehaviourForTypes({
|
||||
onSubmit: async () => {
|
||||
return;
|
||||
},
|
||||
isOpen: true,
|
||||
onClose: () => {
|
||||
return;
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user