Support displaying a pending state in the report status for To-Do search results when an action is pending

src/components/ReportSearchHeader/index.tsx

@@ -9,6 +9,10 @@ function ReportSearchHeader({report, style, transactions, avatarBorderColor}: Re
     const styles = useThemeStyles();
     const {isLargeScreenWidth} = useResponsiveLayout();
 
+    const statusContainerStyle = useMemo(() => {
+        return [isLargeScreenWidth ? styles.mt1 : styles.mt0Half, report?.shouldShowStatusAsPending && styles.offlineFeedbackPending];
+    }, [isLargeScreenWidth, styles.mt1, styles.mt0Half, report?.shouldShowStatusAsPending, styles.offlineFeedbackPending]);
+
     const middleContent = useMemo(() => {
         return (
             <AvatarWithDisplayName
@@ -21,10 +25,21 @@ function ReportSearchHeader({report, style, transactions, avatarBorderColor}: Re
                 avatarBorderColor={avatarBorderColor}
                 customDisplayNameStyle={styles.fontWeightNormal}
                 parentNavigationSubtitleTextStyles={[styles.textLineHeightNormal, styles.minHeight4, styles.mt1, !isLargeScreenWidth && styles.textMicro]}
-                parentNavigationStatusContainerStyles={isLargeScreenWidth ? styles.mt1 : styles.mt0Half}
+                parentNavigationStatusContainerStyles={statusContainerStyle}
             />
         );
-    }, [report, transactions, avatarBorderColor, styles.fontWeightNormal, styles.textLineHeightNormal, styles.minHeight4, styles.mt1, isLargeScreenWidth, styles.textMicro, styles.mt0Half]);
+    }, [
+        report,
+        transactions,
+        avatarBorderColor,
+        styles.fontWeightNormal,
+        styles.textLineHeightNormal,
+        styles.minHeight4,
+        styles.mt1,
+        isLargeScreenWidth,
+        styles.textMicro,
+        statusContainerStyle,
+    ]);
 
     return (
         <View

src/components/ReportSearchHeader/types.ts

@@ -1,11 +1,9 @@
 import type {ColorValue, StyleProp, ViewStyle} from 'react-native';
-import type {OnyxEntry} from 'react-native-onyx';
-import type {TransactionListItemType} from '@components/SelectionListWithSections/types';
-import type {Report} from '@src/types/onyx';
+import type {ExpenseReportListItemType, TransactionListItemType} from '@components/SelectionListWithSections/types';
 
 type ReportSearchHeaderProps = {
     /** Report, if we're showing the details for one and using AvatarWithDisplay */
-    report?: OnyxEntry<Report>;
+    report?: ExpenseReportListItemType;
 
     /** Additional styles to add to the component */
     style?: StyleProp<ViewStyle>;

src/components/Search/index.tsx

@@ -429,11 +429,13 @@ function Search({
             queryJSON,
             isActionLoadingSet,
             cardFeeds,
+            isOffline,
             allTransactionViolations: violations,
         });
         return [filteredData1, filteredData1.length, allLength];
     }, [
         searchKey,
+        isOffline,
         exportReportActions,
         validGroupBy,
         isDataLoaded,

src/components/SelectionListWithSections/Search/ExpenseReportListItemRow.tsx

@@ -113,6 +113,7 @@ function ExpenseReportListItemRow({
                 <StatusCell
                     stateNum={item.stateNum}
                     statusNum={item.statusNum}
+                    isPending={item.shouldShowStatusAsPending}
                 />
             </View>
         ),

src/components/SelectionListWithSections/Search/StatusCell.tsx

@@ -12,9 +12,12 @@ type StatusCellProps = {
 
     /** The statusNum of the report */
     statusNum?: number;
+
+    /** Whether the report's state/status is pending */
+    isPending?: boolean;
 };
 
-function StatusCell({stateNum, statusNum}: StatusCellProps) {
+function StatusCell({stateNum, statusNum, isPending}: StatusCellProps) {
     const styles = useThemeStyles();
     const theme = useTheme();
     const {translate} = useLocalize();
@@ -41,7 +44,7 @@ function StatusCell({stateNum, statusNum}: StatusCellProps) {
     }
 
     return (
-        <View style={[styles.w100, styles.justifyContentCenter]}>
+        <View style={[styles.w100, styles.justifyContentCenter, isPending && styles.offlineFeedbackPending]}>
             <View style={[styles.reportStatusContainer, backgroundColorStyle]}>
                 <Text style={[styles.reportStatusText, textColorStyle]}>{statusText}</Text>
             </View>

src/components/SelectionListWithSections/types.ts

@@ -449,6 +449,9 @@ type TransactionReportGroupListItemType = TransactionGroupListItemType & {groupe
         /** The date the report was exported */
         exported?: string;
 
+        /** Whether the status field should be shown in a pending state */
+        shouldShowStatusAsPending?: boolean;
+
         /**
          * Whether we should show the report year.
          * This is true if at least one report in the dataset was created in past years

src/libs/SearchUIUtils.ts

@@ -172,6 +172,7 @@ type GetReportSectionsParams = {
     translate: LocalizedTranslate;
     formatPhoneNumber: LocaleContextProps['formatPhoneNumber'];
     isActionLoadingSet: ReadonlySet<string> | undefined;
+    isOffline: boolean | undefined;
     allTransactionViolations: OnyxCollection<OnyxTypes.TransactionViolation[]>;
     bankAccountList: OnyxEntry<OnyxTypes.BankAccountList>;
     reportActions?: Record<string, OnyxTypes.ReportAction[]>;
@@ -417,6 +418,7 @@ type GetSectionsParams = {
     archivedReportsIDList?: ArchivedReportsIDSet;
     queryJSON?: SearchQueryJSON;
     isActionLoadingSet?: ReadonlySet<string>;
+    isOffline?: boolean;
     cardFeeds?: OnyxCollection<OnyxTypes.CardFeeds>;
     allTransactionViolations?: OnyxCollection<OnyxTypes.TransactionViolation[]>;
 };
@@ -1863,6 +1865,7 @@ function getReportSections({
     currentAccountID,
     currentUserEmail,
     translate,
+    isOffline,
     formatPhoneNumber,
     isActionLoadingSet,
     allTransactionViolations,
@@ -1954,6 +1957,8 @@ function getReportSections({
                 const policyFromKey = getPolicyFromKey(data, reportItem);
                 const policy = policies?.[`${ONYXKEYS.COLLECTION.POLICY}${reportItem?.policyID ?? String(CONST.DEFAULT_NUMBER_ID)}`] ?? policyFromKey;
 
+                const shouldShowStatusAsPending = !!isOffline && reportItem?.pendingFields?.nextStep === CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE;
+
                 const hasAnyViolationsForReport = hasAnyViolations(
                     reportItem.reportID,
                     allTransactionViolations ?? allViolations,
@@ -1987,6 +1992,7 @@ function getReportSections({
                     formattedTo,
                     formattedStatus,
                     transactions,
+                    shouldShowStatusAsPending,
                     ...(reportPendingAction ? {pendingAction: reportPendingAction} : {}),
                     shouldShowYear: shouldShowYearCreatedReport,
                     shouldShowYearSubmitted: shouldShowYearSubmittedReport,
@@ -2453,6 +2459,7 @@ function getSections({
     archivedReportsIDList,
     queryJSON,
     isActionLoadingSet,
+    isOffline,
     cardFeeds,
     allTransactionViolations,
 }: GetSectionsParams) {
@@ -2471,6 +2478,7 @@ function getSections({
             currentAccountID,
             currentUserEmail,
             translate,
+            isOffline,
             formatPhoneNumber,
             isActionLoadingSet,
             allTransactionViolations,

tests/unit/Search/SearchUIUtilsTest.ts

@@ -1071,6 +1071,7 @@ const transactionReportGroupListItems = [
         },
         hasVisibleViolations: false,
         isOneTransactionReport: true,
+        shouldShowStatusAsPending: false,
         isWaitingOnBankAccount: false,
         keyForList: '123456789',
         managerID: 18439984,
@@ -1172,6 +1173,7 @@ const transactionReportGroupListItems = [
         },
         hasVisibleViolations: true,
         isOneTransactionReport: true,
+        shouldShowStatusAsPending: false,
         isWaitingOnBankAccount: false,
         keyForList: '11111',
         managerID: 18439984,
@@ -1280,6 +1282,7 @@ const transactionReportGroupListItems = [
         formattedTo: 'Approver',
         hasVisibleViolations: false,
         isOneTransactionReport: false,
+        shouldShowStatusAsPending: false,
         isOwnPolicyExpenseChat: false,
         isWaitingOnBankAccount: false,
         managerID: 1111111,
@@ -1460,6 +1463,7 @@ const transactionReportGroupListItems = [
         },
         hasVisibleViolations: false,
         isOneTransactionReport: true,
+        shouldShowStatusAsPending: false,
         isWaitingOnBankAccount: false,
         keyForList: reportID5,
         managerID: 18439984,