fix: Improve crawler channel and proxy render performance (#2955)

- Improves fetch performance for crawler proxies and channels, fixing
`crawler-channels` being called twice wherever channel selector is
rendered
- Fixes empty space when only single channel is available
- Hides `(Exact Crawler Version)` text when version is not available

Author: SuaYoo

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

@@ -257,7 +257,7 @@ export class ConfigDetails extends BtrixElement {
             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})` : ""),

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

@@ -1,10 +1,15 @@
+import { consume } from "@lit/context";
 import { localized, msg } from "@lit/localize";
 import { type SlSelect } from "@shoelace-style/shoelace";
-import { html, type PropertyValues } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
+import { html, nothing } from "lit";
+import { customElement, property } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import capitalize from "lodash/fp/capitalize";
 
+import {
+  orgCrawlerChannelsContext,
+  type OrgCrawlerChannelsContext,
+} from "@/context/org-crawler-channels";
 import { CrawlerChannelImage, type CrawlerChannel } from "@/pages/org/types";
 import LiteElement from "@/utils/LiteElement";
 
@@ -20,167 +25,96 @@ type SelectCrawlerUpdateDetail = {
 
 export type SelectCrawlerUpdateEvent = CustomEvent<SelectCrawlerUpdateDetail>;
 
-type CrawlerChannelsAPIResponse = {
-  channels: CrawlerChannel[];
-};
-
 /**
  * Crawler channel select dropdown
  *
+ * @TODO Convert to form control
+ *
  * Usage example:
  * ```ts
  * <btrix-select-crawler
  *   on-change=${({value}) => selectedCrawler = value}
  * ></btrix-select-crawler>
  * ```
  *
- * @event on-change
+ * @fires on-change
  */
 @customElement("btrix-select-crawler")
 @localized()
 export class SelectCrawler extends LiteElement {
+  @consume({ context: orgCrawlerChannelsContext, subscribe: true })
+  private readonly crawlerChannels?: OrgCrawlerChannelsContext;
+
   @property({ type: String })
   size?: SlSelect["size"];
 
   @property({ type: String })
-  crawlerChannel?: string;
-
-  @state()
-  private selectedCrawler?: CrawlerChannel;
-
-  @state()
-  private crawlerChannels?: CrawlerChannel[];
-
-  willUpdate(changedProperties: PropertyValues<this>) {
-    if (changedProperties.has("crawlerChannel")) {
-      void this.updateSelectedCrawlerChannel();
-    }
-  }
-
-  protected firstUpdated() {
-    void this.updateSelectedCrawlerChannel();
-  }
+  crawlerChannel?: CrawlerChannel["id"];
 
   render() {
-    if (this.crawlerChannels && this.crawlerChannels.length < 2) {
-      return html``;
-    }
+    const selectedCrawler = this.getSelectedChannel();
 
     return html`
       <sl-select
         name="crawlerChannel"
         label=${msg("Crawler Release Channel")}
-        value=${this.selectedCrawler?.id || ""}
+        value=${selectedCrawler?.id || ""}
         placeholder=${msg("Latest")}
         size=${ifDefined(this.size)}
         hoist
         @sl-change=${this.onChange}
-        @sl-focus=${() => {
-          // Refetch to keep list up to date
-          void this.fetchCrawlerChannels();
-        }}
         @sl-hide=${this.stopProp}
         @sl-after-hide=${this.stopProp}
+        ?disabled=${!this.crawlerChannels || this.crawlerChannels.length === 1}
       >
         ${this.crawlerChannels?.map(
           (crawler) =>
             html` <sl-option value=${crawler.id}>
               ${capitalize(crawler.id)}
             </sl-option>`,
         )}
-        ${this.selectedCrawler
-          ? html`
-              <div slot="help-text">
-                ${msg("Version:")}
-                <span class="font-monospace"
-                  >${this.selectedCrawler.image}</span
-                >
-              </div>
-            `
-          : ``}
+        <div slot="help-text">
+          ${msg("Version:")}
+          ${selectedCrawler
+            ? html`
+                <span class="font-monospace">${selectedCrawler.image}</span>
+              `
+            : nothing}
+        </div>
       </sl-select>
     `;
   }
 
-  private onChange(e: Event) {
-    this.stopProp(e);
+  private getSelectedChannel() {
+    if (!this.crawlerChannels || !this.crawlerChannel) return null;
 
-    this.selectedCrawler = this.crawlerChannels?.find(
-      ({ id }) => id === (e.target as SlSelect).value,
-    );
+    if (this.crawlerChannel) {
+      return this.crawlerChannels.find(({ id }) => id === this.crawlerChannel);
+    }
 
-    this.dispatchEvent(
-      new CustomEvent<SelectCrawlerChangeDetail>("on-change", {
-        detail: {
-          value: this.selectedCrawler?.id,
-        },
-      }),
+    return (
+      this.crawlerChannels.find(
+        ({ id }) => id === CrawlerChannelImage.Default,
+      ) ?? null
     );
   }
 
-  private async updateSelectedCrawlerChannel() {
-    await this.fetchCrawlerChannels();
-    await this.updateComplete;
-
-    if (!this.crawlerChannels) return;
-
-    if (this.crawlerChannel && !this.selectedCrawler) {
-      this.selectedCrawler = this.crawlerChannels.find(
-        ({ id }) => id === this.crawlerChannel,
-      );
-    }
-
-    if (!this.selectedCrawler) {
-      this.crawlerChannel = CrawlerChannelImage.Default;
-      this.dispatchEvent(
-        new CustomEvent("on-change", {
-          detail: {
-            value: CrawlerChannelImage.Default,
-          },
-        }),
-      );
-      this.selectedCrawler = this.crawlerChannels.find(
-        ({ id }) => id === this.crawlerChannel,
-      );
-    }
+  private onChange(e: Event) {
+    this.stopProp(e);
 
-    await this.updateComplete;
+    const selectedCrawler = this.crawlerChannels?.find(
+      ({ id }) => id === (e.target as SlSelect).value,
+    );
 
     this.dispatchEvent(
-      new CustomEvent<SelectCrawlerUpdateDetail>("on-update", {
+      new CustomEvent<SelectCrawlerChangeDetail>("on-change", {
         detail: {
-          show: this.crawlerChannels.length > 1,
+          value: selectedCrawler?.id,
         },
       }),
     );
   }
 
-  /**
-   * Fetch crawler channels and update internal state
-   */
-  private async fetchCrawlerChannels(): Promise<void> {
-    try {
-      const channels = await this.getCrawlerChannels();
-      this.crawlerChannels = channels;
-    } catch (e) {
-      this.notify({
-        message: msg("Sorry, couldn't retrieve crawler channels at this time."),
-        variant: "danger",
-        icon: "exclamation-octagon",
-        id: "crawler-channel-retrieve-error",
-      });
-    }
-  }
-
-  private async getCrawlerChannels(): Promise<CrawlerChannel[]> {
-    const data: CrawlerChannelsAPIResponse =
-      await this.apiFetch<CrawlerChannelsAPIResponse>(
-        `/orgs/${this.orgId}/crawlconfigs/crawler-channels`,
-      );
-
-    return data.channels;
-  }
-
   /**
    * Stop propgation of sl-select events.
    * Prevents bug where sl-dialog closes when dropdown closes

frontend/src/context/org-crawler-channels.ts

@@ -0,0 +1,8 @@
+import { createContext } from "@lit/context";
+
+import type { CrawlerChannel } from "@/types/crawler";
+
+export type OrgCrawlerChannelsContext = CrawlerChannel[] | null;
+
+export const orgCrawlerChannelsContext =
+  createContext<OrgCrawlerChannelsContext>("org-crawler-channels");

frontend/src/context/org-proxies.ts

@@ -0,0 +1,8 @@
+import { createContext } from "@lit/context";
+
+import type { ProxiesAPIResponse } from "@/types/crawler";
+
+export type OrgProxiesContext = ProxiesAPIResponse | null;
+
+export const orgProxiesContext =
+  createContext<OrgProxiesContext>("org-proxies");

frontend/src/context/org.ts

@@ -15,7 +15,11 @@ 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 { CrawlerChannelImage, type Proxy } from "@/types/crawler";
+import {
+  CrawlerChannelImage,
+  type CrawlerChannel,
+  type Proxy,
+} from "@/types/crawler";
 
 @customElement("btrix-new-browser-profile-dialog")
 @localized()
@@ -29,14 +33,17 @@ export class NewBrowserProfileDialog extends BtrixElement {
   @property({ type: Array })
   proxyServers?: Proxy[];
 
+  @property({ type: Array })
+  crawlerChannels?: CrawlerChannel[];
+
   @property({ type: Boolean })
   open = false;
 
   @state()
   private isSubmitting = false;
 
   @state()
-  private crawlerChannel: string = CrawlerChannelImage.Default;
+  private crawlerChannel: CrawlerChannel["id"] = CrawlerChannelImage.Default;
 
   @state()
   private proxyId: string | null = null;
@@ -57,7 +64,7 @@ export class NewBrowserProfileDialog extends BtrixElement {
       this.defaultCrawlerChannel
     ) {
       this.crawlerChannel =
-        (this.crawlerChannel !== (CrawlerChannelImage.Default as string) &&
+        (this.crawlerChannel !== CrawlerChannelImage.Default &&
           this.crawlerChannel) ||
         this.defaultCrawlerChannel;
     }
@@ -91,13 +98,15 @@ export class NewBrowserProfileDialog extends BtrixElement {
         >
         </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.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">