[Due for payment 2025-10-15] [$250] Workflows - Approver field becomes grayed out after going offline

[jponikarchuk]

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.2.2-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from TestRail: https://test-management.browserstack.com/projects/2219752/test-runs/TR-681/folder/13176709/41236911/881269645
Email or phone of affected tester (no customers): biruknew45+2n9a2@gmail.com
Issue reported by: Applause Internal Team
Device used: Web, mweb, android
App Component: Workspace Settings

Action Performed:

1. Go to https://staging.new.expensify.com/
2. Create a Workspace and add at least two members
3. Go to Workflows > Add Approval Workflow, then complete the setup
4. Go offline
5. Click on the workflow created in step 3, then see the approver field.

Expected Result:

The Approver field shouldn't be grayed out after going offline, because no changes have been made to that field.

Actual Result:

The Approver field becomes grayed out immediately after going offline, without making any changes.

Workaround:

Unknown

Platforms:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021966375997473295104
• Upwork Job ID: 1966375997473295104
• Last Price Increase: 2025-09-26
• Automatic offers:
• mkzie2 | Contributor | 108963233

Issue Owner

Current Issue Owner: @

Issue Owner

Current Issue Owner: @isabelastisser

[melvin-bot]

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

[nyomanjyotisa]

Proposal

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

Workflows - Approver field becomes grayed out after going offline

What is the root cause of that problem?

When workflows are created or updated, convertApprovalWorkflowToPolicyEmployees sets pendingFields for submitsTo and forwardsTo on policy employees

App/src/libs/WorkflowUtils.ts

Lines 266 to 283 in a3f8cbc

	approvalWorkflow.members.forEach(({email}) => {
	const submitsTo = type === CONST.APPROVAL_WORKFLOW.TYPE.REMOVE ? '' : (firstApprover.email ?? '');
	// For every member, we check if the submitsTo field has changed.
	// If it has, we update the employee list with the new submitsTo value.
	if (previousEmployeeList[email]?.submitsTo === submitsTo) {
	return;
	}
	updatedEmployeeList[email] = {
	...(updatedEmployeeList[email] ? updatedEmployeeList[email] : {email}),
	submitsTo,
	pendingAction,
	pendingFields: {
	submitsTo: pendingAction,
	},
	};
	});

These pending fields persist in the policy employee list and are picked up by the getApprovalPendingAction. When we goes offline, the app detects these pending actions and applies offline styling

App/src/pages/workspace/workflows/approvals/ApprovalWorkflowEditor.tsx

Lines 49 to 63 in a3f8cbc

	const getApprovalPendingAction = useCallback(
	(index: number) => {
	let pendingAction: PendingAction | undefined;
	if (index === 0) {
	approvalWorkflow?.members?.forEach((member) => {
	pendingAction = pendingAction ?? member.pendingFields?.submitsTo;
	});
	return pendingAction;
	}
	const previousApprover = approvalWorkflow?.approvers.at(index - 1);
	const previousMember = approvalWorkflow?.members?.find((member) => member?.email === previousApprover?.email);
	return previousMember?.pendingFields?.forwardsTo;
	},
	[approvalWorkflow],
	);

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

Only return pending actions when there are actual changes being made to the workflow, not just because pending fields exist from previous operations

    const getApprovalPendingAction = useCallback(
        (index: number) => {
            // Only show pending state if there are actual changes being made
            if (!approvalWorkflow?.originalApprovers || approvalWorkflow.approvers.length === 0) {
                return undefined;
            }
            
            // Check if current state differs from original state
            const hasChanges = JSON.stringify(approvalWorkflow.approvers) !== JSON.stringify(approvalWorkflow.originalApprovers);
            if (!hasChanges) {
                return undefined;
            }
            
            let pendingAction: PendingAction | undefined;
            if (index === 0) {
                approvalWorkflow?.members?.forEach((member) => {
                    pendingAction = pendingAction ?? member.pendingFields?.submitsTo;
                });
                return pendingAction;
            }
            const previousApprover = approvalWorkflow?.approvers.at(index - 1);
            const previousMember = approvalWorkflow?.members?.find((member) => member?.email === previousApprover?.email);
            return previousMember?.pendingFields?.forwardsTo;
        },
        [approvalWorkflow],
    );

App/src/pages/workspace/workflows/approvals/ApprovalWorkflowEditor.tsx

Lines 49 to 63 in a3f8cbc

	const getApprovalPendingAction = useCallback(
	(index: number) => {
	let pendingAction: PendingAction | undefined;
	if (index === 0) {
	approvalWorkflow?.members?.forEach((member) => {
	pendingAction = pendingAction ?? member.pendingFields?.submitsTo;
	});
	return pendingAction;
	}
	const previousApprover = approvalWorkflow?.approvers.at(index - 1);
	const previousMember = approvalWorkflow?.members?.find((member) => member?.email === previousApprover?.email);
	return previousMember?.pendingFields?.forwardsTo;
	},
	[approvalWorkflow],
	);

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

We can add tests for the getApprovalPendingAction

What alternative solutions did you explore? (Optional)

None

[bernhardoj]

Proposal

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

Approver field still grayed out when go offline after creating a new approval workflow.

What is the root cause of that problem?

It will be grayed out when a pending field of submitsTo exists.

App/src/pages/workspace/workflows/approvals/ApprovalWorkflowEditor.tsx

Lines 51 to 57 in a3f8cbc

	let pendingAction: PendingAction | undefined;
	if (index === 0) {
	approvalWorkflow?.members?.forEach((member) => {
	pendingAction = pendingAction ?? member.pendingFields?.submitsTo;
	});
	return pendingAction;
	}

We set both pendingAction and pendingFields optimistically

App/src/libs/actions/Workflow.ts

Lines 58 to 78 in a3f8cbc

	const updatedEmployees = convertApprovalWorkflowToPolicyEmployees({previousEmployeeList, approvalWorkflow, type: CONST.APPROVAL_WORKFLOW.TYPE.CREATE});
	// If there are no changes to the employees list, we can exit early
	if (isEmptyObject(updatedEmployees)) {
	return;
	}
	const optimisticData: OnyxUpdate[] = [
	{
	onyxMethod: Onyx.METHOD.SET,
	key: ONYXKEYS.APPROVAL_WORKFLOW,
	value: null,
	},
	{
	onyxMethod: Onyx.METHOD.MERGE,
	key: `${ONYXKEYS.COLLECTION.POLICY}${policyID}`,
	value: {
	employeeList: updatedEmployees,
	approvalMode: CONST.POLICY.APPROVAL_MODE.ADVANCED,
	},
	},

but we only clear out the pendingAction.

App/src/libs/actions/Workflow.ts

Lines 92 to 100 in a3f8cbc

	const successData: OnyxUpdate[] = [
	{
	onyxMethod: Onyx.METHOD.MERGE,
	key: `${ONYXKEYS.COLLECTION.POLICY}${policyID}`,
	value: {
	employeeList: Object.fromEntries(Object.keys(updatedEmployees).map((key) => [key, {pendingAction: null}])),
	},
	},
	];

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

Clears the pendingFields when success too.

employeeList: Object.fromEntries(Object.keys(updatedEmployees).map((key) => [key, {pendingAction: null, pendingFields: {submitsTo: null}}])),

Also when fail.

App/src/libs/actions/Workflow.ts

Line 56 in a3f8cbc

const previousEmployeeList = Object.fromEntries(Object.entries(policy.employeeList ?? {}).map(([key, value]) => [key, {...value, pendingAction: null}]));

(we can clear the forwardsTo too, or just clears the whole pendingFields. also, handle the other case (delete/update) if suffering the same issue)

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

Test the createApprovalWorkflow and make sure the pendingAction and pendingFields of submitsTo is cleared.

[mkzie2]

Proposal

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

The Approver field becomes grayed out immediately after going offline, without making any changes.

What is the root cause of that problem?

The pending action is displayed if a member has pendingFields.submitsTo/pendingFields.forwardsTo

App/src/pages/workspace/workflows/approvals/ApprovalWorkflowEditor.tsx

Line 157 in a3f8cbc

pendingAction={getApprovalPendingAction(approverIndex)}

App/src/pages/workspace/workflows/approvals/ApprovalWorkflowEditor.tsx

Lines 49 to 55 in a3f8cbc

	const getApprovalPendingAction = useCallback(
	(index: number) => {
	let pendingAction: PendingAction | undefined;
	if (index === 0) {
	approvalWorkflow?.members?.forEach((member) => {
	pendingAction = pendingAction ?? member.pendingFields?.submitsTo;
	});

When we add a new workflow, the pendingFields are added in the optimistic data

App/src/libs/WorkflowUtils.ts

Line 260 in a3f8cbc

pendingFields: {

And we don't clear it in the success data, we only clear the pendingAction. So the approver field is still grayed out when offline again.

App/src/libs/actions/Workflow.ts

Line 97 in a3f8cbc

employeeList: Object.fromEntries(Object.keys(updatedEmployees).map((key) => [key, {pendingAction: null}])),

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

We should also clear the pending field in the success data. We can only clear submitsTo/forwardsTo if we want and also clear the pendingFields in the failureData

employeeList: Object.fromEntries(Object.keys(updatedEmployees).map((key) => [key, {pendingAction: null, pendingFields: null}])),

App/src/libs/actions/Workflow.ts

Line 97 in a3f8cbc

employeeList: Object.fromEntries(Object.keys(updatedEmployees).map((key) => [key, {pendingAction: null}])),

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

Add test for createApprovalWorkflow and verify that the pendingFields are cleared when the API is successful.

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.

[melvin-bot]

@kadiealexander Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[melvin-bot]

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