Merge pull request #3024 from webrecorder/frontend-browser-profile-ui-enhancements

Resolves #2936

Author: SuaYoo

frontend/src/assets/icons/window-gear.svg

@@ -13,7 +13,9 @@ export type BadgeVariant =
   | "primary"
   | "cyan"
   | "blue"
-  | "high-contrast";
+  | "high-contrast"
+  | "text"
+  | "text-neutral";
 
 /**
  * Show numeric value in a label
@@ -64,6 +66,8 @@ export class Badge extends TailwindElement {
                   primary: tw`bg-white text-primary ring-primary`,
                   cyan: tw`bg-cyan-50 text-cyan-600 ring-cyan-600`,
                   blue: tw`bg-blue-50 text-blue-600 ring-blue-600`,
+                  text: tw`text-blue-500 ring-blue-600`,
+                  "text-neutral": tw`text-neutral-500 ring-neutral-600`,
                 }[this.variant],
               ]
             : {
@@ -75,6 +79,8 @@ export class Badge extends TailwindElement {
                 primary: tw`bg-primary text-neutral-0`,
                 cyan: tw`bg-cyan-50 text-cyan-600`,
                 blue: tw`bg-blue-50 text-blue-600`,
+                text: tw`text-blue-500`,
+                "text-neutral": tw`text-neutral-500`,
               }[this.variant],
           this.pill
             ? [

frontend/src/components/ui/badge.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";
@@ -52,11 +53,11 @@ export class Code extends TailwindElement {
     }
 
     .hljs-path {
-      color: var(--sl-color-blue-900);
+      color: var(--sl-color-sky-600);
     }
 
     .hljs-domain {
-      color: var(--sl-color-blue-600);
+      color: var(--sl-color-sky-700);
     }
 
     .hljs-string {
@@ -71,7 +72,10 @@ export class Code extends TailwindElement {
   language: Language = Language.XML;
 
   @property({ type: Boolean })
-  wrap = true;
+  noWrap = false;
+
+  @property({ type: Boolean })
+  truncate = false;
 
   async connectedCallback() {
     const languageFn = (await langaugeFiles[this.language]).default;
@@ -94,8 +98,11 @@ export class Code extends TailwindElement {
       part="base"
       class=${clsx(
         tw`font-monospace m-0 text-neutral-600`,
-        this.wrap ? tw`whitespace-pre-wrap` : tw`whitespace-nowrap`,
+        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/code/index.ts

@@ -1,3 +1,4 @@
+import { consume } from "@lit/context";
 import { localized, msg, str } from "@lit/localize";
 import ISO6391 from "iso-639-1";
 import { html, nothing, type TemplateResult } from "lit";
@@ -6,6 +7,10 @@ import { when } from "lit/directives/when.js";
 import capitalize from "lodash/fp/capitalize";
 
 import { BtrixElement } from "@/classes/BtrixElement";
+import {
+  orgProxiesContext,
+  type OrgProxiesContext,
+} from "@/context/org-proxies";
 import { none, notSpecified } from "@/layouts/empty";
 import {
   Behavior,
@@ -36,6 +41,9 @@ import { getServerDefaults } from "@/utils/workflow";
 @customElement("btrix-config-details")
 @localized()
 export class ConfigDetails extends BtrixElement {
+  @consume({ context: orgProxiesContext, subscribe: true })
+  private readonly orgProxies?: OrgProxiesContext;
+
   @property({ type: Object })
   crawlConfig?: CrawlConfig;
 
@@ -235,29 +243,37 @@ export class ConfigDetails extends BtrixElement {
             msg("Browser Profile"),
             when(
               crawlConfig?.profileid,
-              () =>
-                html`<a
-                  class="text-blue-500 hover:text-blue-600"
+              () => html`
+                <btrix-link
                   href=${`${this.navigate.orgBasePath}/browser-profiles/profile/${
                     crawlConfig!.profileid
                   }`}
-                  @click=${this.navigate.link}
+                  hideIcon
                 >
                   ${crawlConfig?.profileName}
-                </a>`,
+                </btrix-link>
+              `,
               () =>
                 crawlConfig?.profileName ||
                 html`<span class="text-neutral-400"
                   >${msg("No custom profile")}</span
                 >`,
             ),
           )}
+          ${crawlConfig?.proxyId
+            ? this.renderSetting(
+                msg("Crawler Proxy Server"),
+                this.orgProxies?.servers.find(
+                  ({ id }) => id === crawlConfig.proxyId,
+                )?.label || capitalize(crawlConfig.proxyId),
+              )
+            : nothing}
           ${this.renderSetting(
             msg("Browser Windows"),
             crawlConfig?.browserWindows ? `${crawlConfig.browserWindows}` : "",
           )}
           ${this.renderSetting(
-            msg("Crawler Channel (Exact Crawler Version)"),
+            `${msg("Crawler Channel")} ${crawlConfig?.image ? msg("(Exact Crawler Version)") : ""}`.trim(),
             capitalize(
               crawlConfig?.crawlerChannel || CrawlerChannelImage.Default,
             ) + (crawlConfig?.image ? ` (${crawlConfig.image})` : ""),
@@ -284,9 +300,6 @@ export class ConfigDetails extends BtrixElement {
                 ISO6391.getName(seedsConfig.lang),
               )
             : nothing}
-          ${crawlConfig?.proxyId
-            ? this.renderSetting(msg("Proxy"), capitalize(crawlConfig.proxyId))
-            : nothing}
         `,
       })}
       ${this.renderSection({

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

@@ -127,6 +127,7 @@ export class DescList extends LitElement {
         vertical: !this.horizontal,
         horizontal: this.horizontal,
       })}
+      part="base"
     >
       <slot></slot>
     </dl>`;

frontend/src/components/ui/desc-list.ts

@@ -10,6 +10,10 @@ import {
  * <sl-dialog> with custom CSS
  *
  * Usage: see https://shoelace.style/components/dialog
+ *
+ * @attr label
+ * @attr open
+ * @attr noHeader
  */
 @customElement("btrix-dialog")
 export class Dialog extends SlDialog {
@@ -27,8 +31,7 @@ export class Dialog extends SlDialog {
       }
 
       .dialog__header {
-        background-color: var(--sl-color-neutral-50);
-        border-bottom: 1px solid var(--sl-color-neutral-100);
+        border-bottom: 1px solid var(--sl-panel-border-color);
       }
 
       .dialog__title {
@@ -50,7 +53,7 @@ export class Dialog extends SlDialog {
       .dialog__footer {
         padding-top: var(--sl-spacing-small);
         padding-bottom: var(--sl-spacing-small);
-        border-top: 1px solid var(--sl-color-neutral-100);
+        border-top: 1px solid var(--sl-panel-border-color);
       }
     `,
   ];

frontend/src/components/ui/dialog.ts

@@ -16,6 +16,7 @@ import("./combobox");
 import("./config-details");
 import("./copy-button");
 import("./copy-field");
+import("./tag-container");
 import("./data-grid");
 import("./details");
 import("./file-input");
@@ -41,7 +42,8 @@ import("./select-crawler-proxy");
 import("./select-crawler");
 import("./syntax-input");
 import("./table");
-import("./tag-input");
 import("./tag");
+import("./tag-filter");
+import("./tag-input");
 import("./time-input");
 import("./user-language-select");

frontend/src/components/ui/index.ts

@@ -1,5 +1,5 @@
 import clsx from "clsx";
-import { html } from "lit";
+import { html, nothing } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 
@@ -19,13 +19,16 @@ export class Link extends BtrixElement {
   @property({ type: String })
   variant: "primary" | "neutral" = "neutral";
 
+  @property({ type: Boolean })
+  hideIcon = false;
+
   render() {
     if (!this.href) return;
 
     return html`
       <a
         class=${clsx(
-          "group inline-flex items-center gap-1 transition-colors",
+          "group inline-flex items-center gap-1 transition-colors duration-fast",
           {
             primary: "text-primary-500 hover:text-primary-600",
             neutral: "text-blue-500 hover:text-blue-600",
@@ -39,12 +42,16 @@ export class Link extends BtrixElement {
           : this.navigate.link}
       >
         <slot></slot>
-        <sl-icon
-          slot="suffix"
-          name="arrow-right"
-          class="size-4 transition-transform group-hover:translate-x-1"
-        ></sl-icon
-      ></a>
+        ${this.hideIcon
+          ? nothing
+          : html`
+              <sl-icon
+                slot="suffix"
+                name="arrow-right"
+                class="size-4 transition-transform duration-fast group-hover:translate-x-1"
+              ></sl-icon>
+            `}
+      </a>
     `;
   }
 }

frontend/src/components/ui/link.ts

@@ -1,6 +1,6 @@
 import { localized, msg } from "@lit/localize";
 import type { SlSelect } from "@shoelace-style/shoelace";
-import { html } from "lit";
+import { html, type PropertyValues } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 
@@ -40,15 +40,30 @@ export class SelectCrawlerProxy extends BtrixElement {
   @property({ type: String })
   defaultProxyId: string | null = null;
 
+  @property({ type: String })
+  profileProxyId?: string | null = null;
+
   @property({ type: Array })
   proxyServers: Proxy[] = [];
 
   @property({ type: String })
   proxyId: string | null = null;
 
+  @property({ type: String })
+  label?: string;
+
   @property({ type: String })
   size?: SlSelect["size"];
 
+  @property({ type: String })
+  placeholder?: string;
+
+  @property({ type: String })
+  helpText?: string;
+
+  @property({ type: Boolean })
+  disabled?: boolean;
+
   @state()
   private selectedProxy?: Proxy;
 
@@ -59,6 +74,18 @@ export class SelectCrawlerProxy extends BtrixElement {
     return this.selectedProxy?.id || "";
   }
 
+  protected willUpdate(changedProperties: PropertyValues): void {
+    if (changedProperties.has("proxyId")) {
+      if (this.proxyId) {
+        this.selectedProxy = this.proxyServers.find(
+          ({ id }) => id === this.proxyId,
+        );
+      } else if (changedProperties.get("proxyId")) {
+        this.selectedProxy = undefined;
+      }
+    }
+  }
+
   protected firstUpdated() {
     void this.initProxies();
   }
@@ -75,18 +102,21 @@ export class SelectCrawlerProxy extends BtrixElement {
     return html`
       <sl-select
         name="proxyId"
-        label=${msg("Crawler Proxy Server")}
+        label=${this.label || msg("Crawler Proxy Server")}
         value=${this.selectedProxy?.id || ""}
         placeholder=${this.defaultProxy
           ? `${msg(`Default Proxy:`)} ${this.defaultProxy.label}`
           : msg("No Proxy")}
         hoist
         clearable
+        ?disabled=${this.disabled ?? Boolean(this.profileProxyId)}
         size=${ifDefined(this.size)}
         @sl-change=${this.onChange}
         @sl-hide=${this.stopProp}
         @sl-after-hide=${this.stopProp}
       >
+        <slot name="prefix" slot="prefix"></slot>
+        <slot name="suffix" slot="suffix"></slot>
         ${this.proxyServers.map(
           (server) =>
             html` <sl-option value=${server.id}>
@@ -102,7 +132,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,12 +142,13 @@ 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>
             `
           : ``}
+        <slot name="help-text" slot="help-text"></slot>
       </sl-select>
     `;
   }