web: audit and update package.json and associated test harness, with upgrade to WebdriverIO 9 (#11596)

* Just cleaning up.

* web: removing sonarjs from yet another branch.

* web: everything except the tests are up-to-date.  There was a lot, it turns out, we simply weren't using.

* web: update package.json to support WebdriverIO 9

This commit:

- Upgrades to WebdriverIO 9.1.2
- Resets our `devDependencies` collection to remove all imports that we either were not using or
  were duplicates of existing dependencies:
  - *Babel*, of all things
  - Storybook addon css user preferences, now native to Storybook 8
  - SonarJS, *again*, sigh.
  - React

- Fixes a bug where ESLint would report missing features in our build scripts
- Fixes a bug where Wdio might not reach a headless browser before timeout
- Replaces Rollup's CSSLit with Vite's CSSLit, which actually works without hacks, for testing.
- Moves the package-lock scanner to its own script, with better reporting and tool verification,
  which also cleans up the package.lock file a little.

* Prettier just havin' all the opinions.

web/.storybook/css-import-maps.ts

@@ -50,6 +50,7 @@ const rawCssImportMaps = [
     'import PFNotificationDrawer from "@patternfly/patternfly/components/NotificationDrawer/notification-drawer.css";',
     'import PFPage from "@patternfly/patternfly/components/Page/page.css";',
     'import PFPagination from "@patternfly/patternfly/components/Pagination/pagination.css";',
+    'import PFProgress from "@patternfly/patternfly/components/Progress/progress.css";',
     'import PFProgressStepper from "@patternfly/patternfly/components/ProgressStepper/progress-stepper.css";',
     'import PFRadio from "@patternfly/patternfly/components/Radio/radio.css";',
     'import PFSelect from "@patternfly/patternfly/components/Select/select.css";',
@@ -62,7 +63,6 @@ const rawCssImportMaps = [
     'import PFSwitch from "@patternfly/patternfly/components/Switch/switch.css";',
     'import PFTable from "@patternfly/patternfly/components/Table/table.css";',
     'import PFTabs from "@patternfly/patternfly/components/Tabs/tabs.css";',
-    'import PFText from "@patternfly/patternfly/utilities/Text/text.css";',
     'import PFTitle from "@patternfly/patternfly/components/Title/title.css";',
     'import PFToggleGroup from "@patternfly/patternfly/components/ToggleGroup/toggle-group.css";',
     'import PFToolbar from "@patternfly/patternfly/components/Toolbar/toolbar.css";',

web/.storybook/main.ts

@@ -16,7 +16,6 @@ const config: StorybookConfig = {
         "@storybook/addon-controls",
         "@storybook/addon-links",
         "@storybook/addon-essentials",
-        "@jeysal/storybook-addon-css-user-preferences",
         "storybook-addon-mock",
     ],
     staticDirs: [

web/eslint.config.mjs

@@ -63,6 +63,7 @@ export default [
             },
             globals: {
                 ...globals.nodeBuiltin,
+                ...globals.node,
             },
         },
         files: ["scripts/*.mjs", "*.ts", "*.mjs"],

web/package.json

@@ -20,6 +20,7 @@
         "@patternfly/elements": "^4.0.2",
         "@patternfly/patternfly": "^4.224.2",
         "@sentry/browser": "^8.32.0",
+        "@spotlightjs/spotlight": "^2.4.2",
         "@webcomponents/webcomponentsjs": "^2.8.0",
         "base64-js": "^1.5.1",
         "chart.js": "^4.4.4",
@@ -41,53 +42,36 @@
         "yaml": "^2.5.1"
     },
     "devDependencies": {
-        "@babel/core": "^7.25.2",
-        "@babel/plugin-proposal-class-properties": "^7.18.6",
-        "@babel/plugin-proposal-decorators": "^7.24.7",
-        "@babel/plugin-transform-private-methods": "^7.25.4",
-        "@babel/plugin-transform-private-property-in-object": "^7.24.7",
-        "@babel/plugin-transform-runtime": "^7.25.4",
-        "@babel/preset-env": "^7.25.4",
-        "@babel/preset-typescript": "^7.24.7",
-        "@changesets/cli": "^2.27.8",
-        "@custom-elements-manifest/analyzer": "^0.10.2",
         "@eslint/js": "^9.11.1",
-        "@genesiscommunitysuccess/custom-elements-lsp": "^5.0.3",
         "@hcaptcha/types": "^1.0.4",
-        "@jeysal/storybook-addon-css-user-preferences": "^0.2.0",
         "@lit/localize-tools": "^0.8.0",
         "@rollup/plugin-replace": "^6.0.1",
-        "@spotlightjs/spotlight": "^2.4.2",
         "@storybook/addon-essentials": "^8.3.4",
         "@storybook/addon-links": "^8.3.4",
         "@storybook/api": "^7.6.17",
-        "@storybook/blocks": "^8.0.8",
+        "@storybook/blocks": "^8.3.4",
+        "@storybook/builder-vite": "^8.3.4",
         "@storybook/manager-api": "^8.3.4",
         "@storybook/web-components": "^8.3.4",
         "@storybook/web-components-vite": "^8.3.4",
         "@trivago/prettier-plugin-sort-imports": "^4.3.0",
         "@types/chart.js": "^2.9.41",
-        "@types/codemirror": "5.60.15",
+        "@types/codemirror": "^5.60.15",
         "@types/eslint__js": "^8.42.3",
         "@types/grecaptcha": "^3.0.9",
-        "@types/guacamole-common-js": "1.5.2",
+        "@types/guacamole-common-js": "^1.5.2",
+        "@types/mocha": "^10.0.8",
         "@types/node": "^22.7.4",
         "@types/showdown": "^2.0.6",
-        "@typescript-eslint/eslint-plugin": "^8.8.0",
         "@typescript-eslint/parser": "^8.8.0",
         "@wdio/browser-runner": "^9.1.2",
         "@wdio/cli": "^9.1.2",
-        "@wdio/mocha-framework": "^9.1.2",
         "@wdio/spec-reporter": "^9.1.2",
-        "babel-plugin-macros": "^3.1.0",
-        "babel-plugin-tsconfig-paths": "^1.0.3",
         "chokidar": "^4.0.1",
-        "cross-env": "^7.0.3",
         "esbuild": "^0.24.0",
         "eslint": "^9.11.1",
-        "eslint-plugin-lit": "^1.14.0",
+        "eslint-plugin-lit": "^1.15.0",
-        "eslint-plugin-sonarjs": "^2.0.3",
+        "eslint-plugin-wc": "^2.1.1",
-        "eslint-plugin-wc": "^2.1.0",
         "github-slugger": "^2.0.0",
         "glob": "^11.0.0",
         "globals": "^15.10.0",
@@ -96,21 +80,16 @@
         "npm-run-all": "^4.1.5",
         "prettier": "^3.3.3",
         "pseudolocale": "^2.1.0",
-        "react": "^18.2.0",
-        "react-dom": "^18.3.1",
         "rollup-plugin-modify": "^3.0.0",
         "rollup-plugin-postcss-lit": "^2.1.0",
-        "storybook": "^8.1.11",
+        "storybook": "^8.3.4",
         "storybook-addon-mock": "^5.0.0",
         "syncpack": "^13.0.0",
-        "ts-lit-plugin": "^2.0.2",
-        "ts-node": "^10.9.2",
-        "tslib": "^2.7.0",
         "turnstile-types": "^1.2.3",
         "typescript": "^5.6.2",
         "typescript-eslint": "^8.8.0",
+        "vite-plugin-lit-css": "^2.0.0",
         "vite-tsconfig-paths": "^5.0.1",
-        "wdio-wait-for": "^3.0.11",
         "wireit": "^0.14.9"
     },
     "engines": {
@@ -263,7 +242,7 @@
         "lint:lockfile": {
             "__comment": "The lockfile-lint package does not have an option to ensure resolved hashes are set everywhere",
             "shell": true,
-            "command": "[ -z \"$(jq -r '.packages | to_entries[] | select((.key | contains(\"node_modules\")) and (.value | has(\"resolved\") | not)) | .key' < package-lock.json)\" ]"
+            "command": "sh ./scripts/lint-lockfile.sh package-lock.json"
         },
         "lint:lockfiles": {
             "dependencies": [

web/scripts/eslint-nightmare.mjs

@@ -1,67 +0,0 @@
-import { execFileSync } from "child_process";
-import { ESLint } from "eslint";
-import path from "path";
-import process from "process";
-
-// Code assumes this script is in the './web/scripts' folder.
-const projectRoot = execFileSync("git", ["rev-parse", "--show-toplevel"], {
-    encoding: "utf8",
-}).replace("\n", "");
-process.chdir(path.join(projectRoot, "./web"));
-
-const eslintConfig = {
-    fix: true,
-    overrideConfig: {
-        env: {
-            browser: true,
-            es2021: true,
-        },
-        extends: [
-            "eslint:recommended",
-            "plugin:@typescript-eslint/recommended",
-            "plugin:lit/recommended",
-            "plugin:custom-elements/recommended",
-            "plugin:storybook/recommended",
-            "plugin:sonarjs/recommended",
-        ],
-        parser: "@typescript-eslint/parser",
-        parserOptions: {
-            ecmaVersion: 12,
-            sourceType: "module",
-            project: true,
-        },
-        plugins: ["@typescript-eslint", "lit", "custom-elements", "sonarjs"],
-        ignorePatterns: ["authentik-live-tests/**", "./.storybook/**/*.ts"],
-        rules: {
-            "indent": "off",
-            "linebreak-style": ["error", "unix"],
-            "quotes": ["error", "double", { avoidEscape: true }],
-            "semi": ["error", "always"],
-            "@typescript-eslint/ban-ts-comment": "off",
-            "no-unused-vars": "off",
-            "sonarjs/cognitive-complexity": ["warn", 9],
-            "sonarjs/no-duplicate-string": "off",
-            "sonarjs/no-nested-template-literals": "off",
-            "@typescript-eslint/no-unused-vars": [
-                "error",
-                {
-                    argsIgnorePattern: "^_",
-                    varsIgnorePattern: "^_",
-                    caughtErrorsIgnorePattern: "^_",
-                },
-            ],
-            "no-console": ["error", { allow: ["debug", "warn", "error"] }],
-        },
-    },
-};
-
-const updated = ["./src/", "./build.mjs", "./scripts/*.mjs"];
-
-const eslint = new ESLint(eslintConfig);
-const results = await eslint.lintFiles(updated);
-const formatter = await eslint.loadFormatter("stylish");
-const resultText = formatter.format(results);
-const errors = results.reduce((acc, result) => acc + result.errorCount, 0);
-
-console.log(resultText);
-process.exit(errors > 1 ? 1 : 0);

web/scripts/eslint-precommit.mjs

@@ -1,94 +0,0 @@
-import { execFileSync } from "child_process";
-import { ESLint } from "eslint";
-import path from "path";
-import process from "process";
-
-// Code assumes this script is in the './web/scripts' folder.
-const projectRoot = execFileSync("git", ["rev-parse", "--show-toplevel"], {
-    encoding: "utf8",
-}).replace("\n", "");
-process.chdir(path.join(projectRoot, "./web"));
-
-const eslintConfig = {
-    fix: true,
-    overrideConfig: {
-        env: {
-            browser: true,
-            es2021: true,
-        },
-        extends: [
-            "eslint:recommended",
-            "plugin:@typescript-eslint/recommended",
-            "plugin:lit/recommended",
-            "plugin:custom-elements/recommended",
-            "plugin:storybook/recommended",
-            "plugin:sonarjs/recommended",
-        ],
-        parser: "@typescript-eslint/parser",
-        parserOptions: {
-            ecmaVersion: 12,
-            sourceType: "module",
-            project: true,
-        },
-        plugins: ["@typescript-eslint", "lit", "custom-elements", "sonarjs"],
-        ignorePatterns: ["authentik-live-tests/**", "./.storybook/**/*.ts"],
-        rules: {
-            "indent": "off",
-            "linebreak-style": ["error", "unix"],
-            "quotes": ["error", "double", { avoidEscape: true }],
-            "semi": ["error", "always"],
-            "@typescript-eslint/ban-ts-comment": "off",
-            "no-unused-vars": "off",
-            "sonarjs/cognitive-complexity": ["warn", 9],
-            "sonarjs/no-duplicate-string": "off",
-            "sonarjs/no-nested-template-literals": "off",
-            "@typescript-eslint/no-unused-vars": [
-                "error",
-                {
-                    argsIgnorePattern: "^_",
-                    varsIgnorePattern: "^_",
-                    caughtErrorsIgnorePattern: "^_",
-                },
-            ],
-            "no-console": ["error", { allow: ["debug", "warn", "error"] }],
-        },
-    },
-};
-
-const porcelainV1 = /^(..)\s+(.*$)/;
-const gitStatus = execFileSync("git", ["status", "--porcelain", "."], { encoding: "utf8" });
-
-const statuses = gitStatus.split("\n").reduce((acc, line) => {
-    const match = porcelainV1.exec(line.replace("\n"));
-    if (!match) {
-        return acc;
-    }
-    const [status, path] = Array.from(match).slice(1, 3);
-    return [...acc, [status, path.split("\x00")[0]]];
-}, []);
-
-const isModified = /^(M|\?|\s)(M|\?|\s)/;
-const modified = (s) => isModified.test(s);
-
-const isCheckable = /\.(ts|js|mjs)$/;
-const checkable = (s) => isCheckable.test(s);
-
-const ignored = /\/\.storybook\//;
-const notIgnored = (s) => !ignored.test(s);
-
-const updated = statuses.reduce(
-    (acc, [status, filename]) =>
-        modified(status) && checkable(filename) && notIgnored(filename)
-            ? [...acc, path.join(projectRoot, filename)]
-            : acc,
-    [],
-);
-
-const eslint = new ESLint(eslintConfig);
-const results = await eslint.lintFiles(updated);
-const formatter = await eslint.loadFormatter("stylish");
-const resultText = formatter.format(results);
-const errors = results.reduce((acc, result) => acc + result.errorCount, 0);
-
-console.log(resultText);
-process.exit(errors > 1 ? 1 : 0);

web/scripts/eslint.nightmare.mjs

@@ -1,7 +1,6 @@
 import eslint from "@eslint/js";
 import tsparser from "@typescript-eslint/parser";
 import litconf from "eslint-plugin-lit";
-import sonar from "eslint-plugin-sonarjs";
 import wcconf from "eslint-plugin-wc";
 import globals from "globals";
 import tseslint from "typescript-eslint";
@@ -9,7 +8,6 @@ import tseslint from "typescript-eslint";
 const MAX_DEPTH = 4;
 const MAX_NESTED_CALLBACKS = 4;
 const MAX_PARAMS = 5;
-const MAX_COGNITIVE_COMPLEXITY = 9;
 
 const rules = {
     "accessor-pairs": "error",
@@ -128,9 +126,6 @@ const rules = {
 
     "no-unused-vars": "off",
     "no-console": ["error", { allow: ["debug", "warn", "error"] }],
-    "sonarjs/cognitive-complexity": ["off", MAX_COGNITIVE_COMPLEXITY],
-    "sonarjs/no-duplicate-string": "off",
-    "sonarjs/no-nested-template-literals": "off",
     "@typescript-eslint/ban-ts-comment": "off",
     "@typescript-eslint/no-unused-vars": [
         "error",
@@ -167,7 +162,6 @@ export default [
     wcconf.configs["flat/recommended"],
     litconf.configs["flat/recommended"],
     ...tseslint.configs.recommended,
-    sonar.configs.recommended,
     {
         languageOptions: {
             parser: tsparser,

web/scripts/eslint.precommit.mjs

@@ -1,7 +1,6 @@
 import eslint from "@eslint/js";
 import tsparser from "@typescript-eslint/parser";
 import litconf from "eslint-plugin-lit";
-import sonar from "eslint-plugin-sonarjs";
 import wcconf from "eslint-plugin-wc";
 import globals from "globals";
 import tseslint from "typescript-eslint";
@@ -30,7 +29,6 @@ export default [
     wcconf.configs["flat/recommended"],
     litconf.configs["flat/recommended"],
     ...tseslint.configs.recommended,
-    sonar.configs.recommended,
     {
         languageOptions: {
             parser: tsparser,
@@ -43,9 +41,6 @@ export default [
         rules: {
             "no-unused-vars": "off",
             "no-console": ["error", { allow: ["debug", "warn", "error"] }],
-            "sonarjs/cognitive-complexity": ["off", 9],
-            "sonarjs/no-duplicate-string": "off",
-            "sonarjs/no-nested-template-literals": "off",
             "@typescript-eslint/ban-ts-comment": "off",
             "@typescript-eslint/no-unused-vars": [
                 "error",

web/scripts/lint-lockfile.sh

@@ -0,0 +1,21 @@
+#!/usr/bin/env bash
+
+if ! command -v jq  >/dev/null 2>&1 ; then
+    echo "This check requires the jq program be installed."
+    echo "To install jq, visit"
+    echo "    https://jqlang.github.io/jq/"
+    exit 1
+fi
+
+CMD=$(jq -r '.packages | to_entries[] | select((.key | contains("node_modules")) and (.value | has("resolved") | not)) | .key' < "$1")
+
+if [ -n "$CMD" ]; then
+    echo "ERROR package-lock.json entries missing 'resolved' field:"
+    echo ""
+    # Shellcheck erroneously believes that shell string substitution can be used here, but that
+    # feature lacks a "start of line" discriminator.
+    # shellcheck disable=SC2001
+    echo "$CMD" | sed 's/^/    /g'
+    echo ""
+    exit 1
+fi    

web/sfe/package.json

@@ -1,28 +0,0 @@
-{
-    "name": "@goauthentik/web-sfe",
-    "version": "0.0.0",
-    "private": true,
-    "license": "MIT",
-    "dependencies": {
-        "@goauthentik/api": "^2024.6.3-1724414734",
-        "base64-js": "^1.5.1",
-        "bootstrap": "^4.6.1",
-        "formdata-polyfill": "^4.0.10",
-        "jquery": "^3.7.1",
-        "weakmap-polyfill": "^2.0.4"
-    },
-    "scripts": {
-        "build": "rollup -c rollup.config.js --bundleConfigAsCjs",
-        "watch": "rollup -w -c rollup.config.js --bundleConfigAsCjs"
-    },
-    "devDependencies": {
-        "@rollup/plugin-commonjs": "^28.0.0",
-        "@rollup/plugin-node-resolve": "^15.3.0",
-        "@rollup/plugin-swc": "^0.4.0",
-        "@swc/cli": "^0.4.0",
-        "@swc/core": "^1.7.28",
-        "@types/jquery": "^3.5.31",
-        "rollup": "^4.23.0",
-        "rollup-plugin-copy": "^3.5.0"
-    }
-}

web/wdio.conf.ts

@@ -1,7 +1,7 @@
 import replace from "@rollup/plugin-replace";
 import { cwd } from "process";
-import postcssLit from "rollup-plugin-postcss-lit";
 import type { UserConfig } from "vite";
+import litCss from "vite-plugin-lit-css";
 import tsconfigPaths from "vite-tsconfig-paths";
 
 const isProdBuild = process.env.NODE_ENV === "production";
@@ -26,6 +26,7 @@ export const config: WebdriverIO.Config = {
             viteConfig: (config: UserConfig = { plugins: [] }) => ({
                 ...config,
                 plugins: [
+                    litCss(),
                     replace({
                         "process.env.NODE_ENV": JSON.stringify(
                             isProdBuild ? "production" : "development",
@@ -35,7 +36,6 @@ export const config: WebdriverIO.Config = {
                         "preventAssignment": true,
                     }),
                     ...(config?.plugins ?? []),
-                    postcssLit(),
                     tsconfigPaths(),
                 ],
             }),
@@ -93,7 +93,7 @@ export const config: WebdriverIO.Config = {
             "goog:chromeOptions": {
                 args: [
                     "disable-search-engine-choice-screen",
-                    ...(runHeadless ? ["headless", "disable-gpu"] : []),
+                    ...(runHeadless ? ["headless", "disable-gpu", "no-sandbox"] : []),
                 ],
             },
         },