[HOLD for payment 2024-10-25] [$250] Workspace settings - There is back button on not found page for wide screen

[IuliiaHerets]

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: v9.0.44-0
Reproducible in staging?: Y
Reproducible in production?: Y
Email or phone of affected tester (no customers): expensify416+da2@gmail.com
Issue reported by: Applause Internal Team

Action Performed:

1. User A - Invite user B to workspace
2. User A - Navigate to the workspace > More features > copy the link from browser bar
3. User A - Send the URL to user B
4. User B - Open the URL

Expected Result:

There shouldn't be back button on not found page for wide screen. It should be available only for small screen (mobile)

Actual Result:

Back button is available for wide screen. That makes it a redundant back button for workspace page.

Workaround:

Unknown

Platforms:

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6623300_1727966545832.Screen_Recording_2024-10-03_at_5.34.51_in_the_afternoon.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021843399831747959638
• Upwork Job ID: 1843399831747959638
• Last Price Increase: 2024-10-07
• Automatic offers:
• aimane-chnaif | Reviewer | 104343679
• Krishna2323 | Contributor | 104343684

Issue Owner

Current Issue Owner: @alexpensify

[melvin-bot]

Triggered auto assignment to @alexpensify (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.

[IuliiaHerets]

We think that this bug might be related to #wave-collect - Release 1

[IuliiaHerets]

@alexpensify FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[Krishna2323]

Edited by proposal-police: This proposal was edited at 2024-10-03 17:54:18 UTC.

Proposal


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

Workspace settings - There is back button on not found page for wide screen

What is the root cause of that problem?

shouldShowBackButton isn't passed to NotFoundPage .

App/src/pages/workspace/AccessOrNotFoundWrapper.tsx

Lines 90 to 101 in ba9af8f

	<NotFoundPage
	shouldForceFullScreen={shouldShowFullScreenFallback}
	onBackButtonPress={() => {
	if (shouldShowFullScreenFallback) {
	Navigation.dismissModal();
	return;
	}
	Navigation.goBack(policyID && !isMoneyRequest ? ROUTES.WORKSPACE_PROFILE.getRoute(policyID) : undefined);
	}}
	// eslint-disable-next-line react/jsx-props-no-spreading
	{...fullPageNotFoundViewProps}
	/>

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


• Pass shouldShowBackButton={shouldUseNarrowLayout} to NotFoundPage if shouldShowFullScreenFallback is false.
• We should also look up for the same issue on other pages.

What alternative solutions did you explore? (Optional)

• We can set the back button through props in WorkspaceMoreFeaturesPage.
  

  App/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx

  Lines 397 to 400 in ba9af8f

  	<AccessOrNotFoundWrapper
  	accessVariants={[CONST.POLICY.ACCESS_VARIANTS.ADMIN, CONST.POLICY.ACCESS_VARIANTS.PAID]}
  	policyID={route.params.policyID}
  	>

            fullPageNotFoundViewProps={{
                shouldShowBackButton: shouldUseNarrowLayout,
            }}

• If we go with this solution then we would need to do the same in multiple components. e.g. WorkspaceTaxesPage, WorkspaceTagsPage and many more.

What alternative solutions did you explore? (Optional 2)

• If we want full screen not found page then we can pass shouldForceFullScreen: true, to fullPageNotFoundViewProps prop.

            fullPageNotFoundViewProps={{
                shouldForceFullScreen: true,
            }}

What alternative solutions did you explore? (Optional 3)

• We can update isPolicyFeatureEnabled to accept a new prop currentUserLogin and we will add a if check when the feature name is moreFeatures
  

  App/src/libs/PolicyUtils.ts

  Lines 485 to 494 in ba9af8f

  	function isPolicyFeatureEnabled(policy: OnyxEntry<Policy>, featureName: PolicyFeatureName): boolean {
  	if (featureName === CONST.POLICY.MORE_FEATURES.ARE_TAXES_ENABLED) {
  	return !!policy?.tax?.trackingEnabled;
  	}
  	if (featureName === CONST.POLICY.MORE_FEATURES.ARE_CONNECTIONS_ENABLED) {
  	return policy?.[featureName] ? !!policy?.[featureName] : !isEmptyObject(policy?.connections);
  	}
  	return !!policy?.[featureName];
  	}

function isPolicyFeatureEnabled(policy: OnyxEntry<Policy>, featureName: PolicyFeatureName | 'moreFeatures', currentUserLogin?: string): boolean {
    if (featureName === CONST.POLICY.MORE_FEATURES.ARE_TAXES_ENABLED) {
        return !!policy?.tax?.trackingEnabled;
    }
    if (featureName === CONST.POLICY.MORE_FEATURES.ARE_CONNECTIONS_ENABLED) {
        return policy?.[featureName] ? !!policy?.[featureName] : !isEmptyObject(policy?.connections);
    }

    if (featureName === 'moreFeatures') {
        return isPolicyAdmin(policy, currentUserLogin) && isPaidGroupPolicy(policy);
    }

    return !!policy?.[featureName];
}

• Then we would only need to pass featureName="morefeatures" to AccessOrNotFoundWrapper in WorkspaceMoreFeaturesPage.

NOTE: We would also need to solve type issues when we use morefeatures as a feature name.

Result

[Krishna2323]

Proposal Updated

• Minor update

[Nodebrute]

Edited by proposal-police: This proposal was edited at 2023-10-06T13:45:00Z.

Proposal

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

There is back button on not found page for wide-screen

What is the root cause of that problem?

We display a full-screen 'Not Found' page for all sections except the 'More Features' page.

App/src/pages/workspace/AccessOrNotFoundWrapper.tsx

Line 169 in ba9af8f

shouldShowFullScreenFallback={!isFeatureEnabled || isPolicyNotAccessible}

This is because the 'More Features' page is the only one where we don’t pass a featureName.

App/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx

Lines 397 to 400 in ba9af8f

	<AccessOrNotFoundWrapper
	accessVariants={[CONST.POLICY.ACCESS_VARIANTS.ADMIN, CONST.POLICY.ACCESS_VARIANTS.PAID]}
	policyID={route.params.policyID}
	>

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

We should also display a full-screen 'Not Found' page for the features page. There are several ways to achieve this, one of which is by passing props.

For features page we can pass a new prop isFeaturesPage

App/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx

Lines 397 to 400 in ba9af8f

	<AccessOrNotFoundWrapper
	accessVariants={[CONST.POLICY.ACCESS_VARIANTS.ADMIN, CONST.POLICY.ACCESS_VARIANTS.PAID]}
	policyID={route.params.policyID}
	>

And then we can use it here

App/src/pages/workspace/AccessOrNotFoundWrapper.tsx

Line 169 in ba9af8f

shouldShowFullScreenFallback={!isFeatureEnabled || isPolicyNotAccessible}

             shouldShowFullScreenFallback={!isFeatureEnabled || isPolicyNotAccessible || isFeaturePage}

This will make it consistent with other pages.

Screen.Recording.2024-10-03.at.11.28.20.PM.mov

We can fix this in other parts of app too where we have this problem

What alternative solutions did you explore? (Optional)

[Krishna2323]

PROPOSAL UPDATED

• Added alternative 2 & 3

[hayes102]

I am not sure if this bug worth fixing, i think its a minor issue

[melvin-bot]

📣 @hayes102! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.
   
   Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[melvin-bot]

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