Open more info in unused entities (#3714)

* Open more info in unused entities

* Only make entity column open more info

src/components/ha-data-table.ts

@@ -32,10 +32,15 @@ declare global {
   // for fire event
   interface HASSDomEvents {
     "selection-changed": SelectionChangedEvent;
+    "row-click": RowClickedEvent;
     "sorting-changed": SortingChangedEvent;
   }
 }
 
+export interface RowClickedEvent {
+  id: string;
+}
+
 export interface SelectionChangedEvent {
   id: string;
   selected: boolean;
@@ -266,7 +271,11 @@ export class HaDataTable extends BaseElement {
               ),
               (row: DataTabelRowData) => row[this.id],
               (row: DataTabelRowData) => html`
-                <tr data-row-id="${row[this.id]}" class="mdc-data-table__row">
+                <tr
+                  data-row-id="${row[this.id]}"
+                  @click=${this._handleRowClick}
+                  class="mdc-data-table__row"
+                >
                   ${this.selectable
                     ? html`
                         <td
@@ -383,14 +392,21 @@ export class HaDataTable extends BaseElement {
 
   private _handleRowCheckboxChange(ev: Event) {
     const checkbox = ev.target as HaCheckbox;
-    const rowId = checkbox.parentElement!.parentElement!.getAttribute(
+    const rowId = checkbox.closest("tr")!.getAttribute("data-row-id");
-      "data-row-id"
-    );
 
     this._setRowChecked(rowId!, checkbox.checked);
     this.mdcFoundation.handleRowCheckboxChange(ev);
   }
 
+  private _handleRowClick(ev: Event) {
+    const rowId = (ev.target as HTMLElement)
+      .closest("tr")!
+      .getAttribute("data-row-id")!;
+    fireEvent(this, "row-click", {
+      id: rowId,
+    });
+  }
+
   private _setRowChecked(rowId: string, checked: boolean) {
     if (checked && !this._checkedRows.includes(rowId)) {
       this._checkedRows = [...this._checkedRows, rowId];

src/panels/lovelace/editor/unused-entities/hui-unused-entities.ts

@@ -30,6 +30,7 @@ import { showEditCardDialog } from "../card-editor/show-edit-card-dialog";
 import { HomeAssistant } from "../../../../types";
 import { Lovelace } from "../../types";
 import { LovelaceConfig } from "../../../../data/lovelace";
+import { fireEvent } from "../../../../common/dom/fire_event";
 
 @customElement("hui-unused-entities")
 export class HuiUnusedEntities extends LitElement {
@@ -53,8 +54,10 @@ export class HuiUnusedEntities extends LitElement {
       filterKey: "friendly_name",
       direction: "asc",
       template: (stateObj) => html`
+        <div @click=${this._handleEntityClicked} style="cursor: pointer;">
           <state-badge .hass=${this.hass!} .stateObj=${stateObj}></state-badge>
           ${stateObj.friendly_name}
+        </div>
       `,
     },
     entity_id: {
@@ -166,6 +169,15 @@ export class HuiUnusedEntities extends LitElement {
     }
   }
 
+  private _handleEntityClicked(ev: Event) {
+    const entityId = (ev.target as HTMLElement)
+      .closest("tr")!
+      .getAttribute("data-row-id")!;
+    fireEvent(this, "hass-more-info", {
+      entityId,
+    });
+  }
+
   private _selectView(): void {
     showSelectViewDialog(this, {
       lovelace: this.lovelace!,