build(ci): integrate ESLint with CodeQL (#1273)

* ci: integrate ESLint with CodeQL

* specualtive fix

* always upload sarif

* make lint.ci exit with 0 so sarif is generated

* fix: exit with 0

* exit 0 on error

* correction

* revert to default with sarif

* see what pnpm run lint --fix does

* reset codeql

* egg

* actually setup pnpm

* checking out the mall

* reimplement lint

* run lint:ci

* anyone home?

* category

* fix?

* try cats

* damage

* TRY IT ONE MORE TIME

* on an atm

* no way?

* test

* test2

* test3

* test4

* revert change in context.ts

* attempt to update lockfile

* reset and update pnpm-lock

* speculative fix

* allow it to fail

* update eslint.yml

* correct path helps

* bring lint:ci back into the fold

* revert eslint.yml

* embed sarif

* is it really this

* k. great.

---------

Co-authored-by: Kyle Sanderson <kyle.leet@gmail.com>

.github/workflows/eslint.yml

@@ -0,0 +1,72 @@
+name: "ESLint analysis"
+
+on:
+  push:
+    branches: [ "develop", "master" ]
+  pull_request:
+    # The branches below must be a subset of the branches above
+    branches: [ "develop" ]
+  schedule:
+    - cron: '20 13 * * 6'
+
+jobs:
+  codeql:
+    runs-on: ubuntu-latest
+    permissions:
+      # required for all workflows
+      security-events: write
+      # only required for workflows in private repositories
+      actions: read
+      contents: read
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Set up Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: '18.17.0'
+
+      - name: Set up corepack
+        run: corepack enable
+
+      # It can not be done before enable corepack
+      - name: Set up cache
+        uses: actions/setup-node@v4
+        with:
+          cache: pnpm
+          cache-dependency-path: web/pnpm-lock.yaml
+
+      - name: Fetch web dependencies
+        working-directory: web
+        run: pnpm install --frozen-lockfile
+
+      # Runs the ESlint code analysis
+      - name: Run ESLint
+        # eslint exits 1 if it finds anything to report
+        run: SARIF_ESLINT_EMBED=true pnpm run lint:ci
+        working-directory: web
+
+      - name: Replace React trash
+        run: sed -i 's$Please see details in message$https://reactjs.org/is-broken-sarif-trash/$g' results.sarif
+
+      - name: Anyone home?
+        # eslint exits 1 if it finds anything to report
+        run: cat results.sarif
+
+      # Uploads results.sarif to GitHub repository using the upload-sarif action
+      - uses: github/codeql-action/upload-sarif@v2
+        with:
+          # Path to SARIF file relative to the root of the repository
+          sarif_file: results.sarif
+          category: ESLint
+
+      - uses: CatChen/eslint-suggestion-action@v2
+        with:
+          request-changes: true
+          fail-check: false
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          directory: 'web'
+          targets: 'web/src'

.gitignore

@@ -39,6 +39,7 @@ dist/
 .run/
 tmp/
 .golangci.yml
+web/eslint-sarif-report.sarif
 
 # Preserve files
 !.gitkeep

web/package.json

@@ -9,6 +9,7 @@
     "dev": "vite",
     "build": "tsc && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0 --color",
+    "lint:ci": "eslint src/ --ext .js,.jsx,.ts,.tsx --format=@microsoft/eslint-formatter-sarif --fix > ../results.sarif || true",
     "preview": "vite preview",
     "lint:watch": "pnpm run lint -- --watch"
   },
@@ -82,6 +83,7 @@
     "typescript": "^5.2.2",
     "vite": "^5.0.4",
     "vite-plugin-pwa": "^0.16.7",
-    "vite-plugin-svgr": "^4.2.0"
+    "vite-plugin-svgr": "^4.2.0",
+    "@microsoft/eslint-formatter-sarif": "^3.0.0"
   }
 }

web/pnpm-lock.yaml

@@ -106,6 +106,9 @@ dependencies:
     version: 1.2.0(formik@2.4.5)(zod@3.22.4)
 
 devDependencies:
+  '@microsoft/eslint-formatter-sarif':
+    specifier: ^3.0.0
+    version: 3.0.0
   '@types/node':
     specifier: ^20.9.1
     version: 20.9.1
@@ -1791,6 +1794,18 @@ packages:
       '@jridgewell/resolve-uri': 3.1.1
       '@jridgewell/sourcemap-codec': 1.4.15
 
+  /@microsoft/eslint-formatter-sarif@3.0.0:
+    resolution: {integrity: sha512-KIKkT44hEqCzqxODYwFMUvYEK0CrdHx/Ll9xiOWgFbBSRuzbxmVy4d/tzfgoucGz72HJZNOMjuyzFTBKntRK5Q==}
+    engines: {node: '>= 14'}
+    dependencies:
+      eslint: 8.54.0
+      jschardet: 3.0.0
+      lodash: 4.17.21
+      utf8: 3.0.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /@nodelib/fs.scandir@2.1.5:
     resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
     engines: {node: '>= 8'}
@@ -4170,6 +4185,11 @@ packages:
       argparse: 2.0.1
     dev: true
 
+  /jschardet@3.0.0:
+    resolution: {integrity: sha512-lJH6tJ77V8Nzd5QWRkFYCLc13a3vADkh3r/Fi8HupZGWk2OVVDfnZP8V/VgQgZ+lzW0kG2UGb5hFgt3V3ndotQ==}
+    engines: {node: '>=0.1.90'}
+    dev: true
+
   /jsesc@0.5.0:
     resolution: {integrity: sha512-uZz5UnB7u4T9LvwmFqXii7pZSouaRPorGs5who1Ip7VO0wxanFvBL7GkM6dTHlgX+jhBApRetaWpnDabOeTcnA==}
     hasBin: true
@@ -5679,6 +5699,10 @@ packages:
       react: 18.2.0
     dev: false
 
+  /utf8@3.0.0:
+    resolution: {integrity: sha512-E8VjFIQ/TyQgp+TZfS6l8yp/xWppSAHzidGiRrqe4bK4XP9pTRyKFgGJpO3SN7zdX4DeomTrwaseCHovfpFcqQ==}
+    dev: true
+
   /util-deprecate@1.0.2:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
     dev: false