From 2893a54ffb6bfa6853256b6c24c17a2db1d9a4f6 Mon Sep 17 00:00:00 2001 From: "Jens L." Date: Mon, 13 Jan 2025 20:25:34 +0100 Subject: [PATCH] web/admin: more cleanup and consistency (#12657) * web/admin: migrate user interface and stop impersonation to nav bar Signed-off-by: Jens Langhammer * move version diff to banner Signed-off-by: Jens Langhammer * make click on backdrop close about modal just for you @rissson Signed-off-by: Jens Langhammer --------- Signed-off-by: Jens Langhammer --- web/src/admin/AdminInterface/AboutModal.ts | 1 + .../admin/AdminInterface/AdminInterface.ts | 7 +++- web/src/admin/AdminInterface/AdminSidebar.ts | 38 ++----------------- web/src/components/ak-nav-buttons.ts | 8 ++-- web/src/elements/PageHeader.ts | 11 +++++- .../EnterpriseStatusBanner.ts | 0 web/src/elements/banner/VersionBanner.ts | 34 +++++++++++++++++ web/src/user/UserInterface.ts | 2 +- 8 files changed, 58 insertions(+), 43 deletions(-) rename web/src/elements/{enterprise => banner}/EnterpriseStatusBanner.ts (100%) create mode 100644 web/src/elements/banner/VersionBanner.ts diff --git a/web/src/admin/AdminInterface/AboutModal.ts b/web/src/admin/AdminInterface/AboutModal.ts index 7df4fe980a..b575d5f111 100644 --- a/web/src/admin/AdminInterface/AboutModal.ts +++ b/web/src/admin/AdminInterface/AboutModal.ts @@ -66,6 +66,7 @@ export class AboutModal extends WithLicenseSummary(WithBrandConfig(ModalButton)) class="pf-c-backdrop" @click=${(e: PointerEvent) => { e.stopPropagation(); + this.closeModal(); }} >
diff --git a/web/src/admin/AdminInterface/AdminInterface.ts b/web/src/admin/AdminInterface/AdminInterface.ts index 4219377c7f..4093efc201 100644 --- a/web/src/admin/AdminInterface/AdminInterface.ts +++ b/web/src/admin/AdminInterface/AdminInterface.ts @@ -10,7 +10,8 @@ import { me } from "@goauthentik/common/users"; import { WebsocketClient } from "@goauthentik/common/ws"; import { AuthenticatedInterface } from "@goauthentik/elements/Interface"; import "@goauthentik/elements/ak-locale-context"; -import "@goauthentik/elements/enterprise/EnterpriseStatusBanner"; +import "@goauthentik/elements/banner/EnterpriseStatusBanner"; +import "@goauthentik/elements/banner/VersionBanner"; import "@goauthentik/elements/messages/MessageContainer"; import "@goauthentik/elements/messages/MessageContainer"; import "@goauthentik/elements/notifications/APIDrawer"; @@ -72,7 +73,8 @@ export class AdminInterface extends AuthenticatedInterface { :host([theme="dark"]) .pf-c-page { --pf-c-page--BackgroundColor: var(--ak-dark-background); } - ak-enterprise-status { + ak-enterprise-status, + ak-version-banner { grid-area: header; } ak-admin-sidebar { @@ -128,6 +130,7 @@ export class AdminInterface extends AuthenticatedInterface { return html`
+ diff --git a/web/src/admin/AdminInterface/AdminSidebar.ts b/web/src/admin/AdminInterface/AdminSidebar.ts index 7342a3e8e8..b3738ae68d 100644 --- a/web/src/admin/AdminInterface/AdminSidebar.ts +++ b/web/src/admin/AdminInterface/AdminSidebar.ts @@ -1,6 +1,4 @@ -import { DEFAULT_CONFIG } from "@goauthentik/common/api/config"; -import { EVENT_SIDEBAR_TOGGLE, VERSION } from "@goauthentik/common/constants"; -import { globalAK } from "@goauthentik/common/global"; +import { EVENT_SIDEBAR_TOGGLE } from "@goauthentik/common/constants"; import { me } from "@goauthentik/common/users"; import { AKElement } from "@goauthentik/elements/Base"; import { @@ -12,12 +10,12 @@ import { ID_REGEX, SLUG_REGEX, UUID_REGEX } from "@goauthentik/elements/router/R import { getRootStyle } from "@goauthentik/elements/utils/getRootStyle"; import { spread } from "@open-wc/lit-helpers"; -import { msg, str } from "@lit/localize"; +import { msg } from "@lit/localize"; import { TemplateResult, html, nothing } from "lit"; import { customElement, property, state } from "lit/decorators.js"; import { map } from "lit/directives/map.js"; -import { CoreApi, UiThemeEnum } from "@goauthentik/api"; +import { UiThemeEnum } from "@goauthentik/api"; import type { SessionUser, UserSelf } from "@goauthentik/api"; @customElement("ak-admin-sidebar") @@ -108,7 +106,6 @@ export class AkAdminSidebar extends WithCapabilitiesConfig(WithVersion(AKElement // prettier-ignore const sidebarContent: SidebarEntry[] = [ - [`${globalAK().api.base}if/user/`, msg("User interface"), { "?isAbsoluteLink": true, "?highlight": true }], [null, msg("Dashboards"), { "?expanded": true }, [ ["/administration/overview", msg("Overview")], ["/administration/dashboard/users", msg("User Statistics")], @@ -162,40 +159,11 @@ export class AkAdminSidebar extends WithCapabilitiesConfig(WithVersion(AKElement // prettier-ignore return html` - ${this.renderNewVersionMessage()} - ${this.renderImpersonationMessage()} ${map(sidebarContent, renderOneSidebarItem)} ${this.renderEnterpriseMenu()} `; } - renderNewVersionMessage() { - return this.version && this.version.versionCurrent !== VERSION - ? html` - - ${msg("A newer version of the UI is available.")} - - ` - : nothing; - } - - renderImpersonationMessage() { - const reload = () => - new CoreApi(DEFAULT_CONFIG).coreUsersImpersonateEndRetrieve().then(() => { - window.location.reload(); - }); - - return this.impersonation - ? html` - ${msg( - str`You're currently impersonating ${this.impersonation}. Click to stop.`, - )} - ` - : nothing; - } - renderEnterpriseMenu() { return this.can(CapabilitiesEnum.IsEnterprise) ? html` diff --git a/web/src/components/ak-nav-buttons.ts b/web/src/components/ak-nav-buttons.ts index 86fbec2903..e5111b3220 100644 --- a/web/src/components/ak-nav-buttons.ts +++ b/web/src/components/ak-nav-buttons.ts @@ -7,6 +7,7 @@ import { globalAK } from "@goauthentik/common/global"; import { UIConfig, UserDisplay, uiConfig } from "@goauthentik/common/ui/config"; import { me } from "@goauthentik/common/users"; import { AKElement } from "@goauthentik/elements/Base"; +import "@goauthentik/elements/buttons/ActionButton/ak-action-button"; import { match } from "ts-pattern"; import { msg } from "@lit/localize"; @@ -159,10 +160,9 @@ export class NavigationButtons extends AKElement { return nothing; } - const onClick = () => { - return new CoreApi(DEFAULT_CONFIG).coreUsersImpersonateEndRetrieve().then(() => { - window.location.reload(); - }); + const onClick = async () => { + await new CoreApi(DEFAULT_CONFIG).coreUsersImpersonateEndRetrieve(); + window.location.reload(); }; return html`  diff --git a/web/src/elements/PageHeader.ts b/web/src/elements/PageHeader.ts index d9dbe94434..d0ec119cd5 100644 --- a/web/src/elements/PageHeader.ts +++ b/web/src/elements/PageHeader.ts @@ -3,6 +3,7 @@ import { EVENT_WS_MESSAGE, TITLE_DEFAULT, } from "@goauthentik/common/constants"; +import { globalAK } from "@goauthentik/common/global"; import { currentInterface } from "@goauthentik/common/sentry"; import { UIConfig, UserDisplay, uiConfig } from "@goauthentik/common/ui/config"; import { me } from "@goauthentik/common/users"; @@ -182,7 +183,15 @@ export class PageHeader extends WithBrandConfig(AKElement) {
- + + + ${msg("User interface")} + +
`; diff --git a/web/src/elements/enterprise/EnterpriseStatusBanner.ts b/web/src/elements/banner/EnterpriseStatusBanner.ts similarity index 100% rename from web/src/elements/enterprise/EnterpriseStatusBanner.ts rename to web/src/elements/banner/EnterpriseStatusBanner.ts diff --git a/web/src/elements/banner/VersionBanner.ts b/web/src/elements/banner/VersionBanner.ts new file mode 100644 index 0000000000..9c8a6bf0bd --- /dev/null +++ b/web/src/elements/banner/VersionBanner.ts @@ -0,0 +1,34 @@ +import { VERSION } from "@goauthentik/common/constants"; +import { AKElement } from "@goauthentik/elements/Base"; +import { WithVersion } from "@goauthentik/elements/Interface/versionProvider"; + +import { msg, str } from "@lit/localize"; +import { html, nothing } from "lit"; +import { customElement } from "lit/decorators.js"; + +import PFBanner from "@patternfly/patternfly/components/Banner/banner.css"; + +@customElement("ak-version-banner") +export class VersionBanner extends WithVersion(AKElement) { + static get styles() { + return [PFBanner]; + } + + render() { + return this.version && this.version.versionCurrent !== VERSION + ? html` +
+ ${msg( + str`A newer version (${this.version.versionCurrent}) of the UI is available.`, + )} +
+ ` + : nothing; + } +} + +declare global { + interface HTMLElementTagNameMap { + "ak-version-banner": VersionBanner; + } +} diff --git a/web/src/user/UserInterface.ts b/web/src/user/UserInterface.ts index dc8577351e..451848a985 100644 --- a/web/src/user/UserInterface.ts +++ b/web/src/user/UserInterface.ts @@ -13,8 +13,8 @@ import "@goauthentik/components/ak-nav-buttons"; import { AKElement } from "@goauthentik/elements/Base"; import { AuthenticatedInterface } from "@goauthentik/elements/Interface"; import "@goauthentik/elements/ak-locale-context"; +import "@goauthentik/elements/banner/EnterpriseStatusBanner"; import "@goauthentik/elements/buttons/ActionButton"; -import "@goauthentik/elements/enterprise/EnterpriseStatusBanner"; import "@goauthentik/elements/messages/MessageContainer"; import "@goauthentik/elements/notifications/APIDrawer"; import "@goauthentik/elements/notifications/NotificationDrawer";