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
2025-05-16 17:04:22 +02:00
parent 8334fe9528
commit 6554947671
94 changed files with 1268 additions and 563 deletions
--- a/packages/twenty-front/src/modules/ui/layout/modal/hooks/useModal.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/modal/hooks/useModal.tsx
@ -0,0 +1,93 @@
+import { useRecoilCallback } from 'recoil';
+
+import { ModalHotkeyScope } from '@/ui/layout/modal/components/types/ModalHotkeyScope';
+import { isModalOpenedComponentState } from '@/ui/layout/modal/states/isModalOpenedComponentState';
+import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
+import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
+import { isDefined } from 'twenty-shared/utils';
+
+export const useModal = () => {
+  const {
+    setHotkeyScopeAndMemorizePreviousScope,
+    goBackToPreviousHotkeyScope,
+  } = usePreviousHotkeyScope('modal');
+
+  const closeModal = useRecoilCallback(
+    ({ set, snapshot }) =>
+      (modalId: string) => {
+        const isModalOpen = snapshot
+          .getLoadable(
+            isModalOpenedComponentState.atomFamily({ instanceId: modalId }),
+          )
+          .getValue();
+
+        if (isModalOpen) {
+          goBackToPreviousHotkeyScope();
+          set(
+            isModalOpenedComponentState.atomFamily({ instanceId: modalId }),
+            false,
+          );
+        }
+      },
+    [goBackToPreviousHotkeyScope],
+  );
+
+  const openModal = useRecoilCallback(
+    ({ set, snapshot }) =>
+      (modalId: string, customHotkeyScope?: HotkeyScope) => {
+        const isModalOpened = snapshot
+          .getLoadable(
+            isModalOpenedComponentState.atomFamily({ instanceId: modalId }),
+          )
+          .getValue();
+
+        if (isModalOpened) {
+          return;
+        }
+
+        set(
+          isModalOpenedComponentState.atomFamily({ instanceId: modalId }),
+          true,
+        );
+
+        if (isDefined(customHotkeyScope)) {
+          setHotkeyScopeAndMemorizePreviousScope(
+            customHotkeyScope.scope,
+            customHotkeyScope.customScopes,
+          );
+        } else {
+          setHotkeyScopeAndMemorizePreviousScope(ModalHotkeyScope.ModalFocus, {
+            goto: false,
+            commandMenu: false,
+            commandMenuOpen: false,
+            keyboardShortcutMenu: false,
+          });
+        }
+      },
+    [setHotkeyScopeAndMemorizePreviousScope],
+  );
+
+  const toggleModal = useRecoilCallback(
+    ({ snapshot }) =>
+      (modalId: string, customHotkeyScope?: HotkeyScope) => {
+        const isModalOpen = snapshot
+          .getLoadable(
+            isModalOpenedComponentState.atomFamily({ instanceId: modalId }),
+          )
+          .getValue();
+
+        if (isModalOpen) {
+          closeModal(modalId);
+        } else {
+          openModal(modalId, customHotkeyScope);
+        }
+      },
+    [closeModal, openModal],
+  );
+
+  return {
+    closeModal,
+    openModal,
+    toggleModal,
+  };
+};