Change logic for the new version handling

hassio/src/addon-store/hassio-addon-repository.ts

@@ -23,9 +23,9 @@ import { hassioStyle } from "../resources/hassio-style";
 class HassioAddonRepositoryEl extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public repo!: HassioAddonRepository;
+  @property({ attribute: false }) public repo!: HassioAddonRepository;
 
-  @property() public addons!: HassioAddonInfo[];
+  @property({ attribute: false }) public addons!: HassioAddonInfo[];
 
   @property() public filter!: string;
 
@@ -78,18 +78,18 @@ class HassioAddonRepositoryEl extends LitElement {
                     .title=${addon.name}
                     .description=${addon.description}
                     .available=${addon.available}
-                    .icon=${addon.installed && addon.installed !== addon.version
+                    .icon=${addon.installed && addon.update_available
                       ? mdiArrowUpBoldCircle
                       : mdiPuzzle}
                     .iconTitle=${addon.installed
-                      ? addon.installed !== addon.version
+                      ? addon.update_available
                         ? "New version available"
                         : "Add-on is installed"
                       : addon.available
                       ? "Add-on is not installed"
                       : "Add-on is not available on your system"}
                     .iconClass=${addon.installed
-                      ? addon.installed !== addon.version
+                      ? addon.update_available
                         ? "update"
                         : "installed"
                       : !addon.available
@@ -104,7 +104,7 @@ class HassioAddonRepositoryEl extends LitElement {
                       : undefined}
                     .showTopbar=${addon.installed || !addon.available}
                     .topbarClass=${addon.installed
-                      ? addon.installed !== addon.version
+                      ? addon.update_available
                         ? "update"
                         : "installed"
                       : !addon.available

hassio/src/addon-view/info/hassio-addon-info.ts

@@ -135,7 +135,7 @@ class HassioAddonInfo extends LitElement {
 
   protected render(): TemplateResult {
     return html`
-      ${this._computeUpdateAvailable
+      ${this.addon.update_available
         ? html`
             <ha-card header="Update available! 🎉">
               <div class="card-content">
@@ -609,15 +609,6 @@ class HassioAddonInfo extends LitElement {
     return this.addon?.state === "started";
   }
 
-  private get _computeUpdateAvailable(): boolean | "" {
-    return (
-      this.addon &&
-      !this.addon.detached &&
-      this.addon.version &&
-      this.addon.version !== this.addon.version_latest
-    );
-  }
-
   private get _pathWebui(): string | null {
     return (
       this.addon.webui &&

hassio/src/components/hassio-card-content.ts

@@ -50,7 +50,7 @@ class HassioCardContent extends LitElement {
           `
         : html`
             <ha-svg-icon
-              class=${this.iconClass}
+              class=${this.iconClass!}
               .path=${this.icon}
               .title=${this.iconTitle}
             ></ha-svg-icon>

hassio/src/dashboard/hassio-addons.ts

@@ -52,22 +52,22 @@ class HassioAddons extends LitElement {
                           .title=${addon.name}
                           .description=${addon.description}
                           available
-                          .showTopbar=${addon.installed !== addon.version}
+                          .showTopbar=${addon.installed ||
+                          addon.update_available!}
                           topbarClass="update"
-                          .icon=${addon.installed !== addon.version
+                          .icon=${addon.update_available!
                             ? mdiArrowUpBoldCircle
                             : mdiPuzzle}
                           .iconTitle=${addon.state !== "started"
                             ? "Add-on is stopped"
-                            : addon.installed !== addon.version
+                            : addon.update_available!
                             ? "New version available"
                             : "Add-on is running"}
-                          .iconClass=${addon.installed &&
-                          addon.installed !== addon.version
+                          .iconClass=${addon.update_available
                             ? addon.state === "started"
                               ? "update"
                               : "update stopped"
-                            : addon.installed && addon.state === "started"
+                            : addon.state === "started"
                             ? "running"
                             : "stopped"}
                           .iconImage=${atLeastVersion(

hassio/src/dashboard/hassio-update.ts

@@ -5,11 +5,11 @@ import {
   CSSResult,
   customElement,
   html,
-  internalProperty,
   LitElement,
   property,
   TemplateResult,
 } from "lit-element";
+import memoizeOne from "memoize-one";
 import "../../../src/components/buttons/ha-progress-button";
 import "../../../src/components/ha-card";
 import "../../../src/components/ha-svg-icon";
@@ -21,6 +21,7 @@ import {
 import { HassioHassOSInfo } from "../../../src/data/hassio/host";
 import {
   HassioHomeAssistantInfo,
+  HassioInfo,
   HassioSupervisorInfo,
 } from "../../../src/data/hassio/supervisor";
 import {
@@ -39,35 +40,33 @@ export class HassioUpdate extends LitElement {
 
   @property({ attribute: false }) public hassOsInfo?: HassioHassOSInfo;
 
-  @property() public supervisorInfo: HassioSupervisorInfo;
+  @property({ attribute: false }) public supervisorInfo?: HassioSupervisorInfo;
 
-  @internalProperty() private _error?: string;
+  private _pendingUpdates = memoizeOne(
+    (
+      core?: HassioHomeAssistantInfo,
+      supervisor?: HassioSupervisorInfo,
+      os?: HassioHassOSInfo
+    ): number => {
+      return [core, supervisor, os].filter(
+        (value) => !!value && value?.version !== value?.version_latest
+      ).length;
+    }
+  );
 
   protected render(): TemplateResult {
-    const updatesAvailable: number = [
+    const updatesAvailable = this._pendingUpdates(
       this.hassInfo,
       this.supervisorInfo,
-      this.hassOsInfo,
-    ].filter((value) => {
-      return (
-        !!value &&
-        (value.version_latest
-          ? value.version !== value.version_latest
-          : value.version_latest
-          ? value.version !== value.version_latest
-          : false)
-      );
-    }).length;
+      this.hassOsInfo
+    );
 
     if (!updatesAvailable) {
       return html``;
     }
 
     return html`
       <div class="content">
-        ${this._error
-          ? html` <div class="error">Error: ${this._error}</div> `
-          : ""}
         <h1>
           ${updatesAvailable > 1
             ? "Updates Available 🎉"
@@ -76,26 +75,24 @@ export class HassioUpdate extends LitElement {
         <div class="card-group">
           ${this._renderUpdateCard(
             "Home Assistant Core",
-            this.hassInfo.version,
-            this.hassInfo.version_latest,
+            this.hassInfo,
             "hassio/homeassistant/update",
             `https://${
               this.hassInfo.version_latest.includes("b") ? "rc" : "www"
-            }.home-assistant.io/latest-release-notes/`,
-            mdiHomeAssistant
+            }.home-assistant.io/latest-release-notes/`
           )}
           ${this._renderUpdateCard(
             "Supervisor",
-            this.supervisorInfo.version,
-            this.supervisorInfo.version_latest,
+            this.supervisorInfo,
             "hassio/supervisor/update",
-            `https://github.com//home-assistant/hassio/releases/tag/${this.supervisorInfo.version_latest}`
+            `https://github.com//home-assistant/hassio/releases/tag/${
+              this.supervisorInfo!.version_latest
+            }`
           )}
           ${this.hassOsInfo
             ? this._renderUpdateCard(
                 "Operating System",
-                this.hassOsInfo.version,
-                this.hassOsInfo.version_latest,
+                this.hassOsInfo,
                 "hassio/os/update",
                 `https://github.com//home-assistant/hassos/releases/tag/${this.hassOsInfo.version_latest}`
               )
@@ -107,28 +104,22 @@ export class HassioUpdate extends LitElement {
 
   private _renderUpdateCard(
     name: string,
-    curVersion: string,
-    lastVersion: string,
+    object: HassioHomeAssistantInfo | HassioSupervisorInfo | HassioHassOSInfo,
     apiPath: string,
-    releaseNotesUrl: string,
-    icon?: string
+    releaseNotesUrl: string
   ): TemplateResult {
-    if (!lastVersion || lastVersion === curVersion) {
+    if (!object.version_latest || object.version_latest === object.version) {
       return html``;
     }
     return html`
       <ha-card>
         <div class="card-content">
-          ${icon
-            ? html`
-                <div class="icon">
-                  <ha-svg-icon .path=${icon}></ha-svg-icon>
-                </div>
-              `
-            : ""}
-          <div class="update-heading">${name} ${lastVersion}</div>
+          <div class="icon">
+            <ha-svg-icon .path=${mdiHomeAssistant}></ha-svg-icon>
+          </div>
+          <div class="update-heading">${name} ${object.version_latest}</div>
           <div class="warning">
-            You are currently running version ${curVersion}
+            You are currently running version ${object.version}
           </div>
         </div>
         <div class="card-actions">
@@ -138,7 +129,7 @@ export class HassioUpdate extends LitElement {
           <ha-progress-button
             .apiPath=${apiPath}
             .name=${name}
-            .version=${lastVersion}
+            .version=${object.version_latest}
             @click=${this._confirmUpdate}
           >
             Update

hassio/src/hassio-panel-router.ts

@@ -25,7 +25,7 @@ class HassioPanelRouter extends HassRouterPage {
 
   @property({ type: Boolean }) public narrow!: boolean;
 
-  @property({ attribute: false }) public supervisorInfo: HassioSupervisorInfo;
+  @property({ attribute: false }) public supervisorInfo?: HassioSupervisorInfo;
 
   @property({ attribute: false }) public hassioInfo!: HassioInfo;
 

hassio/src/hassio-router.ts

@@ -66,7 +66,7 @@ class HassioRouter extends HassRouterPage {
     },
   };
 
-  @internalProperty() private _supervisorInfo: HassioSupervisorInfo;
+  @internalProperty() private _supervisorInfo?: HassioSupervisorInfo;
 
   @internalProperty() private _hostInfo: HassioHostInfo;
 

hassio/src/system/hassio-host-info.ts

@@ -108,8 +108,8 @@ class HassioHostInfo extends LitElement {
             <span slot="description">
               ${this.hostInfo.operating_system}
             </span>
-            ${this.hostInfo.version !== this.hostInfo.version_latest &&
-            this.hostInfo.features.includes("hassos")
+            ${this.hostInfo.features.includes("hassos") &&
+            this.hostInfo.update_available
               ? html`
                   <ha-progress-button
                     title="Update the host OS"

hassio/src/system/hassio-supervisor-info.ts

@@ -62,7 +62,8 @@ const ISSUES = {
 class HassioSupervisorInfo extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public supervisorInfo!: HassioSupervisorInfoType;
+  @property({ attribute: false })
+  public supervisorInfo!: HassioSupervisorInfoType;
 
   @property() public hostInfo!: HassioHostInfoType;
 
@@ -85,7 +86,7 @@ class HassioSupervisorInfo extends LitElement {
             <span slot="description">
               ${this.supervisorInfo.version_latest}
             </span>
-            ${this.supervisorInfo.version !== this.supervisorInfo.version_latest
+            ${this.supervisorInfo.update_available
               ? html`
                   <ha-progress-button
                     title="Update the supervisor"