web: simplify ?inline handler for Storybook (#12246)

* web: Add InvalidationFlow to Radius Provider dialogues

## What

- Bugfix: adds the InvalidationFlow to the Radius Provider dialogues
  - Repairs: `{"invalidation_flow":["This field is required."]}` message, which was *not* propagated
    to the Notification.
- Nitpick: Pretties `?foo=${true}` expressions: `s/\?([^=]+)=\$\{true\}/\1/`

## Note

Yes, I know I'm going to have to do more magic when we harmonize the forms, and no, I didn't add the
Property Mappings to the wizard, and yes, I know I'm going to have pain with the *new* version of
the wizard. But this is a serious bug; you can't make Radius servers with *either* of the current
dialogues at the moment.

* web: simplify `?inline` handler for Storybook

# What

- Revise the `?inline` handler for Storybook
- Enable headless test runs of E2E
- Reduce headless testing to single instances

# Why

## `?inline` handling

Vite-for-Storybook-for-Web-Components has a requirement that all component CSS imports be
suffixed with an `?inline` argument so Vite knows to put the CSS into the component and
not inject it into the document head.

This `?inline` argument is an implementation detail of Storybook. It would be irrelevant clutter
added to our codebase. We were using `rollup-plugin-modify` to find every instance of an
import-to-component, but the implementation was clunky and involved scanning the source code
manually.

`rollup-plugin-modify` version 3 has regular expressions and takes a function as an argument. This
allows us to generate the CSS import maps on-the-fly when Storybook is run, eliminating a fragile
build step.  We can also remove the source code scanner for those imports.

## Changes to testing

It's just nice to be able to run the E2E tests headlessly, without them eating up your screen real
estate, flashing, or grabbing your mouse.

WebdriverIO's testing of Web Components is new and, as we've seen, a bit cranky. The WebdriverIO
team currently recommends not running the tests in parallel. We only have about 70 tests so far, and
they're fairly speedy, especially when you don't have to invoke a browser session for every test.

web/.storybook/main.ts

@@ -5,11 +5,19 @@ import modify from "rollup-plugin-modify";
 import postcssLit from "rollup-plugin-postcss-lit";
 import tsconfigPaths from "vite-tsconfig-paths";
 
-import { cssImportMaps } from "./css-import-maps";
-
 export const isProdBuild = process.env.NODE_ENV === "production";
 export const apiBasePath = process.env.AK_API_BASE_PATH || "";
 
+const importInlinePatterns = [
+    'import AKGlobal from "(\\.\\./)*common/styles/authentik\\.css',
+    'import AKGlobal from "@goauthentik/common/styles/authentik\\.css',
+    'import PF.+ from "@patternfly/patternfly/\\S+\\.css',
+    'import ThemeDark from "@goauthentik/common/styles/theme-dark\\.css',
+    'import styles from "\\./LibraryPageImpl\\.css',
+];
+
+const importInlineRegexp = new RegExp(importInlinePatterns.map((a) => `(${a})`).join("|"));
+
 const config: StorybookConfig = {
     stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
     addons: [
@@ -43,7 +51,12 @@ const config: StorybookConfig = {
         return {
             ...config,
             plugins: [
-                modify(cssImportMaps),
+                modify({
+                    find: importInlineRegexp,
+                    replace: (match: RegExpMatchArray) => {
+                        return `${match}?inline`;
+                    },
+                }),
                 replace({
                     "process.env.NODE_ENV": JSON.stringify(
                         isProdBuild ? "production" : "development",

web/package.json

@@ -133,8 +133,8 @@
         "pseudolocalize": "wireit",
         "storybook": "storybook dev -p 6006",
         "storybook:build": "wireit",
-        "storybook:build-import-map": "wireit",
         "test": "wireit",
+        "test:e2e": "wireit",
         "test:e2e:watch": "wireit",
         "test:watch": "wireit",
         "tsc": "wireit",
@@ -316,16 +316,23 @@
                 "NODE_OPTIONS": "--max_old_space_size=8192"
             }
         },
-        "storybook:build-import-map": {
-            "command": "node scripts/build-storybook-import-maps.mjs"
-        },
         "test": {
             "command": "wdio ./wdio.conf.ts --logLevel=warn",
             "env": {
                 "CI": "true",
                 "TS_NODE_PROJECT": "tsconfig.test.json"
             }
         },
+        "test:e2e": {
+            "command": "wdio run ./tests/wdio.conf.ts",
+            "dependencies": [
+                "build"
+            ],
+            "env": {
+                "CI": "true",
+                "TS_NODE_PROJECT": "./tests/tsconfig.test.json"
+            }
+        },
         "test:e2e:watch": {
             "command": "wdio run ./tests/wdio.conf.ts",
             "dependencies": [

web/wdio.conf.ts

@@ -59,7 +59,7 @@ const maxInstances =
     process.env.MAX_INSTANCES !== undefined
         ? parseInt(process.env.MAX_INSTANCES, DEFAULT_MAX_INSTANCES)
         : runHeadless
-          ? 10
+          ? 1
           : 1;
 
 export const config: WebdriverIO.Config = {