[$250] Help button is missing

[mitarachim]

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.1.49-2
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from TestRail: #62349
Email or phone of affected tester (no customers): [email protected], [email protected]
Issue reported by: Applause Internal Team
Device used: Windows 11/ Chrome, Samsung S23FE/ Android 14
App Component: Other

Action Performed:

1. Go to staging.new.expensify.com/home
2. Note that the Help button is not present in the top right corner next to the search button

Expected Result:

The Help button is shown in the top right corner next to the search button.

Actual Result:

The Help button is missing.

Workaround:

Unknown

Platforms:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6838758_1747869569580.Help_button_missing.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021925608618964074308
• Upwork Job ID: 1925608618964074308
• Last Price Increase: 2025-05-22

Issue Owner

Current Issue Owner: @suneox

[melvin-bot]

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

[nkdengineer]

Proposal

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

The Help button is missing.

What is the root cause of that problem?

Coming from this PR

We decided to remove beta newDotHelpSidePanel, show help button only based on ONYXKEYS.NVP_SIDE_PANEL key

But we only set ONYXKEYS.NVP_SIDE_PANEL key when the user presses the help button in this hook

App/src/hooks/useSidePanel.ts

Lines 91 to 100 in 6871ba9

	const openSidePanel = useCallback(() => {
	setIsSidePanelTransitionEnded(false);
	KeyboardUtils.dismiss();
	SidePanelActions.openSidePanel(!isExtraLargeScreenWidth);
	}, [isExtraLargeScreenWidth]);
	const closeSidePanel = useCallback(
	(shouldUpdateNarrow = false) => {
	setIsSidePanelTransitionEnded(false);
	SidePanelActions.closeSidePanel(!isExtraLargeScreenWidth || shouldUpdateNarrow);

and it will not have onyx ONYXKEYS.NVP_SIDE_PANEL for newbies or people who have never pressed the help button

It leads to shouldHideHelpButton will be true

App/src/hooks/useSidePanel.ts

Line 46 in 6871ba9

const shouldHideHelpButton = !sidePanelNVP || !shouldHideSidePanel || isLanguageUnsupported;

And we return as null here

App/src/components/SidePanel/HelpComponents/HelpButton.tsx

Lines 16 to 24 in 6871ba9

	function HelpButton({style}: HelpButtonProps) {
	const styles = useThemeStyles();
	const theme = useTheme();
	const {translate} = useLocalize();
	const {openSidePanel, shouldHideHelpButton} = useSidePanel();
	if (shouldHideHelpButton) {
	return null;
	}

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

we can remove the !sidePanelNVP condition here

const shouldHideHelpButton = !shouldHideSidePanel || isLanguageUnsupported;

App/src/hooks/useSidePanel.ts

Line 46 in 6871ba9

const shouldHideHelpButton = !sidePanelNVP || !shouldHideSidePanel || isLanguageUnsupported;

Note: We should also consider uses of sidePanelNVP in other places

Or create a function to set the default value of ONYXKEYS.NVP_SIDE_PANEL and call it when we don't have data in ONYXKEYS.NVP_SIDE_PANEL

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

None

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.

[melvin-bot]

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

[melvin-bot]

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

[ishakakkad]

Proposal

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

Help button is missing

What is the root cause of that problem?

The Help button never appears on initial login because the ONYXKEYS.NVP_SIDE_PANEL key is not present in the Onyx store. This key is only added or updated when the user interacts with the Help button, which doesn't show up without the key.

App/src/hooks/useSidePanel.ts

Line 46 in 6871ba9

const shouldHideHelpButton = !sidePanelNVP || !shouldHideSidePanel || isLanguageUnsupported;

App/src/libs/actions/SidePanel.ts

Lines 13 to 44 in 6871ba9

	function openSidePanel(shouldOpenOnNarrowScreen: boolean) {
	const optimisticData: OnyxUpdate[] = [
	{
	key: ONYXKEYS.NVP_SIDE_PANEL,
	onyxMethod: Onyx.METHOD.MERGE,
	value: shouldOpenOnNarrowScreen ? {open: true, openNarrowScreen: true} : {open: true},
	},
	];
	const params: OpenSidePanelParams = {isNarrowScreen: shouldOpenOnNarrowScreen};
	API.write(WRITE_COMMANDS.OPEN_SIDE_PANEL, params, {optimisticData});
	}
	/**
	* Close the side panel
	*
	* @param shouldCloseOnNarrowScreen - Whether to close the side panel on narrow screen
	*/
	function closeSidePanel(shouldCloseOnNarrowScreen: boolean) {
	const optimisticData: OnyxUpdate[] = [
	{
	key: ONYXKEYS.NVP_SIDE_PANEL,
	onyxMethod: Onyx.METHOD.MERGE,
	value: shouldCloseOnNarrowScreen ? {openNarrowScreen: false} : {open: false},
	},
	];
	const params: CloseSidePanelParams = {isNarrowScreen: shouldCloseOnNarrowScreen};
	API.write(WRITE_COMMANDS.CLOSE_SIDE_PANEL, params, {optimisticData});
	}

We return null if the shouldHideHelpButton === true , so help button not showing.

App/src/components/SidePanel/HelpComponents/HelpButton.tsx

Lines 22 to 24 in 6871ba9

	if (shouldHideHelpButton) {
	return null;
	}

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

Simplest way to to fix this issue we can initialize the ONYXKEYS.NVP_SIDE_PANEL as we do for some other keys as well.

We can add following code here

App/src/setup/index.ts

Line 51 in 6871ba9

[ONYXKEYS.TALK_TO_AI_SALES]: {isLoading: false, isTalkingToAISales: false},

initialKeyStates: {
           ....
            [ONYXKEYS.NVP_SIDE_PANEL]: {},
        },

By initializing ONYXKEYS.NVP_SIDE_PANEL as mention above, this key will always be present in the application, simplifying checks to only determine whether the help panel is open. This ensures consistent behavior and eliminates the need to handle cases where the key might be undefined.

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

None

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.

[nkdengineer]

@suneox friendly bump here

Note: adding ONYXKEYS.NVP_SIDE_PANEL from the beginning will make the condition sidePanelNVP always true and that condition will be redundant

App/src/hooks/useSidePanel.ts

Line 46 in 6871ba9

const shouldHideHelpButton = !sidePanelNVP || !shouldHideSidePanel || isLanguageUnsupported;

[suneox]

Thank you for all the proposals. I’ll take a look at this one today