[$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.

[melvin-bot]

📣 @mollfpr 🎉 An offer has been automatically sent to your Upwork account for the Reviewer role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job

[VickyStash]

Hi, I'm Viktoryia from Callstack - expert contributor group - and I would like to work on this issue.

[VickyStash]

I've created a Draft PR!

But there is a discussion about possible updates for the withNavigationFallback HOC which is going to be used. So I think it makes sense to wait till this is resolved.

[melvin-bot]

@VickyStash, @mollfpr, @MitchExpensify, @grgia Whoops! This issue is 2 days overdue. Let's get this updated quick!

[VickyStash]

There is still a discussion about the implementation of this ticket.
@ntdiary Suggested another idea regarding this issue #30072 (review) , though there can be some downsides

[ntdiary]

@VickyStash, haha, those are just preliminary thoughts, and I'm afraid I won't have time this week to do more investigation, please feel free to move forward with whatever solution you prefer. 😄

[mollfpr]

@MitchExpensify This issue is ready for payment. Could you post the payment summary so I can do the manual request? Thank you!

[mollfpr]

The PR that introduced the bug has been identified. Link to the PR:

#28338

The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:

https://github.com/Expensify/App/pull/28338/files#r1408901624

A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:

We already have the checklist.

• If the PR modifies a component related to any of the existing Storybook stories, I tested and verified all stories for that component are still working as expected.

Determine if we should create a regression test for this bug.
If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.

We don't need one; the issue should be caught while PR is reviewed.

[MitchExpensify]

Payment summary:

• C+ @mollfpr $500 (NewDot request)

[JmillsExpensify]

$500 payment approved for @mollfpr based on comment above.