[$250] LHN -When deleting expense on search, information doesn´t disappear from chat preview on LHN

[IuliiaHerets]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: 9.0.75-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from TestRail: https://expensify.testrail.io/index.php?/tests/view/5335362&group_by=cases:section_id&group_order=asc&group_id=296775
Email or phone of affected tester (no customers): [email protected]
Issue reported by: Applause Internal Team
Device used: Motorola MotoG60 - Android 12 - Chrome / Windows 10 - Chrome
App Component: Left Hand Navigation (LHN)

Action Performed:

1. Open the staging.new.expensify.com
2. Tap on the FAB and select "Create Expense"
3. Complete the creation flow and submit the expense to any chat.
4. Go to search section.
5. Long tap on the just created expense and delete it.
6. Return to LHN and check the message displayed on the preview of the chat where the expense was submitted.

Expected Result:

When an expense is deleted on search, the preview of the chat where this expense was submitted, should not display the expense information anymore.

Actual Result:

Expense information is still displayed on chat preview on LHN, after the expense was deleted on search section.
Issue reproduced only with Gmail account

Workaround:

Unknown

Platforms:

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6691822_1733984604638.LHN_Preview.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021870237400147450769
• Upwork Job ID: 1870237400147450769
• Last Price Increase: 2025-01-03

Issue Owner

Current Issue Owner: @ZhenjaHorbach

[melvin-bot]

Triggered auto assignment to @johncschuster (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[johncschuster]

I haven't gotten to dig into this one

[melvin-bot]

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

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~021870237400147450769

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @ZhenjaHorbach (External)

[shamzahasan88]

I am here from Upwork, I can see the email contains +91 before @. Usually these kind of emails are being used to create multiple accounts with same email address.

For example, if my email is [email protected], then I can create multiple accounts with emails like [email protected], [email protected], and this is because I will receive any OTP or confirmation email at my original email, despite having these extra characters in given email.

What I can feel that your logic is dealing with original email, instead of this one (+91@gmail), can you please try this with a normal gmail address? Without any “+” thing?

[melvin-bot]

📣 @shamzahasan88! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.
   
   Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[email4shahbaz]

Hey, I have worked on this issue and identified root cause of the issue and fixed it. Please add me as a contributor so that I can post my Proposal:

Contributor details
Your Expensify account email: [email protected]
Upwork Profile Link: https://www.upwork.com/freelancers/~01d656418b6899f383

[melvin-bot]

✅ Contributor details stored successfully. Thank you for contributing to Expensify!

[email4shahbaz]

Proposal

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

LHN -When deleting expense on search, information doesn´t disappear from chat preview on LHN

What is the root cause of that problem?

• When we delete an expense, it works properly and delete expense from backend but we never update search results.

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

On clicking 'Search' icon on top bar, it does not make call to search api because we have empty search query text.
We have to change following if condition to only return if isNetworkOffline meet but remove !searchInput.trim().length check in src/libs/actions/Report.ts:

function searchInServer(searchInput: string, policyID?: string) {
    if (isNetworkOffline || !searchInput.trim().length) {
        Onyx.set(ONYXKEYS.IS_SEARCHING_FOR_REPORTS, false);
        return;
    }

    // Why not set this in optimistic data? It won't run until the API request happens and while the API request is debounced
    // we want to show the loading state right away. Otherwise, we will see a flashing UI where the client options are sorted and
    // tell the user there are no options, then we start searching, and tell them there are no options again.
    Onyx.set(ONYXKEYS.IS_SEARCHING_FOR_REPORTS, true);
    searchForReports(searchInput, policyID);
}

So, final solution will work seamless and always bring updated data which will not show expense amount in this case.

 if (isNetworkOffline) {
        Onyx.set(ONYXKEYS.IS_SEARCHING_FOR_REPORTS, false);
        return;
 }

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

Nothing

What alternative solutions did you explore? (Optional)

Another solution might be to manually call an action to update onyx 'personalDetailsList' by removing expense from the selected user. But it could be less efficient.

[ZhenjaHorbach]

@shamzahasan88
Thanks for your idea
And yes, we use + to create multiple accounts
But these new accounts have the same functionality as the main one
So I don't think this is related to the issue

@email4shahbaz
Thanks for your proposal
And have you tested it?
I'm not entirely sure that these changes are related to the issue
Plus, this fix doesn't work

[email4shahbaz]

@ZhenjaHorbach
Please see attached video-cast, it reflects exactly the problem and it's solution:

Issue.53993.mp4

Here are the steps to follow to reproduce issue and see it's solution:

1-I create a new expesce by clicking + button and entere '999' as amount. Then I selected '[email protected]' and completed expense creation.

2-I clicked 'Search' icon on top right to see list of all chats, my newly created chat shows '[email protected] owes PKR 999.'

3-I selected that new created expense and removed it.

4-I again went to search, it still show that old values with PKR 999 (just because this search list is not being updated by any action)

5-To prove that we need to update search results in order to see those expense values updated, I entered one character in the search textfield, it immediately updated search results and removed 'RS.999' from that record.

So, that proves that in order to see updated records in search, we must call search api immediately without entering any search query text.

For this to work, we already have a useEffect in SearchRouterList.tsx component as follows:

useEffect(() => {
       ReportUserActions.searchInServer(autocompleteQueryValue.trim());
   }, [autocompleteQueryValue]);

Above code already make api call upon we click 'Search' icon on top right. So if we make my proposed change in Report.ts to ignoring 'searchInput.trim().length', it will always show an updated search result and will not show expense values which is already removed.

Thanks and let me know your thoughts.

[ZhenjaHorbach]

@email4shahbaz
Could you follow QA steps (Or you can use the attached video), please ?

[email4shahbaz]

@email4shahbaz Could you follow QA steps (Or you can use the attached video), please ?

sure, give me few minutes.

[email4shahbaz]

Hi @ZhenjaHorbach,

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

I’ve revisited my earlier proposal and realized that while it is valid, it addresses a different issue related to the functionality triggered by clicking the Search button on the top-right corner of the screen. Let’s now focus on the actual issue, which can be reproduced by following the QA steps or watching the video attached to the issue.

What is the root cause of that problem?

Inbox items are loaded using the Onyx key personalDetailsList. The expense value text is dynamically appended based on the Onyx-loaded collection of reports. Each report contains lastMessageHtml and lastMessageText fields, which remain unchanged even when an expense is removed.

Example

For instance, a chat might display the following text:
"[email protected] owes PKR 1,500.00"

This text is calculated and appended from the API response when a new expense is added. However, if an expense is removed and the total value of a report becomes 0, this text is not updated accordingly.
Below is a code snippet from src/libs/SidebarUtils.ts that illustrates how text is appended to inbox items:

javascript
Copy code
const lastActorDisplayName = OptionsListUtils.getLastActorDisplayName(lastActorDetails, hasMultipleParticipants);
let lastMessageTextFromReport = lastMessageTextFromReportProp;
if (!lastMessageTextFromReport) {
    lastMessageTextFromReport = OptionsListUtils.getLastMessageTextForReport(report, lastActorDetails, policy);
}

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

I propose modifying the handleDeleteExpenses function in src/components/Search/searchPageHeader.tsx to address this issue. Specifically, the changes will include:

Checking for Zero Total:

Add logic to detect when all expenses are removed, and the total value of the report is 0.

Updating Report Fields:

Dynamically update the lastMessageHtml and lastMessageText fields in the relevant report within the Onyx reports collection.

Syncing with Onyx:

Ensure these updates are synchronized with Onyx so the changes are reflected in the UI.

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

This requires a UI test where we need to assert that the lastMessageHtml and lastMessageText of chat item is updated when all the expenses are deleted for a specific chat item.

What alternative solutions did you explore? (Optional)

Alternatively, I suggest enhancing the getLastMessageTextForReport function in src/libs/OptionsListUtils.ts, which is triggered during re-renders. This function fetches the last message text from the report or special cases based on specific conditions.

Since it has access to the variable lastVisibleReportActions, I propose adding logic to check:

If the last report action contains a message with the deleted key, and
If the report's total field equals 0.
In this case, we can replace the lastMessageHtml and lastMessageText fields with a custom message indicating that all expenses have been removed. Below is an example of the logic I implemented:

javascript
Copy code
if (lastOriginalReportAction && lastOriginalReportAction.message) {
    if (Array.isArray(lastOriginalReportAction.message) && lastOriginalReportAction.message.length > 0) {
        const firstMessage = lastOriginalReportAction.message[0];
        if (firstMessage && firstMessage.deleted) {
            if (report?.total === 0 && report.lastMessageText?.trim().length && report.lastMessageText !== 'All expenses removed') {
                return 'All expenses removed';
            }
        }
    }
}

Note:

Of course, we will replace that plain text message with a localized constant for better consistency and adaptability.

Outcome

I tested my alternative solution locally, and it worked as expected. The chat list screen dynamically updated the expense values, effectively resolving the inconsistency when expenses were removed.

Let me know if you have any suggestions or concerns.

Thanks!

[melvin-bot]

@johncschuster @ZhenjaHorbach this issue was created 2 weeks ago. Are we close to approving a proposal? If not, what's blocking us from getting this issue assigned? Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

[melvin-bot]

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

[ZhenjaHorbach]

@email4shahbaz
Thanks for update
I'll check today or tomorrow

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[email4shahbaz]

@ZhenjaHorbach I recommend reviewing my alternative solution first, as it is more elegant and practical.

[mvtglobally]

Issue not reproducible during KI retests. (First week)

[melvin-bot]

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

[ZhenjaHorbach]

Issue not reproducible during KI retests. (First week)

Still reproducible

@email4shahbaz
And I think you are right about lastMessageHtml and lastMessageText why do we still have LHN item showing.

The only thing
I think we need to get the actual lastMessageHtml and lastMessageText from the BE when we call DeleteMoneyRequestOnSearch instead of updating the text ourselves

How we do it when we call DeleteComment

[email4shahbaz]

Yes, we can do it from BE too but there are many other conditions are added in getLastMessageTextForReport function in src/libs/OptionsListUtils.ts
to generate this text from frontend JavaScript

Also delete report api call from backend is not returning any data in the case of all expenses removed.

[ZhenjaHorbach]

Yes, we can do it from BE too but there are many other conditions are added in getLastMessageTextForReport function in src/libs/OptionsListUtils.ts to generate this text from frontend JavaScript

It's true 😅
But I still think that the root cause of the issue is related with BE
And I don't think we need to add new message if we removed all expenses

But let's find out what an internal engineer thinks !
🎀👀🎀

[melvin-bot]

Triggered auto assignment to @tylerkaraszewski, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[melvin-bot]

@tylerkaraszewski, @johncschuster, @ZhenjaHorbach Whoops! This issue is 2 days overdue. Let's get this updated quick!

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[tylerkaraszewski]

Are we suggesting that the backend should return empty strings for lastMessageText and lastMessageHtml after the expense is deleted?