Upgrade Storybook to v7, move builder to Vite

[ryanclark]

This upgrades Storybook to v7 and moves it over to use Vite as a builder instead of Webpack.

I had to remove some usage of window.msw and move it over to using the storybook msw addon, but other than that it was quite painless.

Timings

Builds
Webpack - 21s
Vite - 2.7

To the browser opened & something rendered on screen
Webpack - 23.4s
Vite - 9.1s

It actually fixed some stories too

Before:

Now:

Note: I had to remove the (unnecessary) XML header from some SVGs as Vite wasn't liking them

[zmb3]

The first access list story fails for me:

TypeError: Cannot destructure property 'worker' of 'window.msw' as it is undefined.
    at http://localhost:9002/@fs/Users/zmb/src/teleport/e/web/teleport/src/AccessListManagement/AccessLists/AccessLists.story.tsx:18:3

Additionally, not sure if this matters, but I do see this warning:

The CJS build of Vite's Node API is deprecated. See https://vitejs.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details.

I see some other failures not related to window.msw:

Failed to fetch dynamically imported module: http://localhost:9002/packages/teleport/src/TrustedClusters/TrustedClusters.story.tsx

And another on authndialog-loaded:

[plugin:storybook:react-docgen-plugin] /Users/zmb/src/teleport/web/packages/teleport/src/TrustedClusters/empty.png: Unexpected character '�'. (1:0)

  4 | IHDR�"����bS� IDATx��it#�u�ْlI��n-���$��@�$��
/Users/zmb/src/teleport/web/packages/teleport/src/TrustedClusters/assets.js:1:0
1  |  import emptyPng from './empty.png';
   |  ^
2  |  export { emptyPng };

[zmb3]

(My mistake for not checking out the corresponding e branch)

[gzdunek]

It looks like instead of renaming .js stories to .jsx, only .jsx were added.

[ravicious]

As I mentioned in #34450, msw-storybook-addon has some problems with resetting the handlers between stories when using res.once.

For example, if you open the Access List story and then open "Empty with Igs", which uses res.once, other Access List stories will return 404 from cfg.getAccessManagementListUrl(). The workaround is to refresh the page between each story.

Now, the Access List story doesn't need to use res.once at all, it can just use res instead and the issue is gone. I already fixed it in the teleport.e branch. Other than that, we only have four stories which use res.once, so perhaps for now we can live with this problem. The issue in msw-storybook-addon repo doesn't mention any solutions to this. mswjs/msw-storybook-addon#82

[ravicious]

The stories for DocumentCluster in teleterm fail with "ambiguous import: FileTransferDirection" and I didn't have time to investigate this. Maybe it's a matter of updating this branch with master?

[kimlisa]

@ryanclark it looks like you're using chrome right? how did you get localhost to work for you?

[ravicious]

@avatus Regarding your question as to what work is left to in this PR, here's what I see:

• Before touching anything else, reconcile the stories that were renamed from .js to .jsx. Upgrade Storybook to v7, move builder to Vite #37331 (comment) This probably boils down to just removing the .js version.
  • It might be beneficial to amend those changes into 1c81e4b so that git properly sees that those stories were renamed – this should help with bringing this branch up to date.
• Merge master and address any conflicts.
• Bring https://github.com/gravitational/teleport.e/pull/3256 up to date and replace new calls to worker.use with proper usage of msw.
• There's the possibility that we'll run into some new issues.

I just quickly ran git merge master on this branch as it is right now and it doesn't look that scary. There are conflicts in build/package.json, but resolving them should be easy – pick the version from master and then manually bump the versions just as they are currently bumped in this PR. Possibly install new minor/major versions of v7 that were released since this PR was created.

[ravicious]

For a sec I thought these changes to svg are not necessary, but Ryan mentioned in the PR description that they're needed.

[kimlisa]

closing in favor of #44041