Refactor and cleanup entity config page (#18797)

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

@@ -1,3 +1,5 @@
+import { consume } from "@lit-labs/context";
+import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
 import type { RequestSelectedDetail } from "@material/mwc-list/mwc-list-item";
 import {
   mdiAlertCircle,
@@ -10,9 +12,8 @@ import {
   mdiRestoreAlert,
   mdiUndo,
 } from "@mdi/js";
-import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
+import { HassEntity } from "home-assistant-js-websocket";
-import { HassEntity, UnsubscribeFunc } from "home-assistant-js-websocket";
+import { CSSResultGroup, LitElement, css, html, nothing } from "lit";
-import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { ifDefined } from "lit/directives/if-defined";
@@ -21,6 +22,10 @@ import memoize from "memoize-one";
 import type { HASSDomEvent } from "../../../common/dom/fire_event";
 import { computeDomain } from "../../../common/entity/compute_domain";
 import { computeStateName } from "../../../common/entity/compute_state_name";
+import {
+  PROTOCOL_INTEGRATIONS,
+  protocolIntegrationPicked,
+} from "../../../common/integrations/protocolIntegrationPicked";
 import { navigate } from "../../../common/navigate";
 import { LocalizeFunc } from "../../../common/translations/localize";
 import { computeRTL } from "../../../common/util/compute_rtl";
@@ -33,21 +38,13 @@ import "../../../components/ha-button-menu";
 import "../../../components/ha-check-list-item";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-svg-icon";
-import {
-  AreaRegistryEntry,
-  subscribeAreaRegistry,
-} from "../../../data/area_registry";
 import { ConfigEntry, getConfigEntries } from "../../../data/config_entries";
-import {
+import { fullEntitiesContext } from "../../../data/context";
-  DeviceRegistryEntry,
-  subscribeDeviceRegistry,
-} from "../../../data/device_registry";
 import { UNAVAILABLE } from "../../../data/entity";
 import {
-  computeEntityRegistryName,
   EntityRegistryEntry,
+  computeEntityRegistryName,
   removeEntityRegistryEntry,
-  subscribeEntityRegistry,
   updateEntityRegistryEntry,
 } from "../../../data/entity_registry";
 import { domainToName } from "../../../data/integration";
@@ -59,15 +56,10 @@ import { showMoreInfoDialog } from "../../../dialogs/more-info/show-ha-more-info
 import "../../../layouts/hass-loading-screen";
 import "../../../layouts/hass-tabs-subpage-data-table";
 import type { HaTabsSubpageDataTable } from "../../../layouts/hass-tabs-subpage-data-table";
-import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
 import { haStyle } from "../../../resources/styles";
 import type { HomeAssistant, Route } from "../../../types";
 import { configSections } from "../ha-panel-config";
 import "../integrations/ha-integration-overflow-menu";
-import {
-  protocolIntegrationPicked,
-  PROTOCOL_INTEGRATIONS,
-} from "../../../common/integrations/protocolIntegrationPicked";
 import { showAddIntegrationDialog } from "../integrations/show-add-integration-dialog";
 
 export interface StateEntity
@@ -88,7 +80,7 @@ export interface EntityRow extends StateEntity {
 }
 
 @customElement("ha-config-entities")
-export class HaConfigEntities extends SubscribeMixin(LitElement) {
+export class HaConfigEntities extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property({ type: Boolean }) public isWide!: boolean;
@@ -97,16 +89,14 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
 
   @property({ attribute: false }) public route!: Route;
 
-  @state() private _entities?: EntityRegistryEntry[];
-
-  @state() private _devices?: DeviceRegistryEntry[];
-
-  @state() private _areas: AreaRegistryEntry[] = [];
-
   @state() private _stateEntities: StateEntity[] = [];
 
   @property() public _entries?: ConfigEntry[];
 
+  @state()
+  @consume({ context: fullEntitiesContext, subscribe: true })
+  _entities!: EntityRegistryEntry[];
+
   @state() private _showDisabled = false;
 
   @state() private _showHidden = false;
@@ -126,6 +116,30 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
   @query("hass-tabs-subpage-data-table", true)
   private _dataTable!: HaTabsSubpageDataTable;
 
+  public connectedCallback() {
+    super.connectedCallback();
+    window.addEventListener("location-changed", this._locationChanged);
+    window.addEventListener("popstate", this._popState);
+  }
+
+  disconnectedCallback(): void {
+    super.disconnectedCallback();
+    window.removeEventListener("location-changed", this._locationChanged);
+    window.removeEventListener("popstate", this._popState);
+  }
+
+  private _locationChanged = () => {
+    if (window.location.search.substring(1) !== this._searchParms.toString()) {
+      this._searchParms = new URLSearchParams(window.location.search);
+    }
+  };
+
+  private _popState = () => {
+    if (window.location.search.substring(1) !== this._searchParms.toString()) {
+      this._searchParms = new URLSearchParams(window.location.search);
+    }
+  };
+
   private _activeFilters = memoize(
     (
       filters: URLSearchParams,
@@ -307,8 +321,8 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
     (
       localize: LocalizeFunc,
       entities: StateEntity[],
-      devices: DeviceRegistryEntry[] | undefined,
+      devices: HomeAssistant["devices"],
-      areas: AreaRegistryEntry[] | undefined,
+      areas: HomeAssistant["areas"],
       stateEntities: StateEntity[],
       filters: URLSearchParams,
       showDisabled: boolean,
@@ -322,20 +336,6 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
       // If nothing gets filtered, this is our correct count of entities
       let startLength = entities.length + stateEntities.length;
 
-      const areaLookup: { [areaId: string]: AreaRegistryEntry } = {};
-      const deviceLookup: { [deviceId: string]: DeviceRegistryEntry } = {};
-
-      if (areas) {
-        for (const area of areas) {
-          areaLookup[area.area_id] = area;
-        }
-        if (devices) {
-          for (const device of devices) {
-            deviceLookup[device.id] = device;
-          }
-        }
-      }
-
       let filteredEntities = showReadOnly
         ? entities.concat(stateEntities)
         : entities;
@@ -404,8 +404,8 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
         const entity = this.hass.states[entry.entity_id];
         const unavailable = entity?.state === UNAVAILABLE;
         const restored = entity?.attributes.restored === true;
-        const areaId = entry.area_id ?? deviceLookup[entry.device_id!]?.area_id;
+        const areaId = entry.area_id ?? devices[entry.device_id!]?.area_id;
-        const area = areaId ? areaLookup[areaId] : undefined;
+        const area = areaId ? areas[areaId] : undefined;
 
         if (!showUnavailable && unavailable) {
           continue;
@@ -438,38 +438,6 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
     }
   );
 
-  public constructor() {
-    super();
-    window.addEventListener("location-changed", () => {
-      if (
-        window.location.search.substring(1) !== this._searchParms.toString()
-      ) {
-        this._searchParms = new URLSearchParams(window.location.search);
-      }
-    });
-    window.addEventListener("popstate", () => {
-      if (
-        window.location.search.substring(1) !== this._searchParms.toString()
-      ) {
-        this._searchParms = new URLSearchParams(window.location.search);
-      }
-    });
-  }
-
-  public hassSubscribe(): UnsubscribeFunc[] {
-    return [
-      subscribeEntityRegistry(this.hass.connection!, (entities) => {
-        this._entities = entities;
-      }),
-      subscribeDeviceRegistry(this.hass.connection!, (devices) => {
-        this._devices = devices;
-      }),
-      subscribeAreaRegistry(this.hass.connection, (areas) => {
-        this._areas = areas;
-      }),
-    ];
-  }
-
   protected render() {
     if (!this.hass || this._entities === undefined) {
       return html` <hass-loading-screen></hass-loading-screen> `;
@@ -484,8 +452,8 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
       this._filteredEntitiesAndDomains(
         this.hass.localize,
         this._entities,
-        this._devices,
+        this.hass.devices,
-        this._areas,
+        this.hass.areas,
         this._stateEntities,
         this._searchParms,
         this._showDisabled,
@@ -950,8 +918,8 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
       this._filteredEntitiesAndDomains(
         this.hass.localize,
         this._entities!,
-        this._devices,
+        this.hass.devices,
-        this._areas,
+        this.hass.areas,
         this._stateEntities,
         this._searchParms,
         this._showDisabled,