Upgrade to React 18 (#1146)

* bump dependencies

* upgrade to React 18

* fix tests

* cleanup babel preset

* fix typo setActionAltertInfo -> setActionAlertInfo

* cleanup some progress states in ChangeDetectionState

* bump dependencies

.changeset/giant-kangaroos-guess.md

@@ -0,0 +1,35 @@
+---
+'@finos/babel-preset-legend-studio': patch
+'@finos/eslint-plugin-legend-studio': patch
+'@finos/legend-application': patch
+'@finos/legend-art': patch
+'@finos/legend-dev-utils': patch
+'@finos/legend-extension-dsl-data-space': patch
+'@finos/legend-extension-dsl-diagram': patch
+'@finos/legend-extension-dsl-persistence': patch
+'@finos/legend-extension-dsl-text': patch
+'@finos/legend-extension-external-format-json-schema': patch
+'@finos/legend-extension-external-language-morphir': patch
+'@finos/legend-extension-external-store-service': patch
+'@finos/legend-extension-mapping-generation': patch
+'@finos/legend-graph': patch
+'@finos/legend-graph-extension-collection': patch
+'@finos/legend-manual-tests': patch
+'@finos/legend-model-storage': patch
+'@finos/legend-query': patch
+'@finos/legend-query-app': patch
+'@finos/legend-query-deployment': patch
+'@finos/legend-server-depot': patch
+'@finos/legend-server-sdlc': patch
+'@finos/legend-shared': patch
+'@finos/legend-studio': patch
+'@finos/legend-studio-app': patch
+'@finos/legend-studio-deployment': patch
+'@finos/legend-studio-extension-management-toolkit': patch
+'@finos/legend-studio-extension-query-builder': patch
+'@finos/legend-taxonomy': patch
+'@finos/legend-taxonomy-app': patch
+'@finos/legend-taxonomy-deployment': patch
+'@finos/legend-tracer-extension-zipkin': patch
+'@finos/stylelint-config-legend-studio': patch
+---

.changeset/many-beers-matter.md

@@ -0,0 +1,31 @@
+---
+'@finos/babel-preset-legend-studio': patch
+'@finos/eslint-plugin-legend-studio': patch
+'@finos/legend-application': patch
+'@finos/legend-art': patch
+'@finos/legend-dev-utils': patch
+'@finos/legend-extension-dsl-data-space': patch
+'@finos/legend-extension-dsl-diagram': patch
+'@finos/legend-extension-dsl-persistence': patch
+'@finos/legend-extension-dsl-text': patch
+'@finos/legend-extension-external-format-json-schema': patch
+'@finos/legend-extension-external-language-morphir': patch
+'@finos/legend-extension-external-store-service': patch
+'@finos/legend-extension-mapping-generation': patch
+'@finos/legend-graph': patch
+'@finos/legend-graph-extension-collection': patch
+'@finos/legend-manual-tests': patch
+'@finos/legend-model-storage': patch
+'@finos/legend-query': patch
+'@finos/legend-query-app': patch
+'@finos/legend-server-depot': patch
+'@finos/legend-server-sdlc': patch
+'@finos/legend-shared': patch
+'@finos/legend-studio': patch
+'@finos/legend-studio-app': patch
+'@finos/legend-studio-extension-management-toolkit': patch
+'@finos/legend-studio-extension-query-builder': patch
+'@finos/legend-taxonomy': patch
+'@finos/legend-taxonomy-app': patch
+'@finos/legend-tracer-extension-zipkin': patch
+---

.changeset/stale-spiders-grin.md

@@ -0,0 +1,5 @@
+---
+'@finos/babel-preset-legend-studio': major
+---
+
+Remove `@babel/plugin-proposal-class-properties` now that it's moved to `stage 4`. Also remove support for `@babel/plugin-transform-runtime`.

.changeset/tough-avocados-appear.md

@@ -0,0 +1,26 @@
+---
+'@finos/legend-application': patch
+'@finos/legend-art': patch
+'@finos/legend-dev-utils': patch
+'@finos/legend-extension-dsl-data-space': patch
+'@finos/legend-extension-dsl-diagram': patch
+'@finos/legend-extension-dsl-persistence': patch
+'@finos/legend-extension-dsl-text': patch
+'@finos/legend-extension-external-format-json-schema': patch
+'@finos/legend-extension-external-language-morphir': patch
+'@finos/legend-extension-external-store-service': patch
+'@finos/legend-extension-mapping-generation': patch
+'@finos/legend-graph': patch
+'@finos/legend-graph-extension-collection': patch
+'@finos/legend-manual-tests': patch
+'@finos/legend-model-storage': patch
+'@finos/legend-query': patch
+'@finos/legend-server-depot': patch
+'@finos/legend-server-sdlc': patch
+'@finos/legend-shared': patch
+'@finos/legend-studio': patch
+'@finos/legend-studio-extension-management-toolkit': patch
+'@finos/legend-studio-extension-query-builder': patch
+'@finos/legend-taxonomy': patch
+'@finos/legend-tracer-extension-zipkin': patch
+---

.changeset/weak-pianos-give.md

@@ -0,0 +1,31 @@
+---
+'@finos/babel-preset-legend-studio': patch
+'@finos/eslint-plugin-legend-studio': patch
+'@finos/legend-application': patch
+'@finos/legend-art': patch
+'@finos/legend-dev-utils': patch
+'@finos/legend-extension-dsl-data-space': patch
+'@finos/legend-extension-dsl-diagram': patch
+'@finos/legend-extension-dsl-persistence': patch
+'@finos/legend-extension-dsl-text': patch
+'@finos/legend-extension-external-format-json-schema': patch
+'@finos/legend-extension-external-language-morphir': patch
+'@finos/legend-extension-external-store-service': patch
+'@finos/legend-extension-mapping-generation': patch
+'@finos/legend-graph': patch
+'@finos/legend-graph-extension-collection': patch
+'@finos/legend-manual-tests': patch
+'@finos/legend-model-storage': patch
+'@finos/legend-query': patch
+'@finos/legend-query-app': patch
+'@finos/legend-server-depot': patch
+'@finos/legend-server-sdlc': patch
+'@finos/legend-shared': patch
+'@finos/legend-studio': patch
+'@finos/legend-studio-app': patch
+'@finos/legend-studio-extension-management-toolkit': patch
+'@finos/legend-studio-extension-query-builder': patch
+'@finos/legend-taxonomy': patch
+'@finos/legend-taxonomy-app': patch
+'@finos/legend-tracer-extension-zipkin': patch
+---

babel.config.cjs

@@ -35,12 +35,5 @@ module.exports = (api) => {
         },
       ],
     ],
-    // For @babel/plugin-proposal-class-properties, to work well with Mobx, we need to make sure setting
-    // `loose = false`, but we can also use the new transpiler assumptions in Babel >=7.13.0
-    // See https://babeljs.io/docs/en/babel-plugin-proposal-class-properties#loose
-    // See https://mobx.js.org/installation.html#use-spec-compliant-transpilation-for-class-properties
-    assumptions: {
-      setPublicClassFields: false,
-    },
   };
 };

fixtures/legend-mock-server/package.json

@@ -33,7 +33,7 @@
   "devDependencies": {
     "@finos/legend-dev-utils": "workspace:*",
     "cross-env": "7.0.3",
-    "eslint": "8.14.0",
+    "eslint": "8.15.0",
     "nodemon": "2.0.16",
     "npm-run-all": "4.1.5",
     "rimraf": "3.0.2",

package.json

@@ -76,12 +76,11 @@
     "last 2 Chrome versions"
   ],
   "resolutions": {
-    "@types/react": "^17.0.0",
     "async": "^2.6.4",
     "glob-parent": "^6.0.1"
   },
   "devDependencies": {
-    "@actions/core": "1.7.0",
+    "@actions/core": "1.8.0",
     "@actions/github": "5.0.1",
     "@babel/core": "7.17.10",
     "@changesets/cli": "2.22.0",
@@ -94,11 +93,11 @@
     "chalk": "5.0.1",
     "cross-env": "7.0.3",
     "envinfo": "7.8.1",
-    "eslint": "8.14.0",
+    "eslint": "8.15.0",
     "fs-extra": "10.1.0",
-    "husky": "7.0.4",
+    "husky": "8.0.0",
     "inquirer": "8.2.4",
-    "jest": "28.0.3",
+    "jest": "28.1.0",
     "lint-staged": "12.4.1",
     "micromatch": "4.0.5",
     "npm-run-all": "4.1.5",

packages/babel-preset/README.md

@@ -5,7 +5,6 @@ This preset includes the following presets and plugins:
 - [@babel/preset-env](https://babeljs.io/docs/en/babel-preset-env)
 - [@babel/preset-react](https://babeljs.io/docs/en/babel-preset-react)
 - [@babel/preset-typescript](https://babeljs.io/docs/en/babel-preset-typescript)
-- [@babel/plugin-transform-runtime](https://babeljs.io/docs/en/babel-plugin-transform-runtime)
 
 And with the `development` option:
 
@@ -15,7 +14,7 @@ And with the `development` option:
 
 ## Options
 
-const { development, useTypescript, useReact, useBabelRuntime } = opts;
+const { development, useTypescript, useReact } = opts;
 
 ### `development`
 
@@ -36,11 +35,3 @@ This toggles support for Typescript. Note that `babel` [does not do type-checkin
 `boolean`, defaults to `false`
 
 This toggles support for React. Note that we use `automatic` for runtime option, which auto-import functions from `React@17` that helps with transforming JSX.
-
-### `useBabelRuntime`
-
-`boolean`, defaults to `false`
-
-When enabled, Babel's injected helper code will be reused and not included in the bundled code, as such this helps [save on bundle size](https://babeljs.io/docs/en/babel-plugin-transform-runtime#usebuiltins). However, this requires `@babel/runtime` as a production dependency (since it's for the "runtime").
-
-> Note that this option is in useful only when we bundle code. As such, if we use other compiler to compile/transpile, we don't need this option.

packages/babel-preset/index.js

@@ -30,7 +30,6 @@ module.exports = declare((api, opts) => {
     useTypescript = false,
     useReact = false,
     useReactFastRefresh = false,
-    useBabelRuntime = false,
   } = opts;
 
   const config = {
@@ -48,42 +47,18 @@ module.exports = declare((api, opts) => {
           runtime: 'automatic', // use React@17 JSX transform
         },
       ],
-      function () {
-        return {
-          plugins: [
-            // NOTE: both of these proposals are in stage 3, so we should keep track of when we need to remove this plugin
-            // See https://github.com/tc39/proposal-class-fields
-            // See https://github.com/tc39/proposal-static-class-features
-            '@babel/plugin-proposal-class-properties',
-          ],
-        };
-      },
       useTypescript && [
         '@babel/preset-typescript',
         {
           onlyRemoveTypeImports: true,
           // Allow using `declare` keyword for class fields.
-          // NOTE: for this to work, this plugin has to run before other class modifier plugins like
-          // `@babel/plugin-proposal-class-properties`; `babel` should want about this if it happens.
           // `allowDeclareFields` will be `true` by default in babel 8
           // See https://babeljs.io/docs/en/babel-preset-typescript#allowdeclarefields
           allowDeclareFields: true,
         },
       ],
     ].filter(Boolean),
-    plugins: [
-      useBabelRuntime && [
-        // Reduce bundle size by referencing `babel` helpers from `@babel/runtime`
-        // See https://babeljs.io/docs/en/babel-plugin-transform-runtime
-        '@babel/plugin-transform-runtime',
-        {
-          version: require('@babel/runtime/package.json').version,
-          // We should turn this on once the lowest version of Node LTS supports ES Modules.
-          // See https://babeljs.io/docs/en/babel-plugin-transform-runtime#useesmodules
-          useESModules: true,
-        },
-      ],
-    ].filter(Boolean),
+    plugins: [],
     overrides: [
       {
         test: (filename) => filename && isJSXSourceFile(filename),

packages/babel-preset/package.json

@@ -32,18 +32,15 @@
   },
   "dependencies": {
     "@babel/helper-plugin-utils": "7.16.7",
-    "@babel/plugin-proposal-class-properties": "7.16.7",
-    "@babel/plugin-transform-runtime": "7.17.10",
-    "@babel/plugin-transform-typescript": "7.16.8",
     "@babel/preset-env": "7.17.10",
     "@babel/preset-react": "7.16.7",
     "@babel/preset-typescript": "7.16.7",
     "@babel/runtime": "7.17.9",
-    "react-refresh": "0.11.0"
+    "react-refresh": "0.13.0"
   },
   "devDependencies": {
     "cross-env": "7.0.3",
-    "eslint": "8.14.0",
+    "eslint": "8.15.0",
     "rimraf": "3.0.2",
     "typescript": "4.6.4"
   },

packages/eslint-plugin/package.json

@@ -39,7 +39,7 @@
     "eslint-plugin-import": "2.26.0",
     "eslint-plugin-prettier": "4.0.0",
     "eslint-plugin-react": "7.29.4",
-    "eslint-plugin-react-hooks": "4.4.0",
+    "eslint-plugin-react-hooks": "4.5.0",
     "micromatch": "4.0.5",
     "prettier": "2.6.2"
   },

packages/legend-application/package.json

@@ -47,15 +47,15 @@
     "@finos/legend-graph": "workspace:*",
     "@finos/legend-shared": "workspace:*",
     "@types/css-font-loading-module": "0.0.7",
-    "@types/react": "17.0.44",
-    "@types/react-dom": "17.0.16",
+    "@types/react": "18.0.9",
+    "@types/react-dom": "18.0.3",
     "@types/react-router-dom": "5.3.2",
     "history": "5.3.0",
     "mobx": "6.5.0",
-    "mobx-react-lite": "3.3.0",
+    "mobx-react-lite": "3.4.0",
     "monaco-editor": "0.33.0",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
+    "react": "18.1.0",
+    "react-dom": "18.1.0",
     "react-resize-detector": "7.0.0",
     "react-router": "5.2.1",
     "react-router-dom": "5.3.0",
@@ -64,15 +64,15 @@
   "devDependencies": {
     "@finos/legend-dev-utils": "workspace:*",
     "cross-env": "7.0.3",
-    "eslint": "8.14.0",
-    "jest": "28.0.3",
+    "eslint": "8.15.0",
+    "jest": "28.1.0",
     "npm-run-all": "4.1.5",
     "rimraf": "3.0.2",
     "sass": "1.51.0",
     "typescript": "4.6.4"
   },
   "peerDependencies": {
-    "react": "^17.0.0"
+    "react": "^18.0.0"
   },
   "publishConfig": {
     "directory": "build/publishContent"

packages/legend-application/src/components/ActionAlert.tsx

@@ -41,7 +41,7 @@ const ActionAlertInner = observer((props: { info: ActionAlertInfo }) => {
   const { title, message, prompt, type, onClose, onEnter, actions } = info;
   const handleClose = (): void => {
     onClose?.();
-    applicationStore.setActionAltertInfo(undefined);
+    applicationStore.setActionAlertInfo(undefined);
   };
   const handleEnter = (): void => onEnter?.();
   const handleSubmit = (): void => {

packages/legend-application/src/stores/ApplicationStore.ts

@@ -121,7 +121,7 @@ export class ApplicationStore<T extends LegendApplicationConfig> {
     makeAutoObservable(this, {
       navigator: false,
       setBlockingAlert: action,
-      setActionAltertInfo: action,
+      setActionAlertInfo: action,
       setNotification: action,
       notify: action,
       notifySuccess: action,
@@ -163,7 +163,7 @@ export class ApplicationStore<T extends LegendApplicationConfig> {
     this.blockingAlertInfo = alertInfo;
   }
 
-  setActionAltertInfo(alertInfo: ActionAlertInfo | undefined): void {
+  setActionAlertInfo(alertInfo: ActionAlertInfo | undefined): void {
     if (this.actionAlertInfo && alertInfo) {
       this.notifyIllegalState(
         'Action alert is stacked: new alert is invoked while another one is being displayed',