disable proxy selection

Author: SuaYoo

frontend/src/components/ui/select-crawler-proxy.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";
 
@@ -49,6 +49,12 @@ export class SelectCrawlerProxy extends BtrixElement {
   @property({ type: String })
   size?: SlSelect["size"];
 
+  @property({ type: String })
+  helpText?: string;
+
+  @property({ type: Boolean })
+  disabled?: boolean;
+
   @state()
   private selectedProxy?: Proxy;
 
@@ -59,6 +65,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();
   }
@@ -82,6 +100,7 @@ export class SelectCrawlerProxy extends BtrixElement {
           : msg("No Proxy")}
         hoist
         clearable
+        ?disabled=${this.disabled}
         size=${ifDefined(this.size)}
         @sl-change=${this.onChange}
         @sl-hide=${this.stopProp}

frontend/src/controllers/localize.ts

@@ -55,7 +55,11 @@ export class LocalizeController extends SlLocalizeController {
               })
             : seconds > 60
               ? html`<sl-relative-time
-                  class=${ifDefined(capitalize ? tw`capitalize` : undefined)}
+                  class=${ifDefined(
+                    capitalize
+                      ? tw`inline-block first-letter:capitalize`
+                      : undefined,
+                  )}
                   sync
                   date=${dateStr}
                 ></sl-relative-time>`

frontend/src/features/browser-profiles/select-browser-profile.ts

@@ -1,5 +1,9 @@
 import { localized, msg } from "@lit/localize";
-import type { SlDrawer, SlSelect } from "@shoelace-style/shoelace";
+import type {
+  SlChangeEvent,
+  SlDrawer,
+  SlSelect,
+} from "@shoelace-style/shoelace";
 import { html, nothing, type PropertyValues } from "lit";
 import { customElement, property, query, state } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
@@ -119,6 +123,7 @@ export class SelectBrowserProfile extends BtrixElement {
                   ${this.localize.relativeDate(
                     this.selectedProfile.modified ||
                       this.selectedProfile.created,
+                    { capitalize: true },
                   )}
                 </span>
               `
@@ -188,6 +193,7 @@ export class SelectBrowserProfile extends BtrixElement {
             <btrix-desc-list-item label=${msg("Last Modified")}>
               ${this.localize.relativeDate(
                 modifiedByAnyDate || profile.created,
+                { capitalize: true },
               )}
             </btrix-desc-list-item>
           </btrix-desc-list>
@@ -279,7 +285,7 @@ export class SelectBrowserProfile extends BtrixElement {
     `;
   }
 
-  private async onChange(e: Event) {
+  private async onChange(e: SlChangeEvent) {
     this.selectedProfile = this.browserProfiles?.find(
       ({ id }) => id === (e.target as SlSelect | null)?.value,
     );

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

@@ -1987,10 +1987,14 @@ https://archiveweb.page/images/${"logo.svg"}`}
       ${inputCol(html`
         <btrix-select-browser-profile
           .profileId=${this.formState.browserProfile?.id}
-          @on-change=${(e: SelectBrowserProfileChangeEvent) =>
+          @on-change=${(e: SelectBrowserProfileChangeEvent) => {
+            const profile = e.detail.value;
+
             this.updateFormState({
-              browserProfile: e.detail.value ?? null,
-            })}
+              browserProfile: profile ?? null,
+              proxyId: profile?.proxyId ?? null,
+            });
+          }}
         ></btrix-select-browser-profile>
       `)}
       ${this.renderHelpTextCol(infoTextFor["browserProfile"])}
@@ -2003,11 +2007,24 @@ https://archiveweb.page/images/${"logo.svg"}`}
                 )}
                 .proxyServers=${proxies.servers}
                 .proxyId="${this.formState.proxyId || ""}"
+                ?disabled=${!!this.formState.browserProfile}
                 @btrix-change=${(e: SelectCrawlerProxyChangeEvent) =>
                   this.updateFormState({
                     proxyId: e.detail.value,
                   })}
               ></btrix-select-crawler-proxy>
+              ${when(
+                this.formState.browserProfile,
+                () => html`
+                  <div class="form-help-text">
+                    <sl-icon
+                      class="mr-0.5 align-[-.175em]"
+                      name="info-circle"
+                    ></sl-icon>
+                    ${msg("Using proxy from browser profile.")}
+                  </div>
+                `,
+              )}
             `),
             this.renderHelpTextCol(infoTextFor["proxyId"]),
           ]

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

@@ -578,7 +578,7 @@ export class BrowserProfilesList extends BtrixElement {
             : nothing}
         </btrix-table-cell>
         <btrix-table-cell>
-          ${this.localize.relativeDate(modifiedByAnyDate)}
+          ${this.localize.relativeDate(modifiedByAnyDate, { capitalize: true })}
         </btrix-table-cell>
         <btrix-table-cell class="p-0">
           ${this.renderActions(data)}

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

@@ -468,7 +468,9 @@ export class BrowserProfilesProfilePage extends BtrixElement {
           </btrix-desc-list-item>
           <btrix-desc-list-item label=${msg("Last Modified")}>
             ${this.renderDetail((profile) =>
-              this.localize.relativeDate(modifiedByAnyDate || profile.created),
+              this.localize.relativeDate(modifiedByAnyDate || profile.created, {
+                capitalize: true,
+              }),
             )}
           </btrix-desc-list-item>
           <btrix-desc-list-item label=${msg("Last Modified By")}>