chore(usertask): bump react version to 18.2.0

* - migrate react render to createRoot+render
- update maven-war-plugin for jdk17
- get rid of another react warning with null value in input

Related to CAM-14548

Co-authored-by: Daniel Kelemen <daniel.kelemen@camunda.com>

usertask/task-form-embedded-react/config/react/loadReact.js

@@ -17,11 +17,11 @@
 
 const react = document.createElement('script');
 react.crossOrigin = true;
-react.src = 'https://unpkg.com/react@17.0.2/umd/react.development.js'
+react.src = 'https://unpkg.com/react@18.2.0/umd/react.development.js'
 
 const reactDom = document.createElement('script');
 reactDom.crossOrigin = true;
-reactDom.src = 'https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js'
+reactDom.src = 'https://unpkg.com/react-dom@18.2.0/umd/react-dom.development.js'
 
 document.body.append(react);
 document.body.append(reactDom);

usertask/task-form-embedded-react/pom.xml

@@ -35,6 +35,18 @@
 
   </dependencies>
 
+  <build>
+    <pluginManagement>
+      <plugins>
+        <plugin>
+          <groupId>org.apache.maven.plugins</groupId>
+          <artifactId>maven-war-plugin</artifactId>
+          <version>3.3.2</version>
+        </plugin>
+      </plugins>
+    </pluginManagement>
+  </build>
+
   <repositories>
     <repository>
       <id>camunda-bpm-nexus</id>

usertask/task-form-embedded-react/src/main/webapp/start-form.html

@@ -141,6 +141,7 @@
       }
     }
 
-    ReactDOM.render(e(StartForm), container);
+    const root = ReactDOM.createRoot(container);
+    root.render(e(StartForm));
   </script>
 </form>

usertask/task-form-embedded-react/src/main/webapp/task-form.html

@@ -36,7 +36,7 @@
             e('div', {className: 'col-md-6', key:'container'},
               e('input', {
                 className: 'form-control',
-                value: this.props.value,
+                value: this.props.value || '',
                 readOnly: true
               }))
             ]);
@@ -111,9 +111,8 @@
         }
       }
 
-      ReactDOM.render(e(Approval,
-          camForm.variableManager.variables ),
-        container);
+      const root = ReactDOM.createRoot(container);
+      root.render(e(Approval, camForm.variableManager.variables));
     }
   </script>
 </form>