web/admin: replace wizard provider forms with those from provider, eliminating duplication, and provide comprehensive unit tests.

blueprints/schema.json

@@ -6974,7 +6974,7 @@
                 "spnego_server_name": {
                     "type": "string",
                     "title": "Spnego server name",
-                    "description": "Force the use of a specific server name for SPNEGO"
+                    "description": "Force the use of a specific server name for SPNEGO. Must be in the form HTTP@hostname"
                 },
                 "spnego_keytab": {
                     "type": "string",

schema.yml

@@ -42975,7 +42975,8 @@ components:
           readOnly: true
         spnego_server_name:
           type: string
-          description: Force the use of a specific server name for SPNEGO
+          description: Force the use of a specific server name for SPNEGO. Must be
+            in the form HTTP@hostname
         spnego_ccache:
           type: string
           description: Credential cache to use for SPNEGO in form type:residual
@@ -43144,7 +43145,8 @@ components:
             be in the form TYPE:residual
         spnego_server_name:
           type: string
-          description: Force the use of a specific server name for SPNEGO
+          description: Force the use of a specific server name for SPNEGO. Must be
+            in the form HTTP@hostname
         spnego_keytab:
           type: string
           writeOnly: true
@@ -48448,7 +48450,8 @@ components:
             be in the form TYPE:residual
         spnego_server_name:
           type: string
-          description: Force the use of a specific server name for SPNEGO
+          description: Force the use of a specific server name for SPNEGO. Must be
+            in the form HTTP@hostname
         spnego_keytab:
           type: string
           writeOnly: true

web/package.json

@@ -72,7 +72,7 @@
         "@wdio/cli": "^9.1.2",
         "@wdio/spec-reporter": "^9.1.2",
         "chokidar": "^4.0.1",
-        "chromedriver": "^129.0.2",
+        "chromedriver": "^130.0.0",
         "esbuild": "^0.24.0",
         "eslint": "^9.11.1",
         "eslint-plugin-lit": "^1.15.0",
@@ -135,6 +135,7 @@
         "storybook:build": "wireit",
         "storybook:build-import-map": "wireit",
         "test": "wireit",
+        "test:e2e": "wireit",
         "test:e2e:watch": "wireit",
         "test:watch": "wireit",
         "tsc": "wireit",
@@ -320,19 +321,30 @@
             "command": "node scripts/build-storybook-import-maps.mjs"
         },
         "test": {
+            "dependencies": ["build"],
             "command": "wdio ./wdio.conf.ts --logLevel=warn",
             "env": {
                 "CI": "true",
                 "TS_NODE_PROJECT": "tsconfig.test.json"
             }
         },
+        "test:e2e": {
+            "dependencies": ["build"],
+            "command": "wdio run ./tests/wdio.conf.ts",
+            "env": {
+                "CI": "true",
+                "TS_NODE_PROJECT": "./tests/tsconfig.test.json"
+            }
+        },
         "test:e2e:watch": {
+            "dependencies": ["build"],
             "command": "wdio run ./tests/wdio.conf.ts",
             "env": {
                 "TS_NODE_PROJECT": "./tests/tsconfig.test.json"
             }
         },
         "test:watch": {
+            "dependencies": ["build"],
             "command": "wdio run ./wdio.conf.ts",
             "env": {
                 "TS_NODE_PROJECT": "tsconfig.test.json"

web/src/admin/applications/wizard/BasePanel.ts

@@ -29,7 +29,7 @@ export class ApplicationWizardPageBase
         return AwadStyles;
     }
 
-    @consume({ context: applicationWizardContext })
+    @consume({ context: applicationWizardContext, subscribe: true })
     public wizard!: ApplicationWizardState;
 
     @query("form")

web/src/admin/applications/wizard/ContextIdentity.ts

@@ -1,7 +1,12 @@
 import { createContext } from "@lit/context";
 
+import { LocalTypeCreate } from "./auth-method-choice/ak-application-wizard-authentication-method-choice.choices.js";
 import { ApplicationWizardState } from "./types";
 
 export const applicationWizardContext = createContext<ApplicationWizardState>(
     Symbol("ak-application-wizard-state-context"),
 );
+
+export const applicationWizardProvidersContext = createContext<LocalTypeCreate[]>(
+    Symbol("ak-application-wizard-providers-context"),
+);

web/src/admin/applications/wizard/ak-application-wizard.ts

@@ -1,11 +1,15 @@
+import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import { AkWizard } from "@goauthentik/components/ak-wizard-main/AkWizard";
 import { CustomListenerElement } from "@goauthentik/elements/utils/eventEmitter";
 
 import { ContextProvider } from "@lit/context";
 import { msg } from "@lit/localize";
 import { customElement, state } from "lit/decorators.js";
 
-import { applicationWizardContext } from "./ContextIdentity";
+import { ProvidersApi, ProxyMode } from "@goauthentik/api";
+
+import { applicationWizardContext, applicationWizardProvidersContext } from "./ContextIdentity";
+import { providerTypeRenderers } from "./auth-method-choice/ak-application-wizard-authentication-method-choice.choices.js";
 import { newSteps } from "./steps";
 import {
     ApplicationStep,
@@ -19,6 +23,7 @@ const freshWizardState = (): ApplicationWizardState => ({
     app: {},
     provider: {},
     errors: {},
+    proxyMode: ProxyMode.Proxy,
 });
 
 @customElement("ak-application-wizard")
@@ -46,6 +51,11 @@ export class ApplicationWizard extends CustomListenerElement(
         initialValue: this.wizardState,
     });
 
+    wizardProviderProvider = new ContextProvider(this, {
+        context: applicationWizardProvidersContext,
+        initialValue: [],
+    });
+
     /**
      * One of our steps has multiple display variants, one for each type of service provider. We
      * want to *preserve* a customer's decisions about different providers; never make someone "go
@@ -56,6 +66,21 @@ export class ApplicationWizard extends CustomListenerElement(
      */
     providerCache: Map<string, OneOfProvider> = new Map();
 
+    connectedCallback() {
+        super.connectedCallback();
+        new ProvidersApi(DEFAULT_CONFIG).providersAllTypesList().then((providerTypes) => {
+            const wizardReadyProviders = Object.keys(providerTypeRenderers);
+            this.wizardProviderProvider.setValue(
+                providerTypes
+                    .filter((providerType) => wizardReadyProviders.includes(providerType.modelName))
+                    .map((providerType) => ({
+                        ...providerType,
+                        renderer: providerTypeRenderers[providerType.modelName],
+                    })),
+            );
+        });
+    }
+
     // And this is where all the special cases go...
     handleUpdate(detail: ApplicationWizardStateUpdate) {
         if (detail.status === "submitted") {

web/src/admin/applications/wizard/auth-method-choice/ak-application-wizard-authentication-method-choice.choices.ts

@@ -1,176 +1,28 @@
 import "@goauthentik/admin/common/ak-license-notice";
 
-import { msg } from "@lit/localize";
 import { TemplateResult, html } from "lit";
 
-import type { ProviderModelEnum as ProviderModelEnumType, TypeCreate } from "@goauthentik/api";
-import { ProviderModelEnum, ProxyMode } from "@goauthentik/api";
-import type {
-    LDAPProviderRequest,
-    ModelRequest,
-    OAuth2ProviderRequest,
-    ProxyProviderRequest,
-    RACProviderRequest,
-    RadiusProviderRequest,
-    SAMLProviderRequest,
-    SCIMProviderRequest,
-} from "@goauthentik/api";
-
-import { OneOfProvider } from "../types";
+import type { TypeCreate } from "@goauthentik/api";
 
 type ProviderRenderer = () => TemplateResult;
 
-type ModelConverter = (provider: OneOfProvider) => ModelRequest;
-
-type ProviderNoteProvider = () => TemplateResult | undefined;
-type ProviderNote = ProviderNoteProvider | undefined;
-
 export type LocalTypeCreate = TypeCreate & {
-    formName: string;
-    modelName: ProviderModelEnumType;
-    converter: ModelConverter;
-    note?: ProviderNote;
     renderer: ProviderRenderer;
 };
 
-export const providerModelsList: LocalTypeCreate[] = [
-    {
-        formName: "oauth2provider",
-        name: msg("OAuth2/OIDC (Open Authorization/OpenID Connect)"),
-        description: msg("Modern applications, APIs and Single-page applications."),
-        renderer: () =>
-            html`<ak-application-wizard-authentication-by-oauth></ak-application-wizard-authentication-by-oauth>`,
-        modelName: ProviderModelEnum.Oauth2Oauth2provider,
-        converter: (provider: OneOfProvider) => ({
-            providerModel: ProviderModelEnum.Oauth2Oauth2provider,
-            ...(provider as OAuth2ProviderRequest),
-        }),
-        component: "",
-        iconUrl: "/static/authentik/sources/openidconnect.svg",
-    },
-    {
-        formName: "ldapprovider",
-        name: msg("LDAP (Lightweight Directory Access Protocol)"),
-        description: msg(
-            "Provide an LDAP interface for applications and users to authenticate against.",
-        ),
-        renderer: () =>
-            html`<ak-application-wizard-authentication-by-ldap></ak-application-wizard-authentication-by-ldap>`,
-        modelName: ProviderModelEnum.LdapLdapprovider,
-        converter: (provider: OneOfProvider) => ({
-            providerModel: ProviderModelEnum.LdapLdapprovider,
-            ...(provider as LDAPProviderRequest),
-        }),
-        component: "",
-        iconUrl: "/static/authentik/sources/ldap.png",
-    },
-    {
-        formName: "proxyprovider-proxy",
-        name: msg("Transparent Reverse Proxy"),
-        description: msg("For transparent reverse proxies with required authentication"),
-        renderer: () =>
-            html`<ak-application-wizard-authentication-for-reverse-proxy></ak-application-wizard-authentication-for-reverse-proxy>`,
-        modelName: ProviderModelEnum.ProxyProxyprovider,
-        converter: (provider: OneOfProvider) => ({
-            providerModel: ProviderModelEnum.ProxyProxyprovider,
-            ...(provider as ProxyProviderRequest),
-            mode: ProxyMode.Proxy,
-        }),
-        component: "",
-        iconUrl: "/static/authentik/sources/proxy.svg",
-    },
-    {
-        formName: "proxyprovider-forwardsingle",
-        name: msg("Forward Auth (Single Application)"),
-        description: msg("For nginx's auth_request or traefik's forwardAuth"),
-        renderer: () =>
-            html`<ak-application-wizard-authentication-for-single-forward-proxy></ak-application-wizard-authentication-for-single-forward-proxy>`,
-        modelName: ProviderModelEnum.ProxyProxyprovider,
-        converter: (provider: OneOfProvider) => ({
-            providerModel: ProviderModelEnum.ProxyProxyprovider,
-            ...(provider as ProxyProviderRequest),
-            mode: ProxyMode.ForwardSingle,
-        }),
-        component: "",
-        iconUrl: "/static/authentik/sources/proxy.svg",
-    },
-    {
-        formName: "proxyprovider-forwarddomain",
-        name: msg("Forward Auth (Domain Level)"),
-        description: msg("For nginx's auth_request or traefik's forwardAuth per root domain"),
-        renderer: () =>
-            html`<ak-application-wizard-authentication-for-forward-proxy-domain></ak-application-wizard-authentication-for-forward-proxy-domain>`,
-        modelName: ProviderModelEnum.ProxyProxyprovider,
-        converter: (provider: OneOfProvider) => ({
-            providerModel: ProviderModelEnum.ProxyProxyprovider,
-            ...(provider as ProxyProviderRequest),
-            mode: ProxyMode.ForwardDomain,
-        }),
-        component: "",
-        iconUrl: "/static/authentik/sources/proxy.svg",
-    },
-    {
-        formName: "racprovider",
-        name: msg("Remote Access Provider"),
-        description: msg("Remotely access computers/servers via RDP/SSH/VNC"),
-        renderer: () =>
-            html`<ak-application-wizard-authentication-for-rac></ak-application-wizard-authentication-for-rac>`,
-        modelName: ProviderModelEnum.RacRacprovider,
-        converter: (provider: OneOfProvider) => ({
-            providerModel: ProviderModelEnum.RacRacprovider,
-            ...(provider as RACProviderRequest),
-        }),
-        note: () => html`<ak-license-notice></ak-license-notice>`,
-        requiresEnterprise: true,
-        component: "",
-        iconUrl: "/static/authentik/sources/rac.svg",
-    },
-    {
-        formName: "samlprovider",
-        name: msg("SAML (Security Assertion Markup Language)"),
-        description: msg("Configure SAML provider manually"),
-        renderer: () =>
-            html`<ak-application-wizard-authentication-by-saml-configuration></ak-application-wizard-authentication-by-saml-configuration>`,
-        modelName: ProviderModelEnum.SamlSamlprovider,
-        converter: (provider: OneOfProvider) => ({
-            providerModel: ProviderModelEnum.SamlSamlprovider,
-            ...(provider as SAMLProviderRequest),
-        }),
-        component: "",
-        iconUrl: "/static/authentik/sources/saml.png",
-    },
-    {
-        formName: "radiusprovider",
-        name: msg("RADIUS (Remote Authentication Dial-In User Service)"),
-        description: msg("Configure RADIUS provider manually"),
-        renderer: () =>
-            html`<ak-application-wizard-authentication-by-radius></ak-application-wizard-authentication-by-radius>`,
-        modelName: ProviderModelEnum.RadiusRadiusprovider,
-        converter: (provider: OneOfProvider) => ({
-            providerModel: ProviderModelEnum.RadiusRadiusprovider,
-            ...(provider as RadiusProviderRequest),
-        }),
-        component: "",
-        iconUrl: "/static/authentik/sources/radius.svg",
-    },
-    {
-        formName: "scimprovider",
-        name: msg("SCIM (System for Cross-domain Identity Management)"),
-        description: msg("Configure SCIM provider manually"),
-        renderer: () =>
-            html`<ak-application-wizard-authentication-by-scim></ak-application-wizard-authentication-by-scim>`,
-        modelName: ProviderModelEnum.ScimScimprovider,
-        converter: (provider: OneOfProvider) => ({
-            providerModel: ProviderModelEnum.ScimScimprovider,
-            ...(provider as SCIMProviderRequest),
-        }),
-        component: "",
-        iconUrl: "/static/authentik/sources/scim.png",
-    },
-];
-
-export const providerRendererList = new Map<string, ProviderRenderer>(
-    providerModelsList.map((tc) => [tc.formName, tc.renderer]),
-);
-
-export default providerModelsList;
+export const providerTypeRenderers: Record<string, () => TemplateResult> = {
+    oauth2provider: () =>
+        html`<ak-application-wizard-authentication-by-oauth></ak-application-wizard-authentication-by-oauth>`,
+    ldapprovider: () =>
+        html`<ak-application-wizard-authentication-by-ldap></ak-application-wizard-authentication-by-ldap>`,
+    proxyprovider: () =>
+        html`<ak-application-wizard-authentication-for-reverse-proxy></ak-application-wizard-authentication-for-reverse-proxy>`,
+    racprovider: () =>
+        html`<ak-application-wizard-authentication-for-rac></ak-application-wizard-authentication-for-rac>`,
+    samlprovider: () =>
+        html`<ak-application-wizard-authentication-by-saml-configuration></ak-application-wizard-authentication-by-saml-configuration>`,
+    radiusprovider: () =>
+        html`<ak-application-wizard-authentication-by-radius></ak-application-wizard-authentication-by-radius>`,
+    scimprovider: () =>
+        html`<ak-application-wizard-authentication-by-scim></ak-application-wizard-authentication-by-scim>`,
+};