[HOLD for payment 2022-01-25] Storybook - Errors appear in the JS console when tap any default page Canvas/ Docs

[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!

---

Action Performed:

1. Go to https://staging.new.expensify.com/docs/index.html
   and verify that you can see the storybook docs with the themes matching the screenshots below.
2. Canvas / Header/ Default
3. Canvas / ButtonWithDropdwn/ Fefault
4. Canvas/ MenuItem/ Default
5. Repeat step 2-4 for Docs tab
6. Go to HeaderWithCloseButton

Expected Result:

Verify that no errors appear in the JS console and HeaderWithCloseButton component renders without a problem.

Actual Result:

Errors appear in the JS console and the HeaderWithCloseButton component does not render due to an error.

Workaround:

Unknown

Platform:

Where is this issue occurring?

• Web

Version Number: 1.1. 29.1

Reproducible in staging?: Yes

Reproducible in production?: Yes

Logs: https://stackoverflow.com/c/expensify/questions/4856

Notes/Photos/Videos: Any additional supporting documentation

Expensify/Expensify Issue URL: Applause

Issue reported by:

Slack conversation:

Issue was found when executing: #7154

View all open jobs on GitHub

[MelvinBot]

Triggered auto assignment to @mountiny (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[mountiny]

When testing locally as well as on staging, there are the following errors showing up in the console:

I could not replicate the same errors which are shown on staging in dev (running, not built storybook).

I have updated the issue description to also include the broken scenario for HeaderWithCloseButton component, where the translate props are not passed.

It might be trickier to identify the other error, but it would be nice to get someone External to look into this, it is a low priority task.

cc @roryabraham since you have worked on the recent rehaul of the Storybook.

[MelvinBot]

Triggered auto assignment to @NicMendonca (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[parasharrajat]

Proposal

1. HeaderWithCloseButton component usages withLocalize HOC which depends on Onyx data vai withOnyx to work properly.
2. We changed our app logic to use the Context-Provider pattern to speed up the app and WithLocalize also went through this evolution.
3. Thus as a result it requires LocaleContextProvider in the parent Component Tree to work.
4. In our stores, we do not wrap HeaderWithCloseButton story in this provider and thus it fails.

The Fix

1. Now, we can create a local decorator for this story only but I believe that other components may also need this.
2. Thus I will create a global decorator in .storybook/preview.js file.

const decorators = [
    Story => (
        <ComposeProviders
            components={[
                OnyxProvider,
                LocaleContextProvider,
            ]}
        >
            <Story />
        </ComposeProviders>
    ),
];

3. Now, LocaleContextProvider internally usages withOnyx and WithOnyx hocs will prevent the render on any child component until the Onyx's internal state is ready. So we need to also initialize the Onyx.
4. We can easily pollute the global scope as we don't want any shutdown mechanism for stories.
   we can simply do that in preview.js via

Onyx.init({
    keys: ONYXKEYS,
});

5. And adding the OnyxProvider in the decorator shown in the above snippets.

This will fix the errors and as a plus, we can create stories for any component that depends on OnyxData. Just add the mock data in Onyx.Init statement and voila.

[mountiny]

@parasharrajat This looks great, but just to clarify. Will this fix the errors shown in the console, which do not have necessarily any negative effect on the app afaik, but we would still like to get rid of them.

[parasharrajat]

Yeah. It will resolve all of them for storyBook. But it does not affect the Warnings that are coming in our app. Those warnings will be removed when we will update Urban Airship lib.

[mountiny]

@parasharrajat Great! Feel free to start working on the PR. Nicole will create the jobs later on.

[NicMendonca]

Sorry for the delay everyone! Here is the job: https://www.upwork.com/jobs/~0132a07ec55f3a9411

[MelvinBot]

Current assignee @parasharrajat is eligible for the Exported assigner, not assigning anyone new.

[MelvinBot]

Current assignee @mountiny is eligible for the Exported assigner, not assigning anyone new.

[mountiny]

No worries @NicMendonca, this one was a speedy one. @parasharrajat Can you please apply for the job?

[parasharrajat]

Done.

[mountiny]

@NicMendonca Can you please hire Rajat for this job? Thank you very much!

[NicMendonca]

hired!

[botify]

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.1.30-3 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• fix: Stories rendering issues #7222

If no regressions arise, payment will be issued on 2022-01-25. 🎊

[NicMendonca]

@parasharrajat paid! thank you!

[kbecciv]

@mountiny Issue reproduced during Regression with build 1.1.46.0

Recording.113.mp4

[mountiny]

@kbecciv Can you please comment on some PRs from the release which worked with Storybook, there is a couple I am not sure which this is related to, but this is an old issue and if this is a regression that now appeared in staging, it must be related to the deployed PRs and not here. I will close this issue, thank you!