diff --git a/src/components/ha-filter-integrations.ts b/src/components/ha-filter-integrations.ts index 233ebcb9fc..21d5f11bec 100644 --- a/src/components/ha-filter-integrations.ts +++ b/src/components/ha-filter-integrations.ts @@ -6,8 +6,9 @@ import { repeat } from "lit/directives/repeat"; import memoizeOne from "memoize-one"; import { fireEvent } from "../common/dom/fire_event"; import { stringCompare } from "../common/string/compare"; +import type { LocalizeFunc } from "../common/translations/localize"; import type { IntegrationManifest } from "../data/integration"; -import { fetchIntegrationManifests } from "../data/integration"; +import { fetchIntegrationManifests, domainToName } from "../data/integration"; import { haStyleScrollbar } from "../resources/styles"; import type { HomeAssistant } from "../types"; import "./ha-check-list-item"; @@ -63,7 +64,12 @@ export class HaFilterIntegrations extends LitElement { multi > ${repeat( - this._integrations(this._manifests, this._filter, this.value), + this._integrations( + this.hass.localize, + this._manifests, + this._filter, + this.value + ), (i) => i.domain, (integration) => html` - ${integration.name || integration.domain} + ${integration.name} ` )} ` @@ -108,11 +114,21 @@ export class HaFilterIntegrations extends LitElement { protected async firstUpdated() { this._manifests = await fetchIntegrationManifests(this.hass); + this.hass.loadBackendTranslation("title"); } private _integrations = memoizeOne( - (manifest: IntegrationManifest[], filter: string | undefined, _value) => + ( + localize: LocalizeFunc, + manifest: IntegrationManifest[], + filter: string | undefined, + _value + ) => manifest + .map((mnfst) => ({ + ...mnfst, + name: domainToName(localize, mnfst.domain, mnfst), + })) .filter( (mnfst) => (!mnfst.integration_type || @@ -124,11 +140,7 @@ export class HaFilterIntegrations extends LitElement { mnfst.domain.toLowerCase().includes(filter)) ) .sort((a, b) => - stringCompare( - a.name || a.domain, - b.name || b.domain, - this.hass.locale.language - ) + stringCompare(a.name, b.name, this.hass.locale.language) ) );