[$250] mWeb - Members - When last member leaves the group, user is not prompted with a warning message

[lanitochka17]

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: 1.4.74
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/4566310
Issue reported by: Applause - Internal Team

Action Performed:

1. Go to https://staging.new.expensify.com/home

2. Tap start chat

3. Select a user and create group

4. Send few messages

5. Tap header -- member

6. Select one member listed and remove the member

7. Tap back

8. Tap Leave group

Expected Result:

When last member leaves the group, user must be prompted with a warning message

Actual Result:

When last member leaves the group, user is not prompted with a warning message

Workaround:

Unknown

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

Add any screenshot/video evidence

Bug6481922_1715795982090.group.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0108d139f0fc936c57
• Upwork Job ID: 1790901683068096512
• Last Price Increase: 2024-05-16
• Automatic offers:
• tienifr | Contributor | 0

Issue Owner

Current Issue Owner: @mananjadhav

[melvin-bot]

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

[lanitochka17]

@greg-schroeder 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

[lanitochka17]

We think that this bug might be related to #vip-vsp

[cretadn22]

Proposal

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

When the final member leaves from the group, the user won't receive a warning message

To see this bug clearly, we can do these steps:

1. Create a group (1 admin, 1 member)
2. Go offline
3. Delete the member
4. Leave group

What is the root cause of that problem?

The issue arises because when removing the member, we only add the "pending" field and remain report.participant, but
we solely rely on report.participant to determine if it's the last member

App/src/components/ChatDetailsQuickActionsBar.tsx

Line 38 in c19eea6

if (Object.keys(report?.participants ?? {}).length === 1) {

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

We must ensure that we don't include members with pending deletion actions when verifying if they are the last member

if (Object.keys(report?.participants ?? {}).length - pendingChatMembers.length === 1 ) {

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[ZhenjaHorbach]

Actually we have a ticket where we need to refactor Details page and move leave button to menu items
#40256

So I think it's better to fix this issue it there since this button will be moved to ReportDetails

And to fix this issue

Proposal

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

mWeb - Members - When last member leaves the group, user is not prompted with a warning message

What is the root cause of that problem?

The main problem with issue is that when we remove member it remains in report?.participants but with pending action equal to delete

App/src/components/ChatDetailsQuickActionsBar.tsx

Line 38 in c19eea6

if (Object.keys(report?.participants ?? {}).length === 1) {

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

To fix this issue we can use activeChatMembers

App/src/pages/ReportDetailsPage.tsx

Lines 100 to 103 in 7c630c8

	const activeChatMembers = participants.flatMap((accountID) => {
	const pendingMember = report?.pendingChatMembers?.findLast((member) => member.accountID === accountID.toString());
	return !pendingMember || pendingMember.pendingAction !== CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE ? accountID : [];
	});

instead report?.participants

App/src/components/ChatDetailsQuickActionsBar.tsx

Line 38 in c19eea6

if (Object.keys(report?.participants ?? {}).length === 1) {

What alternative solutions did you explore? (Optional)

NA

[greg-schroeder]

Checking if we should handle here before applying External

[greg-schroeder]

Looks like they want to solve this separately, so let's keep it here. Going to add External

[melvin-bot]

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

[melvin-bot]

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

[tienifr]

Proposal

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

When last member leaves the group, user is not prompted with a warning message

What is the root cause of that problem?

1. In here, we're not filtering out only the active members (that are not pending delete), so even though a member is pending delete, that member is still counted in the participants length and the warning modal is not shown.

2. Due to the same root cause, right after deleting a user, we won't be able to invite that user into the room again, the error "{user} is already a member of {workspace}" will show, even though the mentioned user was already deleted

It's because in here, we're getting the list of all participants account ids including the members that are already (pending) deleted.

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

1. Update this method to have a new includeOnlyActiveMembers, default to false

If includeOnlyActiveMembers is true, filter out all the pending delete members here

const accountIDStrings = Object.keys(report.participants).filter((accountID) => {
    if (!includeOnlyActiveMembers) {
        return true;
    }
    const pendingMember = report?.pendingChatMembers?.findLast((member) => member.accountID === accountID.toString());
    return !pendingMember || pendingMember.pendingAction !== CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE;
});

In here, use getParticipantAccountIDs with includeOnlyActiveMembers true to get the correct account ids list, and use the length of it instead

a. In here, also pass includeOnlyActiveMembers true to getParticipantAccountIDs

After this fix, we'll face the issue where in offline mode, we delete the user, then add the same user, then go online, although the user was successfully added, they will not show up in the members list.

That's because the logic to reset the pendingChatMembers when adding members here is wrong.

b. Let's say the pendingChatMembers list is currently [delete user A, add user A], after the add user A is successful, the pendingChatMembers will be reset to [delete user A] which is incorrect because the delete user A operation was already successful before add user A is called.

To fix this we need to remove the pending delete of the same user in pendingChatMembers before setting it to successData and failureData

What alternative solutions did you explore? (Optional)

In b, we can optionally remove all pending actions of the same user pendingChatMembers rather than just the pending delete. Or even more precise is to use an Onyx response processor and remove the pending action of the latest report?. pendingChatMembers at the time the request is successful, instead of assuming the pendingChatMembers list at the time of enqueuing the inviteToRoom request.

A potential refactoring to consider:
We can remove the activeChatMembers here, and just need to pass includeOnlyActiveMembers as true here, and introduce the same prop to getVisibleChatMemberAccountIDs, and pass it as true to getVisibleChatMemberAccountIDs. That way, we'll have the correct list of participants from the start

[mananjadhav]

Overall all proposals have similar ideas on fixing this, but I found @tienifr's proposal comprehensive.

🎀 👀 🎀 C+ reviewed.

[melvin-bot]

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

[melvin-bot]

@mananjadhav, @dangrous, @greg-schroeder Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[mananjadhav]

@dangrous quick bump

[greg-schroeder]

Thanks @mananjadhav you were 3 minutes ahead of me!

[dangrous]

Thanks for your patience! I'm still on my 40% schedule so a bit slow. I agree with @mananjadhav's assessment, assigning to @tienifr!

[melvin-bot]

📣 @tienifr 🎉 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 📖

[tienifr]

@mananjadhav PR #42512 can be reviewed