web/admin: more cleanup and consistency (#12657)

* web/admin: migrate user interface and stop impersonation to nav bar Signed-off-by: Jens Langhammer <jens@goauthentik.io> * move version diff to banner Signed-off-by: Jens Langhammer <jens@goauthentik.io> * make click on backdrop close about modal just for you @rissson Signed-off-by: Jens Langhammer <jens@goauthentik.io> --------- Signed-off-by: Jens Langhammer <jens@goauthentik.io>
2025-01-13 20:25:34 +01:00
parent 94eff50306
commit 2893a54ffb
8 changed files with 58 additions and 43 deletions
--- 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();
            }}
        >
            <div class="pf-l-bullseye">
--- 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` <ak-locale-context>
            <div class="pf-c-page">
                <ak-enterprise-status interface="admin"></ak-enterprise-status>
+                <ak-version-banner></ak-version-banner>
                <ak-admin-sidebar
                    class="pf-c-page__sidebar ${classMap(sidebarClasses)}"
                ></ak-admin-sidebar>
--- 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`
-                  <ak-sidebar-item ?highlight=${true}>
-                      <span slot="label">${msg("A newer version of the UI is available.")}</span>
-                  </ak-sidebar-item>
-              `
-            : nothing;
-    }
-
-    renderImpersonationMessage() {
-        const reload = () =>
-            new CoreApi(DEFAULT_CONFIG).coreUsersImpersonateEndRetrieve().then(() => {
-                window.location.reload();
-            });
-
-        return this.impersonation
-            ? html`<ak-sidebar-item ?highlight=${true} @click=${reload}>
-                  <span slot="label"
-                      >${msg(
-                          str`You're currently impersonating ${this.impersonation}. Click to stop.`,
-                      )}</span
-                  >
-              </ak-sidebar-item>`
-            : nothing;
-    }
-
    renderEnterpriseMenu() {
        return this.can(CapabilitiesEnum.IsEnterprise)
            ? html`
--- 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`&nbsp;
--- 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) {
            </section>
            <div class="pf-c-page__header-tools">
                <div class="pf-c-page__header-tools-group">
-                    <ak-nav-buttons .uiConfig=${this.uiConfig} .me=${this.me}></ak-nav-buttons>
+                    <ak-nav-buttons .uiConfig=${this.uiConfig} .me=${this.me}>
+                        <a
+                            class="pf-c-button pf-m-secondary pf-m-small pf-u-display-none pf-u-display-block-on-md"
+                            href="${globalAK().api.base}if/user/"
+                            slot="extra"
+                        >
+                            ${msg("User interface")}
+                        </a>
+                    </ak-nav-buttons>
                </div>
            </div>
        </div>`;
--- a/web/src/elements/enterprise/EnterpriseStatusBanner.ts
+++ b/web/src/elements/enterprise/EnterpriseStatusBanner.ts
--- a/web/src/elements/banner/VersionBanner.ts
+++ 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`
+                  <div class="pf-c-banner pf-m-sticky pf-m-gold">
+                      ${msg(
+                          str`A newer version (${this.version.versionCurrent}) of the UI is available.`,
+                      )}
+                  </div>
+              `
+            : nothing;
+    }
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        "ak-version-banner": VersionBanner;
+    }
+}
--- 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";