Show group members in more info (#26178)

* Should group members in more info

* Fix flickering

src/dialogs/more-info/ha-more-info-dialog.ts

@@ -15,6 +15,7 @@ import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { cache } from "lit/directives/cache";
 import { join } from "lit/directives/join";
+import { keyed } from "lit/directives/keyed";
 import { dynamicElement } from "../../common/dom/dynamic-element-directive";
 import { fireEvent } from "../../common/dom/fire_event";
 import { stopPropagation } from "../../common/dom/stop_propagation";
@@ -96,6 +97,8 @@ export class MoreInfoDialog extends LitElement {
 
   @property({ type: Boolean, reflect: true }) public large = false;
 
+  @state() private _parentEntityIds: string[] = [];
+
   @state() private _entityId?: string | null;
 
   @state() private _currView: View = DEFAULT_VIEW;
@@ -207,8 +210,16 @@ export class MoreInfoDialog extends LitElement {
   private _goBack() {
     if (this._childView) {
       this._childView = undefined;
-    } else {
+      return;
+    }
+    if (this._initialView !== this._currView) {
       this._setView(this._initialView);
+      return;
+    }
+    if (this._parentEntityIds.length > 0) {
+      this._entityId = this._parentEntityIds.pop();
+      this._currView = DEFAULT_VIEW;
+      this._loadEntityRegistryEntry();
     }
   }
 
@@ -302,7 +313,9 @@ export class MoreInfoDialog extends LitElement {
     const isDefaultView = this._currView === DEFAULT_VIEW && !this._childView;
     const isSpecificInitialView =
       this._initialView !== DEFAULT_VIEW && !this._childView;
-    const showCloseIcon = isDefaultView || isSpecificInitialView;
+    const showCloseIcon =
+      (isDefaultView && this._parentEntityIds.length === 0) ||
+      isSpecificInitialView;
 
     const context = stateObj
       ? getEntityContext(stateObj, this.hass)
@@ -521,8 +534,11 @@ export class MoreInfoDialog extends LitElement {
           @show-child-view=${this._showChildView}
           @entity-entry-updated=${this._entryUpdated}
           @toggle-edit-mode=${this._handleToggleInfoEditModeEvent}
+          @hass-more-info=${this._handleMoreInfoEvent}
         >
-          ${cache(
+          ${keyed(
+            this._entityId,
+            cache(
               this._childView
                 ? html`
                     <div class="child-view">
@@ -569,6 +585,7 @@ export class MoreInfoDialog extends LitElement {
                             ></ha-related-items>
                           `
                         : nothing
+            )
           )}
         </div>
       </ha-dialog>
@@ -602,6 +619,19 @@ export class MoreInfoDialog extends LitElement {
     window.addEventListener("show-dialog", this._disableEscapeKeyClose);
   }
 
+  private _handleMoreInfoEvent(ev) {
+    ev.stopPropagation();
+    const entityId = ev.detail.entityId;
+    if (!entityId) {
+      return;
+    }
+    this._parentEntityIds = [...this._parentEntityIds, this._entityId!];
+    this._entityId = entityId;
+    this._currView = DEFAULT_VIEW;
+    this._childView = undefined;
+    this._loadEntityRegistryEntry();
+  }
+
   private _enableEscapeKeyClose = () => {
     this._isEscapeEnabled = true;
   };
@@ -667,6 +697,7 @@ export class MoreInfoDialog extends LitElement {
           display: flex;
           flex-direction: column;
           align-items: flex-start;
+          margin: 0 0 -10px 0;
         }
 
         .title p {

src/dialogs/more-info/more-info-content.ts

@@ -1,11 +1,15 @@
 import type { HassEntity } from "home-assistant-js-websocket";
-import { LitElement, nothing } from "lit";
+import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
+import memoizeOne from "memoize-one";
+import { dynamicElement } from "../../common/dom/dynamic-element-directive";
+import "../../components/ha-badge";
 import type { ExtEntityRegistryEntry } from "../../data/entity_registry";
+import type { TileCardConfig } from "../../panels/lovelace/cards/types";
 import { importMoreInfoControl } from "../../panels/lovelace/custom-card-helpers";
+import "../../panels/lovelace/sections/hui-section";
 import type { HomeAssistant } from "../../types";
 import { stateMoreInfoType } from "./state_more_info_control";
-import { dynamicElement } from "../../common/dom/dynamic-element-directive";
 
 @customElement("more-info-content")
 class MoreInfoContent extends LitElement {
@@ -33,13 +37,47 @@ class MoreInfoContent extends LitElement {
     }
 
     if (!moreInfoType) return nothing;
-    return dynamicElement(moreInfoType, {
+
+    return html`
+      ${dynamicElement(moreInfoType, {
         hass: this.hass,
         stateObj: this.stateObj,
         entry: this.entry,
         editMode: this.editMode,
-    });
+      })}
+      ${this.stateObj.attributes.entity_id &&
+      this.stateObj.attributes.entity_id.length
+        ? html`
+            <hui-section
+              .hass=${this.hass}
+              .config=${this._entitiesSectionConfig(
+                this.stateObj.attributes.entity_id
+              )}
+            >
+            </hui-section>
+          `
+        : nothing}
+    `;
   }
+
+  private _entitiesSectionConfig = memoizeOne((entityIds: string[]) => ({
+    type: "grid",
+    cards: entityIds.map(
+      (entityId) =>
+        ({
+          type: "tile",
+          entity: entityId,
+        }) as TileCardConfig
+    ),
+  }));
+
+  static styles = css`
+    hui-section {
+      width: 100%;
+      display: block;
+      margin-top: 16px;
+    }
+  `;
 }
 
 declare global {