web: add application bindings to the application wizard

[kensternberg-authentik]

web: wizard for applications, now with bindings!

What

Purpose

• Add policy bindings to the application wizard

The Wizard Base:

• Restructures the Wizard base code.
  • ak-wizard-steps holds the steps and listens for NavigationRequest events to move from one step to the next.
  • WizardStep is a base class (no component registration provided) that provides the whole frame, not just the form. It receives the navigation content for the sidebar from ak-wizard-steps, and provides the styling for the header, footer, sidebar, and main form. It has abstractions for buttons, renderMain(), handleButton(), handleEnable(), in a section well-marked as “Public API”. Steps inherit from this class.

Conceptually:

• A wizard is a series of pages (“steps”) with a distinct beginning and end, linked in a series, to complete a task.
• Later steps in the series are inaccessible until an earlier steps has granted access to it.
• Access is predicated on the earlier step being complete and valid. The developer is responsible for determining what “complete and valid” means.
• The series is visible, giving the customer a sense of how much effort is needed to complete the task.
• A parent object maintains (and can modify as needed) the list of steps. It can maintain the information being collected from the user. Alternatively, that information can be kept in each step.

Details:

• Keeping with the Lit paradigm, “requests to change the system flow up, information changed by valid requests flows down.”
• The information flows up using events: WizardNavigation, WizardUpdate, WizardClose.
• The information flows down using properties.

The Application Wizard

• ak-application-wizard-main holds the list of steps, providing a unique slot name for each.
  • It maintains the ApplicationWizardState object.
• ApplicationWizardStep inherits from WizardStep and provides:
  • A means of extraction information from forms
  • A convenience method for updating the ApplicationWizardState object, enabling future steps, and navigating to a future step, in the correct order.
  • A method for cleaning error from the error reporting mechanism as the user navigates from an error-handling state.
  • The title, description, and cancelability of the wizard.
• Steps:
  • step: Handles the application. A good starting point for understanding the point of the Wizard. Check the handleButton() method to understand how we enable or disable access to future steps.
  • provider-choice: Just a list. Shows validation without the form.
  • provider: Uses a very esoteric Lit feature, unsafeStaticTag, which enables the display to show anything that conforms to the expectations of ApplicationWizardProviderForm.
    • ApplicationWizardProviderForm repeats some of the base of ApplicationWizardStep, but allows us to provide multiple variants on a single form without having to create separate steps for each form.
    • The forms (provider-for-ldap, provider-for-radius) are therefore just the form and any fetchers needed to populate it.
  • bindings: Shows the table of bindings. Has a custom display for “This table is empty.”
  • edit-binding: Showcase for the SearchSelectEZ configuration format. Has an override on the handleButton feature to figure out which binding is about to be overridden. Is also a .hidden page; it doesn’t show up on the navigation sidebar, as is only navigable-to by buttons not associated with the button bar at the bottom.
  • submit: Has a lot of machinery of state: Reviewing with errors, reviewing without errors, running submission, and success. Uses ts-pattern a lot to make sure the state/request pairs make sense.

Why !?!?!?

The key insight is that, even though a wizard is a series in order, that order can’t be simply maintained in a list. The parent needs various strategies for swapping pages in and out of the sequence, while still maintaining a coherent idea of “flow” and providing the visual cues the user needs to feel confident that the work can be completed and completed quickly. The entire mechanism for using an array and index to navigate, with index numbering, blocked the implementation of the bindings pages.

One thing led to another. Sigh Really wish this hadn’t been as much of a mess as it turned out. The end result is pretty good, though. Definitely re-usable.

One important feature to note is that the wizard is not tied to the ModalButton object; it’s simply embedded in a modal as-needed. This allows us to use wizards in other places, such as just being in a DIV, or just a page on its own.

Checklist

• [X] The code has been formatted (make web)

[netlify[bot]]

✅ Deploy Preview for authentik-docs ready!

Name	Link
🔨 Latest commit	532bf5a2bfd2e2c465ab75fe57d2fe05af711b08
🔍 Latest deploy log	https://app.netlify.com/sites/authentik-docs/deploys/6762ef2d13e1e200084cf030
😎 Deploy Preview	https://deploy-preview-11462--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[bot]]

✅ Deploy Preview for authentik-storybook ready!

Name	Link
🔨 Latest commit	532bf5a2bfd2e2c465ab75fe57d2fe05af711b08
🔍 Latest deploy log	https://app.netlify.com/sites/authentik-storybook/deploys/6762ef2d5fae0a0007409277
😎 Deploy Preview	https://deploy-preview-11462--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[bot]]

Codecov Report

All modified and coverable lines are covered by tests :white_check_mark:

Project coverage is 92.77%. Comparing base (e83d040) to head (532bf5a). Report is 2 commits behind head on main.

:white_check_mark: All tests successful. No failed tests found.

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #11462      +/-   ##
==========================================
- Coverage   92.78%   92.77%   -0.02%     
==========================================
  Files         770      770              
  Lines       38735    38735              
==========================================
- Hits        35942    35937       -5     
- Misses       2793     2798       +5     

Flag	Coverage Δ
e2e	48.72% <ø> (-0.02%)	:arrow_down:
integration	24.61% <ø> (ø)
unit	90.37% <ø> (+<0.01%)	:arrow_up:

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

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

[github-actions[bot]]

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-532bf5a2bfd2e2c465ab75fe57d2fe05af711b08
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-532bf5a2bfd2e2c465ab75fe57d2fe05af711b08-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
global:
    image:
        repository: ghcr.io/goauthentik/dev-server
        tag: gh-532bf5a2bfd2e2c465ab75fe57d2fe05af711b08

For arm64, use these values:

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

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

[rissson]

Btw, this PR won't work with deploy_me until conflicts are resolved