From 14266a2c8c656514ecd73c3d3025f60a832b1232 Mon Sep 17 00:00:00 2001 From: Blazej Kustra Date: Tue, 30 Jul 2024 17:13:36 +0200 Subject: [PATCH 1/7] Implement selection list for selecting approver --- src/languages/en.ts | 3 +- src/languages/es.ts | 3 +- src/libs/Navigation/types.ts | 1 + src/libs/actions/Policy/Policy.ts | 2 +- ...orkspaceWorkflowsApprovalsApproverPage.tsx | 210 +++++++++++++++++- src/types/onyx/ApprovalWorkflow.ts | 4 +- 6 files changed, 212 insertions(+), 11 deletions(-) diff --git a/src/languages/en.ts b/src/languages/en.ts index 6fdd5bbf3ab1..0dfe546c89e8 100755 --- a/src/languages/en.ts +++ b/src/languages/en.ts @@ -1288,8 +1288,9 @@ export default { title: 'Expenses from', header: 'When the following members submit expenses:', }, - workflowsApprovalPage: { + workflowsApproverPage: { genericErrorMessage: "The approver couldn't be changed. Please try again or contact support.", + header: 'Send to this member for approval:', }, workflowsPayerPage: { title: 'Authorized payer', diff --git a/src/languages/es.ts b/src/languages/es.ts index f918da0b140f..148d9cef4c8d 100644 --- a/src/languages/es.ts +++ b/src/languages/es.ts @@ -1297,8 +1297,9 @@ export default { title: 'Gastos de', header: 'Cuando los siguientes miembros presenten gastos:', }, - workflowsApprovalPage: { + workflowsApproverPage: { genericErrorMessage: 'El aprobador no pudo ser cambiado. Por favor, inténtelo de nuevo o contacte al soporte.', + header: 'Enviar a este miembro para su aprobación:', }, workflowsPayerPage: { title: 'Pagador autorizado', diff --git a/src/libs/Navigation/types.ts b/src/libs/Navigation/types.ts index 9a7aafb1963c..f55968b80971 100644 --- a/src/libs/Navigation/types.ts +++ b/src/libs/Navigation/types.ts @@ -1119,6 +1119,7 @@ type FullScreenNavigatorParamList = { }; [SCREENS.WORKSPACE.WORKFLOWS_APPROVALS_APPROVER]: { policyID: string; + approverIndex?: number; }; [SCREENS.WORKSPACE.WORKFLOWS_AUTO_REPORTING_FREQUENCY]: { policyID: string; diff --git a/src/libs/actions/Policy/Policy.ts b/src/libs/actions/Policy/Policy.ts index 1bce525e22bf..be6dd445e89a 100644 --- a/src/libs/actions/Policy/Policy.ts +++ b/src/libs/actions/Policy/Policy.ts @@ -482,7 +482,7 @@ function setWorkspaceApprovalMode(policyID: string, approver: string, approvalMo approver: policy?.approver, approvalMode: policy?.approvalMode, pendingFields: {approvalMode: null}, - errorFields: {approvalMode: ErrorUtils.getMicroSecondOnyxErrorWithTranslationKey('workflowsApprovalPage.genericErrorMessage')}, + errorFields: {approvalMode: ErrorUtils.getMicroSecondOnyxErrorWithTranslationKey('workflowsApproverPage.genericErrorMessage')}, }, }, ]; diff --git a/src/pages/workspace/workflows/approvals/WorkspaceWorkflowsApprovalsApproverPage.tsx b/src/pages/workspace/workflows/approvals/WorkspaceWorkflowsApprovalsApproverPage.tsx index 8e9005c46587..11c7bb6510a6 100644 --- a/src/pages/workspace/workflows/approvals/WorkspaceWorkflowsApprovalsApproverPage.tsx +++ b/src/pages/workspace/workflows/approvals/WorkspaceWorkflowsApprovalsApproverPage.tsx @@ -1,17 +1,24 @@ import type {StackScreenProps} from '@react-navigation/stack'; -import React, {useCallback, useMemo, useState} from 'react'; +import React, {useCallback, useEffect, useMemo, useState} from 'react'; import type {SectionListData} from 'react-native'; import type {OnyxEntry} from 'react-native-onyx'; +import {useOnyx, withOnyx} from 'react-native-onyx'; import Badge from '@components/Badge'; import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView'; +import FormAlertWithSubmitButton from '@components/FormAlertWithSubmitButton'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import {FallbackAvatar} from '@components/Icon/Expensicons'; import ScreenWrapper from '@components/ScreenWrapper'; import SelectionList from '@components/SelectionList'; +import InviteMemberListItem from '@components/SelectionList/InviteMemberListItem'; import type {ListItem, Section} from '@components/SelectionList/types'; import UserListItem from '@components/SelectionList/UserListItem'; +import Text from '@components/Text'; +import useDebouncedState from '@hooks/useDebouncedState'; import useLocalize from '@hooks/useLocalize'; import useNetwork from '@hooks/useNetwork'; +import useThemeStyles from '@hooks/useThemeStyles'; +import * as DeviceCapabilities from '@libs/DeviceCapabilities'; import {formatPhoneNumber} from '@libs/LocalePhoneNumber'; import Log from '@libs/Log'; import Navigation from '@libs/Navigation/Navigation'; @@ -23,23 +30,208 @@ import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper'; import withPolicyAndFullscreenLoading from '@pages/workspace/withPolicyAndFullscreenLoading'; import type {WithPolicyAndFullscreenLoadingProps} from '@pages/workspace/withPolicyAndFullscreenLoading'; import * as Policy from '@userActions/Policy/Policy'; +import * as Workflow from '@userActions/Workflow'; import CONST from '@src/CONST'; +import ONYXKEYS from '@src/ONYXKEYS'; +import ROUTES from '@src/ROUTES'; import type SCREENS from '@src/SCREENS'; -import type {PersonalDetailsList, PolicyEmployee} from '@src/types/onyx'; +import type {Beta, PolicyEmployee} from '@src/types/onyx'; +import type {Icon} from '@src/types/onyx/OnyxCommon'; import {isEmptyObject} from '@src/types/utils/EmptyObject'; type WorkspaceWorkflowsApprovalsApproverPageOnyxProps = { - /** All of the personal details for everyone */ - personalDetails: OnyxEntry; + /** Beta features list */ + // eslint-disable-next-line react/no-unused-prop-types -- This prop is used in the component + betas: OnyxEntry; }; type WorkspaceWorkflowsApprovalsApproverPageProps = WorkspaceWorkflowsApprovalsApproverPageOnyxProps & WithPolicyAndFullscreenLoadingProps & StackScreenProps; + +type SelectionListApprover = { + text: string; + alternateText: string; + keyForList: string; + isSelected: boolean; + login: string; + rightElement?: React.ReactNode; + icons: Icon[]; +}; +type ApproverSection = SectionListData>; + +function WorkspaceWorkflowsApprovalsApproverPage(props: WorkspaceWorkflowsApprovalsApproverPageProps) { + if (props.betas?.includes(CONST.BETAS.WORKFLOWS_ADVANCED_APPROVAL)) { + // eslint-disable-next-line react/jsx-props-no-spreading + return ; + } + + // eslint-disable-next-line react/jsx-props-no-spreading + return ; +} + +function WorkspaceWorkflowsApprovalsApproverPageNew({policy, personalDetails, isLoadingReportData = true, route}: WorkspaceWorkflowsApprovalsApproverPageProps) { + const styles = useThemeStyles(); + const {translate} = useLocalize(); + const [didScreenTransitionEnd, setDidScreenTransitionEnd] = useState(false); + const [searchTerm, debouncedSearchTerm, setSearchTerm] = useDebouncedState(''); + const [approvalWorkflow, approvalWorkflowMetadata] = useOnyx(ONYXKEYS.APPROVAL_WORKFLOW); + const [selectedApproverEmail, setSelectedApproverEmail] = useState(undefined); + + // eslint-disable-next-line rulesdir/no-negated-variables + const shouldShowNotFoundView = (isEmptyObject(policy) && !isLoadingReportData) || !PolicyUtils.isPolicyAdmin(policy) || PolicyUtils.isPendingDeletePolicy(policy); + const policyMemberEmailsToAccountIDs = PolicyUtils.getMemberAccountIDsForWorkspace(policy?.employeeList); + const approverIndex = route.params.approverIndex ?? 0; + + useEffect(() => { + const currentApprover = approvalWorkflow?.approvers[approverIndex]; + if (!currentApprover) { + return; + } + + setSelectedApproverEmail(currentApprover.email); + }, [approvalWorkflow?.approvers, approverIndex]); + + const sections: ApproverSection[] = useMemo(() => { + const approvers: SelectionListApprover[] = []; + + if (policy?.employeeList) { + const availableApprovers = Object.values(policy.employeeList) + .map((employee): SelectionListApprover | null => { + const isAdmin = employee?.role === CONST.REPORT.ROLE.ADMIN; + const email = employee.email; + + if (!email) { + return null; + } + + const accountID = Number(policyMemberEmailsToAccountIDs[email] ?? ''); + const {avatar, displayName = email} = personalDetails?.[accountID] ?? {}; + + return { + text: displayName, + alternateText: email, + keyForList: email, + isSelected: selectedApproverEmail === email, + login: email, + icons: [{source: avatar ?? FallbackAvatar, type: CONST.ICON_TYPE_AVATAR, name: displayName, id: accountID}], + rightElement: isAdmin ? : undefined, + }; + }) + .filter((approver): approver is SelectionListApprover => !!approver); + + approvers.push(...availableApprovers); + } + + const filteredApprovers = + debouncedSearchTerm !== '' + ? approvers.filter((option) => { + const searchValue = OptionsListUtils.getSearchValueForPhoneOrEmail(debouncedSearchTerm); + const isPartOfSearchTerm = !!option.text?.toLowerCase().includes(searchValue) || !!option.login?.toLowerCase().includes(searchValue); + return isPartOfSearchTerm; + }) + : approvers; + + return [ + { + title: undefined, + data: filteredApprovers, + shouldShow: true, + }, + ]; + }, [debouncedSearchTerm, personalDetails, policy?.employeeList, policyMemberEmailsToAccountIDs, selectedApproverEmail, translate]); + + const nextStep = useCallback(() => { + if (!selectedApproverEmail) { + return; + } + + const accountID = Number(policyMemberEmailsToAccountIDs[selectedApproverEmail] ?? ''); + const {avatar, displayName = selectedApproverEmail} = personalDetails?.[accountID] ?? {}; + Workflow.setApprovalWorkflowApprover( + { + email: selectedApproverEmail, + avatar, + displayName, + isInMultipleWorkflows: false, + isCircularReference: false, + }, + approverIndex, + ); + + const firstApprover = approvalWorkflow?.approvers?.[0]?.email ?? ''; + Navigation.navigate(ROUTES.WORKSPACE_WORKFLOWS_APPROVALS_EDIT.getRoute(route.params.policyID, firstApprover)); + }, [approvalWorkflow?.approvers, approverIndex, personalDetails, policyMemberEmailsToAccountIDs, route.params.policyID, selectedApproverEmail]); + + const nextButton = useMemo( + () => ( + + ), + [nextStep, selectedApproverEmail, styles.flexBasisAuto, styles.flexGrow0, styles.flexReset, styles.flexShrink0, translate], + ); + + const toggleApprover = (approver: SelectionListApprover) => { + if (selectedApproverEmail === approver.login) { + setSelectedApproverEmail(undefined); + return; + } + setSelectedApproverEmail(approver.login); + }; + + const headerMessage = useMemo(() => (searchTerm && !sections[0].data.length ? translate('common.noResultsFound') : ''), [searchTerm, sections, translate]); + + return ( + + setDidScreenTransitionEnd(true)} + > + + + {translate('workflowsApproverPage.header')} + + + + + ); +} + type MemberOption = Omit & {accountID: number}; type MembersSection = SectionListData>; -function WorkspaceWorkflowsApprovalsApproverPage({policy, personalDetails, isLoadingReportData = true, route}: WorkspaceWorkflowsApprovalsApproverPageProps) { +// TODO: Remove this component once the new workflow is enabled for all users +function WorkspaceWorkflowsApprovalsApproverPageOld({policy, personalDetails, isLoadingReportData = true, route}: WorkspaceWorkflowsApprovalsApproverPageProps) { const {translate} = useLocalize(); const policyName = policy?.name ?? ''; const [searchTerm, setSearchTerm] = useState(''); @@ -196,4 +388,10 @@ function WorkspaceWorkflowsApprovalsApproverPage({policy, personalDetails, isLoa WorkspaceWorkflowsApprovalsApproverPage.displayName = 'WorkspaceWorkflowsApprovalsApproverPage'; -export default withPolicyAndFullscreenLoading(WorkspaceWorkflowsApprovalsApproverPage); +export default withPolicyAndFullscreenLoading( + withOnyx({ + betas: { + key: ONYXKEYS.BETAS, + }, + })(WorkspaceWorkflowsApprovalsApproverPage), +); diff --git a/src/types/onyx/ApprovalWorkflow.ts b/src/types/onyx/ApprovalWorkflow.ts index 70919ada9ddb..b5bce8037fdc 100644 --- a/src/types/onyx/ApprovalWorkflow.ts +++ b/src/types/onyx/ApprovalWorkflow.ts @@ -22,12 +22,12 @@ type Approver = { /** * Display name of the current user from their personal details */ - displayName?: string; + displayName: string; /** * Is this user used as an approver in more than one workflow (used to show a warning) */ - isInMultipleWorkflows: boolean; + isInMultipleWorkflows?: boolean; /** * Is this approver in a circular reference (approver forwards to themselves, or a cycle of forwards) From 7d3b2fe40893604f758d001b925598f9d8dde4e3 Mon Sep 17 00:00:00 2001 From: Blazej Kustra Date: Tue, 30 Jul 2024 17:45:33 +0200 Subject: [PATCH 2/7] Fix couple of bugs --- src/ROUTES.ts | 3 ++- .../WorkspaceWorkflowsApprovalsApproverPage.tsx | 16 +++++++++++----- ...rkspaceWorkflowsApprovalsExpensesFromPage.tsx | 2 +- 3 files changed, 14 insertions(+), 7 deletions(-) diff --git a/src/ROUTES.ts b/src/ROUTES.ts index 0811ea02e9d6..3fa16f24be84 100644 --- a/src/ROUTES.ts +++ b/src/ROUTES.ts @@ -625,7 +625,8 @@ const ROUTES = { }, WORKSPACE_WORKFLOWS_APPROVALS_APPROVER: { route: 'settings/workspaces/:policyID/workflows/approvals/approver', - getRoute: (policyID: string) => `settings/workspaces/${policyID}/workflows/approvals/approver` as const, + getRoute: (policyID: string, approverIndex?: number) => + `settings/workspaces/${policyID}/workflows/approvals/approver${approverIndex !== undefined ? `?approverIndex=${approverIndex}` : ''}` as const, }, WORKSPACE_WORKFLOWS_PAYER: { route: 'settings/workspaces/:policyID/workflows/payer', diff --git a/src/pages/workspace/workflows/approvals/WorkspaceWorkflowsApprovalsApproverPage.tsx b/src/pages/workspace/workflows/approvals/WorkspaceWorkflowsApprovalsApproverPage.tsx index 11c7bb6510a6..e164ebf5de13 100644 --- a/src/pages/workspace/workflows/approvals/WorkspaceWorkflowsApprovalsApproverPage.tsx +++ b/src/pages/workspace/workflows/approvals/WorkspaceWorkflowsApprovalsApproverPage.tsx @@ -24,6 +24,7 @@ import Log from '@libs/Log'; import Navigation from '@libs/Navigation/Navigation'; import type {FullScreenNavigatorParamList} from '@libs/Navigation/types'; import * as OptionsListUtils from '@libs/OptionsListUtils'; +import Permissions from '@libs/Permissions'; import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils'; import * as PolicyUtils from '@libs/PolicyUtils'; import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper'; @@ -61,7 +62,7 @@ type SelectionListApprover = { type ApproverSection = SectionListData>; function WorkspaceWorkflowsApprovalsApproverPage(props: WorkspaceWorkflowsApprovalsApproverPageProps) { - if (props.betas?.includes(CONST.BETAS.WORKFLOWS_ADVANCED_APPROVAL)) { + if (Permissions.canUseWorkflowsAdvancedApproval(props.betas) && props.route.params.approverIndex !== undefined) { // eslint-disable-next-line react/jsx-props-no-spreading return ; } @@ -80,7 +81,6 @@ function WorkspaceWorkflowsApprovalsApproverPageNew({policy, personalDetails, is // eslint-disable-next-line rulesdir/no-negated-variables const shouldShowNotFoundView = (isEmptyObject(policy) && !isLoadingReportData) || !PolicyUtils.isPolicyAdmin(policy) || PolicyUtils.isPendingDeletePolicy(policy); - const policyMemberEmailsToAccountIDs = PolicyUtils.getMemberAccountIDsForWorkspace(policy?.employeeList); const approverIndex = route.params.approverIndex ?? 0; useEffect(() => { @@ -105,6 +105,7 @@ function WorkspaceWorkflowsApprovalsApproverPageNew({policy, personalDetails, is return null; } + const policyMemberEmailsToAccountIDs = PolicyUtils.getMemberAccountIDsForWorkspace(policy?.employeeList); const accountID = Number(policyMemberEmailsToAccountIDs[email] ?? ''); const {avatar, displayName = email} = personalDetails?.[accountID] ?? {}; @@ -139,13 +140,14 @@ function WorkspaceWorkflowsApprovalsApproverPageNew({policy, personalDetails, is shouldShow: true, }, ]; - }, [debouncedSearchTerm, personalDetails, policy?.employeeList, policyMemberEmailsToAccountIDs, selectedApproverEmail, translate]); + }, [debouncedSearchTerm, personalDetails, policy?.employeeList, selectedApproverEmail, translate]); const nextStep = useCallback(() => { if (!selectedApproverEmail) { return; } + const policyMemberEmailsToAccountIDs = PolicyUtils.getMemberAccountIDsForWorkspace(policy?.employeeList); const accountID = Number(policyMemberEmailsToAccountIDs[selectedApproverEmail] ?? ''); const {avatar, displayName = selectedApproverEmail} = personalDetails?.[accountID] ?? {}; Workflow.setApprovalWorkflowApprover( @@ -160,8 +162,12 @@ function WorkspaceWorkflowsApprovalsApproverPageNew({policy, personalDetails, is ); const firstApprover = approvalWorkflow?.approvers?.[0]?.email ?? ''; - Navigation.navigate(ROUTES.WORKSPACE_WORKFLOWS_APPROVALS_EDIT.getRoute(route.params.policyID, firstApprover)); - }, [approvalWorkflow?.approvers, approverIndex, personalDetails, policyMemberEmailsToAccountIDs, route.params.policyID, selectedApproverEmail]); + if (!approvalWorkflow?.isBeingEdited && firstApprover) { + Navigation.navigate(ROUTES.WORKSPACE_WORKFLOWS_APPROVALS_EDIT.getRoute(route.params.policyID, firstApprover)); + } else { + Navigation.navigate(ROUTES.WORKSPACE_WORKFLOWS_APPROVALS_NEW.getRoute(route.params.policyID)); + } + }, [approvalWorkflow?.approvers, approvalWorkflow?.isBeingEdited, approverIndex, personalDetails, policy?.employeeList, route.params.policyID, selectedApproverEmail]); const nextButton = useMemo( () => ( diff --git a/src/pages/workspace/workflows/approvals/WorkspaceWorkflowsApprovalsExpensesFromPage.tsx b/src/pages/workspace/workflows/approvals/WorkspaceWorkflowsApprovalsExpensesFromPage.tsx index 13ccace08132..443b51387a93 100644 --- a/src/pages/workspace/workflows/approvals/WorkspaceWorkflowsApprovalsExpensesFromPage.tsx +++ b/src/pages/workspace/workflows/approvals/WorkspaceWorkflowsApprovalsExpensesFromPage.tsx @@ -131,7 +131,7 @@ function WorkspaceWorkflowsApprovalsExpensesFromPage({policy, isLoadingReportDat if (approvalWorkflow?.isBeingEdited && firstApprover) { Navigation.navigate(ROUTES.WORKSPACE_WORKFLOWS_APPROVALS_EDIT.getRoute(route.params.policyID, firstApprover)); } else { - Navigation.navigate(ROUTES.WORKSPACE_WORKFLOWS_APPROVALS_APPROVER.getRoute(route.params.policyID)); + Navigation.navigate(ROUTES.WORKSPACE_WORKFLOWS_APPROVALS_APPROVER.getRoute(route.params.policyID, 0)); } }, [approvalWorkflow?.approvers, approvalWorkflow?.isBeingEdited, route.params.policyID, selectedMembers]); From 1504f23700853b4d6980c717fa877dad21eff46d Mon Sep 17 00:00:00 2001 From: Blazej Kustra Date: Wed, 31 Jul 2024 11:10:30 +0200 Subject: [PATCH 3/7] Remove can select multiple flag --- .../approvals/WorkspaceWorkflowsApprovalsApproverPage.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/pages/workspace/workflows/approvals/WorkspaceWorkflowsApprovalsApproverPage.tsx b/src/pages/workspace/workflows/approvals/WorkspaceWorkflowsApprovalsApproverPage.tsx index e164ebf5de13..9ad76b2ffd5a 100644 --- a/src/pages/workspace/workflows/approvals/WorkspaceWorkflowsApprovalsApproverPage.tsx +++ b/src/pages/workspace/workflows/approvals/WorkspaceWorkflowsApprovalsApproverPage.tsx @@ -214,7 +214,6 @@ function WorkspaceWorkflowsApprovalsApproverPageNew({policy, personalDetails, is /> {translate('workflowsApproverPage.header')} Date: Wed, 31 Jul 2024 20:37:32 +0200 Subject: [PATCH 4/7] Fix TS --- src/libs/WorkflowUtils.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/libs/WorkflowUtils.ts b/src/libs/WorkflowUtils.ts index c01fbbea7b57..1365de4f881b 100644 --- a/src/libs/WorkflowUtils.ts +++ b/src/libs/WorkflowUtils.ts @@ -46,7 +46,7 @@ function getApprovalWorkflowApprovers({employees, firstEmail, personalDetailsByE email: nextEmail, forwardsTo: employees[nextEmail].forwardsTo, avatar: personalDetailsByEmail[nextEmail]?.avatar, - displayName: personalDetailsByEmail[nextEmail]?.displayName, + displayName: personalDetailsByEmail[nextEmail]?.displayName ?? nextEmail, isInMultipleWorkflows: false, isCircularReference, }); From 6d6a4a67df7fa71bdc51df16a3d4e2f8e11ee81c Mon Sep 17 00:00:00 2001 From: Blazej Kustra Date: Fri, 2 Aug 2024 09:03:56 +0200 Subject: [PATCH 5/7] Fix that wrong approver was selected when going back to expenses from screen --- src/libs/actions/Workflow.ts | 2 +- .../WorkspaceWorkflowsApprovalsApproverPage.tsx | 9 ++++++++- 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/src/libs/actions/Workflow.ts b/src/libs/actions/Workflow.ts index fe336c3d51bd..5f48534bae15 100644 --- a/src/libs/actions/Workflow.ts +++ b/src/libs/actions/Workflow.ts @@ -203,7 +203,7 @@ function setApprovalWorkflowMembers(members: Member[]) { Onyx.merge(ONYXKEYS.APPROVAL_WORKFLOW, {members}); } -function setApprovalWorkflowApprover(approver: Approver, index: number) { +function setApprovalWorkflowApprover(approver: Approver | null, index: number) { if (!currentApprovalWorkflow) { return; } diff --git a/src/pages/workspace/workflows/approvals/WorkspaceWorkflowsApprovalsApproverPage.tsx b/src/pages/workspace/workflows/approvals/WorkspaceWorkflowsApprovalsApproverPage.tsx index 9ad76b2ffd5a..b4e237d7ded0 100644 --- a/src/pages/workspace/workflows/approvals/WorkspaceWorkflowsApprovalsApproverPage.tsx +++ b/src/pages/workspace/workflows/approvals/WorkspaceWorkflowsApprovalsApproverPage.tsx @@ -182,6 +182,13 @@ function WorkspaceWorkflowsApprovalsApproverPageNew({policy, personalDetails, is [nextStep, selectedApproverEmail, styles.flexBasisAuto, styles.flexGrow0, styles.flexReset, styles.flexShrink0, translate], ); + const goBack = useCallback(() => { + if (!approvalWorkflow?.isBeingEdited) { + Workflow.setApprovalWorkflowApprover(null, approverIndex); + } + Navigation.goBack(); + }, [approvalWorkflow?.isBeingEdited, approverIndex]); + const toggleApprover = (approver: SelectionListApprover) => { if (selectedApproverEmail === approver.login) { setSelectedApproverEmail(undefined); @@ -210,7 +217,7 @@ function WorkspaceWorkflowsApprovalsApproverPageNew({policy, personalDetails, is > {translate('workflowsApproverPage.header')} Date: Fri, 2 Aug 2024 09:28:44 +0200 Subject: [PATCH 6/7] Fix typecheck --- src/libs/actions/Workflow.ts | 17 +++++++++++++++-- .../WorkspaceWorkflowsApprovalsApproverPage.tsx | 4 ++-- 2 files changed, 17 insertions(+), 4 deletions(-) diff --git a/src/libs/actions/Workflow.ts b/src/libs/actions/Workflow.ts index 5f48534bae15..77607080bc7a 100644 --- a/src/libs/actions/Workflow.ts +++ b/src/libs/actions/Workflow.ts @@ -203,7 +203,7 @@ function setApprovalWorkflowMembers(members: Member[]) { Onyx.merge(ONYXKEYS.APPROVAL_WORKFLOW, {members}); } -function setApprovalWorkflowApprover(approver: Approver | null, index: number) { +function setApprovalWorkflowApprover(approver: Approver, index: number) { if (!currentApprovalWorkflow) { return; } @@ -217,8 +217,21 @@ function setApprovalWorkflow(approvalWorkflow: ApprovalWorkflow) { Onyx.merge(ONYXKEYS.APPROVAL_WORKFLOW, approvalWorkflow); } +function clearApprovalWorkflowApprovers() { + Onyx.merge(ONYXKEYS.APPROVAL_WORKFLOW, {approvers: []}); +} + function clearApprovalWorkflow() { Onyx.set(ONYXKEYS.APPROVAL_WORKFLOW, null); } -export {createApprovalWorkflow, updateApprovalWorkflow, removeApprovalWorkflow, setApprovalWorkflowMembers, setApprovalWorkflowApprover, setApprovalWorkflow, clearApprovalWorkflow}; +export { + createApprovalWorkflow, + updateApprovalWorkflow, + removeApprovalWorkflow, + setApprovalWorkflowMembers, + setApprovalWorkflowApprover, + setApprovalWorkflow, + clearApprovalWorkflowApprovers, + clearApprovalWorkflow, +}; diff --git a/src/pages/workspace/workflows/approvals/WorkspaceWorkflowsApprovalsApproverPage.tsx b/src/pages/workspace/workflows/approvals/WorkspaceWorkflowsApprovalsApproverPage.tsx index b4e237d7ded0..c34f42d2ca08 100644 --- a/src/pages/workspace/workflows/approvals/WorkspaceWorkflowsApprovalsApproverPage.tsx +++ b/src/pages/workspace/workflows/approvals/WorkspaceWorkflowsApprovalsApproverPage.tsx @@ -184,10 +184,10 @@ function WorkspaceWorkflowsApprovalsApproverPageNew({policy, personalDetails, is const goBack = useCallback(() => { if (!approvalWorkflow?.isBeingEdited) { - Workflow.setApprovalWorkflowApprover(null, approverIndex); + Workflow.clearApprovalWorkflowApprovers(); } Navigation.goBack(); - }, [approvalWorkflow?.isBeingEdited, approverIndex]); + }, [approvalWorkflow?.isBeingEdited]); const toggleApprover = (approver: SelectionListApprover) => { if (selectedApproverEmail === approver.login) { From d9334698349977a144138aa9e8b08a401e4b46f5 Mon Sep 17 00:00:00 2001 From: Blazej Kustra Date: Fri, 2 Aug 2024 18:12:46 +0200 Subject: [PATCH 7/7] Change names of components --- ...orkspaceWorkflowsApprovalsApproverPage.tsx | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/pages/workspace/workflows/approvals/WorkspaceWorkflowsApprovalsApproverPage.tsx b/src/pages/workspace/workflows/approvals/WorkspaceWorkflowsApprovalsApproverPage.tsx index c34f42d2ca08..8d4f2178bb6b 100644 --- a/src/pages/workspace/workflows/approvals/WorkspaceWorkflowsApprovalsApproverPage.tsx +++ b/src/pages/workspace/workflows/approvals/WorkspaceWorkflowsApprovalsApproverPage.tsx @@ -61,17 +61,17 @@ type SelectionListApprover = { }; type ApproverSection = SectionListData>; -function WorkspaceWorkflowsApprovalsApproverPage(props: WorkspaceWorkflowsApprovalsApproverPageProps) { +function WorkspaceWorkflowsApprovalsApproverPageWrapper(props: WorkspaceWorkflowsApprovalsApproverPageProps) { if (Permissions.canUseWorkflowsAdvancedApproval(props.betas) && props.route.params.approverIndex !== undefined) { // eslint-disable-next-line react/jsx-props-no-spreading - return ; + return ; } // eslint-disable-next-line react/jsx-props-no-spreading - return ; + return ; } -function WorkspaceWorkflowsApprovalsApproverPageNew({policy, personalDetails, isLoadingReportData = true, route}: WorkspaceWorkflowsApprovalsApproverPageProps) { +function WorkspaceWorkflowsApprovalsApproverPageBeta({policy, personalDetails, isLoadingReportData = true, route}: WorkspaceWorkflowsApprovalsApproverPageProps) { const styles = useThemeStyles(); const {translate} = useLocalize(); const [didScreenTransitionEnd, setDidScreenTransitionEnd] = useState(false); @@ -206,7 +206,7 @@ function WorkspaceWorkflowsApprovalsApproverPageNew({policy, personalDetails, is > setDidScreenTransitionEnd(true)} > & {accountID: number}; type MembersSection = SectionListData>; -// TODO: Remove this component once the new workflow is enabled for all users -function WorkspaceWorkflowsApprovalsApproverPageOld({policy, personalDetails, isLoadingReportData = true, route}: WorkspaceWorkflowsApprovalsApproverPageProps) { +// TODO: Remove this component when workflowsAdvancedApproval beta is removed +function WorkspaceWorkflowsApprovalsApproverPage({policy, personalDetails, isLoadingReportData = true, route}: WorkspaceWorkflowsApprovalsApproverPageProps) { const {translate} = useLocalize(); const policyName = policy?.name ?? ''; const [searchTerm, setSearchTerm] = useState(''); @@ -368,7 +368,7 @@ function WorkspaceWorkflowsApprovalsApproverPageOld({policy, personalDetails, is > ({ betas: { key: ONYXKEYS.BETAS, }, - })(WorkspaceWorkflowsApprovalsApproverPage), + })(WorkspaceWorkflowsApprovalsApproverPageWrapper), );