Web - Tooltip - Educational tooltip appears on not here page

[IuliiaHerets]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: 9.0.83-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from TestRail: Exp
Email or phone of affected tester (no customers): [email protected]
Issue reported by: Applause Internal Team
Device used: Mac 15.0 / Chrome
App Component: Other

Action Performed:

1. Go to staging.new.expensify.com
2. Log in with a new account.
3. Complete the onboarding.
4. Open FAB to dismiss the tooltip.
5. Create a new workspace.
6. Go back to LHN.
7. Do not open workspace chat because we need to keep the tooltip untouched.
8. Go to this link https://staging.new.expensify.com/v/123/456

Expected Result:

Educational tooltip will not appear on not here page.

Actual Result:

Educational tooltip appears on not here page.

Workaround:

Unknown

Platforms:

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6710702_1736497788719.20250110_162705.mp4

View all open jobs on GitHub

[melvin-bot]

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

[bernhardoj]

Proposal

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

The educational tooltip shows on the validate login page.

What is the root cause of that problem?

The tooltip shows if the current active route is home.

App/src/components/LHNOptionsList/OptionRowLHN.tsx

Line 57 in 219e66d

const isActiveRouteHome = useIsCurrentRouteHome();

App/src/components/LHNOptionsList/OptionRowLHN.tsx

Line 62 in 219e66d

const shouldTooltipBeVisible = shouldUseNarrowLayout ? isScreenFocused && isActiveRouteHome : isActiveRouteHome;

When we open the validate login page, the nav stack looks like: [BottomTab, ValidateLogin]

useIsCurrentRouteHome gets the state using useNavigationState which gets the state of the current navigator, which is the BottomTabNavigator, so it always return true even though the validate login page covers the whole screen.

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

There is no hook to listen for root navigator, so I'm thinking to have the same approach as this.

App/src/libs/Navigation/AppNavigator/AuthScreens.tsx

Lines 209 to 220 in 219e66d

	const modalScreenListeners = {
	focus: () => {
	Modal.setModalVisibility(true);
	},
	blur: () => {
	Modal.setModalVisibility(false);
	},
	beforeRemove: () => {
	Modal.setModalVisibility(false);
	Modal.willAlertModalBecomeVisible(false);
	},
	};

We will create a new Onyx key called FULLSCREEN_VISIBILITY and set it to true when the validate login page is focused and to false when remove.

function setVisibility(isVisible: boolean) {
    Onyx.merge(ONYXKEYS.FULLSCREEN_VISIBILITY, isVisible);
}
...
const fullScreenListeners = {
    focus: () => {
        FullscreenVisibility.setVisibility(true);
    },
    beforeRemove: () => {
        FullscreenVisibility.setVisibility(false);
    },
};

Then attach the listener here (and other screen if needed)

App/src/libs/Navigation/AppNavigator/AuthScreens.tsx

Lines 428 to 436 in 219e66d

	<RootStack.Screen
	name={SCREENS.VALIDATE_LOGIN}
	options={{
	...rootNavigatorOptions.fullScreen,
	headerShown: false,
	title: 'New Expensify',
	}}
	getComponent={loadValidateLoginPage}
	/>

Next, we listen for the onyx in OptionRowLHN.

const [isFullscreenVisible] = useOnyx(ONYXKEYS.FULLSCREEN_VISIBILITY);

Then, update the visibility logic here to prevent the tooltip from showing when isFullscreenVisible is true.

App/src/components/LHNOptionsList/OptionRowLHN.tsx

Lines 59 to 66 in 219e66d

	const {tooltipToRender, shouldShowTooltip} = useMemo(() => {
	const tooltip = shouldShowGetStartedTooltip ? CONST.PRODUCT_TRAINING_TOOLTIP_NAMES.CONCEIRGE_LHN_GBR : CONST.PRODUCT_TRAINING_TOOLTIP_NAMES.LHN_WORKSPACE_CHAT_TOOLTIP;
	const shouldShowTooltips = shouldShowWokspaceChatTooltip || shouldShowGetStartedTooltip;
	const shouldTooltipBeVisible = shouldUseNarrowLayout ? isScreenFocused && isActiveRouteHome : isActiveRouteHome;
	// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
	return {tooltipToRender: tooltip, shouldShowTooltip: shouldShowTooltips && shouldTooltipBeVisible};
	}, [shouldShowGetStartedTooltip, shouldShowWokspaceChatTooltip, isScreenFocused, shouldUseNarrowLayout, isActiveRouteHome]);

const shouldTooltipBeVisible = shouldUseNarrowLayout ? isScreenFocused && isActiveRouteHome : isActiveRouteHome && !isFullscreenVisible;

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

N/A

[huult]

Edited by proposal-police: This proposal was edited at 2025-01-10 14:21:47 UTC.

Proposal

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

Tooltip - Educational tooltip appears on not here page

What is the root cause of that problem?

The page showing ‘Not Found’ in this ticket includes the ValidateLogin page and OptionRowLHN inside BottomTabNavigator. When the full-screen ‘Not Found’ view of ValidateLogin is displayed, the condition to trigger the educational tooltip is still executed and returns true, causing the tooltip to appear.

App/src/components/LHNOptionsList/OptionRowLHN.tsx

Line 62 in 270a302

const shouldTooltipBeVisible = shouldUseNarrowLayout ? isScreenFocused && isActiveRouteHome : isActiveRouteHome;

With this issue, any page with the route name ValidateLogin will cause this problem to occur, such as ‘Not Found’ for invalid magic links, ExpiredValidateCodeModal, or JustSignedInModal...

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

To resolve this issue, we should prevent the educational tooltip from being displayed when the topmost route name is ValidateLogin. This can be implemented as follows:

App/src/components/LHNOptionsList/OptionRowLHN.tsx

Line 59 in 270a302

const {tooltipToRender, shouldShowTooltip} = useMemo(() => {

Update to:

    const rootState = navigationRef.getRootState() as State<RootStackParamList>; // add this line
    const topmostCentralPaneRoute = getTopmostRouteName(rootState); // add this line

    const {tooltipToRender, shouldShowTooltip} = useMemo(() => {
        const tooltip = shouldShowGetStartedTooltip ? CONST.PRODUCT_TRAINING_TOOLTIP_NAMES.CONCEIRGE_LHN_GBR : CONST.PRODUCT_TRAINING_TOOLTIP_NAMES.LHN_WORKSPACE_CHAT_TOOLTIP;
        const shouldShowTooltips = shouldShowWokspaceChatTooltip || shouldShowGetStartedTooltip;
        const shouldTooltipBeVisible = shouldUseNarrowLayout ? isScreenFocused && isActiveRouteHome : isActiveRouteHome;

        // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
        return {tooltipToRender: tooltip, shouldShowTooltip: shouldShowTooltips && shouldTooltipBeVisible && topmostCentralPaneRoute !== SCREENS.VALIDATE_LOGIN}; // update this line
    }, [shouldShowGetStartedTooltip, shouldShowWokspaceChatTooltip, shouldUseNarrowLayout, isScreenFocused, isActiveRouteHome, topmostCentralPaneRoute]);

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

This is a UI bug, so unit tests are not needed

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.