Fix language configuration UI (#388)

frontend/src/components/language-select.ts

@@ -1,5 +1,6 @@
 import { LitElement, html, css } from "lit";
 import { state, property } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
 import { localized, msg } from "@lit/localize";
 import sortBy from "lodash/fp/sortBy";
 import ISO6391 from "iso-639-1";
@@ -14,11 +15,12 @@ const languages = sortBy("name")(
 }>;
 
 /**
- * Choose language from dropdown
+ * Choose language from dropdown.
+ * Uses ISO 639-1 codes (2 letters representing macrolanguages.)
  *
  * Usage:
  * ```ts
- * <btrix-language-select @sl-select=${console.debug}>
+ * <btrix-language-select value=${defaultValue} @sl-select=${console.debug}>
  *   <span slot="label">Label</span>
  * </btrix-language-select>
  * ```
@@ -35,13 +37,21 @@ export class LanguageSelect extends LitElement {
     }
   `;
 
+  @property({ type: String })
+  value?: LanguageCode;
+
   @property({ type: Boolean })
   hoist = false;
 
   render() {
     return html`
-      <sl-select clearable placeholder=${msg("Default")} ?hoist=${this.hoist}>
-        <div slot="label"><slot name="label"></slot></div>
+      <sl-select
+        clearable
+        placeholder=${msg("Browser Default")}
+        value=${ifDefined(this.value)}
+        ?hoist=${this.hoist}
+      >
+        <div slot="label"><slot name="label">${msg("Language")}</slot></div>
         ${languages.map(
           ({ code, name, nativeName }) => html`
             <sl-menu-item value=${code}>

frontend/src/pages/archive/crawl-templates-detail.ts

@@ -104,6 +104,7 @@ export class CrawlTemplatesDetail extends LiteElement {
         this.isConfigCodeView = true;
       }
       this.configCode = jsonToYaml(this.crawlTemplate.config);
+      this.browserLanguage = this.crawlTemplate.config.lang;
       if (this.crawlTemplate.config.exclude?.length) {
         this.exclusions = this.crawlTemplate.config.exclude;
       }
@@ -725,6 +726,7 @@ export class CrawlTemplatesDetail extends LiteElement {
           </div>
           <div>
             <btrix-language-select
+              .value=${this.browserLanguage}
               @sl-select=${(e: CustomEvent) =>
                 (this.browserLanguage = e.detail.item.value)}
               @sl-clear=${() => (this.browserLanguage = null)}

frontend/src/pages/archive/crawl-templates-new.ts

@@ -27,7 +27,6 @@ type NewCrawlTemplate = {
   scale: number;
   config: CrawlConfig;
   profileid: string | null;
-  lang: string | null;
 };
 
 export type InitialCrawlTemplate = Pick<
@@ -141,6 +140,15 @@ export class CrawlTemplatesNew extends LiteElement {
       this.exclusions = this.initialCrawlTemplate.config.exclude;
     }
     this.browserProfileId = this.initialCrawlTemplate.profileid;
+    // Default to current user browser language
+    const browserLanguage = window.navigator.language;
+    if (browserLanguage) {
+      this.browserLanguage = browserLanguage.slice(
+        0,
+        browserLanguage.indexOf("-")
+      );
+    }
+
     super.connectedCallback();
   }
 
@@ -395,6 +403,7 @@ export class CrawlTemplatesNew extends LiteElement {
         </div>
         <div class="col-span-1">
           <btrix-language-select
+            .value=${this.browserLanguage}
             @sl-select=${(e: CustomEvent) =>
               (this.browserLanguage = e.detail.item.value)}
             @sl-clear=${() => (this.browserLanguage = null)}
@@ -553,7 +562,6 @@ export class CrawlTemplatesNew extends LiteElement {
       crawlTimeout: crawlTimeoutMinutes ? +crawlTimeoutMinutes * 60 : 0,
       scale: +scale,
       profileid: this.browserProfileId,
-      lang: this.browserLanguage || null,
     };
 
     if (this.isConfigCodeView) {
@@ -565,6 +573,7 @@ export class CrawlTemplatesNew extends LiteElement {
         limit: pageLimit ? +pageLimit : 0,
         extraHops: formData.get("extraHopsOne") ? 1 : 0,
         exclude: trimExclusions(this.exclusions),
+        lang: this.browserLanguage || null,
       };
     }