implement offline behaviour for updateGroupChatMemberRole

src/libs/actions/Report.ts

@@ -2703,12 +2703,37 @@ function updateGroupChatMemberRoles(reportID: string, accountIDList: number[], r
             onyxMethod: Onyx.METHOD.MERGE,
             key: `${ONYXKEYS.COLLECTION.REPORT}${reportID}`,
             value: {
-                participants,
+                participants: Object.keys(participants).reduce((acc, accountID) => {
+                    acc[Number(accountID)] = {
+                        ...participants[Number(accountID)],
+                        pendingFields: {
+                            role: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE,
+                        },
+                    };
+                    return acc;
+                }, {} as Participants),
+            },
+        },
+    ];
+
+    const successData: OnyxUpdate[] = [
+        {
+            onyxMethod: Onyx.METHOD.MERGE,
+            key: `${ONYXKEYS.COLLECTION.REPORT}${reportID}`,
+            value: {
+                participants: Object.keys(participants).reduce((acc, accountID) => {
+                    acc[Number(accountID)] = {
+                        pendingFields: {
+                            role: null,
+                        },
+                    };
+                    return acc;
+                }, {} as Participants),
             },
         },
     ];
     const parameters: UpdateGroupChatMemberRolesParams = {reportID, memberRoles: JSON.stringify(memberRoles)};
-    API.write(WRITE_COMMANDS.UPDATE_GROUP_CHAT_MEMBER_ROLES, parameters, {optimisticData});
+    API.write(WRITE_COMMANDS.UPDATE_GROUP_CHAT_MEMBER_ROLES, parameters, {optimisticData, successData});
 }
 
 /** Invites people to a group chat */

src/pages/ReportParticipantsPage.tsx

@@ -93,6 +93,21 @@ function ReportParticipantsPage({report, personalDetails, session}: ReportPartic
                 );
             }
 
+            const participantsPendingFields = report.participants?.[accountID]?.pendingFields;
+            let pendingAction;
+
+            if (pendingChatMember?.pendingAction) {
+                pendingAction = pendingChatMember.pendingAction;
+            } else if (participantsPendingFields) {
+                // We can have multiple Pending Fields in participant
+                for (const key in participantsPendingFields) {
+                    if (key in participantsPendingFields) {
+                        pendingAction = participantsPendingFields[key];
+                        break;
+                    }
+                }
+            }
+
             result.push({
                 keyForList: `${accountID}`,
                 accountID,
@@ -101,7 +116,7 @@ function ReportParticipantsPage({report, personalDetails, session}: ReportPartic
                 text: formatPhoneNumber(PersonalDetailsUtils.getDisplayNameOrDefault(details)),
                 alternateText: formatPhoneNumber(details?.login ?? ''),
                 rightElement: roleBadge,
-                pendingAction: pendingChatMember?.pendingAction,
+                pendingAction,
                 icons: [
                     {
                         source: UserUtils.getAvatar(details?.avatar, accountID),

src/types/onyx/Report.ts

@@ -26,6 +26,7 @@ type PendingChatMember = {
 type Participant = {
     hidden?: boolean;
     role?: 'admin' | 'member';
+    pendingFields?: Record<string, OnyxCommon.PendingAction>;
 };
 
 type Participants = Record<number, Participant>;