diff --git a/src/CONST/index.ts b/src/CONST/index.ts index f3eb3f1e45671..b7c633bd94550 100755 --- a/src/CONST/index.ts +++ b/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; diff --git a/src/components/AnimatedSubmitButton/index.tsx b/src/components/AnimatedSubmitButton/index.tsx index e85907f5e0ae1..f555672feaa79 100644 --- a/src/components/AnimatedSubmitButton/index.tsx +++ b/src/components/AnimatedSubmitButton/index.tsx @@ -26,9 +26,12 @@ type AnimatedSubmitButtonProps = { // 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 @@ function AnimatedSubmitButton({success, text, onPress, isSubmittingAnimationRunn onPress={onPress} icon={icon} isDisabled={isDisabled} + sentryLabel={sentryLabel} /> )} diff --git a/src/components/EmojiPicker/CategoryShortcutButton.tsx b/src/components/EmojiPicker/CategoryShortcutButton.tsx index 7ffff218d1fe6..775ffd7d8415f 100644 --- a/src/components/EmojiPicker/CategoryShortcutButton.tsx +++ b/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} > {({hovered, pressed}) => ( {({hovered, pressed}) => ( diff --git a/src/components/EmojiPicker/EmojiPickerMenu/index.native.tsx b/src/components/EmojiPicker/EmojiPickerMenu/index.native.tsx index 92fb036ce7a07..61d8ab2601a55 100644 --- a/src/components/EmojiPicker/EmojiPickerMenu/index.native.tsx +++ b/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} /> setIsFocused(false)} autoCorrect={false} - blurOnSubmit={filteredEmojis.length > 0} + submitBehavior={filteredEmojis.length > 0 ? 'blurAndSubmit' : 'submit'} + sentryLabel={CONST.SENTRY_LABEL.EMOJI_PICKER.SEARCH_INPUT} /> {emoji} diff --git a/src/components/EmojiPicker/EmojiPickerMenuItem/index.tsx b/src/components/EmojiPicker/EmojiPickerMenuItem/index.tsx index 1629089dace55..2508433d9ed87 100644 --- a/src/components/EmojiPicker/EmojiPickerMenuItem/index.tsx +++ b/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} > {emoji} diff --git a/src/components/EmojiPicker/EmojiSkinToneList.tsx b/src/components/EmojiPicker/EmojiSkinToneList.tsx index 99819e415e5af..ad4d49c08c68a 100644 --- a/src/components/EmojiPicker/EmojiSkinToneList.tsx +++ b/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} > {currentSkinTone.code} diff --git a/src/components/Reactions/AddReactionBubble.tsx b/src/components/Reactions/AddReactionBubble.tsx index d98e2ac9ecf7d..92ac8270cd4bd 100644 --- a/src/components/Reactions/AddReactionBubble.tsx +++ b/src/components/Reactions/AddReactionBubble.tsx @@ -107,6 +107,7 @@ function AddReactionBubble({onSelectEmoji, reportAction, onPressOpenPicker, onWi // disable dimming pressDimmingValue={1} dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}} + sentryLabel={CONST.SENTRY_LABEL.EMOJI_REACTIONS.ADD_REACTION_BUBBLE} > {({hovered, pressed}) => ( <> diff --git a/src/components/Reactions/EmojiReactionBubble.tsx b/src/components/Reactions/EmojiReactionBubble.tsx index 91863a2e3839d..9db1f82e356a8 100644 --- a/src/components/Reactions/EmojiReactionBubble.tsx +++ b/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} > {emojiCodes.join('')} {count > 0 && {count}} diff --git a/src/components/Reactions/MiniQuickEmojiReactions.tsx b/src/components/Reactions/MiniQuickEmojiReactions.tsx index 7530ab735e6d3..dcbecb6ff6bcf 100644 --- a/src/components/Reactions/MiniQuickEmojiReactions.tsx +++ b/src/components/Reactions/MiniQuickEmojiReactions.tsx @@ -69,6 +69,7 @@ function MiniQuickEmojiReactions({reportAction, reportActionID, onEmojiSelected, isDelayButtonStateComplete={false} tooltipText={`:${getLocalizedEmojiName(emoji.name, preferredLocale)}:`} onPress={callFunctionIfActionIsAllowed(() => onEmojiSelected(emoji, emojiReactions, preferredSkinTone))} + sentryLabel={CONST.SENTRY_LABEL.MINI_CONTEXT_MENU.QUICK_REACTION} > {({hovered, pressed}) => ( ; + + /** 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} /> ), [CONST.REPORT.REPORT_PREVIEW_ACTIONS.APPROVE]: ( @@ -548,6 +549,7 @@ function MoneyRequestReportPreviewContent({ 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} > 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} > @@ -154,6 +155,7 @@ function TaskPreview({ } })} accessibilityLabel={translate('task.task')} + sentryLabel={CONST.SENTRY_LABEL.TASK.PREVIEW_CHECKBOX} /> {hasAssignee && ( diff --git a/src/components/ReportActionItem/TaskView.tsx b/src/components/ReportActionItem/TaskView.tsx index 2e98c4b0e44c3..ffcbc0abca996 100644 --- a/src/components/ReportActionItem/TaskView.tsx +++ b/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}) => ( @@ -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} /> @@ -176,6 +178,7 @@ function TaskView({report, parentReport, action}: TaskViewProps) { numberOfLinesTitle={0} interactive={!isDisableInteractive} shouldUseDefaultCursorWhenDisabled + sentryLabel={CONST.SENTRY_LABEL.TASK.VIEW_DESCRIPTION} /> @@ -196,6 +199,7 @@ function TaskView({report, parentReport, action}: TaskViewProps) { interactive={!isDisableInteractive} titleWithTooltips={assigneeTooltipDetails} shouldUseDefaultCursorWhenDisabled + sentryLabel={CONST.SENTRY_LABEL.TASK.VIEW_ASSIGNEE} /> ) : ( )} diff --git a/src/components/ReportActionItem/TransactionPreview/index.tsx b/src/components/ReportActionItem/TransactionPreview/index.tsx index e33b7bac4a02b..2be479968ff3e 100644 --- a/src/components/ReportActionItem/TransactionPreview/index.tsx +++ b/src/components/ReportActionItem/TransactionPreview/index.tsx @@ -110,6 +110,7 @@ function TransactionPreview(props: TransactionPreviewProps) { shouldUseHapticsOnLongPress accessibilityLabel={isBillSplit ? translate('iou.split') : translate(showCashOrCardTranslation)} accessibilityHint={convertToDisplayString(requestAmount, requestCurrency)} + sentryLabel={CONST.SENTRY_LABEL.TRANSACTION_PREVIEW.CARD} > )} diff --git a/src/components/SettlementButton/index.tsx b/src/components/SettlementButton/index.tsx index ddb7d0f43f73b..cd06dff02ce6b 100644 --- a/src/components/SettlementButton/index.tsx +++ b/src/components/SettlementButton/index.tsx @@ -94,6 +94,7 @@ function SettlementButton({ wrapperStyle, shouldUseShortForm = false, hasOnlyHeldExpenses = false, + sentryLabel, }: SettlementButtonProps) { const icons = useMemoizedLazyExpensifyIcons(['Building', 'User', 'ThumbsUp']); const styles = useThemeStyles(); @@ -629,6 +630,7 @@ function SettlementButton({ enterKeyEventListenerPriority={enterKeyEventListenerPriority} useKeyboardShortcuts={useKeyboardShortcuts} shouldUseModalPaddingStyle={paymentButtonOptions.length <= 5} + sentryLabel={sentryLabel} /> )} diff --git a/src/components/SettlementButton/types.ts b/src/components/SettlementButton/types.ts index 6355f78566a84..f96f9bc0540c9 100644 --- a/src/components/SettlementButton/types.ts +++ b/src/components/SettlementButton/types.ts @@ -103,6 +103,9 @@ type SettlementButtonProps = { /** Whether we the report has only held expenses */ hasOnlyHeldExpenses?: boolean; + + /** Label for Sentry tracking */ + sentryLabel?: string; }; export default SettlementButtonProps; diff --git a/src/components/TaskHeaderActionButton.tsx b/src/components/TaskHeaderActionButton.tsx index 51f0374f5eb69..14ffbd440ff6b 100644 --- a/src/components/TaskHeaderActionButton.tsx +++ b/src/components/TaskHeaderActionButton.tsx @@ -52,7 +52,7 @@ function TaskHeaderActionButton({report}: TaskHeaderActionButtonProps) { } })} style={styles.flex1} - sentryLabel={CONST.SENTRY_LABEL.HEADER_VIEW.TASK_ACTION_BUTTON} + sentryLabel={CONST.SENTRY_LABEL.TASK.HEADER_ACTION_BUTTON} /> ); diff --git a/src/components/TextInput/BaseTextInput/implementation/index.tsx b/src/components/TextInput/BaseTextInput/implementation/index.tsx index 3560897c3caf3..61d107f79e9a2 100644 --- a/src/components/TextInput/BaseTextInput/implementation/index.tsx +++ b/src/components/TextInput/BaseTextInput/implementation/index.tsx @@ -82,6 +82,7 @@ function BaseTextInput({ iconContainerStyle, shouldUseDefaultLineHeightForPrefix = true, ref, + sentryLabel, ...inputProps }: BaseTextInputProps) { const InputComponent = InputComponentMap.get(type) ?? RNTextInput; @@ -313,6 +314,7 @@ function BaseTextInput({ !isMultiline && styles.componentHeightLarge, touchableInputWrapperStyle, ]} + sentryLabel={sentryLabel} > )} diff --git a/src/components/TextInput/BaseTextInput/types.ts b/src/components/TextInput/BaseTextInput/types.ts index 7795345cf6b20..5b1039057c62d 100644 --- a/src/components/TextInput/BaseTextInput/types.ts +++ b/src/components/TextInput/BaseTextInput/types.ts @@ -200,6 +200,9 @@ type CustomBaseTextInputProps = ForwardedFSClassProps & { navigation?: Omit, 'getState'> & { getState(): NavigationState | undefined; }; + + /** Label for Sentry tracking */ + sentryLabel?: string; }; type BaseTextInputRef = HTMLFormElement | AnimatedTextInputRef; diff --git a/src/components/TextInput/TextInputClearButton/index.tsx b/src/components/TextInput/TextInputClearButton/index.tsx index a3b693d100648..c149df8754cc7 100644 --- a/src/components/TextInput/TextInputClearButton/index.tsx +++ b/src/components/TextInput/TextInputClearButton/index.tsx @@ -12,9 +12,11 @@ import CONST from '@src/CONST'; type TextInputClearButtonProps = { style?: StyleProp; onPressButton: () => void; + /** Label for Sentry tracking */ + sentryLabel?: string; }; -function TextInputClearButton({style, onPressButton}: TextInputClearButtonProps) { +function TextInputClearButton({style, onPressButton, sentryLabel}: TextInputClearButtonProps) { const theme = useTheme(); const styles = useThemeStyles(); const {translate} = useLocalize(); @@ -29,6 +31,7 @@ function TextInputClearButton({style, onPressButton}: TextInputClearButtonProps) }} onPress={onPressButton} shouldUseAutoHitSlop + sentryLabel={sentryLabel} >