Improve ReportActions debugging

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',

src/pages/Debug/Report/DebugReportActions.tsx

@@ -1,17 +1,17 @@
-import React from 'react';
+import React, {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 {getReportActionMessageText, getSortedReportActionsForDisplay} from '@libs/ReportActionsUtils';
+import {canUserPerformWriteAction} from '@libs/ReportUtils';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
-import type {ReportAction} from '@src/types/onyx';
 
 type DebugReportActionsProps = {
     reportID: string;
@@ -20,38 +20,45 @@ 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 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) => (
-        <PressableWithFeedback
-            accessibilityLabel={translate('common.details')}
-            onPress={() => 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}
-        >
-            <Text>{item.reportActionID}</Text>
-            <Text style={styles.textLabelSupporting}>{datetimeToCalendarTime(item.created, false, false)}</Text>
-        </PressableWithFeedback>
-    );
+    const searchedReportActions = useMemo(() => {
+        return (sortedAllReportActions ?? [])
+            .filter(
+                (reportAction) =>
+                    reportAction.reportActionID.includes(debouncedSearchValue) || getReportActionMessageText(reportAction).toLowerCase().includes(debouncedSearchValue.toLowerCase()),
+            )
+            .map((reportAction) => ({
+                reportActionID: reportAction.reportActionID,
+                text: getReportActionMessageText(reportAction),
+                alternateText: `${reportAction.reportActionID} | ${datetimeToCalendarTime(reportAction.created, false, false)}`,
+            }));
+    }, [sortedAllReportActions, debouncedSearchValue, datetimeToCalendarTime]);
 
     return (
-        <ScrollView style={styles.mv5}>
+        <ScrollView style={styles.mv3}>
             <Button
                 success
                 large
                 text={translate('common.create')}
                 onPress={() => Navigation.navigate(ROUTES.DEBUG_REPORT_ACTION_CREATE.getRoute(reportID))}
-                style={[styles.pb5, styles.ph3]}
+                style={[styles.pb3, styles.ph3]}
+            />
+            <SelectionList
+                sections={[{data: searchedReportActions}]}
+                listItemTitleStyles={styles.fontWeightNormal}
+                textInputValue={searchValue}
+                textInputLabel={translate('common.search')}
+                onChangeText={setSearchValue}
+                onSelectRow={(item) => Navigation.navigate(ROUTES.DEBUG_REPORT_ACTION.getRoute(reportID, item.reportActionID))}
+                ListItem={RadioListItem}
             />
-            {/* This list was previously rendered as a FlatList, but it turned out that it caused the component to flash in some cases,
-            so it was replaced by this solution. */}
-            {sortedAllReportActions?.map((item, index) => renderItem(item, index))}
         </ScrollView>
     );
 }

src/pages/home/report/ContextMenu/ContextMenuActions.tsx

@@ -739,9 +739,13 @@ const ContextMenuActions: ContextMenuAction[] = [
         isAnonymousAction: true,
         textTranslateKey: 'debug.debug',
         icon: Expensicons.Bug,
-        shouldShow: ({type, user}) => type === CONST.CONTEXT_MENU_TYPES.REPORT && !!user?.isDebugModeEnabled,
-        onPress: (closePopover, {reportID}) => {
-            Navigation.navigate(ROUTES.DEBUG_REPORT.getRoute(reportID));
+        shouldShow: ({type, user}) => [CONST.CONTEXT_MENU_TYPES.REPORT_ACTION, CONST.CONTEXT_MENU_TYPES.REPORT].some((value) => value === type) && !!user?.isDebugModeEnabled,
+        onPress: (closePopover, {reportID, reportAction}) => {
+            if (reportAction) {
+                Navigation.navigate(ROUTES.DEBUG_REPORT_ACTION.getRoute(reportID, reportAction.reportActionID));
+            } else {
+                Navigation.navigate(ROUTES.DEBUG_REPORT.getRoute(reportID));
+            }
             hideContextMenu(false, ReportActionComposeFocusManager.focus);
         },
         getDescription: () => {},