refactor(storybok): upgrade to webpack5 in storybook of plugins

superset-frontend/package.json

@@ -193,7 +193,6 @@
     "rison": "^0.1.1",
     "scroll-into-view-if-needed": "^2.2.28",
     "shortid": "^2.2.6",
-    "src": "file:./src",
     "urijs": "^1.19.6",
     "use-immer": "^0.6.0",
     "use-query-params": "^1.1.9",

superset-frontend/packages/superset-ui-core/test/chart/components/ChartDataProvider.test.tsx

@@ -21,7 +21,7 @@ import React from 'react';
 import { shallow } from 'enzyme';
 import ChartClient from '@superset-ui/core/src/chart/clients/ChartClient';
 import ChartDataProvider, {
-  Props,
+  ChartDataProviderProps,
 } from '@superset-ui/core/src/chart/components/ChartDataProvider';
 import { bigNumberFormData } from '../fixtures/formData';
 
@@ -70,12 +70,12 @@ describe('ChartDataProvider', () => {
     mockLoadQueryData.mockClear();
   });
 
-  const props: Props = {
+  const props: ChartDataProviderProps = {
     formData: { ...bigNumberFormData },
     children: () => <div />,
   };
 
-  function setup(overrideProps?: Partial<Props>) {
+  function setup(overrideProps?: Partial<ChartDataProviderProps>) {
     return shallow(<ChartDataProvider {...props} {...overrideProps} />);
   }
 

superset-frontend/packages/superset-ui-core/test/chart/components/MockChartPlugins.tsx

@@ -19,8 +19,7 @@
 
 /* eslint-disable max-classes-per-file */
 import React from 'react';
-import { QueryFormData } from '@superset-ui/core';
-import { ChartMetadata, ChartPlugin } from '@superset-ui/core/src/chart';
+import { QueryFormData, ChartMetadata, ChartPlugin } from '@superset-ui/core';
 
 const DIMENSION_STYLE = {
   fontSize: 36,

superset-frontend/packages/superset-ui-core/test/chart/components/createLoadableRenderer.test.tsx

@@ -31,7 +31,7 @@ describe('createLoadableRenderer', () => {
   let loadChartSuccess = jest.fn(() => Promise.resolve(TestComponent));
   let render: (loaded: { Chart: React.ComponentType }) => JSX.Element;
   let loading: () => JSX.Element;
-  let LoadableRenderer: LoadableRendererType<{}, {}>;
+  let LoadableRenderer: LoadableRendererType<{}>;
   let restoreConsole: RestoreConsole;
 
   beforeEach(() => {

superset-frontend/packages/superset-ui-demo/.storybook/main.js

@@ -1,73 +1,28 @@
-const path = require('path');
-const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
-const { lstatSync, readdirSync } = require('fs');
-
-// find @superset-ui packages
-const basePath = path.resolve(__dirname, '../../../node_modules/@superset-ui');
-const packages = readdirSync(basePath).filter(name => {
-  const stat = lstatSync(path.join(basePath, name));
-  return stat.isSymbolicLink();
-});
-
-const PLUGIN_PACKAGES_PATH_REGEXP = new RegExp(
-  `${path.resolve(
-    __dirname,
-    '../../../plugins/(legacy-)*(plugin|preset)-',
-  )}.+/src`,
-);
+const customConfig = require('../../../webpack.config.js');
 
 module.exports = {
+  core: {
+    builder: 'webpack5',
+  },
   addons: [
     '@storybook/addon-knobs',
     'storybook-addon-jsx',
     '@storybook/addon-actions',
     '@storybook/addon-links',
   ],
   stories: ['../storybook/stories/**/*Stories.[tj]sx'],
-  webpackFinal: config => {
-    // Make sure babel is applied to the package src
-    // These are excluded by the default rule
-    // because they reside in node_modules
-    config.module.rules.push({
-      include: PLUGIN_PACKAGES_PATH_REGEXP,
-      exclude: /node_modules/,
-      test: /\.jsx?$/,
-      use: config.module.rules[0].use,
-    });
-
-    config.module.rules.push({
-      test: /\.tsx?$/,
-      use: [
-        {
-          loader: require.resolve('ts-loader'),
-          options: {
-            transpileOnly: true,
-          },
-        },
-      ],
-    });
-
-    config.plugins.unshift(new ForkTsCheckerWebpackPlugin());
-
-    config.resolve.extensions.push('.ts', '.tsx');
-
-    // Let webpack know where to find the source code
-    Object.assign(config.resolve.alias, {
-      ...packages.reduce(
-        (acc, name) => ({
-          ...acc,
-          [`@superset-ui/${name}$`]: path.join(basePath, name, 'src'),
-        }),
-        {},
-      ),
-    });
-
-    config.devtool = 'eval-cheap-module-source-map';
-    config.devServer = {
-      ...config.devServer,
-      stats: 'minimal',
-    };
-
-    return config;
+  webpackFinal: config => ({
+    ...config,
+    module: {
+      ...config.module,
+      rules: customConfig.module.rules,
+    },
+    resolve: {
+      ...config.resolve,
+      ...customConfig.resolve,
+    },
+  }),
+  typescript: {
+    reactDocgen: 'none',
   },
 };

superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-table/testData.ts

@@ -16,14 +16,11 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import {
-  ChartDataResponseResult,
-  GenericDataType,
-} from '@superset-ui/core/src';
+import { ChartDataResponseResult, GenericDataType } from '@superset-ui/core';
 import {
   TableChartFormData,
   TableChartProps,
-} from '@superset-ui/plugin-chart-table/src';
+} from '@superset-ui/plugin-chart-table';
 // @ts-ignore
 // eslint-disable-next-line import/extensions
 import birthNamesJson from './birthNames.json';

superset-frontend/packages/superset-ui-demo/storybook/stories/superset-ui-chart/ChartDataProviderStories.tsx

@@ -35,7 +35,7 @@ import {
   sankeyFormData,
   sunburstFormData,
   wordCloudFormData,
-} from '@superset-ui/core/test/chart/fixtures/formData';
+} from '../../../../superset-ui-core/test/chart/fixtures/formData';
 
 import Expandable from '../../shared/components/Expandable';
 import VerifyCORS, { renderError } from '../../shared/components/VerifyCORS';

superset-frontend/packages/superset-ui-demo/storybook/stories/superset-ui-chart/SuperChartStories.tsx

@@ -24,7 +24,7 @@ import {
   DiligentChartPlugin,
   BuggyChartPlugin,
   ChartKeys,
-} from '@superset-ui/core/test/chart/components/MockChartPlugins';
+} from '../../../../superset-ui-core/test/chart/components/MockChartPlugins';
 import ResizableChartDemo from '../../shared/components/ResizableChartDemo';
 
 new DiligentChartPlugin().configure({ key: ChartKeys.DILIGENT }).register();

superset-frontend/packages/superset-ui-demo/storybook/stories/superset-ui-connection/ConnectionStories.tsx

@@ -19,7 +19,7 @@
 
 import React from 'react';
 import { select, text, withKnobs } from '@storybook/addon-knobs';
-import { bigNumberFormData } from '@superset-ui/core/test/chart/fixtures/formData';
+import { bigNumberFormData } from '../../../../superset-ui-core/test/chart/fixtures/formData';
 
 import VerifyCORS, {
   Props as VerifyCORSProps,

superset-frontend/packages/superset-ui-demo/tsconfig.json

@@ -15,6 +15,7 @@
   "include": [
     "storybook",
     "../**/src",
+    "../../packages/superset-ui-core/test",
     "../../plugins/**/src",
     "../../plugins/**/types",
   ]

superset-frontend/plugins/legacy-plugin-chart-country-map/src/countries.ts

@@ -17,53 +17,52 @@
  * under the License.
  */
 
-/* eslint-disable import/no-webpack-loader-syntax, import/no-unresolved */
-import austria from 'file-loader!./countries/austria.geojson';
-import australia from 'file-loader!./countries/australia.geojson';
-import belgium from 'file-loader!./countries/belgium.geojson';
-import brazil from 'file-loader!./countries/brazil.geojson';
-import bulgaria from 'file-loader!./countries/bulgaria.geojson';
-import canada from 'file-loader!./countries/canada.geojson';
-import china from 'file-loader!./countries/china.geojson';
-import denmark from 'file-loader!./countries/denmark.geojson';
-import egypt from 'file-loader!./countries/egypt.geojson';
-import estonia from 'file-loader!./countries/estonia.geojson';
-import france from 'file-loader!./countries/france.geojson';
-import finland from 'file-loader!./countries/finland.geojson';
-import germany from 'file-loader!./countries/germany.geojson';
-import iceland from 'file-loader!./countries/iceland.geojson';
-import india from 'file-loader!./countries/india.geojson';
-import indonesia from 'file-loader!./countries/indonesia.geojson';
-import iran from 'file-loader!./countries/iran.geojson';
-import italy from 'file-loader!./countries/italy.geojson';
-import italy_regions from 'file-loader!./countries/italy_regions.geojson';
-import japan from 'file-loader!./countries/japan.geojson';
-import korea from 'file-loader!./countries/korea.geojson';
-import liechtenstein from 'file-loader!./countries/liechtenstein.geojson';
-import norway from 'file-loader!./countries/norway.geojson';
-import malaysia from 'file-loader!./countries/malaysia.geojson';
-import morocco from 'file-loader!./countries/morocco.geojson';
-import myanmar from 'file-loader!./countries/myanmar.geojson';
-import netherlands from 'file-loader!./countries/netherlands.geojson';
-import peru from 'file-loader!./countries/peru.geojson';
-import poland from 'file-loader!./countries/poland.geojson';
-import portugal from 'file-loader!./countries/portugal.geojson';
-import russia from 'file-loader!./countries/russia.geojson';
-import saudi_arabia from 'file-loader!./countries/saudi_arabia.geojson';
-import singapore from 'file-loader!./countries/singapore.geojson';
-import slovenia from 'file-loader!./countries/slovenia.geojson';
-import sweden from 'file-loader!./countries/sweden.geojson';
-import spain from 'file-loader!./countries/spain.geojson';
-import switzerland from 'file-loader!./countries/switzerland.geojson';
-import syria from 'file-loader!./countries/syria.geojson';
-import thailand from 'file-loader!./countries/thailand.geojson';
-import timorleste from 'file-loader!./countries/timorleste.geojson';
-import uk from 'file-loader!./countries/uk.geojson';
-import ukraine from 'file-loader!./countries/ukraine.geojson';
-import uruguay from 'file-loader!./countries/uruguay.geojson';
-import usa from 'file-loader!./countries/usa.geojson';
-import zambia from 'file-loader!./countries/zambia.geojson';
-import vietnam from 'file-loader!./countries/vietnam.geojson';
+import austria from './countries/austria.geojson';
+import australia from './countries/australia.geojson';
+import belgium from './countries/belgium.geojson';
+import brazil from './countries/brazil.geojson';
+import bulgaria from './countries/bulgaria.geojson';
+import canada from './countries/canada.geojson';
+import china from './countries/china.geojson';
+import denmark from './countries/denmark.geojson';
+import egypt from './countries/egypt.geojson';
+import estonia from './countries/estonia.geojson';
+import france from './countries/france.geojson';
+import finland from './countries/finland.geojson';
+import germany from './countries/germany.geojson';
+import iceland from './countries/iceland.geojson';
+import india from './countries/india.geojson';
+import indonesia from './countries/indonesia.geojson';
+import iran from './countries/iran.geojson';
+import italy from './countries/italy.geojson';
+import italy_regions from './countries/italy_regions.geojson';
+import japan from './countries/japan.geojson';
+import korea from './countries/korea.geojson';
+import liechtenstein from './countries/liechtenstein.geojson';
+import norway from './countries/norway.geojson';
+import malaysia from './countries/malaysia.geojson';
+import morocco from './countries/morocco.geojson';
+import myanmar from './countries/myanmar.geojson';
+import netherlands from './countries/netherlands.geojson';
+import peru from './countries/peru.geojson';
+import poland from './countries/poland.geojson';
+import portugal from './countries/portugal.geojson';
+import russia from './countries/russia.geojson';
+import saudi_arabia from './countries/saudi_arabia.geojson';
+import singapore from './countries/singapore.geojson';
+import slovenia from './countries/slovenia.geojson';
+import sweden from './countries/sweden.geojson';
+import spain from './countries/spain.geojson';
+import switzerland from './countries/switzerland.geojson';
+import syria from './countries/syria.geojson';
+import thailand from './countries/thailand.geojson';
+import timorleste from './countries/timorleste.geojson';
+import uk from './countries/uk.geojson';
+import ukraine from './countries/ukraine.geojson';
+import uruguay from './countries/uruguay.geojson';
+import usa from './countries/usa.geojson';
+import zambia from './countries/zambia.geojson';
+import vietnam from './countries/vietnam.geojson';
 
 export const countries = {
   austria,

superset-frontend/plugins/legacy-plugin-chart-country-map/src/geojson.d.ts

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-declare module 'file-loader!*.geojson' {
+declare module '*.geojson' {
   const geojsonPath: string;
 
   export default geojsonPath;

superset-frontend/webpack.config.js

@@ -282,10 +282,10 @@ const config = {
     minimizer: [new CssMinimizerPlugin(), '...'],
   },
   resolve: {
-    modules: [APP_DIR, 'node_modules', ROOT_DIR],
+    modules: ['node_modules', APP_DIR],
     alias: {
       // TODO: remove alias once React has been upgraaded to v. 17
-      react: path.resolve('./node_modules/react'),
+      react: path.resolve(path.join(APP_DIR, './node_modules/react')),
     },
     extensions: ['.ts', '.tsx', '.js', '.jsx', '.yml'],
     fallback: {
@@ -411,6 +411,10 @@ const config = {
         include: ROOT_DIR,
         loader: 'js-yaml-loader',
       },
+      {
+        test: /\.geojson$/,
+        type: 'asset/resource',
+      },
     ],
   },
   externals: {
@@ -424,7 +428,7 @@ const config = {
 
 // find all the symlinked plugins and use their source code for imports
 Object.entries(packageConfig.dependencies).forEach(([pkg, relativeDir]) => {
-  const srcPath = `./node_modules/${pkg}/src`;
+  const srcPath = path.join(APP_DIR, `./node_modules/${pkg}/src`);
   const dir = relativeDir.replace('file://', '');
 
   if (/^superset-plugin-/.test(pkg) && fs.existsSync(srcPath)) {