[HOLD for payment 2024-03-18] [$500] [Simplified Collect][Members] - admin badge is not grayed out when making user admin in offline mode

[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.47-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:
Email or phone of affected tester (no customers): natnael.expensify+3@gmail.com
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: Applause - Internal Team
Slack conversation:

Action Performed:

1. Create a workspace if you don't have any
2. Invite a user
3. Refresh the members page, select the user
4. Apply offline mode
5. Click on 'Selected dropdown' on top-right corner of the page
6. Click on 'Make admin'

Expected Result:

'Admin' badge or the row should be grayed out to be consistent with offline behaviour

Actual Result:

'Admin' badge or the row is not grayed out

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

Bug6402676_1709637603511.Screen_Recording_2024-03-04_at_11.41.38_at_night.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01d7f28a197717f294
• Upwork Job ID: 1765710957346672640
• Last Price Increase: 2024-03-07

[github-actions]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[melvin-bot]

Triggered auto assignment to @grgia (Engineering), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[lanitochka17]

We think that this bug might be related to #wave8
CC @zanyrenney

[lanitochka17]

@grgia 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

[Krishna2323]

Proposal

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

Members - admin badge is not grayed out when making user admin in offline mode

What is the root cause of that problem?

We don't set pending action for updated accounts.

App/src/libs/actions/Policy.ts

Lines 744 to 778 in 5199604

	const optimisticData: OnyxUpdate[] = [
	{
	onyxMethod: Onyx.METHOD.MERGE,
	key: `${ONYXKEYS.COLLECTION.POLICY_MEMBERS}${policyID}`,
	value: {
	...memberRoles.reduce((member: Record<number, {role: string}>, current) => {
	// eslint-disable-next-line no-param-reassign
	member[current.accountID] = {role: current?.role};
	return member;
	}, {}),
	errors: null,
	},
	},
	];
	const successData: OnyxUpdate[] = [
	{
	onyxMethod: Onyx.METHOD.MERGE,
	key: `${ONYXKEYS.COLLECTION.POLICY_MEMBERS}${policyID}`,
	value: {
	errors: null,
	},
	},
	];
	const failureData: OnyxUpdate[] = [
	{
	onyxMethod: Onyx.METHOD.MERGE,
	key: `${ONYXKEYS.COLLECTION.POLICY_MEMBERS}${policyID}`,
	value: {
	...(previousPolicyMembers[`${ONYXKEYS.COLLECTION.POLICY_MEMBERS}${policyID}`] as Record<string, PolicyMember | null>),
	errors: ErrorUtils.getMicroSecondOnyxError('workspace.editor.genericFailureMessage'),
	},
	},
	];

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

We need to add pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE for each user. And then set it to null in successData.

    const optimisticData: OnyxUpdate[] = [
        {
            onyxMethod: Onyx.METHOD.MERGE,
            key: `${ONYXKEYS.COLLECTION.POLICY_MEMBERS}${policyID}`,
            value: {
                ...memberRoles.reduce((member: Record<number, {role: string; pendingAction: string | null}>, current) => {
                    // eslint-disable-next-line no-param-reassign
                    member[current.accountID] = {role: current?.role, pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE};
                    return member;
                }, {}),
                errors: null,
            },
        },
    ];

    const successData: OnyxUpdate[] = [
        {
            onyxMethod: Onyx.METHOD.MERGE,
            key: `${ONYXKEYS.COLLECTION.POLICY_MEMBERS}${policyID}`,
            value: {
                ...memberRoles.reduce((member: Record<number, {role: string; pendingAction: string | null}>, current) => {
                    // eslint-disable-next-line no-param-reassign
                    member[current.accountID] = {pendingAction: null, role: current?.role};
                    return member;
                }, {}),
                errors: null,
            },
        },
    ];

We can also add error state for each member if needed, like we do for removeMembers.

Result

[aimane-chnaif]

This is also new feature / polish, not blocker.
cc: @luacmartins

[grgia]

Agree not a blocker