From 9d21c42bfbbe98fb845483b06322fb32560fd040 Mon Sep 17 00:00:00 2001 From: Bartosz Grajdek Date: Mon, 10 Feb 2025 15:47:33 +0100 Subject: [PATCH 1/4] feat: enable new modal in report action context menu --- .../home/report/ContextMenu/BaseReportActionContextMenu.tsx | 5 ++++- .../report/ContextMenu/PopoverReportActionContextMenu.tsx | 1 + 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/src/pages/home/report/ContextMenu/BaseReportActionContextMenu.tsx b/src/pages/home/report/ContextMenu/BaseReportActionContextMenu.tsx index 3baed0dec995..73cd5b811aba 100755 --- a/src/pages/home/report/ContextMenu/BaseReportActionContextMenu.tsx +++ b/src/pages/home/report/ContextMenu/BaseReportActionContextMenu.tsx @@ -18,6 +18,7 @@ import usePaginatedReportActions from '@hooks/usePaginatedReportActions'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useRestoreInputFocus from '@hooks/useRestoreInputFocus'; import useStyleUtils from '@hooks/useStyleUtils'; +import getPlatform from '@libs/getPlatform'; import {getPolicy, getWorkspaceAccountID, isPolicyAdmin as PolicyUtilsIsPolicyAdmin} from '@libs/PolicyUtils'; import {getLinkedTransactionID, getOneTransactionThreadReportID, getOriginalMessage, getReportAction, isActionOfType} from '@libs/ReportActionsUtils'; import { @@ -323,9 +324,11 @@ function BaseReportActionContextMenu({ const cardID = cardIssuedActionOriginalMessage?.cardID ?? CONST.DEFAULT_NUMBER_ID; const isPolicyAdmin = PolicyUtilsIsPolicyAdmin(getPolicy(policyID)); const card = isPolicyAdmin ? cardsList?.[cardID] : cardList[cardID]; + const isUsingBottomDockedModal = + getPlatform() === CONST.PLATFORM.ANDROID || getPlatform() === CONST.PLATFORM.IOS || (shouldUseNarrowLayout && getPlatform(true) === CONST.PLATFORM.MOBILEWEB); return ( - (isVisible || shouldKeepOpen) && ( + (isVisible || shouldKeepOpen || isUsingBottomDockedModal) && ( Date: Mon, 10 Feb 2025 15:53:52 +0100 Subject: [PATCH 2/4] fix: slide out animation not appearing --- .../home/report/ContextMenu/PopoverReportActionContextMenu.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/pages/home/report/ContextMenu/PopoverReportActionContextMenu.tsx b/src/pages/home/report/ContextMenu/PopoverReportActionContextMenu.tsx index 992e8e359532..0d22e8cd20de 100644 --- a/src/pages/home/report/ContextMenu/PopoverReportActionContextMenu.tsx +++ b/src/pages/home/report/ContextMenu/PopoverReportActionContextMenu.tsx @@ -331,7 +331,6 @@ function PopoverReportActionContextMenu(_props: unknown, ref: ForwardedRef Date: Tue, 11 Feb 2025 10:46:15 +0100 Subject: [PATCH 3/4] fix: eslint issues --- src/libs/actions/Report.ts | 4 +-- .../BaseReportActionContextMenu.tsx | 4 +-- .../PopoverReportActionContextMenu.tsx | 30 +++++++++---------- 3 files changed, 19 insertions(+), 19 deletions(-) diff --git a/src/libs/actions/Report.ts b/src/libs/actions/Report.ts index bc051f1472bb..8c8ee6a674dd 100644 --- a/src/libs/actions/Report.ts +++ b/src/libs/actions/Report.ts @@ -1579,11 +1579,11 @@ function handleReportChanged(report: OnyxEntry) { } /** Deletes a comment from the report, basically sets it as empty string */ -function deleteReportComment(reportID: string, reportAction: ReportAction) { +function deleteReportComment(reportID: string | undefined, reportAction: ReportAction) { const originalReportID = getOriginalReportID(reportID, reportAction); const reportActionID = reportAction.reportActionID; - if (!reportActionID || !originalReportID) { + if (!reportActionID || !originalReportID || !reportID) { return; } diff --git a/src/pages/home/report/ContextMenu/BaseReportActionContextMenu.tsx b/src/pages/home/report/ContextMenu/BaseReportActionContextMenu.tsx index 73cd5b811aba..d703cd02fb1b 100755 --- a/src/pages/home/report/ContextMenu/BaseReportActionContextMenu.tsx +++ b/src/pages/home/report/ContextMenu/BaseReportActionContextMenu.tsx @@ -47,7 +47,7 @@ type BaseReportActionContextMenuProps = { reportID: string | undefined; /** The ID of the report action this context menu is attached to. */ - reportActionID: string; + reportActionID: string | undefined; /** The ID of the original report from which the given reportAction is first created. */ // originalReportID is used in withOnyx to get the reportActions for the original report @@ -152,7 +152,7 @@ function BaseReportActionContextMenu({ const [cardsList] = useOnyx(`${ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST}${workspaceAccountID}_${CONST.EXPENSIFY_CARD.BANK}`); const reportAction: OnyxEntry = useMemo(() => { - if (isEmptyObject(reportActions) || reportActionID === '0' || reportActionID === '-1') { + if (isEmptyObject(reportActions) || !reportActionID || reportActionID === '0' || reportActionID === '-1') { return; } return reportActions[reportActionID]; diff --git a/src/pages/home/report/ContextMenu/PopoverReportActionContextMenu.tsx b/src/pages/home/report/ContextMenu/PopoverReportActionContextMenu.tsx index 0d22e8cd20de..27b8a47dce47 100644 --- a/src/pages/home/report/ContextMenu/PopoverReportActionContextMenu.tsx +++ b/src/pages/home/report/ContextMenu/PopoverReportActionContextMenu.tsx @@ -10,9 +10,9 @@ import ConfirmModal from '@components/ConfirmModal'; import PopoverWithMeasuredContent from '@components/PopoverWithMeasuredContent'; import useLocalize from '@hooks/useLocalize'; import calculateAnchorPosition from '@libs/calculateAnchorPosition'; -import * as ReportActionsUtils from '@libs/ReportActionsUtils'; -import * as IOU from '@userActions/IOU'; -import * as Report from '@userActions/Report'; +import {getOriginalMessage, isMoneyRequestAction, isTrackExpenseAction} from '@libs/ReportActionsUtils'; +import {deleteMoneyRequest, deleteTrackExpense} from '@userActions/IOU'; +import {deleteReportComment} from '@userActions/Report'; import type {AnchorDimensions} from '@src/styles'; import type {ReportAction} from '@src/types/onyx'; import BaseReportActionContextMenu from './BaseReportActionContextMenu'; @@ -33,11 +33,11 @@ function extractPointerEvent(event: GestureResponderEvent | MouseEvent): MouseEv function PopoverReportActionContextMenu(_props: unknown, ref: ForwardedRef) { const {translate} = useLocalize(); - const reportIDRef = useRef('-1'); + const reportIDRef = useRef(); const typeRef = useRef(); const reportActionRef = useRef> | null>(null); - const reportActionIDRef = useRef('-1'); - const originalReportIDRef = useRef('-1'); + const reportActionIDRef = useRef(); + const originalReportIDRef = useRef(); const selectionRef = useRef(''); const reportActionDraftMessageRef = useRef(); @@ -211,10 +211,10 @@ function PopoverReportActionContextMenu(_props: unknown, ref: ForwardedRef { setDisabledActions(disabledOptions); typeRef.current = type; - reportIDRef.current = reportID ?? '-1'; - reportActionIDRef.current = reportActionID ?? '-1'; + reportIDRef.current = reportID; + reportActionIDRef.current = reportActionID; // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing - originalReportIDRef.current = originalReportID || '-1'; + originalReportIDRef.current = originalReportID; selectionRef.current = selection; setIsPopoverVisible(true); reportActionDraftMessageRef.current = draftMessage; @@ -270,15 +270,15 @@ function PopoverReportActionContextMenu(_props: unknown, ref: ForwardedRef { callbackWhenDeleteModalHide.current = runAndResetCallback(onConfirmDeleteModal.current); const reportAction = reportActionRef.current; - if (ReportActionsUtils.isMoneyRequestAction(reportAction)) { - const originalMessage = ReportActionsUtils.getOriginalMessage(reportAction); - if (ReportActionsUtils.isTrackExpenseAction(reportAction)) { - IOU.deleteTrackExpense(reportIDRef.current, originalMessage?.IOUTransactionID ?? '-1', reportAction); + if (isMoneyRequestAction(reportAction)) { + const originalMessage = getOriginalMessage(reportAction); + if (isTrackExpenseAction(reportAction)) { + deleteTrackExpense(reportIDRef.current, originalMessage?.IOUTransactionID, reportAction); } else { - IOU.deleteMoneyRequest(originalMessage?.IOUTransactionID ?? '-1', reportAction); + deleteMoneyRequest(originalMessage?.IOUTransactionID, reportAction); } } else if (reportAction) { - Report.deleteReportComment(reportIDRef.current, reportAction); + deleteReportComment(reportIDRef.current, reportAction); } DeviceEventEmitter.emit(`deletedReportAction_${reportIDRef.current}`, reportAction?.reportActionID); From 4e65f7da9a344c8614622a3d4e688fde4624d8cd Mon Sep 17 00:00:00 2001 From: Bartosz Grajdek Date: Tue, 11 Feb 2025 10:50:09 +0100 Subject: [PATCH 4/4] fix: type mismatch --- .../home/report/ContextMenu/BaseReportActionContextMenu.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/home/report/ContextMenu/BaseReportActionContextMenu.tsx b/src/pages/home/report/ContextMenu/BaseReportActionContextMenu.tsx index d703cd02fb1b..19b807ff4ab9 100755 --- a/src/pages/home/report/ContextMenu/BaseReportActionContextMenu.tsx +++ b/src/pages/home/report/ContextMenu/BaseReportActionContextMenu.tsx @@ -52,7 +52,7 @@ type BaseReportActionContextMenuProps = { /** The ID of the original report from which the given reportAction is first created. */ // originalReportID is used in withOnyx to get the reportActions for the original report // eslint-disable-next-line react/no-unused-prop-types - originalReportID: string; + originalReportID: string | undefined; /** * If true, this component will be a small, row-oriented menu that displays icons but not text.