Update React to 17.0.2 and adjust other configs

Signed-off-by: Gábor Lipták <gliptak@gmail.com>

Author: gliptak

client/.babelrc

@@ -7,7 +7,13 @@
         }
       }
     ],
-    "@babel/preset-react"
+    [
+      "@babel/preset-react",
+      {
+        "runtime": "automatic",
+        "importSource": "react"
+      }
+    ]
   ],
   "env": {
     "coverage": {

client/karma.config.js

@@ -87,6 +87,12 @@ module.exports = function(karma) {
       mode: 'none',
       module: {
         rules: [
+          {
+            test: /\.mjs$/,
+            resolve: {
+              fullySpecified: false
+            }
+          },
           {
             test: /\.bpmnlintrc$/,
             use: [
@@ -105,7 +111,44 @@ module.exports = function(karma) {
                 use: 'react-svg-loader'
               },
               {
-                test: /\.(css|bpmn|cmmn|dmn|less|xml|png|svg|form|rpa)$/,
+                test: /\.css$/,
+                use: [
+                  'style-loader',
+                  {
+                    loader: 'css-loader',
+                    options: {
+                      modules: {
+                        localIdentName: '[path][name]__[local]--[hash:base64:5]'
+                      }
+                    }
+                  }
+                ]
+              },
+              {
+                test: /\.less$/,
+                use: [
+                  'style-loader',
+                  {
+                    loader: 'css-loader',
+                    options: {
+                      modules: {
+                        localIdentName: '[path][name]__[local]--[hash:base64:5]'
+                      }
+                    }
+                  },
+                  'less-loader'
+                ]
+              },
+              {
+                test: /\.(bpmn|cmmn|dmn|form|rpa)$/,
+                type: 'asset/source'
+              },
+              {
+                test: /\.(woff|woff2|eot|ttf|otf)$/,
+                type: 'asset/inline'
+              },
+              {
+                test: /\.(xml|png|svg)$/,
                 type: 'asset/source'
               }
             ]
@@ -132,6 +175,7 @@ module.exports = function(karma) {
           absoluteBasePath,
           resourcePath
         ],
+        fullySpecified: false,
         alias: {
           'bpmn-js/lib/Modeler': modelers ? 'bpmn-js/lib/Modeler' : 'test/mocks/bpmn-js/Modeler',
           'camunda-bpmn-js/lib/camunda-cloud/Modeler': modelers ? 'camunda-bpmn-js/lib/camunda-cloud/Modeler' : 'test/mocks/bpmn-js/Modeler',

client/package.json

@@ -56,7 +56,7 @@
     "drag-tabs": "^2.3.1",
     "events": "^3.0.0",
     "fast-xml-parser": "^5.2.3",
-    "formik": "2.0.4",
+    "formik": "^2.4.5",
     "ids": "^1.0.0",
     "inherits-browser": "^0.1.0",
     "min-dash": "^4.1.1",
@@ -66,8 +66,8 @@
     "modeler-moddle": "^0.2.0",
     "p-defer": "^4.0.1",
     "p-series": "^3.0.0",
-    "react": "^16.14.0",
-    "react-dom": "^16.14.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "scroll-tabs": "^1.0.1",
     "semver-compare": "^1.0.0",
     "sourcemapped-stacktrace": "^1.1.11",
@@ -81,18 +81,19 @@
     "@babel/preset-env": "^7.25.4",
     "@babel/preset-react": "^7.24.7",
     "@sentry/webpack-plugin": "^3.0.0",
-    "@testing-library/react": "^12.0.0",
+    "@testing-library/react": "^12.1.5",
+    "@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
     "babel-loader": "^9.2.1",
     "babel-plugin-istanbul": "^7.0.0",
     "bpmnlint-loader": "^0.1.6",
     "case-sensitive-paths-webpack-plugin": "^2.1.2",
     "chai": "^4.5.0",
+    "cheerio": "^0.22.0",
     "copy-webpack-plugin": "^12.0.2",
     "cross-env": "^7.0.0",
     "css-loader": "^7.1.2",
     "del-cli": "^6.0.0",
-    "enzyme": "^3.9.0",
-    "enzyme-adapter-react-16": "^1.12.1",
+    "enzyme": "^3.11.0",
     "karma": "^6.4.4",
     "karma-chrome-launcher": "^3.2.0",
     "karma-coverage": "^2.2.1",
@@ -108,7 +109,7 @@
     "npm-run-all2": "^7.0.0",
     "puppeteer": "^24.0.0",
     "react-svg-loader": "^3.0.3",
-    "react-test-renderer": "^16.14.0",
+    "react-test-renderer": "^17.0.2",
     "sinon": "^17.0.1",
     "sinon-chai": "^3.7.0",
     "style-loader": "^4.0.0",

client/src/plugins/camunda-plugin/deployment-tool/DeploymentConfigOverlay.js

@@ -42,9 +42,11 @@ export default class DeploymentConfigOverlay extends React.PureComponent {
     };
 
     this.valuesCache = { ...props.configuration };
+    this._isMounted = true;
   }
 
   componentDidMount = () => {
+    this._isMounted = true;
     const {
       subscribeToFocusChange,
       validator
@@ -60,7 +62,11 @@ export default class DeploymentConfigOverlay extends React.PureComponent {
   };
 
   componentWillUnmount = () => {
+    this._isMounted = false;
     this.props.unsubscribeFromFocusChange();
+    if (this._submitTimeoutId) {
+      clearTimeout(this._submitTimeoutId);
+    }
   };
 
   isConnectionError(code) {
@@ -141,6 +147,10 @@ export default class DeploymentConfigOverlay extends React.PureComponent {
 
     const connectionValidation = await this.props.validator.validateConnection(endpoint);
 
+    if (!this._isMounted) {
+      return;
+    }
+
     if (!hasKeys(connectionValidation)) {
 
       this.externalErrorCodeCache = null;
@@ -418,8 +428,10 @@ export default class DeploymentConfigOverlay extends React.PureComponent {
                           // if you come up with a better solution, please
                           // do a PR.
                           this.isOnBeforeSubmit = true;
-                          setTimeout(() => {
-                            this.isOnBeforeSubmit = false;
+                          this._submitTimeoutId = setTimeout(() => {
+                            if (this._isMounted) {
+                              this.isOnBeforeSubmit = false;
+                            }
                           });
                         } }
                       >

client/src/plugins/camunda-plugin/start-instance-tool/StartInstanceConfigOverlay.js

@@ -81,7 +81,7 @@ export default class StartInstanceConfigOverlay extends React.PureComponent {
                         component={ TextInput }
                         multiline={ true }
                         label="Variables (optional)"
-                        description={ <p>Must be a proper <a href="https://www.w3schools.com/js/js_json_intro.asp">JSON string</a> representing <a href="https://docs.fluxnova.finos.org/manual/latest/reference/rest/process-definition/post-start-process-instance/#starting-a-process-instance-at-its-default-initial-activity">process instance variables</a>.</p> }
+                        description={ <>Must be a proper <a href="https://www.w3schools.com/js/js_json_intro.asp">JSON string</a> representing <a href="https://docs.fluxnova.finos.org/manual/latest/reference/rest/process-definition/post-start-process-instance/#starting-a-process-instance-at-its-default-initial-activity">process instance variables</a>.</> }
                         hint="A JSON string representing the variables the process instance is started with."
                         validate={ (value) => {
                           if (value && value.trim().length > 0) {

client/src/plugins/zeebe-plugin/deployment-plugin/DeploymentPluginOverlay.js

@@ -95,15 +95,18 @@ export default class DeploymentPluginOverlay extends React.PureComponent {
     };
 
     this.connectionChecker = validator.createConnectionChecker();
+    this._isMounted = true;
   }
 
   async componentDidMount() {
+    this._isMounted = true;
     this.connectionChecker.subscribe({
       onComplete: this.handleConnectionCheckResult
     });
   }
 
   componentWillUnmount() {
+    this._isMounted = false;
     this.connectionChecker.unsubscribe();
   }
 
@@ -176,10 +179,16 @@ export default class DeploymentPluginOverlay extends React.PureComponent {
 
     this.connectionChecker.check(endpoint);
 
-    this.setState({ configValues: formValues });
+    if (this._isMounted) {
+      this.setState({ configValues: formValues });
+    }
   };
 
   handleConnectionCheckResult = result => {
+    if (!this._isMounted) {
+      return;
+    }
+
     const { connectionResult, endpointErrors } = result;
 
     if (endpointErrors) {
@@ -197,7 +206,9 @@ export default class DeploymentPluginOverlay extends React.PureComponent {
   };
 
   setConnectionState(connectionState) {
-    this.setState({ connectionState });
+    if (this._isMounted) {
+      this.setState({ connectionState });
+    }
   }
 
   handleFormSubmit = async (values, { setSubmitting }) => {

client/src/plugins/zeebe-plugin/start-instance-plugin/StartInstanceConfigOverlay.js

@@ -74,7 +74,7 @@ export default class StartInstanceConfigOverlay extends React.PureComponent {
                         component={ TextInput }
                         multiline={ true }
                         label="Variables (optional)"
-                        description={ <p>Must be a proper <a href="https://www.w3schools.com/js/js_json_intro.asp">JSON string</a> representing <a href="https://docs.camunda.io/docs/components/concepts/variables/?utm_source=modeler&utm_medium=referral">Zeebe variables</a>.</p> }
+                        description={ <>Must be a proper <a href="https://www.w3schools.com/js/js_json_intro.asp">JSON string</a> representing <a href="https://docs.camunda.io/docs/components/concepts/variables/?utm_source=modeler&utm_medium=referral">Zeebe variables</a>.</> }
                         hint="A JSON string representing the variables the process instance is started with."
                         validate={ (value) => {
                           if (value && value.trim().length > 0) {

client/src/plugins/zeebe-plugin/start-instance-plugin/StartInstancePlugin.js

@@ -37,18 +37,26 @@ export default class StartInstancePlugin extends PureComponent {
     };
 
     this._anchorRef = React.createRef();
+    this._isMounted = true;
   }
 
   componentDidMount() {
+    this._isMounted = true;
     this.props.subscribe('app.activeTabChanged', ({ activeTab }) => {
-      this.setState({
-        activeTab,
-        overlayState: null,
-        activeButton: false
-      });
+      if (this._isMounted) {
+        this.setState({
+          activeTab,
+          overlayState: null,
+          activeButton: false
+        });
+      }
     });
   }
 
+  componentWillUnmount() {
+    this._isMounted = false;
+  }
+
   async startInstance() {
     const {
       activeTab,
@@ -59,7 +67,9 @@ export default class StartInstancePlugin extends PureComponent {
       return;
     }
 
-    this.setState({ activeButton: true });
+    if (this._isMounted) {
+      this.setState({ activeButton: true });
+    }
 
     // (2) get deploy configuration
 
@@ -68,7 +78,9 @@ export default class StartInstancePlugin extends PureComponent {
 
     // (2.1) user cancelled
     if (!deploymentConfig) {
-      this.setState({ activeButton: false });
+      if (this._isMounted) {
+        this.setState({ activeButton: false });
+      }
       return;
     }
 
@@ -78,7 +90,9 @@ export default class StartInstancePlugin extends PureComponent {
     const startConfiguration = await this.getSavedConfiguration(activeTab, 'start-process-instance');
 
     // (3.2) get configuration from user
-    this.setState({ activeButton: true });
+    if (this._isMounted) {
+      this.setState({ activeButton: true });
+    }
 
     const {
       action,
@@ -87,7 +101,9 @@ export default class StartInstancePlugin extends PureComponent {
 
     // (3.3) handle user cancellation
     if (action === 'cancel') {
-      this.setState({ activeButton: false });
+      if (this._isMounted) {
+        this.setState({ activeButton: false });
+      }
       return;
     }
 
@@ -102,23 +118,27 @@ export default class StartInstancePlugin extends PureComponent {
 
     return new Promise(resolve => {
       const onClose = (action, configuration) => {
-        this.setState({
-          overlayState: null,
-          activeButton: false
-        });
+        if (this._isMounted) {
+          this.setState({
+            overlayState: null,
+            activeButton: false
+          });
+        }
 
         // contract: if configuration provided, user closed with O.K.
         // otherwise they canceled it
         return resolve({ action, configuration });
       };
 
-      this.setState({
-        overlayState: {
-          isStart: true,
-          configuration,
-          onClose
-        }
-      });
+      if (this._isMounted) {
+        this.setState({
+          overlayState: {
+            isStart: true,
+            configuration,
+            onClose
+          }
+        });
+      }
     });
   }
 
@@ -133,10 +153,12 @@ export default class StartInstancePlugin extends PureComponent {
     }
 
     // (2) set status-bar button as inactive and close overlay
-    this.setState({
-      activeButton: false,
-      overlayState: null
-    });
+    if (this._isMounted) {
+      this.setState({
+        activeButton: false,
+        overlayState: null
+      });
+    }
 
     // (3) start process instance
     const {

client/src/shared/ui/form/TextInput.js

@@ -86,7 +86,7 @@ export default function TextInput(props) {
           error={ error }
         />
         { description &&
-          <p className="form-control">{ description }</p>
+          <small className="form-text text-muted">{ description }</small>
         }
       </div>
     </React.Fragment>

client/test/all.js

@@ -9,7 +9,7 @@
  */
 
 import { configure } from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 
 configure({ adapter: new Adapter() });