[HOLD for payment 2024-09-24] [$250] Advanced approval - RHP turns to not here page while dismissing after deleting the workflow

[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.25-1
Reproducible in staging?: Y
Reproducible in production?: N
Email or phone of affected tester (no customers): applausetester+kh050806@applause.expensifail.com
Issue reported by: Applause Internal Team

Action Performed:

1. Go to staging.new.expensify.com
2. Go to workspace settings > Workflows.
3. Click Add approval workflow.
4. Select user for "Expenses from" and "Approval".
5. Click Add workflow on confirmation page.
6. Click on the added workflow.
7. Click Delete.
8. Delete the worfklow.

Expected Result:

RHP will close without turning to not here page after deleting the workflow.

Actual Result:

RHP closes while briefly displaying the not here page after deleting the workflow.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug6583988_1724749616430.20240827_170252.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~011b0021bbcd2e0b55
• Upwork Job ID: 1828575300443505062
• Last Price Increase: 2024-09-03
• Automatic offers:
• Krishna2323 | Contributor | 103807249

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to @srikarparsi (DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[github-actions]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[IuliiaHerets]

We think that this bug might be related to #wave-control

[Nodebrute]

Proposal

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

RHP turns to not here page while dismissing after deleting the workflow

What is the root cause of that problem?

We are not dismissing the modal after pressing deleting

App/src/libs/actions/Workflow.ts

Lines 258 to 259 in db1c4c2

	const parameters: RemoveWorkspaceApprovalParams = {policyID, authToken, employees: JSON.stringify(Object.values(updatedEmployees))};
	API.write(WRITE_COMMANDS.REMOVE_WORKSPACE_APPROVAL, parameters, {optimisticData, failureData, successData});

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

Add Navigation.DismissModal()

App/src/libs/actions/Workflow.ts

Lines 258 to 259 in db1c4c2

	const parameters: RemoveWorkspaceApprovalParams = {policyID, authToken, employees: JSON.stringify(Object.values(updatedEmployees))};
	API.write(WRITE_COMMANDS.REMOVE_WORKSPACE_APPROVAL, parameters, {optimisticData, failureData, successData});

What alternative solutions did you explore? (Optional)

We can also dismiss modal in WorkspaceWorkflowsApprovalsEditPage after pressing delete

[nkdengineer]

Proposal

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

RHP turns to not here page while dismissing after deleting the workflow.

What is the root cause of that problem?

This comes from #47845

Let's see the condition to show the not found page here. When we confirm delete, the currentApprovalWorkflow can be updated before we close the RHP then the not found page display briefly

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

Lines 88 to 90 in 6ca91cd

	(isEmptyObject(policy) && !isLoadingReportData) || !PolicyUtils.isPolicyAdmin(policy) || PolicyUtils.isPendingDeletePolicy(policy) || !currentApprovalWorkflow;
	// Set the initial approval workflow when the page is loaded

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

We should check if the currentApprovalWorkflow just changed to empty we will not show not found page. We can use usePrevious hook for currentApprovalWorkflow then only show not found page if both currentApprovalWorkflow and prevCurrentApprovalWorkflow is empty

const prevCurrentApprovalWorkflow = usePrevious(currentApprovalWorkflow);
    // eslint-disable-next-line rulesdir/no-negated-variables
    const shouldShowNotFoundView =
        (isEmptyObject(policy) && !isLoadingReportData) ||
        !PolicyUtils.isPolicyAdmin(policy) ||
        PolicyUtils.isPendingDeletePolicy(policy) ||
        (!currentApprovalWorkflow && !prevCurrentApprovalWorkflow);

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

Lines 88 to 90 in 6ca91cd

	(isEmptyObject(policy) && !isLoadingReportData) || !PolicyUtils.isPolicyAdmin(policy) || PolicyUtils.isPendingDeletePolicy(policy) || !currentApprovalWorkflow;
	// Set the initial approval workflow when the page is loaded

What alternative solutions did you explore? (Optional)