web: manage stacked modals with a stack

[kensternberg-authentik]

web: manage stacked modals with a stack

“Events flow up. Data flows down.”

This commit creates a top-level listening controller associated with the main Interface that listens for ModalShow events and registers the modal with a stack. When it receives a corresponding KeyUp:Escape, it closes the topmost modal and removes all references to that modal from the stack. When it receives a ModalHide event, it removes all references to the target modal and removes all references to that modal from the stack.

This commit includes a few new techniques. First, thanks to Justin Fagnani and the Shoelace team, this commit includes an alternative technique for declaring custom events by leveraging the GlobalEventHandlers type. This actually works better: the event is explicit, easy to understand, and the typescript language server actually gets them to correspond correctly; if you listen for a specific custom event, the handler had better be of the right type to receive that specific event!

Second, this introduces the first custom decorator, @bound(), which eliminates the need to say this.eventHandler = this.eventHandler.bind(this) from event handling methods that will have to be passed outside the this context of an HTMLElement. After conducting several experiments to see if I understood the PropertyDescriptor protocol correctly, I concluded that this is a safe technique for wiring up removeEventListener() handlers.

Checklist

• The code has been formatted (make web)

[netlify]

✅ Deploy Preview for authentik-docs canceled.

Name	Link
🔨 Latest commit	897c595
🔍 Latest deploy log	https://app.netlify.com/sites/authentik-docs/deploys/66156e43368fd60008328e7a

[netlify]

✅ Deploy Preview for authentik-storybook ready!

Name	Link
🔨 Latest commit	897c595
🔍 Latest deploy log	https://app.netlify.com/sites/authentik-storybook/deploys/66156e430bc3970008d545dc
😎 Deploy Preview	https://deploy-preview-9193--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.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 92.40%. Comparing base (54387a7) to head (897c595).

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #9193      +/-   ##
==========================================
+ Coverage   92.38%   92.40%   +0.02%     
==========================================
  Files         646      646              
  Lines       31851    31851              
==========================================
+ Hits        29425    29433       +8     
+ Misses       2426     2418       -8     

Flag	Coverage Δ
e2e	50.49% <ø> (+0.01%)	⬆️
integration	26.35% <ø> (ø)
unit	89.79% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[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-a62f83eaddd513ad459055f44e7128b5701d01c1
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-a62f83eaddd513ad459055f44e7128b5701d01c1-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-a62f83eaddd513ad459055f44e7128b5701d01c1

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-a62f83eaddd513ad459055f44e7128b5701d01c1-arm64

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