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.", )}