Fix generated Lovelace translating domain names (#5803)

src/panels/config/integrations/ha-config-integrations.ts

@@ -60,6 +60,7 @@ import type {
 import { HASSDomEvent } from "../../../common/dom/fire_event";
 import "../../../components/ha-svg-icon";
 import { mdiPlus } from "@mdi/js";
+import { LocalizeFunc } from "../../../common/translations/localize";
 
 interface DataEntryFlowProgressExtended extends DataEntryFlowProgress {
   localized_title?: string;
@@ -121,7 +122,7 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {
         this._deviceRegistryEntries = entries;
       }),
       subscribeConfigFlowInProgress(this.hass, async (flowsInProgress) => {
-        const translationsPromisses: Promise<void>[] = [];
+        const translationsPromisses: Promise<LocalizeFunc>[] = [];
         flowsInProgress.forEach((flow) => {
           // To render title placeholders
           if (flow.context.title_placeholders) {

src/panels/lovelace/common/generate-lovelace-config.ts

@@ -465,7 +465,8 @@ export const generateLovelaceConfigFromData = async (
 };
 
 export const generateLovelaceConfigFromHass = async (
-  hass: HomeAssistant
+  hass: HomeAssistant,
+  localize?: LocalizeFunc
 ): Promise<LovelaceConfig> => {
   // We want to keep the registry subscriptions alive after generating the UI
   // so that we don't serve up stale data after changing areas.
@@ -488,6 +489,6 @@ export const generateLovelaceConfigFromHass = async (
     deviceEntries,
     entityEntries,
     hass.states,
-    hass.localize
+    localize || hass.localize
   );
 };

src/panels/lovelace/ha-panel-lovelace.ts

@@ -288,7 +288,8 @@ class LovelacePanel extends LitElement {
         this._errorMsg = err.message;
         return;
       }
-      conf = await generateLovelaceConfigFromHass(this.hass!);
+      const localize = await this.hass!.loadBackendTranslation("title");
+      conf = await generateLovelaceConfigFromHass(this.hass!, localize);
       confMode = "generated";
     } finally {
       // Ignore updates for another 2 seconds.
@@ -370,8 +371,9 @@ class LovelacePanel extends LitElement {
         const { config: previousConfig, mode: previousMode } = this.lovelace!;
         try {
           // Optimistic update
+          const localize = await this.hass!.loadBackendTranslation("title");
           this._updateLovelace({
-            config: await generateLovelaceConfigFromHass(this.hass!),
+            config: await generateLovelaceConfigFromHass(this.hass!, localize),
             mode: "generated",
             editMode: false,
           });

src/state/translations-mixin.ts

@@ -1,5 +1,5 @@
 import { atLeastVersion } from "../common/config/version";
-import { computeLocalize } from "../common/translations/localize";
+import { computeLocalize, LocalizeFunc } from "../common/translations/localize";
 import { computeRTL } from "../common/util/compute_rtl";
 import { debounce } from "../common/util/debounce";
 import {
@@ -104,29 +104,37 @@ export default <T extends Constructor<HassBaseEl>>(superClass: T) =>
       this._loadFragmentTranslations(hass.language, hass.panelUrl);
     }
 
+    /**
+     * Load translations from the backend
+     * @param language language to fetch
+     * @param category category to fetch
+     * @param integration optional, if having to fetch for specific integration
+     * @param configFlow optional, if having to fetch for all integrations with a config flow
+     * @param force optional, load even if already cached
+     */
     private async _loadHassTranslations(
       language: string,
       category: Parameters<typeof getHassTranslations>[2],
       integration?: Parameters<typeof getHassTranslations>[3],
       configFlow?: Parameters<typeof getHassTranslations>[4],
       force = false
-    ) {
+    ): Promise<LocalizeFunc> {
       if (
         __BACKWARDS_COMPAT__ &&
         !atLeastVersion(this.hass!.connection.haVersion, 0, 109)
       ) {
         if (category !== "state") {
-          return;
+          return this.hass!.localize;
         }
         const resources = await getHassTranslationsPre109(this.hass!, language);
 
         // Ignore the repsonse if user switched languages before we got response
         if (this.hass!.language !== language) {
-          return;
+          return this.hass!.localize;
         }
 
         this._updateResources(language, resources);
-        return;
+        return this.hass!.localize;
       }
 
       let alreadyLoaded: LoadedTranslationCategory;
@@ -145,12 +153,12 @@ export default <T extends Constructor<HassBaseEl>>(superClass: T) =>
       if (!force) {
         if (integration) {
           if (alreadyLoaded.integrations.includes(integration)) {
-            return;
+            return this.hass!.localize;
           }
         } else if (
           configFlow ? alreadyLoaded.configFlow : alreadyLoaded.setup
         ) {
-          return;
+          return this.hass!.localize;
         }
       }
 
@@ -176,10 +184,11 @@ export default <T extends Constructor<HassBaseEl>>(superClass: T) =>
 
       // Ignore the repsonse if user switched languages before we got response
       if (this.hass!.language !== language) {
-        return;
+        return this.hass!.localize;
       }
 
       this._updateResources(language, resources);
+      return this.hass!.localize;
     }
 
     private async _loadFragmentTranslations(
@@ -214,9 +223,7 @@ export default <T extends Constructor<HassBaseEl>>(superClass: T) =>
       // multiple fragments.
       const resources = {
         [language]: {
-          ...(this.hass &&
-            this.hass.resources &&
-            this.hass.resources[language]),
+          ...this.hass?.resources?.[language],
           ...data,
         },
       };

src/types.ts

@@ -224,7 +224,7 @@ export interface HomeAssistant {
     category: Parameters<typeof getHassTranslations>[2],
     integration?: Parameters<typeof getHassTranslations>[3],
     configFlow?: Parameters<typeof getHassTranslations>[4]
-  ): Promise<void>;
+  ): Promise<LocalizeFunc>;
 }
 
 export type LightEntity = HassEntityBase & {