web: move context controllers into reactive controller plugins

[kensternberg-authentik]

web: move context controllers into reactive controller plugins

Details

While I was working on the Patternfly 5 thing, I found myself cleaning up the way our context controllers are plugged into the Interfaces. I realized a couple of things that had bothered me before:

1. It does not matter where the context controller lives so long as the context controller has a references to the LitElement that hosts it. ReactiveControllers provide that reference.
2. ReactiveControllers are a perfect place to hide some of these details, so that they don’t have to clutter up our Interface declaration.
3. The ReactiveController hostConnected()/hostDisconnected() lifecycle is a much better place to hook up our EVENT_REFRESH events to the contexts and controllers that care about them than some random place in the loader cycle.
4. It’s much easier to detect and control when an external change to a context’s state object, which is supposed to be a mirror of the context, changes outside the controller, by using the hostUpdate() method. When the controller causes a state change, the states will be the same, allowing us to short out the potential infinite loop.

This commit also uses the symbol-as-property-name trick to guarantee the privacy of some fields that should truly be private. They’re unfindable and inaddressible from the outside world. This is preferable to using the Private Member syntax (the # prefix) because Babel, TypeScript, and ESBuild all use an underlying registry of private names that “do not have good performance characteristics if you create many instances of classes with private fields” ESBuild Caveats.

Checklist

• The code has been formatted (make web)

[netlify]

✅ Deploy Preview for authentik-docs ready!

Name	Link
🔨 Latest commit	25b5a6b
🔍 Latest deploy log	https://app.netlify.com/sites/authentik-docs/deploys/6606f6d704a490000931b1e8
😎 Deploy Preview	https://deploy-preview-8996--authentik-docs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for authentik-storybook ready!

Name	Link
🔨 Latest commit	25b5a6b
🔍 Latest deploy log	https://app.netlify.com/sites/authentik-storybook/deploys/6606f6d771161c0008f0d8e8
😎 Deploy Preview	https://deploy-preview-8996--authentik-storybook.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[github-actions]

authentik PR Installation instructions

Instructions for docker-compose

Add the following block to your .env file:

AUTHENTIK_IMAGE=ghcr.io/goauthentik/dev-server
AUTHENTIK_TAG=gh-ghcr.io/goauthentik/dev-server:gh-39ef3c781ba132517eb47425753b6d9a2e735a53
AUTHENTIK_OUTPOSTS__CONTAINER_IMAGE_BASE=ghcr.io/goauthentik/dev-%(type)s:gh-%(build_hash)s

For arm64, use these values:

AUTHENTIK_IMAGE=ghcr.io/goauthentik/dev-server
AUTHENTIK_TAG=gh-ghcr.io/goauthentik/dev-server:gh-39ef3c781ba132517eb47425753b6d9a2e735a53-arm64
AUTHENTIK_OUTPOSTS__CONTAINER_IMAGE_BASE=ghcr.io/goauthentik/dev-%(type)s:gh-%(build_hash)s

Afterwards, run the upgrade commands from the latest release notes.

Instructions for Kubernetes

Add the following block to your values.yml file:

authentik:
    outposts:
        container_image_base: ghcr.io/goauthentik/dev-%(type)s:gh-%(build_hash)s
image:
    repository: ghcr.io/goauthentik/dev-server
    tag: gh-ghcr.io/goauthentik/dev-server:gh-39ef3c781ba132517eb47425753b6d9a2e735a53

For arm64, use these values:

authentik:
    outposts:
        container_image_base: ghcr.io/goauthentik/dev-%(type)s:gh-%(build_hash)s
image:
    repository: ghcr.io/goauthentik/dev-server
    tag: gh-ghcr.io/goauthentik/dev-server:gh-39ef3c781ba132517eb47425753b6d9a2e735a53-arm64

Afterwards, run the upgrade commands from the latest release notes.