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/spreadsheet-import/steps/components/stories/MatchColumns.stories.tsx
+++ b/packages/twenty-front/src/modules/spreadsheet-import/steps/components/stories/MatchColumns.stories.tsx
@ -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>
 );
--- a/packages/twenty-front/src/modules/spreadsheet-import/steps/components/stories/SelectHeader.stories.tsx
+++ b/packages/twenty-front/src/modules/spreadsheet-import/steps/components/stories/SelectHeader.stories.tsx
@ -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>
 );
--- a/packages/twenty-front/src/modules/spreadsheet-import/steps/components/stories/SelectSheet.stories.tsx
+++ b/packages/twenty-front/src/modules/spreadsheet-import/steps/components/stories/SelectSheet.stories.tsx
@ -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>
 );
--- a/packages/twenty-front/src/modules/spreadsheet-import/steps/components/stories/Upload.stories.tsx
+++ b/packages/twenty-front/src/modules/spreadsheet-import/steps/components/stories/Upload.stories.tsx
@ -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>
 );
--- a/packages/twenty-front/src/modules/spreadsheet-import/steps/components/stories/Validation.stories.tsx
+++ b/packages/twenty-front/src/modules/spreadsheet-import/steps/components/stories/Validation.stories.tsx
@ -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>
 );