From 879b5ead718efad1ff5975376c3d036bdeb20e08 Mon Sep 17 00:00:00 2001
From: Jens Langhammer <jens.langhammer@beryju.org>
Date: Sun, 19 Sep 2021 21:58:59 +0200
Subject: [PATCH] web: fix notification badge not refreshing after clearing
 notifications

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
---
 web/src/elements/PageHeader.ts                | 24 ++++++++++++-------
 .../notifications/NotificationDrawer.ts       | 14 ++++++++++-
 web/src/interfaces/UserInterface.ts           | 12 +++++++++-
 3 files changed, 40 insertions(+), 10 deletions(-)

diff --git a/web/src/elements/PageHeader.ts b/web/src/elements/PageHeader.ts
index c05611920..b3c433fb8 100644
--- a/web/src/elements/PageHeader.ts
+++ b/web/src/elements/PageHeader.ts
@@ -15,6 +15,7 @@ import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import {
     EVENT_API_DRAWER_TOGGLE,
     EVENT_NOTIFICATION_DRAWER_TOGGLE,
+    EVENT_REFRESH,
     EVENT_SIDEBAR_TOGGLE,
     TITLE_DEFAULT,
 } from "../constants";
@@ -90,14 +91,11 @@ export class PageHeader extends LitElement {
         ];
     }
 
-    renderIcon(): TemplateResult {
-        if (this.icon) {
-            if (this.iconImage) {
-                return html`<img class="pf-icon" src="${this.icon}" />&nbsp;`;
-            }
-            return html`<i class=${this.icon}></i>&nbsp;`;
-        }
-        return html``;
+    constructor() {
+        super();
+        window.addEventListener(EVENT_REFRESH, () => {
+            this.firstUpdated();
+        });
     }
 
     firstUpdated(): void {
@@ -112,6 +110,16 @@ export class PageHeader extends LitElement {
             });
     }
 
+    renderIcon(): TemplateResult {
+        if (this.icon) {
+            if (this.iconImage) {
+                return html`<img class="pf-icon" src="${this.icon}" />&nbsp;`;
+            }
+            return html`<i class=${this.icon}></i>&nbsp;`;
+        }
+        return html``;
+    }
+
     render(): TemplateResult {
         return html`<button
                 class="sidebar-trigger pf-c-button pf-m-plain"
diff --git a/web/src/elements/notifications/NotificationDrawer.ts b/web/src/elements/notifications/NotificationDrawer.ts
index 1d32d9092..20343da39 100644
--- a/web/src/elements/notifications/NotificationDrawer.ts
+++ b/web/src/elements/notifications/NotificationDrawer.ts
@@ -17,7 +17,7 @@ import PFDropdown from "@patternfly/patternfly/components/Dropdown/dropdown.css"
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import AKGlobal from "../../authentik.css";
 import PFContent from "@patternfly/patternfly/components/Content/content.css";
-import { EVENT_NOTIFICATION_DRAWER_TOGGLE } from "../../constants";
+import { EVENT_NOTIFICATION_DRAWER_TOGGLE, EVENT_REFRESH } from "../../constants";
 import { ActionToLabel } from "../../pages/events/utils";
 import { showMessage } from "../messages/MessageContainer";
 import { MessageLevel } from "../messages/Message";
@@ -114,6 +114,12 @@ export class NotificationDrawer extends LitElement {
                             })
                             .then(() => {
                                 this.firstUpdated();
+                                this.dispatchEvent(
+                                    new CustomEvent(EVENT_REFRESH, {
+                                        bubbles: true,
+                                        composed: true,
+                                    }),
+                                );
                             });
                     }}
                 >
@@ -174,6 +180,12 @@ export class NotificationDrawer extends LitElement {
                                         message: t`Successfully cleared notifications`,
                                     });
                                     this.firstUpdated();
+                                    this.dispatchEvent(
+                                        new CustomEvent(EVENT_REFRESH, {
+                                            bubbles: true,
+                                            composed: true,
+                                        }),
+                                    );
                                 });
                         }}
                         class="pf-c-button pf-m-secondary pf-m-block"
diff --git a/web/src/interfaces/UserInterface.ts b/web/src/interfaces/UserInterface.ts
index de7a3ea1b..89f0091c1 100644
--- a/web/src/interfaces/UserInterface.ts
+++ b/web/src/interfaces/UserInterface.ts
@@ -26,7 +26,11 @@ import "../elements/router/RouterOutlet";
 import "../elements/messages/MessageContainer";
 import "../elements/notifications/NotificationDrawer";
 import "../elements/sidebar/Sidebar";
-import { EVENT_API_DRAWER_TOGGLE, EVENT_NOTIFICATION_DRAWER_TOGGLE } from "../constants";
+import {
+    EVENT_API_DRAWER_TOGGLE,
+    EVENT_NOTIFICATION_DRAWER_TOGGLE,
+    EVENT_REFRESH,
+} from "../constants";
 import { CurrentTenant, EventsApi } from "@goauthentik/api";
 import { DEFAULT_CONFIG, tenant } from "../api/Config";
 import { WebsocketClient } from "../common/ws";
@@ -91,7 +95,13 @@ export class UserInterface extends LitElement {
         window.addEventListener(EVENT_API_DRAWER_TOGGLE, () => {
             this.apiDrawerOpen = !this.apiDrawerOpen;
         });
+        window.addEventListener(EVENT_REFRESH, () => {
+            this.firstUpdated();
+        });
         tenant().then((tenant) => (this.tenant = tenant));
+    }
+
+    firstUpdated(): void {
         new EventsApi(DEFAULT_CONFIG)
             .eventsNotificationsList({
                 seen: false,