web/admin: improve UI for notification toggle

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>

authentik/root/messages/storage.py

@@ -27,6 +27,7 @@ class ChannelsStorage(BaseStorage):
                     uid,
                     {
                         "type": "event.update",
+                        "message_type": "message",
                         "level": message.level_tag,
                         "tags": message.tags,
                         "message": message.message,

web/src/common/ws.ts

@@ -4,7 +4,7 @@ import { MessageLevel } from "../elements/messages/Message";
 import { showMessage } from "../elements/messages/MessageContainer";
 
 export interface WSMessage {
-    type: string;
+    message_type: string;
 }
 
 export class WebsocketClient {

web/src/elements/PageHeader.ts

@@ -4,8 +4,10 @@ import PFContent from "@patternfly/patternfly/components/Content/content.css";
 import AKGlobal from "../authentik.css";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
-import { EVENT_SIDEBAR_TOGGLE, TITLE_DEFAULT } from "../constants";
-import { tenant } from "../api/Config";
+import { EVENT_NOTIFICATION_TOGGLE, EVENT_SIDEBAR_TOGGLE, TITLE_DEFAULT } from "../constants";
+import { DEFAULT_CONFIG, tenant } from "../api/Config";
+import { until } from "lit-html/directives/until";
+import { EventsApi } from "../../api/dist";
 
 @customElement("ak-page-header")
 export class PageHeader extends LitElement {
@@ -44,12 +46,12 @@ export class PageHeader extends LitElement {
                 flex-direction: row;
                 min-height: 114px;
             }
-            button.pf-c-button.pf-m-plain.sidebar-trigger {
+            .pf-c-button.pf-m-plain {
                 background-color: var(--pf-c-page__main-section--m-light--BackgroundColor);
                 border-radius: 0px;
             }
             .pf-c-page__main-section {
-                width: 100%;
+                flex-grow: 1;
                 display: flex;
                 flex-direction: column;
                 justify-content: center;
@@ -57,6 +59,13 @@ export class PageHeader extends LitElement {
             img.pf-icon {
                 max-height: 24px;
             }
+            .sidebar-trigger,
+            .notification-trigger {
+                font-size: 24px;
+            }
+            .notification-trigger.has-notifications {
+                color: #2B9AF3;
+            }
         `];
     }
 
@@ -92,7 +101,26 @@ export class PageHeader extends LitElement {
                 ${this.description ?
                     html`<p>${this.description}</p>` : html``}
             </div>
-        </section>`;
+        </section>
+        ${until(new EventsApi(DEFAULT_CONFIG).eventsNotificationsList({
+            seen: false,
+            ordering: "-created",
+            pageSize: 1,
+        }).then(r => {
+            return html`
+                <button
+                    class="notification-trigger pf-c-button pf-m-plain ${r.pagination.count > 0 ? "has-notifications" : ""}"
+                    @click=${() => {
+                        this.dispatchEvent(
+                            new CustomEvent(EVENT_NOTIFICATION_TOGGLE, {
+                                bubbles: true,
+                                composed: true,
+                            })
+                        );
+                    }}>
+                    <i class="fas fa-bell"></i>
+                </button>`;
+        }))}`;
     }
 
 }

web/src/elements/messages/MessageContainer.ts

@@ -33,7 +33,7 @@ export class MessageContainer extends LitElement {
     constructor() {
         super();
         this.addEventListener(EVENT_WS_MESSAGE, ((e: CustomEvent<WSMessage>) => {
-            if (e.detail.type !== WS_MSG_TYPE_MESSAGE) return;
+            if (e.detail.message_type !== WS_MSG_TYPE_MESSAGE) return;
             this.addMessage(e.detail as unknown as APIMessage);
         }) as EventListener);
     }

web/src/elements/notifications/NotificationDrawer.ts

@@ -23,6 +23,15 @@ export class NotificationDrawer extends LitElement {
     static get styles(): CSSResult[] {
         return [PFBase, PFButton, PFNotificationDrawer, PFContent, PFDropdown, AKGlobal].concat(
             css`
+                .pf-c-notification-drawer__header {
+                    height: 114px;
+                    align-items: center;
+                }
+                .pf-c-notification-drawer__header-action,
+                .pf-c-notification-drawer__header-action-close,
+                .pf-c-notification-drawer__header-action-close > .pf-c-button.pf-m-plain {
+                    height: 100%;
+                }
                 .pf-c-notification-drawer__list-item-description {
                     white-space: pre-wrap;
                 }
@@ -95,12 +104,14 @@ export class NotificationDrawer extends LitElement {
         return html`<div class="pf-c-drawer__body pf-m-no-padding">
             <div class="pf-c-notification-drawer">
                 <div class="pf-c-notification-drawer__header">
-                    <h1 class="pf-c-notification-drawer__header-title">
-                        ${t`Notifications`}
-                    </h1>
-                    <span class="pf-c-notification-drawer__header-status">
-                        ${t`${this.unread} unread`}
-                    </span>
+                    <div class="text">
+                        <h1 class="pf-c-notification-drawer__header-title">
+                            ${t`Notifications`}
+                        </h1>
+                        <span>
+                            ${t`${this.unread} unread`}
+                        </span>
+                    </div>
                     <div class="pf-c-notification-drawer__header-action">
                         <div class="pf-c-notification-drawer__header-action-close">
                             <button

web/src/elements/notifications/NotificationTrigger.ts

@@ -1,31 +0,0 @@
-import { CSSResult, customElement, html, LitElement, TemplateResult } from "lit-element";
-import PFBase from "@patternfly/patternfly/patternfly-base.css";
-import PFDropdown from "@patternfly/patternfly/components/Dropdown/dropdown.css";
-import FA from "@fortawesome/fontawesome-free/css/fontawesome.css";
-import { EVENT_NOTIFICATION_TOGGLE } from "../../constants";
-
-@customElement("ak-notification-trigger")
-export class NotificationRule extends LitElement {
-
-    static get styles(): CSSResult[] {
-        return [PFBase, PFDropdown, FA];
-    }
-
-    constructor() {
-        super();
-        this.addEventListener("click", () => {
-            this.dispatchEvent(
-                new CustomEvent(EVENT_NOTIFICATION_TOGGLE, {
-                    bubbles: true,
-                    composed: true,
-                })
-            );
-        });
-    }
-
-    render(): TemplateResult {
-        // TODO: Show icon with red dot when unread notifications exist
-        return html`<i class="fas fa-bell pf-c-dropdown__toggle-icon" aria-hidden="true"></i>`;
-    }
-
-}

web/src/elements/sidebar/SidebarUser.ts

@@ -5,7 +5,6 @@ import { me } from "../../api/Users";
 import { until } from "lit-html/directives/until";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";
 
-import "../notifications/NotificationTrigger";
 import { ifDefined } from "lit-html/directives/if-defined";
 
 @customElement("ak-sidebar-user")
@@ -39,8 +38,6 @@ export class SidebarUser extends LitElement {
                     return html`<img class="pf-c-avatar" src="${ifDefined(u.user.avatar)}" alt="" />`;
                 }), html``)}
             </a>
-            <ak-notification-trigger class="pf-c-nav__link user-notifications">
-            </ak-notification-trigger>
             <a href="/flows/-/default/invalidation/" class="pf-c-nav__link user-logout" id="logout">
                 <i class="fas fa-sign-out-alt" aria-hidden="true"></i>
             </a>

web/src/locales/en.po

@@ -735,7 +735,7 @@ msgstr "Connect"
 msgid "Connected."
 msgstr "Connected."
 
-#: src/elements/messages/MessageContainer.ts
+#: src/common/ws.ts
 msgid "Connection error, reconnecting..."
 msgstr "Connection error, reconnecting..."
 

web/src/locales/pseudo-LOCALE.po

@@ -729,7 +729,7 @@ msgstr ""
 msgid "Connected."
 msgstr ""
 
-#: src/elements/messages/MessageContainer.ts
+#: src/common/ws.ts
 msgid "Connection error, reconnecting..."
 msgstr ""