Add backend translation support for selector select (#15064)

* Base for selector translations

* Allow translations for ha-selector-select

* Fetch translation for config flow and onboarding

* Get translation_key from step handler

* Add domain property to DataEntry flow

* Revert fetching translation for onboarding flow

* Leave domain for repair flows

* Use localizeValue function

* Change type

* Import selector translations in issue flow

Co-authored-by: Paul Bottein <paul.bottein@gmail.com>

src/components/ha-form/ha-form.ts

@@ -43,6 +43,8 @@ export class HaForm extends LitElement implements HaFormElement {
 
   @property() public computeHelper?: (schema: any) => string | undefined;
 
+  @property() public localizeValue?: (key: string) => string;
+
   public focus() {
     const root = this.shadowRoot?.querySelector(".root");
     if (!root) {
@@ -88,6 +90,7 @@ export class HaForm extends LitElement implements HaFormElement {
                   .disabled=${item.disabled || this.disabled || false}
                   .placeholder=${item.required ? "" : item.default}
                   .helper=${this._computeHelper(item)}
+                  .localizeValue=${this.localizeValue}
                   .required=${item.required || false}
                   .context=${this._generateContext(item)}
                 ></ha-selector>`

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

@@ -28,6 +28,8 @@ export class HaSelectSelector extends LitElement {
 
   @property() public helper?: string;
 
+  @property() public localizeValue?: (key: string) => string;
+
   @property({ type: Boolean }) public disabled = false;
 
   @property({ type: Boolean }) public required = true;
@@ -39,9 +41,21 @@ export class HaSelectSelector extends LitElement {
   protected render() {
     const options =
       this.selector.select?.options.map((option) =>
-        typeof option === "object" ? option : { value: option, label: option }
+        typeof option === "object"
+          ? (option as SelectOption)
+          : ({ value: option, label: option } as SelectOption)
       ) || [];
 
+    const translationKey = this.selector.select?.translation_key;
+
+    if (this.localizeValue && translationKey) {
+      options.forEach((option) => {
+        option.label =
+          this.localizeValue!(`${translationKey}.options.${option.value}`) ||
+          option.label;
+      });
+    }
+
     if (!this.selector.select?.custom_value && this._mode === "list") {
       if (!this.selector.select?.multiple) {
         return html`

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

@@ -51,6 +51,8 @@ export class HaSelector extends LitElement {
 
   @property() public helper?: string;
 
+  @property() public localizeValue?: (key: string) => string;
+
   @property() public placeholder?: any;
 
   @property({ type: Boolean }) public disabled = false;
@@ -86,6 +88,7 @@ export class HaSelector extends LitElement {
         required: this.required,
         helper: this.helper,
         context: this.context,
+        localizeValue: this.localizeValue,
         id: "selector",
       })}
     `;

src/data/selector.ts

@@ -215,6 +215,7 @@ export interface SelectSelector {
     custom_value?: boolean;
     mode?: "list" | "dropdown";
     options: readonly string[] | readonly SelectOption[];
+    translation_key?: string;
   } | null;
 }
 

src/data/translation.ts

@@ -54,7 +54,8 @@ export type TranslationCategory =
   | "system_health"
   | "device_class"
   | "application_credentials"
-  | "issues";
+  | "issues"
+  | "selector";
 
 export const fetchTranslationPreferences = (hass: HomeAssistant) =>
   fetchFrontendUserData(hass.connection, "language");

src/dialogs/config-flow/show-dialog-config-flow.ts

@@ -24,6 +24,7 @@ export const showConfigFlowDialog = (
       const [step] = await Promise.all([
         createConfigFlow(hass, handler),
         hass.loadBackendTranslation("config", handler),
+        hass.loadBackendTranslation("selector", handler),
         // Used as fallback if no header defined for step
         hass.loadBackendTranslation("title", handler),
       ]);
@@ -32,6 +33,7 @@ export const showConfigFlowDialog = (
     fetchFlow: async (hass, flowId) => {
       const step = await fetchConfigFlow(hass, flowId);
       await hass.loadBackendTranslation("config", step.handler);
+      await hass.loadBackendTranslation("selector", step.handler);
       return step;
     },
     handleFlowStep: handleConfigFlowStep,
@@ -95,6 +97,10 @@ export const showConfigFlowDialog = (
       );
     },
 
+    renderShowFormStepFieldLocalizeValue(hass, step, key) {
+      return hass.localize(`component.${step.handler}.selector.${key}`);
+    },
+
     renderExternalStepHeader(hass, step) {
       return (
         hass.localize(

src/dialogs/config-flow/show-dialog-data-entry-flow.ts

@@ -61,6 +61,12 @@ export interface FlowConfig {
     error: string
   ): string;
 
+  renderShowFormStepFieldLocalizeValue(
+    hass: HomeAssistant,
+    step: DataEntryFlowStepForm,
+    key: string
+  ): string;
+
   renderExternalStepHeader(
     hass: HomeAssistant,
     step: DataEntryFlowStepExternal

src/dialogs/config-flow/show-dialog-options-flow.ts

@@ -32,6 +32,7 @@ export const showOptionsFlowDialog = (
         const [step] = await Promise.all([
           createOptionsFlow(hass, handler),
           hass.loadBackendTranslation("options", configEntry.domain),
+          hass.loadBackendTranslation("selector", configEntry.domain),
         ]);
         return step;
       },
@@ -39,6 +40,7 @@ export const showOptionsFlowDialog = (
         const [step] = await Promise.all([
           fetchOptionsFlow(hass, flowId),
           hass.loadBackendTranslation("options", configEntry.domain),
+          hass.loadBackendTranslation("selector", configEntry.domain),
         ]);
         return step;
       },
@@ -109,6 +111,10 @@ export const showOptionsFlowDialog = (
         );
       },
 
+      renderShowFormStepFieldLocalizeValue(hass, _step, key) {
+        return hass.localize(`component.${configEntry.domain}.selector.${key}`);
+      },
+
       renderExternalStepHeader(_hass, _step) {
         return "";
       },

src/dialogs/config-flow/step-flow-form.ts

@@ -57,6 +57,7 @@ class StepFlowForm extends LitElement {
           .computeLabel=${this._labelCallback}
           .computeHelper=${this._helperCallback}
           .computeError=${this._errorCallback}
+          .localizeValue=${this._localizeValueCallback}
         ></ha-form>
       </div>
       <div class="buttons">
@@ -174,6 +175,13 @@ class StepFlowForm extends LitElement {
   private _errorCallback = (error: string) =>
     this.flowConfig.renderShowFormStepFieldError(this.hass, this.step, error);
 
+  private _localizeValueCallback = (key: string) =>
+    this.flowConfig.renderShowFormStepFieldLocalizeValue(
+      this.hass,
+      this.step,
+      key
+    );
+
   static get styles(): CSSResultGroup {
     return [
       configFlowContentStyles,

src/panels/config/repairs/show-dialog-repair-flow.ts

@@ -32,6 +32,7 @@ export const showRepairsFlowDialog = (
         const [step] = await Promise.all([
           createRepairsFlow(hass, handler, issue.issue_id),
           hass.loadBackendTranslation("issues", issue.domain),
+          hass.loadBackendTranslation("selector", issue.domain),
         ]);
         return step;
       },
@@ -39,6 +40,7 @@ export const showRepairsFlowDialog = (
         const [step] = await Promise.all([
           fetchRepairsFlow(hass, flowId),
           hass.loadBackendTranslation("issues", issue.domain),
+          hass.loadBackendTranslation("selector", issue.domain),
         ]);
         return step;
       },
@@ -122,6 +124,10 @@ export const showRepairsFlowDialog = (
         );
       },
 
+      renderShowFormStepFieldLocalizeValue(hass, _step, key) {
+        return hass.localize(`component.${issue.domain}.selector.${key}`);
+      },
+
       renderExternalStepHeader(_hass, _step) {
         return "";
       },