Replace VISIBLE_REPORT_ACTIONS derived value with per-report useOnyxState hooks

__mocks__/react-native-onyx.ts

@@ -5,7 +5,7 @@
 import type {ConnectOptions, OnyxKey} from 'react-native-onyx';
 
 // eslint-disable-next-line no-restricted-imports
-import Onyx, {useOnyx} from 'react-native-onyx';
+import Onyx, {useOnyx, useOnyxState} from 'react-native-onyx';
 
 let connectCallbackDelay = 0;
 function addDelayToConnectCallback(delay: number) {
@@ -41,4 +41,4 @@ const reactNativeOnyxMock: ReactNativeOnyxMock = {
 
 export default reactNativeOnyxMock;
 
-export {useOnyx};
+export {useOnyx, useOnyxState};

src/ONYXKEYS.ts

@@ -1436,7 +1436,6 @@ const ONYXKEYS = {
         REPORT_ATTRIBUTES: 'reportAttributes',
         REPORT_TRANSACTIONS_AND_VIOLATIONS: 'reportTransactionsAndViolations',
         OUTSTANDING_REPORTS_BY_POLICY_ID: 'outstandingReportsByPolicyID',
-        VISIBLE_REPORT_ACTIONS: 'visibleReportActions',
         NON_PERSONAL_AND_WORKSPACE_CARD_LIST: 'nonPersonalAndWorkspaceCardList',
         PERSONAL_AND_WORKSPACE_CARD_LIST: 'personalAndWorkspaceCardList',
         CARD_FEED_ERRORS: 'cardFeedErrors',
@@ -2019,7 +2018,6 @@ type OnyxDerivedValuesMapping = {
     [ONYXKEYS.DERIVED.REPORT_ATTRIBUTES]: OnyxTypes.ReportAttributesDerivedValue;
     [ONYXKEYS.DERIVED.REPORT_TRANSACTIONS_AND_VIOLATIONS]: OnyxTypes.ReportTransactionsAndViolationsDerivedValue;
     [ONYXKEYS.DERIVED.OUTSTANDING_REPORTS_BY_POLICY_ID]: OnyxTypes.OutstandingReportsByPolicyIDDerivedValue;
-    [ONYXKEYS.DERIVED.VISIBLE_REPORT_ACTIONS]: OnyxTypes.VisibleReportActionsDerivedValue;
     [ONYXKEYS.DERIVED.NON_PERSONAL_AND_WORKSPACE_CARD_LIST]: OnyxTypes.NonPersonalAndWorkspaceCardListDerivedValue;
     [ONYXKEYS.DERIVED.PERSONAL_AND_WORKSPACE_CARD_LIST]: OnyxTypes.PersonalAndWorkspaceCardListDerivedValue;
     [ONYXKEYS.DERIVED.CARD_FEED_ERRORS]: OnyxTypes.CardFeedErrorsDerivedValue;

src/components/Attachments/AttachmentCarousel/extractAttachments.ts

@@ -6,7 +6,7 @@ import {canUserPerformWriteAction} from '@libs/ReportUtils';
 import tryResolveUrlFromApiRoot from '@libs/tryResolveUrlFromApiRoot';
 
 import CONST from '@src/CONST';
-import type {Report, ReportAction, ReportActions, VisibleReportActionsDerivedValue} from '@src/types/onyx';
+import type {Report, ReportAction, ReportActions, VisibleReportActions} from '@src/types/onyx';
 import type {Note} from '@src/types/onyx/Report';
 
 import type {OnyxEntry} from 'react-native-onyx';
@@ -34,7 +34,7 @@ function extractAttachments(
         reportActions?: OnyxEntry<ReportActions>;
         report: OnyxEntry<Report>;
         isReportArchived: boolean | undefined;
-        visibleReportActionsData?: VisibleReportActionsDerivedValue;
+        visibleReportActionsData?: VisibleReportActions;
     },
 ) {
     const targetNote = privateNotes?.[Number(accountID)]?.note ?? '';

src/components/LHNOptionsList/OptionRowLHN/OptionRowLHNData.tsx

@@ -8,6 +8,7 @@ import useGetExpensifyCardFromReportAction from '@hooks/useGetExpensifyCardFromR
 import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
 import useThemeStyles from '@hooks/useThemeStyles';
+import useVisibleReportActions from '@hooks/useVisibleReportActions';
 
 import getNonEmptyStringOnyxID from '@libs/getNonEmptyStringOnyxID';
 import {getLastVisibleActionIncludingTransactionThread, getOriginalMessage, isActionableTrackExpense, isInviteOrRemovedAction} from '@libs/ReportActionsUtils';
@@ -18,14 +19,13 @@ import CONST from '@src/CONST';
 import {getMovedReportID} from '@src/libs/ModifiedExpenseMessage';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type {ReportActions as ReportActionsType} from '@src/types/onyx';
-import type {VisibleReportActionsDerivedValue} from '@src/types/onyx/DerivedValues';
 import type {Icon} from '@src/types/onyx/OnyxCommon';
 
 import type {ViewStyle} from 'react-native';
 import type {OnyxCollection} from 'react-native-onyx';
 
 import {isTrackIntentUserSelector} from '@selectors/Onboarding';
-import React, {useCallback, useMemo} from 'react';
+import React, {useMemo} from 'react';
 import {StyleSheet, View} from 'react-native';
 
 import OptionRowLHN from './OptionRowLHN';
@@ -64,28 +64,7 @@ function OptionRowLHNData({
     const [parentReportActions] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${getNonEmptyStringOnyxID(fullReport?.parentReportID)}`);
     const [transactionThreadReportActions] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${getNonEmptyStringOnyxID(oneTransactionThreadReportID)}`);
 
-    // Scoped VISIBLE_REPORT_ACTIONS selector
-    const visibleActionsSelector = useCallback(
-        (data: VisibleReportActionsDerivedValue | undefined) => {
-            if (!data) {
-                return undefined;
-            }
-            const result: VisibleReportActionsDerivedValue = {};
-            const reportEntry = data[reportID];
-            if (reportEntry) {
-                result[reportID] = reportEntry;
-            }
-            if (oneTransactionThreadReportID) {
-                const txThreadEntry = data[oneTransactionThreadReportID];
-                if (txThreadEntry) {
-                    result[oneTransactionThreadReportID] = txThreadEntry;
-                }
-            }
-            return result;
-        },
-        [reportID, oneTransactionThreadReportID],
-    );
-    const [visibleReportActionsData] = useOnyx(ONYXKEYS.DERIVED.VISIBLE_REPORT_ACTIONS, {selector: visibleActionsSelector});
+    const visibleReportActionsData = useVisibleReportActions(reportID, oneTransactionThreadReportID);
 
     // Per-item NVP subscription instead of collection-level subscription in parent
     const [reportNameValuePairs] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_NAME_VALUE_PAIRS}${reportID}`);

src/components/MoneyRequestReportView/useMoneyRequestReportVisibleActions.ts

@@ -8,17 +8,14 @@
  * non-inverted unified list, newest-first for the shared unread/mark-as-read hooks - so callers never
  * re-derive or re-sort them.
  */
-import useOnyx from '@hooks/useOnyx';
+import useVisibleReportActions from '@hooks/useVisibleReportActions';
 
 import {isActionVisibleOnMoneyRequestReport} from '@libs/MoneyRequestReportUtils';
 import {getFirstVisibleReportActionID, isDeletedParentAction, isIOUActionMatchingTransactionList, isReportActionVisible} from '@libs/ReportActionsUtils';
 
 import CONST from '@src/CONST';
-import ONYXKEYS from '@src/ONYXKEYS';
 import type * as OnyxTypes from '@src/types/onyx';
 
-import {reportVisibleActionsSelector} from '@selectors/ReportAction';
-
 type UseMoneyRequestReportVisibleActionsParams = {
     /** The report whose actions are being displayed */
     reportID: string | undefined;
@@ -66,7 +63,7 @@ function useMoneyRequestReportVisibleActions({
     shouldShowHarvestCreatedAction,
     isOffline,
 }: UseMoneyRequestReportVisibleActionsParams): UseMoneyRequestReportVisibleActionsResult {
-    const [visibleReportActionsData] = useOnyx(ONYXKEYS.DERIVED.VISIBLE_REPORT_ACTIONS, {selector: reportVisibleActionsSelector(reportID)});
+    const visibleReportActionsData = useVisibleReportActions(reportID);
 
     const visibleReportActionsNewestFirst = reportActions.filter((reportAction) => {
         const isActionVisibleOnMoneyReport = isActionVisibleOnMoneyRequestReport(reportAction, shouldShowHarvestCreatedAction);

src/components/ParentNavigationSubtitle.tsx

@@ -7,6 +7,7 @@ import useRootNavigationState from '@hooks/useRootNavigationState';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
+import useVisibleReportActions from '@hooks/useVisibleReportActions';
 
 import {isFullScreenName} from '@libs/Navigation/helpers/isNavigatorName';
 import Navigation from '@libs/Navigation/Navigation';
@@ -25,7 +26,6 @@ import type {ColorValue, StyleProp, TextStyle, ViewStyle} from 'react-native';
 
 import {useRoute} from '@react-navigation/native';
 import {getReportHasParentAccess} from '@selectors/Report';
-import {reportVisibleActionsSelector} from '@selectors/ReportAction';
 import React from 'react';
 import {View} from 'react-native';
 
@@ -102,7 +102,7 @@ function ParentNavigationSubtitle({
     const {translate} = useLocalize();
     const [hasParentAccess] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${reportID}`, {selector: getReportHasParentAccess});
     const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${parentReportID}`);
-    const [visibleReportActionsData] = useOnyx(ONYXKEYS.DERIVED.VISIBLE_REPORT_ACTIONS, {selector: reportVisibleActionsSelector(parentReportID)});
+    const visibleReportActionsData = useVisibleReportActions(parentReportID);
     const isReportArchived = useReportIsArchived(report?.reportID);
     const canUserPerformWriteAction = canUserPerformWriteActionReportUtils(report, isReportArchived);
     const hasAccessToParentReport = hasParentAccess !== false;

src/components/Search/SearchAutocompleteList.tsx

@@ -7,6 +7,7 @@ import type {ListItem as NewListItem, ListItemProps} from '@components/Selection
 import SelectionListWithSections from '@components/SelectionList/SelectionListWithSections';
 import type {Section, SelectionListWithSectionsHandle} from '@components/SelectionList/SelectionListWithSections/types';
 
+import useAllVisibleReportActions from '@hooks/useAllVisibleReportActions';
 import useAutocompleteSuggestions from '@hooks/useAutocompleteSuggestions';
 import useBottomSafeSafeAreaPaddingStyle from '@hooks/useBottomSafeSafeAreaPaddingStyle';
 import {useCurrencyListActions} from '@hooks/useCurrencyList';
@@ -215,7 +216,7 @@ function SearchAutocompleteList({
     });
     const [policies = getEmptyObject<NonNullable<OnyxCollection<Policy>>>()] = useOnyx(ONYXKEYS.COLLECTION.POLICY);
     const [allPolicyTags] = useOnyx(ONYXKEYS.COLLECTION.POLICY_TAGS);
-    const [visibleReportActionsData] = useOnyx(ONYXKEYS.DERIVED.VISIBLE_REPORT_ACTIONS);
+    const visibleReportActionsData = useAllVisibleReportActions();
     const {activePolicyID} = useActivePolicyContext();
     const sortedReportActionsData = useSortedReportActionsData();
     const sortedActions = sortedReportActionsData?.sortedActions;

src/components/Search/SearchRouter/SearchRouterOptionsWarmer.tsx

@@ -1,3 +1,4 @@
+import useAllVisibleReportActions from '@hooks/useAllVisibleReportActions';
 import useFilteredOptions from '@hooks/useFilteredOptions';
 import useOnyx from '@hooks/useOnyx';
 import {useAllPersonalDetails} from '@hooks/usePersonalDetails';
@@ -38,7 +39,7 @@ function SearchRouterOptionsWarmer({onDone}: SearchRouterOptionsWarmerProps) {
     const reportAttributes = useReportAttributes();
     const sortedReportActionsData = useSortedReportActionsData();
     const [allPolicyTags] = useOnyx(ONYXKEYS.COLLECTION.POLICY_TAGS);
-    const [visibleReportActionsData] = useOnyx(ONYXKEYS.DERIVED.VISIBLE_REPORT_ACTIONS);
+    const visibleReportActionsData = useAllVisibleReportActions();
 
     const churnVersionRef = useRef(0);
     useEffect(() => {

src/components/Table/TableBody.tsx

@@ -164,6 +164,7 @@ function TableBodyList({contentContainerStyle, emptyMessage, onLayout, style, ..
         noResultsStateElement,
         tableListMetadata,
         isEmptyResult,
+        isDefaultViewEmpty,
         scrollWidth,
         tableWidth,
     } = useTableContext<TableData>();
@@ -337,8 +338,10 @@ function TableBodyList({contentContainerStyle, emptyMessage, onLayout, style, ..
         </View>
     );
 
-    const emptyStateContent =
-        tableListMetadata.hasPageHeader && isEmptyResult ? (noResultsStateElement ?? EmptyResultComponent) : (emptyStateElement ?? renderListComponent(ListEmptyComponent));
+    // When the default view hides every row (e.g. all workspaces are archived), no search or filter is active,
+    // so show the empty state rather than "No results".
+    const shouldShowNoResultsState = tableListMetadata.hasPageHeader && isEmptyResult && !isDefaultViewEmpty;
+    const emptyStateContent = shouldShowNoResultsState ? (noResultsStateElement ?? EmptyResultComponent) : (emptyStateElement ?? renderListComponent(ListEmptyComponent));
     const footerElement = renderListComponent(ListFooterComponent);
     // Consumer footer flex growth is useful below normal rows, but inside the combined empty-state
     // footer it can expand over the page header. Preserve the remaining style while disabling growth.

src/components/Table/TableEmptyStates/TableNoResultsState.tsx

@@ -21,10 +21,11 @@ type TableNoResultsStateProps = Omit<GenericEmptyStateComponentProps, 'headerMed
 export default function TableNoResultsState(emptyStateProps: TableNoResultsStateProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
-    const {isEmptyResult, tableListMetadata} = useTableContext();
+    const {isEmptyResult, isDefaultViewEmpty, tableListMetadata} = useTableContext();
     const illustrations = useMemoizedLazyIllustrations(['EmptyShelves']);
 
-    if (!isEmptyResult) {
+    // The default view hiding every row is not a search/filter result, so the empty state handles it instead.
+    if (!isEmptyResult || isDefaultViewEmpty) {
         return null;
     }
 

src/hooks/useAllVisibleReportActions.ts

@@ -0,0 +1,28 @@
+import ONYXKEYS from '@src/ONYXKEYS';
+import type {Report, ReportActions, ReportNameValuePairs, VisibleReportActions} from '@src/types/onyx';
+
+import type {OnyxCollection} from 'react-native-onyx';
+
+import {getAllVisibleReportActions} from '@selectors/VisibleReportActions';
+import {useOnyxState} from 'react-native-onyx';
+
+const dependencies = [ONYXKEYS.COLLECTION.REPORT_ACTIONS, ONYXKEYS.SESSION, ONYXKEYS.COLLECTION.REPORT, ONYXKEYS.COLLECTION.REPORT_NAME_VALUE_PAIRS];
+
+/** The cached visibility of every report's actions, keyed by reportID. Reads live data, also inside the Search scope. */
+function useAllVisibleReportActions(): VisibleReportActions {
+    return useOnyxState(
+        (state) => {
+            // useOnyxState's state view types a collection key as one member, but at runtime it returns the whole collection
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion
+            const allReportActions = state[ONYXKEYS.COLLECTION.REPORT_ACTIONS] as OnyxCollection<ReportActions>;
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion
+            const allReports = state[ONYXKEYS.COLLECTION.REPORT] as OnyxCollection<Report>;
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion
+            const allReportNameValuePairs = state[ONYXKEYS.COLLECTION.REPORT_NAME_VALUE_PAIRS] as OnyxCollection<ReportNameValuePairs>;
+            return getAllVisibleReportActions(allReportActions, state[ONYXKEYS.SESSION]?.accountID, allReports, allReportNameValuePairs);
+        },
+        {dependencies},
+    );
+}
+
+export default useAllVisibleReportActions;

src/hooks/useAutocompleteSuggestions.ts

@@ -24,8 +24,8 @@ import {getDatePresets, getHasOptions} from '@libs/SearchUIUtils';
 
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
-import type {CardFeeds, CardList, PersonalDetailsList, Policy} from '@src/types/onyx';
-import type {ReportAttributesDerivedValue, VisibleReportActionsDerivedValue} from '@src/types/onyx/DerivedValues';
+import type {CardFeeds, CardList, PersonalDetailsList, Policy, VisibleReportActions} from '@src/types/onyx';
+import type {ReportAttributesDerivedValue} from '@src/types/onyx/DerivedValues';
 import type {Icon} from '@src/types/onyx/OnyxCommon';
 import type {SearchDataTypes} from '@src/types/onyx/SearchResults';
 import getEmptyArray from '@src/types/utils/getEmptyArray';
@@ -64,7 +64,7 @@ type UseAutocompleteSuggestionsParams = {
     countryCode: OnyxEntry<number>;
     loginList: OnyxEntry<Record<string, unknown>>;
     policies: NonNullable<OnyxCollection<Policy>>;
-    visibleReportActionsData?: VisibleReportActionsDerivedValue;
+    visibleReportActionsData?: VisibleReportActions;
     reportAttributesDerived?: ReportAttributesDerivedValue['reports'];
     currentUserAccountID: number;
     currentUserEmail: string;

src/hooks/useReportActionsVisibility.ts

@@ -6,8 +6,6 @@ import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type {ReportAction} from '@src/types/onyx';
 
-import {reportVisibleActionsSelector} from '@selectors/ReportAction';
-
 import useConciergeSidePanelReportActions from './useConciergeSidePanelReportActions';
 import useCurrentUserPersonalDetails from './useCurrentUserPersonalDetails';
 import useIsInSidePanel from './useIsInSidePanel';
@@ -16,6 +14,7 @@ import useNetwork from './useNetwork';
 import useOnyx from './useOnyx';
 import useSidePanelState from './useSidePanelState';
 import useTransactionsAndViolationsForReport from './useTransactionsAndViolationsForReport';
+import useVisibleReportActions from './useVisibleReportActions';
 
 type UseReportActionsVisibilityParams = {
     reportID: string | undefined;
@@ -62,9 +61,7 @@ function useReportActionsVisibility({
 
     const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${reportID}`);
     const [conciergeReportID] = useOnyx(ONYXKEYS.CONCIERGE_REPORT_ID);
-    const [visibleReportActionsData] = useOnyx(ONYXKEYS.DERIVED.VISIBLE_REPORT_ACTIONS, {
-        selector: reportVisibleActionsSelector(reportID),
-    });
+    const visibleReportActionsData = useVisibleReportActions(reportID);
 
     const isInSidePanel = useIsInSidePanel();
     const isConciergeSidePanel = isInSidePanel && isConciergeChatReport(report, conciergeReportID);

src/hooks/useSearchSelector/base.ts

@@ -1,5 +1,6 @@
 import {usePersonalDetails} from '@components/OnyxListItemProvider';
 
+import useAllVisibleReportActions from '@hooks/useAllVisibleReportActions';
 import {useCurrencyListActions} from '@hooks/useCurrencyList';
 import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
 import useDebounce from '@hooks/useDebounce';
@@ -201,7 +202,7 @@ function useSearchSelectorBase({
     const [loginList] = useOnyx(ONYXKEYS.LOGINS, {selector: expensifyLoginsSelector});
     const [allPolicies] = useOnyx(ONYXKEYS.COLLECTION.POLICY);
     const [draftComments] = useOnyx(ONYXKEYS.COLLECTION.REPORT_DRAFT_COMMENT);
-    const [visibleReportActionsData] = useOnyx(ONYXKEYS.DERIVED.VISIBLE_REPORT_ACTIONS);
+    const visibleReportActionsData = useAllVisibleReportActions();
     const sortedReportActionsData = useSortedReportActionsData();
     const sortedActions = sortedReportActionsData?.sortedActions;
     const transactionThreadIDs = sortedReportActionsData?.transactionThreadIDs;

src/hooks/useVisibleReportActions.ts

@@ -0,0 +1,36 @@
+import ONYXKEYS from '@src/ONYXKEYS';
+import type {VisibleReportActions} from '@src/types/onyx';
+
+import {getVisibleReportActionsForReports} from '@selectors/VisibleReportActions';
+import {useOnyxState} from 'react-native-onyx';
+
+/**
+ * The cached visibility of one report's actions, plus its transaction thread's when given, in the `{[reportID]: visibility}`
+ * shape `isReportActionVisible` expects. It depends only on those reports' actions and support ticket state, so writes to other reports don't re-run it.
+ */
+function useVisibleReportActions(reportID: string | undefined, transactionThreadReportID?: string): VisibleReportActions | undefined {
+    const reportIDs = [reportID, transactionThreadReportID].filter((id): id is string => !!id);
+
+    return useOnyxState(
+        (state) =>
+            getVisibleReportActionsForReports(
+                reportIDs.map((id) => [
+                    id,
+                    state[`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${id}`],
+                    state[`${ONYXKEYS.COLLECTION.REPORT}${id}`],
+                    state[`${ONYXKEYS.COLLECTION.REPORT_NAME_VALUE_PAIRS}${id}`],
+                ]),
+                state[ONYXKEYS.SESSION]?.accountID,
+            ),
+        {
+            dependencies: [
+                ...reportIDs.flatMap(
+                    (id) => [`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${id}`, `${ONYXKEYS.COLLECTION.REPORT}${id}`, `${ONYXKEYS.COLLECTION.REPORT_NAME_VALUE_PAIRS}${id}`] as const,
+                ),
+                ONYXKEYS.SESSION,
+            ],
+        },
+    );
+}
+
+export default useVisibleReportActions;