From 71eec4d915e714529e03f44a88b6862acb6cf6b9 Mon Sep 17 00:00:00 2001
From: sua yoo <sua@suayoo.com>
Date: Mon, 18 Apr 2022 10:36:28 -0700
Subject: [PATCH] Create crawl template with browser profile (#215)

---
 .../pages/archive/browser-profiles-list.ts    |   2 +-
 .../pages/archive/crawl-templates-detail.ts   |  23 ++++
 .../src/pages/archive/crawl-templates-new.ts  | 130 +++++++++++++++++-
 frontend/src/pages/archive/types.ts           |   2 +
 4 files changed, 154 insertions(+), 3 deletions(-)

diff --git a/frontend/src/pages/archive/browser-profiles-list.ts b/frontend/src/pages/archive/browser-profiles-list.ts
index 448a3fdb..c4f84200 100644
--- a/frontend/src/pages/archive/browser-profiles-list.ts
+++ b/frontend/src/pages/archive/browser-profiles-list.ts
@@ -3,7 +3,7 @@ import { msg, localized, str } from "@lit/localize";
 
 import type { AuthState } from "../../utils/AuthService";
 import LiteElement, { html } from "../../utils/LiteElement";
-import { Profile } from "./types";
+import type { Profile } from "./types";
 
 /**
  * Usage:
diff --git a/frontend/src/pages/archive/crawl-templates-detail.ts b/frontend/src/pages/archive/crawl-templates-detail.ts
index 6c39235d..f0564d4d 100644
--- a/frontend/src/pages/archive/crawl-templates-detail.ts
+++ b/frontend/src/pages/archive/crawl-templates-detail.ts
@@ -587,6 +587,29 @@ export class CrawlTemplatesDetail extends LiteElement {
         ${this.crawlTemplate?.config.extraHops ? msg("Yes") : msg("No")}
       </div>
 
+      <div class="mb-5">
+        <div class="text-sm text-0-600">${msg("Browser Profile")}</div>
+        ${this.crawlTemplate
+          ? html`
+              ${this.crawlTemplate.profileid
+                ? html`<a
+                    class="font-medium text-neutral-700 hover:text-neutral-900"
+                    href=${`/archives/${this.archiveId}/browser-profiles/profile/${this.crawlTemplate.profileid}`}
+                    @click=${this.navLink}
+                  >
+                    <sl-icon
+                      class="inline-block align-middle"
+                      name="link-45deg"
+                    ></sl-icon>
+                    <span class="inline-block align-middle"
+                      >${this.crawlTemplate.profileName}</span
+                    >
+                  </a>`
+                : html`<span class="text-0-400">${msg("None")}</span>`}
+            `
+          : ""}
+      </div>
+
       <sl-details style="--sl-spacing-medium: var(--sl-spacing-small)">
         <span slot="summary" class="text-sm">
           <span class="font-medium">${msg("Advanced Configuration")}</span>
diff --git a/frontend/src/pages/archive/crawl-templates-new.ts b/frontend/src/pages/archive/crawl-templates-new.ts
index 6a36cbbe..984ab2a9 100644
--- a/frontend/src/pages/archive/crawl-templates-new.ts
+++ b/frontend/src/pages/archive/crawl-templates-new.ts
@@ -3,11 +3,12 @@ import { ifDefined } from "lit/directives/if-defined.js";
 import { msg, localized, str } from "@lit/localize";
 import cronParser from "cron-parser";
 import { parse as yamlToJson, stringify as jsonToYaml } from "yaml";
+import orderBy from "lodash/fp/orderBy";
 
 import type { AuthState } from "../../utils/AuthService";
 import LiteElement, { html } from "../../utils/LiteElement";
 import { getLocaleTimeZone } from "../../utils/localization";
-import type { CrawlConfig } from "./types";
+import type { CrawlConfig, Profile } from "./types";
 import { getUTCSchedule } from "./utils";
 
 export type NewCrawlTemplate = {
@@ -18,6 +19,7 @@ export type NewCrawlTemplate = {
   crawlTimeout?: number;
   scale: number;
   config: CrawlConfig;
+  profileid: string;
 };
 
 const initialValues = {
@@ -86,6 +88,12 @@ export class CrawlTemplatesNew extends LiteElement {
   @state()
   private serverError?: string;
 
+  @state()
+  browserProfiles?: Profile[];
+
+  @state()
+  selectedProfile?: Profile;
+
   private get timeZone() {
     return Intl.DateTimeFormat().resolvedOptions().timeZone;
   }
@@ -138,6 +146,10 @@ export class CrawlTemplatesNew extends LiteElement {
     super.connectedCallback();
   }
 
+  protected firstUpdated() {
+    this.fetchBrowserProfiles();
+  }
+
   render() {
     return html`
       <nav class="mb-5">
@@ -233,6 +245,91 @@ export class CrawlTemplatesNew extends LiteElement {
           value=${this.initialCrawlTemplate!.name}
           required
         ></sl-input>
+
+        <div>
+          <sl-select
+            label=${msg("Browser Profile")}
+            clearable
+            value=${this.selectedProfile?.id || ""}
+            ?disabled=${!this.browserProfiles?.length}
+            @sl-change=${(e: any) =>
+              (this.selectedProfile = this.browserProfiles?.find(
+                ({ id }) => id === e.target.value
+              ))}
+            @sl-focus=${() => {
+              // Refetch to keep list up to date
+              this.fetchBrowserProfiles();
+            }}
+          >
+            ${this.browserProfiles
+              ? ""
+              : html` <sl-spinner slot="prefix"></sl-spinner> `}
+            ${this.browserProfiles?.map(
+              (profile) => html`
+                <sl-menu-item value=${profile.id}>
+                  ${profile.name}
+                  <div slot="suffix">
+                    <div class="text-xs">
+                      <sl-format-date
+                        date=${`${profile.created}Z` /** Z for UTC */}
+                        month="2-digit"
+                        day="2-digit"
+                        year="2-digit"
+                      ></sl-format-date>
+                    </div></div
+                ></sl-menu-item>
+              `
+            )}
+          </sl-select>
+
+          ${this.browserProfiles && !this.browserProfiles.length
+            ? html`
+                <div class="mt-2 text-sm text-neutral-500">
+                  <span class="inline-block align-middle"
+                    >${msg("No browser profiles found.")}</span
+                  >
+                  <a
+                    href=${`/archives/${this.archiveId}/browser-profiles/new`}
+                    class="font-medium text-primary hover:text-indigo-500"
+                    target="_blank"
+                    ><span class="inline-block align-middle"
+                      >${msg("Create a browser profile")}</span
+                    >
+                    <sl-icon
+                      class="inline-block align-middle"
+                      name="box-arrow-up-right"
+                    ></sl-icon
+                  ></a>
+                </div>
+              `
+            : ""}
+          ${this.selectedProfile
+            ? html`
+                <div
+                  class="mt-2 border bg-slate-50 border-slate-100 rounded p-2 text-sm flex justify-between"
+                >
+                  ${this.selectedProfile.description
+                    ? html`<em class="text-slate-500"
+                        >${this.selectedProfile.description}</em
+                      >`
+                    : ""}
+                  <a
+                    href=${`/archives/${this.archiveId}/browser-profiles/profile/${this.selectedProfile.id}`}
+                    class="font-medium text-primary hover:text-indigo-500"
+                    target="_blank"
+                  >
+                    <span class="inline-block align-middle mr-1"
+                      >${msg("View profile")}</span
+                    >
+                    <sl-icon
+                      class="inline-block align-middle"
+                      name="box-arrow-up-right"
+                    ></sl-icon>
+                  </a>
+                </div>
+              `
+            : ""}
+        </div>
       </section>
     `;
   }
@@ -325,7 +422,7 @@ export class CrawlTemplatesNew extends LiteElement {
               </sl-button-group>
             </div>
           </fieldset>
-          <div class="text-sm text-gray-500 mt-2">
+          <div class="text-sm text-neutral-500 mt-2">
             ${this.formattededNextCrawlDate
               ? msg(
                   html`Next scheduled crawl: ${this.formattededNextCrawlDate}`
@@ -484,6 +581,7 @@ export class CrawlTemplatesNew extends LiteElement {
       runNow: this.isRunNow,
       crawlTimeout: crawlTimeoutMinutes ? +crawlTimeoutMinutes * 60 : 0,
       scale: +scale,
+      profileid: formData.get("profileId") as string,
     };
 
     if (this.isConfigCodeView) {
@@ -563,6 +661,34 @@ export class CrawlTemplatesNew extends LiteElement {
       period,
     });
   }
+
+  /**
+   * Fetch browser profiles and update internal state
+   */
+  private async fetchBrowserProfiles(): Promise<void> {
+    try {
+      const data = await this.getProfiles();
+
+      this.browserProfiles = orderBy(["name", "created"])(["asc", "desc"])(
+        data
+      ) as Profile[];
+    } catch (e) {
+      this.notify({
+        message: msg("Sorry, couldn't retrieve browser profiles at this time."),
+        type: "danger",
+        icon: "exclamation-octagon",
+      });
+    }
+  }
+
+  private async getProfiles(): Promise<Profile[]> {
+    const data = await this.apiFetch(
+      `/archives/${this.archiveId}/profiles`,
+      this.authState!
+    );
+
+    return data;
+  }
 }
 
 customElements.define("btrix-crawl-templates-new", CrawlTemplatesNew);
diff --git a/frontend/src/pages/archive/types.ts b/frontend/src/pages/archive/types.ts
index 1fd54822..4a421f25 100644
--- a/frontend/src/pages/archive/types.ts
+++ b/frontend/src/pages/archive/types.ts
@@ -54,6 +54,8 @@ export type CrawlTemplate = {
   inactive: boolean;
   config: CrawlConfig;
   scale: number;
+  profileid: string | null;
+  profileName: string | null;
 };
 
 export type Profile = {