web: replace multi-select with dual-select for all propertyMapping invocations

[kensternberg-authentik]

web: replace multi-select with dual-select for all propertyMapping invocations

All of the uses of <select> to show propertyMappings have been replaced with an invocation to a variant of dual select that allows for dynamic production of the “selected” list. Instead of giving a “selected” list of elements, a “selector” function is passed that can, given the elements listed by the provider, generated the “selected” list dynamically.

This feature is required for propertyMappings because many of the propertyMappings have an alternative “default selected” feature whereby an object with no property mappings is automatically granted some by the .managed field of the property mapping. The DualSelectPair type is now tragically mis-named, as it it’s now a 4-tuple, the fourth being whatever object or field is necessary to figure out what the default value might be. For example, the Oauth2PropertyMappingsSelector looks like this:

    export function makeOAuth2PropertyMappingsSelector(instanceMappings: string[] | undefined) {
        const localMappings = instanceMappings ? new Set(instanceMappings) : undefined;
        return localMappings
            ? ([pk, _]: DualSelectPair) => localMappings.has(pk)
            : ([_0, _1, _2, scope]: DualSelectPair<ScopeMapping>) =>
                  scope?.managed?.startsWith("goauthentik.io/providers/oauth2/scope-") &&
                  scope?.managed !== "goauthentik.io/providers/oauth2/scope-offline_access";
    }

If there are instanceMappings, we create a Set of them and just look up the pk for “is this selected” as we generate the component.

If there is not, we look at the scope object itself (Oauth2PropertyMappings were called “scopes” in the original source) and perform a token analysis.

It works well, is reasonably fast, and reasonably memory-friendly.

In the case of RAC, OAuth2, and ProxyProviders, I’ve also provided external definitions of the MappingProvider and MappingSelector, so that they can be shared between the Provider and the ApplicationWizard.

A Fine-Toothed Comb

The algorithm for finding the “alternative (default) selections” was different between the two instances of both Oauth and Proxy. I’m not marking this as “ready” until Jens (@BeryJu) and I can go over why that might have been so, and decide if using a common implementation for both is the correct thing to do.

Also, a lot of this is (still) cut-and-paste; the dual-select invocation, and the definitions of Providers and Selectors have a bit of boilerplate that it just didn’t make sense to try and abstract away; the code is DAMP (Descriptive and Meaningful Phrases), and I can live with it. Unfortunately, that also points to the possibility of something being off; the wrong default token, or the wrong phrase to describe the “Available” and “Selected” columns. So this is not (yet) ready for a full pull review.

On the other hand, if this passes muster and we’re happy with it, there are 11 more places to put DualSelect, four of which are pure cut-and-paste lookups of the PaginatedOauthSourceList, plus a miscellany of Prompts, Sources, Stages, Roles, EventTransports and Policies.

Savings

Despite the churn, the difference between the two implementations is 438 lines removed, 231 lines added, 121 lines new. 86 LOC deleted. Could be better. :-)

Checklist

• The code has been formatted (make web)

[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-70ca833a56e59fa951da848e0b0da71c29864550
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-70ca833a56e59fa951da848e0b0da71c29864550-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-70ca833a56e59fa951da848e0b0da71c29864550

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-70ca833a56e59fa951da848e0b0da71c29864550-arm64

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

[kensternberg-authentik]

Too many of the large HTML objects I hit had embedded ifs that drove the complexity way above 9. For the time being, I'll have to make this a warning.

[kensternberg-authentik]

Also, I tightened up the language a bit. "Property mappings used to user creation" was not grammatical, and "used for user creation" felt redundant. "Property mappings for user creation" seems about right. @tanberry, does this seem right to you?