From 1d7fef501db371c95a95654540f2c1b046254981 Mon Sep 17 00:00:00 2001 From: Ken Sternberg Date: Tue, 17 Oct 2023 12:39:42 -0700 Subject: [PATCH] web: application wizard spit & polish The "ApplicationWizardHint" now correctly uses the localstorage and allows the user to navigate back and see the message after it's been hidden, so that it will always be available during the test phase. The ApplicationList's old "Create Application Form" button has been restored for the purposes of the test phase. The ApplicationWizard is now available on both the ApplicationList and ProviderList pages. Tana and I discussed the microcopy, putting a stronger second-person "You can do..." twist onto the language, to give the user the sense of empowerment. The ShowHintController now has both "hide" and "show" operations, to support the hint restoration. --- .../admin/applications/ApplicationListPage.ts | 15 ++--- .../applications/ApplicationWizardHint.ts | 64 +++++++++++-------- .../wizard/ak-application-wizard.ts | 2 +- web/src/admin/providers/ProviderListPage.ts | 5 ++ .../components/ak-hint/ShowHintController.ts | 19 ++++-- 5 files changed, 64 insertions(+), 41 deletions(-) diff --git a/web/src/admin/applications/ApplicationListPage.ts b/web/src/admin/applications/ApplicationListPage.ts index ca54278e2..c378a2e68 100644 --- a/web/src/admin/applications/ApplicationListPage.ts +++ b/web/src/admin/applications/ApplicationListPage.ts @@ -1,8 +1,9 @@ import "@goauthentik/admin/applications/ApplicationForm"; -import "@goauthentik/admin/applications/wizard/ak-application-wizard"; +import "./ApplicationWizardHint"; import { PFSize } from "@goauthentik/app/elements/Spinner"; import { DEFAULT_CONFIG } from "@goauthentik/common/api/config"; import { uiConfig } from "@goauthentik/common/ui/config"; +import { getURLParam } from "@goauthentik/elements/router/RouteMatch"; import "@goauthentik/components/ak-app-icon"; import MDApplication from "@goauthentik/docs/core/applications.md"; import "@goauthentik/elements/Markdown"; @@ -33,7 +34,7 @@ export class ApplicationListPage extends TablePage { } pageDescription(): string { return msg( - "External Applications which use authentik as Identity-Provider, utilizing protocols like OAuth2 and SAML. All applications are shown here, even ones you cannot access.", + "External applications that use authentik as an identity provider via protocols like OAuth2 and SAML. All applications are shown here, even ones you cannot access.", ); } pageIcon(): string { @@ -87,6 +88,10 @@ export class ApplicationListPage extends TablePage { ]; } + renderSectionBefore(): TemplateResult { + return html``; + } + renderSidebarAfter(): TemplateResult { // Rendering the wizard with .open here, as if we set the attribute in // renderObjectCreate() it'll open two wizards, since that function gets called twice @@ -163,7 +168,6 @@ export class ApplicationListPage extends TablePage { ]; } - /* renderObjectCreate(): TemplateResult { return html` ${msg("Create")} @@ -172,9 +176,4 @@ export class ApplicationListPage extends TablePage { `; } -*/ - - renderObjectCreate(): TemplateResult { - return html``; - } } diff --git a/web/src/admin/applications/ApplicationWizardHint.ts b/web/src/admin/applications/ApplicationWizardHint.ts index 9f0a22e88..118454abb 100644 --- a/web/src/admin/applications/ApplicationWizardHint.ts +++ b/web/src/admin/applications/ApplicationWizardHint.ts @@ -1,23 +1,31 @@ -import { MessageLevel } from "@goauthentik/common/messages"; -import { - ShowHintController, - ShowHintControllerHost, -} from "@goauthentik/components/ak-hint/ShowHintController"; +import "@goauthentik/admin/applications/wizard/ak-application-wizard"; +import { ShowHintController, ShowHintControllerHost } from "@goauthentik/components/ak-hint/ShowHintController"; import "@goauthentik/components/ak-hint/ak-hint"; import "@goauthentik/components/ak-hint/ak-hint-body"; import { AKElement } from "@goauthentik/elements/Base"; +import "@goauthentik/elements/Label"; import "@goauthentik/elements/buttons/ActionButton/ak-action-button"; -import { showMessage } from "@goauthentik/elements/messages/MessageContainer"; +import { getURLParam } from "@goauthentik/elements/router/RouteMatch"; -import { html, nothing } from "lit"; +import { msg } from "@lit/localize"; +import { html } from "lit"; import { customElement, property, state } from "lit/decorators.js"; +import { styleMap } from "lit/directives/style-map.js"; +import PFButton from "@patternfly/patternfly/components/Button/button.css"; +import PFLabel from "@patternfly/patternfly/components/Label/label.css"; import PFPage from "@patternfly/patternfly/components/Page/page.css"; +const closeButtonIcon = html``; + @customElement("ak-application-wizard-hint") export class AkApplicationWizardHint extends AKElement implements ShowHintControllerHost { static get styles() { - return [PFPage]; + return [PFButton, PFPage, PFLabel]; } @property({ type: Boolean, attribute: "show-hint" }) @@ -30,10 +38,21 @@ export class AkApplicationWizardHint extends AKElement implements ShowHintContro constructor() { super(); - this.showHintController = new ShowHintController( - this, - "202310-application-wizard-announcement", - ); + this.showHintController = new ShowHintController(this, "202310-application-wizard-announcement"); + } + + renderReminder() { + const sectionStyles = { paddingBottom: "0", marginBottom: "-0.5rem", marginRight: "0.0625rem", textAlign: "right" }; + const textStyle = { maxWidth: "60ch" }; + + return html`
+ + + ${msg("One hint, 'New Application Wizard', is currently hidden")} + + + +
`; } renderHint() { @@ -41,28 +60,19 @@ export class AkApplicationWizardHint extends AKElement implements ShowHintContro

- Authentik has a new Application Wizard that can configure both an - application and its authentication provider at the same time. - Learn more about the wizard here. + You can now configure both an application and its authentication provider at the same time with our new Application Wizard. +

- { - showMessage({ - message: "This would have shown the wizard", - level: MessageLevel.success, - }); - }} - >Create with Wizard + + + ${this.showHintController.render()} `; } render() { - return this.showHint || this.forceHint ? this.renderHint() : nothing; + return this.showHint || this.forceHint ? this.renderHint() : this.renderReminder(); } } diff --git a/web/src/admin/applications/wizard/ak-application-wizard.ts b/web/src/admin/applications/wizard/ak-application-wizard.ts index 0cc6ffc7f..d15570f13 100644 --- a/web/src/admin/applications/wizard/ak-application-wizard.ts +++ b/web/src/admin/applications/wizard/ak-application-wizard.ts @@ -26,7 +26,7 @@ export class ApplicationWizard extends CustomListenerElement( AkWizard, ) { constructor() { - super(msg("Create"), msg("New application"), msg("Create a new application")); + super(msg("Create With Wizard"), msg("New application"), msg("Create a new application")); this.steps = newSteps(); } diff --git a/web/src/admin/providers/ProviderListPage.ts b/web/src/admin/providers/ProviderListPage.ts index c82985815..51769a8cc 100644 --- a/web/src/admin/providers/ProviderListPage.ts +++ b/web/src/admin/providers/ProviderListPage.ts @@ -5,6 +5,7 @@ import "@goauthentik/admin/providers/proxy/ProxyProviderForm"; import "@goauthentik/admin/providers/radius/RadiusProviderForm"; import "@goauthentik/admin/providers/saml/SAMLProviderForm"; import "@goauthentik/admin/providers/scim/SCIMProviderForm"; +import "@goauthentik/admin/applications/ApplicationWizardHint"; import { DEFAULT_CONFIG } from "@goauthentik/common/api/config"; import { uiConfig } from "@goauthentik/common/ui/config"; import "@goauthentik/elements/buttons/SpinnerButton"; @@ -60,6 +61,10 @@ export class ProviderListPage extends TablePage { ]; } + renderSectionBefore(): TemplateResult { + return html``; + } + renderToolbarSelected(): TemplateResult { const disabled = this.selectedElements.length < 1; return html`
- ${msg( + ${msg( "Don't show this message again.", )}