Add helper for dispatching notify events (#92)

frontend/src/index.ts

@@ -6,6 +6,7 @@ import type { SlDialog } from "@shoelace-style/shoelace";
 import "tailwindcss/tailwind.css";
 
 import type { ArchiveTab } from "./pages/archive";
+import type { NotifyEvent } from "./utils/LiteElement";
 import LiteElement, { html } from "./utils/LiteElement";
 import APIRouter from "./utils/APIRouter";
 import AuthService from "./utils/AuthService";
@@ -478,16 +479,7 @@ export class App extends LiteElement {
     };
   }
 
-  onNotify(
+  onNotify(event: NotifyEvent) {
-    event: CustomEvent<{
-      title?: string;
-      /** Can contain HTML */
-      message?: string;
-      type?: "success" | "warning" | "danger" | "primary";
-      icon?: string;
-      duration?: number;
-    }>
-  ) {
     event.stopPropagation();
 
     const {

frontend/src/pages/accept-invite.ts

@@ -48,16 +48,12 @@ export class AcceptInvite extends LiteElement {
     if (this.isLoggedIn) {
       this.getInviteInfo();
     } else {
-      this.dispatchEvent(
+      this.notify({
-        new CustomEvent("notify", {
+        message: msg("Log in to continue."),
-          detail: {
+        type: "success",
-            message: msg("Log in to continue."),
+        icon: "check2-circle",
-            type: "success",
+        duration: 10000,
-            icon: "check2-circle",
+      });
-            duration: 10000,
-          },
-        })
-      );
 
       this.navTo(
         `/log-in?redirectUrl=${encodeURIComponent(
@@ -160,15 +156,11 @@ export class AcceptInvite extends LiteElement {
         }
       );
 
-      this.dispatchEvent(
+      this.notify({
-        new CustomEvent("notify", {
+        message: msg(str`You've joined ${this.inviteInfo.archiveName}.`),
-          detail: {
+        type: "success",
-            message: msg(str`You've joined ${this.inviteInfo.archiveName}.`),
+        icon: "check2-circle",
-            type: "success",
+      });
-            icon: "check2-circle",
-          },
-        })
-      );
 
       this.navTo(DASHBOARD_ROUTE);
     } catch (err: any) {
@@ -181,17 +173,13 @@ export class AcceptInvite extends LiteElement {
   }
 
   private onDecline() {
-    this.dispatchEvent(
+    this.notify({
-      new CustomEvent("notify", {
+      message: msg(
-        detail: {
+        str`You've declined to join ${this.inviteInfo.archiveName}.`
-          message: msg(
+      ),
-            str`You've declined to join ${this.inviteInfo.archiveName}.`
+      type: "info",
-          ),
+      icon: "info-circle",
-          type: "info",
+    });
-          icon: "info-circle",
-        },
-      })
-    );
 
     this.navTo(DASHBOARD_ROUTE);
   }

frontend/src/pages/archive/crawl-templates-new.ts

@@ -501,21 +501,16 @@ export class CrawlTemplatesNew extends LiteElement {
         }
       );
 
-      this.dispatchEvent(
+      this.notify({
-        new CustomEvent("notify", {
+        message: data.run_now_job
-          bubbles: true,
+          ? msg(
-          detail: {
+              str`Crawl running with new template. <br /><a class="underline hover:no-underline" href="/archives/${this.archiveId}/crawls/${data.run_now_job}">View crawl</a>`
-            message: data.run_now_job
+            )
-              ? msg(
+          : msg("Crawl template created."),
-                  str`Crawl running with new template. <br /><a class="underline hover:no-underline" href="/archives/${this.archiveId}/crawls/${data.run_now_job}">View crawl</a>`
+        type: "success",
-                )
+        icon: "check2-circle",
-              : msg("Crawl template created."),
+        duration: 10000,
-            type: "success",
+      });
-            icon: "check2-circle",
-            duration: 10000,
-          },
-        })
-      );
 
       this.navTo(`/archives/${this.archiveId}/crawl-templates`);
     } catch (e: any) {

frontend/src/pages/verify.ts

@@ -65,18 +65,13 @@ export class Verify extends LiteElement {
     const isLoggedIn = Boolean(this.authState);
     const shouldLogOut = isLoggedIn && this.authState?.username !== data.email;
 
-    this.dispatchEvent(
+    this.notify({
-      new CustomEvent("notify", {
+      title: msg("Email address verified"),
-        detail: {
+      message: isLoggedIn && !shouldLogOut ? "" : msg("Log in to continue."),
-          title: msg("Email address verified"),
+      type: "success",
-          message:
+      icon: "check2-circle",
-            isLoggedIn && !shouldLogOut ? "" : msg("Log in to continue."),
+      duration: 10000,
-          type: "success",
+    });
-          icon: "check2-circle",
-          duration: 10000,
-        },
-      })
-    );
 
     if (shouldLogOut) {
       this.dispatchEvent(new CustomEvent("log-out"));

frontend/src/utils/LiteElement.ts

@@ -3,6 +3,23 @@ import { LitElement, html } from "lit";
 import type { Auth } from "../utils/AuthService";
 import { APIError } from "./api";
 
+export interface NotifyEvent extends CustomEvent {
+  detail: {
+    /**
+     * Notification message body.
+     * Can contain HTML.
+     * HTML is rendered as-is without sanitation
+     **/
+    message: string;
+    /** Notification title */
+    title?: string;
+    /** Shoelace icon name */
+    icon?: string;
+    type?: "success" | "warning" | "danger" | "primary" | "info";
+    duration?: number;
+  };
+}
+
 export { html };
 
 export default class LiteElement extends LitElement {
@@ -27,6 +44,18 @@ export default class LiteElement extends LitElement {
     );
   }
 
+  /**
+   * Emit global notification
+   */
+  notify(detail: NotifyEvent["detail"]) {
+    this.dispatchEvent(
+      new CustomEvent("notify", {
+        bubbles: true,
+        detail,
+      })
+    );
+  }
+
   async apiFetch(
     path: string,
     auth: Auth,