diff --git a/src/components/ha-related-items.ts b/src/components/ha-related-items.ts index be59a28b88..2b4014337a 100644 --- a/src/components/ha-related-items.ts +++ b/src/components/ha-related-items.ts @@ -6,12 +6,12 @@ import { mdiSofa, } from "@mdi/js"; import { - css, CSSResultGroup, - html, LitElement, - nothing, PropertyValues, + css, + html, + nothing, } from "lit"; import { customElement, property, state } from "lit/decorators"; import { styleMap } from "lit/directives/style-map"; @@ -20,7 +20,7 @@ import { fireEvent } from "../common/dom/fire_event"; import { caseInsensitiveStringCompare } from "../common/string/compare"; import { Blueprints, fetchBlueprints } from "../data/blueprint"; import { ConfigEntry, getConfigEntries } from "../data/config_entries"; -import { findRelated, ItemType, RelatedResult } from "../data/search"; +import { ItemType, RelatedResult, findRelated } from "../data/search"; import { haStyle } from "../resources/styles"; import { HomeAssistant } from "../types"; import { brandsUrl } from "../util/brands-url"; @@ -109,6 +109,26 @@ export class HaRelatedItems extends LitElement { ) ); + private _getConfigEntries = memoizeOne( + ( + relatedConfigEntries: string[] | undefined, + entries: ConfigEntry[] | undefined + ) => { + const configEntries = + relatedConfigEntries && entries + ? relatedConfigEntries.map((entryId) => + entries!.find((configEntry) => configEntry.entry_id === entryId) + ) + : undefined; + + const configEntryDomains = new Set( + configEntries?.map((entry) => entry?.domain) + ); + + return { configEntries, configEntryDomains }; + } + ); + protected render() { if (!this._related) { return nothing; @@ -128,22 +148,25 @@ export class HaRelatedItems extends LitElement { `; } + + const { configEntries, configEntryDomains } = this._getConfigEntries( + this._related.config_entry, + this._entries + ); + return html` - ${this._related.config_entry && this._entries + ${configEntries || this._related.integration ? html`