[$250] Web - Header - Approve button appears briefly when it shouldn't

[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: 9.0.63-3 Reproducible in staging?: Y Reproducible in production?: Y Email or phone of affected tester (no customers): biruknew45+2101@gmail.com Issue reported by: Applause Internal Team

Action Performed:

1. Go to https://staging.new.expensify.com/
2. As an admin, create a new workspace and add User A along with another user.
3. Go to the more features and enable workflow and rules
4. Navigate to the "Workflows" and add an approval workflow where User A is assigned as both the submitter and approver.
5. Go to the "Rules" section and enable "Prevent Self Approval."
6. Log in as User A, go to the workspace chat, and create an expense.
7. Open the expense preview and observe that the submit button is disabled.
8. Switch to the admin account and go to the "Workflows" section to change the approver from User A to the other user.
9. Return to User A's account, observe that the submit button is now enabled, and click on it.

Expected Result:

When clicking the submit button, the approve button should not appear at any point.

Actual Result:

When clicking the submit button, the approve button briefly appears.

Workaround:

Unknown

Platforms:

• [ ] Android: Standalone
• [ ] Android: HybridApp
• [ ] Android: mWeb Chrome
• [ ] iOS: Standalone
• [ ] iOS: HybridApp
• [ ] iOS: mWeb Safari
• [x] MacOS: Chrome / Safari
• [ ] MacOS: Desktop

Screenshots/Videos

https://github.com/user-attachments/assets/ba5b35ea-be79-43ce-965d-906abd350313

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021858267603397515787
• Upwork Job ID: 1858267603397515787
• Last Price Increase: 2024-11-17

Issue Owner

Current Issue Owner: @DylanDylann

[melvin-bot[bot]]

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

[NJ-2020]

Proposal

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

Web - Header - Approve button appears briefly when it shouldn't

What is the root cause of that problem?

For example we have 3 users: A (admin), B, and C

Admin: Add new approval workflow (from B and approval B), the BE will set the managerID for the approval to B because the approval is BE so when other member submit expense the managerID will be user B

Admin: Enable new rule to prevent self-approvals "Prevent self-approvals", it will block us from submit/approve the expense if the expense is from user B

B: Submit new expense and open the expense, the submit button inside report header will be disabled because we enable the "Prevent self-approvals" option inside the Rules page

Admin: Inside the approval workflow, change the approval to another user (C)

B: The submit/approve button become clickable because the approval is not equal to submitter

B: If we go offline mode, then submit the expense the approve button will show because this check return true https://github.com/Expensify/App/blob/9774032c7b9e72c5f8ee0de6adbe843a7efa2c4a/src/libs/actions/IOU.ts#L6739 https://github.com/Expensify/App/blob/9774032c7b9e72c5f8ee0de6adbe843a7efa2c4a/src/libs/actions/IOU.ts#L6757 It's because the expense manager id is equal to the current account id (B), it's because after the admin change the approver inside the approval workflow to another user C, the BE doesn't update the managerID

So if we go online mode the BE returns the correct managerID (user C) because inside the params we pass the correct managerID (user C) https://github.com/Expensify/App/blob/9774032c7b9e72c5f8ee0de6adbe843a7efa2c4a/src/libs/actions/IOU.ts#L7235-L7241 and we can also see inside the report header nextstep message returning the correct approval name because we're getting the approval account id from the policy instead of using the managerID https://github.com/Expensify/App/blob/9774032c7b9e72c5f8ee0de6adbe843a7efa2c4a/src/libs/actions/IOU.ts#L6846-L6860

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

There are several options to solve this issue

• Inside report screen for the managerID value https://github.com/Expensify/App/blob/9774032c7b9e72c5f8ee0de6adbe843a7efa2c4a/src/pages/home/ReportScreen.tsx#L188 we can do the following:

  managerID: PolicyUtils.getSubmitToAccountID(policy, expenseReport) ?? reportOnyx?.managerID

• Inside canApproveIOU function we can use the approval account id from the policy instead of using the managerID

  const managerID = managerID: PolicyUtils.getSubmitToAccountID(policy, iouReport) ?? iouReport?.managerID ?? -1;
  const isCurrentUserManager = managerID === userAccountID;
  ...
  return isCurrentUserManager && !isOpenExpenseReport && !isApproved && !iouSettled && !isArchivedReport && !isTransactionBeingScanned;

• When submitting the expense, we can pass the mangerID from the approval account id from the policy inside the optimistic data

  What alternative solutions did you explore? (Optional)

  instead of using PolicyUtils.getSubmitToAccountID we can do the similar logic like what we do here https://github.com/Expensify/App/blob/9774032c7b9e72c5f8ee0de6adbe843a7efa2c4a/src/libs/actions/IOU.ts#L6846-L6860

[jliexpensify]

I can reproduce this one, I think it'll be a #quality issue?

[melvin-bot[bot]]

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

[melvin-bot[bot]]

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