Unify the setup and usage of msw in stories

[ravicious]

Currently, we use msw both from window.msw (example) and by importing it from the msw package (example).

The version from the window seems to work only over local IP. If ctx.delay is used in the msw handlers, it seems to have no effect – the responses are returned immediately.

The version from the msw package works only over localhost. It requires a different setup which is currently done per story, but according to the docs it should be done globally in preview.js. ctx.delay seems to work with this version with no problems.

This causes problems when viewing stories because some work only in localhost and some work only over local IP.

I haven't tried to understand the use case behind the window version of msw, but since ctx.delay doesn't seem to work with it, I believe we should migrate to the second approach. Perhaps it's possible to make it support both the local IP and localhost, so that no matter how someone launches the storyybook, the stories will work.

[ravicious]

msw-storybook-addon seems to have problems with resetting the handlers between rendering stories, see mswjs/msw-storybook-addon#82.

In the PollingSuccess story in Discover/ConnectMyComputer/SetupConnect/SetupConnect.story.tsx, I register two separate handlers, one for the first response and one for subsequent responses. If you switch between stories, the handlers do not get reset which causes the story to be in an incorrect state if you switch back to it. The workaround would be to refresh the page with the story, but perhaps we can somehow instruct Storybook to call the equivalent of worker.resetHandlers between rendering stories.

[avatus]

Closed with #44041

[avatus]

@ravicious I believe this is closed with the v8 upgrade. We only pull msw from the package now, and localhost and the IP work for me (assuming correct certs are used). Can you confirm?

[ravicious]

Yep, that's now addressed by correctly initializing msw!