Revert - #36409 "Fix: three not found view"

src/libs/Navigation/Navigation.ts

@@ -13,7 +13,6 @@ 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';
@@ -62,11 +61,6 @@ 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.
@@ -369,7 +363,6 @@ export default {
     setShouldPopAllStateOnUP,
     navigate,
     setParams,
-    dismissRHP,
     dismissModal,
     dismissModalWithReport,
     isActiveRoute,

src/pages/ErrorPage/NotFoundPage.tsx

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

src/pages/workspace/AdminPolicyAccessOrNotFoundWrapper.tsx

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

src/pages/workspace/PaidPolicyAccessOrNotFoundWrapper.tsx

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

src/pages/workspace/WorkspaceInitialPage.tsx

@@ -262,20 +262,6 @@ function WorkspaceInitialPage({policyDraft, policy: policyProp, reimbursementAcc
         // 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

@@ -96,9 +96,6 @@ function WorkspaceInviteMessagePage({
             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,13 +7,16 @@ 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';
@@ -44,7 +47,6 @@ 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 = {
     /** Session info for the currently logged in user. */
@@ -57,6 +59,7 @@ type WorkspaceMembersPageProps = WithPolicyAndFullscreenLoadingProps &
     WithCurrentUserPersonalDetailsProps &
     WorkspaceMembersPageOnyxProps &
     StackScreenProps<WorkspacesCentralPaneNavigatorParamList, typeof SCREENS.WORKSPACE.MEMBERS>;
+
 /**
  * Inverts an object, equivalent of _.invert
  */
@@ -68,7 +71,7 @@ function invertObject(object: Record<string, string>): Record<string, string> {
 
 type MemberOption = Omit<ListItem, 'accountID'> & {accountID: number};
 
-function WorkspaceMembersPage({personalDetails, invitedEmailsToAccountIDsDraft, route, policy, session, currentUserPersonalDetails}: WorkspaceMembersPageProps) {
+function WorkspaceMembersPage({personalDetails, invitedEmailsToAccountIDsDraft, route, policy, session, currentUserPersonalDetails, isLoadingReportData = true}: WorkspaceMembersPageProps) {
     const policyMemberEmailsToAccountIDs = useMemo(() => PolicyUtils.getMemberAccountIDsForWorkspace(policy?.employeeList), [policy?.employeeList]);
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
@@ -531,63 +534,71 @@ function WorkspaceMembersPage({personalDetails, invitedEmailsToAccountIDsDraft,
     };
 
     return (
-        <WorkspacePageWithSections
-            headerText={translate('workspace.common.members')}
-            route={route}
-            guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_MEMBERS}
-            headerContent={!isSmallScreenWidth && getHeaderButtons()}
-            icon={Illustrations.ReceiptWrangler}
+        <ScreenWrapper
+            includeSafeAreaPaddingBottom={false}
+            style={[styles.defaultModalContainer]}
             testID={WorkspaceMembersPage.displayName}
-            shouldShowLoading={false}
             shouldShowOfflineIndicatorInWideScreen
-            shouldShowNonAdmin
         >
-            {() => (
-                <>
-                    {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();
-                            });
-                        }}
+            <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]}
                     />
-
-                    <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>
+                </View>
+            </FullPageNotFoundView>
+        </ScreenWrapper>
     );
 }
 

src/pages/workspace/WorkspacePageWithSections.tsx

@@ -82,12 +82,6 @@ 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;
     };
@@ -118,8 +112,6 @@ function WorkspacePageWithSections({
     shouldShowLoading = true,
     shouldShowOfflineIndicatorInWideScreen = false,
     shouldShowNonAdmin = false,
-    headerContent,
-    testID,
     shouldShowNotFoundPage = false,
     isLoading: isPageLoading = false,
 }: WorkspacePageWithSectionsProps) {
@@ -168,7 +160,7 @@ function WorkspacePageWithSections({
             includeSafeAreaPaddingBottom={false}
             shouldEnablePickerAvoiding={false}
             shouldEnableMaxHeight
-            testID={testID ?? WorkspacePageWithSections.displayName}
+            testID={WorkspacePageWithSections.displayName}
             shouldShowOfflineIndicatorInWideScreen={shouldShowOfflineIndicatorInWideScreen && !shouldShow}
         >
             <FullPageNotFoundView
@@ -185,9 +177,7 @@ 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]} />
                 ) : (