[$250] Workspace settings page can be accessible after workspace has been deleted offline

[nlemma]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: 9.3.0-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from BrowserStack: https://github.com/Expensify/Expensify/issues/509208
Issue reported by: Applause Internal Team
Bug source: Regression TC Execution
Device used: Windows 10 - Chrome

Action Performed:

1. Navigate to staging.new.expensify.com
2. Create a workspace
3. Go offline
4. Go to any workspace page (i.e. workspace members, invite members, workspace invite message) and copy the URL in browser
5. Delete that workspace
6. Paste and send the URL in any chat
7. Click on the URL in the chat

Expected Result:

The not found page gets displayed.

Actual Result:

Workspace settings page is accessible after deletion while offline

Workaround:

Unknown

Platforms:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari

Screenshots/Videos

Bug7038187_1766943862719.Recording_93.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022011210546596342943
• Upwork Job ID: 2011210546596342943
• Last Price Increase: 2026-01-28

Issue Owner

Current Issue Owner: @AndrewGable

[melvin-bot]

Triggered auto assignment to @JmillsExpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[nyomanjyotisa]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Workspace settings page can be accessible after workspace has been deleted offline

What is the root cause of that problem?

The WorkspaceMembersPage are not wrapped with AccessOrNotFoundWrapper, which means they don't check if the policy has pendingAction: DELETE before rendering

App/src/pages/workspace/WorkspaceMembersPage.tsx

Lines 755 to 850 in 9bc39b5

	return (
	<WorkspacePageWithSections
	headerText={selectionModeHeader ? translate('common.selectMultiple') : translate('workspace.common.members')}
	route={route}
	icon={!selectionModeHeader ? illustrations.ReceiptWrangler : undefined}
	headerContent={!shouldUseNarrowLayout && getHeaderButtons()}
	testID="WorkspaceMembersPage"
	shouldShowLoading={false}
	shouldUseHeadlineHeader={!selectionModeHeader}
	shouldShowOfflineIndicatorInWideScreen
	shouldShowNonAdmin
	onBackButtonPress={() => {
	if (isMobileSelectionModeEnabled) {
	setSelectedEmployees([]);
	turnOffMobileSelectionMode();
	return;
	}
	Navigation.popToSidebar();
	}}
	>
	{() => (
	<>
	{shouldUseNarrowLayout && <View style={[styles.pl5, styles.pr5]}>{getHeaderButtons()}</View>}
	<ConfirmModal
	isVisible={isOfflineModalVisible}
	onConfirm={() => setIsOfflineModalVisible(false)}
	title={translate('common.youAppearToBeOffline')}
	prompt={translate('common.thisFeatureRequiresInternet')}
	confirmText={translate('common.buttonConfirm')}
	shouldShowCancelButton={false}
	onCancel={() => setIsOfflineModalVisible(false)}
	shouldHandleNavigationBack
	/>
	<ConfirmModal
	danger
	title={translate('workspace.people.removeMembersTitle', {count: selectedEmployees.length})}
	isVisible={removeMembersConfirmModalVisible}
	onConfirm={removeUsers}
	onCancel={() => setRemoveMembersConfirmModalVisible(false)}
	prompt={confirmModalPrompt}
	confirmText={translate('common.remove')}
	cancelText={translate('common.cancel')}
	onModalHide={() => {
	// eslint-disable-next-line @typescript-eslint/no-deprecated
	InteractionManager.runAfterInteractions(() => {
	if (!textInputRef.current) {
	return;
	}
	textInputRef.current.focus();
	});
	}}
	/>
	<DecisionModal
	title={translate('common.downloadFailedTitle')}
	prompt={translate('common.downloadFailedDescription')}
	isSmallScreenWidth={isSmallScreenWidth}
	onSecondOptionSubmit={() => setIsDownloadFailureModalVisible(false)}
	secondOptionText={translate('common.buttonConfirm')}
	isVisible={isDownloadFailureModalVisible}
	onClose={() => setIsDownloadFailureModalVisible(false)}
	/>
	<SelectionListWithModal
	data={filteredData}
	ref={selectionListRef}
	ListItem={TableListItem}
	onSelectRow={openMemberDetails}
	selectedItems={selectedEmployees}
	canSelectMultiple={canSelectMultiple}
	turnOnSelectionModeOnLongPress={isPolicyAdmin}
	onSelectAll={filteredData.length > 0 ? () => toggleAllUsers(filteredData) : undefined}
	style={{listHeaderWrapperStyle: [styles.ph9, styles.pv3, styles.pb5], listItemTitleContainerStyles: shouldUseNarrowLayout ? undefined : [styles.pr3]}}
	onTurnOnSelectionMode={(item) => item && toggleUser(item.login)}
	disableKeyboardShortcuts={removeMembersConfirmModalVisible}
	shouldPreventDefaultFocusOnSelectRow={!canUseTouchScreen()}
	onCheckboxPress={(item) => toggleUser(item.login)}
	shouldUseDefaultRightHandSideCheckmark={false}
	shouldSingleExecuteRowSelect={!isPolicyAdmin}
	customListHeader={getCustomListHeader()}
	customListHeaderContent={headerContent}
	textInputOptions={textInputOptions}
	showLoadingPlaceholder={isLoading}
	onDismissError={dismissError}
	showListEmptyContent={false}
	showScrollIndicator={false}
	shouldUseUserSkeletonView
	shouldHeaderBeInsideList
	shouldShowRightCaret
	/>
	</>
	)}
	</WorkspacePageWithSections>
	);
	}
	export default withPolicyAndFullscreenLoading(WorkspaceMembersPage);

Other workspace pages like WorkspaceInvitePage already use this wrapper

App/src/pages/workspace/WorkspaceInvitePage.tsx

Lines 236 to 240 in 9bc39b5

	<AccessOrNotFoundWrapper
	policyID={route.params.policyID}
	accessVariants={[CONST.POLICY.ACCESS_VARIANTS.ADMIN]}
	fullPageNotFoundViewProps={{subtitleKey: isEmptyObject(policy) ? undefined : 'workspace.common.notAuthorized', onLinkPress: goBackFromInvalidPolicy}}
	>

What changes do you think we should make in order to solve the problem?

Wrap WorkspaceMembersPage with AccessOrNotFoundWrapper

return (
    <AccessOrNotFoundWrapper
        policyID={route.params.policyID}
    >
        <WorkspacePageWithSections
            ...
        >
            ...
        </WorkspacePageWithSections>
    </AccessOrNotFoundWrapper>
);

App/src/pages/workspace/WorkspaceMembersPage.tsx

Lines 755 to 850 in 9bc39b5

	return (
	<WorkspacePageWithSections
	headerText={selectionModeHeader ? translate('common.selectMultiple') : translate('workspace.common.members')}
	route={route}
	icon={!selectionModeHeader ? illustrations.ReceiptWrangler : undefined}
	headerContent={!shouldUseNarrowLayout && getHeaderButtons()}
	testID="WorkspaceMembersPage"
	shouldShowLoading={false}
	shouldUseHeadlineHeader={!selectionModeHeader}
	shouldShowOfflineIndicatorInWideScreen
	shouldShowNonAdmin
	onBackButtonPress={() => {
	if (isMobileSelectionModeEnabled) {
	setSelectedEmployees([]);
	turnOffMobileSelectionMode();
	return;
	}
	Navigation.popToSidebar();
	}}
	>
	{() => (
	<>
	{shouldUseNarrowLayout && <View style={[styles.pl5, styles.pr5]}>{getHeaderButtons()}</View>}
	<ConfirmModal
	isVisible={isOfflineModalVisible}
	onConfirm={() => setIsOfflineModalVisible(false)}
	title={translate('common.youAppearToBeOffline')}
	prompt={translate('common.thisFeatureRequiresInternet')}
	confirmText={translate('common.buttonConfirm')}
	shouldShowCancelButton={false}
	onCancel={() => setIsOfflineModalVisible(false)}
	shouldHandleNavigationBack
	/>
	<ConfirmModal
	danger
	title={translate('workspace.people.removeMembersTitle', {count: selectedEmployees.length})}
	isVisible={removeMembersConfirmModalVisible}
	onConfirm={removeUsers}
	onCancel={() => setRemoveMembersConfirmModalVisible(false)}
	prompt={confirmModalPrompt}
	confirmText={translate('common.remove')}
	cancelText={translate('common.cancel')}
	onModalHide={() => {
	// eslint-disable-next-line @typescript-eslint/no-deprecated
	InteractionManager.runAfterInteractions(() => {
	if (!textInputRef.current) {
	return;
	}
	textInputRef.current.focus();
	});
	}}
	/>
	<DecisionModal
	title={translate('common.downloadFailedTitle')}
	prompt={translate('common.downloadFailedDescription')}
	isSmallScreenWidth={isSmallScreenWidth}
	onSecondOptionSubmit={() => setIsDownloadFailureModalVisible(false)}
	secondOptionText={translate('common.buttonConfirm')}
	isVisible={isDownloadFailureModalVisible}
	onClose={() => setIsDownloadFailureModalVisible(false)}
	/>
	<SelectionListWithModal
	data={filteredData}
	ref={selectionListRef}
	ListItem={TableListItem}
	onSelectRow={openMemberDetails}
	selectedItems={selectedEmployees}
	canSelectMultiple={canSelectMultiple}
	turnOnSelectionModeOnLongPress={isPolicyAdmin}
	onSelectAll={filteredData.length > 0 ? () => toggleAllUsers(filteredData) : undefined}
	style={{listHeaderWrapperStyle: [styles.ph9, styles.pv3, styles.pb5], listItemTitleContainerStyles: shouldUseNarrowLayout ? undefined : [styles.pr3]}}
	onTurnOnSelectionMode={(item) => item && toggleUser(item.login)}
	disableKeyboardShortcuts={removeMembersConfirmModalVisible}
	shouldPreventDefaultFocusOnSelectRow={!canUseTouchScreen()}
	onCheckboxPress={(item) => toggleUser(item.login)}
	shouldUseDefaultRightHandSideCheckmark={false}
	shouldSingleExecuteRowSelect={!isPolicyAdmin}
	customListHeader={getCustomListHeader()}
	customListHeaderContent={headerContent}
	textInputOptions={textInputOptions}
	showLoadingPlaceholder={isLoading}
	onDismissError={dismissError}
	showListEmptyContent={false}
	showScrollIndicator={false}
	shouldUseUserSkeletonView
	shouldHeaderBeInsideList
	shouldShowRightCaret
	/>
	</>
	)}
	</WorkspacePageWithSections>
	);
	}
	export default withPolicyAndFullscreenLoading(WorkspaceMembersPage);

Note: We can do the same thing to another page that has this issue on workspace section, like the WorkspaceOverviewPage

App/src/pages/workspace/WorkspaceOverviewPage.tsx

Lines 526 to 713 in 9bc39b5

	return (
	<WorkspacePageWithSections
	headerText={translate('workspace.common.profile')}
	route={route}
	// When we create a new workspaces, the policy prop will not be set on the first render. Therefore, we have to delay rendering until it has been set in Onyx.
	shouldShowLoading={policy === undefined}
	shouldUseScrollView
	shouldShowOfflineIndicatorInWideScreen
	shouldShowNonAdmin
	icon={illustrationIcons.Building}
	shouldShowNotFoundPage={policy === undefined}
	onBackButtonPress={handleBackButtonPress}
	addBottomSafeAreaPadding
	headerContent={!shouldUseNarrowLayout && getHeaderButtons()}
	modals={modals}
	>
	{(hasVBA?: boolean) => (
	<View style={[styles.flex1, styles.mt3, shouldUseNarrowLayout ? styles.workspaceSectionMobile : styles.workspaceSection]}>
	{shouldUseNarrowLayout && <View style={[styles.pl5, styles.pr5, styles.pb5]}>{getHeaderButtons()}</View>}
	<Section
	isCentralPane
	title=""
	>
	<AvatarWithImagePicker
	onViewPhotoPress={() => {
	if (!policy?.id) {
	return;
	}
	Navigation.navigate(ROUTES.WORKSPACE_AVATAR.getRoute(policy.id));
	}}
	source={policy?.avatarURL ?? ''}
	avatarID={policy?.id}
	size={CONST.AVATAR_SIZE.X_LARGE}
	name={policyName}
	avatarStyle={styles.avatarXLarge}
	enablePreview
	DefaultAvatar={DefaultAvatar}
	type={CONST.ICON_TYPE_WORKSPACE}
	fallbackIcon={expensifyIcons.FallbackWorkspaceAvatar}
	style={[(policy?.errorFields?.avatarURL ?? shouldUseNarrowLayout) ? styles.mb1 : styles.mb3, styles.alignItemsStart, styles.sectionMenuItemTopDescription]}
	editIconStyle={styles.smallEditIconWorkspace}
	isUsingDefaultAvatar={!policy?.avatarURL}
	onImageSelected={(file) => {
	if (!policy?.id) {
	return;
	}
	updateWorkspaceAvatar(policy.id, file as File);
	}}
	onImageRemoved={() => {
	if (!policy?.id) {
	return;
	}
	deleteWorkspaceAvatar(policy.id);
	}}
	editorMaskImage={expensifyIcons.ImageCropSquareMask}
	pendingAction={policy?.pendingFields?.avatarURL}
	errors={policy?.errorFields?.avatarURL}
	onErrorClose={() => {
	if (!policy?.id) {
	return;
	}
	clearAvatarErrors(policy.id);
	}}
	disabled={readOnly}
	disabledStyle={styles.cursorDefault}
	errorRowStyles={styles.mt3}
	/>
	<OfflineWithFeedback pendingAction={policy?.pendingFields?.name}>
	<MenuItemWithTopDescription
	title={policyName}
	titleStyle={styles.workspaceTitleStyle}
	description={translate('workspace.common.workspaceName')}
	shouldShowRightIcon={!readOnly}
	interactive={!readOnly}
	wrapperStyle={[styles.sectionMenuItemTopDescription, shouldUseNarrowLayout ? styles.mt3 : {}]}
	onPress={onPressName}
	shouldBreakWord
	numberOfLinesTitle={0}
	/>
	</OfflineWithFeedback>
	{(!StringUtils.isEmptyString(policy?.description ?? '') || !readOnly || (prevIsPendingDelete && !isPendingDelete)) && (
	<OfflineWithFeedback
	pendingAction={policy?.pendingFields?.description}
	errors={getLatestErrorField(policy ?? {}, CONST.POLICY.COLLECTION_KEYS.DESCRIPTION)}
	onClose={() => {
	if (!policy?.id) {
	return;
	}
	clearPolicyErrorField(policy.id, CONST.POLICY.COLLECTION_KEYS.DESCRIPTION);
	}}
	>
	<MenuItemWithTopDescription
	title={policyDescription}
	description={translate('workspace.editor.descriptionInputLabel')}
	shouldShowRightIcon={!readOnly}
	interactive={!readOnly}
	wrapperStyle={styles.sectionMenuItemTopDescription}
	onPress={onPressDescription}
	shouldRenderAsHTML
	/>
	</OfflineWithFeedback>
	)}
	<OfflineWithFeedback
	pendingAction={policy?.pendingFields?.outputCurrency}
	errors={getLatestErrorField(policy ?? {}, CONST.POLICY.COLLECTION_KEYS.GENERAL_SETTINGS)}
	onClose={() => {
	if (!policy?.id) {
	return;
	}
	clearPolicyErrorField(policy.id, CONST.POLICY.COLLECTION_KEYS.GENERAL_SETTINGS);
	}}
	errorRowStyles={[styles.mt2]}
	>
	<View>
	<MenuItemWithTopDescription
	title={formattedCurrency}
	description={translate('workspace.editor.currencyInputLabel')}
	shouldShowRightIcon={hasVBA ? false : !currencyReadOnly}
	interactive={hasVBA ? false : !currencyReadOnly}
	wrapperStyle={styles.sectionMenuItemTopDescription}
	onPress={onPressCurrency}
	hintText={
	// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
	hasVBA || isBankAccountVerified
	? translate('workspace.editor.currencyInputDisabledText', policyCurrency)
	: translate('workspace.editor.currencyInputHelpText')
	}
	/>
	</View>
	</OfflineWithFeedback>
	{shouldShowAddress && (
	<OfflineWithFeedback pendingAction={policy?.pendingFields?.address}>
	<View>
	<MenuItemWithTopDescription
	title={formattedAddress}
	description={translate('common.companyAddress')}
	shouldShowRightIcon={!readOnly}
	interactive={!readOnly}
	wrapperStyle={styles.sectionMenuItemTopDescription}
	onPress={onPressAddress}
	copyValue={readOnly ? formattedAddress : undefined}
	copyable={readOnly && !!formattedAddress}
	/>
	</View>
	</OfflineWithFeedback>
	)}
	{!readOnly && !!policy?.type && (
	<OfflineWithFeedback pendingAction={policy?.pendingFields?.type}>
	<View>
	<MenuItemWithTopDescription
	title={getUserFriendlyWorkspaceType(policy.type, translate)}
	description={translate('workspace.common.planType')}
	shouldShowRightIcon
	wrapperStyle={styles.sectionMenuItemTopDescription}
	onPress={onPressPlanType}
	/>
	</View>
	</OfflineWithFeedback>
	)}
	</Section>
	{isBetaEnabled(CONST.BETAS.CUSTOM_RULES) ? (
	<Section
	isCentralPane
	title={translate('workspace.editor.policy')}
	titleStyles={[styles.textHeadline, styles.cardSectionTitle, styles.accountSettingsSectionTitle, styles.mb0]}
	subtitle={translate('workspace.rules.customRules.cardSubtitle')}
	subtitleStyles={[styles.mb6]}
	subtitleTextStyles={[styles.textNormal, styles.colorMuted, styles.mr5]}
	containerStyles={shouldUseNarrowLayout ? styles.p5 : styles.p8}
	>
	<OfflineWithFeedback pendingAction={policy?.pendingFields?.customRules}>
	<MenuItemWithTopDescription
	title={policy?.customRules ?? ''}
	description={translate('workspace.editor.policy')}
	shouldShowRightIcon={!readOnly}
	interactive={!readOnly}
	wrapperStyle={styles.sectionMenuItemTopDescription}
	onPress={() => Navigation.navigate(ROUTES.RULES_CUSTOM.getRoute(route.params.policyID))}
	shouldRenderAsHTML
	/>
	</OfflineWithFeedback>
	</Section>
	) : null}
	</View>
	)}
	</WorkspacePageWithSections>
	);

What alternative solutions did you explore? (Optional)

None

[nkdengineer]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Workspace settings page is accessible after deletion while offline

What is the root cause of that problem?

The shouldShow condition is wrong here. !isPendingDelete && !prevIsPendingDelete is used to prevent the not found page display briefly when deleting the workspace from the overview page, but it's wrong. We should check if the workspace is just deleted or not instead

App/src/pages/workspace/WorkspacePageWithSections.tsx

Lines 172 to 173 in 93c20db

	// We check isPendingDelete and prevIsPendingDelete to prevent the NotFound view from showing right after we delete the workspace
	return (!isEmptyObject(policy) && !isPolicyAdmin(policy) && !shouldShowNonAdmin) || (!shouldShowPolicy && !isPendingDelete && !prevIsPendingDelete);

What changes do you think we should make in order to solve the problem?

Update this check so that it does not show the not found page if the workspace has just deleted. Otherwise, the not found page will appear.

return (!isEmptyObject(policy) && !isPolicyAdmin(policy) && !shouldShowNonAdmin) || (!shouldShowPolicy && !(isPendingDelete && !prevIsPendingDelete));

App/src/pages/workspace/WorkspacePageWithSections.tsx

Lines 172 to 173 in 93c20db

	// We check isPendingDelete and prevIsPendingDelete to prevent the NotFound view from showing right after we delete the workspace
	return (!isEmptyObject(policy) && !isPolicyAdmin(policy) && !shouldShowNonAdmin) || (!shouldShowPolicy && !isPendingDelete && !prevIsPendingDelete);

What alternative solutions did you explore? (Optional)

N/A

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[dmkt9]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Workspace settings page is accessible after deletion while offline

What is the root cause of that problem?

Since isPendingDelete and prevIsPendingDelete will always be true when we are offline, the NotFound page will not be rendered.

App/src/pages/workspace/WorkspacePageWithSections.tsx

Line 173 in 7d00137

return (!isEmptyObject(policy) && !isPolicyAdmin(policy) && !shouldShowNonAdmin) || (!shouldShowPolicy && !isPendingDelete && !prevIsPendingDelete);

This logic was changed in PR #75085 to avoid briefly showing the NotFound page.

What changes do you think we should make in order to solve the problem?

We should add a flag to determine whether we are in the process of deletion.
If it is not immediately after the delete action, then we should rely entirely on isPendingDelete to display the NotFound page.

const isPerformingDeletionRef = useRef(false);

useEffect(() => {
    if (isPerformingDeletionRef.current) {
        return;
    }

    isPerformingDeletionRef.current = isPendingDelete !== prevIsPendingDelete;
}, [isPendingDelete, prevIsPendingDelete]);
const shouldShow = useMemo(() => {
    // If the policy object doesn't exist or contains only error data, we shouldn't display it.
    if (((isEmptyObject(policy) || (Object.keys(policy).length === 1 && !isEmptyObject(policy.errors))) && isEmptyObject(policyDraft)) || shouldShowNotFoundPage) {
        return true;
    }

    // We check isPendingDelete and prevIsPendingDelete to prevent the NotFound view from showing right after we delete the workspace
    return (
        (!isEmptyObject(policy) && !isPolicyAdmin(policy) && !shouldShowNonAdmin) ||
        (!shouldShowPolicy && (isPendingDelete !== prevIsPendingDelete || isPerformingDeletionRef.current) ? !isPendingDelete && !prevIsPendingDelete : isPendingDelete)
    );

App/src/pages/workspace/WorkspacePageWithSections.tsx

Lines 166 to 174 in 7d00137

	const shouldShow = useMemo(() => {
	// If the policy object doesn't exist or contains only error data, we shouldn't display it.
	if (((isEmptyObject(policy) || (Object.keys(policy).length === 1 && !isEmptyObject(policy.errors))) && isEmptyObject(policyDraft)) || shouldShowNotFoundPage) {
	return true;
	}
	// We check isPendingDelete and prevIsPendingDelete to prevent the NotFound view from showing right after we delete the workspace
	return (!isEmptyObject(policy) && !isPolicyAdmin(policy) && !shouldShowNonAdmin) || (!shouldShowPolicy && !isPendingDelete && !prevIsPendingDelete);
	// eslint-disable-next-line react-hooks/exhaustive-deps

NOTE: We could also use isOffline instead of this ref, but there is still a chance of reproducing the issue if the user’s network is slow and they attempt to access the member page immediately after deletion.

What alternative solutions did you explore? (Optional)

N/A

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~022011210546596342943

[JmillsExpensify]

Opened it up

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @DylanDylann (External)