fix: Use org crawling defaults for new browser profile (#2937)

- Uses org crawling defaults when creating new browser profile
- Refactors `"default"` image to enum

Author: SuaYoo

frontend/src/components/ui/config-details.ts

@@ -9,6 +9,7 @@ import { BtrixElement } from "@/classes/BtrixElement";
 import { none, notSpecified } from "@/layouts/empty";
 import {
   Behavior,
+  CrawlerChannelImage,
   type CrawlConfig,
   type Seed,
   type SeedConfig,
@@ -257,8 +258,9 @@ export class ConfigDetails extends BtrixElement {
           )}
           ${this.renderSetting(
             msg("Crawler Channel (Exact Crawler Version)"),
-            capitalize(crawlConfig?.crawlerChannel || "default") +
-              (crawlConfig?.image ? ` (${crawlConfig.image})` : ""),
+            capitalize(
+              crawlConfig?.crawlerChannel || CrawlerChannelImage.Default,
+            ) + (crawlConfig?.image ? ` (${crawlConfig.image})` : ""),
           )}
           ${this.renderSetting(
             msg("Block Ads by Domain"),

frontend/src/components/ui/select-crawler.ts

@@ -5,7 +5,7 @@ import { customElement, property, state } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import capitalize from "lodash/fp/capitalize";
 
-import type { CrawlerChannel } from "@/pages/org/types";
+import { CrawlerChannelImage, type CrawlerChannel } from "@/pages/org/types";
 import LiteElement from "@/utils/LiteElement";
 
 type SelectCrawlerChangeDetail = {
@@ -131,11 +131,11 @@ export class SelectCrawler extends LiteElement {
     }
 
     if (!this.selectedCrawler) {
-      this.crawlerChannel = "default";
+      this.crawlerChannel = CrawlerChannelImage.Default;
       this.dispatchEvent(
         new CustomEvent("on-change", {
           detail: {
-            value: "default",
+            value: CrawlerChannelImage.Default,
           },
         }),
       );

frontend/src/components/ui/url-input.ts

@@ -19,6 +19,7 @@ export function validURL(url: string) {
  * @attr {String} name
  * @attr {String} label
  * @attr {String} value
+ * @attr {String} autocomplete
  * @attr {Boolean} required
  */
 @customElement("btrix-url-input")

frontend/src/features/browser-profiles/new-browser-profile-dialog.ts

@@ -1,7 +1,6 @@
-import { consume } from "@lit/context";
 import { localized, msg, str } from "@lit/localize";
 import { type SlInput } from "@shoelace-style/shoelace";
-import { nothing } from "lit";
+import { html, nothing, type PropertyValues } from "lit";
 import {
   customElement,
   property,
@@ -12,17 +11,23 @@ import {
 import { ifDefined } from "lit/directives/if-defined.js";
 import queryString from "query-string";
 
+import { BtrixElement } from "@/classes/BtrixElement";
 import type { Dialog } from "@/components/ui/dialog";
 import { type SelectCrawlerChangeEvent } from "@/components/ui/select-crawler";
 import { type SelectCrawlerProxyChangeEvent } from "@/components/ui/select-crawler-proxy";
-import { proxiesContext, type ProxiesContext } from "@/context/org";
-import LiteElement, { html } from "@/utils/LiteElement";
+import { CrawlerChannelImage, type Proxy } from "@/types/crawler";
 
 @customElement("btrix-new-browser-profile-dialog")
 @localized()
-export class NewBrowserProfileDialog extends LiteElement {
-  @consume({ context: proxiesContext, subscribe: true })
-  private readonly proxies?: ProxiesContext;
+export class NewBrowserProfileDialog extends BtrixElement {
+  @property({ type: String })
+  defaultProxyId?: string;
+
+  @property({ type: String })
+  defaultCrawlerChannel?: string;
+
+  @property({ type: Array })
+  proxyServers?: Proxy[];
 
   @property({ type: Boolean })
   open = false;
@@ -31,7 +36,7 @@ export class NewBrowserProfileDialog extends LiteElement {
   private isSubmitting = false;
 
   @state()
-  private crawlerChannel = "default";
+  private crawlerChannel: string = CrawlerChannelImage.Default;
 
   @state()
   private proxyId: string | null = null;
@@ -42,6 +47,22 @@ export class NewBrowserProfileDialog extends LiteElement {
   @queryAsync("#browserProfileForm")
   private readonly form!: Promise<HTMLFormElement>;
 
+  protected willUpdate(changedProperties: PropertyValues): void {
+    if (changedProperties.has("defaultProxyId") && this.defaultProxyId) {
+      this.proxyId = this.proxyId || this.defaultProxyId;
+    }
+
+    if (
+      changedProperties.has("defaultCrawlerChannel") &&
+      this.defaultCrawlerChannel
+    ) {
+      this.crawlerChannel =
+        (this.crawlerChannel !== (CrawlerChannelImage.Default as string) &&
+          this.crawlerChannel) ||
+        this.defaultCrawlerChannel;
+    }
+  }
+
   render() {
     return html` <btrix-dialog
       .label=${msg(str`Create a New Browser Profile`)}
@@ -61,43 +82,28 @@ export class NewBrowserProfileDialog extends LiteElement {
         @reset=${this.onReset}
         @submit=${this.onSubmit}
       >
-        <div class="grid">
-          <div>
-            <label
-              id="startingUrlLabel"
-              class="text-sm leading-normal"
-              style="margin-bottom: var(--sl-spacing-3x-small)"
-              >${msg("Starting URL")}
-            </label>
-
-            <div class="flex">
-              <sl-input
-                class="grow"
-                name="url"
-                placeholder=${msg("https://example.com")}
-                autocomplete="off"
-                aria-labelledby="startingUrlLabel"
-                required
-              >
-              </sl-input>
-            </div>
-          </div>
-        </div>
-        <div class="mt-1">
+        <btrix-url-input
+          label=${msg("Starting URL")}
+          name="url"
+          placeholder=${msg("https://example.com")}
+          autocomplete="off"
+          required
+        >
+        </btrix-url-input>
+
+        <div class="mt-4">
           <btrix-select-crawler
             .crawlerChannel=${this.crawlerChannel}
             @on-change=${(e: SelectCrawlerChangeEvent) =>
               (this.crawlerChannel = e.detail.value!)}
           ></btrix-select-crawler>
         </div>
-        ${this.proxies?.servers.length
+        ${this.proxyServers?.length
           ? html`
               <div class="mt-4">
                 <btrix-select-crawler-proxy
-                  defaultProxyId=${ifDefined(
-                    this.proxies.default_proxy_id ?? undefined,
-                  )}
-                  .proxyServers=${this.proxies.servers}
+                  defaultProxyId=${ifDefined(this.defaultProxyId || undefined)}
+                  .proxyServers=${this.proxyServers}
                   .proxyId="${this.proxyId || ""}"
                   @btrix-change=${(e: SelectCrawlerProxyChangeEvent) =>
                     (this.proxyId = e.detail.value)}
@@ -156,15 +162,15 @@ export class NewBrowserProfileDialog extends LiteElement {
         proxyId: this.proxyId,
       });
 
-      this.notify({
+      this.notify.toast({
         message: msg("Starting up browser for new profile..."),
         variant: "success",
         icon: "check2-circle",
         id: "browser-profile-update-status",
       });
       await this.hideDialog();
-      this.navTo(
-        `${this.orgBasePath}/browser-profiles/profile/browser/${
+      this.navigate.to(
+        `${this.navigate.orgBasePath}/browser-profiles/profile/browser/${
           data.browserid
         }?${queryString.stringify({
           url,
@@ -174,7 +180,7 @@ export class NewBrowserProfileDialog extends LiteElement {
         })}`,
       );
     } catch (e) {
-      this.notify({
+      this.notify.toast({
         message: msg("Sorry, couldn't create browser profile at this time."),
         variant: "danger",
         icon: "exclamation-octagon",
@@ -199,7 +205,7 @@ export class NewBrowserProfileDialog extends LiteElement {
       proxyId,
     };
 
-    return this.apiFetch<{ browserid: string }>(
+    return this.api.fetch<{ browserid: string }>(
       `/orgs/${this.orgId}/profiles/browser`,
       {
         method: "POST",

frontend/src/features/crawl-workflows/workflow-editor.ts

@@ -88,6 +88,7 @@ import { AnalyticsTrackEvent } from "@/trackEvents";
 import { APIErrorDetail } from "@/types/api";
 import {
   Behavior,
+  CrawlerChannelImage,
   ScopeType,
   type Seed,
   type WorkflowParams,
@@ -3228,7 +3229,8 @@ https://archiveweb.page/images/${"logo.svg"}`}
         clickSelector:
           this.formState.clickSelector || DEFAULT_AUTOCLICK_SELECTOR,
       },
-      crawlerChannel: this.formState.crawlerChannel || "default",
+      crawlerChannel:
+        this.formState.crawlerChannel || CrawlerChannelImage.Default,
       proxyId: this.formState.proxyId,
     };
 

frontend/src/pages/org/archived-item-detail/archived-item-detail.ts

@@ -948,8 +948,9 @@ export class ArchivedItemDetail extends BtrixElement {
     }
 
     const text =
-      capitalize(this.item.crawlerChannel || "default") +
-      (this.item.image ? ` (${this.item.image})` : "");
+      (this.item.crawlerChannel
+        ? capitalize(this.item.crawlerChannel)
+        : msg("Default")) + (this.item.image ? ` (${this.item.image})` : "");
 
     return html` <btrix-desc-list-item
       label=${msg("Crawler Channel (Exact Crawler Version)")}

frontend/src/pages/org/browser-profiles-new.ts

@@ -4,6 +4,8 @@ import { customElement, property, query, state } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import queryString from "query-string";
 
+import { CrawlerChannelImage } from "./types";
+
 import { BtrixElement } from "@/classes/BtrixElement";
 import type { Dialog } from "@/components/ui/dialog";
 import type { BrowserConnectionChange } from "@/features/browser-profiles/profile-browser";
@@ -279,7 +281,8 @@ export class BrowserProfilesNew extends BtrixElement {
       return;
     }
 
-    const crawlerChannel = this.browserParams.crawlerChannel || "default";
+    const crawlerChannel =
+      this.browserParams.crawlerChannel || CrawlerChannelImage.Default;
     const proxyId = this.browserParams.proxyId;
     const data = await this.createBrowser({
       url,

frontend/src/pages/org/index.ts

@@ -100,6 +100,7 @@ const UUID_REGEX =
 @needLogin
 export class Org extends BtrixElement {
   @provide({ context: proxiesContext })
+  @state()
   proxies: ProxiesContext = null;
 
   @property({ type: Object })
@@ -450,11 +451,29 @@ export class Org extends BtrixElement {
             }
           }}
         ></btrix-file-uploader>
-        <btrix-new-browser-profile-dialog
-          ?open=${this.openDialogName === "browser-profile"}
-          @sl-hide=${() => (this.openDialogName = undefined)}
-        >
-        </btrix-new-browser-profile-dialog>
+
+        ${when(this.org, (org) =>
+          when(
+            this.proxies,
+            (proxies) => html`
+              <btrix-new-browser-profile-dialog
+                .proxyServers=${proxies.servers}
+                defaultProxyId=${ifDefined(
+                  org.crawlingDefaults?.proxyId ||
+                    proxies.default_proxy_id ||
+                    undefined,
+                )}
+                defaultCrawlerChannel=${ifDefined(
+                  org.crawlingDefaults?.crawlerChannel || undefined,
+                )}
+                ?open=${this.openDialogName === "browser-profile"}
+                @sl-hide=${() => (this.openDialogName = undefined)}
+              >
+              </btrix-new-browser-profile-dialog>
+            `,
+          ),
+        )}
+
         <btrix-collection-create-dialog
           ?open=${this.openDialogName === "collection"}
           @sl-hide=${() => (this.openDialogName = undefined)}

frontend/src/pages/org/workflows-new.ts

@@ -7,7 +7,12 @@ import { ifDefined } from "lit/directives/if-defined.js";
 import { when } from "lit/directives/when.js";
 import type { PartialDeep } from "type-fest";
 
-import { ScopeType, type Seed, type WorkflowParams } from "./types";
+import {
+  CrawlerChannelImage,
+  ScopeType,
+  type Seed,
+  type WorkflowParams,
+} from "./types";
 
 import { BtrixElement } from "@/classes/BtrixElement";
 import { pageNav, type Breadcrumb } from "@/layouts/pageHeader";
@@ -72,7 +77,7 @@ export class WorkflowsNew extends BtrixElement {
       jobType: "custom",
       browserWindows: this.appState.settings?.numBrowsersPerInstance || 1,
       autoAddCollections: [],
-      crawlerChannel: "default",
+      crawlerChannel: CrawlerChannelImage.Default,
       proxyId: null,
     };
   }

frontend/src/types/crawler.ts

@@ -19,6 +19,10 @@ export enum Behavior {
   SiteSpecific = "siteSpecific",
 }
 
+export enum CrawlerChannelImage {
+  Default = "default",
+}
+
 export type Seed = {
   url: string;
   scopeType: ScopeType | undefined;
@@ -200,7 +204,7 @@ export type Upload = ArchivedItemBase & {
   type: "upload";
   cid: undefined;
   resources: undefined;
-  crawlerChannel: "default";
+  crawlerChannel: CrawlerChannelImage.Default;
   image: null;
   manual: true;
 };