[$500] Bug with HeaderWithBackButton component in a storybook

[puneetlath]

Steps to reproduce:

1. Launch storybook with npm run storybook
2. Open HeaderWithBackButton component
3. You will see Error: Couldn't find a navigation object same as on the screenshot below.

Reasons for the bug:
The reason is this PR, specifically adding of useWaitForNavigation hook usage inside the HeaderWithBackButton component. Since the storybook HeaderWithBackButton doesn't have a navigation context, it's causing the error.

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0198c8e0d974e15827
• Upwork Job ID: 1719406106487824384
• Last Price Increase: 2023-10-31
• Automatic offers:
• mollfpr | Reviewer | 27474657

[melvin-bot]

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

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[VickyStash]

Proposal

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

Couldn't find a navigation object error on the HeaderWithBackButton component screen inside the storybook.

What is the root cause of that problem?

In the storybook, HeaderWithBackButton component doesn't have a navigation context, so using of useWaitForNavigation hook causing the error.

App/src/components/HeaderWithBackButton/index.js

Line 60 in 0a27554

const waitForNavigate = useWaitForNavigation();

The hook usage was added in this PR.

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

Use the same approach as in Composer.stories.js file:
Wrap HeaderWithBackButton component in withNavigationFallback HOC inside HeaderWithBackButton.stories.js file

import React from 'react';
import HeaderWithBackButton from '@components/HeaderWithBackButton';
import withNavigationFallback from '@components/withNavigationFallback';

const HeaderWithBackButtonWithNavigation = withNavigationFallback(HeaderWithBackButton);

/**
 * We use the Component Story Format for writing stories. Follow the docs here:
 *
 * https://storybook.js.org/docs/react/writing-stories/introduction#component-story-format
 */
const story = {
    title: 'Components/HeaderWithBackButton',
    component: HeaderWithBackButtonWithNavigation,
};

function Template(args) {
    // eslint-disable-next-line react/jsx-props-no-spreading
    return <HeaderWithBackButtonWithNavigation {...args} />;
}

...

What alternative solutions did you explore? (Optional)

N/A

[melvin-bot]

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

[melvin-bot]

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

[mollfpr]

The proposal from @VickyStash looks good, and it did solve the issue. 👍

🎀 👀 🎀 C+ reviewed!

[melvin-bot]

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