diff --git a/src/ROUTES.ts b/src/ROUTES.ts index b98717b51f5d..761386c32960 100644 --- a/src/ROUTES.ts +++ b/src/ROUTES.ts @@ -2131,7 +2131,12 @@ const ROUTES = { }, DEBUG_REPORT_ACTION: { route: 'debug/report/:reportID/actions/:reportActionID', - getRoute: (reportID: string, reportActionID: string) => `debug/report/${reportID}/actions/${reportActionID}` as const, + getRoute: (reportID: string | undefined, reportActionID: string) => { + if (!reportID) { + Log.warn('Invalid reportID is used to build the DEBUG_REPORT_ACTION route'); + } + return `debug/report/${reportID}/actions/${reportActionID}` as const; + }, }, DEBUG_REPORT_ACTION_CREATE: { route: 'debug/report/:reportID/actions/create', diff --git a/src/pages/Debug/Report/DebugReportActions.tsx b/src/pages/Debug/Report/DebugReportActions.tsx index fdc2aa8b1ca8..e86befd81217 100644 --- a/src/pages/Debug/Report/DebugReportActions.tsx +++ b/src/pages/Debug/Report/DebugReportActions.tsx @@ -1,14 +1,17 @@ -import React from 'react'; +import React, {useCallback, useMemo} from 'react'; import {useOnyx} from 'react-native-onyx'; import Button from '@components/Button'; -import {PressableWithFeedback} from '@components/Pressable'; import ScrollView from '@components/ScrollView'; -import Text from '@components/Text'; +import SelectionList from '@components/SelectionList'; +import RadioListItem from '@components/SelectionList/RadioListItem'; +import useDebouncedState from '@hooks/useDebouncedState'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import Navigation from '@libs/Navigation/Navigation'; -import * as ReportActionsUtils from '@libs/ReportActionsUtils'; -import * as ReportUtils from '@libs/ReportUtils'; +import Parser from '@libs/Parser'; +import {getOriginalMessage, getReportActionMessage, getReportActionMessageText, getSortedReportActionsForDisplay, isCreatedAction} from '@libs/ReportActionsUtils'; +import {canUserPerformWriteAction, formatReportLastMessageText} from '@libs/ReportUtils'; +import SidebarUtils from '@libs/SidebarUtils'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; import type {ReportAction} from '@src/types/onyx'; @@ -20,38 +23,72 @@ type DebugReportActionsProps = { function DebugReportActions({reportID}: DebugReportActionsProps) { const {translate, datetimeToCalendarTime} = useLocalize(); const styles = useThemeStyles(); + const [searchValue, debouncedSearchValue, setSearchValue] = useDebouncedState(''); const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${reportID}`); - const canUserPerformWriteAction = ReportUtils.canUserPerformWriteAction(report); + const [policy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${report?.policyID}`); + const ifUserCanPerformWriteAction = canUserPerformWriteAction(report); const [sortedAllReportActions] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${reportID}`, { canEvict: false, - selector: (allReportActions) => ReportActionsUtils.getSortedReportActionsForDisplay(allReportActions, canUserPerformWriteAction, true), + selector: (allReportActions) => getSortedReportActionsForDisplay(allReportActions, ifUserCanPerformWriteAction, true), }); - const renderItem = (item: ReportAction, index: number) => ( - Navigation.navigate(ROUTES.DEBUG_REPORT_ACTION.getRoute(reportID, item.reportActionID))} - style={({pressed}) => [styles.flexRow, styles.justifyContentBetween, pressed && styles.hoveredComponentBG, styles.p4]} - hoverStyle={styles.hoveredComponentBG} - key={index} - > - {item.reportActionID} - {datetimeToCalendarTime(item.created, false, false)} - + const getReportActionDebugText = useCallback( + (reportAction: ReportAction) => { + const reportActionMessage = getReportActionMessage(reportAction); + const originalMessage = getOriginalMessage(reportAction); + + if (!reportActionMessage) { + return ''; + } + + if (!!reportActionMessage.deleted || (originalMessage && 'deleted' in originalMessage && originalMessage.deleted)) { + return `[${translate('parentReportAction.deletedMessage')}]`; + } + + if (isCreatedAction(reportAction)) { + return formatReportLastMessageText(SidebarUtils.getWelcomeMessage(report, policy).messageText ?? translate('report.noActivityYet')); + } + + if (reportActionMessage.html) { + return Parser.htmlToText(reportActionMessage.html.replace(/\s*<\/mention-user>/gi, '')); + } + + return getReportActionMessageText(reportAction); + }, + [translate, policy, report], ); + const searchedReportActions = useMemo(() => { + return (sortedAllReportActions ?? []) + .filter( + (reportAction) => + reportAction.reportActionID.includes(debouncedSearchValue) || getReportActionMessageText(reportAction).toLowerCase().includes(debouncedSearchValue.toLowerCase()), + ) + .map((reportAction) => ({ + reportActionID: reportAction.reportActionID, + text: getReportActionDebugText(reportAction), + alternateText: `${reportAction.reportActionID} | ${datetimeToCalendarTime(reportAction.created, false, false)}`, + })); + }, [sortedAllReportActions, debouncedSearchValue, getReportActionDebugText, datetimeToCalendarTime]); + return ( - +