web: move to wireit as the build runner language (goauthentik#10440)

* web: fix esbuild issue with style sheets

Getting ESBuild, Lit, and Storybook to all agree on how to read and parse stylesheets is a serious
pain. This fix better identifies the value types (instances) being passed from various sources in
the repo to the three *different* kinds of style processors we're using (the native one, the
polyfill one, and whatever the heck Storybook does internally).

Falling back to using older CSS instantiating techniques one era at a time seems to do the trick.
It's ugly, but in the face of the aggressive styling we use to avoid Flashes of Unstyled Content
(FLoUC), it's the logic with which we're left.

In standard mode, the following warning appears on the console when running a Flow:

```
Autofocus processing was blocked because a document already has a focused element.
```

In compatibility mode, the following **error** appears on the console when running a Flow:

```
crawler-inject.js:1106 Uncaught TypeError: Failed to execute 'observe' on 'MutationObserver': parameter 1 is not of type 'Node'.
    at initDomMutationObservers (crawler-inject.js:1106:18)
    at crawler-inject.js:1114:24
    at Array.forEach (<anonymous>)
    at initDomMutationObservers (crawler-inject.js:1114:10)
    at crawler-inject.js:1549:1
initDomMutationObservers @ crawler-inject.js:1106
(anonymous) @ crawler-inject.js:1114
initDomMutationObservers @ crawler-inject.js:1114
(anonymous) @ crawler-inject.js:1549
```

Despite this error, nothing seems to be broken and flows work as anticipated.

* root: fix migrations missing using db_alias

Signed-off-by: Marc 'risson' Schmitt <[email protected]>

* more

Signed-off-by: Marc 'risson' Schmitt <[email protected]>

* web: add wireit as a dependency and move SFE into an independent package

* web: make `sfe` a legitimite subpackage and use `wireit` to control the build

- Move sfe to a `packages` subfolder: this is a more standard format for subpackages
- `Move sfe/index.ts` to `sfe/src/index.ts`: this is a more standard layout for a package
- Adjusted paths is `package.json` and `sfe/rollup.config.js` accordingly.
- Add prettier and safety linting to `sfe`.
- fix a naming issues in `build-locales`, highlighted by eslint
- fix some minor linting issues is `build-locales`
- add comments to `build-locales`, to make it clear what it does
- updated the README and LICENSE files
- start using `wireit` heavily as the task-runner definition language

Primarily, to look professional and pave the way for future enhancements.

Aside from the standardization and so forth, the primary goal here is to move our task runner to
wireit. Wireit offers a number of intriguing abilities with respect to caching, building, and
testing, such as an ability to `watch` our folders and files and automatically re-run the build when
the relevant code changes, without having to rebuild the copied content or sub-packages such as
`sfe`.

The ability to pass in environment variables without needed `cross-env` makes code that required it
much easier to read.

Commands that take a long time can be prefixed with the environment variable `${NODE_RUNNER} `,
which then would allow you to default to using `node`, but by setting `NODE_RUNNER` in your shell
you could specify `bun` (or `deno`, maybe, but I haven't tested it with `deno`).  `bun` runs the
`eslint` pass in about three-quarters the time `node` takes.

This commit exists primarily to ensure that the build runs as expected under CI, and the result is
as expected under CI.

Wireit was produced by Google and is used by Adobe Spectrum Components, Patternfly Components,
Material Web, Red Hat Design, and the Lit-Element teams, so I'm confident that it's robust and
reliable as a build runner.

* Merge failed to account for this.

* web: fix bad reference to lint command

* Adding sfe to workspaces means its install is run automatically.

* sfe build is now orchestrated by the web build process

* web: slowly tracking down the old ways.

* Trying to fix lit-analyze pass.

* Still struggling with the build.

* Monorepo, please.

* Still trying to solve swc binding issue.

* Reformat package.json so that scripts and wireit are closer to one another.

* Use the right formatter for packagefiles.

* Retarget dockerfile to have the right paths to sfe during build.

* Comment to explain gitignore update.

* Add lint correcting to package.json as well as package-lock

* Restored lost package-lock.json

* Updating the authentik version.

* Trying to force version consistency.

---------

Signed-off-by: Marc 'risson' Schmitt <[email protected]>
Co-authored-by: Marc 'risson' Schmitt <[email protected]>

.github/workflows/api-ts-publish.yml

@@ -35,8 +35,8 @@ jobs:
         run: |
           export VERSION=`node -e 'console.log(require("../gen-ts-api/package.json").version)'`
           npm i @goauthentik/api@$VERSION
-      - name: Upgrade /web/sfe
-        working-directory: web/sfe
+      - name: Upgrade /web/packages/sfe
+        working-directory: web/packages/sfe
         run: |
           export VERSION=`node -e 'console.log(require("../gen-ts-api/package.json").version)'`
           npm i @goauthentik/api@$VERSION

.github/workflows/ci-web.yml

@@ -28,15 +28,8 @@ jobs:
         include:
           - command: tsc
             project: web
-            extra_setup: |
-              cd sfe/ && npm ci
           - command: lit-analyse
             project: web
-            extra_setup: |
-              # lit-analyse doesn't understand path rewrites, so make it
-              # belive it's an actual module
-              cd node_modules/@goauthentik
-              ln -s ../../src/ web
         exclude:
           - command: lint:lockfile
             project: tests/wdio

Dockerfile

@@ -30,22 +30,17 @@ WORKDIR /work/web
 
 RUN --mount=type=bind,target=/work/web/package.json,src=./web/package.json \
     --mount=type=bind,target=/work/web/package-lock.json,src=./web/package-lock.json \
-    --mount=type=bind,target=/work/web/sfe/package.json,src=./web/sfe/package.json \
-    --mount=type=bind,target=/work/web/sfe/package-lock.json,src=./web/sfe/package-lock.json \
+    --mount=type=bind,target=/work/web/packages/sfe/package.json,src=./web/packages/sfe/package.json \
     --mount=type=bind,target=/work/web/scripts,src=./web/scripts \
     --mount=type=cache,id=npm-web,sharing=shared,target=/root/.npm \
-    npm ci --include=dev && \
-    cd sfe && \
     npm ci --include=dev
 
 COPY ./package.json /work
 COPY ./web /work/web/
 COPY ./website /work/website/
 COPY ./gen-ts-api /work/web/node_modules/@goauthentik/api
 
-RUN npm run build && \
-    cd sfe && \
-    npm run build
+RUN npm run build
 
 # Stage 3: Build go proxy
 FROM --platform=${BUILDPLATFORM} mcr.microsoft.com/oss/go/microsoft/golang:1.22-fips-bookworm AS go-builder

web/.gitignore

@@ -109,4 +109,8 @@ temp/
 # End of https://www.gitignore.io/api/node
 api/**
 storybook-static/
+
+# Wireit's cache
+.wireit
+
 custom-elements.json

web/.prettierignore

@@ -12,3 +12,5 @@ storybook-static/
 # Prettier breaks the tsconfig file
 tsconfig.json
 .storybook/css-import-maps*
+package.json
+packages/**/package.json

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

@@ -40,7 +40,6 @@ const rawCssImportMaps = [
     'import PFGallery from "@patternfly/patternfly/layouts/Gallery/gallery.css";',
     'import PFGlobal from "@patternfly/patternfly/patternfly-base.css";',
     'import PFGrid from "@patternfly/patternfly/layouts/Grid/grid.css";',
-    'import PFHint from "@patternfly/patternfly/components/Hint/hint.css";',
     'import PFInputGroup from "@patternfly/patternfly/components/InputGroup/input-group.css";',
     'import PFLabel from "@patternfly/patternfly/components/Label/label.css";',
     'import PFList from "@patternfly/patternfly/components/List/list.css";',
@@ -58,6 +57,7 @@ const rawCssImportMaps = [
     'import PFSizing from "@patternfly/patternfly/utilities/Sizing/sizing.css";',
     'import PFSpacing from "@patternfly/patternfly/utilities/Spacing/spacing.css";',
     'import PFSpinner from "@patternfly/patternfly/components/Spinner/spinner.css";',
+    'import PFSplit from "@patternfly/patternfly/layouts/Split/split.css";',
     'import PFStack from "@patternfly/patternfly/layouts/Stack/stack.css";',
     'import PFSwitch from "@patternfly/patternfly/components/Switch/switch.css";',
     'import PFTable from "@patternfly/patternfly/components/Table/table.css";',
@@ -71,8 +71,10 @@ const rawCssImportMaps = [
     'import styles from "./LibraryPageImpl.css";',
 ];
 
-const cssImportMaps = rawCssImportMaps.reduce((acc, line) => (
-{...acc, [line]: line.replace(/\.css/, ".css?inline")}), {});
+const cssImportMaps = rawCssImportMaps.reduce(
+    (acc, line) => ({ ...acc, [line]: line.replace(/\.css/, ".css?inline") }),
+    {},
+);
 
 export { cssImportMaps };
 export default cssImportMaps;

web/LICENSE.txt

@@ -0,0 +1,18 @@
+The MIT License (MIT)
+
+Copyright (c) 2024 Authentik Security, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and
+associated documentation files (the "Software"), to deal in the Software without restriction,
+including without limitation the rights to use, copy, modify, merge, publish, distribute,
+sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+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.

web/README.md

@@ -107,3 +107,8 @@ settings in JSON files, which do not support comments.
     -   `compilerOptions.plugins.ts-lit-plugin.rules.no-incompatible-type-binding: "warn"`: lit-analyzer
         does not support generics well when parsing a subtype of `HTMLElement`. As a result, this threw
         too many errors to be supportable.
+
+### License
+
+This code is licensed under the [MIT License](https://www.tldrlegal.com/license/mit-license).
+[A copy of the license](./LICENSE.txt) is included with this package.

web/build.mjs

@@ -115,7 +115,9 @@ async function buildOneSource(source, dest) {
         });
         const end = Date.now();
         console.log(
-            `[${new Date(end).toISOString()}] Finished build for target ${source} in ${Date.now() - start}ms`,
+            `[${new Date(end).toISOString()}] Finished build for target ${source} in ${
+                Date.now() - start
+            }ms`,
         );
     } catch (exc) {
         console.error(`[${new Date(Date.now()).toISOString()}] Failed to build ${source}: ${exc}`);