From 6554947671ce4f91c9f271271791d85e66f5c990 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rapha=C3=ABl=20Bosi?= <71827178+bosiraphael@users.noreply.github.com> Date: Fri, 16 May 2025 17:04:22 +0200 Subject: [PATCH] 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/locales/af-ZA.po | 8 +- packages/twenty-front/src/locales/ar-SA.po | 8 +- packages/twenty-front/src/locales/ca-ES.po | 8 +- packages/twenty-front/src/locales/cs-CZ.po | 8 +- packages/twenty-front/src/locales/da-DK.po | 8 +- packages/twenty-front/src/locales/de-DE.po | 8 +- packages/twenty-front/src/locales/el-GR.po | 8 +- packages/twenty-front/src/locales/en.po | 8 +- packages/twenty-front/src/locales/es-ES.po | 8 +- packages/twenty-front/src/locales/fi-FI.po | 8 +- packages/twenty-front/src/locales/fr-FR.po | 8 +- packages/twenty-front/src/locales/he-IL.po | 8 +- packages/twenty-front/src/locales/hu-HU.po | 8 +- packages/twenty-front/src/locales/it-IT.po | 8 +- packages/twenty-front/src/locales/ja-JP.po | 8 +- packages/twenty-front/src/locales/ko-KR.po | 8 +- packages/twenty-front/src/locales/nl-NL.po | 8 +- packages/twenty-front/src/locales/no-NO.po | 8 +- packages/twenty-front/src/locales/pl-PL.po | 8 +- .../twenty-front/src/locales/pseudo-en.po | 8 +- packages/twenty-front/src/locales/pt-BR.po | 8 +- packages/twenty-front/src/locales/pt-PT.po | 8 +- packages/twenty-front/src/locales/ro-RO.po | 8 +- packages/twenty-front/src/locales/ru-RU.po | Bin 216787 -> 216855 bytes packages/twenty-front/src/locales/sr-Cyrl.po | 8 +- packages/twenty-front/src/locales/sv-SE.po | 8 +- packages/twenty-front/src/locales/tr-TR.po | 8 +- packages/twenty-front/src/locales/uk-UA.po | 8 +- packages/twenty-front/src/locales/vi-VN.po | 8 +- packages/twenty-front/src/locales/zh-CN.po | 8 +- packages/twenty-front/src/locales/zh-TW.po | 8 +- .../actions/components/ActionModal.tsx | 29 ++- .../__stories__/Calendar.stories.tsx | 4 +- .../files/components/AttachmentList.tsx | 19 +- .../EventCardCalendarEvent.stories.tsx | 4 +- .../src/modules/auth/components/AuthModal.tsx | 15 +- .../auth/components/AuthModalMountEffect.tsx | 14 ++ .../src/modules/auth/constants/AuthModalId.ts | 1 + .../EmailVerificationSent.stories.tsx | 6 +- .../CurrentWorkspaceMemberFavorites.tsx | 41 ++-- ...riteFolderNavigationDrawerItemDropdown.tsx | 4 +- .../constants/FavoriteFolderDeleteModalId.ts | 1 + .../record-board/components/RecordBoard.tsx | 13 +- .../RecordGroupReorderConfirmationModal.tsx | 15 +- .../RecordGroupReorderConfirmationModalId.ts | 2 + .../useRecordGroupReorderConfirmationModal.ts | 10 +- ...oupReorderConfirmationModalVisibleState.ts | 6 - .../components/RecordIndexBoardContainer.tsx | 12 +- .../RecordIndexRemoveSortingModal.tsx | 23 +-- .../components/RecordIndexTableContainer.tsx | 12 +- .../RecordIndexRemoveSortingModalId.ts | 2 + .../RecordDetailRelationRecordsListItem.tsx | 14 +- ...RecordTableBodyDragDropContextProvider.tsx | 15 +- ...BodyRecordGroupDragDropContextProvider.tsx | 15 +- .../states/isRemoveSortingModalOpenState.ts | 5 - .../SettingsAccountsRowDropdownMenu.tsx | 14 +- .../profile/components/DeleteAccount.tsx | 15 +- .../profile/components/DeleteWorkspace.tsx | 17 +- .../components/SettingsRoleAssignment.tsx | 37 ++-- ...ettingsRoleAssignmentConfirmationModal.tsx | 7 +- .../RoleAssignmentConfirmationModalId.ts | 2 + .../SettingsServerlessFunctionSettingsTab.tsx | 20 +- .../__mocks__/mockRsiValues.ts | 5 +- ... => SpreadSheetImportModalCloseButton.tsx} | 10 +- ....tsx => SpreadSheetImportModalWrapper.tsx} | 35 ++-- .../constants/SpreadsheetImportModalId.ts | 1 + .../__tests__/useSpreadsheetImport.test.tsx | 1 - .../hooks/useOpenSpreadsheetImportDialog.ts | 6 +- .../provider/components/SpreadsheetImport.tsx | 10 +- .../components/SpreadsheetImportProvider.tsx | 7 +- .../__stories__/MatchColumns.stories.tsx | 9 +- .../__stories__/SelectHeader.stories.tsx | 27 ++- .../__stories__/SelectSheet.stories.tsx | 29 ++- .../components/__stories__/Upload.stories.tsx | 27 ++- .../__stories__/Validation.stories.tsx | 30 ++- .../types/SpreadsheetImportDialogOptions.ts | 2 - .../modal/components/ConfirmationModal.tsx | 127 ++++++------ .../ui/layout/modal/components/Modal.tsx | 140 ++++++-------- .../ModalHotkeysAndClickOutsideEffect.tsx | 54 ++++++ .../__stories__/ConfirmationModal.stories.tsx | 159 ++++++++++++++- .../components/__stories__/Modal.stories.tsx | 98 +++++++++- .../components/types/ModalHotkeyScope.ts | 2 +- .../contexts/ModalComponentInstanceContext.ts | 3 + .../modal/hooks/__tests__/useModal.spec.ts | 181 ++++++++++++++++++ .../ui/layout/modal/hooks/useModal.tsx | 93 +++++++++ .../states/isModalOpenedComponentState.ts | 8 + ...OverrideWorkflowDraftConfirmationModal.tsx | 16 +- .../src/pages/settings/SettingsBilling.tsx | 15 +- .../settings/SettingsWorkspaceMembers.tsx | 27 +-- .../SettingsAdminConfigVariableDetails.tsx | 16 +- .../SettingsDevelopersApiKeyDetail.tsx | 24 +-- .../SettingsDevelopersWebhookDetail.tsx | 18 +- .../settings/workspace/SettingsDomain.tsx | 15 +- .../src/testing/decorators/RootDecorator.tsx | 2 +- 94 files changed, 1268 insertions(+), 563 deletions(-) create mode 100644 packages/twenty-front/src/modules/auth/components/AuthModalMountEffect.tsx create mode 100644 packages/twenty-front/src/modules/auth/constants/AuthModalId.ts create mode 100644 packages/twenty-front/src/modules/favorites/constants/FavoriteFolderDeleteModalId.ts create mode 100644 packages/twenty-front/src/modules/object-record/record-group/constants/RecordGroupReorderConfirmationModalId.ts delete mode 100644 packages/twenty-front/src/modules/object-record/record-group/states/isRecordGroupReorderConfirmationModalVisibleState.ts create mode 100644 packages/twenty-front/src/modules/object-record/record-index/constants/RecordIndexRemoveSortingModalId.ts delete mode 100644 packages/twenty-front/src/modules/object-record/record-table/states/isRemoveSortingModalOpenState.ts create mode 100644 packages/twenty-front/src/modules/settings/roles/role-assignment/constants/RoleAssignmentConfirmationModalId.ts rename packages/twenty-front/src/modules/spreadsheet-import/components/{ModalCloseButton.tsx => SpreadSheetImportModalCloseButton.tsx} (88%) rename packages/twenty-front/src/modules/spreadsheet-import/components/{ModalWrapper.tsx => SpreadSheetImportModalWrapper.tsx} (56%) create mode 100644 packages/twenty-front/src/modules/spreadsheet-import/constants/SpreadsheetImportModalId.ts create mode 100644 packages/twenty-front/src/modules/ui/layout/modal/components/ModalHotkeysAndClickOutsideEffect.tsx create mode 100644 packages/twenty-front/src/modules/ui/layout/modal/contexts/ModalComponentInstanceContext.ts create mode 100644 packages/twenty-front/src/modules/ui/layout/modal/hooks/__tests__/useModal.spec.ts create mode 100644 packages/twenty-front/src/modules/ui/layout/modal/hooks/useModal.tsx create mode 100644 packages/twenty-front/src/modules/ui/layout/modal/states/isModalOpenedComponentState.ts diff --git a/packages/twenty-front/src/locales/af-ZA.po b/packages/twenty-front/src/locales/af-ZA.po index 623127dde..2f4f0a364 100644 --- a/packages/twenty-front/src/locales/af-ZA.po +++ b/packages/twenty-front/src/locales/af-ZA.po @@ -617,7 +617,7 @@ msgid "Are you sure you want to delete this record? It can be recovered from the msgstr "Is jy seker jy wil hierdie rekord uitvee? Dit kan herstel word vanaf die Command menu." #. js-lingui-id: rnCqBK -#: src/modules/spreadsheet-import/components/ModalCloseButton.tsx +#: src/modules/spreadsheet-import/components/SpreadSheetImportModalCloseButton.tsx msgid "Are you sure? Your current information will not be saved." msgstr "" @@ -798,7 +798,7 @@ msgstr "Kan nie API-name vir standaardobjekte verander nie" #: src/modules/ui/feedback/snack-bar-manager/components/SnackBar.tsx #: src/modules/spreadsheet-import/steps/components/ValidationStep/ValidationStep.tsx #: src/modules/spreadsheet-import/steps/components/MatchColumnsStep/MatchColumnsStep.tsx -#: src/modules/spreadsheet-import/components/ModalCloseButton.tsx +#: src/modules/spreadsheet-import/components/SpreadSheetImportModalCloseButton.tsx #: src/modules/settings/components/SaveAndCancelButtons/CancelButton.tsx msgid "Cancel" msgstr "Kanselleer" @@ -2036,7 +2036,7 @@ msgid "Existing objects" msgstr "Bestaande voorwerpe" #. js-lingui-id: ydzS9x -#: src/modules/spreadsheet-import/components/ModalCloseButton.tsx +#: src/modules/spreadsheet-import/components/SpreadSheetImportModalCloseButton.tsx msgid "Exit" msgstr "" @@ -2046,7 +2046,7 @@ msgstr "" #~ msgstr "Verlaat Volskerm" #. js-lingui-id: XB4onr -#: src/modules/spreadsheet-import/components/ModalCloseButton.tsx +#: src/modules/spreadsheet-import/components/SpreadSheetImportModalCloseButton.tsx msgid "Exit import flow" msgstr "" diff --git a/packages/twenty-front/src/locales/ar-SA.po b/packages/twenty-front/src/locales/ar-SA.po index f7388b7e9..6cba6bc5d 100644 --- a/packages/twenty-front/src/locales/ar-SA.po +++ b/packages/twenty-front/src/locales/ar-SA.po @@ -617,7 +617,7 @@ msgid "Are you sure you want to delete this record? It can be recovered from the msgstr "هل أنت متأكد أنك تريد حذف هذا السجل؟ يمكن استرجاعه من قائمة الأوامر." #. js-lingui-id: rnCqBK -#: src/modules/spreadsheet-import/components/ModalCloseButton.tsx +#: src/modules/spreadsheet-import/components/SpreadSheetImportModalCloseButton.tsx msgid "Are you sure? Your current information will not be saved." msgstr "" @@ -798,7 +798,7 @@ msgstr "لا يمكن تغيير أسماء API للكائنات القياسي #: src/modules/ui/feedback/snack-bar-manager/components/SnackBar.tsx #: src/modules/spreadsheet-import/steps/components/ValidationStep/ValidationStep.tsx #: src/modules/spreadsheet-import/steps/components/MatchColumnsStep/MatchColumnsStep.tsx -#: src/modules/spreadsheet-import/components/ModalCloseButton.tsx +#: src/modules/spreadsheet-import/components/SpreadSheetImportModalCloseButton.tsx #: src/modules/settings/components/SaveAndCancelButtons/CancelButton.tsx msgid "Cancel" msgstr "إلغاء" @@ -2036,7 +2036,7 @@ msgid "Existing objects" msgstr "الكائنات الحالية" #. js-lingui-id: ydzS9x -#: src/modules/spreadsheet-import/components/ModalCloseButton.tsx +#: src/modules/spreadsheet-import/components/SpreadSheetImportModalCloseButton.tsx msgid "Exit" msgstr "" @@ -2046,7 +2046,7 @@ msgstr "" #~ msgstr "خروج من وضع ملء الشاشة" #. js-lingui-id: XB4onr -#: src/modules/spreadsheet-import/components/ModalCloseButton.tsx +#: src/modules/spreadsheet-import/components/SpreadSheetImportModalCloseButton.tsx msgid "Exit import flow" msgstr "" diff --git a/packages/twenty-front/src/locales/ca-ES.po b/packages/twenty-front/src/locales/ca-ES.po index 6a67ce0d8..8021713e4 100644 --- a/packages/twenty-front/src/locales/ca-ES.po +++ b/packages/twenty-front/src/locales/ca-ES.po @@ -617,7 +617,7 @@ msgid "Are you sure you want to delete this record? It can be recovered from the msgstr "Esteu segur que voleu suprimir aquest registre? Es pot recuperar des del menú d'ordres." #. js-lingui-id: rnCqBK -#: src/modules/spreadsheet-import/components/ModalCloseButton.tsx +#: src/modules/spreadsheet-import/components/SpreadSheetImportModalCloseButton.tsx msgid "Are you sure? Your current information will not be saved." msgstr "" @@ -798,7 +798,7 @@ msgstr "No es poden canviar els noms de les API per a objectes estàndard" #: src/modules/ui/feedback/snack-bar-manager/components/SnackBar.tsx #: src/modules/spreadsheet-import/steps/components/ValidationStep/ValidationStep.tsx #: src/modules/spreadsheet-import/steps/components/MatchColumnsStep/MatchColumnsStep.tsx -#: src/modules/spreadsheet-import/components/ModalCloseButton.tsx +#: src/modules/spreadsheet-import/components/SpreadSheetImportModalCloseButton.tsx #: src/modules/settings/components/SaveAndCancelButtons/CancelButton.tsx msgid "Cancel" msgstr "Cancel·la" @@ -2036,7 +2036,7 @@ msgid "Existing objects" msgstr "Objectes existents" #. js-lingui-id: ydzS9x -#: src/modules/spreadsheet-import/components/ModalCloseButton.tsx +#: src/modules/spreadsheet-import/components/SpreadSheetImportModalCloseButton.tsx msgid "Exit" msgstr "" @@ -2046,7 +2046,7 @@ msgstr "" #~ msgstr "Sortir de la pantalla completa" #. js-lingui-id: XB4onr -#: src/modules/spreadsheet-import/components/ModalCloseButton.tsx +#: src/modules/spreadsheet-import/components/SpreadSheetImportModalCloseButton.tsx msgid "Exit import flow" msgstr "" diff --git a/packages/twenty-front/src/locales/cs-CZ.po b/packages/twenty-front/src/locales/cs-CZ.po index e559b1eec..2e8d02edf 100644 --- a/packages/twenty-front/src/locales/cs-CZ.po +++ b/packages/twenty-front/src/locales/cs-CZ.po @@ -617,7 +617,7 @@ msgid "Are you sure you want to delete this record? It can be recovered from the msgstr "Jste si jisti, že chcete odstranit tento záznam? Lze jej obnovit z menu Příkazy." #. js-lingui-id: rnCqBK -#: src/modules/spreadsheet-import/components/ModalCloseButton.tsx +#: src/modules/spreadsheet-import/components/SpreadSheetImportModalCloseButton.tsx msgid "Are you sure? Your current information will not be saved." msgstr "" @@ -798,7 +798,7 @@ msgstr "Nelze změnit názvy API pro standardní objekty" #: src/modules/ui/feedback/snack-bar-manager/components/SnackBar.tsx #: src/modules/spreadsheet-import/steps/components/ValidationStep/ValidationStep.tsx #: src/modules/spreadsheet-import/steps/components/MatchColumnsStep/MatchColumnsStep.tsx -#: src/modules/spreadsheet-import/components/ModalCloseButton.tsx +#: src/modules/spreadsheet-import/components/SpreadSheetImportModalCloseButton.tsx #: src/modules/settings/components/SaveAndCancelButtons/CancelButton.tsx msgid "Cancel" msgstr "Storno" @@ -2036,7 +2036,7 @@ msgid "Existing objects" msgstr "Stávající objekty" #. js-lingui-id: ydzS9x -#: src/modules/spreadsheet-import/components/ModalCloseButton.tsx +#: src/modules/spreadsheet-import/components/SpreadSheetImportModalCloseButton.tsx msgid "Exit" msgstr "" @@ -2046,7 +2046,7 @@ msgstr "" #~ msgstr "Ukončit režim celé obrazovky" #. js-lingui-id: XB4onr -#: src/modules/spreadsheet-import/components/ModalCloseButton.tsx +#: src/modules/spreadsheet-import/components/SpreadSheetImportModalCloseButton.tsx msgid "Exit import flow" msgstr "" diff --git a/packages/twenty-front/src/locales/da-DK.po b/packages/twenty-front/src/locales/da-DK.po index a2ae0f2c8..8ddc0ae6b 100644 --- a/packages/twenty-front/src/locales/da-DK.po +++ b/packages/twenty-front/src/locales/da-DK.po @@ -617,7 +617,7 @@ msgid "Are you sure you want to delete this record? It can be recovered from the msgstr "Er du sikker på, at du vil slette denne post? Den kan gendannes fra Kommandomenuen." #. js-lingui-id: rnCqBK -#: src/modules/spreadsheet-import/components/ModalCloseButton.tsx +#: src/modules/spreadsheet-import/components/SpreadSheetImportModalCloseButton.tsx msgid "Are you sure? Your current information will not be saved." msgstr "" @@ -798,7 +798,7 @@ msgstr "Kan ikke ændre API-navne for standardobjekter" #: src/modules/ui/feedback/snack-bar-manager/components/SnackBar.tsx #: src/modules/spreadsheet-import/steps/components/ValidationStep/ValidationStep.tsx #: src/modules/spreadsheet-import/steps/components/MatchColumnsStep/MatchColumnsStep.tsx -#: src/modules/spreadsheet-import/components/ModalCloseButton.tsx +#: src/modules/spreadsheet-import/components/SpreadSheetImportModalCloseButton.tsx #: src/modules/settings/components/SaveAndCancelButtons/CancelButton.tsx msgid "Cancel" msgstr "Annuller" @@ -2036,7 +2036,7 @@ msgid "Existing objects" msgstr "Eksisterende objekter" #. js-lingui-id: ydzS9x -#: src/modules/spreadsheet-import/components/ModalCloseButton.tsx +#: src/modules/spreadsheet-import/components/SpreadSheetImportModalCloseButton.tsx msgid "Exit" msgstr "" @@ -2046,7 +2046,7 @@ msgstr "" #~ msgstr "Afslut fuld skærm" #. js-lingui-id: XB4onr -#: src/modules/spreadsheet-import/components/ModalCloseButton.tsx +#: src/modules/spreadsheet-import/components/SpreadSheetImportModalCloseButton.tsx msgid "Exit import flow" msgstr "" diff --git a/packages/twenty-front/src/locales/de-DE.po b/packages/twenty-front/src/locales/de-DE.po index 2381b639f..65037554e 100644 --- a/packages/twenty-front/src/locales/de-DE.po +++ b/packages/twenty-front/src/locales/de-DE.po @@ -617,7 +617,7 @@ msgid "Are you sure you want to delete this record? It can be recovered from the msgstr "Sind Sie sicher, dass Sie diesen Datensatz löschen möchten? Er kann aus dem Befehlsmenü wiederhergestellt werden." #. js-lingui-id: rnCqBK -#: src/modules/spreadsheet-import/components/ModalCloseButton.tsx +#: src/modules/spreadsheet-import/components/SpreadSheetImportModalCloseButton.tsx msgid "Are you sure? Your current information will not be saved." msgstr "" @@ -798,7 +798,7 @@ msgstr "API-Namen für Standardobjekte können nicht geändert werden" #: src/modules/ui/feedback/snack-bar-manager/components/SnackBar.tsx #: src/modules/spreadsheet-import/steps/components/ValidationStep/ValidationStep.tsx #: src/modules/spreadsheet-import/steps/components/MatchColumnsStep/MatchColumnsStep.tsx -#: src/modules/spreadsheet-import/components/ModalCloseButton.tsx +#: src/modules/spreadsheet-import/components/SpreadSheetImportModalCloseButton.tsx #: src/modules/settings/components/SaveAndCancelButtons/CancelButton.tsx msgid "Cancel" msgstr "Abbrechen" @@ -2036,7 +2036,7 @@ msgid "Existing objects" msgstr "Vorhandene Objekte" #. js-lingui-id: ydzS9x -#: src/modules/spreadsheet-import/components/ModalCloseButton.tsx +#: src/modules/spreadsheet-import/components/SpreadSheetImportModalCloseButton.tsx msgid "Exit" msgstr "" @@ -2046,7 +2046,7 @@ msgstr "" #~ msgstr "Vollbildmodus beenden" #. js-lingui-id: XB4onr -#: src/modules/spreadsheet-import/components/ModalCloseButton.tsx +#: src/modules/spreadsheet-import/components/SpreadSheetImportModalCloseButton.tsx msgid "Exit import flow" msgstr "" diff --git a/packages/twenty-front/src/locales/el-GR.po b/packages/twenty-front/src/locales/el-GR.po index 14feb16cc..fd1104614 100644 --- a/packages/twenty-front/src/locales/el-GR.po +++ b/packages/twenty-front/src/locales/el-GR.po @@ -617,7 +617,7 @@ msgid "Are you sure you want to delete this record? It can be recovered from the msgstr "Είστε βέβαιοι ότι θέλετε να διαγράψετε αυτήν την εγγραφή; Μπορεί να αποκατασταθεί από το μενού Εντολών." #. js-lingui-id: rnCqBK -#: src/modules/spreadsheet-import/components/ModalCloseButton.tsx +#: src/modules/spreadsheet-import/components/SpreadSheetImportModalCloseButton.tsx msgid "Are you sure? Your current information will not be saved." msgstr "" @@ -798,7 +798,7 @@ msgstr "Δεν είναι δυνατή η αλλαγή των ονομάτων A #: src/modules/ui/feedback/snack-bar-manager/components/SnackBar.tsx #: src/modules/spreadsheet-import/steps/components/ValidationStep/ValidationStep.tsx #: src/modules/spreadsheet-import/steps/components/MatchColumnsStep/MatchColumnsStep.tsx -#: src/modules/spreadsheet-import/components/ModalCloseButton.tsx +#: src/modules/spreadsheet-import/components/SpreadSheetImportModalCloseButton.tsx #: src/modules/settings/components/SaveAndCancelButtons/CancelButton.tsx msgid "Cancel" msgstr "Ακύρωση" @@ -2036,7 +2036,7 @@ msgid "Existing objects" msgstr "Υπάρχοντα αντικείμενα" #. js-lingui-id: ydzS9x -#: src/modules/spreadsheet-import/components/ModalCloseButton.tsx +#: src/modules/spreadsheet-import/components/SpreadSheetImportModalCloseButton.tsx msgid "Exit" msgstr "" @@ -2046,7 +2046,7 @@ msgstr "" #~ msgstr "Έξοδος από την Πλήρη Οθόνη" #. js-lingui-id: XB4onr -#: src/modules/spreadsheet-import/components/ModalCloseButton.tsx +#: src/modules/spreadsheet-import/components/SpreadSheetImportModalCloseButton.tsx msgid "Exit import flow" msgstr "" diff --git a/packages/twenty-front/src/locales/en.po b/packages/twenty-front/src/locales/en.po index 962882f12..512570224 100644 --- a/packages/twenty-front/src/locales/en.po +++ b/packages/twenty-front/src/locales/en.po @@ -612,7 +612,7 @@ msgid "Are you sure you want to delete this record? It can be recovered from the msgstr "Are you sure you want to delete this record? It can be recovered from the Command menu." #. js-lingui-id: rnCqBK -#: src/modules/spreadsheet-import/components/ModalCloseButton.tsx +#: src/modules/spreadsheet-import/components/SpreadSheetImportModalCloseButton.tsx msgid "Are you sure? Your current information will not be saved." msgstr "Are you sure? Your current information will not be saved." @@ -793,7 +793,7 @@ msgstr "Can't change API names for standard objects" #: src/modules/ui/feedback/snack-bar-manager/components/SnackBar.tsx #: src/modules/spreadsheet-import/steps/components/ValidationStep/ValidationStep.tsx #: src/modules/spreadsheet-import/steps/components/MatchColumnsStep/MatchColumnsStep.tsx -#: src/modules/spreadsheet-import/components/ModalCloseButton.tsx +#: src/modules/spreadsheet-import/components/SpreadSheetImportModalCloseButton.tsx #: src/modules/settings/components/SaveAndCancelButtons/CancelButton.tsx msgid "Cancel" msgstr "Cancel" @@ -2031,7 +2031,7 @@ msgid "Existing objects" msgstr "Existing objects" #. js-lingui-id: ydzS9x -#: src/modules/spreadsheet-import/components/ModalCloseButton.tsx +#: src/modules/spreadsheet-import/components/SpreadSheetImportModalCloseButton.tsx msgid "Exit" msgstr "Exit" @@ -2041,7 +2041,7 @@ msgstr "Exit" #~ msgstr "Exit Full Screen" #. js-lingui-id: XB4onr -#: src/modules/spreadsheet-import/components/ModalCloseButton.tsx +#: src/modules/spreadsheet-import/components/SpreadSheetImportModalCloseButton.tsx msgid "Exit import flow" msgstr "Exit import flow" diff --git a/packages/twenty-front/src/locales/es-ES.po b/packages/twenty-front/src/locales/es-ES.po index b6f718bff..952b78a14 100644 --- a/packages/twenty-front/src/locales/es-ES.po +++ b/packages/twenty-front/src/locales/es-ES.po @@ -617,7 +617,7 @@ msgid "Are you sure you want to delete this record? It can be recovered from the msgstr "¿Está seguro de que desea eliminar este registro? Se puede recuperar del menú de Comandos." #. js-lingui-id: rnCqBK -#: src/modules/spreadsheet-import/components/ModalCloseButton.tsx +#: src/modules/spreadsheet-import/components/SpreadSheetImportModalCloseButton.tsx msgid "Are you sure? Your current information will not be saved." msgstr "" @@ -798,7 +798,7 @@ msgstr "No se pueden cambiar los nombres de la API para los objetos estándar" #: src/modules/ui/feedback/snack-bar-manager/components/SnackBar.tsx #: src/modules/spreadsheet-import/steps/components/ValidationStep/ValidationStep.tsx #: src/modules/spreadsheet-import/steps/components/MatchColumnsStep/MatchColumnsStep.tsx -#: src/modules/spreadsheet-import/components/ModalCloseButton.tsx +#: src/modules/spreadsheet-import/components/SpreadSheetImportModalCloseButton.tsx #: src/modules/settings/components/SaveAndCancelButtons/CancelButton.tsx msgid "Cancel" msgstr "Cancelar" @@ -2036,7 +2036,7 @@ msgid "Existing objects" msgstr "Objetos existentes" #. js-lingui-id: ydzS9x -#: src/modules/spreadsheet-import/components/ModalCloseButton.tsx +#: src/modules/spreadsheet-import/components/SpreadSheetImportModalCloseButton.tsx msgid "Exit" msgstr "" @@ -2046,7 +2046,7 @@ msgstr "" #~ msgstr "Salir de pantalla completa" #. js-lingui-id: XB4onr -#: src/modules/spreadsheet-import/components/ModalCloseButton.tsx +#: src/modules/spreadsheet-import/components/SpreadSheetImportModalCloseButton.tsx msgid "Exit import flow" msgstr "" diff --git a/packages/twenty-front/src/locales/fi-FI.po b/packages/twenty-front/src/locales/fi-FI.po index 4058ea57d..353705f97 100644 --- a/packages/twenty-front/src/locales/fi-FI.po +++ b/packages/twenty-front/src/locales/fi-FI.po @@ -617,7 +617,7 @@ msgid "Are you sure you want to delete this record? It can be recovered from the msgstr "Haluatko varmasti poistaa tämän tietueen? Se voidaan palauttaa komento-valikosta." #. js-lingui-id: rnCqBK -#: src/modules/spreadsheet-import/components/ModalCloseButton.tsx +#: src/modules/spreadsheet-import/components/SpreadSheetImportModalCloseButton.tsx msgid "Are you sure? Your current information will not be saved." msgstr "" @@ -798,7 +798,7 @@ msgstr "API-nimiä ei voi muuttaa vakio-objekteille" #: src/modules/ui/feedback/snack-bar-manager/components/SnackBar.tsx #: src/modules/spreadsheet-import/steps/components/ValidationStep/ValidationStep.tsx #: src/modules/spreadsheet-import/steps/components/MatchColumnsStep/MatchColumnsStep.tsx -#: src/modules/spreadsheet-import/components/ModalCloseButton.tsx +#: src/modules/spreadsheet-import/components/SpreadSheetImportModalCloseButton.tsx #: src/modules/settings/components/SaveAndCancelButtons/CancelButton.tsx msgid "Cancel" msgstr "Peruuta" @@ -2036,7 +2036,7 @@ msgid "Existing objects" msgstr "Olemassa olevat objektit" #. js-lingui-id: ydzS9x -#: src/modules/spreadsheet-import/components/ModalCloseButton.tsx +#: src/modules/spreadsheet-import/components/SpreadSheetImportModalCloseButton.tsx msgid "Exit" msgstr "" @@ -2046,7 +2046,7 @@ msgstr "" #~ msgstr "Poistu koko näytöstä" #. js-lingui-id: XB4onr -#: src/modules/spreadsheet-import/components/ModalCloseButton.tsx +#: src/modules/spreadsheet-import/components/SpreadSheetImportModalCloseButton.tsx msgid "Exit import flow" msgstr "" diff --git a/packages/twenty-front/src/locales/fr-FR.po b/packages/twenty-front/src/locales/fr-FR.po index 1fa6575f5..112f676dd 100644 --- a/packages/twenty-front/src/locales/fr-FR.po +++ b/packages/twenty-front/src/locales/fr-FR.po @@ -617,7 +617,7 @@ msgid "Are you sure you want to delete this record? It can be recovered from the msgstr "Êtes-vous sûr de vouloir supprimer cet enregistrementa0? Il peut être récupéré depuis le menu Commande." #. js-lingui-id: rnCqBK -#: src/modules/spreadsheet-import/components/ModalCloseButton.tsx +#: src/modules/spreadsheet-import/components/SpreadSheetImportModalCloseButton.tsx msgid "Are you sure? Your current information will not be saved." msgstr "" @@ -798,7 +798,7 @@ msgstr "Impossible de modifier les noms d'API pour les objets standard" #: src/modules/ui/feedback/snack-bar-manager/components/SnackBar.tsx #: src/modules/spreadsheet-import/steps/components/ValidationStep/ValidationStep.tsx #: src/modules/spreadsheet-import/steps/components/MatchColumnsStep/MatchColumnsStep.tsx -#: src/modules/spreadsheet-import/components/ModalCloseButton.tsx +#: src/modules/spreadsheet-import/components/SpreadSheetImportModalCloseButton.tsx #: src/modules/settings/components/SaveAndCancelButtons/CancelButton.tsx msgid "Cancel" msgstr "Annuler" @@ -2036,7 +2036,7 @@ msgid "Existing objects" msgstr "Objets existants" #. js-lingui-id: ydzS9x -#: src/modules/spreadsheet-import/components/ModalCloseButton.tsx +#: src/modules/spreadsheet-import/components/SpreadSheetImportModalCloseButton.tsx msgid "Exit" msgstr "" @@ -2046,7 +2046,7 @@ msgstr "" #~ msgstr "Quitter le plein écran" #. js-lingui-id: XB4onr -#: src/modules/spreadsheet-import/components/ModalCloseButton.tsx +#: src/modules/spreadsheet-import/components/SpreadSheetImportModalCloseButton.tsx msgid "Exit import flow" msgstr "" diff --git a/packages/twenty-front/src/locales/he-IL.po b/packages/twenty-front/src/locales/he-IL.po index 6463ba717..bd189b0d2 100644 --- a/packages/twenty-front/src/locales/he-IL.po +++ b/packages/twenty-front/src/locales/he-IL.po @@ -617,7 +617,7 @@ msgid "Are you sure you want to delete this record? It can be recovered from the msgstr "האם אתה בטוח שברצונך למחוק את הרשומה הזו? ניתן לשחזר אותה מתפריט Command." #. js-lingui-id: rnCqBK -#: src/modules/spreadsheet-import/components/ModalCloseButton.tsx +#: src/modules/spreadsheet-import/components/SpreadSheetImportModalCloseButton.tsx msgid "Are you sure? Your current information will not be saved." msgstr "" @@ -798,7 +798,7 @@ msgstr "לא ניתן לשנות שמות API עבור עצמים סטנדרטי #: src/modules/ui/feedback/snack-bar-manager/components/SnackBar.tsx #: src/modules/spreadsheet-import/steps/components/ValidationStep/ValidationStep.tsx #: src/modules/spreadsheet-import/steps/components/MatchColumnsStep/MatchColumnsStep.tsx -#: src/modules/spreadsheet-import/components/ModalCloseButton.tsx +#: src/modules/spreadsheet-import/components/SpreadSheetImportModalCloseButton.tsx #: src/modules/settings/components/SaveAndCancelButtons/CancelButton.tsx msgid "Cancel" msgstr "בטל" @@ -2036,7 +2036,7 @@ msgid "Existing objects" msgstr "אובייקטים קיימים" #. js-lingui-id: ydzS9x -#: src/modules/spreadsheet-import/components/ModalCloseButton.tsx +#: src/modules/spreadsheet-import/components/SpreadSheetImportModalCloseButton.tsx msgid "Exit" msgstr "" @@ -2046,7 +2046,7 @@ msgstr "" #~ msgstr "צא ממסך מלא" #. js-lingui-id: XB4onr -#: src/modules/spreadsheet-import/components/ModalCloseButton.tsx +#: src/modules/spreadsheet-import/components/SpreadSheetImportModalCloseButton.tsx msgid "Exit import flow" msgstr "" diff --git a/packages/twenty-front/src/locales/hu-HU.po b/packages/twenty-front/src/locales/hu-HU.po index 5252c7f16..51f31ebb2 100644 --- a/packages/twenty-front/src/locales/hu-HU.po +++ b/packages/twenty-front/src/locales/hu-HU.po @@ -617,7 +617,7 @@ msgid "Are you sure you want to delete this record? It can be recovered from the msgstr "Biztosan törölni szeretné ezt a rekordot? Visszaállítható a Parancs menüből." #. js-lingui-id: rnCqBK -#: src/modules/spreadsheet-import/components/ModalCloseButton.tsx +#: src/modules/spreadsheet-import/components/SpreadSheetImportModalCloseButton.tsx msgid "Are you sure? Your current information will not be saved." msgstr "" @@ -798,7 +798,7 @@ msgstr "Nem változtathatók meg a szabványos objektumok API-nevei" #: src/modules/ui/feedback/snack-bar-manager/components/SnackBar.tsx #: src/modules/spreadsheet-import/steps/components/ValidationStep/ValidationStep.tsx #: src/modules/spreadsheet-import/steps/components/MatchColumnsStep/MatchColumnsStep.tsx -#: src/modules/spreadsheet-import/components/ModalCloseButton.tsx +#: src/modules/spreadsheet-import/components/SpreadSheetImportModalCloseButton.tsx #: src/modules/settings/components/SaveAndCancelButtons/CancelButton.tsx msgid "Cancel" msgstr "Mégse" @@ -2036,7 +2036,7 @@ msgid "Existing objects" msgstr "Meglévő objektumok" #. js-lingui-id: ydzS9x -#: src/modules/spreadsheet-import/components/ModalCloseButton.tsx +#: src/modules/spreadsheet-import/components/SpreadSheetImportModalCloseButton.tsx msgid "Exit" msgstr "" @@ -2046,7 +2046,7 @@ msgstr "" #~ msgstr "Kilépés teljes képernyőből" #. js-lingui-id: XB4onr -#: src/modules/spreadsheet-import/components/ModalCloseButton.tsx +#: src/modules/spreadsheet-import/components/SpreadSheetImportModalCloseButton.tsx msgid "Exit import flow" msgstr "" diff --git a/packages/twenty-front/src/locales/it-IT.po b/packages/twenty-front/src/locales/it-IT.po index 042bc9452..b7e6ffce9 100644 --- a/packages/twenty-front/src/locales/it-IT.po +++ b/packages/twenty-front/src/locales/it-IT.po @@ -617,7 +617,7 @@ msgid "Are you sure you want to delete this record? It can be recovered from the msgstr "Sei sicuro di voler eliminare questo record? Può essere recuperato dal menu Comando." #. js-lingui-id: rnCqBK -#: src/modules/spreadsheet-import/components/ModalCloseButton.tsx +#: src/modules/spreadsheet-import/components/SpreadSheetImportModalCloseButton.tsx msgid "Are you sure? Your current information will not be saved." msgstr "" @@ -798,7 +798,7 @@ msgstr "Impossibile modificare i nomi API per gli oggetti standard" #: src/modules/ui/feedback/snack-bar-manager/components/SnackBar.tsx #: src/modules/spreadsheet-import/steps/components/ValidationStep/ValidationStep.tsx #: src/modules/spreadsheet-import/steps/components/MatchColumnsStep/MatchColumnsStep.tsx -#: src/modules/spreadsheet-import/components/ModalCloseButton.tsx +#: src/modules/spreadsheet-import/components/SpreadSheetImportModalCloseButton.tsx #: src/modules/settings/components/SaveAndCancelButtons/CancelButton.tsx msgid "Cancel" msgstr "Annulla" @@ -2036,7 +2036,7 @@ msgid "Existing objects" msgstr "Oggetti esistenti" #. js-lingui-id: ydzS9x -#: src/modules/spreadsheet-import/components/ModalCloseButton.tsx +#: src/modules/spreadsheet-import/components/SpreadSheetImportModalCloseButton.tsx msgid "Exit" msgstr "" @@ -2046,7 +2046,7 @@ msgstr "" #~ msgstr "Esci dalla modalità a schermo intero" #. js-lingui-id: XB4onr -#: src/modules/spreadsheet-import/components/ModalCloseButton.tsx +#: src/modules/spreadsheet-import/components/SpreadSheetImportModalCloseButton.tsx msgid "Exit import flow" msgstr "" diff --git a/packages/twenty-front/src/locales/ja-JP.po b/packages/twenty-front/src/locales/ja-JP.po index 4ca6e75dc..4c4eab7f2 100644 --- a/packages/twenty-front/src/locales/ja-JP.po +++ b/packages/twenty-front/src/locales/ja-JP.po @@ -617,7 +617,7 @@ msgid "Are you sure you want to delete this record? It can be recovered from the msgstr "このレコードを本当に削除しますか？ コマンドメニューから復元できます。" #. js-lingui-id: rnCqBK -#: src/modules/spreadsheet-import/components/ModalCloseButton.tsx +#: src/modules/spreadsheet-import/components/SpreadSheetImportModalCloseButton.tsx msgid "Are you sure? Your current information will not be saved." msgstr "" @@ -798,7 +798,7 @@ msgstr "標準オブジェクトのAPI名は変更できません" #: src/modules/ui/feedback/snack-bar-manager/components/SnackBar.tsx #: src/modules/spreadsheet-import/steps/components/ValidationStep/ValidationStep.tsx #: src/modules/spreadsheet-import/steps/components/MatchColumnsStep/MatchColumnsStep.tsx -#: src/modules/spreadsheet-import/components/ModalCloseButton.tsx +#: src/modules/spreadsheet-import/components/SpreadSheetImportModalCloseButton.tsx #: src/modules/settings/components/SaveAndCancelButtons/CancelButton.tsx msgid "Cancel" msgstr "キャンセル" @@ -2036,7 +2036,7 @@ msgid "Existing objects" msgstr "既存のオブジェクト" #. js-lingui-id: ydzS9x -#: src/modules/spreadsheet-import/components/ModalCloseButton.tsx +#: src/modules/spreadsheet-import/components/SpreadSheetImportModalCloseButton.tsx msgid "Exit" msgstr "" @@ -2046,7 +2046,7 @@ msgstr "" #~ msgstr "フルスクリーンを終了" #. js-lingui-id: XB4onr -#: src/modules/spreadsheet-import/components/ModalCloseButton.tsx +#: src/modules/spreadsheet-import/components/SpreadSheetImportModalCloseButton.tsx msgid "Exit import flow" msgstr "" diff --git a/packages/twenty-front/src/locales/ko-KR.po b/packages/twenty-front/src/locales/ko-KR.po index ccf60b71e..954d0dfba 100644 --- a/packages/twenty-front/src/locales/ko-KR.po +++ b/packages/twenty-front/src/locales/ko-KR.po @@ -617,7 +617,7 @@ msgid "Are you sure you want to delete this record? It can be recovered from the msgstr "이 기록을 삭제하시겠습니까? Command 메뉴에서 복구할 수 있습니다." #. js-lingui-id: rnCqBK -#: src/modules/spreadsheet-import/components/ModalCloseButton.tsx +#: src/modules/spreadsheet-import/components/SpreadSheetImportModalCloseButton.tsx msgid "Are you sure? Your current information will not be saved." msgstr "" @@ -798,7 +798,7 @@ msgstr "표준 객체에 대한 API 이름을 변경할 수 없습니다." #: src/modules/ui/feedback/snack-bar-manager/components/SnackBar.tsx #: src/modules/spreadsheet-import/steps/components/ValidationStep/ValidationStep.tsx #: src/modules/spreadsheet-import/steps/components/MatchColumnsStep/MatchColumnsStep.tsx -#: src/modules/spreadsheet-import/components/ModalCloseButton.tsx +#: src/modules/spreadsheet-import/components/SpreadSheetImportModalCloseButton.tsx #: src/modules/settings/components/SaveAndCancelButtons/CancelButton.tsx msgid "Cancel" msgstr "취소" @@ -2036,7 +2036,7 @@ msgid "Existing objects" msgstr "기존 개체" #. js-lingui-id: ydzS9x -#: src/modules/spreadsheet-import/components/ModalCloseButton.tsx +#: src/modules/spreadsheet-import/components/SpreadSheetImportModalCloseButton.tsx msgid "Exit" msgstr "" @@ -2046,7 +2046,7 @@ msgstr "" #~ msgstr "전체 화면 종료" #. js-lingui-id: XB4onr -#: src/modules/spreadsheet-import/components/ModalCloseButton.tsx +#: src/modules/spreadsheet-import/components/SpreadSheetImportModalCloseButton.tsx msgid "Exit import flow" msgstr "" diff --git a/packages/twenty-front/src/locales/nl-NL.po b/packages/twenty-front/src/locales/nl-NL.po index ed12ff85c..118a68f12 100644 --- a/packages/twenty-front/src/locales/nl-NL.po +++ b/packages/twenty-front/src/locales/nl-NL.po @@ -617,7 +617,7 @@ msgid "Are you sure you want to delete this record? It can be recovered from the msgstr "Weet je zeker dat je dit record wilt verwijderen? Het kan worden hersteld vanuit het Commandemenu." #. js-lingui-id: rnCqBK -#: src/modules/spreadsheet-import/components/ModalCloseButton.tsx +#: src/modules/spreadsheet-import/components/SpreadSheetImportModalCloseButton.tsx msgid "Are you sure? Your current information will not be saved." msgstr "" @@ -798,7 +798,7 @@ msgstr "Kan API-namen niet wijzigen voor standaardobjecten" #: src/modules/ui/feedback/snack-bar-manager/components/SnackBar.tsx #: src/modules/spreadsheet-import/steps/components/ValidationStep/ValidationStep.tsx #: src/modules/spreadsheet-import/steps/components/MatchColumnsStep/MatchColumnsStep.tsx -#: src/modules/spreadsheet-import/components/ModalCloseButton.tsx +#: src/modules/spreadsheet-import/components/SpreadSheetImportModalCloseButton.tsx #: src/modules/settings/components/SaveAndCancelButtons/CancelButton.tsx msgid "Cancel" msgstr "Annuleren" @@ -2036,7 +2036,7 @@ msgid "Existing objects" msgstr "Bestaande objecten" #. js-lingui-id: ydzS9x -#: src/modules/spreadsheet-import/components/ModalCloseButton.tsx +#: src/modules/spreadsheet-import/components/SpreadSheetImportModalCloseButton.tsx msgid "Exit" msgstr "" @@ -2046,7 +2046,7 @@ msgstr "" #~ msgstr "Volledig scherm afsluiten" #. js-lingui-id: XB4onr -#: src/modules/spreadsheet-import/components/ModalCloseButton.tsx +#: src/modules/spreadsheet-import/components/SpreadSheetImportModalCloseButton.tsx msgid "Exit import flow" msgstr "" diff --git a/packages/twenty-front/src/locales/no-NO.po b/packages/twenty-front/src/locales/no-NO.po index 96bd2ba4d..46114c900 100644 --- a/packages/twenty-front/src/locales/no-NO.po +++ b/packages/twenty-front/src/locales/no-NO.po @@ -617,7 +617,7 @@ msgid "Are you sure you want to delete this record? It can be recovered from the msgstr "Er du sikker på at du vil slette denne posten? Den kan gjenopprettes fra Kommandomenyen." #. js-lingui-id: rnCqBK -#: src/modules/spreadsheet-import/components/ModalCloseButton.tsx +#: src/modules/spreadsheet-import/components/SpreadSheetImportModalCloseButton.tsx msgid "Are you sure? Your current information will not be saved." msgstr "" @@ -798,7 +798,7 @@ msgstr "Kan ikke endre API-navn for standardobjekter" #: src/modules/ui/feedback/snack-bar-manager/components/SnackBar.tsx #: src/modules/spreadsheet-import/steps/components/ValidationStep/ValidationStep.tsx #: src/modules/spreadsheet-import/steps/components/MatchColumnsStep/MatchColumnsStep.tsx -#: src/modules/spreadsheet-import/components/ModalCloseButton.tsx +#: src/modules/spreadsheet-import/components/SpreadSheetImportModalCloseButton.tsx #: src/modules/settings/components/SaveAndCancelButtons/CancelButton.tsx msgid "Cancel" msgstr "Avbryt" @@ -2036,7 +2036,7 @@ msgid "Existing objects" msgstr "Eksisterende objekter" #. js-lingui-id: ydzS9x -#: src/modules/spreadsheet-import/components/ModalCloseButton.tsx +#: src/modules/spreadsheet-import/components/SpreadSheetImportModalCloseButton.tsx msgid "Exit" msgstr "" @@ -2046,7 +2046,7 @@ msgstr "" #~ msgstr "Avslutt fullskjerm" #. js-lingui-id: XB4onr -#: src/modules/spreadsheet-import/components/ModalCloseButton.tsx +#: src/modules/spreadsheet-import/components/SpreadSheetImportModalCloseButton.tsx msgid "Exit import flow" msgstr "" diff --git a/packages/twenty-front/src/locales/pl-PL.po b/packages/twenty-front/src/locales/pl-PL.po index cce6d214e..d12e6296b 100644 --- a/packages/twenty-front/src/locales/pl-PL.po +++ b/packages/twenty-front/src/locales/pl-PL.po @@ -617,7 +617,7 @@ msgid "Are you sure you want to delete this record? It can be recovered from the msgstr "Czy jesteś pewien, że chcesz usunąć ten rekord? Można go odzyskać z menu Command." #. js-lingui-id: rnCqBK -#: src/modules/spreadsheet-import/components/ModalCloseButton.tsx +#: src/modules/spreadsheet-import/components/SpreadSheetImportModalCloseButton.tsx msgid "Are you sure? Your current information will not be saved." msgstr "" @@ -798,7 +798,7 @@ msgstr "Nie można zmienić nazw API dla standardowych obiektów" #: src/modules/ui/feedback/snack-bar-manager/components/SnackBar.tsx #: src/modules/spreadsheet-import/steps/components/ValidationStep/ValidationStep.tsx #: src/modules/spreadsheet-import/steps/components/MatchColumnsStep/MatchColumnsStep.tsx -#: src/modules/spreadsheet-import/components/ModalCloseButton.tsx +#: src/modules/spreadsheet-import/components/SpreadSheetImportModalCloseButton.tsx #: src/modules/settings/components/SaveAndCancelButtons/CancelButton.tsx msgid "Cancel" msgstr "Anuluj" @@ -2036,7 +2036,7 @@ msgid "Existing objects" msgstr "Istniejące obiekty" #. js-lingui-id: ydzS9x -#: src/modules/spreadsheet-import/components/ModalCloseButton.tsx +#: src/modules/spreadsheet-import/components/SpreadSheetImportModalCloseButton.tsx msgid "Exit" msgstr "" @@ -2046,7 +2046,7 @@ msgstr "" #~ msgstr "Zakończ tryb pełnoekranowy" #. js-lingui-id: XB4onr -#: src/modules/spreadsheet-import/components/ModalCloseButton.tsx +#: src/modules/spreadsheet-import/components/SpreadSheetImportModalCloseButton.tsx msgid "Exit import flow" msgstr "" diff --git a/packages/twenty-front/src/locales/pseudo-en.po b/packages/twenty-front/src/locales/pseudo-en.po index 5468cf99c..663043cd2 100644 --- a/packages/twenty-front/src/locales/pseudo-en.po +++ b/packages/twenty-front/src/locales/pseudo-en.po @@ -609,7 +609,7 @@ msgid "Are you sure you want to delete this record? It can be recovered from the msgstr "" #. js-lingui-id: rnCqBK -#: src/modules/spreadsheet-import/components/ModalCloseButton.tsx +#: src/modules/spreadsheet-import/components/SpreadSheetImportModalCloseButton.tsx msgid "Are you sure? Your current information will not be saved." msgstr "" @@ -790,7 +790,7 @@ msgstr "" #: src/modules/ui/feedback/snack-bar-manager/components/SnackBar.tsx #: src/modules/spreadsheet-import/steps/components/ValidationStep/ValidationStep.tsx #: src/modules/spreadsheet-import/steps/components/MatchColumnsStep/MatchColumnsStep.tsx -#: src/modules/spreadsheet-import/components/ModalCloseButton.tsx +#: src/modules/spreadsheet-import/components/SpreadSheetImportModalCloseButton.tsx #: src/modules/settings/components/SaveAndCancelButtons/CancelButton.tsx msgid "Cancel" msgstr "" @@ -2028,7 +2028,7 @@ msgid "Existing objects" msgstr "" #. js-lingui-id: ydzS9x -#: src/modules/spreadsheet-import/components/ModalCloseButton.tsx +#: src/modules/spreadsheet-import/components/SpreadSheetImportModalCloseButton.tsx msgid "Exit" msgstr "" @@ -2038,7 +2038,7 @@ msgstr "" #~ msgstr "" #. js-lingui-id: XB4onr -#: src/modules/spreadsheet-import/components/ModalCloseButton.tsx +#: src/modules/spreadsheet-import/components/SpreadSheetImportModalCloseButton.tsx msgid "Exit import flow" msgstr "" diff --git a/packages/twenty-front/src/locales/pt-BR.po b/packages/twenty-front/src/locales/pt-BR.po index 7457de22e..55aaaeb48 100644 --- a/packages/twenty-front/src/locales/pt-BR.po +++ b/packages/twenty-front/src/locales/pt-BR.po @@ -617,7 +617,7 @@ msgid "Are you sure you want to delete this record? It can be recovered from the msgstr "Tem certeza de que deseja excluir este registro? Ele pode ser recuperado no menu Comando." #. js-lingui-id: rnCqBK -#: src/modules/spreadsheet-import/components/ModalCloseButton.tsx +#: src/modules/spreadsheet-import/components/SpreadSheetImportModalCloseButton.tsx msgid "Are you sure? Your current information will not be saved." msgstr "" @@ -798,7 +798,7 @@ msgstr "Não é possível alterar nomes de API para objetos padrão" #: src/modules/ui/feedback/snack-bar-manager/components/SnackBar.tsx #: src/modules/spreadsheet-import/steps/components/ValidationStep/ValidationStep.tsx #: src/modules/spreadsheet-import/steps/components/MatchColumnsStep/MatchColumnsStep.tsx -#: src/modules/spreadsheet-import/components/ModalCloseButton.tsx +#: src/modules/spreadsheet-import/components/SpreadSheetImportModalCloseButton.tsx #: src/modules/settings/components/SaveAndCancelButtons/CancelButton.tsx msgid "Cancel" msgstr "Cancelar" @@ -2036,7 +2036,7 @@ msgid "Existing objects" msgstr "Objetos existentes" #. js-lingui-id: ydzS9x -#: src/modules/spreadsheet-import/components/ModalCloseButton.tsx +#: src/modules/spreadsheet-import/components/SpreadSheetImportModalCloseButton.tsx msgid "Exit" msgstr "" @@ -2046,7 +2046,7 @@ msgstr "" #~ msgstr "Sair do modo tela cheia" #. js-lingui-id: XB4onr -#: src/modules/spreadsheet-import/components/ModalCloseButton.tsx +#: src/modules/spreadsheet-import/components/SpreadSheetImportModalCloseButton.tsx msgid "Exit import flow" msgstr "" diff --git a/packages/twenty-front/src/locales/pt-PT.po b/packages/twenty-front/src/locales/pt-PT.po index 5c63a7199..90a7163ed 100644 --- a/packages/twenty-front/src/locales/pt-PT.po +++ b/packages/twenty-front/src/locales/pt-PT.po @@ -617,7 +617,7 @@ msgid "Are you sure you want to delete this record? It can be recovered from the msgstr "Tem certeza de que deseja excluir este registro? Ele pode ser recuperado do menu Comando." #. js-lingui-id: rnCqBK -#: src/modules/spreadsheet-import/components/ModalCloseButton.tsx +#: src/modules/spreadsheet-import/components/SpreadSheetImportModalCloseButton.tsx msgid "Are you sure? Your current information will not be saved." msgstr "" @@ -798,7 +798,7 @@ msgstr "Não é possível alterar os nomes de API para objetos padrão" #: src/modules/ui/feedback/snack-bar-manager/components/SnackBar.tsx #: src/modules/spreadsheet-import/steps/components/ValidationStep/ValidationStep.tsx #: src/modules/spreadsheet-import/steps/components/MatchColumnsStep/MatchColumnsStep.tsx -#: src/modules/spreadsheet-import/components/ModalCloseButton.tsx +#: src/modules/spreadsheet-import/components/SpreadSheetImportModalCloseButton.tsx #: src/modules/settings/components/SaveAndCancelButtons/CancelButton.tsx msgid "Cancel" msgstr "Cancelar" @@ -2036,7 +2036,7 @@ msgid "Existing objects" msgstr "Objetos existentes" #. js-lingui-id: ydzS9x -#: src/modules/spreadsheet-import/components/ModalCloseButton.tsx +#: src/modules/spreadsheet-import/components/SpreadSheetImportModalCloseButton.tsx msgid "Exit" msgstr "" @@ -2046,7 +2046,7 @@ msgstr "" #~ msgstr "Sair do modo de tela cheia" #. js-lingui-id: XB4onr -#: src/modules/spreadsheet-import/components/ModalCloseButton.tsx +#: src/modules/spreadsheet-import/components/SpreadSheetImportModalCloseButton.tsx msgid "Exit import flow" msgstr "" diff --git a/packages/twenty-front/src/locales/ro-RO.po b/packages/twenty-front/src/locales/ro-RO.po index 6ebc475a0..1feb25755 100644 --- a/packages/twenty-front/src/locales/ro-RO.po +++ b/packages/twenty-front/src/locales/ro-RO.po @@ -617,7 +617,7 @@ msgid "Are you sure you want to delete this record? It can be recovered from the msgstr "Sigur doriți să ștergeți această înregistrare? Ea poate fi recuperată din meniul Command." #. js-lingui-id: rnCqBK -#: src/modules/spreadsheet-import/components/ModalCloseButton.tsx +#: src/modules/spreadsheet-import/components/SpreadSheetImportModalCloseButton.tsx msgid "Are you sure? Your current information will not be saved." msgstr "" @@ -798,7 +798,7 @@ msgstr "Nu se pot schimba numele API pentru obiectele standard" #: src/modules/ui/feedback/snack-bar-manager/components/SnackBar.tsx #: src/modules/spreadsheet-import/steps/components/ValidationStep/ValidationStep.tsx #: src/modules/spreadsheet-import/steps/components/MatchColumnsStep/MatchColumnsStep.tsx -#: src/modules/spreadsheet-import/components/ModalCloseButton.tsx +#: src/modules/spreadsheet-import/components/SpreadSheetImportModalCloseButton.tsx #: src/modules/settings/components/SaveAndCancelButtons/CancelButton.tsx msgid "Cancel" msgstr "Anulare" @@ -2036,7 +2036,7 @@ msgid "Existing objects" msgstr "Obiecte existente" #. js-lingui-id: ydzS9x -#: src/modules/spreadsheet-import/components/ModalCloseButton.tsx +#: src/modules/spreadsheet-import/components/SpreadSheetImportModalCloseButton.tsx msgid "Exit" msgstr "" @@ -2046,7 +2046,7 @@ msgstr "" #~ msgstr "Ieșiți din modul Ecran complet" #. js-lingui-id: XB4onr -#: src/modules/spreadsheet-import/components/ModalCloseButton.tsx +#: src/modules/spreadsheet-import/components/SpreadSheetImportModalCloseButton.tsx msgid "Exit import flow" msgstr "" diff --git a/packages/twenty-front/src/locales/ru-RU.po b/packages/twenty-front/src/locales/ru-RU.po index dfdbc0ad1bab9cabd2c5450160f6a3ef672f5656..961812f0767be0d23fe0b7c7c6c859e97cd31a73 100644 GIT binary patch delta 131 zcmcaSmv{O+-VNSKg24qvsfj7U8L6oyp1B42MJ1CH>qIvvBr(chN^MT8TX_gm7^Guz cLK6FSHAhAXM%?o4QBI6N%(OkqiMf&o04W?W { - const [isOpen, setIsOpen] = useState(false); - - const handleOpen = useCallback(() => { - setIsOpen(true); - }, []); + const { openModal } = useModal(); const { closeActionMenu } = useCloseActionMenu(); @@ -38,19 +38,28 @@ export const ActionModal = ({ }; const actionConfig = useContext(ActionConfigContext); + const { actionMenuType } = useContext(ActionMenuContext); + + const modalId = `${actionConfig?.key}-action-modal-${actionMenuType}`; + + const isModalOpened = useRecoilComponentValueV2( + isModalOpenedComponentState, + modalId, + ); if (!actionConfig) { return null; } + const handleClick = () => openModal(modalId); + return ( <> - - {isOpen && + + {isModalOpened && createPortal( = { title: 'Modules/Activities/Calendar/Calendar', component: Calendar, decorators: [ + I18nFrontDecorator, ComponentDecorator, ObjectMetadataItemsDecorator, SnackBarDecorator, diff --git a/packages/twenty-front/src/modules/activities/files/components/AttachmentList.tsx b/packages/twenty-front/src/modules/activities/files/components/AttachmentList.tsx index 7ee220905..9298caf28 100644 --- a/packages/twenty-front/src/modules/activities/files/components/AttachmentList.tsx +++ b/packages/twenty-front/src/modules/activities/files/components/AttachmentList.tsx @@ -11,10 +11,11 @@ import { Modal } from '@/ui/layout/modal/components/Modal'; import { useRecoilValue } from 'recoil'; import { ActivityList } from '@/activities/components/ActivityList'; +import { useModal } from '@/ui/layout/modal/hooks/useModal'; import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper'; -import { AttachmentRow } from './AttachmentRow'; -import { IconButton } from 'twenty-ui/input'; import { IconDownload, IconX } from 'twenty-ui/display'; +import { IconButton } from 'twenty-ui/input'; +import { AttachmentRow } from './AttachmentRow'; const DocumentViewer = lazy(() => import('@/activities/files/components/DocumentViewer').then((module) => ({ @@ -112,6 +113,8 @@ const StyledButtonContainer = styled.div` gap: ${({ theme }) => theme.spacing(1)}; `; +export const PREVIEW_MODAL_ID = 'preview-modal'; + export const AttachmentList = ({ targetableObject, title, @@ -122,10 +125,13 @@ export const AttachmentList = ({ const [isDraggingFile, setIsDraggingFile] = useState(false); const [previewedAttachment, setPreviewedAttachment] = useState(null); + const isAttachmentPreviewEnabled = useRecoilValue( isAttachmentPreviewEnabledState, ); + const { openModal, closeModal } = useModal(); + const onUploadFile = async (file: File) => { await uploadAttachmentFile(file, targetableObject); }; @@ -133,9 +139,11 @@ export const AttachmentList = ({ const handlePreview = (attachment: Attachment) => { if (!isAttachmentPreviewEnabled) return; setPreviewedAttachment(attachment); + openModal(PREVIEW_MODAL_ID); }; const handleClosePreview = () => { + closeModal(PREVIEW_MODAL_ID); setPreviewedAttachment(null); }; @@ -177,7 +185,12 @@ export const AttachmentList = ({ )} {previewedAttachment && isAttachmentPreviewEnabled && ( - + {previewedAttachment.name} diff --git a/packages/twenty-front/src/modules/activities/timeline-activities/rows/calendar/components/__stories__/EventCardCalendarEvent.stories.tsx b/packages/twenty-front/src/modules/activities/timeline-activities/rows/calendar/components/__stories__/EventCardCalendarEvent.stories.tsx index f6bf963a5..877a9028c 100644 --- a/packages/twenty-front/src/modules/activities/timeline-activities/rows/calendar/components/__stories__/EventCardCalendarEvent.stories.tsx +++ b/packages/twenty-front/src/modules/activities/timeline-activities/rows/calendar/components/__stories__/EventCardCalendarEvent.stories.tsx @@ -2,14 +2,16 @@ import { Meta, StoryObj } from '@storybook/react'; import { HttpResponse, graphql } from 'msw'; import { EventCardCalendarEvent } from '@/activities/timeline-activities/rows/calendar/components/EventCardCalendarEvent'; +import { ComponentDecorator } from 'twenty-ui/testing'; +import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator'; import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadataItemsDecorator'; import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator'; -import { ComponentDecorator } from 'twenty-ui/testing'; const meta: Meta = { title: 'Modules/TimelineActivities/Rows/CalendarEvent/EventCardCalendarEvent', component: EventCardCalendarEvent, decorators: [ + I18nFrontDecorator, ComponentDecorator, ObjectMetadataItemsDecorator, SnackBarDecorator, diff --git a/packages/twenty-front/src/modules/auth/components/AuthModal.tsx b/packages/twenty-front/src/modules/auth/components/AuthModal.tsx index b461837e0..a406b0946 100644 --- a/packages/twenty-front/src/modules/auth/components/AuthModal.tsx +++ b/packages/twenty-front/src/modules/auth/components/AuthModal.tsx @@ -1,3 +1,5 @@ +import { AuthModalMountEffect } from '@/auth/components/AuthModalMountEffect'; +import { AUTH_MODAL_ID } from '@/auth/constants/AuthModalId'; import { Modal } from '@/ui/layout/modal/components/Modal'; import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper'; import styled from '@emotion/styled'; @@ -13,9 +15,12 @@ type AuthModalProps = { }; export const AuthModal = ({ children }: AuthModalProps) => ( - - - {children} - - + <> + + + + {children} + + + ); diff --git a/packages/twenty-front/src/modules/auth/components/AuthModalMountEffect.tsx b/packages/twenty-front/src/modules/auth/components/AuthModalMountEffect.tsx new file mode 100644 index 000000000..37f1483b2 --- /dev/null +++ b/packages/twenty-front/src/modules/auth/components/AuthModalMountEffect.tsx @@ -0,0 +1,14 @@ +import { useModal } from '@/ui/layout/modal/hooks/useModal'; +import { useEffect } from 'react'; + +import { AUTH_MODAL_ID } from '../constants/AuthModalId'; + +export const AuthModalMountEffect = () => { + const { openModal } = useModal(); + + useEffect(() => { + openModal(AUTH_MODAL_ID); + }, [openModal]); + + return null; +}; diff --git a/packages/twenty-front/src/modules/auth/constants/AuthModalId.ts b/packages/twenty-front/src/modules/auth/constants/AuthModalId.ts new file mode 100644 index 000000000..934f56df2 --- /dev/null +++ b/packages/twenty-front/src/modules/auth/constants/AuthModalId.ts @@ -0,0 +1 @@ +export const AUTH_MODAL_ID = 'auth-modal'; diff --git a/packages/twenty-front/src/modules/auth/sign-in-up/components/__stories__/EmailVerificationSent.stories.tsx b/packages/twenty-front/src/modules/auth/sign-in-up/components/__stories__/EmailVerificationSent.stories.tsx index af9df4878..1912b0458 100644 --- a/packages/twenty-front/src/modules/auth/sign-in-up/components/__stories__/EmailVerificationSent.stories.tsx +++ b/packages/twenty-front/src/modules/auth/sign-in-up/components/__stories__/EmailVerificationSent.stories.tsx @@ -10,7 +10,11 @@ const RenderWithModal = ( args: React.ComponentProps, ) => { return ( - + diff --git a/packages/twenty-front/src/modules/favorites/components/CurrentWorkspaceMemberFavorites.tsx b/packages/twenty-front/src/modules/favorites/components/CurrentWorkspaceMemberFavorites.tsx index 9a3f85409..273d23141 100644 --- a/packages/twenty-front/src/modules/favorites/components/CurrentWorkspaceMemberFavorites.tsx +++ b/packages/twenty-front/src/modules/favorites/components/CurrentWorkspaceMemberFavorites.tsx @@ -1,6 +1,7 @@ import { FavoriteFolderNavigationDrawerItemDropdown } from '@/favorites/components/FavoriteFolderNavigationDrawerItemDropdown'; import { FavoriteIcon } from '@/favorites/components/FavoriteIcon'; import { FavoritesDroppable } from '@/favorites/components/FavoritesDroppable'; +import { FAVORITE_FOLDER_DELETE_MODAL_ID } from '@/favorites/constants/FavoriteFolderDeleteModalId'; import { FavoritesDragContext } from '@/favorites/contexts/FavoritesDragContext'; import { useDeleteFavorite } from '@/favorites/hooks/useDeleteFavorite'; import { useDeleteFavoriteFolder } from '@/favorites/hooks/useDeleteFavoriteFolder'; @@ -11,20 +12,22 @@ import { ProcessedFavorite } from '@/favorites/utils/sortFavorites'; import { DraggableItem } from '@/ui/layout/draggable-list/components/DraggableItem'; 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 { isModalOpenedComponentState } from '@/ui/layout/modal/states/isModalOpenedComponentState'; import { NavigationDrawerInput } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerInput'; import { NavigationDrawerItem } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerItem'; import { NavigationDrawerItemsCollapsableContainer } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerItemsCollapsableContainer'; import { NavigationDrawerSubItem } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSubItem'; import { getNavigationSubItemLeftAdornment } from '@/ui/navigation/navigation-drawer/utils/getNavigationSubItemLeftAdornment'; +import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; import { Droppable } from '@hello-pangea/dnd'; import { useContext, useState } from 'react'; import { createPortal } from 'react-dom'; import { useLocation } from 'react-router-dom'; import { useRecoilState } from 'recoil'; -import { AnimatedExpandableContainer } from 'twenty-ui/layout'; import { IconFolder, IconFolderOpen, IconHeartOff } from 'twenty-ui/display'; import { LightIconButton } from 'twenty-ui/input'; - +import { AnimatedExpandableContainer } from 'twenty-ui/layout'; type CurrentWorkspaceMemberFavoritesProps = { folder: { folderId: string; @@ -46,7 +49,7 @@ export const CurrentWorkspaceMemberFavorites = ({ const [favoriteFolderName, setFavoriteFolderName] = useState( folder.folderName, ); - const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false); + const { openModal } = useModal(); const [openFavoriteFolderIds, setOpenFavoriteFolderIds] = useRecoilState( openFavoriteFolderIdsState, @@ -102,9 +105,11 @@ export const CurrentWorkspaceMemberFavorites = ({ setIsFavoriteFolderRenaming(false); }; + const modalId = `${FAVORITE_FOLDER_DELETE_MODAL_ID}-${folder.folderId}`; + const handleFavoriteFolderDelete = async () => { if (folder.favorites.length > 0) { - setIsDeleteModalOpen(true); + openModal(modalId); closeFavoriteFolderEditDropdown(); } else { await deleteFavoriteFolder(folder.folderId); @@ -114,7 +119,6 @@ export const CurrentWorkspaceMemberFavorites = ({ const handleConfirmDelete = async () => { await deleteFavoriteFolder(folder.folderId); - setIsDeleteModalOpen(false); }; const rightOptions = ( @@ -126,6 +130,11 @@ export const CurrentWorkspaceMemberFavorites = ({ /> ); + const isModalOpened = useRecoilComponentValueV2( + isModalOpenedComponentState, + modalId, + ); + return ( <> - {createPortal( - 1 ? 'favorites' : 'favorite'}?`} - subtitle={`This action will delete this favorite folder ${folder.favorites.length > 1 ? `and all ${folder.favorites.length} favorites` : 'and the favorite'} inside. Do you want to continue?`} - onConfirmClick={handleConfirmDelete} - confirmButtonText="Delete Folder" - />, - document.body, - )} + {isModalOpened && + createPortal( + 1 ? 'favorites' : 'favorite'}?`} + subtitle={`This action will delete this favorite folder ${folder.favorites.length > 1 ? `and all ${folder.favorites.length} favorites` : 'and the favorite'} inside. Do you want to continue?`} + onConfirmClick={handleConfirmDelete} + confirmButtonText="Delete Folder" + />, + document.body, + )} ); }; diff --git a/packages/twenty-front/src/modules/favorites/components/FavoriteFolderNavigationDrawerItemDropdown.tsx b/packages/twenty-front/src/modules/favorites/components/FavoriteFolderNavigationDrawerItemDropdown.tsx index b8fc7682b..10d479c4a 100644 --- a/packages/twenty-front/src/modules/favorites/components/FavoriteFolderNavigationDrawerItemDropdown.tsx +++ b/packages/twenty-front/src/modules/favorites/components/FavoriteFolderNavigationDrawerItemDropdown.tsx @@ -19,13 +19,13 @@ export const FavoriteFolderNavigationDrawerItemDropdown = ({ closeDropdown, }: FavoriteFolderNavigationDrawerItemDropdownProps) => { const handleRename = () => { - onRename(); closeDropdown(); + onRename(); }; const handleDelete = () => { - onDelete(); closeDropdown(); + onDelete(); }; return ( diff --git a/packages/twenty-front/src/modules/favorites/constants/FavoriteFolderDeleteModalId.ts b/packages/twenty-front/src/modules/favorites/constants/FavoriteFolderDeleteModalId.ts new file mode 100644 index 000000000..f01085403 --- /dev/null +++ b/packages/twenty-front/src/modules/favorites/constants/FavoriteFolderDeleteModalId.ts @@ -0,0 +1 @@ +export const FAVORITE_FOLDER_DELETE_MODAL_ID = 'favorite-folder-delete-modal'; diff --git a/packages/twenty-front/src/modules/object-record/record-board/components/RecordBoard.tsx b/packages/twenty-front/src/modules/object-record/record-board/components/RecordBoard.tsx index 04b57f57f..2ed3b0e16 100644 --- a/packages/twenty-front/src/modules/object-record/record-board/components/RecordBoard.tsx +++ b/packages/twenty-front/src/modules/object-record/record-board/components/RecordBoard.tsx @@ -1,7 +1,7 @@ import styled from '@emotion/styled'; import { DragDropContext, OnDragEndResponder } from '@hello-pangea/dnd'; // Atlassian dnd does not support StrictMode from RN 18, so we use a fork @hello-pangea/dnd https://github.com/atlassian/react-beautiful-dnd/issues/2350 import { useContext, useRef } from 'react'; -import { useRecoilCallback, useSetRecoilState } from 'recoil'; +import { useRecoilCallback } from 'recoil'; import { getActionMenuIdFromRecordIndexId } from '@/action-menu/utils/getActionMenuIdFromRecordIndexId'; import { RecordBoardHeader } from '@/object-record/record-board/components/RecordBoardHeader'; @@ -19,11 +19,12 @@ import { RecordBoardComponentInstanceContext } from '@/object-record/record-boar import { getDraggedRecordPosition } from '@/object-record/record-board/utils/getDraggedRecordPosition'; import { recordGroupDefinitionFamilyState } from '@/object-record/record-group/states/recordGroupDefinitionFamilyState'; import { visibleRecordGroupIdsComponentFamilySelector } from '@/object-record/record-group/states/selectors/visibleRecordGroupIdsComponentFamilySelector'; +import { RECORD_INDEX_REMOVE_SORTING_MODAL_ID } from '@/object-record/record-index/constants/RecordIndexRemoveSortingModalId'; import { recordIndexRecordIdsByGroupComponentFamilyState } from '@/object-record/record-index/states/recordIndexRecordIdsByGroupComponentFamilyState'; import { currentRecordSortsComponentState } from '@/object-record/record-sort/states/currentRecordSortsComponentState'; import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState'; -import { isRemoveSortingModalOpenState } from '@/object-record/record-table/states/isRemoveSortingModalOpenState'; import { useDropdownV2 } from '@/ui/layout/dropdown/hooks/useDropdownV2'; +import { useModal } from '@/ui/layout/modal/hooks/useModal'; import { DragSelect } from '@/ui/utilities/drag-select/components/DragSelect'; import { useClickOutsideListener } from '@/ui/utilities/pointer-event/hooks/useClickOutsideListener'; import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside'; @@ -120,9 +121,7 @@ export const RecordBoard = () => { }, }); - const setIsRemoveSortingModalOpen = useSetRecoilState( - isRemoveSortingModalOpenState, - ); + const { openModal } = useModal(); const handleDragEnd: OnDragEndResponder = useRecoilCallback( ({ snapshot }) => @@ -130,7 +129,7 @@ export const RecordBoard = () => { if (!result.destination) return; if (currentRecordSorts.length > 0) { - setIsRemoveSortingModalOpen(true); + openModal(RECORD_INDEX_REMOVE_SORTING_MODAL_ID); return; } @@ -189,7 +188,7 @@ export const RecordBoard = () => { recordIndexRecordIdsByGroupFamilyState, selectFieldMetadataItem, updateOneRecord, - setIsRemoveSortingModalOpen, + openModal, currentRecordSorts, ], ); diff --git a/packages/twenty-front/src/modules/object-record/record-group/components/RecordGroupReorderConfirmationModal.tsx b/packages/twenty-front/src/modules/object-record/record-group/components/RecordGroupReorderConfirmationModal.tsx index ab3a26520..e774a3403 100644 --- a/packages/twenty-front/src/modules/object-record/record-group/components/RecordGroupReorderConfirmationModal.tsx +++ b/packages/twenty-front/src/modules/object-record/record-group/components/RecordGroupReorderConfirmationModal.tsx @@ -1,9 +1,8 @@ -import { isRecordGroupReorderConfirmationModalVisibleState } from '@/object-record/record-group/states/isRecordGroupReorderConfirmationModalVisibleState'; +import { RECORD_GROUP_REORDER_CONFIRMATION_MODAL_ID } from '@/object-record/record-group/constants/RecordGroupReorderConfirmationModalId'; import { recordIndexRecordGroupSortComponentState } from '@/object-record/record-index/states/recordIndexRecordGroupSortComponentState'; import { ConfirmationModal } from '@/ui/layout/modal/components/ConfirmationModal'; import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; import { createPortal } from 'react-dom'; -import { useRecoilState } from 'recoil'; type RecordGroupReorderConfirmationModalProps = { onConfirmClick: () => void; @@ -12,23 +11,13 @@ type RecordGroupReorderConfirmationModalProps = { export const RecordGroupReorderConfirmationModal = ({ onConfirmClick, }: RecordGroupReorderConfirmationModalProps) => { - const [ - isRecordGroupReorderConfirmationModalVisible, - setIsRecordGroupReorderConfirmationModalVisible, - ] = useRecoilState(isRecordGroupReorderConfirmationModalVisibleState); - const recordGroupSort = useRecoilComponentValueV2( recordIndexRecordGroupSortComponentState, ); - if (!isRecordGroupReorderConfirmationModalVisible) { - return null; - } - return createPortal( | null>(null); @@ -58,7 +56,7 @@ export const useRecordGroupReorderConfirmationModal = ({ const handleDragEndWithModal: OnDragEndResponder = (result, provided) => { if (!isDragableSortRecordGroup) { - setIsRecordGroupReorderConfirmationModalVisible(true); + openModal(RECORD_GROUP_REORDER_CONFIRMATION_MODAL_ID); setActiveDropdownFocusIdAndMemorizePrevious(null); setPendingDragEndHandlerParams([result, provided]); } else { diff --git a/packages/twenty-front/src/modules/object-record/record-group/states/isRecordGroupReorderConfirmationModalVisibleState.ts b/packages/twenty-front/src/modules/object-record/record-group/states/isRecordGroupReorderConfirmationModalVisibleState.ts deleted file mode 100644 index 3f0d0c047..000000000 --- a/packages/twenty-front/src/modules/object-record/record-group/states/isRecordGroupReorderConfirmationModalVisibleState.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { atom } from 'recoil'; - -export const isRecordGroupReorderConfirmationModalVisibleState = atom({ - key: 'isRecordGroupReorderConfirmationModalVisibleState', - default: false, -}); diff --git a/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexBoardContainer.tsx b/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexBoardContainer.tsx index 3a9426497..044753bae 100644 --- a/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexBoardContainer.tsx +++ b/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexBoardContainer.tsx @@ -9,7 +9,10 @@ import { RecordBoardBodyEscapeHotkeyEffect } from '@/object-record/record-board/ import { RecordBoardHotkeyEffect } from '@/object-record/record-board/components/RecordBoardHotkeyEffect'; import { RecordBoardContext } from '@/object-record/record-board/contexts/RecordBoardContext'; import { RecordIndexRemoveSortingModal } from '@/object-record/record-index/components/RecordIndexRemoveSortingModal'; +import { RECORD_INDEX_REMOVE_SORTING_MODAL_ID } from '@/object-record/record-index/constants/RecordIndexRemoveSortingModalId'; import { recordIndexKanbanFieldMetadataIdState } from '@/object-record/record-index/states/recordIndexKanbanFieldMetadataIdState'; +import { isModalOpenedComponentState } from '@/ui/layout/modal/states/isModalOpenedComponentState'; +import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; type RecordIndexBoardContainerProps = { recordBoardId: string; viewBarId: string; @@ -39,6 +42,11 @@ export const RecordIndexBoardContainer = ({ shouldMatchRootQueryFilter: true, }); + const isRecordIndexRemoveSortingModalOpened = useRecoilComponentValueV2( + isModalOpenedComponentState, + RECORD_INDEX_REMOVE_SORTING_MODAL_ID, + ); + if (!selectFieldMetadataItem) { return; } @@ -55,7 +63,9 @@ export const RecordIndexBoardContainer = ({ }} > - + {isRecordIndexRemoveSortingModalOpened && ( + + )} diff --git a/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexRemoveSortingModal.tsx b/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexRemoveSortingModal.tsx index da92e0b14..ac666a060 100644 --- a/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexRemoveSortingModal.tsx +++ b/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexRemoveSortingModal.tsx @@ -1,8 +1,6 @@ -import { useRecoilState } from 'recoil'; - +import { RECORD_INDEX_REMOVE_SORTING_MODAL_ID } from '@/object-record/record-index/constants/RecordIndexRemoveSortingModalId'; import { useRemoveRecordSort } from '@/object-record/record-sort/hooks/useRemoveRecordSort'; import { currentRecordSortsComponentState } from '@/object-record/record-sort/states/currentRecordSortsComponentState'; -import { isRemoveSortingModalOpenState } from '@/object-record/record-table/states/isRemoveSortingModalOpenState'; import { ConfirmationModal } from '@/ui/layout/modal/components/ConfirmationModal'; import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; @@ -14,8 +12,6 @@ export const RecordIndexRemoveSortingModal = () => { const fieldMetadataIds = currentRecordSorts.map( (viewSort) => viewSort.fieldMetadataId, ); - const [isRemoveSortingModalOpen, setIsRemoveSortingModalOpen] = - useRecoilState(isRemoveSortingModalOpenState); const { removeRecordSort } = useRemoveRecordSort(); @@ -26,15 +22,12 @@ export const RecordIndexRemoveSortingModal = () => { }; return ( - <> - - + ); }; diff --git a/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexTableContainer.tsx b/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexTableContainer.tsx index 038f69506..960167afa 100644 --- a/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexTableContainer.tsx +++ b/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexTableContainer.tsx @@ -1,8 +1,11 @@ import { useUpdateOneRecord } from '@/object-record/hooks/useUpdateOneRecord'; import { RecordUpdateHookParams } from '@/object-record/record-field/contexts/FieldContext'; import { RecordIndexRemoveSortingModal } from '@/object-record/record-index/components/RecordIndexRemoveSortingModal'; +import { RECORD_INDEX_REMOVE_SORTING_MODAL_ID } from '@/object-record/record-index/constants/RecordIndexRemoveSortingModalId'; import { useRecordIndexContextOrThrow } from '@/object-record/record-index/contexts/RecordIndexContext'; import { RecordTableWithWrappers } from '@/object-record/record-table/components/RecordTableWithWrappers'; +import { isModalOpenedComponentState } from '@/ui/layout/modal/states/isModalOpenedComponentState'; +import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; type RecordIndexTableContainerProps = { recordTableId: string; @@ -15,6 +18,11 @@ export const RecordIndexTableContainer = ({ }: RecordIndexTableContainerProps) => { const { objectNameSingular } = useRecordIndexContextOrThrow(); + const isRecordIndexRemoveSortingModalOpened = useRecoilComponentValueV2( + isModalOpenedComponentState, + RECORD_INDEX_REMOVE_SORTING_MODAL_ID, + ); + const { updateOneRecord } = useUpdateOneRecord({ objectNameSingular, }); @@ -34,7 +42,9 @@ export const RecordIndexTableContainer = ({ viewBarId={viewBarId} updateRecordMutation={updateEntity} /> - + {isRecordIndexRemoveSortingModalOpened && ( + + )} ); }; diff --git a/packages/twenty-front/src/modules/object-record/record-index/constants/RecordIndexRemoveSortingModalId.ts b/packages/twenty-front/src/modules/object-record/record-index/constants/RecordIndexRemoveSortingModalId.ts new file mode 100644 index 000000000..1eb029921 --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-index/constants/RecordIndexRemoveSortingModalId.ts @@ -0,0 +1,2 @@ +export const RECORD_INDEX_REMOVE_SORTING_MODAL_ID = + 'record-index-remove-sorting-modal'; diff --git a/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationRecordsListItem.tsx b/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationRecordsListItem.tsx index 0c67bd71c..a34057399 100644 --- a/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationRecordsListItem.tsx +++ b/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationRecordsListItem.tsx @@ -1,7 +1,7 @@ import { css } from '@emotion/react'; import styled from '@emotion/styled'; import { motion } from 'framer-motion'; -import { useCallback, useContext, useState } from 'react'; +import { useCallback, useContext } from 'react'; import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem'; import { useObjectMetadataItems } from '@/object-metadata/hooks/useObjectMetadataItems'; @@ -34,6 +34,7 @@ import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/Drop import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown'; import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope'; import { ConfirmationModal } from '@/ui/layout/modal/components/ConfirmationModal'; +import { useModal } from '@/ui/layout/modal/hooks/useModal'; import { createPortal } from 'react-dom'; import { IconChevronDown, @@ -87,6 +88,8 @@ const StyledClickableZone = styled.div` const MotionIconChevronDown = motion.create(IconChevronDown); +const DELETE_RELATION_MODAL_ID = 'delete-relation-modal'; + type RecordDetailRelationRecordsListItemProps = { isExpanded: boolean; onClick: (relationRecordId: string) => void; @@ -100,8 +103,7 @@ export const RecordDetailRelationRecordsListItem = ({ }: RecordDetailRelationRecordsListItemProps) => { const { fieldDefinition } = useContext(FieldContext); - const [isDeleteRelationModalOpen, setIsDeleteRelationModalOpen] = - useState(false); + const { openModal } = useModal(); const { relationFieldMetadataId, @@ -173,13 +175,12 @@ export const RecordDetailRelationRecordsListItem = ({ }; const handleDelete = async () => { - setIsDeleteRelationModalOpen(true); closeDropdown(); + openModal(DELETE_RELATION_MODAL_ID); }; const handleConfirmDelete = async () => { await deleteOneRelationRecord(relationRecord.id); - setIsDeleteRelationModalOpen(false); }; const useUpdateOneObjectRecordMutation: RecordUpdateHook = () => { @@ -306,8 +307,7 @@ export const RecordDetailRelationRecordsListItem = ({ {createPortal( diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyDragDropContextProvider.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyDragDropContextProvider.tsx index fadaacbcb..8eb432828 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyDragDropContextProvider.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyDragDropContextProvider.tsx @@ -1,14 +1,15 @@ import { DragDropContext, DropResult } from '@hello-pangea/dnd'; import { ReactNode } from 'react'; -import { useRecoilCallback, useSetRecoilState } from 'recoil'; +import { useRecoilCallback } from 'recoil'; import { useUpdateOneRecord } from '@/object-record/hooks/useUpdateOneRecord'; import { getDraggedRecordPosition } from '@/object-record/record-board/utils/getDraggedRecordPosition'; +import { RECORD_INDEX_REMOVE_SORTING_MODAL_ID } from '@/object-record/record-index/constants/RecordIndexRemoveSortingModalId'; import { recordIndexAllRecordIdsComponentSelector } from '@/object-record/record-index/states/selectors/recordIndexAllRecordIdsComponentSelector'; import { currentRecordSortsComponentState } from '@/object-record/record-sort/states/currentRecordSortsComponentState'; import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState'; import { useRecordTableContextOrThrow } from '@/object-record/record-table/contexts/RecordTableContext'; -import { isRemoveSortingModalOpenState } from '@/object-record/record-table/states/isRemoveSortingModalOpenState'; +import { useModal } from '@/ui/layout/modal/hooks/useModal'; import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue'; import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2'; import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; @@ -33,15 +34,13 @@ export const RecordTableBodyDragDropContextProvider = ({ currentRecordSortsComponentState, ); - const setIsRemoveSortingModalOpen = useSetRecoilState( - isRemoveSortingModalOpenState, - ); + const { openModal } = useModal(); const handleDragEnd = useRecoilCallback( ({ snapshot }) => (result: DropResult) => { if (currentRecordSorts.length > 0) { - setIsRemoveSortingModalOpen(true); + openModal(RECORD_INDEX_REMOVE_SORTING_MODAL_ID); return; } @@ -100,10 +99,10 @@ export const RecordTableBodyDragDropContextProvider = ({ }); }, [ + currentRecordSorts.length, recordIndexAllRecordIdsSelector, - setIsRemoveSortingModalOpen, updateOneRow, - currentRecordSorts, + openModal, ], ); diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyRecordGroupDragDropContextProvider.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyRecordGroupDragDropContextProvider.tsx index 649ae53a0..f49a6269b 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyRecordGroupDragDropContextProvider.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyRecordGroupDragDropContextProvider.tsx @@ -1,15 +1,16 @@ import { DragDropContext, DropResult } from '@hello-pangea/dnd'; import { ReactNode } from 'react'; -import { useRecoilCallback, useSetRecoilState } from 'recoil'; +import { useRecoilCallback } from 'recoil'; import { useUpdateOneRecord } from '@/object-record/hooks/useUpdateOneRecord'; import { getDraggedRecordPosition } from '@/object-record/record-board/utils/getDraggedRecordPosition'; import { recordGroupDefinitionFamilyState } from '@/object-record/record-group/states/recordGroupDefinitionFamilyState'; +import { RECORD_INDEX_REMOVE_SORTING_MODAL_ID } from '@/object-record/record-index/constants/RecordIndexRemoveSortingModalId'; import { recordIndexRecordIdsByGroupComponentFamilyState } from '@/object-record/record-index/states/recordIndexRecordIdsByGroupComponentFamilyState'; import { currentRecordSortsComponentState } from '@/object-record/record-sort/states/currentRecordSortsComponentState'; import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState'; import { useRecordTableContextOrThrow } from '@/object-record/record-table/contexts/RecordTableContext'; -import { isRemoveSortingModalOpenState } from '@/object-record/record-table/states/isRemoveSortingModalOpenState'; +import { useModal } from '@/ui/layout/modal/hooks/useModal'; import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2'; import { getSnapshotValue } from '@/ui/utilities/state/utils/getSnapshotValue'; import { isDefined } from 'twenty-shared/utils'; @@ -26,9 +27,7 @@ export const RecordTableBodyRecordGroupDragDropContextProvider = ({ objectNameSingular, }); - const setIsRemoveSortingModalOpen = useSetRecoilState( - isRemoveSortingModalOpenState, - ); + const { openModal } = useModal(); const recordIdsByGroupFamilyState = useRecoilComponentCallbackStateV2( recordIndexRecordIdsByGroupComponentFamilyState, @@ -73,7 +72,7 @@ export const RecordTableBodyRecordGroupDragDropContextProvider = ({ } if (currentRecordSorts.length > 0) { - setIsRemoveSortingModalOpen(true); + openModal(RECORD_INDEX_REMOVE_SORTING_MODAL_ID); return; } @@ -130,11 +129,11 @@ export const RecordTableBodyRecordGroupDragDropContextProvider = ({ }); }, [ + currentRecordSortsCallbackState, objectMetadataItem.fields, recordIdsByGroupFamilyState, updateOneRow, - setIsRemoveSortingModalOpen, - currentRecordSortsCallbackState, + openModal, ], ); diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/isRemoveSortingModalOpenState.ts b/packages/twenty-front/src/modules/object-record/record-table/states/isRemoveSortingModalOpenState.ts deleted file mode 100644 index 32bbf386e..000000000 --- a/packages/twenty-front/src/modules/object-record/record-table/states/isRemoveSortingModalOpenState.ts +++ /dev/null @@ -1,5 +0,0 @@ -import { createState } from 'twenty-ui/utilities'; -export const isRemoveSortingModalOpenState = createState({ - key: 'isRemoveSortingModalOpenState', - defaultValue: false, -}); diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsRowDropdownMenu.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsRowDropdownMenu.tsx index e6326042c..89746411e 100644 --- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsRowDropdownMenu.tsx +++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsRowDropdownMenu.tsx @@ -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); }} /> } /> diff --git a/packages/twenty-front/src/modules/settings/profile/components/DeleteAccount.tsx b/packages/twenty-front/src/modules/settings/profile/components/DeleteAccount.tsx index 694ffcd93..11e9e1e08 100644 --- a/packages/twenty-front/src/modules/settings/profile/components/DeleteAccount.tsx +++ b/packages/twenty-front/src/modules/settings/profile/components/DeleteAccount.tsx @@ -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 = () => {