Ask specific translations

build-scripts/webpack.js

@@ -70,6 +70,7 @@ const createWebpackConfig = ({
         __BUILD__: JSON.stringify(latestBuild ? "latest" : "es5"),
         __VERSION__: JSON.stringify(version),
         __DEMO__: false,
+        __BACKWARDS_COMPAT__: false,
         __STATIC_PATH__: "/static/",
         "process.env.NODE_ENV": JSON.stringify(
           isProdBuild ? "production" : "development"
@@ -221,6 +222,9 @@ const createCastConfig = ({ isProdBuild, latestBuild }) => {
     outputRoot: paths.cast_root,
     isProdBuild,
     latestBuild,
+    defineOverlay: {
+      __BACKWARDS_COMPAT__: true,
+    },
   });
 };
 

demo/src/stubs/lovelace.ts

@@ -17,6 +17,7 @@ export const mockLovelace = (
   );
 
   hass.mockWS("lovelace/config/save", () => Promise.resolve());
+  hass.mockWS("lovelace/resources", () => Promise.resolve([]));
 };
 
 customElements.whenDefined("hui-view").then(() => {

src/data/config_flow.ts

@@ -3,6 +3,7 @@ import { LocalizeFunc } from "../common/translations/localize";
 import { debounce } from "../common/util/debounce";
 import { HomeAssistant } from "../types";
 import { DataEntryFlowProgress, DataEntryFlowStep } from "./data_entry_flow";
+import { domainToName } from "./integration";
 
 export const DISCOVERY_SOURCES = ["unignore", "homekit", "ssdp", "zeroconf"];
 
@@ -75,7 +76,7 @@ export const localizeConfigFlowTitle = (
   const placeholders = flow.context.title_placeholders || {};
   const placeholderKeys = Object.keys(placeholders);
   if (placeholderKeys.length === 0) {
-    return localize(`component.${flow.handler}.title`);
+    return domainToName(localize, flow.handler);
   }
   const args: string[] = [];
   placeholderKeys.forEach((key) => {

src/data/translation.ts

@@ -11,6 +11,14 @@ declare global {
   }
 }
 
+export type TranslationCategory =
+  | "title"
+  | "state"
+  | "config"
+  | "options"
+  | "device_automation"
+  | "mfa_setup";
+
 export const fetchTranslationPreferences = (hass: HomeAssistant) =>
   fetchFrontendUserData(hass.connection, "language");
 
@@ -20,6 +28,23 @@ export const saveTranslationPreferences = (
 ) => saveFrontendUserData(hass.connection, "language", data);
 
 export const getHassTranslations = async (
+  hass: HomeAssistant,
+  language: string,
+  category: TranslationCategory,
+  integration?: string,
+  config_flow?: boolean
+): Promise<{}> => {
+  const result = await hass.callWS<{ resources: {} }>({
+    type: "frontend/get_translations",
+    language,
+    category,
+    integration,
+    config_flow,
+  });
+  return result.resources;
+};
+
+export const getHassTranslationsPre109 = async (
   hass: HomeAssistant,
   language: string
 ): Promise<{}> => {

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

@@ -13,6 +13,7 @@ import {
   loadDataEntryFlowDialog,
   showFlowDialog,
 } from "./show-dialog-data-entry-flow";
+import { domainToName } from "../../data/integration";
 
 export const loadConfigFlowDialog = loadDataEntryFlowDialog;
 
@@ -22,17 +23,31 @@ export const showConfigFlowDialog = (
 ): void =>
   showFlowDialog(element, dialogParams, {
     loadDevicesAndAreas: true,
-    getFlowHandlers: (hass) =>
-      getConfigFlowHandlers(hass).then((handlers) =>
-        handlers.sort((handlerA, handlerB) =>
-          caseInsensitiveCompare(
-            hass.localize(`component.${handlerA}.title`),
-            hass.localize(`component.${handlerB}.title`)
-          )
+    getFlowHandlers: async (hass) => {
+      const [handlers] = await Promise.all([
+        getConfigFlowHandlers(hass),
+        hass.loadBackendTranslation("title", undefined, true),
+      ]);
+
+      return handlers.sort((handlerA, handlerB) =>
+        caseInsensitiveCompare(
+          domainToName(hass.localize, handlerA),
+          domainToName(hass.localize, handlerB)
         )
-      ),
-    createFlow: createConfigFlow,
-    fetchFlow: fetchConfigFlow,
+      );
+    },
+    createFlow: async (hass, handler) => {
+      const [step] = await Promise.all([
+        createConfigFlow(hass, handler),
+        hass.loadBackendTranslation("config", handler),
+      ]);
+      return step;
+    },
+    fetchFlow: async (hass, flowId) => {
+      const step = await fetchConfigFlow(hass, flowId);
+      await hass.loadBackendTranslation("config", step.handler);
+      return step;
+    },
     handleFlowStep: handleConfigFlowStep,
     deleteFlow: deleteConfigFlow,
 

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

@@ -25,8 +25,20 @@ export const showOptionsFlowDialog = (
     },
     {
       loadDevicesAndAreas: false,
-      createFlow: createOptionsFlow,
-      fetchFlow: fetchOptionsFlow,
+      createFlow: async (hass, handler) => {
+        const [step] = await Promise.all([
+          createOptionsFlow(hass, handler),
+          hass.loadBackendTranslation("options", configEntry.domain),
+        ]);
+        return step;
+      },
+      fetchFlow: async (hass, flowId) => {
+        const [step] = await Promise.all([
+          fetchOptionsFlow(hass, flowId),
+          hass.loadBackendTranslation("options", configEntry.domain),
+        ]);
+        return step;
+      },
       handleFlowStep: handleOptionsFlowStep,
       deleteFlow: deleteOptionsFlow,
 

src/dialogs/config-flow/step-flow-pick-handler.ts

@@ -20,6 +20,8 @@ import "../../components/ha-icon-next";
 import { HomeAssistant } from "../../types";
 import { FlowConfig } from "./show-dialog-data-entry-flow";
 import { configFlowContentStyles } from "./styles";
+import { domainToName } from "../../data/integration";
+import { LocalizeFunc } from "../../common/translations/localize";
 
 interface HandlerObj {
   name: string;
@@ -40,31 +42,37 @@ class StepFlowPickHandler extends LitElement {
 
   private _width?: number;
 
-  private _getHandlers = memoizeOne((h: string[], filter?: string) => {
-    const handlers: HandlerObj[] = h.map((handler) => {
-      return {
-        name: this.hass.localize(`component.${handler}.title`) || handler,
-        slug: handler,
-      };
-    });
-
-    if (filter) {
-      const options: Fuse.FuseOptions<HandlerObj> = {
-        keys: ["name", "slug"],
-        caseSensitive: false,
-        minMatchCharLength: 2,
-        threshold: 0.2,
-      };
-      const fuse = new Fuse(handlers, options);
-      return fuse.search(filter);
+  private _getHandlers = memoizeOne(
+    (h: string[], filter?: string, _localize?: LocalizeFunc) => {
+      const handlers: HandlerObj[] = h.map((handler) => {
+        return {
+          name: domainToName(this.hass.localize, handler),
+          slug: handler,
+        };
+      });
+
+      if (filter) {
+        const options: Fuse.FuseOptions<HandlerObj> = {
+          keys: ["name", "slug"],
+          caseSensitive: false,
+          minMatchCharLength: 2,
+          threshold: 0.2,
+        };
+        const fuse = new Fuse(handlers, options);
+        return fuse.search(filter);
+      }
+      return handlers.sort((a, b) =>
+        a.name.toUpperCase() < b.name.toUpperCase() ? -1 : 1
+      );
     }
-    return handlers.sort((a, b) =>
-      a.name.toUpperCase() < b.name.toUpperCase() ? -1 : 1
-    );
-  });
+  );
 
   protected render(): TemplateResult {
-    const handlers = this._getHandlers(this.handlers, this.filter);
+    const handlers = this._getHandlers(
+      this.handlers,
+      this.filter,
+      this.hass.localize
+    );
 
     return html`
       <h2>${this.hass.localize("ui.panel.config.integrations.new")}</h2>

src/layouts/home-assistant.ts

@@ -67,6 +67,12 @@ export class HomeAssistantAppEl extends HassElement {
     }
   }
 
+  protected hassConnected() {
+    super.hassConnected();
+    // @ts-ignore
+    this._loadHassTranslations(this.hass!.language, "state");
+  }
+
   protected hassReconnected() {
     super.hassReconnected();
 

src/onboarding/action-badge.ts

@@ -0,0 +1,89 @@
+import {
+  css,
+  CSSResult,
+  customElement,
+  html,
+  LitElement,
+  property,
+  TemplateResult,
+} from "lit-element";
+import "../components/ha-icon";
+
+@customElement("action-badge")
+class ActionBadge extends LitElement {
+  @property() public icon!: string;
+
+  @property() public title!: string;
+
+  @property() public badgeIcon?: string;
+
+  @property({ type: Boolean, reflect: true }) public clickable = false;
+
+  protected render(): TemplateResult {
+    return html`
+      <div class="icon">
+        <iron-icon .icon=${this.icon}></iron-icon>
+        ${this.badgeIcon
+          ? html` <ha-icon class="badge" .icon=${this.badgeIcon}></ha-icon> `
+          : ""}
+      </div>
+      <div class="title">${this.title}</div>
+    `;
+  }
+
+  static get styles(): CSSResult {
+    return css`
+      :host {
+        display: inline-flex;
+        flex-direction: column;
+        text-align: center;
+        color: var(--primary-text-color);
+      }
+
+      :host([clickable]) {
+        color: var(--primary-text-color);
+      }
+
+      .icon {
+        position: relative;
+        box-sizing: border-box;
+        margin: 0 auto 8px;
+        height: 40px;
+        width: 40px;
+        border-radius: 50%;
+        border: 1px solid var(--secondary-text-color);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      :host([clickable]) .icon {
+        border-color: var(--primary-color);
+        border-width: 2px;
+      }
+
+      .badge {
+        position: absolute;
+        color: var(--primary-color);
+        bottom: -5px;
+        right: -5px;
+        background-color: white;
+        border-radius: 50%;
+        width: 18px;
+        display: block;
+        height: 18px;
+      }
+
+      .title {
+        min-height: 2.3em;
+        word-break: break-word;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "action-badge": ActionBadge;
+  }
+}

src/onboarding/ha-onboarding.ts

@@ -27,6 +27,7 @@ import { HassElement } from "../state/hass-element";
 import { registerServiceWorker } from "../util/register-service-worker";
 import "./onboarding-create-user";
 import "./onboarding-loading";
+import { HomeAssistant } from "../types";
 
 interface OnboardingEvent<T extends ValidOnboardingStep> {
   type: T;
@@ -45,6 +46,8 @@ declare global {
 
 @customElement("ha-onboarding")
 class HaOnboarding extends litLocalizeLiteMixin(HassElement) {
+  @property() public hass?: HomeAssistant;
+
   public translationFragment = "page-onboarding";
 
   @property() private _loading = false;
@@ -102,6 +105,12 @@ class HaOnboarding extends litLocalizeLiteMixin(HassElement) {
     if (changedProps.has("language")) {
       document.querySelector("html")!.setAttribute("lang", this.language!);
     }
+    if (changedProps.has("hass")) {
+      this.hassChanged(
+        this.hass!,
+        changedProps.get("hass") as HomeAssistant | undefined
+      );
+    }
   }
 
   private _curStep() {