[Exploratory] - Expense - First expense created via FAB is not highlighted on workspace chat.

[applause-bot]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: 9.3.80-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from BrowserStack: #89749
Email or phone of affected tester (no customers): ibellicotest+2250@gmail.com
Issue reported by: Applause Internal Team
Bug source: Exploratory - Significant User Experience Deterioration
Device used: Motorola MotoG60 / Android 12 (Hybrid app) - Windows 11 / Chrome
App Component: Money Requests

Action Performed:

1. Open the Expensify app.
2. Tap on FAB > "Create Expense"
3. Create a manual expense and submit it to workspace chat.
4. When landing on chat, note that expense preview is not highlighted.
5. Return to "Inbox"
6. Create a second expense via FAB and submit it to the same workspace.
7. Note that new expense is highlighted.

Expected Result:

Highlighting behavior on expense preview should be consistent. First created expense via FAB, should be highlighted as the second created one is.

Actual Result:

First expense submitted to workspace chat via FAB is not highlighted on preview.

Workaround:

Unknown

Platforms:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome Safari

Screenshots/Videos

Bug7160356_1779634810396.First_Highlight.mp4

View all open jobs on GitHub

Applause Internal Information
Exported by: Julia Ponikarchuk
Bug ID: 7160356

[applause-bot]

While Applause doesn't embed attachments for this bug, here are the links for quick view:
https://platform.applause.com/services/links/v1/external/2bc724a591db1c9a1ef47b9301996416ea745e16ab668817f787838eeb6ea04d

[godzillaxbox19982014-lgtm]

Proposal

Please re-state the problem that we are trying to solve in this issue.

When the first expense is created via FAB and submitted to a workspace chat, the expense preview is not highlighted after landing in the chat. Creating another expense afterwards highlights the new preview correctly.

What is the root cause of that problem?

The highlight is only triggered from the “new report action” live-tail subscription. In useReportActionsNewActionLiveTail, we only call setActionIdToHighlight(action.reportActionID) when a new REPORT_PREVIEW action arrives through subscribeToNewActionEvent.

For the first expense created via FAB, the app navigates to the workspace chat after the optimistic report preview has already been added to Onyx, so the report screen does not receive it as a new subscribed action. As a result, actionIdToHighlight remains empty and the preview renders without the highlighted background.

For the second expense, the workspace chat/report state already exists and the live-tail subscription catches the new REPORT_PREVIEW, so highlighting works.

What changes do you think we should make in order to solve the problem?

We should not rely only on the live-tail subscription for highlighting a newly created expense preview.

When navigating to the workspace chat after creating an expense via FAB, pass the newly-created report preview action ID in the route params, then let ReportActionsList use that ID as the highlighted action.

For example, after creating/submitting the expense, navigate like this:

Navigation.navigate(
    ROUTES.REPORT_WITH_ID.getRoute(
        chatReportID,
        reportPreviewReportActionID,
        undefined,
        backTo,
    ),
);

Then in ReportActionsList, make shouldHighlight true when the action matches either the live-tail highlight ID or the linked route action ID:

shouldHighlight={
    reportAction.reportActionID === actionIdToHighlight ||
    reportAction.reportActionID === linkedReportActionID
}

Alternatively, if we do not want to use the deeplink/highlight route param directly, we can set the local highlight state when linkedReportActionID is present:

useEffect(() => {
    if (!linkedReportActionID) {
        return;
    }

    setActionIdToHighlight(linkedReportActionID);
}, [linkedReportActionID]);

But I prefer passing the reportPreviewReportActionID into navigation and using the existing linked action/highlight path, because it fixes the first-created-expense path without changing unrelated live-tail behavior.

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

Add a test for creating a first manual expense via FAB and submitting it to a workspace chat with no previous expense previews. Verify that:

the app lands on the workspace chat
the newly-created report preview action is present
the newly-created preview receives the highlighted background

Also test creating a second expense to confirm existing live-tail highlighting still works.

What alternative solutions did you explore?

I considered changing only useReportActionsNewActionLiveTail, but that hook only handles actions received after the report screen subscription is active. The broken first-expense case happens because the preview already exists before the report screen starts listening, so the more reliable fix is to carry the created preview action ID through navigation.

[melvin-bot]

Whoops! This issue is 2 days overdue. Let's get this updated quick!

[melvin-bot]

Huh... This is 4 days overdue. Who can take care of this?

[melvin-bot]

Now this issue is 8 days overdue. Are you sure this should be a Daily? Feel free to change it!

[melvin-bot]

10 days overdue. Is anyone even seeing these? Hello?

[melvin-bot]

This issue has not been updated in over 14 days. eroding to Weekly issue.