feat(TCOMP-2059): update UI

component-starter-server/pom.xml

@@ -28,9 +28,6 @@
   <description>Web application allowing to generate maven or gradle project skeleton to speed up component development.</description>
 
   <properties>
-    <!--TODO: bump node/npm when issue TCOMP-2059 Update talend/ui to 6.x will be done-->
-    <node.version>v12.13.0</node.version>
-    <npm.version>6.12.0</npm.version>
     <talend.build.name>${talend.build.name.base}.starter</talend.build.name>
     <rat.numUnapprovedLicenses>10</rat.numUnapprovedLicenses>
   </properties>

component-tools-webapp/pom.xml

@@ -28,10 +28,6 @@
   <description>Light web application allowing to provide a light HTTP server to test components locally.</description>
 
   <properties>
-    <!--TODO: bump node/npm when issue TCOMP-2059 Update talend/ui to 6.x will be done-->
-    <node.version>v12.13.0</node.version>
-    <npm.version>6.12.0</npm.version>
-    <npm.environment>production</npm.environment>
     <talend.build.name>${talend.build.name.base}.tools.webapp</talend.build.name>
   </properties>
 

component-tools-webapp/src/main/frontend/.babelrc

@@ -1,24 +1 @@
-{
-  "presets": [
-    [
-      "env",
-      {
-        "targets": {
-          "ie": 11,
-          "browsers": [
-            "last 2 versions"
-          ]
-        }
-      }
-    ],
-    "react"
-  ],
-  "ignore": [
-    "**/**/*.css"
-  ],
-  "plugins": [
-    "transform-class-properties",
-    "transform-object-assign",
-    "transform-object-rest-spread"
-  ]
-}
+{ "extends": "@talend/scripts-config-babel/.babelrc.json" }

component-tools-webapp/src/main/frontend/package-template.json

@@ -3,66 +3,39 @@
   "version": "0.0.0",
   "private": true,
   "scripts": {
-    "start": "NODE_ENV=developement webpack-dev-server --inline --config webpack.config.dev.js --content-base dist/",
-    "build": "webpack --config webpack.config --bail --progress --colors --display-error-details --display-chunks",
-    "watch": "webpack --config webpack.config --bail --progress --colors --watch --display-error-details --display-chunks"
+    "start": "talend-scripts start",
+    "build": "talend-scripts build"
   },
   "dependencies": {
-    "@talend/bootstrap-theme": "${talend-ui.version}",
-    "@talend/icons": "${talend-ui.version}",
-    "@talend/react-cmf": "${talend-ui.version}",
-    "@talend/react-components": "${talend-ui.version}",
-    "@talend/react-forms": "${talend-ui.version}",
-    "@talend/react-containers": "${talend-ui.version}",
+    "@talend/bootstrap-theme": "6.32.0",
+    "@talend/icons": "6.32.0",
+    "@talend/react-cmf": "6.32.0",
+    "@talend/react-components": "6.32.0",
+    "@talend/react-containers": "6.32.0",
+    "@talend/react-forms": "6.32.0",
+    "asciidoctor": "2.0.3",
     "bootstrap-sass": "3.4.1",
-    "classnames": "2.2.5",
-    "date-fns": "1.27.2",
-    "i18next": "15.1.3",
-    "invariant": "2.2.2",
-    "keycode": "2.2.0",
-    "lodash": "4.17.11",
-    "prop-types": "15.5.10",
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6",
-    "react-ace": "5.2.0",
-    "react-addons-css-transition-group": "15.6.2",
+    "classnames": "^2.3.1",
+    "date-fns": "^1.30.1",
+    "i18next": "^20.3.2",
+    "invariant": "^2.2.4",
+    "keycode": "^2.2.0",
+    "lodash": "^4.17.21",
+    "prop-types": "^15.7.2",
+    "react": "^16.14.0",
+    "react-ace": "^5.10.0",
     "react-bootstrap": "0.31.5",
-    "react-css-transition": "0.7.4",
-    "react-transition-group": "2.3.1",
-    "react-i18next": "10.11.4",
-    "react-redux": "5.0.7",
-    "react-router-dom": "4.2.2",
-    "redux": "3.7.2",
-    "redux-thunk": "2.2.0",
-    "uuid": "3.0.1",
-    "whatwg-fetch": "2.0.3",
-    "asciidoctor": "2.2.6"
+    "react-dom": "^16.14.0",
+    "react-i18next": "^10.13.2",
+    "react-redux": "^5.1.2",
+    "react-router-dom": "^5.1.2",
+    "redux": "^3.7.2",
+    "redux-thunk": "^2.3.0",
+    "uuid": "^3.4.0",
+    "whatwg-fetch": "^2.0.4"
   },
   "devDependencies": {
-    "autoprefixer": "7.1.4",
-    "babel-core": "6.26.0",
-    "babel-loader": "7.1.2",
-    "babel-plugin-transform-class-properties": "6.24.1",
-    "babel-plugin-transform-object-assign": "6.22.0",
-    "babel-plugin-transform-object-rest-spread": "6.26.0",
-    "babel-polyfill": "6.26.0",
-    "babel-preset-env": "1.6.0",
-    "babel-preset-react": "6.24.1",
-    "babel-preset-react-app": "3.0.2",
-    "babel-runtime": "6.26.0",
-    "copy-webpack-plugin": "4.1.1",
-    "css-loader": "0.28.7",
-    "extract-text-webpack-plugin": "3.0.2",
-    "file-loader": "1.1.5",
-    "html-webpack-plugin": "2.29.0",
-    "node-sass-chokidar": "0.0.3",
-    "postcss-flexbugs-fixes": "3.2.0",
-    "postcss-loader": "2.0.8",
-    "resolve-url-loader": "2.2.1",
-    "sass-loader": "6.0.6",
-    "style-loader": "0.19.0",
-    "url-loader": "0.6.2",
-    "webpack": "3.8.1",
-    "webpack-dev-server": "2.9.3"
+    "@talend/scripts-core": "^9.11.0",
+    "@talend/scripts-preset-react": "^9.8.4"
   }
 }

component-tools-webapp/src/main/frontend/src/app/index.html

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
+		<meta name="dhc-aware-page" data-indicator-element-id="apiTesterIndicator" />
+		<title><%= htmlWebpackPlugin.options.title %></title>
+
+		<style>
+			#app {
+				max-height: 100vh;
+				overflow: hidden;
+				display: flex;
+				width: 100vw;
+			}
+			.tc-layout-two-columns {
+				height: 100vw;
+			}
+			html.focus-outline-hidden *:focus {
+				outline: none !important;
+			}
+		</style>
+	</head>
+	<body>
+		<div id="app"><%= htmlWebpackPlugin.options.appLoader %></div>
+		<div id="tooltip-root"></div>
+		<!-- the portal-root element is for attaching Portal widget children -->
+		<div id="portal-root"></div>
+	</body>
+</html>

component-tools-webapp/src/main/frontend/talend-scripts.json

@@ -0,0 +1,12 @@
+{
+    "preset": "@talend/scripts-preset-react",
+    "html": {
+      "title": "Talend Components Dev Tester"
+    },
+    "copy": [{ "from": "src/assets", "to": "assets" }],
+    "webpack": {
+      "config": {
+          "development": "./webpack.config.dev.js"
+      }
+    }
+  }

component-tools-webapp/src/main/frontend/webpack.config.dev.js

@@ -16,9 +16,12 @@
 
 // if you use npm directly instead of mvn frontend:npm@watch
 
-const config = require('./webpack.config');
+// const config = require('./webpack.config');
 const webpack = require('webpack');
 
+const config = {
+	plugins: []
+};
 config.devtool = 'inline-source-map';
 config.plugins.push(new webpack.DefinePlugin({
 	'process.env.NODE_ENV': JSON.stringify('development'),

pom.xml

@@ -210,7 +210,7 @@
 
     <!-- deprecated after -->
     <talend-icon.version>3.8.0</talend-icon.version>
-    <talend-ui.version>5.23.0</talend-ui.version>
+    <talend-ui.version>6.32.0</talend-ui.version>
 
     <!-- for the starter -->
     <mvn.version>3.8.8</mvn.version>
@@ -253,6 +253,7 @@
     <jruby.version>9.2.19.0</jruby.version>
     <node.version>v16.14.0</node.version>
     <npm.version>8.5.1</npm.version>
+    <npm.environment>production</npm.environment>
     <frontend.version>1.12.1</frontend.version>
 
     <!-- misc dependencies -->
@@ -863,60 +864,66 @@
 
   <repositories>
     <repository>
+      <snapshots>
+        <enabled>true</enabled>
+      </snapshots>
       <id>oss.snapshots</id>
-      <snapshots><enabled>true</enabled></snapshots>
       <url>https://oss.sonatype.org/content/repositories/snapshots</url>
     </repository>
     <repository>
+      <releases>
+        <enabled>true</enabled>
+      </releases>
       <id>oss.releases</id>
-      <releases><enabled>true</enabled></releases>
       <url>https://oss.sonatype.org/content/repositories/releases</url>
     </repository>
     <repository>
-      <id>TalendOpenSourceRelease</id>
       <releases>
         <enabled>true</enabled>
       </releases>
       <snapshots>
         <enabled>false</enabled>
       </snapshots>
+      <id>TalendOpenSourceRelease</id>
       <url>https://artifacts-oss.talend.com/nexus/content/repositories/TalendOpenSourceRelease/</url>
     </repository>
     <repository>
-      <id>gradle-libs-releases-local</id>
       <releases>
         <enabled>true</enabled>
       </releases>
       <snapshots>
         <enabled>false</enabled>
       </snapshots>
+      <id>gradle-libs-releases-local</id>
       <url>https://repo.gradle.org/gradle/libs-releases-local/</url>
     </repository>
     <repository>
-      <id>TalendOpenSourceSnapshot</id>
       <releases>
         <enabled>false</enabled>
       </releases>
       <snapshots>
         <enabled>true</enabled>
       </snapshots>
+      <id>TalendOpenSourceSnapshot</id>
       <url>https://artifacts-oss.talend.com/nexus/content/repositories/TalendOpenSourceSnapshot/</url>
     </repository>
   </repositories>
   <pluginRepositories>
     <pluginRepository>
+      <releases>
+        <enabled>true</enabled>
+      </releases>
       <id>oss.releases</id>
-      <releases><enabled>true</enabled></releases>
       <url>https://oss.sonatype.org/content/repositories/releases</url>
     </pluginRepository>
     <pluginRepository>
-      <id>TalendOpenSourceRelease</id>
       <releases>
         <enabled>true</enabled>
       </releases>
       <snapshots>
         <enabled>false</enabled>
       </snapshots>
+      <id>TalendOpenSourceRelease</id>
       <url>https://artifacts-oss.talend.com/nexus/content/repositories/TalendOpenSourceRelease/</url>
     </pluginRepository>
   </pluginRepositories>