From 5ca17af0efb2a573d3a6995144fbb9b3c84aa6ef Mon Sep 17 00:00:00 2001 From: Dariusz Biela Date: Wed, 10 Dec 2025 12:44:31 +0100 Subject: [PATCH 1/6] feat: Add sentryLabel for INP debugging across report page components - Add SENTRY_LABEL constants to CONST/index.ts for HEADER_VIEW, SEARCH, REPORT, SIDEBAR, LHN, and CONTEXT_MENU - Add sentryLabel to HeaderView.tsx (back button, details button, task action button) - Add sentryLabel to FloatingMessageCounter.tsx - Add sentryLabel to ListBoundaryLoader.tsx - Add sentryLabel to PureReportActionItem.tsx - Add sentryLabel to AttachmentPickerWithMenuItems.tsx (create, expand, collapse buttons) - Add sentryLabel to SendButton.tsx - Add sentryLabel to ReportActionItemCreated.tsx - Add sentryLabel to ReportActionItemMessage.tsx (enter signer info, add bank account buttons) - Add sentryLabel to ReportActionItemMessageEdit.tsx (cancel, save buttons) - Add sentryLabel to ReportActionItemSingle.tsx (avatar, actor buttons) - Add sentryLabel to ReportActionItemThread.tsx - Add sentryLabel to ThreadDivider.tsx - Add sentryLabel to SignInButton.tsx - Add sentryLabel to OptionRowLHN.tsx - Add sentryLabel prop to MenuItem, ContextMenuItem, and BaseMiniContextMenuItem components - Add sentryLabel to all context menu actions in ContextMenuActions.tsx - Update BaseReportActionContextMenu.tsx to use contextAction.sentryLabel directly --- src/CONST/index.ts | 56 +++++++++++++++++++ src/components/BaseMiniContextMenuItem.tsx | 8 ++- src/components/ContextMenuItem.tsx | 6 ++ .../LHNOptionsList/OptionRowLHN.tsx | 1 + src/components/MenuItem.tsx | 5 ++ .../Search/SearchRouter/SearchButton.tsx | 1 + src/components/TaskHeaderActionButton.tsx | 2 + src/pages/home/HeaderView.tsx | 2 + .../BaseReportActionContextMenu.tsx | 1 + .../report/ContextMenu/ContextMenuActions.tsx | 22 ++++++++ .../home/report/FloatingMessageCounter.tsx | 1 + src/pages/home/report/ListBoundaryLoader.tsx | 1 + .../home/report/PureReportActionItem.tsx | 2 + .../AttachmentPickerWithMenuItems.tsx | 3 + .../report/ReportActionCompose/SendButton.tsx | 1 + .../home/report/ReportActionItemCreated.tsx | 1 + .../home/report/ReportActionItemMessage.tsx | 2 + .../report/ReportActionItemMessageEdit.tsx | 2 + .../home/report/ReportActionItemSingle.tsx | 2 + .../home/report/ReportActionItemThread.tsx | 1 + src/pages/home/report/ThreadDivider.tsx | 1 + src/pages/home/sidebar/SignInButton.tsx | 1 + 22 files changed, 121 insertions(+), 1 deletion(-) diff --git a/src/CONST/index.ts b/src/CONST/index.ts index baacb45eb0bde..76881c5882ef9 100755 --- a/src/CONST/index.ts +++ b/src/CONST/index.ts @@ -7490,6 +7490,62 @@ const CONST = { WORKSPACES: 'NavigationTabBar-Workspaces', ACCOUNT: 'NavigationTabBar-Account', }, + HEADER_VIEW: { + BACK_BUTTON: 'HeaderView-BackButton', + DETAILS_BUTTON: 'HeaderView-DetailsButton', + TASK_ACTION_BUTTON: 'HeaderView-TaskActionButton', + }, + SEARCH: { + SEARCH_BUTTON: 'Search-SearchButton', + }, + REPORT: { + FLOATING_MESSAGE_COUNTER: 'Report-FloatingMessageCounter', + LIST_BOUNDARY_LOADER_RETRY: 'Report-ListBoundaryLoaderRetry', + SEND_BUTTON: 'Report-SendButton', + ATTACHMENT_PICKER_CREATE_BUTTON: 'Report-AttachmentPickerCreateButton', + ATTACHMENT_PICKER_EXPAND_BUTTON: 'Report-AttachmentPickerExpandButton', + ATTACHMENT_PICKER_COLLAPSE_BUTTON: 'Report-AttachmentPickerCollapseButton', + REPORT_ACTION_ITEM_CREATED: 'Report-ReportActionItemCreated', + REPORT_ACTION_ITEM_MESSAGE_ENTER_SIGNER_INFO: 'Report-ReportActionItemMessageEnterSignerInfo', + REPORT_ACTION_ITEM_MESSAGE_ADD_BANK_ACCOUNT: 'Report-ReportActionItemMessageAddBankAccount', + REPORT_ACTION_ITEM_MESSAGE_EDIT_CANCEL_BUTTON: 'Report-ReportActionItemMessageEditCancelButton', + REPORT_ACTION_ITEM_MESSAGE_EDIT_SAVE_BUTTON: 'Report-ReportActionItemMessageEditSaveButton', + REPORT_ACTION_ITEM_SINGLE_AVATAR_BUTTON: 'Report-ReportActionItemSingleAvatarButton', + REPORT_ACTION_ITEM_SINGLE_ACTOR_BUTTON: 'Report-ReportActionItemSingleActorButton', + REPORT_ACTION_ITEM_THREAD: 'Report-ReportActionItemThread', + THREAD_DIVIDER: 'Report-ThreadDivider', + PURE_REPORT_ACTION_ITEM: 'Report-PureReportActionItem', + MODERATION_BUTTON: 'Report-ModerationButton', + }, + SIDEBAR: { + SIGN_IN_BUTTON: 'Sidebar-SignInButton', + }, + LHN: { + OPTION_ROW: 'LHN-OptionRow', + }, + CONTEXT_MENU: { + REPLY_IN_THREAD: 'ContextMenu-ReplyInThread', + MARK_AS_UNREAD: 'ContextMenu-MarkAsUnread', + MARK_AS_READ: 'ContextMenu-MarkAsRead', + EDIT_COMMENT: 'ContextMenu-EditComment', + UNHOLD: 'ContextMenu-Unhold', + HOLD: 'ContextMenu-Hold', + JOIN_THREAD: 'ContextMenu-JoinThread', + LEAVE_THREAD: 'ContextMenu-LeaveThread', + COPY_URL: 'ContextMenu-CopyUrl', + COPY_TO_CLIPBOARD: 'ContextMenu-CopyToClipboard', + COPY_EMAIL: 'ContextMenu-CopyEmail', + COPY_MESSAGE: 'ContextMenu-CopyMessage', + COPY_LINK: 'ContextMenu-CopyLink', + PIN: 'ContextMenu-Pin', + UNPIN: 'ContextMenu-Unpin', + FLAG_AS_OFFENSIVE: 'ContextMenu-FlagAsOffensive', + DOWNLOAD: 'ContextMenu-Download', + COPY_ONYX_DATA: 'ContextMenu-CopyOnyxData', + DEBUG: 'ContextMenu-Debug', + DELETE: 'ContextMenu-Delete', + MENU: 'ContextMenu-Menu', + }, }, } as const; diff --git a/src/components/BaseMiniContextMenuItem.tsx b/src/components/BaseMiniContextMenuItem.tsx index c9738970bbe3e..ab8873c2d5617 100644 --- a/src/components/BaseMiniContextMenuItem.tsx +++ b/src/components/BaseMiniContextMenuItem.tsx @@ -41,13 +41,18 @@ type BaseMiniContextMenuItemProps = { * Reference to the outer element */ ref?: PressableRef; + + /** + * Label for Sentry tracking + */ + sentryLabel?: string; }; /** * Component that renders a mini context menu item with a * pressable. Also renders a tooltip when hovering the item. */ -function BaseMiniContextMenuItem({tooltipText, onPress, children, isDelayButtonStateComplete = true, shouldPreventDefaultFocusOnPress = true, ref}: BaseMiniContextMenuItemProps) { +function BaseMiniContextMenuItem({tooltipText, onPress, children, isDelayButtonStateComplete = true, shouldPreventDefaultFocusOnPress = true, ref, sentryLabel}: BaseMiniContextMenuItemProps) { const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); return ( @@ -79,6 +84,7 @@ function BaseMiniContextMenuItem({tooltipText, onPress, children, isDelayButtonS }} accessibilityLabel={tooltipText} role={CONST.ROLE.BUTTON} + sentryLabel={sentryLabel} style={({hovered, pressed}) => [ styles.reportActionContextMenuMiniButton, StyleUtils.getButtonBackgroundColorStyle(getButtonState(hovered, pressed, isDelayButtonStateComplete), true), diff --git a/src/components/ContextMenuItem.tsx b/src/components/ContextMenuItem.tsx index 214e7bd616ec3..315fb34b72121 100644 --- a/src/components/ContextMenuItem.tsx +++ b/src/components/ContextMenuItem.tsx @@ -64,6 +64,9 @@ type ContextMenuItemProps = { /** Reference to the outer element */ ref?: ForwardedRef; + + /** Label for Sentry tracking */ + sentryLabel?: string; }; type ContextMenuItemHandle = { @@ -89,6 +92,7 @@ function ContextMenuItem({ disabled = false, shouldShowLoadingSpinnerIcon = false, ref, + sentryLabel, }: ContextMenuItemProps) { const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); @@ -120,6 +124,7 @@ function ContextMenuItem({ onPress={triggerPressAndUpdateSuccess} isDelayButtonStateComplete={!isThrottledButtonActive} shouldPreventDefaultFocusOnPress={shouldPreventDefaultFocusOnPress} + sentryLabel={sentryLabel} > {({hovered, pressed}) => ( ); } diff --git a/src/components/LHNOptionsList/OptionRowLHN.tsx b/src/components/LHNOptionsList/OptionRowLHN.tsx index e65cb65cd887a..1672ee18e7988 100644 --- a/src/components/LHNOptionsList/OptionRowLHN.tsx +++ b/src/components/LHNOptionsList/OptionRowLHN.tsx @@ -249,6 +249,7 @@ function OptionRowLHN({ }`} onLayout={onLayout} needsOffscreenAlphaCompositing={(optionItem?.icons?.length ?? 0) >= 2} + sentryLabel={CONST.SENTRY_LABEL.LHN.OPTION_ROW} > diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx index e68a53726be70..6174e901718a6 100644 --- a/src/components/MenuItem.tsx +++ b/src/components/MenuItem.tsx @@ -394,6 +394,9 @@ type MenuItemBaseProps = ForwardedFSClassProps & { /** Whether the screen containing the item is focused */ isFocused?: boolean; + + /** Label for Sentry tracking */ + sentryLabel?: string; }; type MenuItemProps = (IconProps | AvatarProps | NoIcon) & MenuItemBaseProps; @@ -522,6 +525,7 @@ function MenuItem({ forwardedFSClass, ref, isFocused, + sentryLabel, }: MenuItemProps) { const theme = useTheme(); const styles = useThemeStyles(); @@ -721,6 +725,7 @@ function MenuItem({ accessibilityLabel={title ? title.toString() : ''} accessible onFocus={onFocus} + sentryLabel={sentryLabel} > {({pressed}) => ( diff --git a/src/components/Search/SearchRouter/SearchButton.tsx b/src/components/Search/SearchRouter/SearchButton.tsx index b2f463d3f4e59..271f9a7ac0563 100644 --- a/src/components/Search/SearchRouter/SearchButton.tsx +++ b/src/components/Search/SearchRouter/SearchButton.tsx @@ -35,6 +35,7 @@ function SearchButton({style, shouldUseAutoHitSlop = false}: SearchButtonProps) accessibilityLabel={translate('common.search')} style={[styles.flexRow, styles.touchableButtonImage, style]} shouldUseAutoHitSlop={shouldUseAutoHitSlop} + sentryLabel={CONST.SENTRY_LABEL.SEARCH.SEARCH_BUTTON} // eslint-disable-next-line react-compiler/react-compiler onPress={callFunctionIfActionIsAllowed(() => { pressableRef?.current?.blur(); diff --git a/src/components/TaskHeaderActionButton.tsx b/src/components/TaskHeaderActionButton.tsx index a041da910c885..51f0374f5eb69 100644 --- a/src/components/TaskHeaderActionButton.tsx +++ b/src/components/TaskHeaderActionButton.tsx @@ -11,6 +11,7 @@ import {canWriteInReport, isCompletedTaskReport} from '@libs/ReportUtils'; import {isActiveTaskEditRoute} from '@libs/TaskUtils'; import {callFunctionIfActionIsAllowed} from '@userActions/Session'; import {canActionTask, completeTask, reopenTask} from '@userActions/Task'; +import CONST from '@src/CONST'; import type * as OnyxTypes from '@src/types/onyx'; import Button from './Button'; @@ -51,6 +52,7 @@ function TaskHeaderActionButton({report}: TaskHeaderActionButtonProps) { } })} style={styles.flex1} + sentryLabel={CONST.SENTRY_LABEL.HEADER_VIEW.TASK_ACTION_BUTTON} /> ); diff --git a/src/pages/home/HeaderView.tsx b/src/pages/home/HeaderView.tsx index d75f4c6c06e8e..247eb3710bb1d 100644 --- a/src/pages/home/HeaderView.tsx +++ b/src/pages/home/HeaderView.tsx @@ -269,6 +269,7 @@ function HeaderView({report, parentReportAction, onNavigationMenuButtonClicked, accessibilityHint={translate('accessibilityHints.navigateToChatsList')} accessibilityLabel={translate('common.back')} role={CONST.ROLE.BUTTON} + sentryLabel={CONST.SENTRY_LABEL.HEADER_VIEW.BACK_BUTTON} > {shouldShowSubscript ? multipleAvatars : {multipleAvatars}} (index === filteredContextMenuActions.length - 1 || index === 1) && setFocusedIndex(-1)} disabled={contextAction?.shouldDisable ? contextAction?.shouldDisable(download) : false} shouldShowLoadingSpinnerIcon={contextAction?.shouldDisable ? contextAction?.shouldDisable(download) : false} + sentryLabel={contextAction.sentryLabel} /> ); })} diff --git a/src/pages/home/report/ContextMenu/ContextMenuActions.tsx b/src/pages/home/report/ContextMenu/ContextMenuActions.tsx index 6e0a186d509ca..f4d499fecc739 100644 --- a/src/pages/home/report/ContextMenu/ContextMenuActions.tsx +++ b/src/pages/home/report/ContextMenu/ContextMenuActions.tsx @@ -243,6 +243,7 @@ type ContextMenuActionWithIcon = { successIcon?: IconAsset | Extract; onPress: OnPress; getDescription: GetDescription; + sentryLabel?: string; }; type ContextMenuAction = (ContextMenuActionWithContent | ContextMenuActionWithIcon) & { @@ -331,6 +332,7 @@ const ContextMenuActions: ContextMenuAction[] = [ navigateToAndOpenChildReport(reportAction?.childReportID, reportAction, originalReportID); }, getDescription: () => {}, + sentryLabel: CONST.SENTRY_LABEL.CONTEXT_MENU.REPLY_IN_THREAD, }, { isAnonymousAction: false, @@ -345,6 +347,7 @@ const ContextMenuActions: ContextMenuAction[] = [ } }, getDescription: () => {}, + sentryLabel: CONST.SENTRY_LABEL.CONTEXT_MENU.MARK_AS_UNREAD, }, { isAnonymousAction: false, @@ -359,6 +362,7 @@ const ContextMenuActions: ContextMenuAction[] = [ } }, getDescription: () => {}, + sentryLabel: CONST.SENTRY_LABEL.CONTEXT_MENU.MARK_AS_READ, }, { isAnonymousAction: false, @@ -398,6 +402,7 @@ const ContextMenuActions: ContextMenuAction[] = [ editAction(); }, getDescription: () => {}, + sentryLabel: CONST.SENTRY_LABEL.CONTEXT_MENU.EDIT_COMMENT, }, { isAnonymousAction: false, @@ -420,6 +425,7 @@ const ContextMenuActions: ContextMenuAction[] = [ changeMoneyRequestHoldStatus(moneyRequestAction); }, getDescription: () => {}, + sentryLabel: CONST.SENTRY_LABEL.CONTEXT_MENU.UNHOLD, }, { isAnonymousAction: false, @@ -442,6 +448,7 @@ const ContextMenuActions: ContextMenuAction[] = [ changeMoneyRequestHoldStatus(moneyRequestAction); }, getDescription: () => {}, + sentryLabel: CONST.SENTRY_LABEL.CONTEXT_MENU.HOLD, }, { isAnonymousAction: false, @@ -479,6 +486,7 @@ const ContextMenuActions: ContextMenuAction[] = [ toggleSubscribeToChildReport(reportAction?.childReportID, reportAction, originalReportID, childReportNotificationPreference); }, getDescription: () => {}, + sentryLabel: CONST.SENTRY_LABEL.CONTEXT_MENU.JOIN_THREAD, }, { isAnonymousAction: false, @@ -516,6 +524,7 @@ const ContextMenuActions: ContextMenuAction[] = [ toggleSubscribeToChildReport(reportAction?.childReportID, reportAction, originalReportID, childReportNotificationPreference); }, getDescription: () => {}, + sentryLabel: CONST.SENTRY_LABEL.CONTEXT_MENU.LEAVE_THREAD, }, { isAnonymousAction: true, @@ -529,6 +538,7 @@ const ContextMenuActions: ContextMenuAction[] = [ hideContextMenu(true, ReportActionComposeFocusManager.focus); }, getDescription: (selection) => selection, + sentryLabel: CONST.SENTRY_LABEL.CONTEXT_MENU.COPY_URL, }, { isAnonymousAction: true, @@ -542,6 +552,7 @@ const ContextMenuActions: ContextMenuAction[] = [ hideContextMenu(true, ReportActionComposeFocusManager.focus); }, getDescription: () => undefined, + sentryLabel: CONST.SENTRY_LABEL.CONTEXT_MENU.COPY_TO_CLIPBOARD, }, { isAnonymousAction: true, @@ -555,6 +566,7 @@ const ContextMenuActions: ContextMenuAction[] = [ hideContextMenu(true, ReportActionComposeFocusManager.focus); }, getDescription: (selection) => EmailUtils.prefixMailSeparatorsWithBreakOpportunities(EmailUtils.trimMailTo(selection ?? '')), + sentryLabel: CONST.SENTRY_LABEL.CONTEXT_MENU.COPY_EMAIL, }, { isAnonymousAction: true, @@ -827,6 +839,7 @@ const ContextMenuActions: ContextMenuAction[] = [ } }, getDescription: () => {}, + sentryLabel: CONST.SENTRY_LABEL.CONTEXT_MENU.COPY_MESSAGE, }, { isAnonymousAction: true, @@ -850,6 +863,7 @@ const ContextMenuActions: ContextMenuAction[] = [ hideContextMenu(true, ReportActionComposeFocusManager.focus); }, getDescription: () => {}, + sentryLabel: CONST.SENTRY_LABEL.CONTEXT_MENU.COPY_LINK, }, { isAnonymousAction: false, @@ -863,6 +877,7 @@ const ContextMenuActions: ContextMenuAction[] = [ } }, getDescription: () => {}, + sentryLabel: CONST.SENTRY_LABEL.CONTEXT_MENU.PIN, }, { isAnonymousAction: false, @@ -876,6 +891,7 @@ const ContextMenuActions: ContextMenuAction[] = [ } }, getDescription: () => {}, + sentryLabel: CONST.SENTRY_LABEL.CONTEXT_MENU.UNPIN, }, { isAnonymousAction: false, @@ -905,6 +921,7 @@ const ContextMenuActions: ContextMenuAction[] = [ Navigation.navigate(ROUTES.FLAG_COMMENT.getRoute(reportID, reportAction?.reportActionID, activeRoute)); }, getDescription: () => {}, + sentryLabel: CONST.SENTRY_LABEL.CONTEXT_MENU.FLAG_AS_OFFENSIVE, }, { isAnonymousAction: true, @@ -933,6 +950,7 @@ const ContextMenuActions: ContextMenuAction[] = [ }, getDescription: () => {}, shouldDisable: (download) => download?.isDownloading ?? false, + sentryLabel: CONST.SENTRY_LABEL.CONTEXT_MENU.DOWNLOAD, }, { isAnonymousAction: true, @@ -946,6 +964,7 @@ const ContextMenuActions: ContextMenuAction[] = [ hideContextMenu(true, ReportActionComposeFocusManager.focus); }, getDescription: () => {}, + sentryLabel: CONST.SENTRY_LABEL.CONTEXT_MENU.COPY_ONYX_DATA, }, { isAnonymousAction: true, @@ -961,6 +980,7 @@ const ContextMenuActions: ContextMenuAction[] = [ hideContextMenu(false, ReportActionComposeFocusManager.focus); }, getDescription: () => {}, + sentryLabel: CONST.SENTRY_LABEL.CONTEXT_MENU.DEBUG, }, { isAnonymousAction: false, @@ -997,6 +1017,7 @@ const ContextMenuActions: ContextMenuAction[] = [ showDeleteModal(reportID, moneyRequestAction ?? reportAction); }, getDescription: () => {}, + sentryLabel: CONST.SENTRY_LABEL.CONTEXT_MENU.DELETE, }, { isAnonymousAction: true, @@ -1009,6 +1030,7 @@ const ContextMenuActions: ContextMenuAction[] = [ }, getDescription: () => {}, shouldPreventDefaultFocusOnPress: false, + sentryLabel: CONST.SENTRY_LABEL.CONTEXT_MENU.MENU, }, ]; diff --git a/src/pages/home/report/FloatingMessageCounter.tsx b/src/pages/home/report/FloatingMessageCounter.tsx index 6c8e40a738563..ae5d5e804620a 100644 --- a/src/pages/home/report/FloatingMessageCounter.tsx +++ b/src/pages/home/report/FloatingMessageCounter.tsx @@ -66,6 +66,7 @@ function FloatingMessageCounter({isActive = false, onClick = () => {}, hasNewMes success={hasNewMessages} small onPress={onClick} + sentryLabel={CONST.SENTRY_LABEL.REPORT.FLOATING_MESSAGE_COUNTER} > )} diff --git a/src/pages/home/report/PureReportActionItem.tsx b/src/pages/home/report/PureReportActionItem.tsx index 61ebc9ab35005..39da81be59279 100644 --- a/src/pages/home/report/PureReportActionItem.tsx +++ b/src/pages/home/report/PureReportActionItem.tsx @@ -1497,6 +1497,7 @@ function PureReportActionItem({ small style={[styles.mt2, styles.alignSelfStart]} onPress={() => updateHiddenState(!isHidden)} + sentryLabel={CONST.SENTRY_LABEL.REPORT.MODERATION_BUTTON} > {({pressed}) => ( handleEnterSignerInfoPress(policyID, bankAccountID, !!completed)} + sentryLabel={CONST.SENTRY_LABEL.REPORT.REPORT_ACTION_ITEM_MESSAGE_ENTER_SIGNER_INFO} /> ); @@ -186,6 +187,7 @@ function ReportActionItemMessage({action, displayAsGroup, reportID, style, isHid success text={translate('bankAccount.addBankAccount')} onPress={openWorkspaceInvoicesPage} + sentryLabel={CONST.SENTRY_LABEL.REPORT.REPORT_ACTION_ITEM_MESSAGE_ADD_BANK_ACCOUNT} /> )} diff --git a/src/pages/home/report/ReportActionItemMessageEdit.tsx b/src/pages/home/report/ReportActionItemMessageEdit.tsx index 3d9c635349a96..7f9658a24dddd 100644 --- a/src/pages/home/report/ReportActionItemMessageEdit.tsx +++ b/src/pages/home/report/ReportActionItemMessageEdit.tsx @@ -481,6 +481,7 @@ function ReportActionItemMessageEdit({ pressDimmingValue={1} // Keep focus on the composer when cancel button is clicked. onMouseDown={(e) => e.preventDefault()} + sentryLabel={CONST.SENTRY_LABEL.REPORT.REPORT_ACTION_ITEM_MESSAGE_EDIT_CANCEL_BUTTON} > e.preventDefault()} + sentryLabel={CONST.SENTRY_LABEL.REPORT.REPORT_ACTION_ITEM_MESSAGE_EDIT_SAVE_BUTTON} > {personArray?.map((fragment, index) => ( signOutAndRedirectToSignIn()} + sentryLabel={CONST.SENTRY_LABEL.SIDEBAR.SIGN_IN_BUTTON} >