From 63795685b7b56ad8d525f635baa9ae95a8e00b5c Mon Sep 17 00:00:00 2001 From: Pedro Guerreiro Date: Wed, 9 Oct 2024 21:25:39 +0100 Subject: [PATCH 1/4] feat(debug mode): add debug option to LHN context menu --- src/languages/en.ts | 1 + src/languages/es.ts | 1 + .../home/report/ContextMenu/ContextMenuActions.tsx | 11 +++++++++++ 3 files changed, 13 insertions(+) diff --git a/src/languages/en.ts b/src/languages/en.ts index 5415399807e3..c752b152598f 100755 --- a/src/languages/en.ts +++ b/src/languages/en.ts @@ -648,6 +648,7 @@ const translations = { joinThread: 'Join thread', leaveThread: 'Leave thread', copyOnyxData: 'Copy Onyx data', + debug: 'Debug', flagAsOffensive: 'Flag as offensive', menu: 'Menu', }, diff --git a/src/languages/es.ts b/src/languages/es.ts index fa477e435026..057b6ee835e7 100644 --- a/src/languages/es.ts +++ b/src/languages/es.ts @@ -640,6 +640,7 @@ const translations = { joinThread: 'Unirse al hilo', leaveThread: 'Dejar hilo', copyOnyxData: 'Copiar datos de Onyx', + debug: 'Depurar', flagAsOffensive: 'Marcar como ofensivo', menu: 'Menú', }, diff --git a/src/pages/home/report/ContextMenu/ContextMenuActions.tsx b/src/pages/home/report/ContextMenu/ContextMenuActions.tsx index f66972433a28..ff32ac6ea71e 100644 --- a/src/pages/home/report/ContextMenu/ContextMenuActions.tsx +++ b/src/pages/home/report/ContextMenu/ContextMenuActions.tsx @@ -613,6 +613,17 @@ const ContextMenuActions: ContextMenuAction[] = [ }, getDescription: () => {}, }, + { + isAnonymousAction: true, + textTranslateKey: 'reportActionContextMenu.debug', + icon: Expensicons.Bug, + shouldShow: (type, isProduction) => type === CONST.CONTEXT_MENU_TYPES.REPORT && !isProduction, + onPress: (closePopover, {reportID}) => { + Navigation.navigate(ROUTES.DEBUG_REPORT.getRoute(reportID)); + hideContextMenu(false, ReportActionComposeFocusManager.focus); + }, + getDescription: () => {}, + }, { isAnonymousAction: false, textTranslateKey: 'reportActionContextMenu.deleteAction', From 7665b16438bcb4dee4ba402d9ae97a9dcd6f9c8b Mon Sep 17 00:00:00 2001 From: Pedro Guerreiro Date: Thu, 10 Oct 2024 09:29:24 +0100 Subject: [PATCH 2/4] refactor(debug mode): apply suggestions --- src/languages/en.ts | 1 - src/languages/es.ts | 1 - .../BaseReportActionContextMenu.tsx | 68 +++-------- .../report/ContextMenu/ContextMenuActions.tsx | 111 +++++++----------- 4 files changed, 56 insertions(+), 125 deletions(-) diff --git a/src/languages/en.ts b/src/languages/en.ts index e82df5550203..ab0bf18a082b 100755 --- a/src/languages/en.ts +++ b/src/languages/en.ts @@ -648,7 +648,6 @@ const translations = { joinThread: 'Join thread', leaveThread: 'Leave thread', copyOnyxData: 'Copy Onyx data', - debug: 'Debug', flagAsOffensive: 'Flag as offensive', menu: 'Menu', }, diff --git a/src/languages/es.ts b/src/languages/es.ts index 32a77d544f70..ba58e54160b9 100644 --- a/src/languages/es.ts +++ b/src/languages/es.ts @@ -640,7 +640,6 @@ const translations = { joinThread: 'Unirse al hilo', leaveThread: 'Dejar hilo', copyOnyxData: 'Copiar datos de Onyx', - debug: 'Depurar', flagAsOffensive: 'Marcar como ofensivo', menu: 'Menú', }, diff --git a/src/pages/home/report/ContextMenu/BaseReportActionContextMenu.tsx b/src/pages/home/report/ContextMenu/BaseReportActionContextMenu.tsx index 644adfdd66fc..af2b5051c99e 100755 --- a/src/pages/home/report/ContextMenu/BaseReportActionContextMenu.tsx +++ b/src/pages/home/report/ContextMenu/BaseReportActionContextMenu.tsx @@ -1,11 +1,10 @@ -import lodashIsEqual from 'lodash/isEqual'; import type {MutableRefObject, RefObject} from 'react'; -import React, {memo, useMemo, useRef, useState} from 'react'; +import React, {useMemo, useRef, useState} from 'react'; import {InteractionManager, View} from 'react-native'; // eslint-disable-next-line no-restricted-imports import type {GestureResponderEvent, Text as RNText, View as ViewType} from 'react-native'; import type {OnyxEntry} from 'react-native-onyx'; -import {useOnyx, withOnyx} from 'react-native-onyx'; +import {useOnyx} from 'react-native-onyx'; import type {ContextMenuItemHandle} from '@components/ContextMenuItem'; import ContextMenuItem from '@components/ContextMenuItem'; import FocusTrapForModal from '@components/FocusTrap/FocusTrapForModal'; @@ -23,25 +22,14 @@ import shouldEnableContextMenuEnterShortcut from '@libs/shouldEnableContextMenuE import * as Session from '@userActions/Session'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; -import type {Beta, ReportAction, ReportActions, Transaction} from '@src/types/onyx'; +import type {ReportAction} from '@src/types/onyx'; import {isEmptyObject} from '@src/types/utils/EmptyObject'; import type {ContextMenuAction, ContextMenuActionPayload} from './ContextMenuActions'; import ContextMenuActions from './ContextMenuActions'; import type {ContextMenuAnchor, ContextMenuType} from './ReportActionContextMenu'; import {hideContextMenu, showContextMenu} from './ReportActionContextMenu'; -type BaseReportActionContextMenuOnyxProps = { - /** Beta features list */ - betas: OnyxEntry; - - /** All of the actions of the report */ - reportActions: OnyxEntry; - - /** The transaction linked to the report action this context menu is attached to. */ - transaction: OnyxEntry; -}; - -type BaseReportActionContextMenuProps = BaseReportActionContextMenuOnyxProps & { +type BaseReportActionContextMenuProps = { /** The ID of the report this report action is attached to. */ reportID: string; @@ -114,10 +102,7 @@ function BaseReportActionContextMenu({ selection = '', draftMessage = '', reportActionID, - transaction, reportID, - betas, - reportActions, checkIfContextMenuActive, disabledActions = [], setIsEmojiPickerActive, @@ -131,6 +116,11 @@ function BaseReportActionContextMenu({ const {isOffline} = useNetwork(); const {isProduction} = useEnvironment(); const threedotRef = useRef(null); + const [betas] = useOnyx(ONYXKEYS.BETAS); + const [reportActions] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${reportID}`); + const transactionID = ReportActionsUtils.getLinkedTransactionID(reportActionID, reportID); + const [transaction] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`); + const [user] = useOnyx(ONYXKEYS.USER); const reportAction: OnyxEntry = useMemo(() => { if (isEmptyObject(reportActions) || reportActionID === '0' || reportActionID === '-1') { @@ -185,22 +175,23 @@ function BaseReportActionContextMenu({ let filteredContextMenuActions = ContextMenuActions.filter( (contextAction) => !disabledActions.includes(contextAction) && - contextAction.shouldShow( + contextAction.shouldShow({ type, reportAction, isArchivedRoom, betas, - anchor, + menuTarget: anchor, isChronosReport, reportID, isPinnedChat, isUnreadChat, - !!isOffline, + isOffline: !!isOffline, isMini, isProduction, moneyRequestAction, areHoldRequirementsMet, - ), + user, + }), ); if (isMini) { @@ -358,35 +349,6 @@ function BaseReportActionContextMenu({ ); } -export default withOnyx({ - betas: { - key: ONYXKEYS.BETAS, - }, - reportActions: { - key: ({originalReportID}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${originalReportID}`, - canEvict: false, - }, - transaction: { - key: ({reportActions, reportActionID}) => { - const reportAction = reportActions?.[reportActionID]; - return `${ONYXKEYS.COLLECTION.TRANSACTION}${(reportAction && ReportActionsUtils.getLinkedTransactionID(reportAction)) ?? -1}`; - }, - }, -})( - memo(BaseReportActionContextMenu, (prevProps, nextProps) => { - const {reportActions: prevReportActions, ...prevPropsWithoutReportActions} = prevProps; - const {reportActions: nextReportActions, ...nextPropsWithoutReportActions} = nextProps; - - const prevReportAction = prevReportActions?.[prevProps.reportActionID] ?? ''; - const nextReportAction = nextReportActions?.[nextProps.reportActionID] ?? ''; - - // We only want to re-render when the report action that is attached to is changed - if (prevReportAction !== nextReportAction) { - return false; - } - - return lodashIsEqual(prevPropsWithoutReportActions, nextPropsWithoutReportActions); - }), -); +export default BaseReportActionContextMenu; export type {BaseReportActionContextMenuProps}; diff --git a/src/pages/home/report/ContextMenu/ContextMenuActions.tsx b/src/pages/home/report/ContextMenu/ContextMenuActions.tsx index 64911c67e51b..c31a32b81427 100644 --- a/src/pages/home/report/ContextMenu/ContextMenuActions.tsx +++ b/src/pages/home/report/ContextMenu/ContextMenuActions.tsx @@ -31,7 +31,7 @@ import CONST from '@src/CONST'; import type {TranslationPaths} from '@src/languages/types'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; -import type {Beta, Download as DownloadOnyx, OnyxInputOrEntry, ReportAction, ReportActionReactions, Transaction} from '@src/types/onyx'; +import type {Beta, Download as DownloadOnyx, OnyxInputOrEntry, ReportAction, ReportActionReactions, Transaction, User} from '@src/types/onyx'; import type IconAsset from '@src/types/utils/IconAsset'; import type {ContextMenuAnchor} from './ReportActionContextMenu'; import {hideContextMenu, showDeleteModal} from './ReportActionContextMenu'; @@ -54,22 +54,23 @@ function setClipboardMessage(content: string) { } } -type ShouldShow = ( - type: string, - reportAction: OnyxEntry, - isArchivedRoom: boolean, - betas: OnyxEntry, - menuTarget: MutableRefObject | undefined, - isChronosReport: boolean, - reportID: string, - isPinnedChat: boolean, - isUnreadChat: boolean, - isOffline: boolean, - isMini: boolean, - isProduction: boolean, - moneyRequestAction: ReportAction | undefined, - areHoldRequirementsMet: boolean, -) => boolean; +type ShouldShow = (args: { + type: string; + reportAction: OnyxEntry; + isArchivedRoom: boolean; + betas: OnyxEntry; + menuTarget: MutableRefObject | undefined; + isChronosReport: boolean; + reportID: string; + isPinnedChat: boolean; + isUnreadChat: boolean; + isOffline: boolean; + isMini: boolean; + isProduction: boolean; + moneyRequestAction: ReportAction | undefined; + areHoldRequirementsMet: boolean; + user: OnyxEntry; +}) => boolean; type ContextMenuActionPayload = { reportAction: ReportAction; @@ -119,7 +120,7 @@ type ContextMenuAction = (ContextMenuActionWithContent | ContextMenuActionWithIc const ContextMenuActions: ContextMenuAction[] = [ { isAnonymousAction: false, - shouldShow: (type, reportAction): reportAction is ReportAction => + shouldShow: ({type, reportAction}) => type === CONST.CONTEXT_MENU_TYPES.REPORT_ACTION && !!reportAction && 'message' in reportAction && !ReportActionsUtils.isMessageDeleted(reportAction), renderContent: (closePopover, {reportID, reportAction, close: closeManually, openContextMenu, setIsEmojiPickerActive}) => { const isMini = !closePopover; @@ -176,7 +177,7 @@ const ContextMenuActions: ContextMenuAction[] = [ isAnonymousAction: false, textTranslateKey: 'reportActionContextMenu.replyInThread', icon: Expensicons.ChatBubbleReply, - shouldShow: (type, reportAction, isArchivedRoom, betas, menuTarget, isChronosReport, reportID) => { + shouldShow: ({type, reportAction, reportID}) => { if (type !== CONST.CONTEXT_MENU_TYPES.REPORT_ACTION) { return false; } @@ -204,8 +205,7 @@ const ContextMenuActions: ContextMenuAction[] = [ textTranslateKey: 'reportActionContextMenu.markAsUnread', icon: Expensicons.ChatBubbleUnread, successIcon: Expensicons.Checkmark, - shouldShow: (type, reportAction, isArchivedRoom, betas, menuTarget, isChronosReport, reportID, isPinnedChat, isUnreadChat) => - type === CONST.CONTEXT_MENU_TYPES.REPORT_ACTION || (type === CONST.CONTEXT_MENU_TYPES.REPORT && !isUnreadChat), + shouldShow: ({type, isUnreadChat}) => type === CONST.CONTEXT_MENU_TYPES.REPORT_ACTION || (type === CONST.CONTEXT_MENU_TYPES.REPORT && !isUnreadChat), onPress: (closePopover, {reportAction, reportID}) => { const originalReportID = ReportUtils.getOriginalReportID(reportID, reportAction) ?? '-1'; Report.markCommentAsUnread(originalReportID, reportAction?.created); @@ -220,8 +220,7 @@ const ContextMenuActions: ContextMenuAction[] = [ textTranslateKey: 'reportActionContextMenu.markAsRead', icon: Expensicons.Mail, successIcon: Expensicons.Checkmark, - shouldShow: (type, reportAction, isArchivedRoom, betas, menuTarget, isChronosReport, reportID, isPinnedChat, isUnreadChat) => - type === CONST.CONTEXT_MENU_TYPES.REPORT && isUnreadChat, + shouldShow: ({type, isUnreadChat}) => type === CONST.CONTEXT_MENU_TYPES.REPORT && isUnreadChat, onPress: (closePopover, {reportID}) => { Report.readNewestAction(reportID, true); if (closePopover) { @@ -234,7 +233,7 @@ const ContextMenuActions: ContextMenuAction[] = [ isAnonymousAction: false, textTranslateKey: 'reportActionContextMenu.editAction', icon: Expensicons.Pencil, - shouldShow: (type, reportAction, isArchivedRoom, betas, menuTarget, isChronosReport) => + shouldShow: ({type, reportAction, isArchivedRoom, isChronosReport}) => type === CONST.CONTEXT_MENU_TYPES.REPORT_ACTION && ReportUtils.canEditReportAction(reportAction) && !isArchivedRoom && !isChronosReport, onPress: (closePopover, {reportID, reportAction, draftMessage}) => { if (ReportActionsUtils.isMoneyRequestAction(reportAction)) { @@ -267,22 +266,8 @@ const ContextMenuActions: ContextMenuAction[] = [ isAnonymousAction: false, textTranslateKey: 'iou.unhold', icon: Expensicons.Stopwatch, - shouldShow: ( - type, - reportAction, - isArchivedRoom, - betas, - anchor, - isChronosReport, - reportID, - isPinnedChat, - isUnreadChat, - isOffline, - isMini, - isProduction, - moneyRequestAction, - areHoldRequirementsMet, - ) => type === CONST.CONTEXT_MENU_TYPES.REPORT_ACTION && areHoldRequirementsMet && ReportUtils.canHoldUnholdReportAction(moneyRequestAction).canUnholdRequest, + shouldShow: ({type, moneyRequestAction, areHoldRequirementsMet}) => + type === CONST.CONTEXT_MENU_TYPES.REPORT_ACTION && areHoldRequirementsMet && ReportUtils.canHoldUnholdReportAction(moneyRequestAction).canUnholdRequest, onPress: (closePopover, {moneyRequestAction}) => { if (closePopover) { hideContextMenu(false, () => ReportUtils.changeMoneyRequestHoldStatus(moneyRequestAction)); @@ -298,22 +283,8 @@ const ContextMenuActions: ContextMenuAction[] = [ isAnonymousAction: false, textTranslateKey: 'iou.hold', icon: Expensicons.Stopwatch, - shouldShow: ( - type, - reportAction, - isArchivedRoom, - betas, - anchor, - isChronosReport, - reportID, - isPinnedChat, - isUnreadChat, - isOffline, - isMini, - isProduction, - moneyRequestAction, - areHoldRequirementsMet, - ) => type === CONST.CONTEXT_MENU_TYPES.REPORT_ACTION && areHoldRequirementsMet && ReportUtils.canHoldUnholdReportAction(moneyRequestAction).canHoldRequest, + shouldShow: ({type, moneyRequestAction, areHoldRequirementsMet}) => + type === CONST.CONTEXT_MENU_TYPES.REPORT_ACTION && areHoldRequirementsMet && ReportUtils.canHoldUnholdReportAction(moneyRequestAction).canHoldRequest, onPress: (closePopover, {moneyRequestAction}) => { if (closePopover) { hideContextMenu(false, () => ReportUtils.changeMoneyRequestHoldStatus(moneyRequestAction)); @@ -329,7 +300,7 @@ const ContextMenuActions: ContextMenuAction[] = [ isAnonymousAction: false, textTranslateKey: 'reportActionContextMenu.joinThread', icon: Expensicons.Bell, - shouldShow: (type, reportAction, isArchivedRoom, betas, menuTarget, isChronosReport, reportID) => { + shouldShow: ({reportAction, isArchivedRoom, reportID}) => { const childReportNotificationPreference = ReportUtils.getChildReportNotificationPreference(reportAction); const isDeletedAction = ReportActionsUtils.isDeletedAction(reportAction); const shouldDisplayThreadReplies = ReportUtils.shouldDisplayThreadReplies(reportAction, reportID); @@ -361,7 +332,7 @@ const ContextMenuActions: ContextMenuAction[] = [ icon: Expensicons.Copy, successTextTranslateKey: 'reportActionContextMenu.copied', successIcon: Expensicons.Checkmark, - shouldShow: (type) => type === CONST.CONTEXT_MENU_TYPES.LINK, + shouldShow: ({type}) => type === CONST.CONTEXT_MENU_TYPES.LINK, onPress: (closePopover, {selection}) => { Clipboard.setString(selection); hideContextMenu(true, ReportActionComposeFocusManager.focus); @@ -374,7 +345,7 @@ const ContextMenuActions: ContextMenuAction[] = [ icon: Expensicons.Copy, successTextTranslateKey: 'reportActionContextMenu.copied', successIcon: Expensicons.Checkmark, - shouldShow: (type) => type === CONST.CONTEXT_MENU_TYPES.EMAIL, + shouldShow: ({type}) => type === CONST.CONTEXT_MENU_TYPES.EMAIL, onPress: (closePopover, {selection}) => { Clipboard.setString(EmailUtils.trimMailTo(selection)); hideContextMenu(true, ReportActionComposeFocusManager.focus); @@ -387,7 +358,7 @@ const ContextMenuActions: ContextMenuAction[] = [ icon: Expensicons.Copy, successTextTranslateKey: 'reportActionContextMenu.copied', successIcon: Expensicons.Checkmark, - shouldShow: (type, reportAction) => + shouldShow: ({type, reportAction}) => type === CONST.CONTEXT_MENU_TYPES.REPORT_ACTION && !ReportActionsUtils.isReportActionAttachment(reportAction) && !ReportActionsUtils.isMessageDeleted(reportAction) && @@ -526,7 +497,7 @@ const ContextMenuActions: ContextMenuAction[] = [ icon: Expensicons.LinkCopy, successIcon: Expensicons.Checkmark, successTextTranslateKey: 'reportActionContextMenu.copied', - shouldShow: (type, reportAction, isArchivedRoom, betas, menuTarget) => { + shouldShow: ({type, reportAction, menuTarget}) => { const isAttachment = ReportActionsUtils.isReportActionAttachment(reportAction); // Only hide the copylink menu item when context menu is opened over img element. @@ -547,7 +518,7 @@ const ContextMenuActions: ContextMenuAction[] = [ isAnonymousAction: false, textTranslateKey: 'common.pin', icon: Expensicons.Pin, - shouldShow: (type, reportAction, isArchivedRoom, betas, menuTarget, isChronosReport, reportID, isPinnedChat) => type === CONST.CONTEXT_MENU_TYPES.REPORT && !isPinnedChat, + shouldShow: ({type, isPinnedChat}) => type === CONST.CONTEXT_MENU_TYPES.REPORT && !isPinnedChat, onPress: (closePopover, {reportID}) => { Report.togglePinnedState(reportID, false); if (closePopover) { @@ -560,7 +531,7 @@ const ContextMenuActions: ContextMenuAction[] = [ isAnonymousAction: false, textTranslateKey: 'common.unPin', icon: Expensicons.Pin, - shouldShow: (type, reportAction, isArchivedRoom, betas, menuTarget, isChronosReport, reportID, isPinnedChat) => type === CONST.CONTEXT_MENU_TYPES.REPORT && isPinnedChat, + shouldShow: ({type, isPinnedChat}) => type === CONST.CONTEXT_MENU_TYPES.REPORT && isPinnedChat, onPress: (closePopover, {reportID}) => { Report.togglePinnedState(reportID, true); if (closePopover) { @@ -573,7 +544,7 @@ const ContextMenuActions: ContextMenuAction[] = [ isAnonymousAction: false, textTranslateKey: 'reportActionContextMenu.flagAsOffensive', icon: Expensicons.Flag, - shouldShow: (type, reportAction, isArchivedRoom, betas, menuTarget, isChronosReport, reportID) => + shouldShow: ({type, reportAction, isArchivedRoom, isChronosReport, reportID}) => type === CONST.CONTEXT_MENU_TYPES.REPORT_ACTION && ReportUtils.canFlagReportAction(reportAction, reportID) && !isArchivedRoom && @@ -596,7 +567,7 @@ const ContextMenuActions: ContextMenuAction[] = [ icon: Expensicons.Download, successTextTranslateKey: 'common.download', successIcon: Expensicons.Download, - shouldShow: (type, reportAction, isArchivedRoom, betas, menuTarget, isChronosReport, reportID, isPinnedChat, isUnreadChat, isOffline): reportAction is ReportAction => { + shouldShow: ({reportAction, isOffline}) => { const isAttachment = ReportActionsUtils.isReportActionAttachment(reportAction); const html = getActionHtml(reportAction); const isUploading = html.includes(CONST.ATTACHMENT_OPTIMISTIC_SOURCE_ATTRIBUTE); @@ -624,7 +595,7 @@ const ContextMenuActions: ContextMenuAction[] = [ icon: Expensicons.Copy, successTextTranslateKey: 'reportActionContextMenu.copied', successIcon: Expensicons.Checkmark, - shouldShow: (type, isProduction) => type === CONST.CONTEXT_MENU_TYPES.REPORT && !isProduction, + shouldShow: ({type, isProduction}) => type === CONST.CONTEXT_MENU_TYPES.REPORT && !isProduction, onPress: (closePopover, {reportID}) => { const report = ReportConnection.getAllReports()?.[`${ONYXKEYS.COLLECTION.REPORT}${reportID}`]; Clipboard.setString(JSON.stringify(report, null, 4)); @@ -634,9 +605,9 @@ const ContextMenuActions: ContextMenuAction[] = [ }, { isAnonymousAction: true, - textTranslateKey: 'reportActionContextMenu.debug', + textTranslateKey: 'debug.debug', icon: Expensicons.Bug, - shouldShow: (type, isProduction) => type === CONST.CONTEXT_MENU_TYPES.REPORT && !isProduction, + shouldShow: ({type, user}) => type === CONST.CONTEXT_MENU_TYPES.REPORT && !!user?.isDebugModeEnabled, onPress: (closePopover, {reportID}) => { Navigation.navigate(ROUTES.DEBUG_REPORT.getRoute(reportID)); hideContextMenu(false, ReportActionComposeFocusManager.focus); @@ -647,7 +618,7 @@ const ContextMenuActions: ContextMenuAction[] = [ isAnonymousAction: false, textTranslateKey: 'reportActionContextMenu.deleteAction', icon: Expensicons.Trashcan, - shouldShow: (type, reportAction, isArchivedRoom, betas, menuTarget, isChronosReport, reportID) => + shouldShow: ({type, reportAction, isArchivedRoom, isChronosReport, reportID}) => // Until deleting parent threads is supported in FE, we will prevent the user from deleting a thread parent type === CONST.CONTEXT_MENU_TYPES.REPORT_ACTION && ReportUtils.canDeleteReportAction(reportAction, reportID) && @@ -670,7 +641,7 @@ const ContextMenuActions: ContextMenuAction[] = [ isAnonymousAction: true, textTranslateKey: 'reportActionContextMenu.menu', icon: Expensicons.ThreeDots, - shouldShow: (type, reportAction, isArchivedRoom, betas, anchor, isChronosReport, reportID, isPinnedChat, isUnreadChat, isOffline, isMini) => isMini, + shouldShow: ({isMini}) => isMini, onPress: (closePopover, {openOverflowMenu, event, openContextMenu, anchorRef}) => { openOverflowMenu(event as GestureResponderEvent | MouseEvent, anchorRef ?? {current: null}); openContextMenu(); From e73413bbf6a93fe04091bac6db7e4c964583fc9e Mon Sep 17 00:00:00 2001 From: Pedro Guerreiro Date: Thu, 10 Oct 2024 10:21:41 +0100 Subject: [PATCH 3/4] fix: performance issues caused by refactor --- .../report/ContextMenu/BaseReportActionContextMenu.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/pages/home/report/ContextMenu/BaseReportActionContextMenu.tsx b/src/pages/home/report/ContextMenu/BaseReportActionContextMenu.tsx index af2b5051c99e..448c559d95f1 100755 --- a/src/pages/home/report/ContextMenu/BaseReportActionContextMenu.tsx +++ b/src/pages/home/report/ContextMenu/BaseReportActionContextMenu.tsx @@ -1,5 +1,5 @@ import type {MutableRefObject, RefObject} from 'react'; -import React, {useMemo, useRef, useState} from 'react'; +import React, {memo, useMemo, useRef, useState} from 'react'; import {InteractionManager, View} from 'react-native'; // eslint-disable-next-line no-restricted-imports import type {GestureResponderEvent, Text as RNText, View as ViewType} from 'react-native'; @@ -117,7 +117,9 @@ function BaseReportActionContextMenu({ const {isProduction} = useEnvironment(); const threedotRef = useRef(null); const [betas] = useOnyx(ONYXKEYS.BETAS); - const [reportActions] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${reportID}`); + const [reportActions] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${reportID}`, { + canEvict: false, + }); const transactionID = ReportActionsUtils.getLinkedTransactionID(reportActionID, reportID); const [transaction] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`); const [user] = useOnyx(ONYXKEYS.USER); @@ -349,6 +351,6 @@ function BaseReportActionContextMenu({ ); } -export default BaseReportActionContextMenu; +export default memo(BaseReportActionContextMenu); export type {BaseReportActionContextMenuProps}; From 642069b78aef1e857324e400ffc7fe70c5d63b8d Mon Sep 17 00:00:00 2001 From: Pedro Guerreiro Date: Thu, 10 Oct 2024 11:00:40 +0100 Subject: [PATCH 4/4] fix: missing equality check in memo --- .../home/report/ContextMenu/BaseReportActionContextMenu.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/pages/home/report/ContextMenu/BaseReportActionContextMenu.tsx b/src/pages/home/report/ContextMenu/BaseReportActionContextMenu.tsx index 448c559d95f1..eec6cdf81a7e 100755 --- a/src/pages/home/report/ContextMenu/BaseReportActionContextMenu.tsx +++ b/src/pages/home/report/ContextMenu/BaseReportActionContextMenu.tsx @@ -1,3 +1,4 @@ +import lodashIsEqual from 'lodash/isEqual'; import type {MutableRefObject, RefObject} from 'react'; import React, {memo, useMemo, useRef, useState} from 'react'; import {InteractionManager, View} from 'react-native'; @@ -351,6 +352,6 @@ function BaseReportActionContextMenu({ ); } -export default memo(BaseReportActionContextMenu); +export default memo(BaseReportActionContextMenu, lodashIsEqual); export type {BaseReportActionContextMenuProps};