diff --git a/src/pages/workspace/workflows/approvals/WorkspaceWorkflowsApprovalsApproverPage.tsx b/src/pages/workspace/workflows/approvals/WorkspaceWorkflowsApprovalsApproverPage.tsx index 8d0582c0a926b..f8392a034d755 100644 --- a/src/pages/workspace/workflows/approvals/WorkspaceWorkflowsApprovalsApproverPage.tsx +++ b/src/pages/workspace/workflows/approvals/WorkspaceWorkflowsApprovalsApproverPage.tsx @@ -1,5 +1,5 @@ import {useNavigationState} from '@react-navigation/native'; -import React, {useCallback, useMemo} from 'react'; +import React, {useCallback, useMemo, useState} from 'react'; import type {SelectionListApprover} from '@components/ApproverSelectionList'; import ApproverSelectionList from '@components/ApproverSelectionList'; import Text from '@components/Text'; @@ -36,12 +36,17 @@ function WorkspaceWorkflowsApprovalsApproverPage({policy, personalDetails, isLoa const approverIndex = Number(route.params.approverIndex) ?? 0; const rhpRoutes = useNavigationState((state) => state.routes); const defaultApprover = getDefaultApprover(policy); - const firstApprover = approvalWorkflow?.approvers?.[0]?.email ?? ''; + const firstApprover = approvalWorkflow?.originalApprovers?.[0]?.email ?? ''; + // Keep the removed approver visible until navigation finishes. + // Without this temporary state, clearing the approver immediately causes the empty state to flash + // while this screen is still mounted during the dismiss animation. + const [removingApproverEmail, setRemovingApproverEmail] = useState(); const isChangeApproverRoute = route.name === SCREENS.WORKSPACE.WORKFLOWS_APPROVALS_APPROVER_CHANGE; const isInitialCreationFlow = approvalWorkflow?.action === CONST.APPROVAL_WORKFLOW.ACTION.CREATE && approvalWorkflow?.isInitialFlow; const currentApprover = approvalWorkflow?.approvers[approverIndex]; const selectedApproverEmail = currentApprover?.email; + const visibleSelectedApproverEmail = removingApproverEmail ?? selectedApproverEmail; const employeeList = policy?.employeeList; const approversFromWorkflow = approvalWorkflow?.approvers; @@ -62,13 +67,13 @@ function WorkspaceWorkflowsApprovalsApproverPage({policy, personalDetails, isLoa return null; } - if (!isDefault && policy?.preventSelfApproval && membersEmail?.includes(email)) { + if (!isDefault && policy?.preventSelfApproval && membersEmail?.includes(email) && visibleSelectedApproverEmail !== email) { return null; } // Do not allow the same email to be added twice const isEmailAlreadyInApprovers = approversFromWorkflow?.some((approver, index) => approver?.email === email && index !== approverIndex); - if (isEmailAlreadyInApprovers && selectedApproverEmail !== email) { + if (isEmailAlreadyInApprovers && visibleSelectedApproverEmail !== email) { return null; } @@ -90,7 +95,7 @@ function WorkspaceWorkflowsApprovalsApproverPage({policy, personalDetails, isLoa text: displayName, alternateText: email, keyForList: email, - isSelected: selectedApproverEmail === email, + isSelected: visibleSelectedApproverEmail === email, login: email, icons: [{source: avatar ?? icons.FallbackAvatar, type: CONST.ICON_TYPE_AVATAR, name: displayName, id: accountID}], rightElement: ( @@ -111,14 +116,14 @@ function WorkspaceWorkflowsApprovalsApproverPage({policy, personalDetails, isLoa policy?.owner, approvalWorkflow?.members, approversFromWorkflow, - selectedApproverEmail, + visibleSelectedApproverEmail, approverIndex, defaultApprover, personalDetails, icons.FallbackAvatar, ]); - const shouldShowListEmptyContent = !!approvalWorkflow && !isApprovalWorkflowLoading; + const shouldShowListEmptyContent = !!approvalWorkflow && !isApprovalWorkflowLoading && !removingApproverEmail; const goBack = useCallback(() => { let backToRoute; @@ -139,7 +144,12 @@ function WorkspaceWorkflowsApprovalsApproverPage({policy, personalDetails, isLoa const isRemovingApprover = approvers.length === 0; if (isRemovingApprover) { + setRemovingApproverEmail(visibleSelectedApproverEmail); clearApprovalWorkflowApprover({approverIndex, currentApprovalWorkflow: approvalWorkflow}); + if (isChangeApproverRoute && approvalWorkflow?.action === CONST.APPROVAL_WORKFLOW.ACTION.EDIT) { + Navigation.goBack(ROUTES.WORKSPACE_WORKFLOWS_APPROVALS_EDIT.getRoute(route.params.policyID, firstApprover)); + return; + } goBack(); return; } @@ -171,7 +181,19 @@ function WorkspaceWorkflowsApprovalsApproverPage({policy, personalDetails, isLoa Navigation.navigate(ROUTES.WORKSPACE_WORKFLOWS_APPROVALS_APPROVAL_LIMIT.getRoute(route.params.policyID, approverIndex)); } }, - [approverIndex, approvalWorkflow, employeeList, personalDetails, policy, route.params.policyID, goBack, personalDetailsByEmail, isChangeApproverRoute], + [ + approverIndex, + approvalWorkflow, + employeeList, + personalDetails, + policy, + route.params.policyID, + goBack, + personalDetailsByEmail, + isChangeApproverRoute, + firstApprover, + visibleSelectedApproverEmail, + ], ); const subtitle = useMemo( @@ -195,7 +217,7 @@ function WorkspaceWorkflowsApprovalsApproverPage({policy, personalDetails, isLoa subtitle={subtitle} isLoadingReportData={isLoadingReportData} policy={policy} - initiallyFocusedOptionKey={selectedApproverEmail} + initiallyFocusedOptionKey={visibleSelectedApproverEmail} shouldShowNotFoundViewLink allApprovers={allApprovers} onBackButtonPress={goBack}