Add labels on entities datatable (#20274)

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

@@ -10,7 +10,7 @@ import {
   mdiRestoreAlert,
   mdiUndo,
 } from "@mdi/js";
-import { HassEntity } from "home-assistant-js-websocket";
+import { HassEntity, UnsubscribeFunc } from "home-assistant-js-websocket";
 import {
   CSSResultGroup,
   LitElement,
@@ -37,6 +37,8 @@ import type {
   RowClickedEvent,
   SelectionChangedEvent,
 } from "../../../components/data-table/ha-data-table";
+import "../../../components/data-table/ha-data-table-labels";
+import "../../../components/ha-alert";
 import "../../../components/ha-button-menu";
 import "../../../components/ha-check-list-item";
 import "../../../components/ha-filter-devices";
@@ -47,7 +49,6 @@ import "../../../components/ha-filter-labels";
 import "../../../components/ha-icon";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-svg-icon";
-import "../../../components/ha-alert";
 import { ConfigEntry, getConfigEntries } from "../../../data/config_entries";
 import { fullEntitiesContext } from "../../../data/context";
 import { UNAVAILABLE } from "../../../data/entity";
@@ -58,6 +59,10 @@ import {
   updateEntityRegistryEntry,
 } from "../../../data/entity_registry";
 import { entryIcon } from "../../../data/icons";
+import {
+  LabelRegistryEntry,
+  subscribeLabelRegistry,
+} from "../../../data/label_registry";
 import {
   showAlertDialog,
   showConfirmationDialog,
@@ -66,6 +71,7 @@ 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";
@@ -87,10 +93,11 @@ export interface EntityRow extends StateEntity {
   status: string | undefined;
   area?: string;
   localized_platform: string;
+  label_entries: LabelRegistryEntry[];
 }
 
 @customElement("ha-config-entities")
-export class HaConfigEntities extends LitElement {
+export class HaConfigEntities extends SubscribeMixin(LitElement) {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property({ type: Boolean }) public isWide = false;
@@ -120,6 +127,9 @@ export class HaConfigEntities extends LitElement {
 
   @state() private _expandedFilter?: string;
 
+  @state()
+  _labels!: LabelRegistryEntry[];
+
   @query("hass-tabs-subpage-data-table", true)
   private _dataTable!: HaTabsSubpageDataTable;
 
@@ -203,14 +213,21 @@ export class HaConfigEntities extends LitElement {
         filterable: true,
         direction: "asc",
         grows: true,
-        template: narrow
-          ? (entry) => html`
-              ${entry.name}<br />
-              <div class="secondary">
+        template: (entry) => html`
+          <div style="font-size: 14px;">${entry.name}</div>
+          ${narrow
+            ? html`<div class="secondary">
                 ${entry.entity_id} | ${entry.localized_platform}
-              </div>
-            `
-          : undefined,
+              </div>`
+            : nothing}
+          ${entry.label_entries.length
+            ? html`
+                <ha-data-table-labels
+                  .labels=${entry.label_entries}
+                ></ha-data-table-labels>
+              `
+            : nothing}
+        `,
       },
       entity_id: {
         title: localize("ui.panel.config.entities.picker.headers.entity_id"),
@@ -302,6 +319,13 @@ export class HaConfigEntities extends LitElement {
               `
             : "—",
       },
+      labels: {
+        title: "",
+        hidden: true,
+        filterable: true,
+        template: (entry) =>
+          entry.label_entries.map((lbl) => lbl.name).join(" "),
+      },
     })
   );
 
@@ -316,7 +340,8 @@ export class HaConfigEntities extends LitElement {
         string,
         { value: string[] | undefined; items: Set<string> | undefined }
       >,
-      entries?: ConfigEntry[]
+      entries?: ConfigEntry[],
+      labelReg?: LabelRegistryEntry[]
     ) => {
       const result: EntityRow[] = [];
 
@@ -409,6 +434,11 @@ export class HaConfigEntities extends LitElement {
           continue;
         }
 
+        const labels = labelReg && entry?.labels;
+        const labelsEntries = (labels || []).map(
+          (lbl) => labelReg!.find((label) => label.label_id === lbl)!
+        );
+
         result.push({
           ...entry,
           entity,
@@ -436,6 +466,7 @@ export class HaConfigEntities extends LitElement {
                     : localize(
                         "ui.panel.config.entities.picker.status.available"
                       ),
+          label_entries: labelsEntries,
         });
       }
 
@@ -443,6 +474,14 @@ export class HaConfigEntities extends LitElement {
     }
   );
 
+  protected hassSubscribe(): (UnsubscribeFunc | Promise<UnsubscribeFunc>)[] {
+    return [
+      subscribeLabelRegistry(this.hass.connection, (labels) => {
+        this._labels = labels;
+      }),
+    ];
+  }
+
   protected render() {
     if (!this.hass || this._entities === undefined) {
       return html` <hass-loading-screen></hass-loading-screen> `;
@@ -456,7 +495,8 @@ export class HaConfigEntities extends LitElement {
         this.hass.areas,
         this._stateEntities,
         this._filters,
-        this._entries
+        this._entries,
+        this._labels
       );
 
     const includeAddDeviceFab =
@@ -497,6 +537,7 @@ export class HaConfigEntities extends LitElement {
         @row-click=${this._openEditEntry}
         id="entity_id"
         .hasFab=${includeAddDeviceFab}
+        class=${this.narrow ? "narrow" : ""}
       >
         <ha-integration-overflow-menu
           .hass=${this.hass}
@@ -932,7 +973,8 @@ export class HaConfigEntities extends LitElement {
         this.hass.areas,
         this._stateEntities,
         this._filters,
-        this._entries
+        this._entries,
+        this._labels
       );
     if (
       filteredDomains.size === 1 &&
@@ -954,6 +996,12 @@ export class HaConfigEntities extends LitElement {
     return [
       haStyle,
       css`
+        hass-tabs-subpage-data-table {
+          --data-table-row-height: 60px;
+        }
+        hass-tabs-subpage-data-table.narrow {
+          --data-table-row-height: 72px;
+        }
         hass-loading-screen {
           --app-header-background-color: var(--sidebar-background-color);
           --app-header-text-color: var(--sidebar-text-color);