[HOLD for payment 2024-05-06] [$250] Workspace - Name RHP stays open while not found view is loading

[lanitochka17]

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: 1.4.63-0
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by:
Slack conversation:

Issue found when executing PR #36409

Action Performed:

1. Navigate to staging.new.expensify.com
2. Create a workspace
3. Go to workspace settings > Profile > Name
4. While the RHP is open click on URL and change the workspace ID to something invalid
5. Navigate to it (e.g https://staging.new.expensify.com/settings/workspaces/<invalid
   ID>/profile)

Expected Result:

The profile name RHP should close while not found view is loading

Actual Result:

The profile name RHP first closes and then re appears while the not found view is loading

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

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

Screenshots/Videos

Add any screenshot/video evidence

Bug6453768_1713453751763.Screen_Recording_20240418_181850_Chrome.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~012247865ed0caacd0
• Upwork Job ID: 1782481496034230272
• Last Price Increase: 2024-04-22
• Automatic offers:
• Pujan92 | Reviewer | 0
• nkdengineer | Contributor | 0

[melvin-bot]

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

[lanitochka17]

@abekkala 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

[lanitochka17]

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

[Nodebrute]

Proposal

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

Name RHP stays open while not found view is loading

What is the root cause of that problem?

After testing, it appears that this error is not limited to the profile page; it also occurs on the description page. There is currently no logic implemented to handle the not-found page scenario.

App/src/pages/workspace/WorkspaceProfileDescriptionPage.tsx

Lines 70 to 78 in 68e6962

	<ScreenWrapper
	includeSafeAreaPaddingBottom={false}
	shouldEnableMaxHeight
	testID={WorkspaceProfileDescriptionPage.displayName}
	>
	<HeaderWithBackButton
	title={translate('workspace.editor.descriptionInputLabel')}
	onBackButtonPress={() => Navigation.goBack()}
	/>

App/src/pages/workspace/WorkspaceNamePage.tsx

Lines 56 to 64 in 68e6962

	<ScreenWrapper
	includeSafeAreaPaddingBottom={false}
	shouldEnableMaxHeight
	testID={WorkspaceNamePage.displayName}
	>
	<HeaderWithBackButton
	title={translate('workspace.editor.nameInputLabel')}
	onBackButtonPress={() => Navigation.goBack()}
	/>

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

We can implement it similarly to how we're handling the currency selector in the workspace.

App/src/pages/workspace/WorkspaceProfileCurrencyPage.tsx

Lines 78 to 83 in 68e6962

	<FullPageNotFoundView
	onBackButtonPress={PolicyUtils.goBackFromInvalidPolicy}
	onLinkPress={PolicyUtils.goBackFromInvalidPolicy}
	shouldShow={(isEmptyObject(policy) && !isLoadingReportData) || !PolicyUtils.isPolicyAdmin(policy) || PolicyUtils.isPendingDeletePolicy(policy)}
	subtitleKey={isEmptyObject(policy) ? undefined : 'workspace.common.notAuthorized'}
	>

We can do something like this

 <FullPageNotFoundView
onBackButtonPress={PolicyUtils.goBackFromInvalidPolicy}
  onLinkPress={PolicyUtils.goBackFromInvalidPolicy}
  shouldShow={(isEmptyObject(policy))|| !PolicyUtils.isPolicyAdmin(policy) || PolicyUtils.isPendingDeletePolicy(policy)}
 subtitleKey={isEmptyObject(policy) ? undefined : 'workspace.common.notAuthorized'}
            >

Result

Screen.Recording.2024-04-19.at.9.41.31.AM.mov

What alternative solutions did you explore? (Optional)

We need to test other areas to see if the bug occurs elsewhere as well.
Regarding the loading indicator, we can utilize withPolicyAndFullscreenLoading if we decide to include it. However, currently, we're fine without it.

[melvin-bot]

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

[melvin-bot]

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

[abekkala]

@Pujan92 we have received a proposal for this one

[nkdengineer]

Proposal

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

The profile name RHP first closes and then re appears while the not found view is loading

What is the root cause of that problem?

We don't have any logic to guard the WorkspaceNamePage here against unauthorized access.

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

This is a common use cases for which a dedicated wrapper AdminPolicyAccessOrNotFoundWrapper has been built. It was used everywhere in the same RHP cases like WorkspaceTagsSettingsPage, WorkspaceCreateTaxPage, ...

Not only does it handle showing the correct NotFound based on user's access, but it also has correct goBack logic when we click on back button here (if the workspace is accessible, go back to the workspace profile page, otherwise go to workspace list page). Which will not be available if we use a duplicated FullPageNotFoundView ourselves.

We should use AdminPolicyAccessOrNotFoundWrapper it in WorkspaceNamePage and other pages that are missing it. If we need to customize the subtitle, onLinkPress or other props, we can pass custom param to AdminPolicyAccessOrNotFoundComponent and in AdminPolicyAccessOrNotFoundComponent pass it to the underlying not found page.

For example, if we want to customize to use workspace.common.notAuthorized as the subtitle if policy exists but the user doesn't have admin access, like here, we can add a subtitleKey prop to AdminPolicyAccessOrNotFoundWrapper and pass it to FullPageNotFoundView and NotFoundPage inside. Or we can even make this behavior (custom message if policy exists but don't have access) a default behavior of AdminPolicyAccessOrNotFoundWrapper, and don't need the custom prop.

(Besides the above, we might need to use withPolicyAndFullscreenLoading to wrap the WorkspaceNamePage similar to other pages that use AdminPolicyAccessOrNotFoundWrapper)

What alternative solutions did you explore? (Optional)

For pages that currently use custom FullPageNotFoundView instead of the standardized AdminPolicyAccessOrNotFoundWrapper, like WorkspaceProfileCurrencyPage, we can optionally refactor to use AdminPolicyAccessOrNotFoundWrapper

[Pujan92]

Thanks for the proposals.

Indeed, AdminPolicyAccessOrNotFoundWrapper is the wrapper created specifically for this purpose. Using AdminPolicyAccessOrNotFoundWrapper and customizing it for the subtitle and other required fields(if any) makes more sense to me. Considering that, I am inclined to select @nkdengineer 's proposal over @Nodebrute's proposal.
For all workspace pages add AdminPolicyAccessOrNotFoundWrapper where it is missing and replace FullPageNotFoundView with AdminPolicyAccessOrNotFoundWrapper to make it consistent across all workspace related pages.

🎀👀🎀 C+ reviewed

[melvin-bot]

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

[melvin-bot]

📣 @Pujan92 🎉 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]

📣 @nkdengineer 🎉 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 📖

[nkdengineer]

I'll raise PR soon

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.4.67-7 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Fix Workspace - Name RHP stays open while not found view is loading #40967

If no regressions arise, payment will be issued on 2024-05-06. 🎊

For reference, here are some details about the assignees on this issue:

• @Pujan92 requires payment automatic offer (Reviewer)
• @nkdengineer requires payment automatic offer (Contributor)

[melvin-bot]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@Pujan92] The PR that introduced the bug has been identified. Link to the PR:
• [@Pujan92] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:
• [@Pujan92] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:
• [@Pujan92] Determine if we should create a regression test for this bug.
• [@Pujan92] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
• [@abekkala] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[abekkala]

PAYMENT SUMMARY FOR MAY 06

• Fix: @nkdengineer [$250] requires payment automatic offer
• PR Review:@Pujan92 [$250] requires payment automatic offer Please complete checklist

[rlinoz]

friendly bump @Pujan92

[Pujan92]

I think a checklist is not needed here as none of the specific PR caused this.

[Pujan92]

Regression Test Steps

1. Goto your workspace -> Profile
2. Click on the name which opens the RHP for editing the name
3. In the URL modify the workspace id with any invalid one and hit enter
4. Verify that not found view is displayed

[abekkala]

@Pujan92 please accept the offer in Upwork and I can process payment - thanks!

[abekkala]

@nkdengineer payment sent and contract ended - thank you! 🎉

[Pujan92]

@abekkala Accepted, Thanks!

[abekkala]

@Pujan92 payment sent and contract ended - thank you!

[melvin-bot]

@rlinoz @abekkala Be sure to fill out the Contact List!