Merge pull request Expensify#68713 from dmkt9/fix/67138

Fix/67138 - Red dots and green dots aren't shown in recent chats like in LHN

Author: inimaga

src/components/Search/SearchAutocompleteList.tsx

@@ -139,6 +139,7 @@ function SearchRouterItem(props: UserListItemProps<OptionData> | SearchQueryList
             <SearchQueryListItem
                 // eslint-disable-next-line react/jsx-props-no-spreading
                 {...props}
+                shouldDisplayRBR
             />
         );
     }
@@ -147,6 +148,7 @@ function SearchRouterItem(props: UserListItemProps<OptionData> | SearchQueryList
             pressableStyle={[styles.br2, styles.ph3]}
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...props}
+            shouldDisplayRBR
         />
     );
 }

src/components/SelectionList/Search/SearchQueryListItem.tsx

@@ -27,13 +27,15 @@ type SearchQueryListItemProps = {
     onSelectRow: (item: SearchQueryItem) => void;
     onFocus?: ListItemFocusEventHandler;
     shouldSyncFocus?: boolean;
+    /** Whether to show RBR */
+    shouldDisplayRBR?: boolean;
 };
 
 function isSearchQueryItem(item: OptionData | SearchQueryItem): item is SearchQueryItem {
     return 'searchItemType' in item;
 }
 
-function SearchQueryListItem({item, isFocused, showTooltip, onSelectRow, onFocus, shouldSyncFocus}: SearchQueryListItemProps) {
+function SearchQueryListItem({item, isFocused, showTooltip, onSelectRow, onFocus, shouldSyncFocus, shouldDisplayRBR}: SearchQueryListItemProps) {
     const styles = useThemeStyles();
     const theme = useTheme();
 
@@ -49,6 +51,7 @@ function SearchQueryListItem({item, isFocused, showTooltip, onSelectRow, onFocus
             hoverStyle={item.isSelected && styles.activeComponentBG}
             shouldSyncFocus={shouldSyncFocus}
             showTooltip={showTooltip}
+            shouldDisplayRBR={shouldDisplayRBR}
         >
             <>
                 {!!item.singleIcon && (

src/components/SelectionList/UserListItem.tsx

@@ -34,6 +34,7 @@ function UserListItem<TItem extends ListItem>({
     wrapperStyle,
     pressableStyle,
     shouldUseDefaultRightHandSideCheckmark,
+    shouldDisplayRBR,
 }: UserListItemProps<TItem>) {
     const styles = useThemeStyles();
     const theme = useTheme();
@@ -91,6 +92,7 @@ function UserListItem<TItem extends ListItem>({
             keyForList={item.keyForList}
             onFocus={onFocus}
             shouldSyncFocus={shouldSyncFocus}
+            shouldDisplayRBR={shouldDisplayRBR}
         >
             {(hovered?: boolean) => (
                 <>

src/libs/OptionsListUtils.ts

@@ -953,8 +953,9 @@ function createOption(
         result.shouldShowSubscript = shouldReportShowSubscript(report, !!result.private_isArchived);
         result.isPolicyExpenseChat = reportUtilsIsPolicyExpenseChat(report);
         result.isOwnPolicyExpenseChat = report.isOwnPolicyExpenseChat ?? false;
-        result.allReportErrors = reportAttributesDerived?.[report.reportID]?.reportErrors ?? {};
-        result.brickRoadIndicator = !isEmptyObject(result.allReportErrors) ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : '';
+        const reportAttribute = reportAttributesDerived?.[report.reportID];
+        result.allReportErrors = reportAttribute?.reportErrors ?? {};
+        result.brickRoadIndicator = !isEmptyObject(result.allReportErrors) ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : (reportAttribute?.brickRoadStatus ?? '');
         result.pendingAction = report.pendingFields ? (report.pendingFields.addWorkspaceRoom ?? report.pendingFields.createChat) : undefined;
         result.ownerAccountID = report.ownerAccountID;
         result.reportID = report.reportID;