Storybook: Bump to 6.4.13 (#44091)

* chore(storybook): bump to 6.4.13

* revert(yarnrc): put back double quotes

* chore(storybook): fix issues with resolving process

* revert(yarnrc): put back storybook packageExtensions

* refactor(storybook): move process resolution fix to function. update comments

.yarnrc.yml

@@ -9,28 +9,28 @@ packageExtensions:
   "@mdx-js/loader@1.6.22":
     peerDependencies:
       react: 17.0.1
-  "@storybook/addon-docs@6.4.9":
+  "@storybook/addon-docs@6.4.13":
     peerDependencies:
-      "@storybook/manager-webpack5": 6.4.9
-  "@storybook/addon-essentials@6.4.9":
+      "@storybook/manager-webpack5": 6.4.13
+  "@storybook/addon-essentials@6.4.13":
     peerDependencies:
-      "@storybook/components": 6.4.9
-      "@storybook/core-events": 6.4.9
-      "@storybook/manager-webpack5": 6.4.9
-      "@storybook/theming": 6.4.9
-  "@storybook/core-server@6.4.9":
+      "@storybook/components": 6.4.13
+      "@storybook/core-events": 6.4.13
+      "@storybook/manager-webpack5": 6.4.13
+      "@storybook/theming": 6.4.13
+  "@storybook/core-server@6.4.13":
     peerDependencies:
       "@babel/core": ^7.0.0
-  "@storybook/core@6.4.9":
+  "@storybook/core@6.4.13":
     peerDependencies:
       "@babel/core": ^7.0.0
-      "@storybook/manager-webpack5": 6.4.9
-  "@storybook/csf-tools@6.4.9":
+      "@storybook/manager-webpack5": 6.4.13
+  "@storybook/csf-tools@6.4.13":
     peerDependencies:
       "@babel/core": ^7.0.0
-  "@storybook/react@6.4.9":
+  "@storybook/react@6.4.13":
     peerDependencies:
-      "@storybook/manager-webpack5": 6.4.9
+      "@storybook/manager-webpack5": 6.4.13
   doctrine@3.0.0:
     dependencies:
       assert: 2.0.0

packages/grafana-ui/.storybook/main.ts

@@ -1,4 +1,5 @@
 const path = require('path');
+const { ProvidePlugin } = require('webpack');
 const TerserPlugin = require('terser-webpack-plugin');
 const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 const FilterWarningsPlugin = require('webpack-filter-warnings-plugin');
@@ -48,11 +49,6 @@ module.exports = {
   webpackFinal: async (config: any, { configType }: any) => {
     const isProductionBuild = configType === 'PRODUCTION';
 
-    config.resolve.fallback = {
-      ...(config.resolve.fallback || {}),
-      process: false,
-    };
-
     // remove svg from default storybook webpack 5 config so we can use `raw-loader`
     config.module.rules = config.module.rules.map((rule: any) => {
       if (
@@ -170,6 +166,34 @@ module.exports = {
       })
     );
 
+    config.plugins = fixProcessResolution(config.plugins);
+
+    return config;
+  },
+  // This webpack config only affects the manager (storybook UI) and generally shouldn't need to be changed.
+  // If stories are failing to build check `webpackFinal` property above.
+  managerWebpack: async (config: any) => {
+    config.plugins = fixProcessResolution(config.plugins);
+
     return config;
   },
 };
+
+// Storybook 6.4.13 introduced https://github.com/storybookjs/storybook/pull/17213
+// which appears to prevent resolving correctly with yarn pnp.
+// We can probably remove this in the next patch release.
+function fixProcessResolution(plugins: any[]) {
+  plugins.forEach((p: any, i: number) => {
+    if (p.constructor.name === 'ProvidePlugin') {
+      plugins.splice(
+        i,
+        1,
+        new ProvidePlugin({
+          process: require.resolve('process/browser.js'),
+        })
+      );
+    }
+  });
+
+  return plugins;
+}

packages/grafana-ui/package.json

@@ -97,20 +97,20 @@
     "@rollup/plugin-commonjs": "21.0.1",
     "@rollup/plugin-image": "2.1.1",
     "@rollup/plugin-node-resolve": "13.1.3",
-    "@storybook/addon-a11y": "6.4.9",
-    "@storybook/addon-actions": "6.4.9",
-    "@storybook/addon-docs": "6.4.9",
-    "@storybook/addon-essentials": "6.4.9",
+    "@storybook/addon-a11y": "6.4.13",
+    "@storybook/addon-actions": "6.4.13",
+    "@storybook/addon-docs": "6.4.13",
+    "@storybook/addon-essentials": "6.4.13",
     "@storybook/addon-knobs": "6.4.0",
-    "@storybook/addon-storysource": "6.4.9",
-    "@storybook/addons": "6.4.9",
-    "@storybook/api": "6.4.9",
-    "@storybook/builder-webpack5": "6.4.9",
-    "@storybook/components": "6.4.9",
-    "@storybook/core-events": "6.4.9",
-    "@storybook/manager-webpack5": "6.4.9",
-    "@storybook/react": "6.4.9",
-    "@storybook/theming": "6.4.9",
+    "@storybook/addon-storysource": "6.4.13",
+    "@storybook/addons": "6.4.13",
+    "@storybook/api": "6.4.13",
+    "@storybook/builder-webpack5": "6.4.13",
+    "@storybook/components": "6.4.13",
+    "@storybook/core-events": "6.4.13",
+    "@storybook/manager-webpack5": "6.4.13",
+    "@storybook/react": "6.4.13",
+    "@storybook/theming": "6.4.13",
     "@swc/helpers": "0.3.2",
     "@testing-library/dom": "8.11.1",
     "@testing-library/jest-dom": "5.16.1",
@@ -159,6 +159,7 @@
     "mock-raf": "1.0.1",
     "postcss": "8.4.5",
     "postcss-loader": "6.2.1",
+    "process": "^0.11.10",
     "raw-loader": "4.0.2",
     "react-docgen-typescript-loader": "3.7.2",
     "react-test-renderer": "17.0.2",