[HOLD for payment 2024-03-07] [$500] Web - Chat - After Ctrl+R(app reload), the attachment preview modal becomes blank when pressing CTRL+K

[kbecciv]

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.42.1
Reproducible in staging?: y
Reproducible in production?: y
If this was caught during regression testing, add the test name, ID and link from TestRail: https://expensify.testrail.io/index.php?/tests/view/4316393
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: Applause - Internal Team
Slack conversation:

Action Performed:

precondition: user has an existing chat with an attachment .

1. Navigate to app and log in.
2. Open any chat with an attachment
3. Click the attachment to open the preview modal
4. Press CTRL+K or CMD+K to open the search page
5. Dismiss the search page
6. Open another attachment preview in any chat
7. Reload the app (CTRL+R)
8. Press CTRL+K or CMD+K to open the search page

Expected Result:

When the search page is opened , the conversation with the attachment is greyed out but visible on the backdrop

Actual Result:

After reloading the app, the preview modal becomes blank.

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

Bug6380859_1708013409776.attachlost.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~017fb8d3967819dfb5
• Upwork Job ID: 1758163790823956480
• Last Price Increase: 2024-02-15
• Automatic offers:
• mollfpr | Reviewer | 0
• bernhardoj | Contributor | 0

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to @JmillsExpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[kbecciv]

We think that this bug might be related #vip-vsb
CC @quinthar

[bernhardoj]

Proposal

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

When we reload the web while on the attachment previews and use search shortcut, the central screen is blank.

What is the root cause of that problem?

When we reload the web, the nav stack only contains bottom tab navigator and the report attachments page. We have a custom router that modify the stack to includes neccessary route to the stack, but for report attachments, the state is undefined. I think the state won't be undefined only if it's a nested navigator.

App/src/libs/Navigation/AppNavigator/createCustomStackNavigator/CustomRouter.ts

Lines 33 to 37 in e3331db

	function compareAndAdaptState(state: StackNavigationState<RootStackParamList>) {
	// If the state of the last path is not defined the getPathFromState won't work correctly.
	if (!state?.routes.at(-1)?.state) {
	return;
	}

But even if we remove the early return, it still won't work correctly because getAdaptedStateFromPath returns undefined. getAdaptedStateFromPath is the one that decides what routes to include on the stack. For example, if there is a full screen navigator, we want to make sure there is a bottom tab navigator, central pane navigator (on large screen), and the full screen navigator itself.

App/src/libs/Navigation/linkingConfig/getAdaptedStateFromPath.ts

Lines 211 to 238 in e3331db

	if (fullScreenNavigator) {
	// Routes
	// - default bottom tab
	// - default central pane on desktop layout
	// - found fullscreen
	// Full screen navigator can have any central pane and bottom tab under. They will be covered anyway.
	metainfo.isCentralPaneAndBottomTabMandatory = false;
	const routes = [];
	routes.push(
	createBottomTabNavigator(
	{
	name: SCREENS.HOME,
	},
	policyID,
	),
	);
	if (!isNarrowLayout) {
	routes.push(createCentralPaneNavigator({name: SCREENS.REPORT}));
	}
	routes.push(fullScreenNavigator);
	return {
	adaptedState: getRoutesWithIndex(routes),
	metainfo,
	};
	}

In our case the bottom navigator is found on the stack, but matchingCentralPaneRoute is undefined because topmostBottomTabRoute and that is because the bottom navigator doesn't have a state.

App/src/libs/Navigation/linkingConfig/getAdaptedStateFromPath.ts

Lines 253 to 268 in e3331db

	if (bottomTabNavigator) {
	// Routes
	// - found bottom tab
	// - matching central pane on desktop layout
	if (isNarrowLayout) {
	return {
	adaptedState: state,
	metainfo,
	};
	}
	const routes = [...state.routes];
	const matchingCentralPaneRoute = getMatchingCentralPaneRouteForState(state);
	if (matchingCentralPaneRoute) {
	routes.push(createCentralPaneNavigator(matchingCentralPaneRoute));
	}

App/src/libs/Navigation/linkingConfig/getMatchingCentralPaneRouteForState.ts

Lines 35 to 36 in e3331db

	function getMatchingCentralPaneRouteForState(state: State<RootStackParamList>): NavigationPartialRoute<CentralPaneName> | undefined {
	const topmostBottomTabRoute = getTopmostBottomTabRoute(state);

App/src/libs/Navigation/getTopmostBottomTabRoute.ts

Lines 6 to 9 in e3331db

	// The bottomTabNavigatorRoute state may be empty if we just logged in.
	if (!bottomTabNavigatorRoute || bottomTabNavigatorRoute.name !== 'BottomTabNavigator' || bottomTabNavigatorRoute.state === undefined) {
	return undefined;
	}

The only case I can see the bottom navigator state is when I open /home.

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

Add a new case in getAdaptedState to handle report attachments.

const reportAttachmentsScreen = state.routes.find((route) => route.name === SCREENS.REPORT_ATTACHMENTS);

If report attachments is found on the stack, we want to make sure there is a report screen behind it.

if (reportAttachmentsScreen) {
    const routes = [];

    // bottom tab navigator
    const matchingBottomTabRoute = getMatchingBottomTabRouteForState(state);
    routes.push(createBottomTabNavigator(matchingBottomTabRoute, policyID));
    // maybe we can add it on large screen only
    routes.push(createCentralPaneNavigator({name: SCREENS.REPORT, params: {reportID: reportAttachmentsScreen.params?.reportID ?? ''}}));
    // attachments preview
    routes.push(reportAttachmentsScreen)

    return {
        adaptedState: getRoutesWithIndex(routes),
        metainfo,
    }
}

[mollfpr]

@bernhardoj The proposal looks like and clear explanation of the root cause 👍

There is just one problem with the solution. After the search page opens, the navigation history seems of where I can't navigate back or forward to the previous search page.

Screen.Recording.2024-02-17.at.02.35.43.mp4

[bernhardoj]

I don't really understand how the history is handled by rn-navigation, but looks like that's the common behavior when you refresh the page as shown below:

Screen.Recording.2024-02-17.at.12.31.26.mov