fix: migrate role selection modal to new page

src/ROUTES.ts

@@ -2031,6 +2031,10 @@ const ROUTES = {
         route: 'workspaces/:policyID/members/:accountID',
         getRoute: (policyID: string, accountID: number) => `workspaces/${policyID}/members/${accountID}` as const,
     },
+    WORKSPACE_MEMBER_DETAILS_ROLE: {
+        route: 'workspaces/:policyID/members/:accountID/role',
+        getRoute: (policyID: string, accountID: number) => `workspaces/${policyID}/members/${accountID}/role` as const,
+    },
     WORKSPACE_CUSTOM_FIELDS: {
         route: 'workspaces/:policyID/members/:accountID/:customFieldType',
         getRoute: (policyID: string, accountID: number, customFieldType: CustomFieldType) => `/workspaces/${policyID}/members/${accountID}/${customFieldType}` as const,

src/SCREENS.ts

@@ -680,6 +680,7 @@ const SCREENS = {
         CATEGORIES_IMPORTED: 'Categories_Imported',
         MORE_FEATURES: 'Workspace_More_Features',
         MEMBER_DETAILS: 'Workspace_Member_Details',
+        MEMBER_DETAILS_ROLE: 'Workspace_Member_Details_Role',
         MEMBER_CUSTOM_FIELD: 'Workspace_Member_Custom_Field',
         MEMBER_NEW_CARD: 'Workspace_Member_NewCard',
         OWNER_CHANGE_CHECK: 'Workspace_Owner_Change_Check',

src/components/WorkspaceMemberRoleList.tsx

@@ -0,0 +1,87 @@
+import React from 'react';
+import {View} from 'react-native';
+import type {OnyxEntry} from 'react-native-onyx';
+import type {ValueOf} from 'type-fest';
+import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
+import Navigation from '@libs/Navigation/Navigation';
+import {isControlPolicy} from '@libs/PolicyUtils';
+import CONST from '@src/CONST';
+import type {Route} from '@src/ROUTES';
+import type {Policy} from '@src/types/onyx';
+import HeaderWithBackButton from './HeaderWithBackButton';
+import SelectionList from './SelectionList';
+import RadioListItem from './SelectionList/ListItem/RadioListItem';
+import type {ListItem} from './SelectionList/types';
+
+type ListItemType = ListItem<ValueOf<typeof CONST.POLICY.ROLE>> & {
+    value: ValueOf<typeof CONST.POLICY.ROLE>;
+    text: string;
+    alternateText: string;
+    isSelected: boolean;
+};
+
+type WorkspaceMemberRoleListProps = {
+    role: string | undefined;
+    policy: OnyxEntry<Policy>;
+    navigateBackTo?: Route;
+    isLoading?: boolean;
+    onSelectRole?: (value: ListItemType) => void;
+};
+
+function WorkspaceMemberRoleList({role, policy, navigateBackTo = undefined, isLoading = false, onSelectRole = () => {}}: WorkspaceMemberRoleListProps) {
+    const {translate} = useLocalize();
+    const styles = useThemeStyles();
+
+    const workspaceRoles: ListItemType[] = [
+        {
+            value: CONST.POLICY.ROLE.ADMIN,
+            text: translate('common.admin'),
+            alternateText: translate('workspace.common.adminAlternateText'),
+            isSelected: role === CONST.POLICY.ROLE.ADMIN,
+            keyForList: CONST.POLICY.ROLE.ADMIN,
+        },
+        {
+            value: CONST.POLICY.ROLE.AUDITOR,
+            text: translate('common.auditor'),
+            alternateText: translate('workspace.common.auditorAlternateText'),
+            isSelected: role === CONST.POLICY.ROLE.AUDITOR,
+            keyForList: CONST.POLICY.ROLE.AUDITOR,
+        },
+        {
+            value: CONST.POLICY.ROLE.USER,
+            text: translate('common.member'),
+            alternateText: translate('workspace.common.memberAlternateText'),
+            isSelected: role === CONST.POLICY.ROLE.USER,
+            keyForList: CONST.POLICY.ROLE.USER,
+        },
+    ];
+
+    const isPolicyControl = isControlPolicy(policy);
+    const availableRoleItems: ListItemType[] = workspaceRoles.filter((item) => isPolicyControl || item.value !== CONST.POLICY.ROLE.AUDITOR);
+
+    return (
+        <>
+            <HeaderWithBackButton
+                title={translate('common.role')}
+                onBackButtonPress={() => Navigation.goBack(navigateBackTo)}
+            />
+            {!isLoading && (
+                <View style={[styles.containerWithSpaceBetween, styles.pointerEventsBoxNone]}>
+                    <SelectionList
+                        data={availableRoleItems}
+                        ListItem={RadioListItem}
+                        onSelectRow={onSelectRole}
+                        shouldSingleExecuteRowSelect
+                        initiallyFocusedItemKey={availableRoleItems.find((item) => item.isSelected)?.keyForList}
+                        addBottomSafeAreaPadding
+                    />
+                </View>
+            )}
+        </>
+    );
+}
+
+WorkspaceMemberRoleList.displayName = 'WorkspaceMemberRoleList';
+export default WorkspaceMemberRoleList;
+export type {ListItemType};

src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx

@@ -493,6 +493,7 @@ const SettingsModalStackNavigator = createModalStackNavigator<SettingsNavigatorP
     [SCREENS.WORKSPACE.DOWNGRADE]: () => require<ReactComponentModule>('../../../../pages/workspace/downgrade/WorkspaceDowngradePage').default,
     [SCREENS.WORKSPACE.PAY_AND_DOWNGRADE]: () => require<ReactComponentModule>('../../../../pages/workspace/downgrade/PayAndDowngradePage').default,
     [SCREENS.WORKSPACE.MEMBER_DETAILS]: () => require<ReactComponentModule>('../../../../pages/workspace/members/WorkspaceMemberDetailsPage').default,
+    [SCREENS.WORKSPACE.MEMBER_DETAILS_ROLE]: () => require<ReactComponentModule>('../../../../pages/workspace/members/WorkspaceMemberDetailsRolePage').default,
     [SCREENS.WORKSPACE.MEMBER_CUSTOM_FIELD]: () => require<ReactComponentModule>('../../../../pages/workspace/members/WorkspaceMemberCustomFieldPage').default,
     [SCREENS.WORKSPACE.MEMBER_NEW_CARD]: () => require<ReactComponentModule>('../../../../pages/workspace/members/WorkspaceMemberNewCardPage').default,
     [SCREENS.WORKSPACE.OWNER_CHANGE_CHECK]: () => require<ReactComponentModule>('@pages/workspace/members/WorkspaceOwnerChangeWrapperPage').default,

src/libs/Navigation/linkingConfig/RELATIONS/WORKSPACE_TO_RHP.ts

@@ -15,6 +15,7 @@ const WORKSPACE_TO_RHP: Partial<Record<keyof WorkspaceSplitNavigatorParamList, s
     ],
     [SCREENS.WORKSPACE.MEMBERS]: [
         SCREENS.WORKSPACE.MEMBER_DETAILS,
+        SCREENS.WORKSPACE.MEMBER_DETAILS_ROLE,
         SCREENS.WORKSPACE.MEMBER_CUSTOM_FIELD,
         SCREENS.WORKSPACE.MEMBER_NEW_CARD,
         SCREENS.WORKSPACE.OWNER_CHANGE_CHECK,

src/libs/Navigation/linkingConfig/config.ts

@@ -845,6 +845,9 @@ const config: LinkingOptions<RootNavigatorParamList>['config'] = {
                         [SCREENS.WORKSPACE.MEMBER_DETAILS]: {
                             path: ROUTES.WORKSPACE_MEMBER_DETAILS.route,
                         },
+                        [SCREENS.WORKSPACE.MEMBER_DETAILS_ROLE]: {
+                            path: ROUTES.WORKSPACE_MEMBER_DETAILS_ROLE.route,
+                        },
                         [SCREENS.WORKSPACE.MEMBER_CUSTOM_FIELD]: {
                             path: ROUTES.WORKSPACE_CUSTOM_FIELDS.route,
                         },

src/libs/Navigation/types.ts

@@ -583,6 +583,10 @@ type SettingsNavigatorParamList = {
         policyID: string;
         accountID: string;
     };
+    [SCREENS.WORKSPACE.MEMBER_DETAILS_ROLE]: {
+        policyID: string;
+        accountID: string;
+    };
     [SCREENS.WORKSPACE.MEMBER_CUSTOM_FIELD]: {
         policyID: string;
         accountID: string;

src/pages/workspace/WorkspaceInviteMessageRolePage.tsx

@@ -1,20 +1,13 @@
-import React, {useMemo} from 'react';
-import {View} from 'react-native';
-import type {ValueOf} from 'type-fest';
-import HeaderWithBackButton from '@components/HeaderWithBackButton';
+import React from 'react';
 import ScreenWrapper from '@components/ScreenWrapper';
-import SelectionList from '@components/SelectionList';
-import RadioListItem from '@components/SelectionList/ListItem/RadioListItem';
-import type {ListItem} from '@components/SelectionList/types';
-import useLocalize from '@hooks/useLocalize';
+import WorkspaceMemberRoleList from '@components/WorkspaceMemberRoleList';
 import useOnyx from '@hooks/useOnyx';
-import useThemeStyles from '@hooks/useThemeStyles';
 import useViewportOffsetTop from '@hooks/useViewportOffsetTop';
 import {setWorkspaceInviteRoleDraft} from '@libs/actions/Policy/Member';
 import Navigation from '@libs/Navigation/Navigation';
 import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types';
 import type {SettingsNavigatorParamList} from '@libs/Navigation/types';
-import {goBackFromInvalidPolicy, isControlPolicy} from '@libs/PolicyUtils';
+import {goBackFromInvalidPolicy} from '@libs/PolicyUtils';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type SCREENS from '@src/SCREENS';
@@ -24,55 +17,15 @@ import AccessOrNotFoundWrapper from './AccessOrNotFoundWrapper';
 import withPolicyAndFullscreenLoading from './withPolicyAndFullscreenLoading';
 import type {WithPolicyAndFullscreenLoadingProps} from './withPolicyAndFullscreenLoading';
 
-type ListItemType = ListItem<ValueOf<typeof CONST.POLICY.ROLE>> & {
-    value: ValueOf<typeof CONST.POLICY.ROLE>;
-    text: string;
-    alternateText: string;
-    isSelected: boolean;
-};
-
 type WorkspaceInviteMessageRolePageProps = WithPolicyAndFullscreenLoadingProps & PlatformStackScreenProps<SettingsNavigatorParamList, typeof SCREENS.WORKSPACE.INVITE_MESSAGE_ROLE>;
 
 function WorkspaceInviteMessageRolePage({policy, route}: WorkspaceInviteMessageRolePageProps) {
-    const styles = useThemeStyles();
-    const {translate} = useLocalize();
     const [role = CONST.POLICY.ROLE.USER, roleResult] = useOnyx(`${ONYXKEYS.COLLECTION.WORKSPACE_INVITE_ROLE_DRAFT}${route.params.policyID}`, {
         canBeMissing: true,
     });
     const viewportOffsetTop = useViewportOffsetTop();
     const isOnyxLoading = isLoadingOnyxValue(roleResult);
 
-    const roleItems: ListItemType[] = useMemo(() => {
-        const items: ListItemType[] = [
-            {
-                value: CONST.POLICY.ROLE.ADMIN,
-                text: translate('common.admin'),
-                alternateText: translate('workspace.common.adminAlternateText'),
-                isSelected: role === CONST.POLICY.ROLE.ADMIN,
-                keyForList: CONST.POLICY.ROLE.ADMIN,
-            },
-            {
-                value: CONST.POLICY.ROLE.AUDITOR,
-                text: translate('common.auditor'),
-                alternateText: translate('workspace.common.auditorAlternateText'),
-                isSelected: role === CONST.POLICY.ROLE.AUDITOR,
-                keyForList: CONST.POLICY.ROLE.AUDITOR,
-            },
-            {
-                value: CONST.POLICY.ROLE.USER,
-                text: translate('common.member'),
-                alternateText: translate('workspace.common.memberAlternateText'),
-                isSelected: role === CONST.POLICY.ROLE.USER,
-                keyForList: CONST.POLICY.ROLE.USER,
-            },
-        ];
-
-        if (!isControlPolicy(policy)) {
-            return items.filter((item) => item.value !== CONST.POLICY.ROLE.AUDITOR);
-        }
-        return items;
-    }, [role, translate, policy]);
-
     return (
         <AccessOrNotFoundWrapper
             policyID={route.params.policyID}
@@ -85,27 +38,18 @@ function WorkspaceInviteMessageRolePage({policy, route}: WorkspaceInviteMessageR
                 shouldEnableMaxHeight
                 style={{marginTop: viewportOffsetTop}}
             >
-                <HeaderWithBackButton
-                    title={translate('common.role')}
-                    onBackButtonPress={() => Navigation.goBack(route.params.backTo)}
+                <WorkspaceMemberRoleList
+                    role={role}
+                    policy={policy}
+                    isLoading={isOnyxLoading}
+                    onSelectRole={({value}) => {
+                        setWorkspaceInviteRoleDraft(route.params.policyID, value);
+                        Navigation.setNavigationActionToMicrotaskQueue(() => {
+                            Navigation.goBack(route.params.backTo);
+                        });
+                    }}
+                    navigateBackTo={route.params.backTo}
                 />
-                {!isOnyxLoading && (
-                    <View style={[styles.containerWithSpaceBetween, styles.pointerEventsBoxNone]}>
-                        <SelectionList
-                            data={roleItems}
-                            ListItem={RadioListItem}
-                            onSelectRow={({value}: ListItemType) => {
-                                setWorkspaceInviteRoleDraft(route.params.policyID, value);
-                                Navigation.setNavigationActionToMicrotaskQueue(() => {
-                                    Navigation.goBack(route.params.backTo);
-                                });
-                            }}
-                            shouldSingleExecuteRowSelect
-                            initiallyFocusedItemKey={roleItems.find((item) => item.isSelected)?.keyForList}
-                            addBottomSafeAreaPadding
-                        />
-                    </View>
-                )}
             </ScreenWrapper>
         </AccessOrNotFoundWrapper>
     );

src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx

@@ -53,18 +53,9 @@ import NotFoundPage from '@pages/ErrorPage/NotFoundPage';
 import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper';
 import type {WithPolicyAndFullscreenLoadingProps} from '@pages/workspace/withPolicyAndFullscreenLoading';
 import withPolicyAndFullscreenLoading from '@pages/workspace/withPolicyAndFullscreenLoading';
-import type {ListItemType} from '@pages/workspace/WorkspaceMemberRoleSelectionModal';
-import WorkspaceMemberDetailsRoleSelectionModal from '@pages/workspace/WorkspaceMemberRoleSelectionModal';
 import variables from '@styles/variables';
 import {setIssueNewCardStepAndData} from '@userActions/Card';
-import {
-    clearWorkspaceOwnerChangeFlow,
-    isApprover as isApproverUserAction,
-    openPolicyMemberProfilePage,
-    removeMembers,
-    requestWorkspaceOwnerChange,
-    updateWorkspaceMembersRole,
-} from '@userActions/Policy/Member';
+import {clearWorkspaceOwnerChangeFlow, isApprover as isApproverUserAction, openPolicyMemberProfilePage, removeMembers, requestWorkspaceOwnerChange} from '@userActions/Policy/Member';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
@@ -98,7 +89,6 @@ function WorkspaceMemberDetailsPage({personalDetails, policy, route}: WorkspaceM
     const expensifyCardSettings = useExpensifyCardFeeds(policyID);
 
     const [isRemoveMemberConfirmModalVisible, setIsRemoveMemberConfirmModalVisible] = useState(false);
-    const [isRoleSelectionModalVisible, setIsRoleSelectionModalVisible] = useState(false);
 
     const accountID = Number(route.params.accountID);
     const memberLogin = personalDetails?.[accountID]?.login ?? '';
@@ -191,37 +181,6 @@ function WorkspaceMemberDetailsPage({personalDetails, policy, route}: WorkspaceM
         });
     }, [policy, memberLogin, details.login, isReimburser, translate, displayName, policyOwnerDisplayName]);
 
-    const roleItems: ListItemType[] = useMemo(() => {
-        const items: ListItemType[] = [
-            {
-                value: CONST.POLICY.ROLE.ADMIN,
-                text: translate('common.admin'),
-                alternateText: translate('workspace.common.adminAlternateText'),
-                isSelected: member?.role === CONST.POLICY.ROLE.ADMIN,
-                keyForList: CONST.POLICY.ROLE.ADMIN,
-            },
-            {
-                value: CONST.POLICY.ROLE.AUDITOR,
-                text: translate('common.auditor'),
-                alternateText: translate('workspace.common.auditorAlternateText'),
-                isSelected: member?.role === CONST.POLICY.ROLE.AUDITOR,
-                keyForList: CONST.POLICY.ROLE.AUDITOR,
-            },
-            {
-                value: CONST.POLICY.ROLE.USER,
-                text: translate('common.member'),
-                alternateText: translate('workspace.common.memberAlternateText'),
-                isSelected: member?.role === CONST.POLICY.ROLE.USER,
-                keyForList: CONST.POLICY.ROLE.USER,
-            },
-        ];
-
-        if (isControlPolicy(policy)) {
-            return items;
-        }
-        return member?.role === CONST.POLICY.ROLE.AUDITOR ? items : items.filter((item) => item.value !== CONST.POLICY.ROLE.AUDITOR);
-    }, [member?.role, translate, policy]);
-
     useEffect(() => {
         if (!prevMember || prevMember?.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE || member?.pendingAction !== CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE) {
             return;
@@ -329,20 +288,6 @@ function WorkspaceMemberDetailsPage({personalDetails, policy, route}: WorkspaceM
         Navigation.navigate(ROUTES.WORKSPACE_EXPENSIFY_CARD_ISSUE_NEW.getRoute(policyID, activeRoute));
     }, [accountID, hasMultipleFeeds, memberLogin, policyID, isAccountLocked, showLockedAccountModal]);
 
-    const openRoleSelectionModal = useCallback(() => {
-        setIsRoleSelectionModalVisible(true);
-    }, []);
-
-    const changeRole = useCallback(
-        ({value}: ListItemType) => {
-            setIsRoleSelectionModalVisible(false);
-            if (value !== member?.role) {
-                updateWorkspaceMembersRole(policyID, [memberLogin], [accountID], value);
-            }
-        },
-        [accountID, member?.role, memberLogin, policyID],
-    );
-
     const startChangeOwnershipFlow = useCallback(() => {
         clearWorkspaceOwnerChangeFlow(policyID);
         requestWorkspaceOwnerChange(policyID, currentUserPersonalDetails.accountID, currentUserPersonalDetails.login ?? '');
@@ -447,7 +392,7 @@ function WorkspaceMemberDetailsPage({personalDetails, policy, route}: WorkspaceM
                                 title={translate(`workspace.common.roleName`, {role: member?.role})}
                                 description={translate('common.role')}
                                 shouldShowRightIcon
-                                onPress={openRoleSelectionModal}
+                                onPress={() => Navigation.navigate(ROUTES.WORKSPACE_MEMBER_DETAILS_ROLE.getRoute(policyID, accountID))}
                             />
                             {isControlPolicy(policy) && (
                                 <>
@@ -476,12 +421,6 @@ function WorkspaceMemberDetailsPage({personalDetails, policy, route}: WorkspaceM
                                 onPress={navigateToProfile}
                                 shouldShowRightIcon
                             />
-                            <WorkspaceMemberDetailsRoleSelectionModal
-                                isVisible={isRoleSelectionModalVisible}
-                                items={roleItems}
-                                onRoleChange={changeRole}
-                                onClose={() => setIsRoleSelectionModalVisible(false)}
-                            />
                             {shouldShowCardsSection && (
                                 <>
                                     <View style={[styles.ph5, styles.pv3]}>