From 5b18080294a92cc893942cf0acab6a98a58a348e Mon Sep 17 00:00:00 2001 From: zfurtak Date: Mon, 26 Aug 2024 12:42:15 +0200 Subject: [PATCH 1/5] Revert "Merge pull request #47882 from Expensify/arosiclair-revert-47341" This reverts commit 804bd26501ffcd16674d5ceb8f70b889f44c8c36, reversing changes made to 2026c7841091fc2acd5573a46b28ea03c40d8bfe. --- src/components/AttachmentModal.tsx | 1 + src/components/AvatarWithImagePicker.tsx | 38 +++++++++---------- .../ButtonWithDropdownMenu/index.tsx | 4 +- src/components/PopoverMenu.tsx | 11 ++++++ .../Navigation/AppNavigator/AuthScreens.tsx | 6 ++- src/libs/actions/Modal.ts | 6 ++- .../AttachmentPickerWithMenuItems.tsx | 15 ++++---- .../request/step/IOURequestStepWaypoint.tsx | 8 ++-- src/pages/workspace/WorkspacesListPage.tsx | 13 +++---- .../accounting/PolicyAccountingPage.tsx | 7 ++-- 10 files changed, 62 insertions(+), 47 deletions(-) diff --git a/src/components/AttachmentModal.tsx b/src/components/AttachmentModal.tsx index 782a7c2becac..28f44aabb068 100644 --- a/src/components/AttachmentModal.tsx +++ b/src/components/AttachmentModal.tsx @@ -435,6 +435,7 @@ function AttachmentModal({ onSelected: () => { setIsDeleteReceiptConfirmModalVisible(true); }, + shouldCallAfterModalHide: true, }); } return menuItems; diff --git a/src/components/AvatarWithImagePicker.tsx b/src/components/AvatarWithImagePicker.tsx index a1b8524dd293..8a018101b63e 100644 --- a/src/components/AvatarWithImagePicker.tsx +++ b/src/components/AvatarWithImagePicker.tsx @@ -11,7 +11,6 @@ import * as FileUtils from '@libs/fileDownload/FileUtils'; import getImageResolution from '@libs/fileDownload/getImageResolution'; import type {AvatarSource} from '@libs/UserUtils'; import variables from '@styles/variables'; -import * as Modal from '@userActions/Modal'; import CONST from '@src/CONST'; import type {TranslationPaths} from '@src/languages/types'; import type * as OnyxCommon from '@src/types/onyx/OnyxCommon'; @@ -44,6 +43,7 @@ type MenuItem = { icon: IconAsset; text: string; onSelected: () => void; + shouldCallAfterModalHide?: boolean; }; type AvatarWithImagePickerProps = { @@ -260,19 +260,19 @@ function AvatarWithImagePicker({ * Create menu items list for avatar menu */ const createMenuItems = (openPicker: OpenPicker): MenuItem[] => { - const menuItems = [ + const menuItems: MenuItem[] = [ { icon: Expensicons.Upload, text: translate('avatarWithImagePicker.uploadPhoto'), - onSelected: () => - Modal.close(() => { - if (Browser.isSafari()) { - return; - } - openPicker({ - onPicked: showAvatarCropModal, - }); - }), + onSelected: () => { + if (Browser.isSafari()) { + return; + } + openPicker({ + onPicked: showAvatarCropModal, + }); + }, + shouldCallAfterModalHide: true, }, ]; @@ -344,14 +344,14 @@ function AvatarWithImagePicker({ menuItems.push({ icon: Expensicons.Eye, text: translate('avatarWithImagePicker.viewPhoto'), - onSelected: () => - Modal.close(() => { - if (typeof onViewPhotoPress !== 'function') { - show(); - return; - } - onViewPhotoPress(); - }), + onSelected: () => { + if (typeof onViewPhotoPress !== 'function') { + show(); + return; + } + onViewPhotoPress(); + }, + shouldCallAfterModalHide: true, }); } diff --git a/src/components/ButtonWithDropdownMenu/index.tsx b/src/components/ButtonWithDropdownMenu/index.tsx index 943d6dbb5c16..74b38f515a06 100644 --- a/src/components/ButtonWithDropdownMenu/index.tsx +++ b/src/components/ButtonWithDropdownMenu/index.tsx @@ -11,7 +11,6 @@ import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; import mergeRefs from '@libs/mergeRefs'; -import * as Modal from '@userActions/Modal'; import CONST from '@src/CONST'; import type {AnchorPosition} from '@src/styles'; import type {ButtonWithDropdownMenuProps} from './types'; @@ -178,11 +177,12 @@ function ButtonWithDropdownMenu({ menuItems={options.map((item, index) => ({ ...item, onSelected: item.onSelected - ? () => Modal.close(() => item.onSelected?.()) + ? () => item.onSelected?.() : () => { onOptionSelected?.(item); setSelectedItemIndex(index); }, + shouldCallAfterModalHide: true, }))} /> )} diff --git a/src/components/PopoverMenu.tsx b/src/components/PopoverMenu.tsx index 0846e27100da..a1ea786cc90d 100644 --- a/src/components/PopoverMenu.tsx +++ b/src/components/PopoverMenu.tsx @@ -8,6 +8,7 @@ import useKeyboardShortcut from '@hooks/useKeyboardShortcut'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; +import * as Modal from '@userActions/Modal'; import CONST from '@src/CONST'; import type {AnchorPosition} from '@src/styles'; import type AnchorAlignment from '@src/types/utils/AnchorAlignment'; @@ -35,6 +36,11 @@ type PopoverMenuItem = MenuItemProps & { /** Determines whether the menu item is disabled or not */ disabled?: boolean; + + /** Determines whether the menu item's onSelected() function is called after the modal is hidden + * It is meant to be used in situations where, after clicking on the modal, another one is opened. + */ + shouldCallAfterModalHide?: boolean; }; type PopoverModalProps = Pick; @@ -128,6 +134,11 @@ function PopoverMenu({ setEnteredSubMenuIndexes([...enteredSubMenuIndexes, index]); const selectedSubMenuItemIndex = selectedItem?.subMenuItems.findIndex((option) => option.isSelected); setFocusedIndex(selectedSubMenuItemIndex); + } else if (selectedItem.shouldCallAfterModalHide) { + Modal.close(() => { + onItemSelected(selectedItem, index); + selectedItem.onSelected?.(); + }); } else { onItemSelected(selectedItem, index); selectedItem.onSelected?.(); diff --git a/src/libs/Navigation/AppNavigator/AuthScreens.tsx b/src/libs/Navigation/AppNavigator/AuthScreens.tsx index 4bbdac7b17b1..a9ac258a3533 100644 --- a/src/libs/Navigation/AppNavigator/AuthScreens.tsx +++ b/src/libs/Navigation/AppNavigator/AuthScreens.tsx @@ -305,7 +305,11 @@ function AuthScreens({session, lastOpenedPublicRoomID, initialLastUpdateIDApplie const unsubscribeSearchShortcut = KeyboardShortcut.subscribe( searchShortcutConfig.shortcutKey, () => { - Modal.close(Session.checkIfActionIsAllowed(() => Navigation.navigate(ROUTES.CHAT_FINDER))); + Modal.close( + Session.checkIfActionIsAllowed(() => Navigation.navigate(ROUTES.CHAT_FINDER)), + true, + true, + ); }, shortcutsOverviewShortcutConfig.descriptionKey, shortcutsOverviewShortcutConfig.modifiers, diff --git a/src/libs/actions/Modal.ts b/src/libs/actions/Modal.ts index 9cba7a359537..01ac832336ab 100644 --- a/src/libs/actions/Modal.ts +++ b/src/libs/actions/Modal.ts @@ -5,6 +5,7 @@ const closeModals: Array<(isNavigating?: boolean) => void> = []; let onModalClose: null | (() => void); let isNavigate: undefined | boolean; +let shouldCloseAll: boolean | undefined; /** * Allows other parts of the app to call modal close function @@ -39,12 +40,13 @@ function closeTop() { /** * Close modal in other parts of the app */ -function close(onModalCloseCallback: () => void, isNavigating = true) { +function close(onModalCloseCallback: () => void, isNavigating = true, shouldCloseAllModals = false) { if (closeModals.length === 0) { onModalCloseCallback(); return; } onModalClose = onModalCloseCallback; + shouldCloseAll = shouldCloseAllModals; isNavigate = isNavigating; closeTop(); } @@ -53,7 +55,7 @@ function onModalDidClose() { if (!onModalClose) { return; } - if (closeModals.length) { + if (closeModals.length && shouldCloseAll) { closeTop(); return; } diff --git a/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.tsx b/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.tsx index 5d7b5b1390c2..6e3c3a48de74 100644 --- a/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.tsx +++ b/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.tsx @@ -23,7 +23,6 @@ import Navigation from '@libs/Navigation/Navigation'; import * as ReportUtils from '@libs/ReportUtils'; import * as SubscriptionUtils from '@libs/SubscriptionUtils'; import * as IOU from '@userActions/IOU'; -import * as Modal from '@userActions/Modal'; import * as Report from '@userActions/Report'; import * as Task from '@userActions/Task'; import type {IOUType} from '@src/CONST'; @@ -225,13 +224,13 @@ function AttachmentPickerWithMenuItems({ { icon: Expensicons.Paperclip, text: translate('reportActionCompose.addAttachment'), - onSelected: () => - Modal.close(() => { - if (Browser.isSafari()) { - return; - } - triggerAttachmentPicker(); - }), + onSelected: () => { + if (Browser.isSafari()) { + return; + } + triggerAttachmentPicker(); + }, + shouldCallAfterModalHide: true, }, ]; return ( diff --git a/src/pages/iou/request/step/IOURequestStepWaypoint.tsx b/src/pages/iou/request/step/IOURequestStepWaypoint.tsx index 71c42acefdaa..802967345fb6 100644 --- a/src/pages/iou/request/step/IOURequestStepWaypoint.tsx +++ b/src/pages/iou/request/step/IOURequestStepWaypoint.tsx @@ -23,7 +23,6 @@ import useWindowDimensions from '@hooks/useWindowDimensions'; import * as ErrorUtils from '@libs/ErrorUtils'; import Navigation from '@libs/Navigation/Navigation'; import * as ValidationUtils from '@libs/ValidationUtils'; -import * as Modal from '@userActions/Modal'; import * as Transaction from '@userActions/Transaction'; import CONST from '@src/CONST'; import type {TranslationPaths} from '@src/languages/types'; @@ -179,11 +178,10 @@ function IOURequestStepWaypoint({ icon: Expensicons.Trashcan, text: translate('distance.deleteWaypoint'), onSelected: () => { - Modal.close(() => { - setRestoreFocusType(undefined); - setIsDeleteStopModalOpen(true); - }); + setRestoreFocusType(undefined); + setIsDeleteStopModalOpen(true); }, + shouldCallAfterModalHide: true, }, ]} /> diff --git a/src/pages/workspace/WorkspacesListPage.tsx b/src/pages/workspace/WorkspacesListPage.tsx index 94fb454c4a2d..d4ff46e268f8 100755 --- a/src/pages/workspace/WorkspacesListPage.tsx +++ b/src/pages/workspace/WorkspacesListPage.tsx @@ -32,7 +32,6 @@ import * as PolicyUtils from '@libs/PolicyUtils'; import * as ReportUtils from '@libs/ReportUtils'; import type {AvatarSource} from '@libs/UserUtils'; import * as App from '@userActions/App'; -import * as Modal from '@userActions/Modal'; import * as Policy from '@userActions/Policy/Policy'; import * as Session from '@userActions/Session'; import CONST from '@src/CONST'; @@ -162,12 +161,12 @@ function WorkspacesListPage({policies, reimbursementAccount, reports, session}: threeDotsMenuItems.push({ icon: Expensicons.Trashcan, text: translate('workspace.common.delete'), - onSelected: () => - Modal.close(() => { - setPolicyIDToDelete(item.policyID ?? '-1'); - setPolicyNameToDelete(item.title); - setIsDeleteModalOpen(true); - }), + onSelected: () => { + setPolicyIDToDelete(item.policyID ?? '-1'); + setPolicyNameToDelete(item.title); + setIsDeleteModalOpen(true); + }, + shouldCallAfterModalHide: true, }); } diff --git a/src/pages/workspace/accounting/PolicyAccountingPage.tsx b/src/pages/workspace/accounting/PolicyAccountingPage.tsx index 11c47a21f2e1..107f64dd2dee 100644 --- a/src/pages/workspace/accounting/PolicyAccountingPage.tsx +++ b/src/pages/workspace/accounting/PolicyAccountingPage.tsx @@ -38,7 +38,6 @@ import Navigation from '@navigation/Navigation'; import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper'; import withPolicyConnections from '@pages/workspace/withPolicyConnections'; import type {AnchorPosition} from '@styles/index'; -import * as Modal from '@userActions/Modal'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; @@ -98,7 +97,8 @@ function PolicyAccountingPage({policy}: PolicyAccountingPageProps) { { icon: Expensicons.Key, text: translate('workspace.accounting.enterCredentials'), - onSelected: () => Modal.close(() => startIntegrationFlow({name: connectedIntegration})), + onSelected: () => startIntegrationFlow({name: connectedIntegration}), + shouldCallAfterModalHide: true, disabled: isOffline, iconRight: Expensicons.NewWindow, shouldShowRightIcon: true, @@ -115,7 +115,8 @@ function PolicyAccountingPage({policy}: PolicyAccountingPageProps) { { icon: Expensicons.Trashcan, text: translate('workspace.accounting.disconnect'), - onSelected: () => Modal.close(() => setIsDisconnectModalOpen(true)), + onSelected: () => setIsDisconnectModalOpen(true), + shouldCallAfterModalHide: true, }, ], [shouldShowEnterCredentials, translate, isOffline, policyID, connectedIntegration, startIntegrationFlow], From 0048918e91f2a6fd1900f047cb83aed3852823ef Mon Sep 17 00:00:00 2001 From: zfurtak Date: Mon, 26 Aug 2024 14:14:19 +0200 Subject: [PATCH 2/5] Fix mWeb issues --- src/components/AvatarWithImagePicker.tsx | 3 --- src/components/PopoverMenu.tsx | 3 ++- .../ReportActionCompose/AttachmentPickerWithMenuItems.tsx | 3 --- 3 files changed, 2 insertions(+), 7 deletions(-) diff --git a/src/components/AvatarWithImagePicker.tsx b/src/components/AvatarWithImagePicker.tsx index 8a018101b63e..330f63333af1 100644 --- a/src/components/AvatarWithImagePicker.tsx +++ b/src/components/AvatarWithImagePicker.tsx @@ -265,9 +265,6 @@ function AvatarWithImagePicker({ icon: Expensicons.Upload, text: translate('avatarWithImagePicker.uploadPhoto'), onSelected: () => { - if (Browser.isSafari()) { - return; - } openPicker({ onPicked: showAvatarCropModal, }); diff --git a/src/components/PopoverMenu.tsx b/src/components/PopoverMenu.tsx index a1ea786cc90d..95301ea555de 100644 --- a/src/components/PopoverMenu.tsx +++ b/src/components/PopoverMenu.tsx @@ -8,6 +8,7 @@ import useKeyboardShortcut from '@hooks/useKeyboardShortcut'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; +import * as Browser from '@libs/Browser'; import * as Modal from '@userActions/Modal'; import CONST from '@src/CONST'; import type {AnchorPosition} from '@src/styles'; @@ -134,7 +135,7 @@ function PopoverMenu({ setEnteredSubMenuIndexes([...enteredSubMenuIndexes, index]); const selectedSubMenuItemIndex = selectedItem?.subMenuItems.findIndex((option) => option.isSelected); setFocusedIndex(selectedSubMenuItemIndex); - } else if (selectedItem.shouldCallAfterModalHide) { + } else if (selectedItem.shouldCallAfterModalHide && !Browser.isSafari()) { Modal.close(() => { onItemSelected(selectedItem, index); selectedItem.onSelected?.(); diff --git a/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.tsx b/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.tsx index 6e3c3a48de74..93dad9ca2f8b 100644 --- a/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.tsx +++ b/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.tsx @@ -225,9 +225,6 @@ function AttachmentPickerWithMenuItems({ icon: Expensicons.Paperclip, text: translate('reportActionCompose.addAttachment'), onSelected: () => { - if (Browser.isSafari()) { - return; - } triggerAttachmentPicker(); }, shouldCallAfterModalHide: true, From c8988d7323187bfcdf3e90678f75849575ff1916 Mon Sep 17 00:00:00 2001 From: zfurtak Date: Wed, 28 Aug 2024 11:34:33 +0200 Subject: [PATCH 3/5] Fixed updating photo --- src/components/AvatarWithImagePicker.tsx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/components/AvatarWithImagePicker.tsx b/src/components/AvatarWithImagePicker.tsx index 330f63333af1..19ad2a9fafda 100644 --- a/src/components/AvatarWithImagePicker.tsx +++ b/src/components/AvatarWithImagePicker.tsx @@ -219,6 +219,7 @@ function AvatarWithImagePicker({ */ const showAvatarCropModal = useCallback( (image: FileObject) => { + console.log('IMAGE: ', image); if (!isValidExtension(image)) { setError('avatarWithImagePicker.notAllowedExtension', {allowedExtensions: CONST.AVATAR_ALLOWED_EXTENSIONS}); return; @@ -265,6 +266,9 @@ function AvatarWithImagePicker({ icon: Expensicons.Upload, text: translate('avatarWithImagePicker.uploadPhoto'), onSelected: () => { + if (Browser.isSafari()) { + return; + } openPicker({ onPicked: showAvatarCropModal, }); @@ -408,7 +412,9 @@ function AvatarWithImagePicker({ // In order for the file picker to open dynamically, the click // function must be called from within an event handler that was initiated // by the user on Safari. + console.log('INDEX: ', index); if (index === 0 && Browser.isSafari()) { + console.log('hejo'); openPicker({ onPicked: showAvatarCropModal, }); From 8e6c8ac75e884c2860959e4739211b1f5fbf19d4 Mon Sep 17 00:00:00 2001 From: zfurtak Date: Wed, 28 Aug 2024 11:55:20 +0200 Subject: [PATCH 4/5] Removed console logs --- src/components/AvatarWithImagePicker.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/components/AvatarWithImagePicker.tsx b/src/components/AvatarWithImagePicker.tsx index 19ad2a9fafda..8a018101b63e 100644 --- a/src/components/AvatarWithImagePicker.tsx +++ b/src/components/AvatarWithImagePicker.tsx @@ -219,7 +219,6 @@ function AvatarWithImagePicker({ */ const showAvatarCropModal = useCallback( (image: FileObject) => { - console.log('IMAGE: ', image); if (!isValidExtension(image)) { setError('avatarWithImagePicker.notAllowedExtension', {allowedExtensions: CONST.AVATAR_ALLOWED_EXTENSIONS}); return; @@ -412,9 +411,7 @@ function AvatarWithImagePicker({ // In order for the file picker to open dynamically, the click // function must be called from within an event handler that was initiated // by the user on Safari. - console.log('INDEX: ', index); if (index === 0 && Browser.isSafari()) { - console.log('hejo'); openPicker({ onPicked: showAvatarCropModal, }); From 68be6ffd903c38a24d51101d4571b064006f3e7e Mon Sep 17 00:00:00 2001 From: zfurtak Date: Thu, 29 Aug 2024 11:51:35 +0200 Subject: [PATCH 5/5] Fixed attachment picker on mWeb ios --- .../ReportActionCompose/AttachmentPickerWithMenuItems.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.tsx b/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.tsx index 93dad9ca2f8b..6e3c3a48de74 100644 --- a/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.tsx +++ b/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.tsx @@ -225,6 +225,9 @@ function AttachmentPickerWithMenuItems({ icon: Expensicons.Paperclip, text: translate('reportActionCompose.addAttachment'), onSelected: () => { + if (Browser.isSafari()) { + return; + } triggerAttachmentPicker(); }, shouldCallAfterModalHide: true,