[HOLD for payment 2024-08-07] [$250] Chat - Not here page does not have back button

[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: 9.0.10-2
Reproducible in staging?: Y
Reproducible in production?: N
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Issue reported by: Applause - Internal Team

Action Performed:

1. Navigate to staging.new.expensify.com
2. Open a chat and send a comment
3. Copy the link of the comment sent on step 2
4. Paste the link on the URL and add random numbers at the end and navigate to it

Expected Result:

The not here page have back button at the top left corner

Actual Result:

Not here page which gets displayed doesn't have any back button even if other "don't have access" pages have the back button

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

Bug6549442_1721654662608.Screen_Recording_20240722_161807_Chrome.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01dbe85c3ec54018bc
• Upwork Job ID: 1815414741380280360
• Last Price Increase: 2024-07-22

Issue Owner

Current Issue Owner: @sobitneupane

[melvin-bot]

Triggered auto assignment to @tgolen (DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[github-actions]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[lanitochka17]

We think that this bug might be related to #vip-vsp

[ishpaul777]

maybe from #44488, reverting locally to confirm

[ishpaul777]

sorry it didn't work i was not able see not found page at all after straight reverting(Pr here- #45914 )

Screen.Recording.2024-07-22.at.8.15.09.PM.mov

[bernhardoj]

Proposal

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

There is no back button when linking to a not found action.

What is the root cause of that problem?

If we look at the code, the not found page when the linked action is not found never has a header with a back button.

App/src/pages/home/ReportScreen.tsx

Lines 736 to 757 in ccf9591

	if (
	(!isLinkedActionInaccessibleWhisper && isLinkedActionDeleted) ||
	(shouldShowSkeleton &&
	!reportMetadata.isLoadingInitialReportActions &&
	reportActionIDFromRoute &&
	sortedAllReportActions &&
	sortedAllReportActions?.length > 0 &&
	reportActions.length === 0 &&
	!isLinkingToMessage)
	) {
	return (
	<BlockingView
	icon={Illustrations.ToddBehindCloud}
	iconWidth={variables.modalTopIconWidth}
	iconHeight={variables.modalTopIconHeight}
	title={translate('notFound.notHere')}
	shouldShowLink
	linkKey="notFound.noAccess"
	onLinkPress={navigateToEndOfReport}
	/>
	);
	}

It was added in 104884a the first time. #44488 fixes the not found condition which now shows the not found correctly when the linked action doesn't found, just like when it's introduced.

So, this is a feature request to show the header.

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

We can add a header with a back button above the blocking view component.

<>
<HeaderWithBackButton shouldShowBackButton={shouldUseNarrowLayout} onBackButtonPress={navigateToEndOfReport}/>
<BlockingView />
</>

We only show it on narrow layout and the back press will call the same function as onLinkPress of the blocking view, that is to clear the report action route params.

[tgolen]

I'm going to demote this since it's not a regression and it's not a typical flow that will disrupt anything. I agree that this is probably something we should add and I appreciate the early proposal from @bernhardoj

[melvin-bot]

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

[melvin-bot]

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

[kabeer95]

Proposal

Problem Statement

When a user navigates to a chat comment URL without access, the "Not Here" page is displayed without a back button, making it difficult for users to navigate back to the previous page.

Root Cause

The root cause of this problem is that the "Not Here" page is missing a back button, unlike other "don't have access" pages that have a back button. This inconsistency in design is causing a poor user experience.

Proposed Solution

To solve this problem, I propose adding a back button to the top left corner of the "Not Here" page. This button should allow users to easily navigate back to the previous page.

Changes To implement this solution, we need to make the following changes:

Modify

the BlockingView component to include a backButton property with a text property for the button text and an onPress property for the navigation function.

Implement

the navigateBack function to navigate back to the previous page.
Code Changes The modified code will look like this:

javascript

if (
    (!isLinkedActionInaccessibleWhisper && isLinkedActionDeleted) ||
    (shouldShowSkeleton &&
        !reportMetadata.isLoadingInitialReportActions &&
        reportActionIDFromRoute &&
        sortedAllReportActions &&
        sortedAllReportActions?.length > 0 &&
        reportActions.length === 0 &&
        !isLinkingToMessage)
) {
    return (
        <BlockingView
            icon={Illustrations.ToddBehindCloud}
            iconWidth={variables.modalTopIconWidth}
            iconHeight={variables.modalTopIconHeight}
            title={translate('notFound.notHere')}
            shouldShowLink
            linkKey="notFound.noAccess"
            onLinkPress={navigateToEndOfReport}
            backButton={{
                text: translate('common.goBack'),
                onPress: navigateBack,
            }}
        />
    );
}

Alternative Solutions

I explored the following alternative solutions:

Adding a "Go Back" link instead of a button, but this may not be as visually appealing or intuitive for users.
Redirecting users to a default page instead of displaying the "Not Here" page, but this may not provide enough context to users about why they don't have access to the page.

[sobitneupane]

Thanks for the proposal everyone.

Proposal from @bernhardoj looks good.

🎀👀🎀 C+ reviewed

[melvin-bot]

Current assignee @tgolen is eligible for the choreEngineerContributorManagement assigner, not assigning anyone new.

[bernhardoj]

PR is ready

cc: @sobitneupane

[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 9.0.14-6 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Fix not found view of linked action doesn't have back button #46132

If no regressions arise, payment will be issued on 2024-08-07. 🎊

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

• @sobitneupane requires payment through NewDot Manual Requests
• @bernhardoj requires payment through NewDot Manual Requests

[melvin-bot]

Issue is ready for payment but no BZ is assigned. @dylanexpensify you are the lucky winner! Please verify the payment summary looks correct and complete the checklist. Thanks!

[melvin-bot]

Payment Summary

Upwork Job

• Reviewer: @sobitneupane owed $250 via NewDot
• Reviewer: @bernhardoj owed $250 via NewDot

BugZero Checklist (@dylanexpensify)

• I have verified the correct assignees and roles are listed above and updated the neccesary manual offers
• I have verified that there are no duplicate or incorrect contracts on Upwork for this job (https://www.upwork.com/ab/applicants/1815414741380280360/hired)
• I have paid out the Upwork contracts or cancelled the ones that are incorrect
• I have verified the payment summary above is correct

[bernhardoj]

Requested in ND.

[JmillsExpensify]

@dylanexpensify do you mind providing a confirmed payment summary.

[dylanexpensify]

Payment summary:

• contributor: @bernhardoj $250
• contributor+: @sobitneupane $250

Please apply/request!

[JmillsExpensify]

$250 approved for @bernhardoj

[melvin-bot]

@tgolen, @sobitneupane, @bernhardoj, @dylanexpensify Eep! 4 days overdue now. Issues have feelings too...

[sobitneupane]

Regression Test Proposal

1. Open a chat and send a comment
2. Copy the link of the comment
3. Paste the link and add random numbers at the end and send it in the chat.
4. Click on the link
5. On small screen devices, verify not found page is displayed with a back button and on large screen, verify not found page does not have back button.

Do we agree 👍 or 👎

[garrettmknight]

$250 approved for @sobitneupane