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

packages/twenty-front/src/modules/settings/roles/role-assignment/components/SettingsRoleAssignment.tsx

@@ -1,5 +1,5 @@
-import { currentWorkspaceMembersState } from '@/auth/states/currentWorkspaceMembersStates';
 import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
+import { currentWorkspaceMembersState } from '@/auth/states/currentWorkspaceMembersStates';
 import { useUpdateWorkspaceMemberRole } from '@/settings/roles/hooks/useUpdateWorkspaceMemberRole';
 import { SettingsRoleAssignmentConfirmationModal } from '@/settings/roles/role-assignment/components/SettingsRoleAssignmentConfirmationModal';
 import { SettingsRoleAssignmentTableHeader } from '@/settings/roles/role-assignment/components/SettingsRoleAssignmentTableHeader';
@@ -11,18 +11,14 @@ import { SettingsPath } from '@/types/SettingsPath';
 import { TextInput } from '@/ui/input/components/TextInput';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
+import { useModal } from '@/ui/layout/modal/hooks/useModal';
+import { isModalOpenedComponentState } from '@/ui/layout/modal/states/isModalOpenedComponentState';
 import { TableCell } from '@/ui/layout/table/components/TableCell';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import styled from '@emotion/styled';
 import { t } from '@lingui/core/macro';
 import { useState } from 'react';
 import { useRecoilValue } from 'recoil';
-import {
-  Role,
-  SearchRecord,
-  WorkspaceMember,
-} from '~/generated-metadata/graphql';
-import { useNavigateSettings } from '~/hooks/useNavigateSettings';
-import { SettingsRoleAssignmentTableRow } from './SettingsRoleAssignmentTableRow';
 import {
   AppTooltip,
   H2Title,
@@ -32,6 +28,14 @@ import {
 } from 'twenty-ui/display';
 import { Button } from 'twenty-ui/input';
 import { Section } from 'twenty-ui/layout';
+import {
+  Role,
+  SearchRecord,
+  WorkspaceMember,
+} from '~/generated-metadata/graphql';
+import { useNavigateSettings } from '~/hooks/useNavigateSettings';
+import { ROLE_ASSIGNMENT_CONFIRMATION_MODAL_ID } from '../constants/RoleAssignmentConfirmationModalId';
+import { SettingsRoleAssignmentTableRow } from './SettingsRoleAssignmentTableRow';
 
 const StyledAssignToMemberContainer = styled.div`
   display: flex;
@@ -84,8 +88,7 @@ export const SettingsRoleAssignment = ({
     updateWorkspaceMemberRoleDraftState,
   } = useUpdateWorkspaceMemberRole(roleId);
 
-  const [confirmationModalIsOpen, setConfirmationModalIsOpen] =
-    useState<boolean>(false);
+  const { openModal, closeModal } = useModal();
   const [selectedWorkspaceMember, setSelectedWorkspaceMember] =
     useState<SettingsRoleAssignmentConfirmationModalSelectedWorkspaceMember | null>(
       null,
@@ -135,7 +138,6 @@ export const SettingsRoleAssignment = ({
   );
 
   const handleModalClose = () => {
-    setConfirmationModalIsOpen(false);
     setSelectedWorkspaceMember(null);
   };
 
@@ -152,12 +154,17 @@ export const SettingsRoleAssignment = ({
       role: existingRole,
       avatarUrl: workspaceMemberSearchRecord.imageUrl,
     });
-    setConfirmationModalIsOpen(true);
+    openModal(ROLE_ASSIGNMENT_CONFIRMATION_MODAL_ID);
     closeDropdown();
   };
 
+  const isModalOpened = useRecoilComponentValueV2(
+    isModalOpenedComponentState,
+    ROLE_ASSIGNMENT_CONFIRMATION_MODAL_ID,
+  );
+
   const handleConfirm = async () => {
-    if (!selectedWorkspaceMember || !confirmationModalIsOpen) return;
+    if (!selectedWorkspaceMember || !isModalOpened) return;
 
     if (!isCreateMode) {
       await addWorkspaceMemberToRoleAndUpdateState({
@@ -188,6 +195,7 @@ export const SettingsRoleAssignment = ({
   const handleRoleClick = (roleId: string) => {
     navigateSettings(SettingsPath.RoleDetail, { roleId });
     handleModalClose();
+    closeModal(ROLE_ASSIGNMENT_CONFIRMATION_MODAL_ID);
   };
 
   const handleSearchChange = (text: string) => {
@@ -267,10 +275,9 @@ export const SettingsRoleAssignment = ({
         </StyledAssignToMemberContainer>
       </Section>
 
-      {confirmationModalIsOpen && selectedWorkspaceMember && (
+      {selectedWorkspaceMember && (
         <SettingsRoleAssignmentConfirmationModal
           selectedWorkspaceMember={selectedWorkspaceMember}
-          isOpen={true}
           onClose={handleModalClose}
           onConfirm={handleConfirm}
           onRoleClick={handleRoleClick}

packages/twenty-front/src/modules/settings/roles/role-assignment/components/SettingsRoleAssignmentConfirmationModal.tsx

@@ -1,11 +1,11 @@
 import { SettingsRoleAssignmentConfirmationModalSubtitle } from '@/settings/roles/role-assignment/components/SettingsRoleAssignmentConfirmationModalSubtitle';
+import { ROLE_ASSIGNMENT_CONFIRMATION_MODAL_ID } from '@/settings/roles/role-assignment/constants/RoleAssignmentConfirmationModalId';
 import { SettingsRoleAssignmentConfirmationModalSelectedWorkspaceMember } from '@/settings/roles/role-assignment/types/SettingsRoleAssignmentConfirmationModalSelectedWorkspaceMember';
 import { ConfirmationModal } from '@/ui/layout/modal/components/ConfirmationModal';
 import { t } from '@lingui/core/macro';
 
 type SettingsRoleAssignmentConfirmationModalProps = {
   selectedWorkspaceMember: SettingsRoleAssignmentConfirmationModalSelectedWorkspaceMember;
-  isOpen: boolean;
   onClose: () => void;
   onConfirm: () => void;
   onRoleClick: (roleId: string) => void;
@@ -13,7 +13,6 @@ type SettingsRoleAssignmentConfirmationModalProps = {
 
 export const SettingsRoleAssignmentConfirmationModal = ({
   selectedWorkspaceMember,
-  isOpen,
   onClose,
   onConfirm,
   onRoleClick,
@@ -24,8 +23,7 @@ export const SettingsRoleAssignmentConfirmationModal = ({
 
   return (
     <ConfirmationModal
-      isOpen={isOpen}
-      setIsOpen={onClose}
+      modalId={ROLE_ASSIGNMENT_CONFIRMATION_MODAL_ID}
       title={title}
       subtitle={
         <SettingsRoleAssignmentConfirmationModalSubtitle
@@ -33,6 +31,7 @@ export const SettingsRoleAssignmentConfirmationModal = ({
           onRoleClick={onRoleClick}
         />
       }
+      onClose={onClose}
       onConfirmClick={onConfirm}
       confirmButtonText={t`Confirm`}
       confirmButtonAccent="danger"

packages/twenty-front/src/modules/settings/roles/role-assignment/constants/RoleAssignmentConfirmationModalId.ts

@@ -0,0 +1,2 @@
+export const ROLE_ASSIGNMENT_CONFIRMATION_MODAL_ID =
+  'role-assignment-confirmation-modal';