[HOLD][Part 2] Onyx.connect deprecation in ModifiedExpenseMessage

src/components/LHNOptionsList/LHNOptionsList.tsx

@@ -10,7 +10,6 @@ import type {OnyxEntry} from 'react-native-onyx';
 import type {BlockingViewProps} from '@components/BlockingViews/BlockingView';
 import BlockingView from '@components/BlockingViews/BlockingView';
 import Icon from '@components/Icon';
-import * as Expensicons from '@components/Icon/Expensicons';
 import {ScrollOffsetContext} from '@components/ScrollOffsetContextProvider';
 import TextBlock from '@components/TextBlock';
 import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
@@ -57,7 +56,7 @@ function LHNOptionsList({style, contentContainerStyles, data, onSelectRow, optio
     const flashListRef = useRef<FlashListRef<Report>>(null);
     const route = useRoute();
     const isScreenFocused = useIsFocused();
-    const expensifyIcons = useMemoizedLazyExpensifyIcons(['MagnifyingGlass']);
+    const expensifyIcons = useMemoizedLazyExpensifyIcons(['MagnifyingGlass', 'Plus']);
 
     const [reports] = useOnyx(ONYXKEYS.COLLECTION.REPORT, {canBeMissing: false});
     const [reportAttributes] = useOnyx(ONYXKEYS.DERIVED.REPORT_ATTRIBUTES, {selector: reportsSelector, canBeMissing: true});
@@ -73,6 +72,7 @@ function LHNOptionsList({style, contentContainerStyles, data, onSelectRow, optio
     const [introSelected] = useOnyx(ONYXKEYS.NVP_INTRO_SELECTED, {canBeMissing: true});
     const [onboarding] = useOnyx(ONYXKEYS.NVP_ONBOARDING, {canBeMissing: true});
     const [isFullscreenVisible] = useOnyx(ONYXKEYS.FULLSCREEN_VISIBILITY, {canBeMissing: true});
+    const [policyTags] = useOnyx(ONYXKEYS.COLLECTION.POLICY_TAGS, {canBeMissing: false});
     const {accountID: currentUserAccountID} = useCurrentUserPersonalDetails();
     const {policyForMovingExpensesID} = usePolicyForMovingExpenses();
 
@@ -140,7 +140,7 @@ function LHNOptionsList({style, contentContainerStyles, data, onSelectRow, optio
                     text={translate('common.emptyLHN.subtitleText2')}
                 />
                 <Icon
-                    src={Expensicons.Plus}
+                    src={expensifyIcons.Plus}
                     width={variables.emptyLHNIconWidth}
                     height={variables.emptyLHNIconHeight}
                     fill={theme.icon}
@@ -160,12 +160,13 @@ function LHNOptionsList({style, contentContainerStyles, data, onSelectRow, optio
             styles.justifyContentCenter,
             styles.flexWrap,
             styles.textAlignCenter,
+            styles.textNormal,
             styles.mh1,
-            theme.icon,
             theme.textSupporting,
-            styles.textNormal,
+            theme.icon,
             translate,
             expensifyIcons.MagnifyingGlass,
+            expensifyIcons.Plus,
         ],
     );
 
@@ -183,6 +184,8 @@ function LHNOptionsList({style, contentContainerStyles, data, onSelectRow, optio
             const itemParentReportActions = reportActions?.[`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${item?.parentReportID}`];
             const itemParentReportAction = item?.parentReportActionID ? itemParentReportActions?.[item?.parentReportActionID] : undefined;
             const itemReportAttributes = reportAttributes?.[reportID];
+            const itemPolicyID = item?.policyID === CONST.POLICY.OWNER_EMAIL_FAKE && policyForMovingExpensesID ? policyForMovingExpensesID : item?.policyID;
+            const itemPolicyTags = policyTags?.[`${ONYXKEYS.COLLECTION.POLICY_TAGS}${itemPolicyID}`];
 
             let invoiceReceiverPolicyID = '-1';
             if (item?.invoiceReceiver && 'policyID' in item.invoiceReceiver) {
@@ -238,11 +241,10 @@ function LHNOptionsList({style, contentContainerStyles, data, onSelectRow, optio
                 movedToReport,
                 policy: itemPolicy,
                 isReportArchived: !!itemReportNameValuePairs?.private_isArchived,
-                policyForMovingExpensesID,
                 reportMetadata: itemReportMetadata,
+                policyTags: itemPolicyTags,
                 reportAttributesDerived: reportAttributes,
             });
-
             const shouldShowRBRorGBRTooltip = firstReportIDWithGBRorRBR === reportID;
 
             let lastAction: ReportAction | undefined;
@@ -312,11 +314,12 @@ function LHNOptionsList({style, contentContainerStyles, data, onSelectRow, optio
             reportMetadataCollection,
             isOffline,
             reportAttributes,
+            policyForMovingExpensesID,
+            policyTags,
             policy,
             transactions,
             draftComments,
             personalDetails,
-            policyForMovingExpensesID,
             firstReportIDWithGBRorRBR,
             optionMode,
             shouldDisableFocusOptions,

src/components/LHNOptionsList/OptionRowLHNData.tsx

@@ -52,6 +52,8 @@ function OptionRowLHNData({
 
     const [movedFromReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${getMovedReportID(lastAction, CONST.REPORT.MOVE_TYPE.FROM)}`, {canBeMissing: true});
     const [movedToReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${getMovedReportID(lastAction, CONST.REPORT.MOVE_TYPE.TO)}`, {canBeMissing: true});
+
+    const [policyTags] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_TAGS}${fullReport?.policyID}`, {canBeMissing: true});
     // Check the report errors equality to avoid re-rendering when there are no changes
     const prevReportErrors = usePrevious(reportAttributes?.reportErrors);
     const areReportErrorsEqual = useMemo(() => deepEqual(prevReportErrors, reportAttributes?.reportErrors), [prevReportErrors, reportAttributes?.reportErrors]);
@@ -78,6 +80,7 @@ function OptionRowLHNData({
             lastActionReport,
             movedFromReport,
             movedToReport,
+            policyTags,
             currentUserAccountID,
             reportAttributesDerived,
         });
@@ -115,6 +118,7 @@ function OptionRowLHNData({
         isReportArchived,
         movedFromReport,
         movedToReport,
+        policyTags,
         currentUserAccountID,
         reportAttributesDerived,
     ]);

src/components/OptionListContextProvider.tsx

@@ -7,6 +7,7 @@ import usePrivateIsArchivedMap from '@hooks/usePrivateIsArchivedMap';
 import {createOptionFromReport, createOptionList, processReport, shallowOptionsListCompare} from '@libs/OptionsListUtils';
 import type {OptionList, SearchOption} from '@libs/OptionsListUtils';
 import {isSelfDM} from '@libs/ReportUtils';
+import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type {PersonalDetails, Report} from '@src/types/onyx';
 import {usePersonalDetails} from './OnyxListItemProvider';
@@ -59,15 +60,16 @@ function OptionsListContextProvider({children}: OptionsListProviderProps) {
     const currentUserPersonalDetails = useCurrentUserPersonalDetails();
     const currentUserAccountID = currentUserPersonalDetails.accountID;
     const hasInitialData = useMemo(() => Object.keys(personalDetails ?? {}).length > 0, [personalDetails]);
+    const [policyTags] = useOnyx(ONYXKEYS.COLLECTION.POLICY_TAGS, {canBeMissing: false});
     const privateIsArchivedMap = usePrivateIsArchivedMap();
 
     const loadOptions = useCallback(() => {
-        const optionLists = createOptionList(personalDetails, currentUserAccountID, privateIsArchivedMap, reports, reportAttributes?.reports);
+        const optionLists = createOptionList(personalDetails, policyTags, currentUserAccountID, privateIsArchivedMap, reports, reportAttributes?.reports);
         setOptions({
             reports: optionLists.reports,
             personalDetails: optionLists.personalDetails,
         });
-    }, [personalDetails, currentUserAccountID, privateIsArchivedMap, reports, reportAttributes?.reports]);
+    }, [personalDetails, currentUserAccountID, privateIsArchivedMap, reports, reportAttributes?.reports, policyTags]);
 
     /**
      * This effect is responsible for generating the options list when their data is not yet initialized
@@ -123,7 +125,8 @@ function OptionsListContextProvider({children}: OptionsListProviderProps) {
             for (const reportKey of changedReportKeys) {
                 const report = changedReportsEntries[reportKey];
                 const reportID = reportKey.replace(ONYXKEYS.COLLECTION.REPORT, '');
-                const {reportOption} = processReport(report, personalDetails, currentUserAccountID, reportAttributes?.reports);
+                const reportPolicyTags = report?.policyID ? policyTags?.[report?.policyID] : CONST.POLICY.DEFAULT_TAG_LIST;
+                const {reportOption} = processReport(report, personalDetails, reportPolicyTags, currentUserAccountID, reportAttributes?.reports);
 
                 if (reportOption) {
                     updatedReportsMap.set(reportID, reportOption);
@@ -137,7 +140,7 @@ function OptionsListContextProvider({children}: OptionsListProviderProps) {
                 reports: Array.from(updatedReportsMap.values()),
             };
         });
-    }, [changedReportsEntries, personalDetails, currentUserAccountID, reportAttributes?.reports]);
+    }, [changedReportsEntries, personalDetails, currentUserAccountID, reportAttributes?.reports, policyTags]);
 
     useEffect(() => {
         if (!changedReportActions || !areOptionsInitialized.current) {
@@ -157,7 +160,9 @@ function OptionsListContextProvider({children}: OptionsListProviderProps) {
                 }
 
                 const reportID = key.replace(ONYXKEYS.COLLECTION.REPORT_ACTIONS, '');
-                const {reportOption} = processReport(updatedReportsMap.get(reportID)?.item, personalDetails, currentUserAccountID, reportAttributes?.reports);
+                const report = updatedReportsMap.get(reportID)?.item;
+                const reportPolicyTags = report?.policyID ? policyTags?.[report?.policyID] : CONST.POLICY.DEFAULT_TAG_LIST;
+                const {reportOption} = processReport(updatedReportsMap.get(reportID)?.item, personalDetails, reportPolicyTags, currentUserAccountID, reportAttributes?.reports);
 
                 if (reportOption) {
                     updatedReportsMap.set(reportID, reportOption);
@@ -169,7 +174,7 @@ function OptionsListContextProvider({children}: OptionsListProviderProps) {
                 reports: Array.from(updatedReportsMap.values()),
             };
         });
-    }, [changedReportActions, personalDetails, currentUserAccountID, reportAttributes?.reports]);
+    }, [changedReportActions, personalDetails, currentUserAccountID, reportAttributes?.reports, policyTags]);
 
     /**
      * This effect is used to update the options list when personal details change.
@@ -189,6 +194,7 @@ function OptionsListContextProvider({children}: OptionsListProviderProps) {
         if (!prevPersonalDetails) {
             const {personalDetails: newPersonalDetailsOptions, reports: newReports} = createOptionList(
                 personalDetails,
+                policyTags,
                 currentUserAccountID,
                 privateIsArchivedMap,
                 reports,
@@ -226,7 +232,10 @@ function OptionsListContextProvider({children}: OptionsListProviderProps) {
                     continue;
                 }
 
-                const newReportOption = createOptionFromReport(report, personalDetails, currentUserAccountID, reportAttributes?.reports, {showPersonalDetails: true});
+                const reportPolicyTags = report.policyID ? policyTags?.[report.policyID] : CONST.POLICY.DEFAULT_TAG_LIST;
+                const newReportOption = createOptionFromReport(report, personalDetails, reportPolicyTags, currentUserAccountID, reportAttributes?.reports, {
+                    showPersonalDetails: true,
+                });
                 const replaceIndex = options.reports.findIndex((option) => option.reportID === report.reportID);
                 newReportOptions.push({
                     newReportOption,
@@ -236,7 +245,7 @@ function OptionsListContextProvider({children}: OptionsListProviderProps) {
         }
 
         // since personal details are not a collection, we need to recreate the whole list from scratch
-        const newPersonalDetailsOptions = createOptionList(personalDetails, currentUserAccountID, privateIsArchivedMap, reports, reportAttributes?.reports).personalDetails;
+        const newPersonalDetailsOptions = createOptionList(personalDetails, policyTags, currentUserAccountID, privateIsArchivedMap, reports, reportAttributes?.reports).personalDetails;
 
         setOptions((prevOptions) => {
             const newOptions = {...prevOptions};

src/components/Search/FilterDropdowns/UserSelectPopup.tsx

@@ -69,6 +69,7 @@ function UserSelectPopup({value, closeOverlay, onChange, isSearchable}: UserSele
     const [isSearchingForReports] = useOnyx(ONYXKEYS.IS_SEARCHING_FOR_REPORTS, {initWithStoredValues: false, canBeMissing: true});
     const [draftComments] = useOnyx(ONYXKEYS.COLLECTION.REPORT_DRAFT_COMMENT, {canBeMissing: true});
     const [nvpDismissedProductTraining] = useOnyx(ONYXKEYS.NVP_DISMISSED_PRODUCT_TRAINING, {canBeMissing: true});
+    const [policyTags] = useOnyx(ONYXKEYS.COLLECTION.POLICY_TAGS, {canBeMissing: true});
     const [allPolicies] = useOnyx(ONYXKEYS.COLLECTION.POLICY, {canBeMissing: true});
     const initialSelectedOptions = useMemo(() => {
         return value.reduce<OptionData[]>((acc, id) => {
@@ -106,6 +107,7 @@ function UserSelectPopup({value, closeOverlay, onChange, isSearchable}: UserSele
             allPolicies,
             draftComments,
             nvpDismissedProductTraining,
+            policyTags,
             loginList,
             currentUserAccountID,
             currentUserEmail,
@@ -116,7 +118,19 @@ function UserSelectPopup({value, closeOverlay, onChange, isSearchable}: UserSele
             },
             countryCode,
         );
-    }, [options.reports, options.personalDetails, allPolicies, draftComments, nvpDismissedProductTraining, loginList, countryCode, personalDetails, currentUserAccountID, currentUserEmail]);
+    }, [
+        options.reports,
+        options.personalDetails,
+        allPolicies,
+        draftComments,
+        nvpDismissedProductTraining,
+        policyTags,
+        loginList,
+        currentUserAccountID,
+        currentUserEmail,
+        personalDetails,
+        countryCode,
+    ]);
 
     const filteredOptions = useMemo(() => {
         return filterAndOrderOptions(optionsList, cleanSearchTerm, countryCode, loginList, currentUserEmail, currentUserAccountID, personalDetails, {

src/components/Search/SearchAutocompleteList.tsx

@@ -195,6 +195,7 @@ function SearchAutocompleteList({
     const [nvpDismissedProductTraining] = useOnyx(ONYXKEYS.NVP_DISMISSED_PRODUCT_TRAINING, {canBeMissing: true});
     const [recentSearches] = useOnyx(ONYXKEYS.RECENT_SEARCHES, {canBeMissing: true});
     const [countryCode] = useOnyx(ONYXKEYS.COUNTRY_CODE, {canBeMissing: false});
+    const [policyTags] = useOnyx(ONYXKEYS.COLLECTION.POLICY_TAGS, {canBeMissing: true});
     const [loginList] = useOnyx(ONYXKEYS.LOGIN_LIST, {canBeMissing: true});
     const currentUserPersonalDetails = useCurrentUserPersonalDetails();
     const currentUserEmail = currentUserPersonalDetails.email ?? '';
@@ -220,6 +221,7 @@ function SearchAutocompleteList({
             includeCurrentUser: true,
             countryCode,
             shouldShowGBR: false,
+            policyTags,
             shouldUnreadBeBold: true,
             loginList,
             currentUserAccountID,
@@ -237,6 +239,7 @@ function SearchAutocompleteList({
         loginList,
         currentUserAccountID,
         currentUserEmail,
+        policyTags,
         personalDetails,
     ]);
 
@@ -454,6 +457,7 @@ function SearchAutocompleteList({
                     countryCode,
                     loginList,
                     shouldShowGBR: true,
+                    policyTags,
                     currentUserAccountID,
                     currentUserEmail,
                     personalDetails,
@@ -488,6 +492,7 @@ function SearchAutocompleteList({
                     countryCode,
                     loginList,
                     shouldShowGBR: true,
+                    policyTags,
                     currentUserAccountID,
                     currentUserEmail,
                     personalDetails,
@@ -660,11 +665,13 @@ function SearchAutocompleteList({
         currencyAutocompleteList,
         recentCurrencyAutocompleteList,
         taxAutocompleteList,
+        translate,
         options,
         draftComments,
         nvpDismissedProductTraining,
         betas,
         countryCode,
+        policyTags,
         loginList,
         currentUserAccountID,
         currentUserEmail,
@@ -673,7 +680,6 @@ function SearchAutocompleteList({
         statusAutocompleteList,
         feedAutoCompleteList,
         cardAutocompleteList,
-        translate,
         workspaceList,
         hasAutocompleteList,
         isAutocompleteList,

src/components/Search/SearchFiltersChatsSelector.tsx

@@ -63,13 +63,29 @@ function SearchFiltersChatsSelector({initialReportIDs, onFiltersUpdate, isScreen
     const [draftComments] = useOnyx(ONYXKEYS.COLLECTION.REPORT_DRAFT_COMMENT, {canBeMissing: true});
     const archivedReportsIdSet = useArchivedReportsIdSet();
     const [nvpDismissedProductTraining] = useOnyx(ONYXKEYS.NVP_DISMISSED_PRODUCT_TRAINING, {canBeMissing: true});
+    const [policyTags] = useOnyx(ONYXKEYS.COLLECTION.POLICY_TAGS, {canBeMissing: false});
 
     const selectedOptions: OptionData[] = selectedReportIDs.map((id) => {
+        const selectedReport = reports?.[`${ONYXKEYS.COLLECTION.REPORT}${id}`];
         const report = getSelectedOptionData(
-            createOptionFromReport({...reports?.[`${ONYXKEYS.COLLECTION.REPORT}${id}`], reportID: id}, personalDetails, currentUserAccountID, reportAttributesDerived),
+            createOptionFromReport(
+                {...reports?.[`${ONYXKEYS.COLLECTION.REPORT}${id}`], reportID: id},
+                personalDetails,
+                policyTags?.[`${ONYXKEYS.COLLECTION.POLICY_TAGS}${selectedReport?.policyID}`],
+                currentUserAccountID,
+                reportAttributesDerived,
+            ),
         );
         const isReportArchived = archivedReportsIdSet.has(`${ONYXKEYS.COLLECTION.REPORT_NAME_VALUE_PAIRS}${report.reportID}`);
-        const alternateText = getAlternateText(report, {}, isReportArchived, currentUserAccountID, {}, reportAttributesDerived);
+        const alternateText = getAlternateText(
+            report,
+            {},
+            policyTags?.[`${ONYXKEYS.COLLECTION.POLICY_TAGS}${report.policyID}`],
+            isReportArchived,
+            currentUserAccountID,
+            {},
+            reportAttributesDerived,
+        );
         return {...report, alternateText};
     });
 
@@ -86,6 +102,7 @@ function SearchFiltersChatsSelector({initialReportIDs, onFiltersUpdate, isScreen
                   loginList,
                   currentUserAccountID,
                   currentUserEmail,
+                  policyTags,
                   personalDetails,
               });
 
@@ -102,6 +119,7 @@ function SearchFiltersChatsSelector({initialReportIDs, onFiltersUpdate, isScreen
             selectedOptions,
             chatOptions.recentReports,
             chatOptions.personalDetails,
+            policyTags,
             currentUserAccountID,
             personalDetails,
             false,