Add new GitHub Actions pipeline for frontend CI

Author: felipecrs

.github/renovate.json

@@ -12,10 +12,6 @@
       "matchDatasources": ["npm"],
       "addLabels": ["javascript"],
       "automerge": false
-    },
-    {
-      "matchPackageNames": ["node"],
-      "allowedVersions": "/22.[0-9]+.[0-9]+(.[0-9]+)?$/"
     }
   ],
   "customManagers": [

.github/workflows/frontend.yaml

@@ -0,0 +1,29 @@
+name: frontend
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+jobs:
+  ci:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Extract versions from pom.xml
+        id: extract_versions
+        run: |
+          NODE_VERSION=$(sed -n 's/.*<node.version>\(.*\)<\/node.version>.*/\1/p' pom.xml)
+          NPM_VERSION=$(sed -n 's/.*<npm.version>\(.*\)<\/npm.version>.*/\1/p' pom.xml)
+          echo "NODE_VERSION=$NODE_VERSION" >> "$GITHUB_ENV"
+          echo "NPM_VERSION=$NPM_VERSION" >> "$GITHUB_ENV"
+      - uses: actions/setup-node@v4
+        with:
+          node-version: "${{ env.NODE_VERSION }}"
+          cache: "npm"
+      - run: npm install --global 'npm@${{ env.NPM_VERSION }}'
+      - run: npm ci
+      - run: npm run lint
+      - run: npm run build
+      - run: npm test

.github/workflows/jenkins-security-scan.yml

@@ -5,7 +5,7 @@ on:
     branches:
       - main
   pull_request:
-    types: [ opened, synchronize, reopened ]
+    types: [opened, synchronize, reopened]
   workflow_dispatch:
 
 permissions:
@@ -17,5 +17,5 @@ jobs:
   security-scan:
     uses: jenkins-infra/jenkins-security-scan/.github/workflows/jenkins-security-scan.yaml@v2
     with:
-      java-cache: 'maven' # Optionally enable use of a build dependency cache. Specify 'maven' or 'gradle' as appropriate.
+      java-cache: "maven" # Optionally enable use of a build dependency cache. Specify 'maven' or 'gradle' as appropriate.
       # java-version: 21 # Optionally specify what version of Java to set up for the build, or remove to use a recent default.

.prettierignore

@@ -1,12 +1,8 @@
-/*
-!/src
 /src/*
-!/src/main
+!/src/main/
 /src/main/*
-!/src/main/frontend
-!/package.json
-!/tsconfig.json
-!/.prettierrc.json
-!/eslint.config.js
-!/vite.config.ts
-!/vitest.config.ts
+!/src/main/frontend/
+
+/.mvn/
+/Jenkinsfile
+/pom.xml

CONTRIBUTING.md

@@ -1,7 +1,7 @@
 # Contributing
 
-**Never report security issues on GitHub, public Jira issues or other public channels (Gitter/Twitter/etc.), 	
-follow the instruction from [Jenkins Security](https://www.jenkins.io/security/#reporting-vulnerabilities) to 	
+**Never report security issues on GitHub, public Jira issues or other public channels (Gitter/Twitter/etc.),
+follow the instruction from [Jenkins Security](https://www.jenkins.io/security/#reporting-vulnerabilities) to
 report it on [Jenkins Jira](https://issues.jenkins.io/)**
 
 In the Jenkins project we appreciate any kind of contributions: code, documentation, design, etc.
@@ -11,68 +11,69 @@ Check out [this page](https://jenkins.io/participate/) for more information and
 Many plugins and components also define their own contributing guidelines and communication channels.
 There is also a big number of [mailing lists](https://jenkins.io/mailing-lists/) and [chats](https://jenkins.io/chat/).
 
-
 ## Newcomers
 
 If you are a newcomer contributor and have any questions, please do not hesitate to ask in the [Newcomers Gitter channel](https://gitter.im/jenkinsci/newcomer-contributors).
 
 ## Useful links
 
-* [Jenkins: Participate and Contribute](https://jenkins.io/participate/)
-* [Slides: Contributing to Jenkins - it is all about you](https://docs.google.com/presentation/d/1JHgVzWZAx95IsUAZp8OoyCQGGkrCjzUd7eblwd1Y-hA/edit?usp=sharing)
+- [Jenkins: Participate and Contribute](https://jenkins.io/participate/)
+- [Slides: Contributing to Jenkins - it is all about you](https://docs.google.com/presentation/d/1JHgVzWZAx95IsUAZp8OoyCQGGkrCjzUd7eblwd1Y-hA/edit?usp=sharing)
 
 ### Source code contribution ways of working
 
 - For larger contributions create an issue for any required discussion
 - Implement solution on a branch in your fork
 - Make sure to include issue ID (if created) in commit message, and make the message speak for itself
 - Once you're done create a pull request and ask at least one of the maintainers for review
-    - Remember to title your pull request properly as it is used for release notes
+  - Remember to title your pull request properly as it is used for release notes
 
 ## Run Locally
 
 Prerequisites: _Java_ and _Maven_.
 
 - Ensure Java 17 or 21 is available.
 
-  ```console	
+  ```console
   $ java -version
   openjdk 17.0.13 2024-10-15
   OpenJDK Runtime Environment (build 17.0.13+11-Ubuntu-2ubuntu124.04)
   OpenJDK 64-Bit Server VM (build 17.0.13+11-Ubuntu-2ubuntu124.04, mixed mode, sharing)
-  ```	
+  ```
 
 - Ensure Maven >= 3.9.9 is installed and included in the PATH environment variable.
 
   ```console
-  $ mvn --version	
-  ```	
+  mvn --version
+  ```
 
 ### IDE configuration
 
 See [IDE configuration](https://jenkins.io/doc/developer/development-environment/ide-configuration/)
 
 ### CLI
 
-```console	
-$ mvn hpi:run	
-```	
+```console
+mvn hpi:run
+```
 
-```text	
-...	
-INFO: Jenkins is fully up and running	
+```text
+...
+INFO: Jenkins is fully up and running
 ```
 
 ### Building frontend code
 
 To work on the frontend code, two processes are needed at the same time:
 
 On one terminal, start a development server that will not process frontend assets:
+
 ```sh
 mvn hpi:run -Dskip.npm -P quick-build
 ```
 
 On another terminal, start a [vite](https://vite.dev/) build command that automatically rebuilds on code changes:
+
 ```sh
 npm run build:dev
 ```
@@ -81,11 +82,20 @@ It's recommended that you set up the above terminal commands in your IDE of choi
 
 ### Build and package
 
-To generate the hpi package and run the test you can use:
+To generate the hpi package and run the plugin tests (except frontend tests) you can use:
+
 ```sh
 mvn package
 ```
-For a quicker build without the tests run:
+
+To run the frontend tests, you can use:
+
+```sh
+npm test
+```
+
+For a quicker build without the plugin tests run:
+
 ```sh
 mvn package -P quick-build
 ```
@@ -94,10 +104,10 @@ mvn package -P quick-build
 
 Code style will be enforced by GitHub pull request checks.
 
-For frontend code we use [prettier](https://prettier.io/).
+For frontend code we use [eslint](https://eslint.org) and [prettier](https://prettier.io/).
 
 You can automatically fix issues with `npm run lint:fix`
 
 For java code we use [spotless](https://github.com/diffplug/spotless).
 
-You can automatically fix issues with `mvn spotless:apply`
+You can automatically fix issues with `mvn spotless:apply`

LICENSE.md

@@ -7,4 +7,4 @@ Permission is hereby granted, free of charge, to any person obtaining a copy of
 
 The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

README.md

@@ -34,9 +34,9 @@ This plugin aims to bring the best of Blue Ocean into the regular Jenkins UI.
 
 That means functionality like:
 
-* [x] Pipeline graph
-* [x] Summary of runs in a job (like [Pipeline Stage View Plugin](https://github.com/jenkinsci/pipeline-stage-view-plugin/), but simpler, more modern and more performant)
-* [x] Modern logs viewing
+- [x] Pipeline graph
+- [x] Summary of runs in a job (like [Pipeline Stage View Plugin](https://github.com/jenkinsci/pipeline-stage-view-plugin/), but simpler, more modern and more performant)
+- [x] Modern logs viewing
 
 The plugin should be lightweight, using or providing extension points where possible rather than building everything into one plugin.
 

package.json

@@ -1,17 +1,19 @@
 {
   "name": "pipeline-graph-view-plugin",
-  "version": "1.0.0",
+  "version": "0.0.0-development",
   "description": "Pipeline Graph visualization for Jenkins pipelines",
   "private": true,
   "type": "module",
   "scripts": {
     "mvnbuild": "npm run build",
-    "mvntest": "npm test",
+    "mvntest": "echo \"Use 'npm test' instead\"",
     "build": "vite build --mode production",
     "build:dev": "vite build --mode development --watch",
-    "lint": "tsc && eslint && prettier --check .",
-    "lint:fix": "eslint --fix && prettier --write .",
-    "test": "vitest --watch=false --reporter default --reporter junit && npm run lint",
+    "format:check": "prettier --check .",
+    "format": "prettier --write .",
+    "lint": "tsc && eslint && npm run format:check",
+    "lint:fix": "eslint --fix && npm run format",
+    "test": "vitest --watch=false",
     "test:dev": "vitest --watch"
   },
   "repository": {

pom.xml

@@ -38,10 +38,6 @@
     <node.version>22.15.0</node.version>
     <npm.version>11.3.0</npm.version>
     <spotless.check.skip>false</spotless.check.skip>
-
-    <!-- Opt in to Jenkins handling eslint results -->
-    <maven.test.failure.ignore>false</maven.test.failure.ignore>
-    <frontend.testFailureIgnore>${maven.test.failure.ignore}</frontend.testFailureIgnore>
   </properties>
 
   <dependencyManagement>

vitest.config.ts

@@ -1,15 +1,10 @@
 import { defineConfig } from "vitest/config";
-import path from "node:path";
 
 export default defineConfig({
   test: {
     root: "src/main/frontend",
     globals: true,
     environment: "jsdom",
     setupFiles: ["setupTests.ts"],
-    outputFile: path.resolve(
-      import.meta.dirname,
-      "target/surefire-reports/vitest-junit.xml",
-    ),
   },
 });