web: fix value handling inside controlled components

[kensternberg-authentik]

web: fix value handling inside controlled components

Details

This is one of those stupid bugs that drive web developers crazy. The basics are straightforward: when you cause a higher-level component to have a “big enough re-render,” for some unknown definition of “big enough,” it will re-render the sub-components. In traditional web interaction, those components should never be re-rendered while the user is interacting with the form, but in frameworks where there’s dynamic re-arrangement, part or all of the form could get re-rendered at any mmoment. Since neither the form nor any of its intermediaries is tracking the values as they’re changed, it’s up to the components themselves to keep the user’s input– and to be hardened against property changes coming from the outside world.

So static memoization of the initial value passed in, and aggressively walling off the values the customer generates from that field, are needed to protect the user’s work from any framework’s dynamic DOM management. I remember struggling with this in React; I had hoped Lit was better, but in this case, not better enough.

The protocol for “is it an ak-data-control” is “it has a json() method that returns the data ready to be sent to the authentik server.” I missed that in one place, so that’s on me.

• The code has been formatted (make web)

[netlify]

✅ Deploy Preview for authentik-docs canceled.

Name	Link
🔨 Latest commit	2846e49
🔍 Latest deploy log	https://app.netlify.com/sites/authentik-docs/deploys/663be712d4a5a100089f466b

[netlify]

✅ Deploy Preview for authentik-storybook ready!

Name	Link
🔨 Latest commit	2846e49
🔍 Latest deploy log	https://app.netlify.com/sites/authentik-storybook/deploys/663be7129c997200084f996c
😎 Deploy Preview	https://deploy-preview-9648--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.

[kensternberg-authentik]

Storing the internal "values" independently of the "value" field, which is really just defaultValue for our purposes.

[kensternberg-authentik]

And with the taking control of value, this is how we ensure the values passed to authentik are correct.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 92.32%. Comparing base (04d613d) to head (2846e49).

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #9648      +/-   ##
==========================================
- Coverage   92.42%   92.32%   -0.10%     
==========================================
  Files         688      688              
  Lines       33639    33639              
==========================================
- Hits        31090    31057      -33     
- Misses       2549     2582      +33     

Flag	Coverage Δ
e2e	49.00% <ø> (-1.13%)	⬇️
integration	25.65% <ø> (ø)
unit	89.78% <ø> (-0.01%)	⬇️

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-0e60e755d4de15f386c7dda16481f5db2363a5f5
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-0e60e755d4de15f386c7dda16481f5db2363a5f5-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-0e60e755d4de15f386c7dda16481f5db2363a5f5

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-0e60e755d4de15f386c7dda16481f5db2363a5f5-arm64

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

[BeryJu]

/cherry-pick version-2024.4