admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Modal API Refactoring (#12062)

Browse Source 
# 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
2025-05-16 17:04:22 +02:00
committed by GitHub
parent 8334fe9528
commit 6554947671
94 changed files with 1268 additions and 563 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
packages/twenty-front/src/modules/spreadsheet-import/__mocks__/mockRsiValues.ts
View File

@ -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;
},

10
packages/twenty-front/src/modules/spreadsheet-import/components/ModalCloseButton.tsx → packages/twenty-front/src/modules/spreadsheet-import/components/SpreadSheetImportModalCloseButton.tsx
View File

@ -19,11 +19,13 @@ const StyledCloseButtonContainer = styled.div`
top: 0;
`;
type ModalCloseButtonProps = {
onClose: () => void;
type SpreadSheetImportModalCloseButtonProps = {
onClose?: () => void;
};
export const ModalCloseButton = ({ onClose }: ModalCloseButtonProps) => {
export const SpreadSheetImportModalCloseButton = ({
onClose,
}: SpreadSheetImportModalCloseButtonProps) => {
const { initialStepState } = useSpreadsheetImportInternal();
const { initialStep } = useSpreadsheetImportInitialStep(
@ -40,7 +42,7 @@ export const ModalCloseButton = ({ onClose }: ModalCloseButtonProps) => {
const handleClose = () => {
if (activeStep === -1) {
onClose();
onClose?.();
return;
}
enqueueDialog({

35
packages/twenty-front/src/modules/spreadsheet-import/components/ModalWrapper.tsx → packages/twenty-front/src/modules/spreadsheet-import/components/SpreadSheetImportModalWrapper.tsx
View File

@ -3,8 +3,8 @@ import styled from '@emotion/styled';
import { useSpreadsheetImportInternal } from '@/spreadsheet-import/hooks/useSpreadsheetImportInternal';
import { Modal } from '@/ui/layout/modal/components/Modal';
import { ModalCloseButton } from './ModalCloseButton';
import { MOBILE_VIEWPORT } from 'twenty-ui/theme';
import { SpreadSheetImportModalCloseButton } from './SpreadSheetImportModalCloseButton';
const StyledModal = styled(Modal)`
height: 61%;
@ -27,29 +27,30 @@ const StyledRtlLtr = styled.div`
flex-direction: column;
`;
type ModalWrapperProps = {
type SpreadSheetImportModalWrapperProps = {
children: React.ReactNode;
isOpen: boolean;
onClose: () => void;
modalId: string;
onClose?: () => void;
};
export const ModalWrapper = ({
export const SpreadSheetImportModalWrapper = ({
modalId,
children,
isOpen,
onClose,
}: ModalWrapperProps) => {
}: SpreadSheetImportModalWrapperProps) => {
const { rtl } = useSpreadsheetImportInternal();
return (
<>
{isOpen && (
<StyledModal size="large">
<StyledRtlLtr dir={rtl ? 'rtl' : 'ltr'}>
<ModalCloseButton onClose={onClose} />
{children}
</StyledRtlLtr>
</StyledModal>
)}
</>
<StyledModal
size="large"
modalId={modalId}
isClosable={true}
onClose={onClose}
>
<StyledRtlLtr dir={rtl ? 'rtl' : 'ltr'}>
<SpreadSheetImportModalCloseButton onClose={onClose} />
{children}
</StyledRtlLtr>
</StyledModal>
);
};

1
packages/twenty-front/src/modules/spreadsheet-import/constants/SpreadsheetImportModalId.ts Normal file
View File

@ -0,0 +1 @@
export const SPREADSHEET_IMPORT_MODAL_ID = 'spreadsheet-import';

1
packages/twenty-front/src/modules/spreadsheet-import/hooks/__tests__/useSpreadsheetImport.test.tsx
View File

@ -17,7 +17,6 @@ type SpreadsheetKey = 'spreadsheet_key';
export const mockedSpreadsheetOptions: SpreadsheetImportDialogOptions<SpreadsheetKey> =
{
isOpen: true,
onClose: () => {},
fields: [],
uploadStepHook: async () => [],

6
packages/twenty-front/src/modules/spreadsheet-import/hooks/useOpenSpreadsheetImportDialog.ts
View File

@ -1,14 +1,18 @@
import { useSetRecoilState } from 'recoil';
import { SPREADSHEET_IMPORT_MODAL_ID } from '@/spreadsheet-import/constants/SpreadsheetImportModalId';
import { spreadsheetImportDialogState } from '@/spreadsheet-import/states/spreadsheetImportDialogState';
import { SpreadsheetImportDialogOptions } from '@/spreadsheet-import/types';
import { useModal } from '@/ui/layout/modal/hooks/useModal';
export const useOpenSpreadsheetImportDialog = <T extends string>() => {
const setSpreadSheetImport = useSetRecoilState(spreadsheetImportDialogState);
const { openModal } = useModal();
const openSpreadsheetImportDialog = (
options: Omit<SpreadsheetImportDialogOptions<T>, 'isOpen' | 'onClose'>,
) => {
openModal(SPREADSHEET_IMPORT_MODAL_ID);
setSpreadSheetImport({
isOpen: true,
options,

10
packages/twenty-front/src/modules/spreadsheet-import/provider/components/SpreadsheetImport.tsx
View File

@ -1,5 +1,6 @@
import { ModalWrapper } from '@/spreadsheet-import/components/ModalWrapper';
import { ReactSpreadsheetImportContextProvider } from '@/spreadsheet-import/components/ReactSpreadsheetImportContextProvider';
import { SpreadSheetImportModalWrapper } from '@/spreadsheet-import/components/SpreadSheetImportModalWrapper';
import { SPREADSHEET_IMPORT_MODAL_ID } from '@/spreadsheet-import/constants/SpreadsheetImportModalId';
import { SpreadsheetImportStepperContainer } from '@/spreadsheet-import/steps/components/SpreadsheetImportStepperContainer';
import { SpreadsheetImportDialogOptions as SpreadsheetImportProps } from '@/spreadsheet-import/types';
@ -31,9 +32,12 @@ export const SpreadsheetImport = <T extends string>(
return (
<ReactSpreadsheetImportContextProvider values={mergedProps}>
<ModalWrapper isOpen={mergedProps.isOpen} onClose={mergedProps.onClose}>
<SpreadSheetImportModalWrapper
modalId={SPREADSHEET_IMPORT_MODAL_ID}
onClose={mergedProps.onClose}
>
<SpreadsheetImportStepperContainer />
</ModalWrapper>
</SpreadSheetImportModalWrapper>
</ReactSpreadsheetImportContextProvider>
);
};

7
packages/twenty-front/src/modules/spreadsheet-import/provider/components/SpreadsheetImportProvider.tsx
View File

@ -3,7 +3,9 @@ import { useRecoilState, useSetRecoilState } from 'recoil';
import { spreadsheetImportDialogState } from '@/spreadsheet-import/states/spreadsheetImportDialogState';
import { SPREADSHEET_IMPORT_MODAL_ID } from '@/spreadsheet-import/constants/SpreadsheetImportModalId';
import { matchColumnsState } from '@/spreadsheet-import/steps/components/MatchColumnsStep/components/states/initialComputedColumnsState';
import { useModal } from '@/ui/layout/modal/hooks/useModal';
import { SpreadsheetImport } from './SpreadsheetImport';
type SpreadsheetImportProviderProps = React.PropsWithChildren;
@ -17,12 +19,16 @@ export const SpreadsheetImportProvider = (
const setMatchColumnsState = useSetRecoilState(matchColumnsState);
const { closeModal } = useModal();
const handleClose = () => {
setSpreadsheetImportDialog({
isOpen: false,
options: null,
});
closeModal(SPREADSHEET_IMPORT_MODAL_ID);
setMatchColumnsState([]);
};
@ -31,7 +37,6 @@ export const SpreadsheetImportProvider = (
{props.children}
{spreadsheetImportDialog.isOpen && spreadsheetImportDialog.options && (
<SpreadsheetImport
isOpen={true}
onClose={handleClose}
// eslint-disable-next-line react/jsx-props-no-spreading
{...spreadsheetImportDialog.options}

9
packages/twenty-front/src/modules/spreadsheet-import/steps/components/__stories__/MatchColumns.stories.tsx
View File

@ -1,8 +1,8 @@
import { Meta } from '@storybook/react';
import { mockRsiValues } from '@/spreadsheet-import/__mocks__/mockRsiValues';
import { ModalWrapper } from '@/spreadsheet-import/components/ModalWrapper';
import { ReactSpreadsheetImportContextProvider } from '@/spreadsheet-import/components/ReactSpreadsheetImportContextProvider';
import { SpreadSheetImportModalWrapper } from '@/spreadsheet-import/components/SpreadSheetImportModalWrapper';
import { MatchColumnsStep } from '@/spreadsheet-import/steps/components/MatchColumnsStep/MatchColumnsStep';
import { SpreadsheetImportStep } from '@/spreadsheet-import/steps/types/SpreadsheetImportStep';
import { DialogManagerScope } from '@/ui/feedback/dialog-manager/scopes/DialogManagerScope';
@ -64,7 +64,10 @@ const mockData = [
export const Default = () => (
<DialogManagerScope dialogManagerScopeId="dialog-manager">
<ReactSpreadsheetImportContextProvider values={mockRsiValues}>
<ModalWrapper isOpen={true} onClose={() => null}>
<SpreadSheetImportModalWrapper
modalId="match-columns-step"
onClose={() => null}
>
<MatchColumnsStep
headerValues={mockData[0] as string[]}
data={mockData.slice(1)}
@ -75,7 +78,7 @@ export const Default = () => (
nextStep={() => null}
onError={() => null}
/>
</ModalWrapper>
</SpreadSheetImportModalWrapper>
</ReactSpreadsheetImportContextProvider>
</DialogManagerScope>
);

27
packages/twenty-front/src/modules/spreadsheet-import/steps/components/__stories__/SelectHeader.stories.tsx
View File

@ -4,11 +4,13 @@ import {
headerSelectionTableFields,
mockRsiValues,
} from '@/spreadsheet-import/__mocks__/mockRsiValues';
import { ModalWrapper } from '@/spreadsheet-import/components/ModalWrapper';
import { ReactSpreadsheetImportContextProvider } from '@/spreadsheet-import/components/ReactSpreadsheetImportContextProvider';
import { SpreadSheetImportModalWrapper } from '@/spreadsheet-import/components/SpreadSheetImportModalWrapper';
import { SelectHeaderStep } from '@/spreadsheet-import/steps/components/SelectHeaderStep/SelectHeaderStep';
import { SpreadsheetImportStepType } from '@/spreadsheet-import/steps/types/SpreadsheetImportStepType';
import { DialogManagerScope } from '@/ui/feedback/dialog-manager/scopes/DialogManagerScope';
import { isModalOpenedComponentState } from '@/ui/layout/modal/states/isModalOpenedComponentState';
import { RecoilRoot } from 'recoil';
import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator';
const meta: Meta<typeof SelectHeaderStep> = {
@ -17,15 +19,30 @@ const meta: Meta<typeof SelectHeaderStep> = {
parameters: {
layout: 'fullscreen',
},
decorators: [I18nFrontDecorator],
decorators: [
(Story) => (
<RecoilRoot
initializeState={({ set }) => {
set(
isModalOpenedComponentState.atomFamily({
instanceId: 'select-header-step',
}),
true,
);
}}
>
<Story />
</RecoilRoot>
),
I18nFrontDecorator,
],
};
export default meta;
export const Default = () => (
<DialogManagerScope dialogManagerScopeId="dialog-manager">
<ReactSpreadsheetImportContextProvider values={mockRsiValues}>
<ModalWrapper isOpen={true} onClose={() => null}>
<SpreadSheetImportModalWrapper modalId="select-header-step">
<SelectHeaderStep
importedRows={headerSelectionTableFields}
setCurrentStepState={() => null}
@ -38,7 +55,7 @@ export const Default = () => (
data: headerSelectionTableFields,
}}
/>
</ModalWrapper>
</SpreadSheetImportModalWrapper>
</ReactSpreadsheetImportContextProvider>
</DialogManagerScope>
);

29
packages/twenty-front/src/modules/spreadsheet-import/steps/components/__stories__/SelectSheet.stories.tsx
View File

@ -1,11 +1,13 @@
import { Meta } from '@storybook/react';
import { mockRsiValues } from '@/spreadsheet-import/__mocks__/mockRsiValues';
import { ModalWrapper } from '@/spreadsheet-import/components/ModalWrapper';
import { ReactSpreadsheetImportContextProvider } from '@/spreadsheet-import/components/ReactSpreadsheetImportContextProvider';
import { SpreadSheetImportModalWrapper } from '@/spreadsheet-import/components/SpreadSheetImportModalWrapper';
import { SelectSheetStep } from '@/spreadsheet-import/steps/components/SelectSheetStep/SelectSheetStep';
import { SpreadsheetImportStepType } from '@/spreadsheet-import/steps/types/SpreadsheetImportStepType';
import { DialogManagerScope } from '@/ui/feedback/dialog-manager/scopes/DialogManagerScope';
import { isModalOpenedComponentState } from '@/ui/layout/modal/states/isModalOpenedComponentState';
import { RecoilRoot } from 'recoil';
import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator';
const meta: Meta<typeof SelectSheetStep> = {
@ -14,7 +16,23 @@ const meta: Meta<typeof SelectSheetStep> = {
parameters: {
layout: 'fullscreen',
},
decorators: [I18nFrontDecorator],
decorators: [
(Story) => (
<RecoilRoot
initializeState={({ set }) => {
set(
isModalOpenedComponentState.atomFamily({
instanceId: 'select-sheet-step',
}),
true,
);
}}
>
<Story />
</RecoilRoot>
),
I18nFrontDecorator,
],
};
export default meta;
@ -24,7 +42,10 @@ const sheetNames = ['Sheet1', 'Sheet2', 'Sheet3'];
export const Default = () => (
<DialogManagerScope dialogManagerScopeId="dialog-manager">
<ReactSpreadsheetImportContextProvider values={mockRsiValues}>
<ModalWrapper isOpen={true} onClose={() => null}>
<SpreadSheetImportModalWrapper
modalId="select-sheet-step"
onClose={() => null}
>
<SelectSheetStep
sheetNames={sheetNames}
setCurrentStepState={() => {}}
@ -55,7 +76,7 @@ export const Default = () => (
onError={() => null}
onBack={() => Promise.resolve()}
/>
</ModalWrapper>
</SpreadSheetImportModalWrapper>
</ReactSpreadsheetImportContextProvider>
</DialogManagerScope>
);

27
packages/twenty-front/src/modules/spreadsheet-import/steps/components/__stories__/Upload.stories.tsx
View File

@ -1,11 +1,13 @@
import { Meta } from '@storybook/react';
import { mockRsiValues } from '@/spreadsheet-import/__mocks__/mockRsiValues';
import { ModalWrapper } from '@/spreadsheet-import/components/ModalWrapper';
import { ReactSpreadsheetImportContextProvider } from '@/spreadsheet-import/components/ReactSpreadsheetImportContextProvider';
import { SpreadSheetImportModalWrapper } from '@/spreadsheet-import/components/SpreadSheetImportModalWrapper';
import { UploadStep } from '@/spreadsheet-import/steps/components/UploadStep/UploadStep';
import { SpreadsheetImportStepType } from '@/spreadsheet-import/steps/types/SpreadsheetImportStepType';
import { DialogManagerScope } from '@/ui/feedback/dialog-manager/scopes/DialogManagerScope';
import { isModalOpenedComponentState } from '@/ui/layout/modal/states/isModalOpenedComponentState';
import { RecoilRoot } from 'recoil';
import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator';
import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
@ -15,7 +17,24 @@ const meta: Meta<typeof UploadStep> = {
parameters: {
layout: 'fullscreen',
},
decorators: [SnackBarDecorator, I18nFrontDecorator],
decorators: [
(Story) => (
<RecoilRoot
initializeState={({ set }) => {
set(
isModalOpenedComponentState.atomFamily({
instanceId: 'upload-step',
}),
true,
);
}}
>
<Story />
</RecoilRoot>
),
SnackBarDecorator,
I18nFrontDecorator,
],
};
export default meta;
@ -23,7 +42,7 @@ export default meta;
export const Default = () => (
<DialogManagerScope dialogManagerScopeId="dialog-manager">
<ReactSpreadsheetImportContextProvider values={mockRsiValues}>
<ModalWrapper isOpen={true} onClose={() => null}>
<SpreadSheetImportModalWrapper modalId="upload-step" onClose={() => null}>
<UploadStep
setUploadedFile={() => null}
setCurrentStepState={() => null}
@ -32,7 +51,7 @@ export const Default = () => (
setPreviousStepState={() => null}
currentStepState={{ type: SpreadsheetImportStepType.upload }}
/>
</ModalWrapper>
</SpreadSheetImportModalWrapper>
</ReactSpreadsheetImportContextProvider>
</DialogManagerScope>
);

30
packages/twenty-front/src/modules/spreadsheet-import/steps/components/__stories__/Validation.stories.tsx
View File

@ -5,18 +5,37 @@ import {
importedColums,
mockRsiValues,
} from '@/spreadsheet-import/__mocks__/mockRsiValues';
import { ModalWrapper } from '@/spreadsheet-import/components/ModalWrapper';
import { ReactSpreadsheetImportContextProvider } from '@/spreadsheet-import/components/ReactSpreadsheetImportContextProvider';
import { SpreadSheetImportModalWrapper } from '@/spreadsheet-import/components/SpreadSheetImportModalWrapper';
import { ValidationStep } from '@/spreadsheet-import/steps/components/ValidationStep/ValidationStep';
import { DialogManagerScope } from '@/ui/feedback/dialog-manager/scopes/DialogManagerScope';
import { isModalOpenedComponentState } from '@/ui/layout/modal/states/isModalOpenedComponentState';
import { RecoilRoot } from 'recoil';
import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator';
const meta: Meta<typeof ValidationStep> = {
title: 'Modules/SpreadsheetImport/ValidationStep',
component: ValidationStep,
parameters: {
layout: 'fullscreen',
},
decorators: [I18nFrontDecorator],
decorators: [
(Story) => (
<RecoilRoot
initializeState={({ set }) => {
set(
isModalOpenedComponentState.atomFamily({
instanceId: 'validation-step',
}),
true,
);
}}
>
<Story />
</RecoilRoot>
),
I18nFrontDecorator,
],
};
export default meta;
@ -26,7 +45,10 @@ const file = new File([''], 'file.csv');
export const Default = () => (
<DialogManagerScope dialogManagerScopeId="dialog-manager">
<ReactSpreadsheetImportContextProvider values={mockRsiValues}>
<ModalWrapper isOpen={true} onClose={() => null}>
<SpreadSheetImportModalWrapper
modalId="validation-step"
onClose={() => null}
>
<ValidationStep
initialData={editableTableInitialData}
file={file}
@ -34,7 +56,7 @@ export const Default = () => (
onBack={() => Promise.resolve()}
setCurrentStepState={() => null}
/>
</ModalWrapper>
</SpreadSheetImportModalWrapper>
</ReactSpreadsheetImportContextProvider>
</DialogManagerScope>
);

2
packages/twenty-front/src/modules/spreadsheet-import/types/SpreadsheetImportDialogOptions.ts
View File

@ -9,8 +9,6 @@ import { SpreadsheetImportTableHook } from '@/spreadsheet-import/types/Spreadshe
import { SpreadsheetImportStep } from '../steps/types/SpreadsheetImportStep';
export type SpreadsheetImportDialogOptions<FieldNames extends string> = {
// Is modal visible.
isOpen: boolean;
// callback when RSI is closed before final submit
onClose: () => void;
// Field description for requested data