New React-based UI for the plugin

.editorconfig

@@ -11,5 +11,5 @@ charset = utf-8
 [*.properties]
 charset = latin1
 
-[*.{js, jsx, json, yaml, yml, babelrc}]
+[*.{ts, tsx, js, jsx, json, yaml, yml, babelrc}]
 indent_size = 2

.gitignore

@@ -47,5 +47,7 @@ node_modules
 
 # Webpack build output
 src/main/webapp/js
-
 npm-debug.log
+
+# node binaries from frontend-maven-plugin
+node/

package.json

@@ -33,7 +33,9 @@
     "@types/react": "^16.9.35",
     "@types/react-dom": "^16.9.8",
     "babel-loader": "^8.1.0",
+    "css-loader": "^3.5.3",
     "source-map-loader": "^0.2.4",
+    "style-loader": "^1.2.1",
     "ts-loader": "^7.0.5",
     "typescript": "^3.9.3",
     "webpack": "^4.43.0",

pom.xml

@@ -102,9 +102,6 @@
             <plugin>
                 <groupId>com.github.eirslett</groupId>
                 <artifactId>frontend-maven-plugin</artifactId>
-                <configuration>
-                    <workingDirectory>src/main/frontend</workingDirectory>
-                </configuration>
             </plugin>
         </plugins>
     </build>

src/main/frontend/src/App.tsx

@@ -1,5 +1,7 @@
 import * as React from 'react';
 
+import './css/App.css';
+
 class App extends React.Component<{}, {}> {
   render() {
     return (

src/main/frontend/src/css/App.css

@@ -0,0 +1,3 @@
+h1 {
+    color: blue;
+}

src/main/frontend/src/index.tsx

@@ -2,6 +2,8 @@ import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 
 import App from './App';
+import { resetEnvironment } from './resetEnvironment';
 
+resetEnvironment();
 const root = document.getElementById('root');
 ReactDOM.render(<App/>, root);

src/main/frontend/src/resetEnvironment.d.ts

@@ -0,0 +1 @@
+export function resetEnvironment(): void;

src/main/frontend/src/resetEnvironment.js

@@ -0,0 +1,14 @@
+/**
+ * Reset JS environment set up by prototype.js to not interfere with
+ * out react components.
+ *
+ * @see https://github.com/jenkinsci/jenkins/blob/75468da366c1d257a51655dcbe952d55b8aeeb9c/war/src/main/js/util/jenkins.js#L22
+ */
+export function resetEnvironment() {
+  if (Array.prototype.toJSON) {
+    delete Array.prototype.toJSON;
+    delete Object.prototype.toJSON;
+    delete Hash.prototype.toJSON;
+    delete String.prototype.toJSON;
+  }
+}

webpack.config.js

@@ -21,7 +21,11 @@ module.exports = {
         test: /\.js$/,
         enforce: 'pre',
         loader: 'source-map-loader',
-      }
+      },
+      {
+        test: /\.css$/i,
+        use: ['style-loader', 'css-loader'],
+      },
     ]
   },
   resolve: {