Put attributes in more-info into a foldable section (#9220)

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

src/components/ha-attributes.ts

@@ -1,20 +1,26 @@
 import { HassEntity } from "home-assistant-js-websocket";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import { until } from "lit/directives/until";
 import { haStyle } from "../resources/styles";
+import { HomeAssistant } from "../types";
 import hassAttributeUtil, {
   formatAttributeName,
 } from "../util/hass-attributes-util";
+import "./ha-expansion-panel";
 
 let jsYamlPromise: Promise<typeof import("js-yaml")>;
 
 @customElement("ha-attributes")
 class HaAttributes extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
   @property() public stateObj?: HassEntity;
 
   @property({ attribute: "extra-filters" }) public extraFilters?: string;
 
+  @state() private _expanded = false;
+
   protected render(): TemplateResult {
     if (!this.stateObj) {
       return html``;
@@ -30,24 +36,37 @@ class HaAttributes extends LitElement {
     }
 
     return html`
-      <hr />
-      <div>
-        ${attributes.map(
-          (attribute) => html`
-            <div class="data-entry">
-              <div class="key">${formatAttributeName(attribute)}</div>
-              <div class="value">${this.formatAttribute(attribute)}</div>
-            </div>
-          `
+      <ha-expansion-panel
+        .header=${this.hass.localize(
+          "ui.components.attributes.expansion_header"
         )}
-        ${this.stateObj.attributes.attribution
-          ? html`
-              <div class="attribution">
-                ${this.stateObj.attributes.attribution}
-              </div>
-            `
-          : ""}
-      </div>
+        outlined
+        @expanded-will-change=${this.expandedChanged}
+      >
+        <div class="attribute-container">
+          ${this._expanded
+            ? html`
+                ${attributes.map(
+                  (attribute) => html`
+                    <div class="data-entry">
+                      <div class="key">${formatAttributeName(attribute)}</div>
+                      <div class="value">
+                        ${this.formatAttribute(attribute)}
+                      </div>
+                    </div>
+                  `
+                )}
+                ${this.stateObj.attributes.attribution
+                  ? html`
+                      <div class="attribution">
+                        ${this.stateObj.attributes.attribution}
+                      </div>
+                    `
+                  : ""}
+              `
+            : ""}
+        </div>
+      </ha-expansion-panel>
     `;
   }
 
@@ -55,6 +74,9 @@ class HaAttributes extends LitElement {
     return [
       haStyle,
       css`
+        .attribute-container {
+          margin-bottom: 8px;
+        }
         .data-entry {
           display: flex;
           flex-direction: row;
@@ -135,6 +157,10 @@ class HaAttributes extends LitElement {
     }
     return Array.isArray(value) ? value.join(", ") : value;
   }
+
+  private expandedChanged(ev) {
+    this._expanded = ev.detail.expanded;
+  }
 }
 
 declare global {

src/components/ha-expansion-panel.ts

@@ -3,6 +3,7 @@ import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, query } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { fireEvent } from "../common/dom/fire_event";
+import { nextRender } from "../common/util/render-status";
 import "./ha-svg-icon";
 
 @customElement("ha-expansion-panel")
@@ -37,17 +38,25 @@ class HaExpansionPanel extends LitElement {
     this._container.style.removeProperty("height");
   }
 
-  private _toggleContainer(): void {
+  private async _toggleContainer(): Promise<void> {
+    const newExpanded = !this.expanded;
+    fireEvent(this, "expanded-will-change", { expanded: newExpanded });
+
+    if (newExpanded) {
+      // allow for dynamic content to be rendered
+      await nextRender();
+    }
+
     const scrollHeight = this._container.scrollHeight;
     this._container.style.height = `${scrollHeight}px`;
 
-    if (this.expanded) {
+    if (!newExpanded) {
       setTimeout(() => {
         this._container.style.height = "0px";
       }, 0);
     }
 
-    this.expanded = !this.expanded;
+    this.expanded = newExpanded;
     fireEvent(this, "expanded-changed", { expanded: this.expanded });
   }
 
@@ -111,5 +120,8 @@ declare global {
     "expanded-changed": {
       expanded: boolean;
     };
+    "expanded-will-change": {
+      expanded: boolean;
+    };
   }
 }

src/dialogs/more-info/controls/more-info-cover.js

@@ -65,6 +65,7 @@ class MoreInfoCover extends LocalizeMixin(PolymerElement) {
         </div>
       </div>
       <ha-attributes
+        hass="[[hass]]"
         state-obj="[[stateObj]]"
         extra-filters="current_position,current_tilt_position"
       ></ha-attributes>

src/dialogs/more-info/controls/more-info-default.ts

@@ -15,7 +15,10 @@ class MoreInfoDefault extends LitElement {
       return html``;
     }
 
-    return html` <ha-attributes .stateObj=${this.stateObj}></ha-attributes> `;
+    return html`<ha-attributes
+      .hass=${this.hass}
+      .stateObj=${this.stateObj}
+    ></ha-attributes>`;
   }
 }
 

src/dialogs/more-info/controls/more-info-fan.js

@@ -113,6 +113,7 @@ class MoreInfoFan extends LocalizeMixin(EventsMixin(PolymerElement)) {
       </div>
 
       <ha-attributes
+        hass="[[hass]]"
         state-obj="[[stateObj]]"
         extra-filters="percentage_step,speed,preset_mode,preset_modes,speed_list,percentage,oscillating,direction"
       ></ha-attributes>

src/dialogs/more-info/controls/more-info-light.ts

@@ -226,6 +226,7 @@ class MoreInfoLight extends LitElement {
             `
           : ""}
         <ha-attributes
+          .hass=${this.hass}
           .stateObj=${this.stateObj}
           extra-filters="brightness,color_temp,white_value,effect_list,effect,hs_color,rgb_color,rgbw_color,rgbww_color,xy_color,min_mireds,max_mireds,entity_id,supported_color_modes,color_mode"
         ></ha-attributes>

src/dialogs/more-info/controls/more-info-lock.js

@@ -39,6 +39,7 @@ class MoreInfoLock extends LocalizeMixin(PolymerElement) {
         >
       </template>
       <ha-attributes
+        hass="[[hass]]"
         state-obj="[[stateObj]]"
         extra-filters="code_format"
       ></ha-attributes>

src/dialogs/more-info/controls/more-info-person.ts

@@ -24,6 +24,7 @@ class MoreInfoPerson extends LitElement {
 
     return html`
       <ha-attributes
+        .hass=${this.hass}
         .stateObj=${this.stateObj}
         extra-filters="id,user_id,editable"
       ></ha-attributes>

src/dialogs/more-info/controls/more-info-remote.ts

@@ -48,6 +48,7 @@ class MoreInfoRemote extends LitElement {
         : ""}
 
       <ha-attributes
+        .hass=${this.hass}
         .stateObj=${this.stateObj}
         .extraFilters=${filterExtraAttributes}
       ></ha-attributes>

src/dialogs/more-info/controls/more-info-timer.ts

@@ -18,6 +18,7 @@ class MoreInfoTimer extends LitElement {
 
     return html`
       <ha-attributes
+        .hass=${this.hass}
         .stateObj=${this.stateObj}
         extra-filters="remaining"
       ></ha-attributes>

src/dialogs/more-info/controls/more-info-vacuum.ts

@@ -190,6 +190,7 @@ class MoreInfoVacuum extends LitElement {
         : ""}
 
       <ha-attributes
+        .hass=${this.hass}
         .stateObj=${this.stateObj}
         .extraFilters=${filterExtraAttributes}
       ></ha-attributes>

src/translations/en.json

@@ -522,6 +522,9 @@
       "calendar": {
         "my_calendars": "My Calendars",
         "today": "Today"
+      },
+      "attributes": {
+        "expansion_header": "Attributes"
       }
     },
     "dialogs": {