From 0ae373bc1e9afb5d6463cf937a339b10b5376260 Mon Sep 17 00:00:00 2001 From: Ken Sternberg <133134217+kensternberg-authentik@users.noreply.github.com> Date: Wed, 19 Feb 2025 08:41:39 -0800 Subject: [PATCH] web/admin: update Application Wizard button placement (#12771) * web: Add InvalidationFlow to Radius Provider dialogues ## What - Bugfix: adds the InvalidationFlow to the Radius Provider dialogues - Repairs: `{"invalidation_flow":["This field is required."]}` message, which was *not* propagated to the Notification. - Nitpick: Pretties `?foo=${true}` expressions: `s/\?([^=]+)=\$\{true\}/\1/` ## Note Yes, I know I'm going to have to do more magic when we harmonize the forms, and no, I didn't add the Property Mappings to the wizard, and yes, I know I'm going to have pain with the *new* version of the wizard. But this is a serious bug; you can't make Radius servers with *either* of the current dialogues at the moment. * This (temporary) change is needed to prevent the unit tests from failing. \# What \# Why \# How \# Designs \# Test Steps \# Other Notes * Revert "This (temporary) change is needed to prevent the unit tests from failing." This reverts commit dddde09be571a639ecd041569dd3a282aab3f9be. * web: Make using the wizard the default for new applications # What 1. I removed the "Wizard Hint" bar and migrated the "Create With Wizard" button down to the default position as "Create With Provider," moving the "Create" button to a secondary position. Primary coloring has been kept for both. 2. Added an alert to the "Create" legacy dialog: > Using this form will only create an Application. In order to authenticate with the application, > you will have to manually pair it with a Provider. 3. Updated the subtitle on the Wizard dialog: ``` diff - wizardDescription = msg("Create a new application"); + wizardDescription = msg("Create a new application and configure a provider for it."); ``` 4. Updated the User page so that, if the User is-a Administrator and the number of Applications in the system is zero, the user will be invited to create a new Application using the Wizard rather than the legacy Form: ```diff renderNewAppButton() { const href = paramURL("/core/applications", { - createForm: true, + createWizard: true, }); ``` 5. Fixed a bug where, on initial render, if the `this.brand` field was not available, an error would appear in the console. The effects were usually harmless, as brand information came quickly and filled in before the user could notice, but it looked bad in the debugger. 6. Fixed a bug in testing where the wizard page "Configure Policy Bindings" had been changed to "Configure Policy/User/Group Binding". # Testing Since the wizard OUID didn't change (`data-ouia-component-id="start-application-wizard"`), the E2E tests for "Application Wizard" completed without any substantial changes to the routine or to the tests. ``` sh npm run test:e2e:watch -- --spec ./tests/specs/new-application-by-wizard.ts ``` # User documentation changes required. These changes were made at the request of docs, as an initial draft to show how the page looks with the Application Wizard as he default tool for creating new Applications. # Developer documentation changes required. None. --- web/src/admin/applications/ApplicationForm.ts | 6 +++++ .../admin/applications/ApplicationListPage.ts | 27 +++++++++++-------- .../wizard/ApplicationWizardStep.ts | 2 +- .../ak-library-application-empty-list.ts | 2 +- web/tests/specs/new-application-by-wizard.ts | 2 +- 5 files changed, 25 insertions(+), 14 deletions(-) diff --git a/web/src/admin/applications/ApplicationForm.ts b/web/src/admin/applications/ApplicationForm.ts index 7edbe51a17..9ea8997c23 100644 --- a/web/src/admin/applications/ApplicationForm.ts +++ b/web/src/admin/applications/ApplicationForm.ts @@ -7,6 +7,7 @@ import "@goauthentik/components/ak-radio-input"; import "@goauthentik/components/ak-switch-input"; import "@goauthentik/components/ak-text-input"; import "@goauthentik/components/ak-textarea-input"; +import "@goauthentik/elements/Alert.js"; import { CapabilitiesEnum, WithCapabilitiesConfig, @@ -120,7 +121,12 @@ export class ApplicationForm extends WithCapabilitiesConfig(ModelForm + ${alertMsg} ) } pageDescription(): string { return msg( - str`External applications that use ${this.brand.brandingTitle || "authentik"} as an identity provider via protocols like OAuth2 and SAML. All applications are shown here, even ones you cannot access.`, + str`External applications that use ${this.brand?.brandingTitle ?? "authentik"} as an identity provider via protocols like OAuth2 and SAML. All applications are shown here, even ones you cannot access.`, ); } pageIcon(): string { @@ -85,10 +85,6 @@ export class ApplicationListPage extends WithBrandConfig(TablePage) ]; } - renderSectionBefore(): TemplateResult { - return html``; - } - renderSidebarAfter(): TemplateResult { return html`
@@ -160,12 +156,21 @@ export class ApplicationListPage extends WithBrandConfig(TablePage) } renderObjectCreate(): TemplateResult { - return html` - ${msg("Create")} - ${msg("Create Application")} - - - `; + return html` + + + + ${msg("Create")} + ${msg("Create Application")} + + + `; } } diff --git a/web/src/admin/applications/wizard/ApplicationWizardStep.ts b/web/src/admin/applications/wizard/ApplicationWizardStep.ts index d691b29e0d..71095a6d46 100644 --- a/web/src/admin/applications/wizard/ApplicationWizardStep.ts +++ b/web/src/admin/applications/wizard/ApplicationWizardStep.ts @@ -30,7 +30,7 @@ export class ApplicationWizardStep extends WizardStep { // As recommended in [WizardStep](../../../components/ak-wizard/WizardStep.ts), we override // these fields and provide them to all the child classes. wizardTitle = msg("New application"); - wizardDescription = msg("Create a new application"); + wizardDescription = msg("Create a new application and configure a provider for it."); canCancel = true; // This should be overridden in the children for more precise targeting. diff --git a/web/src/user/LibraryPage/ak-library-application-empty-list.ts b/web/src/user/LibraryPage/ak-library-application-empty-list.ts index 6965d4b91c..170eff0a8f 100644 --- a/web/src/user/LibraryPage/ak-library-application-empty-list.ts +++ b/web/src/user/LibraryPage/ak-library-application-empty-list.ts @@ -42,7 +42,7 @@ export class LibraryPageApplicationEmptyList extends AKElement { renderNewAppButton() { const href = paramURL("/core/applications", { - createForm: true, + createWizard: true, }); return html`
diff --git a/web/tests/specs/new-application-by-wizard.ts b/web/tests/specs/new-application-by-wizard.ts index 3a25b6c5a3..a0c46dfe7d 100644 --- a/web/tests/specs/new-application-by-wizard.ts +++ b/web/tests/specs/new-application-by-wizard.ts @@ -89,7 +89,7 @@ export async function findWizardTitle() { async function passByPoliciesAndCommit() { const title = await findWizardTitle(); // Expect to be on the Bindings panel - await expect(await title.getText()).toEqual("Configure Policy Bindings"); + await expect(await title.getText()).toEqual("Configure Policy/User/Group Bindings"); await (await ApplicationWizardView.nextButton()).click(); await ApplicationWizardView.pause(); await (await ApplicationWizardView.submitPage()).waitForDisplayed();