[$250] Workspace settings - There is back button on not found page for wide screen #50175

IuliiaHerets · 2024-10-03T17:46:16Z

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:

User A - Invite user B to workspace
User A - Navigate to the workspace > More features > copy the link from browser bar
User A - Send the URL to user B
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:

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: @aimane-chnaif

melvin-bot · 2024-10-03T17:46:25Z

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 · 2024-10-03T17:46:35Z

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

IuliiaHerets · 2024-10-03T17:46:47Z

@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 · 2024-10-03T17:59:44Z

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 · 2024-10-03T18:04:06Z

Proposal Updated

Minor update

Nodebrute · 2024-10-03T18:27:48Z

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 · 2024-10-03T19:00:45Z

PROPOSAL UPDATED

Added alternative 2 & 3

hayes102 · 2024-10-03T22:34:44Z

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

melvin-bot · 2024-10-03T22:34:48Z

📣 @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:

Make sure you've read and understood the contributing guidelines.
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.
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.
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 · 2024-10-07T21:15:44Z

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

melvin-bot · 2024-10-07T21:15:49Z

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

alexpensify · 2024-10-07T21:16:12Z

@aimane-chnaif - when you get a chance, can you please review these proposals? Thanks!

aimane-chnaif · 2024-10-08T07:39:14Z

Thanks for the proposals.

@Nodebrute the root cause is not correct.

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

We don't display full-screen 'Not found' on categories page when this feature is enabled. Full-screen is only when the feature is disabled.

aimane-chnaif · 2024-10-08T07:56:21Z

Note that the bug is not limited to More Features page but also happens on other workspace settings pages like Categories.

I think just removing back button for wide screen (while showing policy side bar) is fine.
If that's the case, @Krishna2323's main solution looks promising.
@Krishna2323 can you please update your proposal to fix regressions? i.e. WorkspaceInvitePage won't have back button after applying your solution.

Krishna2323 · 2024-10-08T08:41:31Z

@aimane-chnaif, updating in a hour.

Krishna2323 · 2024-10-08T09:59:49Z

@aimane-chnaif, could you please share more details about the regressions you are talking about?

Monosnap.screencast.2024-10-08.15-27-53.mp4

aimane-chnaif · 2024-10-08T17:56:34Z

@Krishna2323 please share your branch

Krishna2323 · 2024-10-09T06:14:09Z

@aimane-chnaif, test branch.

aimane-chnaif · 2024-10-09T06:20:32Z

@Krishna2323's proposal (main solution) looks good to me.
🎀👀🎀 C+ reviewed

melvin-bot · 2024-10-09T06:20:43Z

Triggered auto assignment to @luacmartins, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

melvin-bot · 2024-10-09T17:52:15Z

📣 @aimane-chnaif 🎉 An offer has been automatically sent to your Upwork account for the Reviewer role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job

melvin-bot · 2024-10-09T17:52:20Z

📣 @Krishna2323 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

Krishna2323 · 2024-10-11T14:22:38Z

PR will be up within 24 hours.

Krishna2323 · 2024-10-13T10:31:18Z

@aimane-chnaif, PR ready for review ^

IuliiaHerets added Daily KSv2 Bug Something is broken. Auto assigns a BugZero manager. labels Oct 3, 2024

melvin-bot bot assigned alexpensify Oct 3, 2024

melvin-bot bot added the Overdue label Oct 7, 2024

alexpensify added the External Added to denote the issue can be worked on by a contributor label Oct 7, 2024

melvin-bot bot changed the title ~~Workspace settings - There is back button on not found page for wide screen~~ [$250] Workspace settings - There is back button on not found page for wide screen Oct 7, 2024

melvin-bot bot added the Help Wanted Apply this label when an issue is open to proposals by contributors label Oct 7, 2024

melvin-bot bot assigned aimane-chnaif Oct 7, 2024

melvin-bot bot removed the Overdue label Oct 7, 2024

melvin-bot bot assigned luacmartins Oct 9, 2024

luacmartins assigned Krishna2323 Oct 9, 2024

melvin-bot bot removed the Help Wanted Apply this label when an issue is open to proposals by contributors label Oct 9, 2024

melvin-bot bot added the Overdue label Oct 11, 2024

Krishna2323 mentioned this issue Oct 13, 2024

fix: Workspace settings - There is back button on not found page for wide screen #50691

Open

50 tasks

melvin-bot bot added Reviewing Has a PR in review Weekly KSv2 and removed Daily KSv2 Overdue labels Oct 13, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[$250] Workspace settings - There is back button on not found page for wide screen #50175

[$250] Workspace settings - There is back button on not found page for wide screen #50175

IuliiaHerets commented Oct 3, 2024 •

edited by melvin-bot bot

Loading

melvin-bot bot commented Oct 3, 2024

IuliiaHerets commented Oct 3, 2024

IuliiaHerets commented Oct 3, 2024

Krishna2323 commented Oct 3, 2024 •

edited

Loading

Krishna2323 commented Oct 3, 2024

Nodebrute commented Oct 3, 2024 •

edited

Loading

Krishna2323 commented Oct 3, 2024

hayes102 commented Oct 3, 2024

melvin-bot bot commented Oct 3, 2024

melvin-bot bot commented Oct 7, 2024

melvin-bot bot commented Oct 7, 2024

alexpensify commented Oct 7, 2024

aimane-chnaif commented Oct 8, 2024

aimane-chnaif commented Oct 8, 2024

Krishna2323 commented Oct 8, 2024

Krishna2323 commented Oct 8, 2024

aimane-chnaif commented Oct 8, 2024

Krishna2323 commented Oct 9, 2024

aimane-chnaif commented Oct 9, 2024

melvin-bot bot commented Oct 9, 2024

melvin-bot bot commented Oct 9, 2024

melvin-bot bot commented Oct 9, 2024

Krishna2323 commented Oct 11, 2024

Krishna2323 commented Oct 13, 2024

[$250] Workspace settings - There is back button on not found page for wide screen #50175

[$250] Workspace settings - There is back button on not found page for wide screen #50175

Comments

IuliiaHerets commented Oct 3, 2024 • edited by melvin-bot bot Loading

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

melvin-bot bot commented Oct 3, 2024

IuliiaHerets commented Oct 3, 2024

IuliiaHerets commented Oct 3, 2024

Krishna2323 commented Oct 3, 2024 • edited Loading

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

What alternative solutions did you explore? (Optional 2)

What alternative solutions did you explore? (Optional 3)

Result

Krishna2323 commented Oct 3, 2024

Proposal Updated

Nodebrute commented Oct 3, 2024 • edited Loading

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

Krishna2323 commented Oct 3, 2024

PROPOSAL UPDATED

hayes102 commented Oct 3, 2024

melvin-bot bot commented Oct 3, 2024

melvin-bot bot commented Oct 7, 2024

melvin-bot bot commented Oct 7, 2024

alexpensify commented Oct 7, 2024

aimane-chnaif commented Oct 8, 2024

aimane-chnaif commented Oct 8, 2024

Krishna2323 commented Oct 8, 2024

Krishna2323 commented Oct 8, 2024

aimane-chnaif commented Oct 8, 2024

Krishna2323 commented Oct 9, 2024

aimane-chnaif commented Oct 9, 2024

melvin-bot bot commented Oct 9, 2024

melvin-bot bot commented Oct 9, 2024

melvin-bot bot commented Oct 9, 2024

Krishna2323 commented Oct 11, 2024

Krishna2323 commented Oct 13, 2024

IuliiaHerets commented Oct 3, 2024 •

edited by melvin-bot bot

Loading

Krishna2323 commented Oct 3, 2024 •

edited

Loading

Proposal 

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

Nodebrute commented Oct 3, 2024 •

edited

Loading