web: fix notification drawer, add button to show event

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

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";
     }
 }

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 || "",

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);
             }

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;