Fetch release notes for update entities that provides it

gallery/src/data/text.ts

@@ -0,0 +1,11 @@
+export const LONG_TEXT = `
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc laoreet velit ut elit volutpat, eget ultrices odio lacinia. In imperdiet malesuada est, nec sagittis metus ultricies quis. Sed nisl ex, convallis porttitor ante quis, hendrerit tristique justo. Mauris pharetra venenatis augue, eu maximus sem cursus in. Quisque sed consequat risus. Suspendisse facilisis ligula a odio consectetur condimentum. Curabitur vehicula elit nec augue mollis, et volutpat massa dictum.
+
+Nam pellentesque auctor rutrum. Suspendisse elit est, sodales vel diam nec, porttitor faucibus massa. Ut pretium ac orci eu pharetra. Praesent in nibh at magna viverra rutrum eu vitae tortor. Etiam eget sem ex. Fusce tristique odio nec lacus mattis, vitae tempor nunc malesuada. Maecenas faucibus magna vel libero maximus egestas. Vestibulum luctus semper velit, in lobortis risus tempus non. Curabitur bibendum ornare commodo. Quisque commodo neque sit amet tincidunt lacinia. Proin elementum ante velit, eu congue nulla semper quis. Pellentesque consequat vel nunc at scelerisque. Mauris sit amet venenatis diam, blandit viverra leo. Integer commodo laoreet orci.
+
+Curabitur ipsum tortor, sodales ut augue sed, commodo porttitor libero. Pellentesque molestie vitae mi consectetur tempor. In sed lectus consequat, lobortis neque non, semper ipsum. Etiam eget ex et nibh sagittis pulvinar lacinia ac mauris. Aenean ligula eros, viverra ac nibh at, venenatis semper quam. Sed interdum ligula sit amet massa tincidunt tincidunt. Suspendisse potenti. Aliquam egestas facilisis est, sed faucibus erat scelerisque id. Duis dolor quam, viverra vitae orci euismod, laoreet pellentesque justo. Nunc malesuada non erat at ullamcorper. Mauris eget posuere odio. Vestibulum turpis nunc, pharetra eget ante in, feugiat mollis justo. Proin porttitor, diam nec vulputate pretium, tellus arcu rhoncus turpis, a blandit nisi nulla quis arcu. Nunc ac ullamcorper ligula, nec facilisis leo.
+
+In vitae eros sollicitudin, iaculis ex eget, egestas orci. Etiam sed pretium lorem. Nam nisi enim, consectetur sit amet semper ac, semper pharetra diam. In pulvinar neque sapien, ac ullamcorper est lacinia a. Etiam tincidunt velit sed diam malesuada, eu ornare ex consectetur. Phasellus in imperdiet tellus. Sed bibendum, dui sit amet fringilla aliquet, enim odio sollicitudin lorem, vel semper turpis mauris vel mauris. Aenean congue magna ac massa cursus, in dictum orci commodo. Pellentesque mollis velit in sollicitudin tincidunt. Vestibulum et efficitur nulla.
+
+Quisque posuere, velit sed porttitor dapibus, neque augue fringilla felis, eu luctus nisi nisl nec ipsum. Curabitur pellentesque ac lectus eget ultricies. Vestibulum est dolor, lacinia pharetra vulputate a, facilisis a magna. Nam vitae arcu nibh. Praesent finibus blandit ante, ac gravida ex mollis eget. Donec quam est, pulvinar vitae neque ut, bibendum aliquam erat. Nullam mollis arcu at sem tincidunt, in tristique lectus facilisis. Aenean ut lacus vel nisl finibus iaculis non a turpis. Integer eget ipsum ante. Donec nunc neque, vestibulum ac magna ac, posuere scelerisque dui. Pellentesque massa nibh, rhoncus id dolor quis, placerat posuere turpis. Donec aliquet augue nisi, eu finibus dui auctor et. Vestibulum eu varius lorem. Quisque lectus ante, malesuada pretium risus eget, interdum mattis enim.
+`;

gallery/src/pages/components/ha-faded.ts

@@ -3,18 +3,7 @@ import { customElement } from "lit/decorators";
 import "../../../../src/components/ha-card";
 import "../../../../src/components/ha-faded";
 import "../../../../src/components/ha-markdown";
-
-const LONG_TEXT = `
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc laoreet velit ut elit volutpat, eget ultrices odio lacinia. In imperdiet malesuada est, nec sagittis metus ultricies quis. Sed nisl ex, convallis porttitor ante quis, hendrerit tristique justo. Mauris pharetra venenatis augue, eu maximus sem cursus in. Quisque sed consequat risus. Suspendisse facilisis ligula a odio consectetur condimentum. Curabitur vehicula elit nec augue mollis, et volutpat massa dictum.
-
-Nam pellentesque auctor rutrum. Suspendisse elit est, sodales vel diam nec, porttitor faucibus massa. Ut pretium ac orci eu pharetra. Praesent in nibh at magna viverra rutrum eu vitae tortor. Etiam eget sem ex. Fusce tristique odio nec lacus mattis, vitae tempor nunc malesuada. Maecenas faucibus magna vel libero maximus egestas. Vestibulum luctus semper velit, in lobortis risus tempus non. Curabitur bibendum ornare commodo. Quisque commodo neque sit amet tincidunt lacinia. Proin elementum ante velit, eu congue nulla semper quis. Pellentesque consequat vel nunc at scelerisque. Mauris sit amet venenatis diam, blandit viverra leo. Integer commodo laoreet orci.
-
-Curabitur ipsum tortor, sodales ut augue sed, commodo porttitor libero. Pellentesque molestie vitae mi consectetur tempor. In sed lectus consequat, lobortis neque non, semper ipsum. Etiam eget ex et nibh sagittis pulvinar lacinia ac mauris. Aenean ligula eros, viverra ac nibh at, venenatis semper quam. Sed interdum ligula sit amet massa tincidunt tincidunt. Suspendisse potenti. Aliquam egestas facilisis est, sed faucibus erat scelerisque id. Duis dolor quam, viverra vitae orci euismod, laoreet pellentesque justo. Nunc malesuada non erat at ullamcorper. Mauris eget posuere odio. Vestibulum turpis nunc, pharetra eget ante in, feugiat mollis justo. Proin porttitor, diam nec vulputate pretium, tellus arcu rhoncus turpis, a blandit nisi nulla quis arcu. Nunc ac ullamcorper ligula, nec facilisis leo.
-
-In vitae eros sollicitudin, iaculis ex eget, egestas orci. Etiam sed pretium lorem. Nam nisi enim, consectetur sit amet semper ac, semper pharetra diam. In pulvinar neque sapien, ac ullamcorper est lacinia a. Etiam tincidunt velit sed diam malesuada, eu ornare ex consectetur. Phasellus in imperdiet tellus. Sed bibendum, dui sit amet fringilla aliquet, enim odio sollicitudin lorem, vel semper turpis mauris vel mauris. Aenean congue magna ac massa cursus, in dictum orci commodo. Pellentesque mollis velit in sollicitudin tincidunt. Vestibulum et efficitur nulla.
-
-Quisque posuere, velit sed porttitor dapibus, neque augue fringilla felis, eu luctus nisi nisl nec ipsum. Curabitur pellentesque ac lectus eget ultricies. Vestibulum est dolor, lacinia pharetra vulputate a, facilisis a magna. Nam vitae arcu nibh. Praesent finibus blandit ante, ac gravida ex mollis eget. Donec quam est, pulvinar vitae neque ut, bibendum aliquam erat. Nullam mollis arcu at sem tincidunt, in tristique lectus facilisis. Aenean ut lacus vel nisl finibus iaculis non a turpis. Integer eget ipsum ante. Donec nunc neque, vestibulum ac magna ac, posuere scelerisque dui. Pellentesque massa nibh, rhoncus id dolor quis, placerat posuere turpis. Donec aliquet augue nisi, eu finibus dui auctor et. Vestibulum eu varius lorem. Quisque lectus ante, malesuada pretium risus eget, interdum mattis enim.
-`;
+import { LONG_TEXT } from "../../data/text";
 
 const SMALL_TEXT = "Lorem ipsum dolor sit amet, consectetur adipiscing elit.";
 

gallery/src/pages/more-info/update.ts

@@ -5,6 +5,7 @@ import {
   UPDATE_SUPPORT_BACKUP,
   UPDATE_SUPPORT_PROGRESS,
   UPDATE_SUPPORT_INSTALL,
+  UPDATE_SUPPORT_RELEASE_NOTES,
 } from "../../../../src/data/update";
 import "../../../../src/dialogs/more-info/more-info-content";
 import { getEntity } from "../../../../src/fake_data/entity";
@@ -13,6 +14,7 @@ import {
   provideHass,
 } from "../../../../src/fake_data/provide_hass";
 import "../../components/demo-more-infos";
+import { LONG_TEXT } from "../../data/text";
 
 const base_attributes = {
   title: "Awesome",
@@ -108,6 +110,24 @@ const ENTITIES = [
     latest_version: null,
     friendly_name: "Update without latest_version",
   }),
+  getEntity("update", "update16", "off", {
+    ...base_attributes,
+    friendly_name: "Update with release notes",
+    supported_features:
+      base_attributes.supported_features + UPDATE_SUPPORT_RELEASE_NOTES,
+  }),
+  getEntity("update", "update17", "off", {
+    ...base_attributes,
+    friendly_name: "Update with release notes error",
+    supported_features:
+      base_attributes.supported_features + UPDATE_SUPPORT_RELEASE_NOTES,
+  }),
+  getEntity("update", "update18", "off", {
+    ...base_attributes,
+    friendly_name: "Update with release notes loading",
+    supported_features:
+      base_attributes.supported_features + UPDATE_SUPPORT_RELEASE_NOTES,
+  }),
 ];
 
 @customElement("demo-more-info-update")
@@ -130,6 +150,24 @@ class DemoMoreInfoUpdate extends LitElement {
     const hass = provideHass(this._demoRoot);
     hass.updateTranslations(null, "en");
     hass.addEntities(ENTITIES);
+    hass.mockWS(
+      "update/release_notes",
+      (msg: { type: string; entity_id: string }) => {
+        if (msg.entity_id === "update.update16") {
+          return LONG_TEXT;
+        }
+        if (msg.entity_id === "update.update17") {
+          return Promise.reject({
+            code: "error",
+            message: "Could not fetch release notes",
+          });
+        }
+        if (msg.entity_id === "update.update18") {
+          return undefined;
+        }
+        return null;
+      }
+    );
   }
 }
 

src/data/update.ts

@@ -3,11 +3,13 @@ import type {
   HassEntityBase,
 } from "home-assistant-js-websocket";
 import { supportsFeature } from "../common/entity/supports-feature";
+import { HomeAssistant } from "../types";
 
 export const UPDATE_SUPPORT_INSTALL = 1;
 export const UPDATE_SUPPORT_SPECIFIC_VERSION = 2;
 export const UPDATE_SUPPORT_PROGRESS = 4;
 export const UPDATE_SUPPORT_BACKUP = 8;
+export const UPDATE_SUPPORT_RELEASE_NOTES = 16;
 
 interface UpdateEntityAttributes extends HassEntityAttributeBase {
   current_version: string | null;
@@ -34,3 +36,9 @@ export const updateCanInstall = (entity: UpdateEntity): boolean =>
 
 export const updateIsInstalling = (entity: UpdateEntity): boolean =>
   updateUsesProgress(entity) || !!entity.attributes.in_progress;
+
+export const updateReleaseNotes = (hass: HomeAssistant, entityId: string) =>
+  hass.callWS<string | null>({
+    type: "update/release_notes",
+    entity_id: entityId,
+  });

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

@@ -1,18 +1,23 @@
+import "../../../components/ha-alert";
+import "../../../components/ha-faded";
 import "@material/mwc-button/mwc-button";
 import "@material/mwc-linear-progress/mwc-linear-progress";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import { supportsFeature } from "../../../common/entity/supports-feature";
 import "../../../components/ha-checkbox";
+import "../../../components/ha-circular-progress";
 import "../../../components/ha-formfield";
 import "../../../components/ha-markdown";
 import { UNAVAILABLE_STATES } from "../../../data/entity";
 import {
-  updateIsInstalling,
   UpdateEntity,
+  updateIsInstalling,
+  updateReleaseNotes,
   UPDATE_SUPPORT_BACKUP,
   UPDATE_SUPPORT_INSTALL,
   UPDATE_SUPPORT_PROGRESS,
+  UPDATE_SUPPORT_RELEASE_NOTES,
   UPDATE_SUPPORT_SPECIFIC_VERSION,
 } from "../../../data/update";
 import type { HomeAssistant } from "../../../types";
@@ -23,6 +28,10 @@ class MoreInfoUpdate extends LitElement {
 
   @property({ attribute: false }) public stateObj?: UpdateEntity;
 
+  @state() private _releaseNotes?: string | null;
+
+  @state() private _error?: string;
+
   protected render(): TemplateResult {
     if (
       !this.hass ||
@@ -50,6 +59,9 @@ class MoreInfoUpdate extends LitElement {
       ${this.stateObj.attributes.title
         ? html`<h3>${this.stateObj.attributes.title}</h3>`
         : ""}
+      ${this._error
+        ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
+        : ""}
 
       <div class="row">
         <div class="key">
@@ -89,11 +101,19 @@ class MoreInfoUpdate extends LitElement {
             </div>
           </div>`
         : ""}
-      ${this.stateObj.attributes.release_summary
+      ${supportsFeature(this.stateObj!, UPDATE_SUPPORT_RELEASE_NOTES) &&
+      !this._error
+        ? this._releaseNotes === undefined
+          ? html`<ha-circular-progress active></ha-circular-progress>`
+          : html`<hr />
+              <ha-faded>
+                <ha-markdown .content=${this._releaseNotes}></ha-markdown>
+              </ha-faded> `
+        : this.stateObj.attributes.release_summary
         ? html`<hr />
             <ha-markdown
               .content=${this.stateObj.attributes.release_summary}
-            ></ha-markdown> `
+            ></ha-markdown>`
         : ""}
       ${supportsFeature(this.stateObj, UPDATE_SUPPORT_BACKUP)
         ? html`<hr />
@@ -136,6 +156,18 @@ class MoreInfoUpdate extends LitElement {
     `;
   }
 
+  protected firstUpdated(): void {
+    if (supportsFeature(this.stateObj!, UPDATE_SUPPORT_RELEASE_NOTES)) {
+      updateReleaseNotes(this.hass, this.stateObj!.entity_id)
+        .then((result) => {
+          this._releaseNotes = result;
+        })
+        .catch((err) => {
+          this._error = err.message;
+        });
+    }
+  }
+
   get _shouldCreateBackup(): boolean | null {
     if (!supportsFeature(this.stateObj!, UPDATE_SUPPORT_BACKUP)) {
       return null;
@@ -201,6 +233,10 @@ class MoreInfoUpdate extends LitElement {
       a {
         color: var(--primary-color);
       }
+      ha-circular-progress {
+        width: 100%;
+        justify-content: center;
+      }
     `;
   }
 }