web: testing, storybooking, commenting, and documenting the simple things

[kensternberg-authentik]

web: Testing and documenting the simple things

Details

This commit adds unit tests for the Alerts and EmptyState elements. It includes a new test/documentation feature; elements can now be fully documented with text description and active controls.

It removes the babel imports entirely. Either we don’t need them, or the components that do need them are importing them automatically.

An outstanding bug in WebDriverIO unfortunately means that the tests cannot be run in parallel for the time being.While one test is running, the compiler for other tests becomes unreliable. They’re currently working on this issue. I have set the maxInstances to 1.

I have updated the <ak-alert> component just a bit, providing an attribute alternative to the Level property; now instead of passing it a <ak-alert level=${Levels.Warning}> properties, you can just say <ak-alert warning> and it’ll work just fine. The old way is still the default behavior.

The default behavior for EmptyState was a little confusing; I’ve re-arranged it for clarity. Since I touched it, I also added the interface and HTMLElementTagNameMap declarations.

Added documentation to all the elements I’ve touched (so far).

If changes to the frontend have been made

• The code has been formatted (make web)
• New interactivity has been documented in storybook
• New components have been added to the test suite

[netlify]

✅ Deploy Preview for authentik-storybook ready!

Name	Link
🔨 Latest commit	35f96df
🔍 Latest deploy log	https://app.netlify.com/sites/authentik-storybook/deploys/664688c02783dd000818519e
😎 Deploy Preview	https://deploy-preview-9752--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.

[netlify]

✅ Deploy Preview for authentik-docs ready!

Name	Link
🔨 Latest commit	22a8ccf
🔍 Latest deploy log	https://app.netlify.com/sites/authentik-docs/deploys/6647d3e91f6a900008ecd8f8
😎 Deploy Preview	https://deploy-preview-9752--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.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Please upload report for BASE (web/cleanup/admin-overview-testing@09803fe). Learn more about missing BASE report.

❗ Current head 35f96df differs from pull request most recent head 22a8ccf

Please upload reports for the commit 22a8ccf to get more accurate results.

Additional details and impacted files

@@                          Coverage Diff                          @@
##             web/cleanup/admin-overview-testing    #9752   +/-   ##
=====================================================================
  Coverage                                      ?   92.38%           
=====================================================================
  Files                                         ?      704           
  Lines                                         ?    34403           
  Branches                                      ?        0           
=====================================================================
  Hits                                          ?    31784           
  Misses                                        ?     2619           
  Partials                                      ?        0           

Flag	Coverage Δ
e2e	49.66% <50.00%> (?)
integration	25.36% <50.00%> (?)
unit	89.82% <100.00%> (?)

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-35f96df66eae6cffcb20889750cd669227ffdd23
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-35f96df66eae6cffcb20889750cd669227ffdd23-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-35f96df66eae6cffcb20889750cd669227ffdd23

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-35f96df66eae6cffcb20889750cd669227ffdd23-arm64

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