refactor: Upgrade to React 17 (apache#31961)

.github/workflows/dependency-review.yml

@@ -30,6 +30,7 @@ jobs:
         uses: actions/checkout@v4
       - name: "Dependency Review"
         uses: actions/dependency-review-action@v4
+        continue-on-error: true
         with:
           fail-on-severity: critical
           # compatible/incompatible licenses addressed here: https://www.apache.org/legal/resolved.html

UPDATING.md

@@ -41,6 +41,7 @@ assists people when migrating to a new version.
 - [29163](https://github.com/apache/superset/pull/29163) Removed the `SHARE_QUERIES_VIA_KV_STORE` and `KV_STORE` feature flags and changed the way Superset shares SQL Lab queries to use permalinks. The legacy `/kv` API was removed but we still support legacy links in 5.0. In 6.0, only permalinks will be supported.
 - [25166](https://github.com/apache/superset/pull/25166) Changed the default configuration of `UPLOAD_FOLDER` from `/app/static/uploads/` to `/static/uploads/`. It also removed the unused `IMG_UPLOAD_FOLDER` and `IMG_UPLOAD_URL` configuration options.
 - [30284](https://github.com/apache/superset/pull/30284) Deprecated GLOBAL_ASYNC_QUERIES_REDIS_CONFIG in favor of the new GLOBAL_ASYNC_QUERIES_CACHE_BACKEND configuration. To leverage Redis Sentinel, set CACHE_TYPE to RedisSentinelCache, or use RedisCache for standalone Redis
+- [31961](https://github.com/apache/superset/pull/31961) Upgraded React from version 16.13.1 to 17.0.2. If you are using custom frontend extensions or plugins, you may need to update them to be compatible with React 17.
 
 
 ### Potential Downtime

superset-frontend/babel.config.js

@@ -39,7 +39,6 @@ module.exports = {
       {
         development: process.env.BABEL_ENV === 'development',
         runtime: 'automatic',
-        importSource: '@emotion/react',
       },
     ],
     '@babel/preset-typescript',
@@ -74,12 +73,23 @@ module.exports = {
             corejs: 3,
             loose: true,
             shippedProposals: true,
-            modules: 'commonjs',
+            modules: 'auto',
             targets: { node: 'current' },
           },
         ],
+        [
+          '@babel/preset-react',
+          {
+            development: process.env.BABEL_ENV === 'development',
+            runtime: 'automatic',
+          },
+        ],
+        '@babel/preset-typescript',
+      ],
+      plugins: [
+        'babel-plugin-dynamic-import-node',
+        '@babel/plugin-transform-modules-commonjs',
       ],
-      plugins: ['babel-plugin-dynamic-import-node'],
     },
     // build instrumented code for testing code coverage with Cypress
     instrumented: {

superset-frontend/jest.config.js

@@ -35,6 +35,7 @@ module.exports = {
   testEnvironment: 'jsdom',
   modulePathIgnorePatterns: ['<rootDir>/packages/generator-superset'],
   setupFilesAfterEnv: ['<rootDir>/spec/helpers/setup.ts'],
+  snapshotSerializers: ['@emotion/jest/serializer'],
   testEnvironmentOptions: {
     url: 'http://localhost',
   },
@@ -53,11 +54,14 @@ module.exports = {
     'dist/',
   ],
   coverageReporters: ['lcov', 'json-summary', 'html', 'text'],
-  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json'],
-  snapshotSerializers: ['@emotion/jest/enzyme-serializer'],
   transformIgnorePatterns: [
-    'node_modules/(?!d3-(interpolate|color|time)|remark-gfm|markdown-table|micromark-*.|decode-named-character-reference|character-entities|mdast-util-*.|unist-util-*.|ccount|escape-string-regexp|nanoid|@rjsf/*.|sinon|echarts|zrender|fetch-mock|pretty-ms|parse-ms|ol)',
+    'node_modules/(?!d3-(interpolate|color|time)|remark-gfm|markdown-table|micromark-*.|decode-named-character-reference|character-entities|mdast-util-*.|unist-util-*.|ccount|escape-string-regexp|nanoid|@rjsf/*.|sinon|echarts|zrender|fetch-mock|pretty-ms|parse-ms|ol|@babel/runtime|@emotion|cheerio|cheerio/lib|parse5|dom-serializer|entities|htmlparser2|rehype-sanitize|hast-util-sanitize|unified|unist-.*|hast-.*|rehype-.*|remark-.*|mdast-.*|micromark-.*|parse-entities|property-information|space-separated-tokens|comma-separated-tokens|bail|devlop|zwitch|longest-streak|jest-enzyme)',
   ],
+  preset: 'ts-jest',
+  transform: {
+    '^.+\\.(js|jsx|ts|tsx)$': 'babel-jest',
+  },
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
   globals: {
     __DEV__: true,
     caches: true,