[No QA] feat: Add sentryLabel for INP debugging across report page components (part 2)

src/CONST/index.ts

@@ -7579,7 +7579,6 @@ const CONST = {
         HEADER_VIEW: {
             BACK_BUTTON: 'HeaderView-BackButton',
             DETAILS_BUTTON: 'HeaderView-DetailsButton',
-            TASK_ACTION_BUTTON: 'HeaderView-TaskActionButton',
         },
         SEARCH: {
             SEARCH_BUTTON: 'Search-SearchButton',
@@ -7599,7 +7598,6 @@ const CONST = {
             ATTACHMENT_PICKER_MENU_CREATE_REPORT: 'Report-AttachmentPickerMenuCreateReport',
             ATTACHMENT_PICKER_MENU_ASSIGN_TASK: 'Report-AttachmentPickerMenuAssignTask',
             ATTACHMENT_PICKER_MENU_ADD_ATTACHMENT: 'Report-AttachmentPickerMenuAddAttachment',
-            EMOJI_PICKER_BUTTON: 'Report-EmojiPickerButton',
             REPORT_ACTION_ITEM_CREATED: 'Report-ReportActionItemCreated',
             REPORT_ACTION_ITEM_MESSAGE_ENTER_SIGNER_INFO: 'Report-ReportActionItemMessageEnterSignerInfo',
             REPORT_ACTION_ITEM_MESSAGE_ADD_BANK_ACCOUNT: 'Report-ReportActionItemMessageAddBankAccount',
@@ -7668,6 +7666,46 @@ const CONST = {
             ADD_EXPENSE_UNREPORTED: 'MoreMenu-AddExpenseUnreported',
             PAY: 'MoreMenu-Pay',
         },
+        REPORT_PREVIEW: {
+            CARD: 'ReportPreview-Card',
+            CAROUSEL_PREVIOUS: 'ReportPreview-CarouselPrevious',
+            CAROUSEL_NEXT: 'ReportPreview-CarouselNext',
+            SUBMIT_BUTTON: 'ReportPreview-SubmitButton',
+            APPROVE_BUTTON: 'ReportPreview-ApproveButton',
+            PAY_BUTTON: 'ReportPreview-PayButton',
+            EXPORT_BUTTON: 'ReportPreview-ExportButton',
+            VIEW_BUTTON: 'ReportPreview-ViewButton',
+            ADD_EXPENSE_BUTTON: 'ReportPreview-AddExpenseButton',
+        },
+        TRANSACTION_PREVIEW: {
+            CARD: 'TransactionPreview-Card',
+        },
+        EMOJI_PICKER: {
+            BUTTON: 'EmojiPicker-Button',
+            BUTTON_DROPDOWN: 'EmojiPicker-ButtonDropdown',
+            MENU_ITEM: 'EmojiPicker-MenuItem',
+            SKIN_TONE_TOGGLE: 'EmojiPicker-SkinToneToggle',
+            SKIN_TONE_ITEM: 'EmojiPicker-SkinToneItem',
+            CATEGORY_SHORTCUT: 'EmojiPicker-CategoryShortcut',
+            SEARCH_INPUT: 'EmojiPicker-SearchInput',
+        },
+        EMOJI_REACTIONS: {
+            REACTION_BUBBLE: 'EmojiReactions-ReactionBubble',
+            ADD_REACTION_BUBBLE: 'EmojiReactions-AddReactionBubble',
+        },
+        MINI_CONTEXT_MENU: {
+            QUICK_REACTION: 'MiniContextMenu-QuickReaction',
+            EMOJI_PICKER_BUTTON: 'MiniContextMenu-EmojiPickerButton',
+        },
+        TASK: {
+            PREVIEW_CARD: 'Task-PreviewCard',
+            PREVIEW_CHECKBOX: 'Task-PreviewCheckbox',
+            VIEW_TITLE: 'Task-ViewTitle',
+            VIEW_CHECKBOX: 'Task-ViewCheckbox',
+            VIEW_DESCRIPTION: 'Task-ViewDescription',
+            VIEW_ASSIGNEE: 'Task-ViewAssignee',
+            HEADER_ACTION_BUTTON: 'Task-HeaderActionButton',
+        },
     },
 } as const;
 

src/components/AnimatedSubmitButton/index.tsx

@@ -2,7 +2,7 @@
 import Animated, {Keyframe, useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated';
 import {scheduleOnRN} from 'react-native-worklets';
 import Button from '@components/Button';
 import * as Expensicons from '@components/Icon/Expensicons';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import variables from '@styles/variables';
@@ -26,9 +26,12 @@
 
     // Whether the button should be disabled
     isDisabled?: boolean;
+
+    // Label for Sentry tracking
+    sentryLabel?: string;
 };
 
-function AnimatedSubmitButton({success, text, onPress, isSubmittingAnimationRunning, onAnimationFinish, isDisabled}: AnimatedSubmitButtonProps) {
+function AnimatedSubmitButton({success, text, onPress, isSubmittingAnimationRunning, onAnimationFinish, isDisabled, sentryLabel}: AnimatedSubmitButtonProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const isAnimationRunning = isSubmittingAnimationRunning;
@@ -133,6 +136,7 @@
                     onPress={onPress}
                     icon={icon}
                     isDisabled={isDisabled}
+                    sentryLabel={sentryLabel}
                 />
             )}
         </Animated.View>

src/components/EmojiPicker/CategoryShortcutButton.tsx

@@ -43,6 +43,7 @@ function CategoryShortcutButton({code, icon, onPress}: CategoryShortcutButtonPro
                 style={({pressed}) => [StyleUtils.getButtonBackgroundColorStyle(getButtonState(false, pressed)), styles.categoryShortcutButton, isHighlighted && styles.emojiItemHighlighted]}
                 accessibilityLabel={`emojiPicker.headers.${code}`}
                 role={CONST.ROLE.BUTTON}
+                sentryLabel={CONST.SENTRY_LABEL.EMOJI_PICKER.CATEGORY_SHORTCUT}
             >
                 <Icon
                     fill={theme.icon}

src/components/EmojiPicker/EmojiPickerButton.tsx

@@ -2,7 +2,7 @@
 import React, {memo, useContext, useEffect, useRef} from 'react';
 import * as ActionSheetAwareScrollView from '@components/ActionSheetAwareScrollView';
 import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import type PressableProps from '@components/Pressable/GenericPressable/types';
 import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
 import Tooltip from '@components/Tooltip/PopoverAnchorTooltip';
@@ -78,7 +78,7 @@
                 onPress={openEmojiPicker}
                 id={CONST.EMOJI_PICKER_BUTTON_NATIVE_ID}
                 accessibilityLabel={translate('reportActionCompose.emoji')}
-                sentryLabel={CONST.SENTRY_LABEL.REPORT.EMOJI_PICKER_BUTTON}
+                sentryLabel={CONST.SENTRY_LABEL.EMOJI_PICKER.BUTTON}
             >
                 {({hovered, pressed}) => (
                     <Icon

src/components/EmojiPicker/EmojiPickerButtonDropdown.tsx

@@ -3,7 +3,7 @@
 import {View} from 'react-native';
 import type {StyleProp, ViewStyle} from 'react-native';
 import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
 import type {AnimatedTextInputRef} from '@components/RNTextInput';
 import Text from '@components/Text';
@@ -73,6 +73,7 @@
                 id="emojiDropdownButton"
                 accessibilityLabel="statusEmoji"
                 role={CONST.ROLE.BUTTON}
+                sentryLabel={CONST.SENTRY_LABEL.EMOJI_PICKER.BUTTON_DROPDOWN}
             >
                 {({hovered, pressed}) => (
                     <View style={styles.emojiPickerButtonDropdownContainer}>

src/components/EmojiPicker/EmojiPickerMenu/index.native.tsx

@@ -125,7 +125,8 @@ function EmojiPickerMenu({onEmojiSelected, activeEmoji, ref}: EmojiPickerMenuPro
                     accessibilityLabel={translate('common.search')}
                     role={CONST.ROLE.PRESENTATION}
                     onChangeText={filterEmojis}
-                    blurOnSubmit={filteredEmojis.length > 0}
+                    submitBehavior={filteredEmojis.length > 0 ? 'blurAndSubmit' : 'submit'}
+                    sentryLabel={CONST.SENTRY_LABEL.EMOJI_PICKER.SEARCH_INPUT}
                 />
             </View>
             <BaseEmojiPickerMenu

src/components/EmojiPicker/EmojiPickerMenu/index.tsx

@@ -341,7 +341,8 @@ function EmojiPickerMenu({onEmojiSelected, activeEmoji, ref}: EmojiPickerMenuPro
                     }}
                     onBlur={() => setIsFocused(false)}
                     autoCorrect={false}
-                    blurOnSubmit={filteredEmojis.length > 0}
+                    submitBehavior={filteredEmojis.length > 0 ? 'blurAndSubmit' : 'submit'}
+                    sentryLabel={CONST.SENTRY_LABEL.EMOJI_PICKER.SEARCH_INPUT}
                 />
             </View>
             <BaseEmojiPickerMenu

src/components/EmojiPicker/EmojiPickerMenuItem/index.native.tsx

@@ -48,6 +48,7 @@ function EmojiPickerMenuItem({
             ]}
             accessibilityLabel={emoji}
             role={CONST.ROLE.BUTTON}
+            sentryLabel={CONST.SENTRY_LABEL.EMOJI_PICKER.MENU_ITEM}
         >
             <Text style={[themeStyles.emojiText]}>{emoji}</Text>
         </PressableWithoutFeedback>

src/components/EmojiPicker/EmojiPickerMenuItem/index.tsx

@@ -5,7 +5,7 @@ import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeed
 import Text from '@components/Text';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
-import * as Browser from '@libs/Browser';
+import {isMobile, isMobileChrome} from '@libs/Browser';
 import getButtonState from '@libs/getButtonState';
 import CONST from '@src/CONST';
 import type EmojiPickerMenuItemProps from './types';
@@ -46,8 +46,8 @@ function EmojiPickerMenuItem({
             shouldUseAutoHitSlop={false}
             onPress={() => onPress(emoji)}
             // In order to prevent haptic feedback, pass empty callback as onLongPress  Please refer https://github.com/necolas/react-native-web/issues/2349#issuecomment-1195564240
-            onLongPress={Browser.isMobileChrome() ? () => {} : undefined}
-            onPressOut={Browser.isMobile() ? onHoverOut : undefined}
+            onLongPress={isMobileChrome() ? () => {} : undefined}
+            onPressOut={isMobile() ? onHoverOut : undefined}
             onHoverIn={() => {
                 if (onHoverIn) {
                     onHoverIn();
@@ -69,11 +69,12 @@ function EmojiPickerMenuItem({
             }}
             style={({pressed}) => [
                 isFocused || isHovered || isHighlighted ? themeStyles.emojiItemHighlighted : {},
-                Browser.isMobile() && StyleUtils.getButtonBackgroundColorStyle(getButtonState(false, pressed)),
+                isMobile() && StyleUtils.getButtonBackgroundColorStyle(getButtonState(false, pressed)),
                 themeStyles.emojiItem,
             ]}
             accessibilityLabel={emoji}
             role={CONST.ROLE.BUTTON}
+            sentryLabel={CONST.SENTRY_LABEL.EMOJI_PICKER.MENU_ITEM}
         >
             <Text style={[themeStyles.emojiText]}>{emoji}</Text>
         </PressableWithoutFeedback>

src/components/EmojiPicker/EmojiSkinToneList.tsx

@@ -55,6 +55,7 @@ function EmojiSkinToneList() {
                     style={[styles.flexRow, styles.alignSelfCenter, styles.justifyContentStart, styles.alignItemsCenter]}
                     accessibilityLabel={translate('emojiPicker.skinTonePickerLabel')}
                     role={CONST.ROLE.BUTTON}
+                    sentryLabel={CONST.SENTRY_LABEL.EMOJI_PICKER.SKIN_TONE_TOGGLE}
                 >
                     <View style={[styles.emojiItem, styles.wAuto, styles.justifyContentCenter]}>
                         <Text style={[styles.emojiText, styles.ph2, styles.textNoWrap]}>{currentSkinTone.code}</Text>

src/components/Reactions/AddReactionBubble.tsx

@@ -2,7 +2,7 @@
 import {View} from 'react-native';
 import type {Emoji} from '@assets/emojis/types';
 import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
 import Text from '@components/Text';
 import Tooltip from '@components/Tooltip/PopoverAnchorTooltip';
@@ -107,6 +107,7 @@
                 // disable dimming
                 pressDimmingValue={1}
                 dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}}
+                sentryLabel={CONST.SENTRY_LABEL.EMOJI_REACTIONS.ADD_REACTION_BUBBLE}
             >
                 {({hovered, pressed}) => (
                     <>

src/components/Reactions/EmojiReactionBubble.tsx

@@ -90,6 +90,7 @@ function EmojiReactionBubble({
             accessibilityLabel={emojiCodes.join('')}
             accessible
             dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}}
+            sentryLabel={CONST.SENTRY_LABEL.EMOJI_REACTIONS.REACTION_BUBBLE}
         >
             <Text style={[styles.emojiReactionBubbleText, StyleUtils.getEmojiReactionBubbleTextStyle(isContextMenu)]}>{emojiCodes.join('')}</Text>
             {count > 0 && <Text style={[styles.reactionCounterText, StyleUtils.getEmojiReactionCounterTextStyle(hasUserReacted)]}>{count}</Text>}

src/components/Reactions/MiniQuickEmojiReactions.tsx

@@ -3,7 +3,7 @@
 import type {Emoji} from '@assets/emojis/types';
 import BaseMiniContextMenuItem from '@components/BaseMiniContextMenuItem';
 import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
@@ -69,6 +69,7 @@
                     isDelayButtonStateComplete={false}
                     tooltipText={`:${getLocalizedEmojiName(emoji.name, preferredLocale)}:`}
                     onPress={callFunctionIfActionIsAllowed(() => onEmojiSelected(emoji, emojiReactions, preferredSkinTone))}
+                    sentryLabel={CONST.SENTRY_LABEL.MINI_CONTEXT_MENU.QUICK_REACTION}
                 >
                     <Text
                         style={[styles.miniQuickEmojiReactionText, styles.userSelectNone]}
@@ -89,6 +90,7 @@
                 })}
                 isDelayButtonStateComplete={false}
                 tooltipText={translate('emojiReactions.addReactionTooltip')}
+                sentryLabel={CONST.SENTRY_LABEL.MINI_CONTEXT_MENU.EMOJI_PICKER_BUTTON}
             >
                 {({hovered, pressed}) => (
                     <Icon

src/components/ReportActionItem/ExportWithDropdownMenu.tsx

@@ -31,6 +31,9 @@ type ExportWithDropdownMenuProps = {
     dropdownAnchorAlignment?: AnchorAlignment;
 
     wrapperStyle?: StyleProp<ViewStyle>;
+
+    /** Label for Sentry tracking */
+    sentryLabel?: string;
 };
 
 function ExportWithDropdownMenu({
@@ -42,6 +45,7 @@ function ExportWithDropdownMenu({
         vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP,
     },
     wrapperStyle,
+    sentryLabel,
 }: ExportWithDropdownMenuProps) {
     const reportID = report?.reportID;
     const styles = useThemeStyles();
@@ -131,6 +135,7 @@ function ExportWithDropdownMenu({
                 style={[shouldUseNarrowLayout && styles.flexGrow1]}
                 wrapperStyle={flattenedWrapperStyle}
                 buttonSize={CONST.DROPDOWN_BUTTON_SIZE.MEDIUM}
+                sentryLabel={sentryLabel}
             />
             <ConfirmModal
                 title={translate('workspace.exportAgainModal.title')}

src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx

@@ -541,13 +541,15 @@ function MoneyRequestReportPreviewContent({
                 }}
                 isSubmittingAnimationRunning={isSubmittingAnimationRunning}
                 onAnimationFinish={stopAnimation}
+                sentryLabel={CONST.SENTRY_LABEL.REPORT_PREVIEW.SUBMIT_BUTTON}
             />
         ),
         [CONST.REPORT.REPORT_PREVIEW_ACTIONS.APPROVE]: (
             <Button
                 text={translate('iou.approve')}
                 success
                 onPress={() => confirmApproval()}
+                sentryLabel={CONST.SENTRY_LABEL.REPORT_PREVIEW.APPROVE_BUTTON}
             />
         ),
         [CONST.REPORT.REPORT_PREVIEW_ACTIONS.PAY]: (
@@ -579,6 +581,7 @@ function MoneyRequestReportPreviewContent({
                 }}
                 isDisabled={isOffline && !canAllowSettlement}
                 isLoading={!isOffline && !canAllowSettlement}
+                sentryLabel={CONST.SENTRY_LABEL.REPORT_PREVIEW.PAY_BUTTON}
             />
         ),
         [CONST.REPORT.REPORT_PREVIEW_ACTIONS.EXPORT_TO_ACCOUNTING]: connectedIntegration ? (
@@ -591,6 +594,7 @@ function MoneyRequestReportPreviewContent({
                     horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT,
                     vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM,
                 }}
+                sentryLabel={CONST.SENTRY_LABEL.REPORT_PREVIEW.EXPORT_BUTTON}
             />
         ) : null,
         [CONST.REPORT.REPORT_PREVIEW_ACTIONS.VIEW]: (
@@ -599,6 +603,7 @@ function MoneyRequestReportPreviewContent({
                 onPress={() => {
                     openReportFromPreview();
                 }}
+                sentryLabel={CONST.SENTRY_LABEL.REPORT_PREVIEW.VIEW_BUTTON}
             />
         ),
         [CONST.REPORT.REPORT_PREVIEW_ACTIONS.ADD_EXPENSE]: (
@@ -612,6 +617,7 @@ function MoneyRequestReportPreviewContent({
                     horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT,
                     vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM,
                 }}
+                sentryLabel={CONST.SENTRY_LABEL.REPORT_PREVIEW.ADD_EXPENSE_BUTTON}
             />
         ),
     };
@@ -666,6 +672,7 @@ function MoneyRequestReportPreviewContent({
                         role={getButtonRole(true)}
                         isNested
                         accessibilityLabel={translate('iou.viewDetails')}
+                        sentryLabel={CONST.SENTRY_LABEL.REPORT_PREVIEW.CARD}
                     >
                         <View
                             style={[
@@ -723,6 +730,7 @@ function MoneyRequestReportPreviewContent({
                                                         onPress={() => handleChange(currentIndex - 1)}
                                                         disabled={optimisticIndex !== undefined ? optimisticIndex === 0 : currentIndex === 0 && currentVisibleItems.at(0) === 0}
                                                         disabledStyle={[styles.cursorDefault, styles.buttonOpacityDisabled]}
+                                                        sentryLabel={CONST.SENTRY_LABEL.REPORT_PREVIEW.CAROUSEL_PREVIOUS}
                                                     >
                                                         <Icon
                                                             src={expensifyIcons.BackArrow}
@@ -743,6 +751,7 @@ function MoneyRequestReportPreviewContent({
                                                                 : currentVisibleItems.at(-1) === carouselTransactions.length - 1
                                                         }
                                                         disabledStyle={[styles.cursorDefault, styles.buttonOpacityDisabled]}
+                                                        sentryLabel={CONST.SENTRY_LABEL.REPORT_PREVIEW.CAROUSEL_NEXT}
                                                     >
                                                         <Icon
                                                             src={expensifyIcons.ArrowRight}

src/components/ReportActionItem/TaskPreview.tsx

@@ -139,6 +139,7 @@ function TaskPreview({
                 style={[styles.flexRow, styles.justifyContentBetween, style]}
                 role={CONST.ROLE.BUTTON}
                 accessibilityLabel={translate('task.task')}
+                sentryLabel={CONST.SENTRY_LABEL.TASK.PREVIEW_CARD}
             >
                 <View style={[styles.flex1, styles.flexRow, styles.alignItemsStart, styles.mr2]}>
                     <View style={iconWrapperStyle}>
@@ -154,6 +155,7 @@ function TaskPreview({
                                 }
                             })}
                             accessibilityLabel={translate('task.task')}
+                            sentryLabel={CONST.SENTRY_LABEL.TASK.PREVIEW_CHECKBOX}
                         />
                     </View>
                     {hasAssignee && (

src/components/ReportActionItem/TaskView.tsx

@@ -120,6 +120,7 @@ function TaskView({report, parentReport, action}: TaskViewProps) {
                                 ]}
                                 accessibilityLabel={taskTitle || translate('task.task')}
                                 disabled={isDisableInteractive}
+                                sentryLabel={CONST.SENTRY_LABEL.TASK.VIEW_TITLE}
                             >
                                 {({pressed}) => (
                                     <OfflineWithFeedback pendingAction={report?.pendingFields?.reportName}>
@@ -144,6 +145,7 @@ function TaskView({report, parentReport, action}: TaskViewProps) {
                                                 caretSize={16}
                                                 accessibilityLabel={taskTitle || translate('task.task')}
                                                 disabled={!isTaskActionable}
+                                                sentryLabel={CONST.SENTRY_LABEL.TASK.VIEW_CHECKBOX}
                                             />
                                             <View style={[styles.flexRow, styles.flex1]}>
                                                 <RenderHTML html={taskTitle} />
@@ -176,6 +178,7 @@ function TaskView({report, parentReport, action}: TaskViewProps) {
                             numberOfLinesTitle={0}
                             interactive={!isDisableInteractive}
                             shouldUseDefaultCursorWhenDisabled
+                            sentryLabel={CONST.SENTRY_LABEL.TASK.VIEW_DESCRIPTION}
                         />
                     </OfflineWithFeedback>
                     <OfflineWithFeedback pendingAction={report?.pendingFields?.managerID}>
@@ -196,6 +199,7 @@ function TaskView({report, parentReport, action}: TaskViewProps) {
                                 interactive={!isDisableInteractive}
                                 titleWithTooltips={assigneeTooltipDetails}
                                 shouldUseDefaultCursorWhenDisabled
+                                sentryLabel={CONST.SENTRY_LABEL.TASK.VIEW_ASSIGNEE}
                             />
                         ) : (
                             <MenuItemWithTopDescription
@@ -207,6 +211,7 @@ function TaskView({report, parentReport, action}: TaskViewProps) {
                                 shouldGreyOutWhenDisabled={false}
                                 interactive={!isDisableInteractive}
                                 shouldUseDefaultCursorWhenDisabled
+                                sentryLabel={CONST.SENTRY_LABEL.TASK.VIEW_ASSIGNEE}
                             />
                         )}
                     </OfflineWithFeedback>