chore: bump Backstage to 1.51.1 and migrate test tooling

Backstage CLI 0.36 makes Jest a peer dependency and drops the bundled
version, so tests, type-check and lint all broke. Add jest 30, jsdom 27,
@jest/environment-jsdom-abstract and @types/jest as devDependencies, and
extend transformIgnorePatterns for the rehype-raw chain pulled in by the
newer core-components.

Migrate msw 1 (EOL) to msw 2 to drop @mswjs/interceptors' vulnerable
xmldom (5 high advisories) and stay compatible with Jest 30. catalog-react
3.0 and eslint-plugin 0.3 have no breaking changes affecting this plugin.

Pin GitHub Actions to commit SHAs via pinact for supply-chain safety.

Author: tembleking

.github/workflows/ci.yaml

@@ -11,11 +11,11 @@ jobs:
         shell: nix develop --command bash {0}
     steps:
       - name: Checkout
-        uses: actions/checkout@v4
+        uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
 
-      - uses: DeterminateSystems/nix-installer-action@main
-      - uses: DeterminateSystems/magic-nix-cache-action@main
-      - uses: DeterminateSystems/flake-checker-action@main
+      - uses: DeterminateSystems/nix-installer-action@ef8a148080ab6020fd15196c2084a2eea5ff2d25 # v22
+      - uses: DeterminateSystems/magic-nix-cache-action@908b263ff629f4cc17666315b7fd3ec127c6244d # v14
+      - uses: DeterminateSystems/flake-checker-action@3164002371bc90729c68af0e24d5aacf20d7c9f6 # v12
 
       - name: Install dependencies
         run: yarn install --immutable

.github/workflows/release.yaml

@@ -8,7 +8,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
-        uses: actions/checkout@v4
+        uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
         with:
           fetch-depth: 2 # We only need the current and the previous commit
 
@@ -34,12 +34,12 @@ jobs:
       contents: write
     steps:
       - name: Checkout
-        uses: actions/checkout@v4
+        uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
         with:
           fetch-depth: 0
-      - uses: DeterminateSystems/nix-installer-action@main
-      - uses: DeterminateSystems/magic-nix-cache-action@main
-      - uses: DeterminateSystems/flake-checker-action@main
+      - uses: DeterminateSystems/nix-installer-action@ef8a148080ab6020fd15196c2084a2eea5ff2d25 # v22
+      - uses: DeterminateSystems/magic-nix-cache-action@908b263ff629f4cc17666315b7fd3ec127c6244d # v14
+      - uses: DeterminateSystems/flake-checker-action@3164002371bc90729c68af0e24d5aacf20d7c9f6 # v12
       - name: Install dependencies
         run: |
           yarn install --immutable

.yarnrc.yml

@@ -1 +1,6 @@
+approvedGitRepositories:
+  - "**"
+
+enableScripts: true
+
 nodeLinker: node-modules

backstage.json

@@ -1,3 +1,3 @@
 {
-  "version": "1.45.3"
+  "version": "1.51.1"
 }

flake.lock

@@ -32,13 +32,12 @@
                 nodejs
                 pre-commit
                 typescript
+                pinact
                 yarn-berry
-                (python3.withPackages (p: with p; [ gyp ]))
-              ]
-              ++ (with nodePackages; [
                 typescript-language-server
                 node-gyp
-              ]);
+                (python3.withPackages (p: with p; [ gyp ]))
+              ];
               shellHook = ''
                 pre-commit install
               '';

flake.nix

@@ -30,9 +30,10 @@ clean: install
     yarn clean
 
 # Bumps dependencies
-bump:
+update:
     nix flake update
     nix develop --command yarn backstage-cli versions:bump
+    nix develop --command pinact run -u
     nix develop --command pre-commit autoupdate
 
 # Checks for unused dependencies

justfile

@@ -28,9 +28,9 @@
     "@testing-library/react": "^16.0.0"
   },
   "dependencies": {
-    "@backstage/core-components": "^0.18.3",
-    "@backstage/core-plugin-api": "^1.12.0",
-    "@backstage/plugin-catalog-react": "^1.21.3",
+    "@backstage/core-components": "^0.18.10",
+    "@backstage/core-plugin-api": "^1.12.6",
+    "@backstage/plugin-catalog-react": "^3.0.0",
     "@mui/icons-material": "^5.16.0",
     "@mui/material": "^5.16.0",
     "react-use": "^17.2.4"
@@ -40,19 +40,21 @@
     "react-dom": "^16.13.1 || ^17.0.0 || ^18.0.0"
   },
   "devDependencies": {
-    "@backstage/cli": "^0.34.5",
-    "@backstage/config": "^1.3.6",
-    "@backstage/dev-utils": "^1.1.17",
-    "@backstage/eslint-plugin": "^0.2.0",
-    "@backstage/test-utils": "^1.7.13",
+    "@backstage/cli": "^0.36.2",
+    "@backstage/config": "^1.3.8",
+    "@backstage/dev-utils": "^1.1.23",
+    "@backstage/eslint-plugin": "^0.3.0",
+    "@backstage/test-utils": "^1.7.18",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
+    "@jest/environment-jsdom-abstract": "^30.0.0",
     "@spotify/eslint-config-base": "^15.0.0",
     "@spotify/eslint-config-react": "^15.0.0",
     "@spotify/eslint-config-typescript": "^15.0.0",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^16.0.0",
+    "@types/jest": "^30.0.0",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
     "@typescript-eslint/eslint-plugin": "8.48.1",
@@ -67,7 +69,9 @@
     "eslint-plugin-unused-imports": "^2.0.0",
     "express": "^5.2.1",
     "http-proxy-middleware": "^3.0.5",
-    "msw": "^1.0.0",
+    "jest": "^30.0.0",
+    "jsdom": "^27.1.0",
+    "msw": "^2.0.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-router-dom": "^6.0.0",
@@ -81,7 +85,7 @@
   "module": "./dist/index.esm.js",
   "jest": {
     "transformIgnorePatterns": [
-      "node_modules/(?!react-use|@backstage|react-syntax-highlighter|style-loader|css-loader|d3-.*|react-markdown|vfile|vfile-message|unist-.*|unified|bail|is-plain-obj|trough|remark-.*|mdast-.*|micromark.*|decode-named-character-reference|character-entities|property-information|hast-.*|space-separated-tokens|comma-separated-tokens|web-namespaces|zwitch|html-void-elements|ccount|escape-string-regexp|trim-lines|remark-rehype|unist-util-.*|markdown-table|@react-hookz/web|yaml)"
+      "node_modules/(?!react-use|@backstage|react-syntax-highlighter|style-loader|css-loader|d3-.*|react-markdown|vfile|vfile-message|unist-.*|unified|bail|is-plain-obj|trough|remark-.*|mdast-.*|micromark.*|decode-named-character-reference|character-entities|property-information|hast-.*|space-separated-tokens|comma-separated-tokens|web-namespaces|zwitch|html-void-elements|ccount|escape-string-regexp|trim-lines|remark-rehype|rehype-.*|hastscript|unist-util-.*|markdown-table|@react-hookz/web|yaml|msw|@mswjs/.*|@open-draft/.*|rettime|until-async|@bundled-es-modules/.*|strict-event-emitter|headers-polyfill|outvariant|is-node-process)"
     ]
   }
 }

package.json

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 import { SysdigComponent } from './SysdigComponent';
-import { rest } from 'msw';
+import { http, HttpResponse } from 'msw';
 import { setupServer } from 'msw/node';
 import { screen } from '@testing-library/react';
 import {
@@ -61,7 +61,7 @@ describe('SysdigComponent', () => {
   // setup mock response
   beforeEach(() => {
     server.use(
-      rest.get('/*', (_, res, ctx) => res(ctx.status(200), ctx.json({}))),
+      http.get('*', () => HttpResponse.json({})),
     );
   });
 

src/components/SysdigComponent/SysdigComponent.test.tsx

@@ -1,7 +1,7 @@
 import { setupRequestMockHandlers, TestApiProvider } from "@backstage/test-utils";
 import { ConfigReader } from "@backstage/config";
 import { ConfigApi, FetchApi } from "@backstage/core-plugin-api";
-import { rest } from "msw";
+import { http, HttpResponse } from "msw";
 import { setupServer } from "msw/node";
 import { SysdigApiClient } from "./SysdigApiClient";
 import { API_PROXY_BASE_PATH, API_VULN_RUNTIME } from "../../lib";
@@ -23,13 +23,14 @@ describe("SysdigApiClient", () => {
   beforeEach(() => {
     jest.clearAllMocks();
     server.use(
-      rest.get(
+      http.get(
         `http://localhost:7007${API_PROXY_BASE_PATH}${API_VULN_RUNTIME}`,
-        (req, res, ctx) => {
-          if (req.url.searchParams.get("filters") === "test-filter") {
-            return res(ctx.json({ data: [{ id: "1", name: "test-runtime-vuln" }] }));
+        ({ request }) => {
+          const url = new URL(request.url);
+          if (url.searchParams.get("filters") === "test-filter") {
+            return HttpResponse.json({ data: [{ id: "1", name: "test-runtime-vuln" }] });
           }
-          return res(ctx.json({ data: [] }));
+          return HttpResponse.json({ data: [] });
         },
       ),
     );