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:
Raphaël Bosi
@ -1,5 +1,3 @@
|
||||
import { useState } from 'react';
|
||||
|
||||
import { ConnectedAccount } from '@/accounts/types/ConnectedAccount';
|
||||
import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
|
||||
import { useDestroyOneRecord } from '@/object-record/hooks/useDestroyOneRecord';
|
||||
@ -9,6 +7,7 @@ import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
|
||||
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
|
||||
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
|
||||
import { ConfirmationModal } from '@/ui/layout/modal/components/ConfirmationModal';
|
||||
import { useModal } from '@/ui/layout/modal/hooks/useModal';
|
||||
import { Trans, useLingui } from '@lingui/react/macro';
|
||||
import {
|
||||
IconCalendarEvent,
|
||||
@ -25,13 +24,14 @@ type SettingsAccountsRowDropdownMenuProps = {
|
||||
account: ConnectedAccount;
|
||||
};
|
||||
|
||||
const DELETE_ACCOUNT_MODAL_ID = 'delete-account-modal';
|
||||
|
||||
export const SettingsAccountsRowDropdownMenu = ({
|
||||
account,
|
||||
}: SettingsAccountsRowDropdownMenuProps) => {
|
||||
const dropdownId = `settings-account-row-${account.id}`;
|
||||
const { t } = useLingui();
|
||||
const [isDeleteAccountModalOpen, setIsDeleteAccountModalOpen] =
|
||||
useState(false);
|
||||
const { openModal } = useModal();
|
||||
|
||||
const navigate = useNavigateSettings();
|
||||
const { closeDropdown } = useDropdown(dropdownId);
|
||||
@ -43,7 +43,6 @@ export const SettingsAccountsRowDropdownMenu = ({
|
||||
|
||||
const deleteAccount = async () => {
|
||||
await destroyOneRecord(account.id);
|
||||
setIsDeleteAccountModalOpen(false);
|
||||
};
|
||||
|
||||
return (
|
||||
@ -89,16 +88,15 @@ export const SettingsAccountsRowDropdownMenu = ({
|
||||
LeftIcon={IconTrash}
|
||||
text={t`Remove account`}
|
||||
onClick={() => {
|
||||
setIsDeleteAccountModalOpen(true);
|
||||
closeDropdown();
|
||||
openModal(DELETE_ACCOUNT_MODAL_ID);
|
||||
}}
|
||||
/>
|
||||
</DropdownMenuItemsContainer>
|
||||
}
|
||||
/>
|
||||
<ConfirmationModal
|
||||
isOpen={isDeleteAccountModalOpen}
|
||||
setIsOpen={setIsDeleteAccountModalOpen}
|
||||
modalId={DELETE_ACCOUNT_MODAL_ID}
|
||||
title={t`Data deletion`}
|
||||
subtitle={
|
||||
<Trans>
|
||||
|
||||
@ -1,18 +1,18 @@
|
||||
import { useState } from 'react';
|
||||
import { useRecoilValue } from 'recoil';
|
||||
|
||||
import { useAuth } from '@/auth/hooks/useAuth';
|
||||
import { currentUserState } from '@/auth/states/currentUserState';
|
||||
import { ConfirmationModal } from '@/ui/layout/modal/components/ConfirmationModal';
|
||||
import { useModal } from '@/ui/layout/modal/hooks/useModal';
|
||||
import { useLingui } from '@lingui/react/macro';
|
||||
import { useDeleteUserAccountMutation } from '~/generated/graphql';
|
||||
import { Button } from 'twenty-ui/input';
|
||||
import { H2Title } from 'twenty-ui/display';
|
||||
import { Button } from 'twenty-ui/input';
|
||||
import { useDeleteUserAccountMutation } from '~/generated/graphql';
|
||||
|
||||
const DELETE_ACCOUNT_MODAL_ID = 'delete-account-modal';
|
||||
export const DeleteAccount = () => {
|
||||
const { t } = useLingui();
|
||||
const [isDeleteAccountModalOpen, setIsDeleteAccountModalOpen] =
|
||||
useState(false);
|
||||
const { openModal } = useModal();
|
||||
|
||||
const [deleteUserAccount] = useDeleteUserAccountMutation();
|
||||
const currentUser = useRecoilValue(currentUserState);
|
||||
@ -33,7 +33,7 @@ export const DeleteAccount = () => {
|
||||
|
||||
<Button
|
||||
accent="danger"
|
||||
onClick={() => setIsDeleteAccountModalOpen(true)}
|
||||
onClick={() => openModal(DELETE_ACCOUNT_MODAL_ID)}
|
||||
variant="secondary"
|
||||
title={t`Delete account`}
|
||||
/>
|
||||
@ -41,8 +41,7 @@ export const DeleteAccount = () => {
|
||||
<ConfirmationModal
|
||||
confirmationValue={userEmail}
|
||||
confirmationPlaceholder={userEmail ?? ''}
|
||||
isOpen={isDeleteAccountModalOpen}
|
||||
setIsOpen={setIsDeleteAccountModalOpen}
|
||||
modalId={DELETE_ACCOUNT_MODAL_ID}
|
||||
title={t`Account Deletion`}
|
||||
subtitle={
|
||||
<>
|
||||
|
||||
@ -1,22 +1,22 @@
|
||||
import { Trans, useLingui } from '@lingui/react/macro';
|
||||
import { useState } from 'react';
|
||||
import { useRecoilValue } from 'recoil';
|
||||
|
||||
import { useAuth } from '@/auth/hooks/useAuth';
|
||||
import { currentUserState } from '@/auth/states/currentUserState';
|
||||
import { ConfirmationModal } from '@/ui/layout/modal/components/ConfirmationModal';
|
||||
import { useDeleteCurrentWorkspaceMutation } from '~/generated/graphql';
|
||||
import { Button } from 'twenty-ui/input';
|
||||
import { useModal } from '@/ui/layout/modal/hooks/useModal';
|
||||
import { H2Title, IconTrash } from 'twenty-ui/display';
|
||||
import { Button } from 'twenty-ui/input';
|
||||
import { useDeleteCurrentWorkspaceMutation } from '~/generated/graphql';
|
||||
|
||||
const DELETE_WORKSPACE_MODAL_ID = 'delete-workspace-modal';
|
||||
|
||||
export const DeleteWorkspace = () => {
|
||||
const [isDeleteWorkSpaceModalOpen, setIsDeleteWorkSpaceModalOpen] =
|
||||
useState(false);
|
||||
|
||||
const [deleteCurrentWorkspace] = useDeleteCurrentWorkspaceMutation();
|
||||
const currentUser = useRecoilValue(currentUserState);
|
||||
const userEmail = currentUser?.email;
|
||||
const { t } = useLingui();
|
||||
const { openModal } = useModal();
|
||||
|
||||
const { signOut } = useAuth();
|
||||
|
||||
@ -36,14 +36,13 @@ export const DeleteWorkspace = () => {
|
||||
variant="secondary"
|
||||
title={t`Delete workspace`}
|
||||
Icon={IconTrash}
|
||||
onClick={() => setIsDeleteWorkSpaceModalOpen(true)}
|
||||
onClick={() => openModal(DELETE_WORKSPACE_MODAL_ID)}
|
||||
/>
|
||||
|
||||
<ConfirmationModal
|
||||
modalId={DELETE_WORKSPACE_MODAL_ID}
|
||||
confirmationPlaceholder={userEmail}
|
||||
confirmationValue={userEmail}
|
||||
isOpen={isDeleteWorkSpaceModalOpen}
|
||||
setIsOpen={setIsDeleteWorkSpaceModalOpen}
|
||||
title={t`Workspace Deletion`}
|
||||
subtitle={
|
||||
<Trans>
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -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"
|
||||
|
||||
@ -0,0 +1,2 @@
|
||||
export const ROLE_ASSIGNMENT_CONFIRMATION_MODAL_ID =
|
||||
'role-assignment-confirmation-modal';
|
||||
@ -5,14 +5,16 @@ import { ServerlessFunctionFormValues } from '@/settings/serverless-functions/ho
|
||||
import { SettingsServerlessFunctionHotkeyScope } from '@/settings/serverless-functions/types/SettingsServerlessFunctionHotKeyScope';
|
||||
import { SettingsPath } from '@/types/SettingsPath';
|
||||
import { ConfirmationModal } from '@/ui/layout/modal/components/ConfirmationModal';
|
||||
import { useModal } from '@/ui/layout/modal/hooks/useModal';
|
||||
import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
|
||||
import { useState } from 'react';
|
||||
import { Key } from 'ts-key-enum';
|
||||
import { H2Title } from 'twenty-ui/display';
|
||||
import { Button } from 'twenty-ui/input';
|
||||
import { Section } from 'twenty-ui/layout';
|
||||
import { useHotkeyScopeOnMount } from '~/hooks/useHotkeyScopeOnMount';
|
||||
import { useNavigateSettings } from '~/hooks/useNavigateSettings';
|
||||
import { Button } from 'twenty-ui/input';
|
||||
import { H2Title } from 'twenty-ui/display';
|
||||
import { Section } from 'twenty-ui/layout';
|
||||
|
||||
const DELETE_FUNCTION_MODAL_ID = 'delete-function-modal';
|
||||
|
||||
export const SettingsServerlessFunctionSettingsTab = ({
|
||||
formValues,
|
||||
@ -26,8 +28,7 @@ export const SettingsServerlessFunctionSettingsTab = ({
|
||||
onCodeChange: (filePath: string, value: string) => void;
|
||||
}) => {
|
||||
const navigate = useNavigateSettings();
|
||||
const [isDeleteFunctionModalOpen, setIsDeleteFunctionModalOpen] =
|
||||
useState(false);
|
||||
const { openModal } = useModal();
|
||||
const { deleteOneServerlessFunction } = useDeleteOneServerlessFunction();
|
||||
|
||||
const deleteFunction = async () => {
|
||||
@ -42,7 +43,7 @@ export const SettingsServerlessFunctionSettingsTab = ({
|
||||
useScopedHotkeys(
|
||||
[Key.Delete],
|
||||
() => {
|
||||
setIsDeleteFunctionModalOpen(true);
|
||||
openModal(DELETE_FUNCTION_MODAL_ID);
|
||||
},
|
||||
SettingsServerlessFunctionHotkeyScope.ServerlessFunctionSettingsTab,
|
||||
);
|
||||
@ -68,7 +69,7 @@ export const SettingsServerlessFunctionSettingsTab = ({
|
||||
<H2Title title="Danger zone" description="Delete this function" />
|
||||
<Button
|
||||
accent="danger"
|
||||
onClick={() => setIsDeleteFunctionModalOpen(true)}
|
||||
onClick={() => openModal(DELETE_FUNCTION_MODAL_ID)}
|
||||
variant="secondary"
|
||||
size="small"
|
||||
title="Delete function"
|
||||
@ -77,8 +78,7 @@ export const SettingsServerlessFunctionSettingsTab = ({
|
||||
<ConfirmationModal
|
||||
confirmationValue={formValues.name}
|
||||
confirmationPlaceholder={formValues.name}
|
||||
isOpen={isDeleteFunctionModalOpen}
|
||||
setIsOpen={setIsDeleteFunctionModalOpen}
|
||||
modalId={DELETE_FUNCTION_MODAL_ID}
|
||||
title="Function Deletion"
|
||||
subtitle={
|
||||
<>
|
||||
|
||||
Reference in New Issue
Block a user