Merge pull request jenkinsci#4425 from fqueiruga/replace-jsbuilder-wi…

…th-webpack [JENKINS-60734] Replace jsbuilder with webpack
SimoHyHa414 · Jan 23, 2020 · b4ef17d · b4ef17d
2 parents 99b822e + 60a0816
commit b4ef17d
Show file tree

Hide file tree

Showing 87 changed files with 7,997 additions and 2,177 deletions.
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -16,6 +16,8 @@ This page provides information about contributing code to the Jenkins core codeb
       If you hit a new issue, please report it with a `java11-devtools-compatibility` label in our issue tracker.
   * Maven 3.5.4 or above. You can [download maven].
   * Any IDE which supports importing Maven projects.
+  * Install [NodeJS](https://nodejs.org/en/). **Note:** only needed to work on the frontend assets found on the `war` module.
+    * Frontend tasks are ran using [yarn](https://yarnpkg.com/lang/en/). Run `npm install -g yarn` to install it.
 4. Setup your development environment as described in [Preparing for Plugin Development]
 
 If you want to contribute to Jenkins or just learn about the project,
@@ -49,6 +51,20 @@ mvn -pl war jetty:run
 
 (Beware that `maven-plugin` builds will not work in this mode due to class loading conflicts.)
 
+### Building frontend assets
+
+To work on the `war` module frontend assets two processes are needed at the same time:
+
+On one terminal, start a development server that will not process frontend assets:
+```sh
+mvn -pl war jetty:run -Dskip.yarn
+```
+
+On another terminal, move to the war folder and start a [webpack](https://webpack.js.org/) dev server:
+```sh
+cd war; yarn start
+```
+
 ## Testing changes
 
 Jenkins core includes unit and functional tests as a part of the repository.
@@ -67,6 +83,13 @@ In addition to the included tests, you can also find extra integration and UI
 tests in the [Acceptance Test Harness (ATH)] repository.
 If you propose complex UI changes, you should create new ATH tests for them.
 
+### JavaScript unit tests
+
+In case there's only need to run the JS tests:
+```sh
+cd war; yarn test
+```
+
 ## Proposing Changes
 
 The Jenkins project source code repositories are hosted at GitHub.

diff --git a/core/src/main/resources/lib/layout/html.jelly b/core/src/main/resources/lib/layout/html.jelly
@@ -161,6 +161,8 @@ THE SOFTWARE.
       <script src="${resURL}/scripts/msie.js" type="text/javascript"/>
     </j:if>
 
+    <!-- The vendors bundle is generated by webpack. It contains vendor scripts common to all JS modules -->
+    <script src="${resURL}/jsbundles/vendors.js" type="text/javascript"/>
   </head>
   <body id="jenkins" class="yui-skin-sam jenkins-${h.version}" data-version="${h.version}" data-model-type="${it.class.name}">
       <div id="main-panel" style="margin-left: 0;">

diff --git a/core/src/main/resources/lib/layout/layout.jelly b/core/src/main/resources/lib/layout/layout.jelly
@@ -173,6 +173,8 @@ THE SOFTWARE.
       <script src="${resURL}/scripts/msie.js" type="text/javascript"/>
     </j:if>
 
+    <!-- The vendors bundle is generated by webpack. It contains vendor scripts common to all JS modules -->
+    <script src="${resURL}/jsbundles/vendors.js" type="text/javascript"/>
     <script src="${resURL}/jsbundles/page-init.js" type="text/javascript"/>
 
   </head>

diff --git a/war/.babelrc b/war/.babelrc
@@ -0,0 +1,3 @@
+{
+  "presets": ["@babel/preset-env"],
+}
diff --git a/war/.eslintignore b/war/.eslintignore
@@ -0,0 +1,20 @@
+work
+target
+/rebel.xml
+
+# Node
+node/
+node_modules/
+
+# Generated JavaScript Bundles
+jsbundles
+
+src/main/webapp/css/font-awesome
+src/main/webapp/css/google-fonts
+src/main/webapp/css/icomoon
+
+# External scripts
+src/main/webapp/scripts/yui
+src/main/webapp/scripts/prototype.js
+src/main/webapp/scripts/*.js
+src/main/js/plugin-setup-wizard/bootstrap-detached.js
diff --git a/war/.eslintrc.js b/war/.eslintrc.js
@@ -0,0 +1,35 @@
+module.exports = {
+    env: {
+        browser: true,
+        es6: true
+    },
+    // Uses eslint default ruleset
+    extends: "eslint:recommended",
+    plugins: [
+        // Keeps the default level to warn to avoid breaking the current
+        // CI build environment
+        "only-warn"
+    ],
+    parserOptions: {
+        ecmaVersion: 2018,
+        sourceType: "module"
+    },
+    rules: {
+    },
+    globals: {
+        Atomics: "readonly",
+        SharedArrayBuffer: "readonly",
+
+        '__dirname': false,
+
+        // Allow jest globals used in tests
+        jest: false,
+        expect: false,
+        it: false,
+        describe: false,
+        beforeEach: false,
+        afterEach: false,
+        beforeAll: false,
+        afterAll: false,
+    }
+};
diff --git a/war/.gitignore b/war/.gitignore
@@ -7,3 +7,7 @@ node_modules/
 
 # Generated JavaScript Bundles
 jsbundles
+
+src/main/webapp/css/font-awesome
+src/main/webapp/css/google-fonts
+src/main/webapp/css/icomoon
diff --git a/war/.stylelintrc.js b/war/.stylelintrc.js
@@ -0,0 +1,9 @@
+module.exports = {
+  extends: "stylelint-config-standard",
+  rules: {
+    indentation: null
+  },
+  // Keeps the default level to warn to avoid breaking the current
+  // CI build environment
+  defaultSeverity: "warning"
+}
diff --git a/war/gulpfile.js b/war/gulpfile.js
diff --git a/war/jest.config.json b/war/jest.config.json
@@ -0,0 +1,7 @@
+{
+  "transform": {
+      "\\.hbs$": "jest-handlebars",
+      "\\.js$": "babel-jest"
+  },
+  "reporters": ["jest-standard-reporter"]
+}
diff --git a/war/package.json b/war/package.json
@@ -9,19 +9,50 @@
     "url": "https://github.com/tfennelly"
   },
   "private": true,
+  "scripts": {
+    "dev": "webpack --config webpack.config.js",
+    "prod": "webpack --config webpack.config.js --mode=production",
+    "build": "yarn prod",
+    "start": "yarn dev --watch",
+    "test": "jest --config=jest.config.json",
+    "lint:js": "eslint . --ext js",
+    "lint:css": "stylelint src/main/less --syntax less",
+    "lint": "yarn lint:js && yarn lint:css"
+  },
   "devDependencies": {
-    "gulp": "^3.9.0",
+    "@babel/cli": "^7.7.4",
+    "@babel/core": "^7.7.4",
+    "@jenkins-cd/js-test": "^1.2.3",
+    "clean-webpack-plugin": "^3.0.0",
+    "copy-webpack-plugin": "^5.1.1",
+    "css-loader": "^3.2.0",
+    "eslint": "^6.8.0",
+    "eslint-plugin-only-warn": "^1.0.2",
+    "file-loader": "^5.0.2",
     "handlebars": "^3.0.3",
-    "hbsfy": "^2.4.1",
-    "jenkins-handlebars-rt": "^1.0.1",
-    "jenkins-js-builder": "0.0.40",
-    "jenkins-js-test": "^1.0.0",
-    "gulp-less": "^3.1.0"
+    "handlebars-loader": "^1.7.1",
+    "jest": "^24.9.0",
+    "jest-handlebars": "^1.0.1",
+    "jest-standard-reporter": "^1.0.4",
+    "less": "^3.10.3",
+    "less-loader": "^5.0.0",
+    "mini-css-extract-plugin": "^0.8.0",
+    "stylelint-config-standard": "^19.0.0",
+    "webpack": "^4.41.2",
+    "webpack-cli": "^3.3.10",
+    "webpack-fix-style-only-entries": "^0.4.0"
   },
   "dependencies": {
-    "bootstrap-detached": "^3.3.5-v1",
+    "@babel/preset-env": "^7.7.4",
+    "babel-loader": "^8.0.6",
+    "bootstrap": "3.3.5",
     "jenkins-js-modules": "^1.5.0",
-    "jquery-detached": "^2.1.4-v2",
+    "jquery": "2.1.4",
+    "stylelint": "^13.0.0",
     "window-handle": "^1.0.0"
-  }
+  },
+  "browserslist": [
+    "defaults",
+    "IE 11"
+  ]
 }
diff --git a/war/pom.xml b/war/pom.xml
@@ -41,8 +41,8 @@ THE SOFTWARE.
     <JENKINS_HOME>${basedir}/work</JENKINS_HOME>
     <contextPath>/jenkins</contextPath><!-- context path during test -->
     <port>8080</port><!-- HTTP listener port -->
-    <node.version>6.10.2</node.version>
-    <yarn.version>0.24.5</yarn.version>
+    <node.version>12.14.1</node.version>
+    <yarn.version>1.21.1</yarn.version>
   </properties>
 
   <dependencyManagement>
@@ -566,16 +566,14 @@ THE SOFTWARE.
 
 
     <!--
-        The following profiles are required to integration the node/gulp build into this maven build.
+        The following profiles are required to integration the node/yarn build into this maven build.
         Hopefully we can push these profiles down into a parent pom.
-        See https://github.com/tfennelly/jenkins-js-builder#maven-integration
     -->
-
     <profile>
-      <id>gulp-execution</id>
+      <id>yarn-execution</id>
       <activation>
         <file>
-          <exists>gulpfile.js</exists>
+          <exists>package.json</exists>
         </file>
       </activation>
       <build>
@@ -638,27 +636,38 @@ THE SOFTWARE.
 
               <execution>
                 <phase>generate-sources</phase>
-                <id>gulp bundle</id>
+                <id>yarn build</id>
                 <goals>
-                  <goal>gulp</goal>
+                  <goal>yarn</goal>
                 </goals>
                 <configuration>
-                  <arguments>jshint bundle</arguments>
+                  <arguments>build</arguments>
                 </configuration>
               </execution>
 
               <execution>
                 <phase>test</phase>
-                <id>gulp test</id>
+                <id>yarn test</id>
                 <goals>
-                  <goal>gulp</goal>
+                  <goal>yarn</goal>
                 </goals>
                 <configuration>
-                  <arguments>bundle test</arguments>
+                  <arguments>test</arguments>
                   <skip>${skipTests}</skip>
                 </configuration>
               </execution>
 
+              <execution>
+                <phase>test</phase>
+                <id>yarn lint</id>
+                <goals>
+                  <goal>yarn</goal>
+                </goals>
+                <configuration>
+                  <arguments>lint</arguments>
+                  <skip>${skipTests}</skip>
+                </configuration>
+              </execution>
             </executions>
           </plugin>
         </plugins>

diff --git a/...n/webapp/css/font-awesome/css/LICENSE.txt → ...c/main/fonts/font-awesome/css/LICENSE.txt b/...n/webapp/css/font-awesome/css/LICENSE.txt → ...c/main/fonts/font-awesome/css/LICENSE.txt
diff --git a/...app/css/font-awesome/css/font-awesome.css → ...n/fonts/font-awesome/css/font-awesome.css b/...app/css/font-awesome/css/font-awesome.css → ...n/fonts/font-awesome/css/font-awesome.css
diff --git a/...css/font-awesome/css/font-awesome.min.css → ...nts/font-awesome/css/font-awesome.min.css b/...css/font-awesome/css/font-awesome.min.css → ...nts/font-awesome/css/font-awesome.min.css
diff --git a/...pp/css/font-awesome/fonts/FontAwesome.otf → .../fonts/font-awesome/fonts/FontAwesome.otf b/...pp/css/font-awesome/fonts/FontAwesome.otf → .../fonts/font-awesome/fonts/FontAwesome.otf
diff --git a/...webapp/css/font-awesome/fonts/LICENSE.txt → ...main/fonts/font-awesome/fonts/LICENSE.txt b/...webapp/css/font-awesome/fonts/LICENSE.txt → ...main/fonts/font-awesome/fonts/LICENSE.txt
diff --git a/...ont-awesome/fonts/fontawesome-webfont.eot → ...ont-awesome/fonts/fontawesome-webfont.eot b/...ont-awesome/fonts/fontawesome-webfont.eot → ...ont-awesome/fonts/fontawesome-webfont.eot
diff --git a/...ont-awesome/fonts/fontawesome-webfont.svg → ...ont-awesome/fonts/fontawesome-webfont.svg b/...ont-awesome/fonts/fontawesome-webfont.svg → ...ont-awesome/fonts/fontawesome-webfont.svg
diff --git a/...ont-awesome/fonts/fontawesome-webfont.ttf → ...ont-awesome/fonts/fontawesome-webfont.ttf b/...ont-awesome/fonts/fontawesome-webfont.ttf → ...ont-awesome/fonts/fontawesome-webfont.ttf
diff --git a/...nt-awesome/fonts/fontawesome-webfont.woff → ...nt-awesome/fonts/fontawesome-webfont.woff b/...nt-awesome/fonts/fontawesome-webfont.woff → ...nt-awesome/fonts/fontawesome-webfont.woff
diff --git a/...t-awesome/fonts/fontawesome-webfont.woff2 → ...t-awesome/fonts/fontawesome-webfont.woff2 b/...t-awesome/fonts/fontawesome-webfont.woff2 → ...t-awesome/fonts/fontawesome-webfont.woff2
diff --git a/...ebapp/css/google-fonts/roboto/LICENSE.txt → ...ain/fonts/google-fonts/roboto/LICENSE.txt b/...ebapp/css/google-fonts/roboto/LICENSE.txt → ...ain/fonts/google-fonts/roboto/LICENSE.txt
diff --git a/...pp/css/google-fonts/roboto/css/roboto.css → .../fonts/google-fonts/roboto/css/roboto.css b/...pp/css/google-fonts/roboto/css/roboto.css → .../fonts/google-fonts/roboto/css/roboto.css
diff --git a/...e_cyrillic_greek-ext_cyrillic-ext-300.eot → ...e_cyrillic_greek-ext_cyrillic-ext-300.eot b/...e_cyrillic_greek-ext_cyrillic-ext-300.eot → ...e_cyrillic_greek-ext_cyrillic-ext-300.eot
diff --git a/...e_cyrillic_greek-ext_cyrillic-ext-300.svg → ...e_cyrillic_greek-ext_cyrillic-ext-300.svg b/...e_cyrillic_greek-ext_cyrillic-ext-300.svg → ...e_cyrillic_greek-ext_cyrillic-ext-300.svg
diff --git a/...e_cyrillic_greek-ext_cyrillic-ext-300.ttf → ...e_cyrillic_greek-ext_cyrillic-ext-300.ttf b/...e_cyrillic_greek-ext_cyrillic-ext-300.ttf → ...e_cyrillic_greek-ext_cyrillic-ext-300.ttf
diff --git a/..._cyrillic_greek-ext_cyrillic-ext-300.woff → ..._cyrillic_greek-ext_cyrillic-ext-300.woff b/..._cyrillic_greek-ext_cyrillic-ext-300.woff → ..._cyrillic_greek-ext_cyrillic-ext-300.woff
diff --git a/...cyrillic_greek-ext_cyrillic-ext-300.woff2 → ...cyrillic_greek-ext_cyrillic-ext-300.woff2 b/...cyrillic_greek-ext_cyrillic-ext-300.woff2 → ...cyrillic_greek-ext_cyrillic-ext-300.woff2
diff --git a/...e_cyrillic_greek-ext_cyrillic-ext-500.eot → ...e_cyrillic_greek-ext_cyrillic-ext-500.eot b/...e_cyrillic_greek-ext_cyrillic-ext-500.eot → ...e_cyrillic_greek-ext_cyrillic-ext-500.eot
diff --git a/...e_cyrillic_greek-ext_cyrillic-ext-500.svg → ...e_cyrillic_greek-ext_cyrillic-ext-500.svg b/...e_cyrillic_greek-ext_cyrillic-ext-500.svg → ...e_cyrillic_greek-ext_cyrillic-ext-500.svg
diff --git a/...e_cyrillic_greek-ext_cyrillic-ext-500.ttf → ...e_cyrillic_greek-ext_cyrillic-ext-500.ttf b/...e_cyrillic_greek-ext_cyrillic-ext-500.ttf → ...e_cyrillic_greek-ext_cyrillic-ext-500.ttf
diff --git a/..._cyrillic_greek-ext_cyrillic-ext-500.woff → ..._cyrillic_greek-ext_cyrillic-ext-500.woff b/..._cyrillic_greek-ext_cyrillic-ext-500.woff → ..._cyrillic_greek-ext_cyrillic-ext-500.woff
diff --git a/...cyrillic_greek-ext_cyrillic-ext-500.woff2 → ...cyrillic_greek-ext_cyrillic-ext-500.woff2 b/...cyrillic_greek-ext_cyrillic-ext-500.woff2 → ...cyrillic_greek-ext_cyrillic-ext-500.woff2
diff --git a/...e_cyrillic_greek-ext_cyrillic-ext-700.eot → ...e_cyrillic_greek-ext_cyrillic-ext-700.eot b/...e_cyrillic_greek-ext_cyrillic-ext-700.eot → ...e_cyrillic_greek-ext_cyrillic-ext-700.eot
diff --git a/...e_cyrillic_greek-ext_cyrillic-ext-700.svg → ...e_cyrillic_greek-ext_cyrillic-ext-700.svg b/...e_cyrillic_greek-ext_cyrillic-ext-700.svg → ...e_cyrillic_greek-ext_cyrillic-ext-700.svg
diff --git a/...e_cyrillic_greek-ext_cyrillic-ext-700.ttf → ...e_cyrillic_greek-ext_cyrillic-ext-700.ttf b/...e_cyrillic_greek-ext_cyrillic-ext-700.ttf → ...e_cyrillic_greek-ext_cyrillic-ext-700.ttf
diff --git a/..._cyrillic_greek-ext_cyrillic-ext-700.woff → ..._cyrillic_greek-ext_cyrillic-ext-700.woff b/..._cyrillic_greek-ext_cyrillic-ext-700.woff → ..._cyrillic_greek-ext_cyrillic-ext-700.woff
diff --git a/...cyrillic_greek-ext_cyrillic-ext-700.woff2 → ...cyrillic_greek-ext_cyrillic-ext-700.woff2 b/...cyrillic_greek-ext_cyrillic-ext-700.woff2 → ...cyrillic_greek-ext_cyrillic-ext-700.woff2
diff --git a/...e_cyrillic_greek-ext_cyrillic-ext-900.eot → ...e_cyrillic_greek-ext_cyrillic-ext-900.eot b/...e_cyrillic_greek-ext_cyrillic-ext-900.eot → ...e_cyrillic_greek-ext_cyrillic-ext-900.eot
diff --git a/...e_cyrillic_greek-ext_cyrillic-ext-900.svg → ...e_cyrillic_greek-ext_cyrillic-ext-900.svg b/...e_cyrillic_greek-ext_cyrillic-ext-900.svg → ...e_cyrillic_greek-ext_cyrillic-ext-900.svg
diff --git a/...e_cyrillic_greek-ext_cyrillic-ext-900.ttf → ...e_cyrillic_greek-ext_cyrillic-ext-900.ttf b/...e_cyrillic_greek-ext_cyrillic-ext-900.ttf → ...e_cyrillic_greek-ext_cyrillic-ext-900.ttf
diff --git a/..._cyrillic_greek-ext_cyrillic-ext-900.woff → ..._cyrillic_greek-ext_cyrillic-ext-900.woff b/..._cyrillic_greek-ext_cyrillic-ext-900.woff → ..._cyrillic_greek-ext_cyrillic-ext-900.woff
diff --git a/...cyrillic_greek-ext_cyrillic-ext-900.woff2 → ...cyrillic_greek-ext_cyrillic-ext-900.woff2 b/...cyrillic_greek-ext_cyrillic-ext-900.woff2 → ...cyrillic_greek-ext_cyrillic-ext-900.woff2
diff --git a/...rillic_greek-ext_cyrillic-ext-regular.eot → ...rillic_greek-ext_cyrillic-ext-regular.eot b/...rillic_greek-ext_cyrillic-ext-regular.eot → ...rillic_greek-ext_cyrillic-ext-regular.eot
diff --git a/...rillic_greek-ext_cyrillic-ext-regular.svg → ...rillic_greek-ext_cyrillic-ext-regular.svg b/...rillic_greek-ext_cyrillic-ext-regular.svg → ...rillic_greek-ext_cyrillic-ext-regular.svg
diff --git a/...rillic_greek-ext_cyrillic-ext-regular.ttf → ...rillic_greek-ext_cyrillic-ext-regular.ttf b/...rillic_greek-ext_cyrillic-ext-regular.ttf → ...rillic_greek-ext_cyrillic-ext-regular.ttf
diff --git a/...illic_greek-ext_cyrillic-ext-regular.woff → ...illic_greek-ext_cyrillic-ext-regular.woff b/...illic_greek-ext_cyrillic-ext-regular.woff → ...illic_greek-ext_cyrillic-ext-regular.woff
diff --git a/...llic_greek-ext_cyrillic-ext-regular.woff2 → ...llic_greek-ext_cyrillic-ext-regular.woff2 b/...llic_greek-ext_cyrillic-ext-regular.woff2 → ...llic_greek-ext_cyrillic-ext-regular.woff2
diff --git a/...c/main/webapp/css/icomoon/css/icomoon.css → war/src/main/fonts/icomoon/css/icomoon.css b/...c/main/webapp/css/icomoon/css/icomoon.css → war/src/main/fonts/icomoon/css/icomoon.css
diff --git a/...main/webapp/css/icomoon/fonts/icomoon.eot → war/src/main/fonts/icomoon/fonts/icomoon.eot b/...main/webapp/css/icomoon/fonts/icomoon.eot → war/src/main/fonts/icomoon/fonts/icomoon.eot
diff --git a/...main/webapp/css/icomoon/fonts/icomoon.svg → war/src/main/fonts/icomoon/fonts/icomoon.svg b/...main/webapp/css/icomoon/fonts/icomoon.svg → war/src/main/fonts/icomoon/fonts/icomoon.svg
diff --git a/...main/webapp/css/icomoon/fonts/icomoon.ttf → war/src/main/fonts/icomoon/fonts/icomoon.ttf b/...main/webapp/css/icomoon/fonts/icomoon.ttf → war/src/main/fonts/icomoon/fonts/icomoon.ttf
diff --git a/...ain/webapp/css/icomoon/fonts/icomoon.woff → ...src/main/fonts/icomoon/fonts/icomoon.woff b/...ain/webapp/css/icomoon/fonts/icomoon.woff → ...src/main/fonts/icomoon/fonts/icomoon.woff
diff --git a/war/src/main/js/add-item.js b/war/src/main/js/add-item.js
@@ -1,5 +1,4 @@
-// Initialize all modules by requiring them. Also makes sure they get bundled (see gulpfile.js).
-var $ = require('jquery-detached').getJQuery();
+import $ from 'jquery';
 
 var getItems = function() {
   var d = $.Deferred();
@@ -9,7 +8,7 @@ var getItems = function() {
     }
   );
   return d.promise();
-}; 
+};
 
 var jRoot = $('head').attr('data-rooturl');
 
@@ -36,6 +35,7 @@ $.when(getItems()).done(function(data) {
       if (desc.indexOf('&lt;a href="') === -1) {
         return desc;
       }
+      // eslint-disable-next-line
       var newDesc = desc.replace(/\&lt;/g,'<').replace(/\&gt;/g,'>');
       return newDesc;
     }