Fixed LHN Ordering

src/CONST.ts

@@ -1457,6 +1457,8 @@ const CONST = {
         ALPHABETIC_AND_LATIN_CHARS: /^[\p{Script=Latin} ]*$/u,
         NON_ALPHABETIC_AND_NON_LATIN_CHARS: /[^\p{Script=Latin}]/gu,
         ACCENT_LATIN_CHARS: /[\u00C0-\u017F]/g,
+        INVALID_DISPLAY_NAME_LHN: /[^\p{L}\p{N}\u00C0-\u017F\s-]/gu,
+        INVALID_DISPLAY_NAME_ONLY_LHN: /^[^\p{L}\p{N}\u00C0-\u017F\s-]$/gu,
         POSITIVE_INTEGER: /^\d+$/,
         PO_BOX: /\b[P|p]?(OST|ost)?\.?\s*[O|o|0]?(ffice|FFICE)?\.?\s*[B|b][O|o|0]?[X|x]?\.?\s+[#]?(\d+)\b/,
         ANY_VALUE: /^.+$/,

src/components/LHNOptionsList/LHNOptionsList.tsx

@@ -32,6 +32,7 @@ function LHNOptionsList({
     draftComments = {},
     transactionViolations = {},
     onFirstItemRendered = () => {},
+    reportsWithErrorsIds = {},
 }: LHNOptionsListProps) {
     const styles = useThemeStyles();
     const {canUseViolations} = usePermissions();
@@ -63,6 +64,7 @@ function LHNOptionsList({
             const itemComment = draftComments?.[`${ONYXKEYS.COLLECTION.REPORT_DRAFT_COMMENT}${reportID}`] ?? '';
             const sortedReportActions = ReportActionsUtils.getSortedReportActionsForDisplay(itemReportActions);
             const lastReportAction = sortedReportActions[0];
+            const reportErrors = reportsWithErrorsIds[reportID] ?? {};
 
             // Get the transaction for the last report action
             let lastReportActionTransactionID = '';
@@ -91,6 +93,7 @@ function LHNOptionsList({
                     transactionViolations={transactionViolations}
                     canUseViolations={canUseViolations}
                     onLayout={onLayoutItem}
+                    reportErrors={reportErrors}
                 />
             );
         },
@@ -109,6 +112,7 @@ function LHNOptionsList({
             transactionViolations,
             canUseViolations,
             onLayoutItem,
+            reportsWithErrorsIds,
         ],
     );
 

src/components/LHNOptionsList/OptionRowLHNData.tsx

@@ -28,6 +28,7 @@ function OptionRowLHNData({
     lastReportActionTransaction = {},
     transactionViolations,
     canUseViolations,
+    reportErrors,
     ...propsToForward
 }: OptionRowLHNDataProps) {
     const reportID = propsToForward.reportID;
@@ -40,11 +41,11 @@ function OptionRowLHNData({
         // Note: ideally we'd have this as a dependent selector in onyx!
         const item = SidebarUtils.getOptionData({
             report: fullReport,
-            reportActions,
             personalDetails,
             preferredLocale: preferredLocale ?? CONST.LOCALES.DEFAULT,
             policy,
             parentReportAction,
+            reportErrors,
             hasViolations: !!hasViolations,
         });
         if (deepEqual(item, optionItemRef.current)) {

src/components/LHNOptionsList/types.ts

@@ -7,6 +7,7 @@ import type {CurrentReportIDContextValue} from '@components/withCurrentReportID'
 import type CONST from '@src/CONST';
 import type {OptionData} from '@src/libs/ReportUtils';
 import type {Locale, PersonalDetailsList, Policy, Report, ReportAction, ReportActions, Transaction, TransactionViolation} from '@src/types/onyx';
+import type * as OnyxCommon from '@src/types/onyx/OnyxCommon';
 import type {EmptyObject} from '@src/types/utils/EmptyObject';
 
 type OptionMode = ValueOf<typeof CONST.OPTION_MODE>;
@@ -58,6 +59,8 @@ type CustomLHNOptionsListProps = {
 
     /** Callback to fire when the list is laid out */
     onFirstItemRendered: () => void;
+
+    reportsWithErrorsIds: Record<string, OnyxCommon.Errors>;
 };
 
 type LHNOptionsListProps = CustomLHNOptionsListProps & CurrentReportIDContextValue & LHNOptionsListOnyxProps;
@@ -113,6 +116,9 @@ type OptionRowLHNDataProps = {
 
     /** Callback to execute when the OptionList lays out */
     onLayout?: (event: LayoutChangeEvent) => void;
+
+    /** The report errors */
+    reportErrors: OnyxCommon.Errors | undefined;
 };
 
 type OptionRowLHNProps = {

src/libs/SidebarUtils.ts

@@ -7,6 +7,7 @@ import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type {PersonalDetails, PersonalDetailsList, TransactionViolation} from '@src/types/onyx';
 import type Beta from '@src/types/onyx/Beta';
+import type * as OnyxCommon from '@src/types/onyx/OnyxCommon';
 import type Policy from '@src/types/onyx/Policy';
 import type Report from '@src/types/onyx/Report';
 import type {ReportActions} from '@src/types/onyx/ReportAction';
@@ -74,6 +75,13 @@ function setWithLimit<TKey, TValue>(map: Map<TKey, TValue>, key: TKey, value: TV
 // Variable to verify if ONYX actions are loaded
 let hasInitialReportActions = false;
 
+function filterDisplayName(displayName: string): string {
+    if (CONST.REGEX.INVALID_DISPLAY_NAME_ONLY_LHN.test(displayName)) {
+        return displayName;
+    }
+    return displayName.replace(CONST.REGEX.INVALID_DISPLAY_NAME_LHN, '');
+}
+
 /**
  * @returns An array of reportIDs sorted in the proper order
  */
@@ -87,6 +95,7 @@ function getOrderedReportIDs(
     transactionViolations: OnyxCollection<TransactionViolation[]>,
     currentPolicyID = '',
     policyMemberAccountIDs: number[] = [],
+    reportsWithErrorsIds: Record<string, OnyxCommon.Errors> = {},
 ): string[] {
     const currentReportActions = allReportActions?.[`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${currentReportId}`];
     let reportActionCount = currentReportActions?.length ?? 0;
@@ -112,13 +121,18 @@ function getOrderedReportIDs(
     const isInDefaultMode = !isInGSDMode;
     const allReportsDictValues = Object.values(allReports);
 
+    const reportIDsWithViolations: Record<string, boolean> = {};
+
     // Filter out all the reports that shouldn't be displayed
     let reportsToDisplay = allReportsDictValues.filter((report) => {
         const parentReportActionsKey = `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${report?.parentReportID}`;
         const parentReportActions = allReportActions?.[parentReportActionsKey];
         const parentReportAction = parentReportActions?.find((action) => action && report && action?.reportActionID === report?.parentReportActionID);
         const doesReportHaveViolations =
             betas.includes(CONST.BETAS.VIOLATIONS) && !!parentReportAction && ReportUtils.doesTransactionThreadHaveViolations(report, transactionViolations, parentReportAction);
+        if (doesReportHaveViolations) {
+            reportIDsWithViolations[report.reportID] = true;
+        }
         return ReportUtils.shouldReportBeInOptionList({
             report,
             currentReportId: currentReportId ?? '',
@@ -161,11 +175,13 @@ function getOrderedReportIDs(
         // However, this code needs to be very performant to handle thousands of reports, so in the interest of speed, we're just going to disable this lint rule and add
         // the reportDisplayName property to the report object directly.
         // eslint-disable-next-line no-param-reassign
-        report.displayName = ReportUtils.getReportName(report);
+        report.displayName = filterDisplayName(ReportUtils.getReportName(report));
+
+        const hasRBR = report.reportID in reportsWithErrorsIds || report.reportID in reportIDsWithViolations;
 
         const isPinned = report.isPinned ?? false;
         const reportAction = ReportActionsUtils.getReportAction(report.parentReportID ?? '', report.parentReportActionID ?? '');
-        if (isPinned || ReportUtils.requiresAttentionFromCurrentUser(report, reportAction)) {
+        if (isPinned || hasRBR || ReportUtils.requiresAttentionFromCurrentUser(report, reportAction)) {
             pinnedAndGBRReports.push(report);
         } else if (report.hasDraft) {
             draftReports.push(report);
@@ -205,19 +221,19 @@ function getOrderedReportIDs(
  */
 function getOptionData({
     report,
-    reportActions,
     personalDetails,
     preferredLocale,
     policy,
     parentReportAction,
+    reportErrors,
     hasViolations,
 }: {
     report: OnyxEntry<Report>;
-    reportActions: OnyxEntry<ReportActions>;
     personalDetails: OnyxEntry<PersonalDetailsList>;
     preferredLocale: DeepValueOf<typeof CONST.LOCALES>;
     policy: OnyxEntry<Policy> | undefined;
     parentReportAction: OnyxEntry<ReportAction> | undefined;
+    reportErrors: OnyxCommon.Errors | undefined;
     hasViolations: boolean;
 }): ReportUtils.OptionData | undefined {
     // When a user signs out, Onyx is cleared. Due to the lazy rendering with a virtual list, it's possible for
@@ -230,7 +246,7 @@ function getOptionData({
     const result: ReportUtils.OptionData = {
         text: '',
         alternateText: null,
-        allReportErrors: OptionsListUtils.getAllReportErrors(report, reportActions),
+        allReportErrors: reportErrors,
         brickRoadIndicator: null,
         tooltipText: null,
         subtitle: null,

src/pages/home/sidebar/SidebarLinks.js

@@ -43,7 +43,7 @@ const propTypes = {
     isActiveReport: PropTypes.func.isRequired,
 };
 
-function SidebarLinks({onLinkClick, insets, optionListItems, isLoading, priorityMode = CONST.PRIORITY_MODE.DEFAULT, isActiveReport, isCreateMenuOpen, activePolicy}) {
+function SidebarLinks({onLinkClick, insets, optionListItems, isLoading, priorityMode = CONST.PRIORITY_MODE.DEFAULT, isActiveReport, isCreateMenuOpen, activePolicy, reportsWithErrorsIds}) {
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
     const modal = useRef({});
@@ -157,6 +157,7 @@ function SidebarLinks({onLinkClick, insets, optionListItems, isLoading, priority
                     shouldDisableFocusOptions={isSmallScreenWidth}
                     optionMode={viewMode}
                     onFirstItemRendered={App.setSidebarLoaded}
+                    reportsWithErrorsIds={reportsWithErrorsIds}
                 />
                 {isLoading && optionListItems.length === 0 && (
                     <View style={[StyleSheet.absoluteFillObject, styles.appBG]}>

src/pages/home/sidebar/SidebarLinksData.js

@@ -16,6 +16,7 @@ import useLocalize from '@hooks/useLocalize';
 import usePrevious from '@hooks/usePrevious';
 import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
+import * as OptionsListUtils from '@libs/OptionsListUtils';
 import {getPolicyMembersByIdWithoutCurrentUser} from '@libs/PolicyUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import SidebarUtils from '@libs/SidebarUtils';
@@ -139,6 +140,23 @@ function SidebarLinksData({
     // eslint-disable-next-line react-hooks/exhaustive-deps
     useEffect(() => Policy.openWorkspace(activeWorkspaceID, policyMemberAccountIDs), [activeWorkspaceID]);
 
+    const reportsWithErrorsIds = useMemo(() => {
+        const reportKeys = _.keys(allReportActions);
+        return _.reduce(
+            reportKeys,
+            (errorsMap, reportKey) => {
+                const report = chatReports[reportKey.replace('reportActions_', 'report_')];
+                const allReportsActions = _.reduce(allReportActions[reportKey], (acc, reportAction) => ({...acc, [reportAction.reportActionID]: reportAction}), {});
+                const errors = OptionsListUtils.getAllReportErrors(report, allReportsActions) || {};
+                if (_.size(errors) === 0) {
+                    return errorsMap;
+                }
+                return {...errorsMap, [reportKey.replace('reportActions_', '')]: OptionsListUtils.getAllReportErrors(report, allReportsActions) || {}};
+            },
+            {},
+        );
+    }, [allReportActions, chatReports]);
+
     const reportIDsRef = useRef(null);
     const isLoading = isLoadingApp;
     const optionListItems = useMemo(() => {
@@ -152,6 +170,7 @@ function SidebarLinksData({
             transactionViolations,
             activeWorkspaceID,
             policyMemberAccountIDs,
+            reportsWithErrorsIds,
         );
 
         if (deepEqual(reportIDsRef.current, reportIDs)) {
@@ -165,7 +184,20 @@ function SidebarLinksData({
             reportIDsRef.current = reportIDs;
         }
         return reportIDsRef.current || [];
-    }, [chatReports, betas, policies, priorityMode, allReportActions, transactionViolations, activeWorkspaceID, policyMemberAccountIDs, isLoading, network.isOffline, prevPriorityMode]);
+    }, [
+        chatReports,
+        betas,
+        policies,
+        priorityMode,
+        allReportActions,
+        transactionViolations,
+        activeWorkspaceID,
+        policyMemberAccountIDs,
+        reportsWithErrorsIds,
+        isLoading,
+        network.isOffline,
+        prevPriorityMode,
+    ]);
 
     // We need to make sure the current report is in the list of reports, but we do not want
     // to have to re-generate the list every time the currentReportID changes. To do that
@@ -184,10 +216,23 @@ function SidebarLinksData({
                 transactionViolations,
                 activeWorkspaceID,
                 policyMemberAccountIDs,
+                reportsWithErrorsIds,
             );
         }
         return optionListItems;
-    }, [currentReportID, optionListItems, chatReports, betas, policies, priorityMode, allReportActions, transactionViolations, activeWorkspaceID, policyMemberAccountIDs]);
+    }, [
+        currentReportID,
+        optionListItems,
+        chatReports,
+        betas,
+        policies,
+        priorityMode,
+        allReportActions,
+        transactionViolations,
+        activeWorkspaceID,
+        policyMemberAccountIDs,
+        reportsWithErrorsIds,
+    ]);
 
     const currentReportIDRef = useRef(currentReportID);
     currentReportIDRef.current = currentReportID;
@@ -209,6 +254,7 @@ function SidebarLinksData({
                 isLoading={isLoading}
                 optionListItems={optionListItemsWithCurrentReport}
                 activeWorkspaceID={activeWorkspaceID}
+                reportsWithErrorsIds={reportsWithErrorsIds}
             />
         </View>
     );
@@ -232,6 +278,7 @@ const chatReportSelector = (report) =>
         isPinned: report.isPinned,
         isHidden: report.isHidden,
         notificationPreference: report.notificationPreference,
+        errors: report.errors,
         errorFields: {
             addWorkspaceRoom: report.errorFields && report.errorFields.addWorkspaceRoom,
         },
@@ -253,6 +300,9 @@ const chatReportSelector = (report) =>
         reportName: report.reportName,
         policyName: report.policyName,
         oldPolicyName: report.oldPolicyName,
+        isPolicyExpenseChat: report.isPolicyExpenseChat,
+        isOwnPolicyExpenseChat: report.isOwnPolicyExpenseChat,
+        isCancelledIOU: report.isCancelledIOU,
         // Other less obvious properites considered for sorting:
         ownerAccountID: report.ownerAccountID,
         currency: report.currency,
@@ -271,14 +321,15 @@ const chatReportSelector = (report) =>
 const reportActionsSelector = (reportActions) =>
     reportActions &&
     lodashMap(reportActions, (reportAction) => {
-        const {reportActionID, parentReportActionID, actionName, errors = []} = reportAction;
+        const {reportActionID, parentReportActionID, actionName, originalMessage, errors = []} = reportAction;
         const decision = lodashGet(reportAction, 'message[0].moderationDecision.decision');
 
         return {
             reportActionID,
             parentReportActionID,
             actionName,
             errors,
+            originalMessage,
             message: [
                 {
                     moderationDecision: {decision},

tests/perf-test/SidebarUtils.perf-test.ts

@@ -61,11 +61,11 @@ describe('SidebarUtils', () => {
         await measureFunction(() =>
             SidebarUtils.getOptionData({
                 report,
-                reportActions,
                 personalDetails,
                 preferredLocale,
                 policy,
                 parentReportAction,
+                reportErrors: undefined,
                 hasViolations: false,
             }),
         );