fix: Approver field becomes grayed out after going offline

src/libs/actions/Workflow.ts

@@ -16,14 +16,14 @@
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
 
 let allPolicies: OnyxCollection<Policy>;
 Onyx.connect({
     key: ONYXKEYS.COLLECTION.POLICY,
     waitForCollectionCallback: true,
     callback: (value) => (allPolicies = value),
 });
 
 let authToken: string | undefined;
 Onyx.connect({
     key: ONYXKEYS.SESSION,
     callback: (value) => {
         authToken = value?.authToken;
@@ -31,7 +31,7 @@
 });
 
 let personalDetailsByEmail: PersonalDetailsList = {};
 Onyx.connect({
     key: ONYXKEYS.PERSONAL_DETAILS_LIST,
     callback: (personalDetails) => {
         personalDetailsByEmail = lodashMapKeys(personalDetails, (value, key) => value?.login ?? key);
@@ -98,7 +98,7 @@
             onyxMethod: Onyx.METHOD.MERGE,
             key: `${ONYXKEYS.COLLECTION.POLICY}${policyID}`,
             value: {
-                employeeList: Object.fromEntries(Object.keys(updatedEmployees).map((key) => [key, {pendingAction: null}])),
+                employeeList: Object.fromEntries(Object.keys(updatedEmployees).map((key) => [key, {pendingAction: null, pendingFields: null}])),
             },
         },
     ];

tests/actions/WorkflowTest.ts

@@ -2,24 +2,36 @@ import Onyx from 'react-native-onyx';
 import {INITIAL_APPROVAL_WORKFLOW} from '@libs/WorkflowUtils';
 import OnyxUpdateManager from '@src/libs/actions/OnyxUpdateManager';
 import {generatePolicyID} from '@src/libs/actions/Policy/Policy';
-import {clearApprovalWorkflowApprover, setApprovalWorkflowApprover} from '@src/libs/actions/Workflow';
+import {clearApprovalWorkflowApprover, createApprovalWorkflow, setApprovalWorkflowApprover} from '@src/libs/actions/Workflow';
 import {calculateApprovers} from '@src/libs/WorkflowUtils';
 import ONYXKEYS from '@src/ONYXKEYS';
-import type {ApprovalWorkflowOnyx, Policy as PolicyType} from '@src/types/onyx';
+import type {ApprovalWorkflowOnyx, Policy, Policy as PolicyType} from '@src/types/onyx';
 import type {Approver} from '@src/types/onyx/ApprovalWorkflow';
 import createRandomPolicy from '../utils/collections/policies';
-import {getGlobalFetchMock} from '../utils/TestHelper';
+import {getGlobalFetchMock, getOnyxData} from '../utils/TestHelper';
 import type {MockFetch} from '../utils/TestHelper';
 import waitForBatchedUpdates from '../utils/waitForBatchedUpdates';
 
-jest.mock('@src/libs/WorkflowUtils', () => ({
-    calculateApprovers: jest.fn(),
-}));
+jest.mock('@src/libs/WorkflowUtils', () => {
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+    const actual = jest.requireActual('@src/libs/WorkflowUtils');
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+    return {
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+        ...actual,
+        calculateApprovers: jest.fn(),
+    };
+});
 
 const calculateApproversMock = calculateApprovers as jest.Mock;
 
 OnyxUpdateManager();
 
+const employee1Email = 'test1@gmail.com';
+const employee2Email = 'test2@gmail.com';
+const employee3Email = 'test3@gmail.com';
+const ownerEmail = 'owner@gmail.com';
+
 describe('actions/Workflow', () => {
     function getApprovalWorkflowState(): Promise<ApprovalWorkflowOnyx | null> {
         return new Promise((resolve) => {
@@ -118,4 +130,103 @@ describe('actions/Workflow', () => {
             await waitForBatchedUpdates();
         });
     });
+
+    describe('createApprovalWorkflow', () => {
+        it('should clear pendingFields when the API is success', async () => {
+            mockFetch.pause();
+
+            const policy = {
+                id: '123456789',
+                name: "Mkzie2+bnmsn@gmail.com's Workspace",
+                role: 'admin',
+                type: 'corporate',
+                owner: ownerEmail,
+                employeeList: {
+                    [ownerEmail]: {
+                        email: ownerEmail,
+                        forwardsTo: '',
+                        role: 'admin',
+                        submitsTo: ownerEmail,
+                    },
+                    [employee1Email]: {
+                        email: employee1Email,
+                        forwardsTo: '',
+                        role: 'user',
+                        submitsTo: ownerEmail,
+                    },
+                    [employee2Email]: {
+                        email: employee2Email,
+                        role: 'user',
+                        submitsTo: ownerEmail,
+                        forwardsTo: '',
+                    },
+                    [employee3Email]: {
+                        email: employee3Email,
+                        role: 'user',
+                        submitsTo: ownerEmail,
+                        forwardsTo: '',
+                    },
+                },
+            } as unknown as Policy;
+
+            const approvalWorkflow = {
+                members: [
+                    {
+                        displayName: employee1Email,
+                        email: employee1Email,
+                    },
+                ],
+                approvers: [
+                    {
+                        email: employee1Email,
+                        displayName: employee1Email,
+                        isCircularReference: false,
+                    },
+                    {
+                        email: employee2Email,
+                        displayName: employee2Email,
+                        isCircularReference: false,
+                    },
+                ],
+                availableMembers: [
+                    {
+                        email: ownerEmail,
+                        displayName: ownerEmail,
+                    },
+                    {
+                        email: employee1Email,
+                        displayName: employee1Email,
+                    },
+                    {
+                        email: employee2Email,
+                        displayName: employee2Email,
+                    },
+                    {
+                        email: employee3Email,
+                        displayName: employee3Email,
+                    },
+                ],
+                usedApproverEmails: [ownerEmail],
+                isDefault: false,
+                action: 'create',
+                originalApprovers: [],
+            };
+
+            await Onyx.set(`${ONYXKEYS.COLLECTION.POLICY}${policy.id}`, policy);
+            await Onyx.merge(ONYXKEYS.SESSION, {authToken: '123456789'});
+            await waitForBatchedUpdates();
+
+            createApprovalWorkflow(policy.id, approvalWorkflow);
+            await mockFetch.resume();
+
+            let updatedPolicy: Policy | undefined;
+            await getOnyxData({
+                key: `${ONYXKEYS.COLLECTION.POLICY}${policy.id}`,
+                callback: (val) => (updatedPolicy = val),
+            });
+
+            expect(updatedPolicy?.employeeList?.[employee1Email]?.pendingFields).toBeUndefined();
+            expect(updatedPolicy?.employeeList?.[employee2Email]?.pendingFields).toBeUndefined();
+        });
+    });
 });