Fix in-app link UX (#132)

closes #130, closes #113

frontend/src/index.ts

@@ -1,4 +1,5 @@
 import type { TemplateResult } from "lit";
+import { render } from "lit";
 import { state, query } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { msg, localized } from "@lit/localize";
@@ -491,6 +492,9 @@ export class App extends LiteElement {
     };
   }
 
+  /**
+   * Show global toast alert
+   */
   onNotify(event: NotifyEvent) {
     event.stopPropagation();
 
@@ -502,7 +506,8 @@ export class App extends LiteElement {
       duration = 5000,
     } = event.detail;
 
-    const alert = Object.assign(document.createElement("sl-alert"), {
+    const container = document.createElement("sl-alert");
+    const alert = Object.assign(container, {
       type: type,
       closable: true,
       duration: duration,
@@ -512,16 +517,16 @@ export class App extends LiteElement {
         // "--sl-panel-border-width: 0px",
         "--sl-spacing-large: var(--sl-spacing-medium)",
       ].join(";"),
-      innerHTML: `
-        <sl-icon name="${icon}" slot="icon"></sl-icon>
-        <span>
-          ${title ? `<strong>${title}</strong>` : ""}
-          ${message ? `<div>${message}</div>` : ""}
-        </span>
-
-      `,
     });
 
+    render(
+      html`
+        <sl-icon name="${icon}" slot="icon"></sl-icon>
+        ${title ? html`<strong>${title}</strong>` : ""}
+        ${message ? html`<div>${message}</div>` : ""}
+      `,
+      container
+    );
     document.body.append(alert);
     alert.toast();
   }

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

@@ -415,11 +415,14 @@ export class CrawlTemplatesDetail extends LiteElement {
 
       this.notify({
         message: msg(
-          str`Started crawl from <strong>${
-            this.crawlTemplate!.name
-          }</strong>. <br /><a class="underline hover:no-underline" href="/archives/${
-            this.archiveId
-          }/crawls/crawl/${data.started}">View crawl</a>`
+          html`Started crawl from <strong>${this.crawlTemplate!.name}</strong>.
+            <br />
+            <a
+              class="underline hover:no-underline"
+              href="/archives/${this.archiveId}/crawls/crawl/${data.started}"
+              @click=${this.navLink.bind(this)}
+              >View crawl</a
+            >`
         ),
         type: "success",
         icon: "check2-circle",

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

@@ -47,7 +47,6 @@ export class CrawlTemplatesList extends LiteElement {
         message: msg("Sorry, couldn't retrieve crawl templates at this time."),
         type: "danger",
         icon: "exclamation-octagon",
-        duration: 10000,
       });
     }
   }
@@ -379,7 +378,7 @@ export class CrawlTemplatesList extends LiteElement {
       );
 
       this.notify({
-        message: msg(str`Deleted <strong>${template.name}</strong>.`),
+        message: msg(html`Deleted <strong>${template.name}</strong>.`),
         type: "success",
         icon: "check2-circle",
       });
@@ -415,7 +414,13 @@ export class CrawlTemplatesList extends LiteElement {
 
       this.notify({
         message: msg(
-          str`Started crawl from <strong>${template.name}</strong>. <br /><a class="underline hover:no-underline" href="/archives/${this.archiveId}/crawls/crawl/${data.started}">View crawl</a>`
+          html`Started crawl from <strong>${template.name}</strong>. <br />
+            <a
+              class="underline hover:no-underline"
+              href="/archives/${this.archiveId}/crawls/crawl/${data.started}"
+              @click=${this.navLink.bind(this)}
+              >View crawl</a
+            >`
         ),
         type: "success",
         icon: "check2-circle",

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

@@ -543,7 +543,14 @@ export class CrawlTemplatesNew extends LiteElement {
       this.notify({
         message: data.run_now_job
           ? msg(
-              str`Crawl running with new template. <br /><a class="underline hover:no-underline" href="/archives/${this.archiveId}/crawls/crawl/${data.started}">View crawl</a>`
+              html`Crawl running with new template. <br />
+                <a
+                  class="underline hover:no-underline"
+                  href="/archives/${this
+                    .archiveId}/crawls/crawl/${data.started}"
+                  @click=${this.navLink.bind(this)}
+                  >View crawl</a
+                >`
             )
           : msg("Crawl template created."),
         type: "success",

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

@@ -46,7 +46,6 @@ export class CrawlTemplatesList extends LiteElement {
         message: msg("Sorry, couldn't retrieve crawl templates at this time."),
         type: "danger",
         icon: "exclamation-octagon",
-        duration: 10000,
       });
     }
   }
@@ -119,7 +118,7 @@ export class CrawlTemplatesList extends LiteElement {
       );
 
       this.notify({
-        message: msg(str`Deleted <strong>${template.name}</strong>.`),
+        message: msg(html`Deleted <strong>${template.name}</strong>.`),
         type: "success",
         icon: "check2-circle",
       });
@@ -155,7 +154,13 @@ export class CrawlTemplatesList extends LiteElement {
 
       this.notify({
         message: msg(
-          str`Started crawl from <strong>${template.name}</strong>. <br /><a class="underline hover:no-underline" href="/archives/${this.archiveId}/crawls/crawl/${data.started}">View crawl</a>`
+          html`Started crawl from <strong>${template.name}</strong>. <br />
+            <a
+              class="underline hover:no-underline"
+              href="/archives/${this.archiveId}/crawls/crawl/${data.started}"
+              @click=${this.navLink.bind(this)}
+              >View crawl</a
+            >`
         ),
         type: "success",
         icon: "check2-circle",

frontend/src/pages/archive/crawls-list.ts

@@ -242,7 +242,17 @@ export class CrawlsList extends LiteElement {
       title=${crawl.configName || crawl.cid}
     >
       <div class="col-span-12 md:col-span-5">
-        <div class="font-medium mb-1">${crawl.configName || crawl.cid}</div>
+        <div class="font-medium mb-1">
+          <a
+            href=${`/archives/${this.archiveId}/crawls/crawl/${crawl.id}`}
+            @click=${(e: any) => {
+              e.stopPropagation();
+              this.navLink(e);
+            }}
+          >
+            ${crawl.configName || crawl.cid}
+          </a>
+        </div>
         <div class="text-0-700 text-sm whitespace-nowrap truncate">
           <sl-format-date
             date=${`${crawl.started}Z` /** Z for UTC */}

frontend/src/utils/LiteElement.ts

@@ -1,4 +1,5 @@
 import { LitElement, html } from "lit";
+import type { TemplateResult } from "lit";
 
 import type { Auth } from "../utils/AuthService";
 import { APIError } from "./api";
@@ -14,10 +15,23 @@ export interface NotifyEvent extends CustomEvent {
   detail: {
     /**
      * Notification message body.
-     * Can contain HTML.
-     * HTML is rendered as-is without sanitation
+     * Example:
+     * ```ts
+     * message: html`<strong>Look!</strong>`
+     * ```
+     *
+     * Note: In order for `this` methods to work, you'll
+     * need to bind `this` or use a fat arrow function.
+     * For example:
+     * ```ts
+     * message: html`<button @click=${this.onClick.bind(this)}>Go!</button>`
+     * ```
+     * Or:
+     * ```ts
+     * message: html`<button @click=${(e) => this.onClick(e)}>Go!</button>`
+     * ```
      **/
-    message: string;
+    message: string | TemplateResult;
     /** Notification title */
     title?: string;
     /** Shoelace icon name */
@@ -50,7 +64,17 @@ export default class LiteElement extends LitElement {
    * ```
    * @param event Click event
    */
-  navLink(event: Event): void {
+  navLink(event: MouseEvent, href?: string): void {
+    // Detect keypress for opening in a new tab
+    if (
+      event.ctrlKey ||
+      event.shiftKey ||
+      event.metaKey ||
+      (event.button && event.button == 1)
+    ) {
+      return;
+    }
+
     event.preventDefault();
 
     const evt: NavigateEvent = new CustomEvent("navigate", {