[HOLD for payment 2024-11-07] [$250] mWeb - Group chat - Not here page appears briefly when last member leave the group chat

[IuliiaHerets]

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.0.38-0
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: https://expensify.testrail.io/index.php?/tests/view/4985233&group_by=cases:section_id&group_order=asc&group_id=229067
Email or phone of affected tester (no customers): gocemate+a2197@gmail.com
Issue reported by: Applause Internal Team
Slack conversation:

Action Performed:

1. Create a group chat
2. Click on the header
3. Remove all existing members from the group
4. Click Leave the group
5. Confirm leaving the group participant

Expected Result:

There should be no error page

Actual Result:

Not here page appears briefly when last member leave the group chat

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6608577_1726732763600.Recording__3970.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021836833773766101729
• Upwork Job ID: 1836833773766101729
• Last Price Increase: 2024-10-10
• Automatic offers:
• wildan-m | Contributor | 104431872

Issue Owner

Current Issue Owner: @strepanier03

[melvin-bot]

Triggered auto assignment to @strepanier03 (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.

[IuliiaHerets]

@strepanier03 FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[FitseTLT]

Edited by proposal-police: This proposal was edited at 2024-09-19 14:29:35 UTC.

Proposal

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

mWeb - Group chat - Not here page appears briefly when last member leave the group chat

What is the root cause of that problem?

We dismissModal and then call the leaveGroupChat here

App/src/pages/ReportDetailsPage.tsx

Lines 222 to 225 in 3657a67

	Navigation.dismissModal();
	Navigation.isNavigationReady().then(() => {
	if (isRootGroupChat) {
	Report.leaveGroupChat(report.reportID);

We are deleting the report optimistically before navigating to recent chat in leaveGroupChat

App/src/libs/actions/Report.ts

Line 2795 in 3657a67

navigateToMostRecentReport(report);

hence if the navigation is not quick enough we will see a not found page as the group chat is deleted in onyx

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

We should execute the deleting code after the navigateToMostRecentReport has finished.
We can do that by either calling navigateToMostRecentReport first and call the optimistic code and api call after/in

1. isNavigationReady
2. InteractionManager.runAfterInteractions
3. after some custom set timeout

A similar method can used for leaveRoom too.

What alternative solutions did you explore? (Optional)

[dominictb]

Edited by proposal-police: This proposal was edited at 2024-09-19 17:43:49 UTC.

Proposal

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

Not here page appears briefly when last member leave the group chat

What is the root cause of that problem?

We're waiting for dismissModal navigation to trigger Report.leaveGroupChat(report.reportID)

so we can see the not found page for a shot time

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

1. After dismissModal, we should call goBack to remove the group/thread chat (because that group/thread will be deleted). We just did the same in here

    const leaveChat = useCallback(() => {
        Navigation.dismissModal();
        Navigation.goBack()
        Navigation.isNavigationReady().then(() => {

2. Then Report.leaveGroupChat(report.reportID) will open the latest report

Change

App/src/libs/actions/Report.ts

Line 2739 in 10ea08e

Navigation.goBack(lastAccessedReportRoute);

to

Navigation.navigate(lastAccessedReportRoute);

3. We need to remove these lines since we already goBack before

What alternative solutions did you explore? (Optional)

We can consider to remove Navigation.isNavigationReady() in here. I tested this issue and the bug that needs isNavigationReady and they worked well

Result

Screen.Recording.2024-09-26.at.15.33.14.mov

[melvin-bot]

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

[melvin-bot]

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

[parasharrajat]

Reviewing..

[melvin-bot]

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

[dominictb]

@parasharrajat any updates?

[bernhardoj]

This is exactly the same issue as #48316, so I'm copying my proposal here.

Proposal

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

When leaving a group chat, not found briefly shows while navigating to the most recent report.

What is the root cause of that problem?

When we leave a group chat, we first dismiss the modal and then navigate to the most recent report and calls the request which will merge the optimistic data.

App/src/libs/actions/Report.ts

Lines 2791 to 2792 in 9e5887d

	navigateToMostRecentReport(report);
	API.write(WRITE_COMMANDS.LEAVE_GROUP_CHAT, {reportID}, {optimisticData});

So, while the navigation is happening, the group chat is already cleared from Onyx, so, the not found page is shown while the navigation is happening.

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

We can wait for the navigation animation before deleting the group chat. One way to do it is by using InteractionManager.

navigateToMostRecentReport(report);
InteractionManager.runAfterInteractions(() => API.write(WRITE_COMMANDS.LEAVE_GROUP_CHAT, {reportID}, {optimisticData}));

We can do the same approach to leaveRoom too if needed.

[parasharrajat]

I will chech this in sometime.

[parasharrajat]

@dominictb I would like to understand your approach more closely. Can you please explain the main solution? How will it behave on UI?

Then your alternative solution. What bugs are you talking about?

[dominictb]

@parasharrajat I updated the proposal to add the evidence video

What bugs are you talking about?

I mentioned the bug in alternative solution

The main idea is to remove the deleted group/chat from navigation stack, then navigate to most recent report

[melvin-bot]

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

[melvin-bot]

@strepanier03, @parasharrajat Eep! 4 days overdue now. Issues have feelings too...

[melvin-bot]

@strepanier03, @parasharrajat Still overdue 6 days?! Let's take care of this!

[melvin-bot]

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

[melvin-bot]

@strepanier03 @parasharrajat 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!

[parasharrajat]

I will have the update in next few hours.

[melvin-bot]

@strepanier03, @parasharrajat Eep! 4 days overdue now. Issues have feelings too...

[wildan-m]

Proposal

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

The "Not here" page briefly appears when the last member leaves the group chat in mWeb.

What is the root cause of that problem?

When we set the report to null

App/src/libs/actions/Report.ts

Lines 2760 to 2766 in b4b5965

	const optimisticData: OnyxUpdate[] = [
	{
	onyxMethod: Onyx.METHOD.SET,
	key: `${ONYXKEYS.COLLECTION.REPORT}${reportID}`,
	value: null,
	},
	];

shouldShowNotFoundPage will be true for a brief moment

App/src/pages/home/ReportScreen.tsx

Line 376 in b4b5965

const shouldShowNotFoundPage = useMemo((): boolean => {

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

I think delete the report using set is too fast, even when we've already navigate first.

App/src/libs/actions/Report.ts

Lines 2776 to 2777 in b4b5965

	navigateToMostRecentReport(report);
	API.write(WRITE_COMMANDS.LEAVE_GROUP_CHAT, {reportID}, {optimisticData});

If we follow the same pattern as leaveRoom, this issue will be resolved.

We can use merge to optimistically remove the reportID and flag the report as closed

    const optimisticData: OnyxUpdate[] = [
        {
            onyxMethod: Onyx.METHOD.MERGE,
            key: `${ONYXKEYS.COLLECTION.REPORT}${reportID}`,
            value: {
                reportID: null,
                stateNum: CONST.REPORT.STATE_NUM.APPROVED,
                statusNum: CONST.REPORT.STATUS_NUM.CLOSED,
                participants: {
                    [currentUserAccountID]: {
                        notificationPreference: CONST.REPORT.NOTIFICATION_PREFERENCE.HIDDEN,
                    },
                },
            },
        },

    ];

And then when the API success, we can remove the rest of object

    const successData: OnyxUpdate[] = [
        {
            onyxMethod: Onyx.METHOD.MERGE,
            key: `${ONYXKEYS.COLLECTION.REPORT}${reportID}`,
            value: Object.keys(report).reduce<Record<string, null>>((acc, key) => {
                          acc[key] = null;
                          return acc;
                      }, {}),
        },
    ];

Adding failureData is nice to have:

    const failureData: OnyxUpdate[] = [
        {
            onyxMethod: Onyx.METHOD.MERGE,
            key: `${ONYXKEYS.COLLECTION.REPORT}${reportID}`,
            value: report,
        },
    ];

Result

Kapture.2024-10-15.at.16.59.19.mp4

Branch for this solution

What alternative solutions did you explore? (Optional)

N/A

[parasharrajat]

@wildan-m Can you show a clip of how it works?

[wildan-m]

@parasharrajat sure,

Proposal Updated

• Add result video

[parasharrajat]

@wildan-m Will it work while offline? Let's say backend failed to send the success, then how will it behave.

[wildan-m]

@parasharrajat This is offline behavior. I haven't noticed any offline behavior side effects yet.

Kapture.2024-10-15.at.20.27.37.mp4

[parasharrajat]

Ok. Thanks. I like the idea of using this Onyx technique to fix this problem better than delaying logic with setTimeout or InteractionManager.

@wildan-m's proposal looks good to me.

🎀 👀 🎀 C+ reviewed

[melvin-bot]

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

[melvin-bot]

📣 @wildan-m 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[wildan-m]

@parasharrajat The PR is ready #50846. Thanks!

[allgandalf]

I can take this as C+ if this is critical while @parasharrajat is OOO until Oct 25

[tgolen]

Thanks for the offer @allgandalf. I didn't see it in time, but this wasn't a highly urgent issue so it was OK to wait for @parasharrajat to get back.

[parasharrajat]

I am back. Thanks for waiting.

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.0.55-10 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Fixes "Not here" page briefly showing when last member leaves group chat. #50846

If no regressions arise, payment will be issued on 2024-11-07. 🎊

For reference, here are some details about the assignees on this issue:

• @wildan-m requires payment automatic offer (Contributor)
• @parasharrajat requires payment through NewDot Manual Requests

[melvin-bot]

@parasharrajat @strepanier03 The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed. Please copy/paste the BugZero Checklist from here into a new comment on this GH and complete it. If you have the K2 extension, you can simply click: [this button]