From d7f58c964cd5e950882f64d95c7a053a6be482cb Mon Sep 17 00:00:00 2001
From: sua yoo <sua@suayoo.com>
Date: Mon, 31 Jan 2022 17:36:50 -0800
Subject: [PATCH] Fix in-app link UX (#132)

closes #130, closes #113
---
 frontend/src/index.ts                         | 23 +++++++------
 .../pages/archive/crawl-templates-detail.ts   | 13 +++++---
 .../src/pages/archive/crawl-templates-list.ts | 11 +++++--
 .../src/pages/archive/crawl-templates-new.ts  |  9 +++++-
 frontend/src/pages/archive/crawl-templates.ts | 11 +++++--
 frontend/src/pages/archive/crawls-list.ts     | 12 ++++++-
 frontend/src/utils/LiteElement.ts             | 32 ++++++++++++++++---
 7 files changed, 85 insertions(+), 26 deletions(-)

diff --git a/frontend/src/index.ts b/frontend/src/index.ts
index 3b1d87e9..2300e825 100644
--- a/frontend/src/index.ts
+++ b/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();
   }
diff --git a/frontend/src/pages/archive/crawl-templates-detail.ts b/frontend/src/pages/archive/crawl-templates-detail.ts
index e2e19769..38036ff3 100644
--- a/frontend/src/pages/archive/crawl-templates-detail.ts
+++ b/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",
diff --git a/frontend/src/pages/archive/crawl-templates-list.ts b/frontend/src/pages/archive/crawl-templates-list.ts
index abd5a9d5..2676600c 100644
--- a/frontend/src/pages/archive/crawl-templates-list.ts
+++ b/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",
diff --git a/frontend/src/pages/archive/crawl-templates-new.ts b/frontend/src/pages/archive/crawl-templates-new.ts
index d9d52f6b..7c3b3982 100644
--- a/frontend/src/pages/archive/crawl-templates-new.ts
+++ b/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",
diff --git a/frontend/src/pages/archive/crawl-templates.ts b/frontend/src/pages/archive/crawl-templates.ts
index e804756e..14c887b7 100644
--- a/frontend/src/pages/archive/crawl-templates.ts
+++ b/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",
diff --git a/frontend/src/pages/archive/crawls-list.ts b/frontend/src/pages/archive/crawls-list.ts
index 8eef4044..cae3e582 100644
--- a/frontend/src/pages/archive/crawls-list.ts
+++ b/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 */}
diff --git a/frontend/src/utils/LiteElement.ts b/frontend/src/utils/LiteElement.ts
index 16eaf2f7..e5a9f26f 100644
--- a/frontend/src/utils/LiteElement.ts
+++ b/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", {