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 623127dde4..2f4f0a364b 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 f7388b7e99..6cba6bc5d5 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 6a67ce0d81..8021713e43 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 e559b1eec7..2e8d02edfb 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 a2ae0f2c86..8ddc0ae6be 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 2381b639f7..65037554e5 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 14feb16cc9..fd11046140 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 962882f12f..512570224a 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 b6f718bff2..952b78a14e 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 4058ea57d8..353705f974 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 1fa6575f54..112f676dd1 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 6463ba7175..bd189b0d2f 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 5252c7f163..51f31ebb24 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 042bc94524..b7e6ffce9c 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 4ca6e75dc0..4c4eab7f21 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 ccf60b71e1..954d0dfbad 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 ed12ff85c8..118a68f12f 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 96bd2ba4d4..46114c900f 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 cce6d214e1..d12e6296b4 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 5468cf99c3..663043cd28 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 7457de22e2..55aaaeb48b 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 5c63a71994..90a7163ed9 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 6ebc475a05..1feb257551 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 7ee2209051..9298caf28e 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 f6bf963a5a..877a9028c9 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 b461837e00..a406b09462 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 0000000000..37f1483b20 --- /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 0000000000..934f56df24 --- /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 af9df4878a..1912b04588 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 9a3f854099..273d231418 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 b8fc7682b8..10d479c4a0 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 0000000000..f010854038 --- /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 04b57f57fa..2ed3b0e160 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 ab3a265203..e774a3403b 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 3f0d0c0475..0000000000 --- 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 3a9426497b..044753baef 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 da92e0b14f..ac666a0600 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 038f69506f..960167afa5 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 0000000000..1eb029921e --- /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 0c67bd71c7..a34057399b 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 fadaacbcb0..8eb432828e 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 649ae53a0b..f49a6269be 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 32bbf386eb..0000000000 --- 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 e6326042ca..89746411e1 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 694ffcd93b..11e9e1e08d 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 = () => {