Revert "Add language selector" (#16247)

Revert "Add language selector (#16242)"

This reverts commit d89ac0f30ddb349f553d788c22077c958b31f645.

src/components/ha-language-picker.ts

@@ -1,132 +0,0 @@
-import {
-  css,
-  CSSResultGroup,
-  html,
-  LitElement,
-  PropertyValues,
-  TemplateResult,
-} from "lit";
-import { customElement, property, state } from "lit/decorators";
-import memoizeOne from "memoize-one";
-import { fireEvent } from "../common/dom/fire_event";
-import { stopPropagation } from "../common/dom/stop_propagation";
-import { caseInsensitiveStringCompare } from "../common/string/compare";
-import { HomeAssistant } from "../types";
-import "./ha-list-item";
-import "./ha-select";
-import type { HaSelect } from "./ha-select";
-
-@customElement("ha-language-picker")
-export class HaLanguagePicker extends LitElement {
-  @property() public value?: string;
-
-  @property() public label?: string;
-
-  @property() public supportedLanguages?: string[];
-
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @property({ type: Boolean, reflect: true }) public disabled = false;
-
-  @property({ type: Boolean }) public required = false;
-
-  @property({ type: Boolean }) public nativeName = false;
-
-  @state() _defaultLanguages: string[] = [];
-
-  protected firstUpdated(changedProps: PropertyValues) {
-    super.firstUpdated(changedProps);
-    this._computeDefaultLanguageOptions();
-  }
-
-  private _getLanguagesOptions = memoizeOne(
-    (languages: string[], language: string, nativeName: boolean) => {
-      let options: { label: string; value: string }[] = [];
-
-      if (nativeName) {
-        const translations = this.hass.translationMetadata.translations;
-        options = languages.map((lang) => ({
-          value: lang,
-          label: translations[lang]?.nativeName ?? lang,
-        }));
-      } else {
-        const languageDisplayNames =
-          Intl && "DisplayNames" in Intl
-            ? new Intl.DisplayNames(language, {
-                type: "language",
-                fallback: "code",
-              })
-            : undefined;
-
-        options = languages.map((lang) => ({
-          value: lang,
-          label: languageDisplayNames ? languageDisplayNames.of(lang)! : lang,
-        }));
-      }
-
-      options.sort((a, b) =>
-        caseInsensitiveStringCompare(a.label, b.label, language)
-      );
-      return options;
-    }
-  );
-
-  private _computeDefaultLanguageOptions() {
-    if (!this.hass.translationMetadata?.translations) {
-      return;
-    }
-
-    this._defaultLanguages = Object.keys(
-      this.hass.translationMetadata.translations
-    );
-  }
-
-  protected render(): TemplateResult {
-    const value = this.value;
-
-    const languageOptions = this._getLanguagesOptions(
-      this.supportedLanguages ?? this._defaultLanguages,
-      this.hass.locale.language,
-      this.nativeName
-    );
-
-    return html`
-      <ha-select
-        .label=${this.label}
-        .value=${value}
-        .required=${this.required}
-        .disabled=${this.disabled}
-        @selected=${this._changed}
-        @closed=${stopPropagation}
-        fixedMenuPosition
-        naturalMenuWidth
-      >
-        ${languageOptions.map(
-          (option) => html`
-            <ha-list-item .value=${option.value}>${option.label}</ha-list-item>
-          `
-        )}
-      </ha-select>
-    `;
-  }
-
-  static get styles(): CSSResultGroup {
-    return css`
-      ha-select {
-        width: 100%;
-      }
-    `;
-  }
-
-  private _changed(ev): void {
-    const target = ev.target as HaSelect;
-    this.value = target.value;
-    fireEvent(this, "value-changed", { value: this.value });
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-language-picker": HaLanguagePicker;
-  }
-}

src/components/ha-selector/ha-selector-language.ts

@@ -1,48 +0,0 @@
-import { css, html, LitElement } from "lit";
-import { customElement, property } from "lit/decorators";
-import { LanguageSelector } from "../../data/selector";
-import { HomeAssistant } from "../../types";
-import "../ha-language-picker";
-
-@customElement("ha-selector-language")
-export class HaLanguageSelector extends LitElement {
-  @property() public hass!: HomeAssistant;
-
-  @property() public selector!: LanguageSelector;
-
-  @property() public value?: any;
-
-  @property() public label?: string;
-
-  @property() public helper?: string;
-
-  @property({ type: Boolean }) public disabled = false;
-
-  @property({ type: Boolean }) public required = true;
-
-  protected render() {
-    return html`
-      <ha-language-picker
-        .hass=${this.hass}
-        .value=${this.value}
-        .label=${this.label}
-        .helper=${this.helper}
-        .supportedLanguages=${this.selector.language?.supported_languages}
-        .disabled=${this.disabled}
-        .required=${this.required}
-      ></ha-language-picker>
-    `;
-  }
-
-  static styles = css`
-    ha-language-picker {
-      width: 100%;
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-selector-language": HaLanguageSelector;
-  }
-}

src/components/ha-selector/ha-selector.ts

@@ -26,7 +26,6 @@ const LOAD_ELEMENTS = {
   entity: () => import("./ha-selector-entity"),
   statistic: () => import("./ha-selector-statistic"),
   file: () => import("./ha-selector-file"),
-  language: () => import("./ha-selector-language"),
   navigation: () => import("./ha-selector-navigation"),
   number: () => import("./ha-selector-number"),
   object: () => import("./ha-selector-object"),

src/data/assist_pipeline.ts

@@ -296,8 +296,3 @@ export const deleteAssistPipeline = (hass: HomeAssistant, pipelineId: string) =>
     type: "assist_pipeline/pipeline/delete",
     pipeline_id: pipelineId,
   });
-
-export const fetchAssistPipelineLanguages = (hass: HomeAssistant) =>
-  hass.callWS<{ languages: string[] }>({
-    type: "assist_pipeline/language/list",
-  });

src/data/selector.ts

@@ -26,7 +26,6 @@ export type Selector =
   | LegacyEntitySelector
   | FileSelector
   | IconSelector
-  | LanguageSelector
   | LocationSelector
   | MediaSelector
   | NavigationSelector
@@ -210,10 +209,6 @@ export interface IconSelector {
   } | null;
 }
 
-export interface LanguageSelector {
-  language: { supported_languages?: string[] } | null;
-}
-
 export interface LocationSelector {
   location: { radius?: boolean; icon?: string } | null;
 }

src/panels/config/core/ha-config-section-general.ts

@@ -6,16 +6,13 @@ import memoizeOne from "memoize-one";
 import { UNIT_C } from "../../../common/const";
 import { stopPropagation } from "../../../common/dom/stop_propagation";
 import { navigate } from "../../../common/navigate";
+import { caseInsensitiveStringCompare } from "../../../common/string/compare";
 import "../../../components/buttons/ha-progress-button";
 import type { HaProgressButton } from "../../../components/buttons/ha-progress-button";
 import { getCountryOptions } from "../../../components/country-datalist";
 import { getCurrencyOptions } from "../../../components/currency-datalist";
-import "../../../components/ha-alert";
 import "../../../components/ha-card";
-import "../../../components/ha-checkbox";
-import type { HaCheckbox } from "../../../components/ha-checkbox";
 import "../../../components/ha-formfield";
-import "../../../components/ha-language-picker";
 import "../../../components/ha-radio";
 import type { HaRadio } from "../../../components/ha-radio";
 import "../../../components/ha-select";
@@ -25,10 +22,13 @@ import "../../../components/map/ha-locations-editor";
 import type { MarkerLocation } from "../../../components/map/ha-locations-editor";
 import { ConfigUpdateValues, saveCoreConfig } from "../../../data/core";
 import { SYMBOL_TO_ISO } from "../../../data/currency";
-import { showConfirmationDialog } from "../../../dialogs/generic/show-dialog-box";
 import "../../../layouts/hass-subpage";
 import { haStyle } from "../../../resources/styles";
 import type { HomeAssistant } from "../../../types";
+import "../../../components/ha-alert";
+import { showConfirmationDialog } from "../../../dialogs/generic/show-dialog-box";
+import type { HaCheckbox } from "../../../components/ha-checkbox";
+import "../../../components/ha-checkbox";
 
 @customElement("ha-config-section-general")
 class HaConfigSectionGeneral extends LitElement {
@@ -54,6 +54,8 @@ class HaConfigSectionGeneral extends LitElement {
 
   @state() private _location?: [number, number];
 
+  @state() private _languages?: { value: string; label: string }[];
+
   @state() private _error?: string;
 
   @state() private _updateUnits?: boolean;
@@ -253,19 +255,25 @@ class HaConfigSectionGeneral extends LitElement {
                     </mwc-list-item>`
                 )}</ha-select
               >
-              <ha-language-picker
-                .hass=${this.hass}
-                nativeName
+              <ha-select
                 .label=${this.hass.localize(
                   "ui.panel.config.core.section.core.core_config.language"
                 )}
                 name="language"
-                .value=${this._language}
+                fixedMenuPosition
+                naturalMenuWidth
                 .disabled=${disabled}
+                .value=${this._language}
                 @closed=${stopPropagation}
-                @value-changed=${this._handleLanguageChange}
+                @change=${this._handleChange}
+              >
+                ${this._languages?.map(
+                  ({ value, label }) =>
+                    html`<mwc-list-item .value=${value}
+                      >${label}</mwc-list-item
+                    >`
+                )}</ha-select
               >
-              </ha-language-picker>
             </div>
             ${this.narrow
               ? html`
@@ -322,10 +330,25 @@ class HaConfigSectionGeneral extends LitElement {
     this._timeZone = this.hass.config.time_zone || "Etc/GMT";
     this._name = this.hass.config.location_name;
     this._updateUnits = true;
+    this._computeLanguages();
   }
 
-  private _handleLanguageChange(ev) {
-    this._language = ev.detail.value;
+  private _computeLanguages() {
+    if (!this.hass.translationMetadata?.translations) {
+      return;
+    }
+    this._languages = Object.entries(this.hass.translationMetadata.translations)
+      .sort((a, b) =>
+        caseInsensitiveStringCompare(
+          a[1].nativeName,
+          b[1].nativeName,
+          this.hass.locale.language
+        )
+      )
+      .map(([value, metaData]) => ({
+        value,
+        label: metaData.nativeName,
+      }));
   }
 
   private _handleChange(ev) {

src/panels/config/voice-assistants/dialog-voice-assistant-pipeline-detail.ts

@@ -9,7 +9,6 @@ import { SchemaUnion } from "../../../components/ha-form/types";
 import {
   AssistPipeline,
   AssistPipelineMutableParams,
-  fetchAssistPipelineLanguages,
 } from "../../../data/assist_pipeline";
 import { haStyleDialog } from "../../../resources/styles";
 import { HomeAssistant } from "../../../types";
@@ -30,8 +29,6 @@ export class DialogVoiceAssistantPipelineDetail extends LitElement {
 
   @state() private _submitting = false;
 
-  @state() private _supportedLanguages: string[] = [];
-
   public showDialog(params: VoiceAssistantPipelineDetailsDialogParams): void {
     this._params = params;
     this._error = undefined;
@@ -49,15 +46,6 @@ export class DialogVoiceAssistantPipelineDetail extends LitElement {
     fireEvent(this, "dialog-closed", { dialog: this.localName });
   }
 
-  protected firstUpdated() {
-    this._getSupportedLanguages();
-  }
-
-  private async _getSupportedLanguages() {
-    const { languages } = await fetchAssistPipelineLanguages(this.hass);
-    this._supportedLanguages = languages;
-  }
-
   protected render() {
     if (!this._params || !this._data) {
       return nothing;
@@ -80,7 +68,7 @@ export class DialogVoiceAssistantPipelineDetail extends LitElement {
       >
         <div>
           <ha-form
-            .schema=${this._schema(this._supportedLanguages)}
+            .schema=${this._schema()}
             .data=${this._data}
             .hass=${this.hass}
             .error=${this._error}
@@ -132,7 +120,7 @@ export class DialogVoiceAssistantPipelineDetail extends LitElement {
   }
 
   private _schema = memoizeOne(
-    (languages: string[]) =>
+    () =>
       [
         {
           name: "name",
@@ -141,15 +129,6 @@ export class DialogVoiceAssistantPipelineDetail extends LitElement {
             text: {},
           },
         },
-        {
-          name: "language",
-          required: true,
-          selector: {
-            language: {
-              supported_languages: languages,
-            },
-          },
-        },
         {
           name: "conversation_engine",
           required: true,
@@ -157,6 +136,13 @@ export class DialogVoiceAssistantPipelineDetail extends LitElement {
             conversation_agent: {},
           },
         },
+        {
+          name: "language",
+          required: true,
+          selector: {
+            text: {},
+          },
+        },
         {
           name: "stt_engine",
           selector: {

src/panels/profile/ha-pick-language-row.ts

@@ -1,9 +1,10 @@
-import { css, html, LitElement } from "lit";
-import { customElement, property } from "lit/decorators";
+import "@material/mwc-list/mwc-list-item";
+import { css, html, LitElement, PropertyValues } from "lit";
+import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
-import "../../components/ha-language-picker";
+import "../../components/ha-select";
 import "../../components/ha-settings-row";
-import { HomeAssistant } from "../../types";
+import { HomeAssistant, Translation } from "../../types";
 
 @customElement("ha-pick-language-row")
 export class HaPickLanguageRow extends LitElement {
@@ -11,6 +12,13 @@ export class HaPickLanguageRow extends LitElement {
 
   @property() public narrow!: boolean;
 
+  @state() private _languages: (Translation & { key: string })[] = [];
+
+  protected firstUpdated(changedProps: PropertyValues) {
+    super.firstUpdated(changedProps);
+    this._computeLanguages();
+  }
+
   protected render() {
     return html`
       <ha-settings-row .narrow=${this.narrow}>
@@ -25,25 +33,43 @@ export class HaPickLanguageRow extends LitElement {
             >${this.hass.localize("ui.panel.profile.language.link_promo")}</a
           >
         </span>
-        <ha-language-picker
-          .hass=${this.hass}
-          nativeName
+        <ha-select
           .label=${this.hass.localize(
             "ui.panel.profile.language.dropdown_label"
           )}
           .value=${this.hass.locale.language}
-          @value-changed=${this._languageSelectionChanged}
+          @selected=${this._languageSelectionChanged}
           naturalMenuWidth
         >
-        </ha-language-picker>
+          ${this._languages.map(
+            (language) => html`<mwc-list-item
+              .value=${language.key}
+              rtl=${language.isRTL}
+            >
+              ${language.nativeName}
+            </mwc-list-item>`
+          )}
+        </ha-select>
       </ha-settings-row>
     `;
   }
 
+  private _computeLanguages() {
+    if (!this.hass.translationMetadata?.translations) {
+      return;
+    }
+    this._languages = Object.keys(
+      this.hass.translationMetadata.translations
+    ).map((key) => ({
+      key,
+      ...this.hass.translationMetadata.translations[key],
+    }));
+  }
+
   private _languageSelectionChanged(ev) {
     // Only fire event if language was changed. This prevents select updates when
     // responding to hass changes.
-    if (ev.detail.value !== this.hass.language) {
+    if (ev.target.value !== this.hass.language) {
       fireEvent(this, "hass-language-select", ev.target.value);
     }
   }