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/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,