From 93e8f9cb36d290f5e4c1770db58b76d6dee258f2 Mon Sep 17 00:00:00 2001
From: Jens Langhammer <jens.langhammer@beryju.org>
Date: Wed, 17 Mar 2021 19:49:08 +0100
Subject: [PATCH] web: fix notification drawer, add button to show event

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
---
 web/rollup.config.js                                |  3 +++
 .../elements/notifications/NotificationDrawer.ts    | 13 ++++++++++---
 web/src/pages/events/EventInfoPage.ts               |  3 ++-
 web/src/pages/flows/FlowViewPage.ts                 |  5 +++--
 4 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/web/rollup.config.js b/web/rollup.config.js
index e60d4e963..f7fe7192d 100644
--- a/web/rollup.config.js
+++ b/web/rollup.config.js
@@ -20,6 +20,9 @@ const isProdBuild = process.env.NODE_ENV === "production";
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 function manualChunks(id) {
     if (id.includes("node_modules")) {
+        if (id.includes("codemirror")) {
+            return "vendor-cm";
+        }
         return "vendor";
     }
 }
diff --git a/web/src/elements/notifications/NotificationDrawer.ts b/web/src/elements/notifications/NotificationDrawer.ts
index e8e301db7..f256b3fe4 100644
--- a/web/src/elements/notifications/NotificationDrawer.ts
+++ b/web/src/elements/notifications/NotificationDrawer.ts
@@ -6,6 +6,8 @@ import { DEFAULT_CONFIG } from "../../api/Config";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";
 import PFNotificationDrawer from "@patternfly/patternfly/components/NotificationDrawer/notification-drawer.css";
 import PFDropdown from "@patternfly/patternfly/components/Dropdown/dropdown.css";
+import AKGlobal from "../../authentik.css";
+import PFContent from "@patternfly/patternfly/components/Content/content.css";
 
 @customElement("ak-notification-drawer")
 export class NotificationDrawer extends LitElement {
@@ -17,7 +19,7 @@ export class NotificationDrawer extends LitElement {
     unread = 0;
 
     static get styles(): CSSResult[] {
-        return [PFBase, PFNotificationDrawer, PFDropdown].concat(
+        return [PFBase, PFNotificationDrawer, PFContent, PFDropdown, AKGlobal].concat(
             css`
                 .pf-c-notification-drawer__header {
                     height: 114px;
@@ -57,9 +59,9 @@ export class NotificationDrawer extends LitElement {
         default:
             break;
         }
-        return html`<li class="pf-c-notification-drawer__list-item pf-m-read ${level}">
+        return html`<li class="pf-c-notification-drawer__list-item pf-m-read">
             <div class="pf-c-notification-drawer__list-item-header">
-                <span class="pf-c-notification-drawer__list-item-header-icon">
+                <span class="pf-c-notification-drawer__list-item-header-icon ${level}">
                     <i class="fas fa-info-circle" aria-hidden="true"></i>
                 </span>
                 <h2 class="pf-c-notification-drawer__list-item-header-title">
@@ -67,6 +69,11 @@ export class NotificationDrawer extends LitElement {
                 </h2>
             </div>
             <div class="pf-c-notification-drawer__list-item-action">
+                ${item.event && html`
+                    <a class="pf-c-dropdown__toggle pf-m-plain" href="#/events/log/${item.event?.pk}">
+                        <i class="pf-icon pf-icon-arrow"></i>
+                    </a>
+                `}
                 <button class="pf-c-dropdown__toggle pf-m-plain" type="button" @click=${() => {
                     new EventsApi(DEFAULT_CONFIG).eventsNotificationsPartialUpdate({
                         uuid: item.pk || "",
diff --git a/web/src/pages/events/EventInfoPage.ts b/web/src/pages/events/EventInfoPage.ts
index d8b0201ef..f26ce0186 100644
--- a/web/src/pages/events/EventInfoPage.ts
+++ b/web/src/pages/events/EventInfoPage.ts
@@ -6,6 +6,7 @@ import { EventWithContext } from "../../api/Events";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";
 import PFPage from "@patternfly/patternfly/components/Page/page.css";
 import PFCard from "@patternfly/patternfly/components/Card/card.css";
+import AKGlobal from "../../authentik.css";
 import "./EventInfo";
 
 @customElement("ak-event-info-page")
@@ -28,7 +29,7 @@ export class EventInfoPage extends LitElement {
     event!: EventWithContext;
 
     static get styles(): CSSResult[] {
-        return [PFBase, PFPage, PFCard].concat(css`
+        return [PFBase, PFPage, PFCard, AKGlobal].concat(css`
             .pf-c-card {
                 color: var(--ak-dark-foreground);
             }
diff --git a/web/src/pages/flows/FlowViewPage.ts b/web/src/pages/flows/FlowViewPage.ts
index f57701892..c5165e353 100644
--- a/web/src/pages/flows/FlowViewPage.ts
+++ b/web/src/pages/flows/FlowViewPage.ts
@@ -12,7 +12,8 @@ import { DEFAULT_CONFIG } from "../../api/Config";
 
 import PFPage from "@patternfly/patternfly/components/Page/page.css";
 import PFContent from "@patternfly/patternfly/components/Content/content.css";
-import PFGallery from "@patternfly/patternfly/layouts/Gallery/gallery.css";
+import AKGlobal from "../../authentik.css";
+import PFBase from "@patternfly/patternfly/patternfly-base.css";
 
 @customElement("ak-flow-view")
 export class FlowViewPage extends LitElement {
@@ -29,7 +30,7 @@ export class FlowViewPage extends LitElement {
     flow!: Flow;
 
     static get styles(): CSSResult[] {
-        return [PFPage, PFContent, PFGallery].concat(
+        return [PFBase, PFPage, PFContent, AKGlobal].concat(
             css`
                 img.pf-icon {
                     max-height: 24px;