feat: Allow users to replace profile browser

frontend/src/components/ui/code/index.ts

@@ -3,6 +3,7 @@ import type { LanguageFn } from "highlight.js";
 import hljs from "highlight.js/lib/core";
 import { css, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
 import { html as staticHtml, unsafeStatic } from "lit/static-html.js";
 
 import { TailwindElement } from "@/classes/TailwindElement";
@@ -73,6 +74,9 @@ export class Code extends TailwindElement {
   @property({ type: Boolean })
   noWrap = false;
 
+  @property({ type: Boolean })
+  truncate = false;
+
   async connectedCallback() {
     const languageFn = (await langaugeFiles[this.language]).default;
 
@@ -95,7 +99,10 @@ export class Code extends TailwindElement {
       class=${clsx(
         tw`font-monospace m-0 text-neutral-600`,
         this.noWrap ? tw`whitespace-nowrap` : tw`whitespace-pre-wrap`,
+        this.truncate && tw`truncate`,
       )}
-    ><code>${staticHtml`${unsafeStatic(htmlStr)}`}</code></pre>`;
+    ><code title=${ifDefined(
+      this.truncate ? this.value : undefined,
+    )}>${staticHtml`${unsafeStatic(htmlStr)}`}</code></pre>`;
   }
 }

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

@@ -102,7 +102,7 @@ export class SelectCrawlerProxy extends BtrixElement {
           ? html`
               <div slot="help-text">
                 ${msg("Description:")}
-                <span class="font-monospace"
+                <span class="font-monospace leading-tight"
                   >${this.selectedProxy.description || ""}</span
                 >
               </div>
@@ -112,7 +112,7 @@ export class SelectCrawlerProxy extends BtrixElement {
           ? html`
               <div slot="help-text">
                 ${msg("Description:")}
-                <span class="font-monospace"
+                <span class="font-monospace leading-tight"
                   >${this.defaultProxy.description || ""}</span
                 >
               </div>

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

@@ -1,8 +1,8 @@
 import { consume } from "@lit/context";
 import { localized, msg } from "@lit/localize";
 import { type SlSelect } from "@shoelace-style/shoelace";
-import { html, nothing } from "lit";
-import { customElement, property } from "lit/decorators.js";
+import { html, nothing, type PropertyValues } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import capitalize from "lodash/fp/capitalize";
 
@@ -51,14 +51,23 @@ export class SelectCrawler extends LiteElement {
   @property({ type: String })
   crawlerChannel?: CrawlerChannel["id"];
 
+  @state()
+  public value: CrawlerChannel["id"] = "";
+
+  protected willUpdate(changedProperties: PropertyValues): void {
+    if (changedProperties.has("crawlerChannel")) {
+      this.value = this.crawlerChannel || "";
+    }
+  }
+
   render() {
     const selectedCrawler = this.getSelectedChannel();
 
     return html`
       <sl-select
         name="crawlerChannel"
         label=${msg("Crawler Release Channel")}
-        value=${selectedCrawler?.id || ""}
+        value=${this.value}
         placeholder=${msg("Latest")}
         size=${ifDefined(this.size)}
         hoist
@@ -77,7 +86,9 @@ export class SelectCrawler extends LiteElement {
           ${msg("Version:")}
           ${selectedCrawler
             ? html`
-                <span class="font-monospace">${selectedCrawler.image}</span>
+                <span class="font-monospace leading-tight"
+                  >${selectedCrawler.image}</span
+                >
               `
             : nothing}
         </div>
@@ -86,10 +97,12 @@ export class SelectCrawler extends LiteElement {
   }
 
   private getSelectedChannel() {
-    if (!this.crawlerChannels || !this.crawlerChannel) return null;
+    const channelId = this.value;
 
-    if (this.crawlerChannel) {
-      return this.crawlerChannels.find(({ id }) => id === this.crawlerChannel);
+    if (!this.crawlerChannels || !channelId) return null;
+
+    if (channelId) {
+      return this.crawlerChannels.find(({ id }) => id === channelId);
     }
 
     return (
@@ -102,9 +115,10 @@ export class SelectCrawler extends LiteElement {
   private onChange(e: Event) {
     this.stopProp(e);
 
-    const selectedCrawler = this.crawlerChannels?.find(
-      ({ id }) => id === (e.target as SlSelect).value,
-    );
+    const { value } = e.target as SlSelect;
+
+    this.value = value as string;
+    const selectedCrawler = this.getSelectedChannel();
 
     this.dispatchEvent(
       new CustomEvent<SelectCrawlerChangeDetail>("on-change", {

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

@@ -33,6 +33,9 @@ export class UrlInput extends SlInput {
   @property({ type: Boolean })
   hideHelpText = false;
 
+  // Store initial help text for when custom validity message is reset
+  #helpText?: string;
+
   constructor() {
     super();
 
@@ -42,9 +45,15 @@ export class UrlInput extends SlInput {
     this.addEventListener("sl-change", this.onChange);
   }
 
+  connectedCallback(): void {
+    super.connectedCallback();
+
+    this.#helpText = this.helpText;
+  }
+
   setCustomValidity(message: string): void {
     super.setCustomValidity(message);
-    if (!this.hideHelpText) this.helpText = message;
+    if (!this.hideHelpText) this.helpText = message || this.#helpText || "";
   }
 
   disconnectedCallback(): void {
@@ -57,7 +66,7 @@ export class UrlInput extends SlInput {
   private readonly onInput = () => {
     if (!this.checkValidity() && validURL(this.value)) {
       this.setCustomValidity("");
-      if (!this.hideHelpText) this.helpText = "";
+      if (!this.hideHelpText) this.helpText = this.#helpText || "";
     }
   };
 

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

@@ -63,17 +63,6 @@ export class NewBrowserProfileDialog extends BtrixElement {
   @queryAsync("#browserProfileForm")
   private readonly form!: Promise<HTMLFormElement>;
 
-  connectedCallback(): void {
-    super.connectedCallback();
-
-    if (this.org?.crawlingDefaults) {
-      if (!this.defaultProxyId)
-        this.defaultProxyId = this.org.crawlingDefaults.proxyId;
-      if (!this.defaultCrawlerChannel)
-        this.defaultCrawlerChannel = this.org.crawlingDefaults.crawlerChannel;
-    }
-  }
-
   protected willUpdate(changedProperties: PropertyValues): void {
     if (changedProperties.has("defaultProxyId") && this.defaultProxyId) {
       this.proxyId = this.proxyId || this.defaultProxyId;
@@ -91,9 +80,14 @@ export class NewBrowserProfileDialog extends BtrixElement {
   }
 
   render() {
+    const channels = this.crawlerChannels;
+    const proxyServers = this.proxyServers;
+    const showChannels = channels && channels.length > 1;
+    const showProxies = proxyServers?.length;
+
     return html`
       <btrix-dialog
-        .label=${msg("Configure New Profile")}
+        .label=${msg("New Browser Profile")}
         .open=${this.open}
         @sl-initial-focus=${async (e: CustomEvent) => {
           const nameInput = (await this.form).querySelector<SlInput>(
@@ -111,39 +105,17 @@ export class NewBrowserProfileDialog extends BtrixElement {
           @submit=${this.onSubmit}
         >
           <btrix-url-input
-            label=${msg("Site URL")}
+            label=${msg("Primary Site URL")}
             name="profile-url"
             placeholder=${msg("https://example.com")}
             value=${ifDefined(this.defaultUrl)}
+            help-text=${msg(
+              "The first page of the site to load, like a login page.",
+            )}
             required
           >
           </btrix-url-input>
 
-          ${this.crawlerChannels && this.crawlerChannels.length > 1
-            ? html`<div class="mt-4">
-                <btrix-select-crawler
-                  .crawlerChannel=${this.crawlerChannel}
-                  @on-change=${(e: SelectCrawlerChangeEvent) =>
-                    (this.crawlerChannel = e.detail.value!)}
-                ></btrix-select-crawler>
-              </div>`
-            : nothing}
-          ${this.proxyServers?.length
-            ? html`
-                <div class="mt-4">
-                  <btrix-select-crawler-proxy
-                    defaultProxyId=${ifDefined(
-                      this.defaultProxyId || undefined,
-                    )}
-                    .proxyServers=${this.proxyServers}
-                    .proxyId="${this.proxyId || ""}"
-                    @btrix-change=${(e: SelectCrawlerProxyChangeEvent) =>
-                      (this.proxyId = e.detail.value)}
-                  ></btrix-select-crawler-proxy>
-                </div>
-              `
-            : nothing}
-
           <sl-input
             class="mt-4"
             label=${msg("Profile Name")}
@@ -155,7 +127,41 @@ export class NewBrowserProfileDialog extends BtrixElement {
           >
           </sl-input>
 
-          <input class="invisible size-0" type="submit" />
+          ${when(
+            showChannels || showProxies,
+            () => html`
+              <btrix-details class="mt-4" open>
+                <span slot="title">${msg("Crawler Settings")}</span>
+
+                ${showChannels
+                  ? html`<div class="mt-4">
+                      <btrix-select-crawler
+                        .crawlerChannel=${this.crawlerChannel}
+                        @on-change=${(e: SelectCrawlerChangeEvent) =>
+                          (this.crawlerChannel = e.detail.value!)}
+                      ></btrix-select-crawler>
+                    </div>`
+                  : nothing}
+                ${showProxies
+                  ? html`
+                      <div class="mt-4">
+                        <btrix-select-crawler-proxy
+                          defaultProxyId=${ifDefined(
+                            this.defaultProxyId || undefined,
+                          )}
+                          .proxyServers=${proxyServers}
+                          .proxyId="${this.proxyId || ""}"
+                          @btrix-change=${(e: SelectCrawlerProxyChangeEvent) =>
+                            (this.proxyId = e.detail.value)}
+                        ></btrix-select-crawler-proxy>
+                      </div>
+                    `
+                  : nothing}
+              </btrix-details>
+            `,
+          )}
+
+          <input class="invisible block size-0" type="submit" />
         </form>
         <div slot="footer" class="flex justify-between">
           <sl-button
@@ -183,7 +189,7 @@ export class NewBrowserProfileDialog extends BtrixElement {
           html` <btrix-profile-browser-dialog
             .config=${{
               url,
-              name: this.name || new URL(url).origin.slice(0, 50),
+              name: this.name || new URL(url).hostname.slice(0, 50),
               crawlerChannel: this.crawlerChannel,
               proxyId: this.proxyId ?? undefined,
             }}