Fix: three not found view

src/libs/Navigation/Navigation.ts

@@ -13,6 +13,7 @@ import type {Report} from '@src/types/onyx';
 import type {EmptyObject} from '@src/types/utils/EmptyObject';
 import originalDismissModal from './dismissModal';
 import originalDismissModalWithReport from './dismissModalWithReport';
+import originalDismissRHP from './dismissRHP';
 import originalGetTopmostReportActionId from './getTopmostReportActionID';
 import originalGetTopmostReportId from './getTopmostReportId';
 import linkingConfig from './linkingConfig';
@@ -61,6 +62,11 @@ const dismissModal = (reportID?: string, ref = navigationRef) => {
     originalDismissModalWithReport({reportID, ...report}, ref);
 };
 
+// Re-exporting the dismissRHP here to fill in default value for navigationRef. The dismissRHP isn't defined in this file to avoid cyclic dependencies.
+const dismissRHP = (ref = navigationRef) => {
+    originalDismissRHP(ref);
+};
+
 // Re-exporting the dismissModalWithReport here to fill in default value for navigationRef. The dismissModalWithReport isn't defined in this file to avoid cyclic dependencies.
 // This method is needed because it allows to dismiss the modal and then open the report. Within this method is checked whether the report belongs to a specific workspace. Sometimes the report we want to check, hasn't been added to the Onyx yet.
 // Then we can pass the report as a param without getting it from the Onyx.
@@ -363,6 +369,7 @@ export default {
     setShouldPopAllStateOnUP,
     navigate,
     setParams,
+    dismissRHP,
     dismissModal,
     dismissModalWithReport,
     isActiveRoute,

src/libs/Navigation/dismissRHP.ts

@@ -0,0 +1,25 @@
+import type {NavigationContainerRef} from '@react-navigation/native';
+import {StackActions} from '@react-navigation/native';
+import NAVIGATORS from '@src/NAVIGATORS';
+import type {RootStackParamList} from './types';
+
+// This function is in a separate file than Navigation.ts to avoid cyclic dependency.
+
+/**
+ * Dismisses the RHP modal stack if there is any
+ *
+ * @param targetReportID - The reportID to navigate to after dismissing the modal
+ */
+function dismissRHP(navigationRef: NavigationContainerRef<RootStackParamList>) {
+    if (!navigationRef.isReady()) {
+        return;
+    }
+
+    const state = navigationRef.getState();
+    const lastRoute = state.routes.at(-1);
+    if (lastRoute?.name === NAVIGATORS.RIGHT_MODAL_NAVIGATOR) {
+        navigationRef.dispatch({...StackActions.pop(), target: state.key});
+    }
+}
+
+export default dismissRHP;

src/pages/ErrorPage/NotFoundPage.tsx

@@ -4,15 +4,18 @@ import ScreenWrapper from '@components/ScreenWrapper';
 
 type NotFoundPageProps = {
     onBackButtonPress?: () => void;
+
+    shouldForceFullScreen?: boolean;
 };
 
 // eslint-disable-next-line rulesdir/no-negated-variables
-function NotFoundPage({onBackButtonPress}: NotFoundPageProps) {
+function NotFoundPage({onBackButtonPress, shouldForceFullScreen}: NotFoundPageProps) {
     return (
         <ScreenWrapper testID={NotFoundPage.displayName}>
             <FullPageNotFoundView
                 shouldShow
                 onBackButtonPress={onBackButtonPress}
+                shouldForceFullScreen={shouldForceFullScreen}
             />
         </ScreenWrapper>
     );

src/pages/workspace/AdminPolicyAccessOrNotFoundWrapper.tsx

@@ -50,7 +50,12 @@ function AdminPolicyAccessOrNotFoundComponent(props: AdminPolicyAccessOrNotFound
     }
 
     if (shouldShowNotFoundPage) {
-        return <NotFoundPage onBackButtonPress={() => Navigation.goBack(ROUTES.WORKSPACE_PROFILE.getRoute(props.policyID))} />;
+        return (
+            <NotFoundPage
+                onBackButtonPress={() => Navigation.goBack(ROUTES.WORKSPACE_PROFILE.getRoute(props.policyID))}
+                shouldForceFullScreen
+            />
+        );
     }
 
     return typeof props.children === 'function' ? props.children(props) : props.children;

src/pages/workspace/PaidPolicyAccessOrNotFoundWrapper.tsx

@@ -50,7 +50,12 @@ function PaidPolicyAccessOrNotFoundComponent(props: PaidPolicyAccessOrNotFoundCo
     }
 
     if (shouldShowNotFoundPage) {
-        return <NotFoundPage onBackButtonPress={() => Navigation.goBack(ROUTES.WORKSPACE_PROFILE.getRoute(props.policyID))} />;
+        return (
+            <NotFoundPage
+                onBackButtonPress={() => Navigation.goBack(ROUTES.WORKSPACE_PROFILE.getRoute(props.policyID))}
+                shouldForceFullScreen
+            />
+        );
     }
 
     return typeof props.children === 'function' ? props.children(props) : props.children;

src/pages/workspace/WorkspaceInitialPage.tsx

@@ -247,6 +247,20 @@ function WorkspaceInitialPage({policyDraft, policy: policyProp, policyMembers, r
         // We check isPendingDelete for both policy and prevPolicy to prevent the NotFound view from showing right after we delete the workspace
         (PolicyUtils.isPendingDeletePolicy(policy) && PolicyUtils.isPendingDeletePolicy(prevPolicy));
 
+    // We are checking if the user can access the route.
+    // If user can't access the route, we are dismissing any modals that are open when the NotFound view is shown
+    const canAccessRoute = activeRoute && menuItems.some((item) => item.routeName === activeRoute);
+
+    useEffect(() => {
+        if (!shouldShowNotFoundPage && canAccessRoute) {
+            return;
+        }
+        // We are dismissing any modals that are open when the NotFound view is shown
+        Navigation.isNavigationReady().then(() => {
+            Navigation.dismissRHP();
+        });
+    }, [canAccessRoute, policy, shouldShowNotFoundPage]);
+
     const policyAvatar = useMemo(() => {
         if (!policy) {
             return {source: Expensicons.ExpensifyAppIcon, name: CONST.WORKSPACE_SWITCHER.NAME, type: CONST.ICON_TYPE_AVATAR};

src/pages/workspace/WorkspaceInviteMessagePage.tsx

@@ -81,6 +81,9 @@ function WorkspaceInviteMessagePage({workspaceInviteMessageDraft, invitedEmailsT
             setWelcomeNote(parser.htmlToMarkdown(getDefaultWelcomeNote()));
             return;
         }
+        if (isEmptyObject(policy)) {
+            return;
+        }
         Navigation.goBack(ROUTES.WORKSPACE_INVITE.getRoute(route.params.policyID), true);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);

src/pages/workspace/WorkspaceMembersPage.tsx

@@ -7,16 +7,13 @@ import {InteractionManager, View} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
 import {withOnyx} from 'react-native-onyx';
 import Badge from '@components/Badge';
-import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView';
 import Button from '@components/Button';
 import ButtonWithDropdownMenu from '@components/ButtonWithDropdownMenu';
 import type {DropdownOption, WorkspaceMemberBulkActionType} from '@components/ButtonWithDropdownMenu/types';
 import ConfirmModal from '@components/ConfirmModal';
-import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import * as Expensicons from '@components/Icon/Expensicons';
 import * as Illustrations from '@components/Icon/Illustrations';
 import MessagesRow from '@components/MessagesRow';
-import ScreenWrapper from '@components/ScreenWrapper';
 import SelectionList from '@components/SelectionList';
 import TableListItem from '@components/SelectionList/TableListItem';
 import type {ListItem, SelectionListHandle} from '@components/SelectionList/types';
@@ -47,6 +44,7 @@ import type {Errors, PendingAction} from '@src/types/onyx/OnyxCommon';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
 import type {WithPolicyAndFullscreenLoadingProps} from './withPolicyAndFullscreenLoading';
 import withPolicyAndFullscreenLoading from './withPolicyAndFullscreenLoading';
+import WorkspacePageWithSections from './WorkspacePageWithSections';
 
 type WorkspaceMembersPageOnyxProps = {
     /** Personal details of all users */
@@ -75,16 +73,7 @@ function invertObject(object: Record<string, string>): Record<string, string> {
 
 type MemberOption = Omit<ListItem, 'accountID'> & {accountID: number};
 
-function WorkspaceMembersPage({
-    policyMembers,
-    personalDetails,
-    invitedEmailsToAccountIDsDraft,
-    route,
-    policy,
-    session,
-    currentUserPersonalDetails,
-    isLoadingReportData = true,
-}: WorkspaceMembersPageProps) {
+function WorkspaceMembersPage({policyMembers, personalDetails, invitedEmailsToAccountIDsDraft, route, policy, session, currentUserPersonalDetails}: WorkspaceMembersPageProps) {
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
     const [selectedEmployees, setSelectedEmployees] = useState<number[]>([]);
@@ -544,71 +533,63 @@ function WorkspaceMembersPage({
     };
 
     return (
-        <ScreenWrapper
-            includeSafeAreaPaddingBottom={false}
-            style={[styles.defaultModalContainer]}
+        <WorkspacePageWithSections
+            headerText={translate('workspace.common.members')}
+            route={route}
+            guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_MEMBERS}
+            headerContent={!isSmallScreenWidth && getHeaderButtons()}
+            icon={Illustrations.ReceiptWrangler}
             testID={WorkspaceMembersPage.displayName}
+            shouldShowLoading={false}
             shouldShowOfflineIndicatorInWideScreen
+            shouldShowNonAdmin
         >
-            <FullPageNotFoundView
-                shouldShow={(isEmptyObject(policy) && !isLoadingReportData) || PolicyUtils.isPendingDeletePolicy(policy)}
-                subtitleKey={isEmptyObject(policy) ? undefined : 'workspace.common.notAuthorized'}
-                onBackButtonPress={PolicyUtils.goBackFromInvalidPolicy}
-                onLinkPress={PolicyUtils.goBackFromInvalidPolicy}
-            >
-                <HeaderWithBackButton
-                    title={translate('workspace.common.members')}
-                    icon={Illustrations.ReceiptWrangler}
-                    onBackButtonPress={() => {
-                        Navigation.goBack();
-                    }}
-                    shouldShowBackButton={isSmallScreenWidth}
-                    guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_MEMBERS}
-                >
-                    {!isSmallScreenWidth && getHeaderButtons()}
-                </HeaderWithBackButton>
-                {isSmallScreenWidth && <View style={[styles.pl5, styles.pr5]}>{getHeaderButtons()}</View>}
-                <ConfirmModal
-                    danger
-                    title={translate('workspace.people.removeMembersTitle')}
-                    isVisible={removeMembersConfirmModalVisible}
-                    onConfirm={removeUsers}
-                    onCancel={() => setRemoveMembersConfirmModalVisible(false)}
-                    prompt={translate('workspace.people.removeMembersPrompt')}
-                    confirmText={translate('common.remove')}
-                    cancelText={translate('common.cancel')}
-                    onModalHide={() => {
-                        InteractionManager.runAfterInteractions(() => {
-                            if (!textInputRef.current) {
-                                return;
-                            }
-                            textInputRef.current.focus();
-                        });
-                    }}
-                />
-                <View style={[styles.w100, styles.flex1]}>
-                    <SelectionList
-                        ref={selectionListRef}
-                        canSelectMultiple={isPolicyAdmin}
-                        sections={[{data, isDisabled: false}]}
-                        ListItem={TableListItem}
-                        disableKeyboardShortcuts={removeMembersConfirmModalVisible}
-                        headerMessage={getHeaderMessage()}
-                        headerContent={getHeaderContent()}
-                        onSelectRow={openMemberDetails}
-                        onCheckboxPress={(item) => toggleUser(item.accountID)}
-                        onSelectAll={() => toggleAllUsers(data)}
-                        onDismissError={dismissError}
-                        showLoadingPlaceholder={isLoading}
-                        showScrollIndicator
-                        shouldPreventDefaultFocusOnSelectRow={!DeviceCapabilities.canUseTouchScreen()}
-                        textInputRef={textInputRef}
-                        customListHeader={getCustomListHeader()}
-                        listHeaderWrapperStyle={[styles.ph9, styles.pv3, styles.pb5]}
+            {() => (
+                <>
+                    {isSmallScreenWidth && <View style={[styles.pl5, styles.pr5]}>{getHeaderButtons()}</View>}
+                    <ConfirmModal
+                        danger
+                        title={translate('workspace.people.removeMembersTitle')}
+                        isVisible={removeMembersConfirmModalVisible}
+                        onConfirm={removeUsers}
+                        onCancel={() => setRemoveMembersConfirmModalVisible(false)}
+                        prompt={translate('workspace.people.removeMembersPrompt')}
+                        confirmText={translate('common.remove')}
+                        cancelText={translate('common.cancel')}
+                        onModalHide={() => {
+                            InteractionManager.runAfterInteractions(() => {
+                                if (!textInputRef.current) {
+                                    return;
+                                }
+                                textInputRef.current.focus();
+                            });
+                        }}
                     />
-                </View>
-            </FullPageNotFoundView>
-        </ScreenWrapper>
+
+                    <View style={[styles.w100, styles.flex1]}>
+                        <SelectionList
+                            ref={selectionListRef}
+                            canSelectMultiple={isPolicyAdmin}
+                            sections={[{data, isDisabled: false}]}
+                            ListItem={TableListItem}
+                            disableKeyboardShortcuts={removeMembersConfirmModalVisible}
+                            headerMessage={getHeaderMessage()}
+                            headerContent={getHeaderContent()}
+                            onSelectRow={openMemberDetails}
+                            onCheckboxPress={(item) => toggleUser(item.accountID)}
+                            onSelectAll={() => toggleAllUsers(data)}
+                            onDismissError={dismissError}
+                            showLoadingPlaceholder={isLoading}
+                            showScrollIndicator
+                            shouldPreventDefaultFocusOnSelectRow={!DeviceCapabilities.canUseTouchScreen()}
+                            textInputRef={textInputRef}
+                            customListHeader={getCustomListHeader()}
+                            listHeaderWrapperStyle={[styles.ph9, styles.pv3, styles.pb5]}
+                        />
+                    </View>
+                </>
+            )}
+        </WorkspacePageWithSections>
     );
 }
 

src/pages/workspace/WorkspacePageWithSections.tsx

@@ -82,6 +82,12 @@ type WorkspacePageWithSectionsProps = WithPolicyAndFullscreenLoadingProps &
          * */
         icon?: IconAsset;
 
+        /** Content to be added to the header */
+        headerContent?: ReactNode;
+
+        /** TestID of the component */
+        testID?: string;
+
         /** Whether the page is loading, example any other API call in progres */
         isLoading?: boolean;
     };
@@ -112,6 +118,8 @@ function WorkspacePageWithSections({
     shouldShowLoading = true,
     shouldShowOfflineIndicatorInWideScreen = false,
     shouldShowNonAdmin = false,
+    headerContent,
+    testID,
     shouldShowNotFoundPage = false,
     isLoading: isPageLoading = false,
 }: WorkspacePageWithSectionsProps) {
@@ -160,7 +168,7 @@ function WorkspacePageWithSections({
             includeSafeAreaPaddingBottom={false}
             shouldEnablePickerAvoiding={false}
             shouldEnableMaxHeight
-            testID={WorkspacePageWithSections.displayName}
+            testID={testID ?? WorkspacePageWithSections.displayName}
             shouldShowOfflineIndicatorInWideScreen={shouldShowOfflineIndicatorInWideScreen && !shouldShow}
         >
             <FullPageNotFoundView
@@ -177,7 +185,9 @@ function WorkspacePageWithSections({
                     onBackButtonPress={() => Navigation.goBack(backButtonRoute)}
                     icon={icon ?? undefined}
                     style={styles.headerBarDesktopHeight}
-                />
+                >
+                    {headerContent}
+                </HeaderWithBackButton>
                 {(isLoading || firstRender.current) && shouldShowLoading && isFocused ? (
                     <FullScreenLoadingIndicator style={[styles.flex1, styles.pRelative]} />
                 ) : (