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?