[HOLD for payment 2024-11-05] [$250] Approver - In edit approval workflow, in offline approver selected is not greyed out

[IuliiaHerets]

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: v9.0.46-3
Reproducible in staging?: Y
Reproducible in production?: Y
Issue reported by: Applause Internal Team

Action Performed:

Pre-condition:

1. Launch app
2. Tap profile icon -- workspaces -- workspace
3. Tap more features -- enable workflows -- enable add approval
4. Go offline
5. Tap approver - select a member - save

Expected Result:

In edit approval workflow, in offline approver selected must be greyed out.

Actual Result:

In edit approval workflow, in offline approver selected is not greyed out.

Workaround:

Unknown

Platforms:

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6628543_1728406287719.Screenrecorder-2024-10-08-17-31-14-150_compress_1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021844825382815760064
• Upwork Job ID: 1844825382815760064
• Last Price Increase: 2024-10-11
• Automatic offers:
• nkdengineer | Contributor | 104447976

Issue Owner

Current Issue Owner: @strepanier03

[melvin-bot]

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

[IuliiaHerets]

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

[huult]

Edited by proposal-police: This proposal was edited at 2024-10-09 09:27:42 UTC.

Proposal

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

In edit approval workflow, in offline approver selected is not greyed out

What is the root cause of that problem?

We haven't handled the case for greying out the edit approval workflow yet

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

We need to wrap the component rendering members and approver with OfflineWithFeedback, something like this

+ const approvalWorkflowPendingUpdate = approvalWorkflow.pendingAction;
// .src/pages/workspace/workflows/approvals/ApprovalWorkflowEditor.tsx#L136
+                        <OfflineWithFeedback pendingAction={approvalWorkflowPendingUpdate>
                            <MenuItemWithTopDescription
                             ....
                            />
+                        </OfflineWithFeedback>

// .src/pages/workspace/workflows/approvals/ApprovalWorkflowEditor.tsx#L151
+                        <OfflineWithFeedback pendingAction={approvalWorkflowPendingUpdate}>
                            <MenuItemWithTopDescription
                             ....
                            />
+                        </OfflineWithFeedback>

// .src/pages/workspace/workflows/approvals/ApprovalWorkflowEditor.tsx#L198
+                        <OfflineWithFeedback pendingAction={approvalWorkflowPendingUpdate}>
                            <MenuItemWithTopDescription
                             ....
                            />
+                        </OfflineWithFeedback>

What alternative solutions did you explore? (Optional)

If we want to gray out only the edited parts, you need to check which members or approver changed and then gray them out. Some thing like that:

// .src/pages/workspace/workflows/approvals/ApprovalWorkflowEditor.tsx#L103
// get list employee pending update
+   const [listEmployeePending, setListEmployeePending] = useState<[]>();
+ const getFieldPending = useCallback(async () => {
+        try {
+            const persistedRequests = await PersistedRequests.getAll();
+            const updateWorkspaceApprovalRequests = persistedRequests.filter(({command}) => command === WRITE_COMMANDS.UPDATE_WORKSPACE_APPROVAL);
+            const employeesPending = updateWorkspaceApprovalRequests.flatMap((item) => {
+                const employees = JSON.parse(item.data.employees);
+                return employees.filter((employee) => employee.pendingAction === 'update');
+            });
+            setListEmployeePending(employeesPending);
+        } catch (error) {
+            console.error('****** error ******', error);
+        }
+    }, []);

+    useEffect(() => {
+        getFieldPending();
+    }, [getFieldPending]);

// .src/pages/workspace/workflows/approvals/ApprovalWorkflowEditor.tsx#L173
// We check if this approver's pendingAction is 'update' or not
+  const isApproverPending = (listEmployeePending || []).some((item) => {
+                        return item.email === approver?.email;
+                    });
 // .src/pages/workspace/workflows/approvals/ApprovalWorkflowEditor.tsx#L178        
 // Update condition to show grayed out           
+                <OfflineWithFeedback pendingAction={isApproverPending ? approvalWorkflowPendingUpdate : undefined}>
                      <MenuItemWithTopDescription
                           ....

Details

POC

Screen.Recording.2024-10-09.at.16.17.45.mov

[nkdengineer]

Proposal

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

In edit approval workflow, in offline approver selected is not greyed out.

What is the root cause of that problem?

We don't add OfflineWithFeedback here

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

Lines 137 to 139 in 285bde8

	<MenuItemWithTopDescription
	// eslint-disable-next-line react/no-array-index-key
	key={`approver-${approver?.email}-${approverIndex}`}

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

1. When we update the workflow, we can update the pendingFields of each updated employee

updatedEmployeeList[approver.email] = {
    email: approver.email,
    forwardsTo,
    pendingAction,
    pendingFields: {
        forwardsTo: pendingAction,
    },
};

App/src/libs/WorkflowUtils.ts

Lines 233 to 237 in 285bde8

	updatedEmployeeList[approver.email] = {
	email: approver.email,
	forwardsTo,
	pendingAction,
	};

updatedEmployeeList[email] = {
    ...(updatedEmployeeList[email] ? updatedEmployeeList[email] : {email}),
    submitsTo,
    pendingAction,
    pendingFields: {
        submitsTo: pendingAction,
    },
};

App/src/libs/WorkflowUtils.ts

Lines 249 to 253 in 285bde8

	updatedEmployeeList[email] = {
	...(updatedEmployeeList[email] ? updatedEmployeeList[email] : {email}),
	submitsTo,
	pendingAction,
	};

2. Then we can return pendingFields here

App/src/libs/WorkflowUtils.ts

Lines 124 to 127 in 285bde8

	const member: Member = {
	email,
	avatar: personalDetailsByEmail[email]?.avatar,
	displayName: personalDetailsByEmail[email]?.displayName ?? email,

3. We will create a function to get the pendingAction for each approver. For the first approver, it's pending if any member in the workflow has pendingFields.submitsTo. For each other approver, it's pending if the previous approver has pendingFields.forwardsTo because if this approver is updated the forwardsTo of the previous approver will be updated

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],
);

<OfflineWithFeedback pendingAction={getApprovalPendingAction(approverIndex)}>

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

Lines 137 to 139 in 285bde8

	<MenuItemWithTopDescription
	// eslint-disable-next-line react/no-array-index-key
	key={`approver-${approver?.email}-${approverIndex}`}

What alternative solutions did you explore? (Optional)

We can wrap OfflineWithFeedback for each approver with pendingAction is approvalWorkflow.pendingAction

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

Lines 137 to 139 in 285bde8

	<MenuItemWithTopDescription
	// eslint-disable-next-line react/no-array-index-key
	key={`approver-${approver?.email}-${approverIndex}`}

[melvin-bot]

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

[melvin-bot]

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