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,54 +534,58 @@ 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._childView
+            this._entityId,
-              ? html`
+            cache(
-                  <div class="child-view">
+              this._childView
-                    ${dynamicElement(this._childView.viewTag, {
-                      hass: this.hass,
-                      entry: this._entry,
-                      params: this._childView.viewParams,
-                    })}
-                  </div>
-                `
-              : this._currView === "info"
                 ? html`
-                    <ha-more-info-info
+                    <div class="child-view">
-                      dialogInitialFocus
+                      ${dynamicElement(this._childView.viewTag, {
-                      .hass=${this.hass}
+                        hass: this.hass,
-                      .entityId=${this._entityId}
+                        entry: this._entry,
-                      .entry=${this._entry}
+                        params: this._childView.viewParams,
-                      .editMode=${this._infoEditMode}
+                      })}
-                    ></ha-more-info-info>
+                    </div>
                   `
-                : this._currView === "history"
+                : this._currView === "info"
                   ? html`
-                      <ha-more-info-history-and-logbook
+                      <ha-more-info-info
+                        dialogInitialFocus
                         .hass=${this.hass}
                         .entityId=${this._entityId}
-                      ></ha-more-info-history-and-logbook>
+                        .entry=${this._entry}
+                        .editMode=${this._infoEditMode}
+                      ></ha-more-info-info>
                     `
-                  : this._currView === "settings"
+                  : this._currView === "history"
                     ? html`
-                        <ha-more-info-settings
+                        <ha-more-info-history-and-logbook
                           .hass=${this.hass}
                           .entityId=${this._entityId}
-                          .entry=${this._entry}
+                        ></ha-more-info-history-and-logbook>
-                        ></ha-more-info-settings>
                       `
-                    : this._currView === "related"
+                    : this._currView === "settings"
                       ? html`
-                          <ha-related-items
+                          <ha-more-info-settings
                             .hass=${this.hass}
-                            .itemId=${entityId}
+                            .entityId=${this._entityId}
-                            .itemType=${SearchableDomains.has(domain)
+                            .entry=${this._entry}
-                              ? (domain as ItemType)
+                          ></ha-more-info-settings>
-                              : "entity"}
-                          ></ha-related-items>
                         `
-                      : nothing
+                      : this._currView === "related"
+                        ? html`
+                            <ha-related-items
+                              .hass=${this.hass}
+                              .itemId=${entityId}
+                              .itemType=${SearchableDomains.has(domain)
+                                ? (domain as ItemType)
+                                : "entity"}
+                            ></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, {
+
-      hass: this.hass,
+    return html`
-      stateObj: this.stateObj,
+      ${dynamicElement(moreInfoType, {
-      entry: this.entry,
+        hass: this.hass,
-      editMode: this.editMode,
+        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 {