link to updates page (#12423)

src/panels/config/dashboard/ha-config-dashboard.ts

@@ -131,9 +131,8 @@ class HaConfigDashboard extends LitElement {
   });
 
   protected render(): TemplateResult {
-    const canInstallUpdates = this._filterUpdateEntitiesWithInstall(
-      this.hass.states
-    );
+    const [canInstallUpdates, totalUpdates] =
+      this._filterUpdateEntitiesWithInstall(this.hass.states);
 
     return html`
       <ha-app-layout>
@@ -177,8 +176,19 @@ class HaConfigDashboard extends LitElement {
                 <ha-config-updates
                   .hass=${this.hass}
                   .narrow=${this.narrow}
+                  .total=${totalUpdates}
                   .updateEntities=${canInstallUpdates}
                 ></ha-config-updates>
+                ${totalUpdates > canInstallUpdates.length
+                  ? html`<a class="button" href="/config/updates">
+                      ${this.hass.localize(
+                        "ui.panel.config.updates.more_updates",
+                        {
+                          count: totalUpdates - canInstallUpdates.length,
+                        }
+                      )}
+                    </a>`
+                  : ""}
               </ha-card>`
             : ""}
           <ha-card outlined>
@@ -259,10 +269,15 @@ class HaConfigDashboard extends LitElement {
   );
 
   private _filterUpdateEntitiesWithInstall = memoizeOne(
-    (entities: HassEntities) =>
-      this._filterUpdateEntities(entities).filter((entity) =>
+    (entities: HassEntities): [UpdateEntity[], number] => {
+      const updates = this._filterUpdateEntities(entities).filter((entity) =>
         updateCanInstall(entity)
-      )
+      );
+      return [
+        updates.slice(0, updates.length === 3 ? updates.length : 2),
+        updates.length,
+      ];
+    }
   );
 
   private _showQuickBar(): void {
@@ -320,6 +335,11 @@ class HaConfigDashboard extends LitElement {
           text-decoration: none;
           color: var(--primary-text-color);
         }
+        a.button {
+          display: block;
+          color: var(--primary-color);
+          padding: 16px;
+        }
         .title {
           font-size: 16px;
           padding: 16px;

src/panels/config/dashboard/ha-config-updates.ts

@@ -19,22 +19,20 @@ class HaConfigUpdates extends LitElement {
   @property({ attribute: false })
   public updateEntities?: UpdateEntity[];
 
-  @property({ type: Boolean, reflect: true }) showAll = false;
+  @property({ type: Number })
+  public total?: number;
 
   protected render(): TemplateResult {
     if (!this.updateEntities?.length) {
       return html``;
     }
 
-    const updates =
-      this.showAll || this.updateEntities.length <= 3
-        ? this.updateEntities
-        : this.updateEntities.slice(0, 2);
+    const updates = this.updateEntities;
 
     return html`
       <div class="title">
         ${this.hass.localize("ui.panel.config.updates.title", {
-          count: this.updateEntities.length,
+          count: this.total || this.updateEntities.length,
         })}
       </div>
       ${updates.map(
@@ -70,15 +68,6 @@ class HaConfigUpdates extends LitElement {
           </paper-icon-item>
         `
       )}
-      ${!this.showAll && this.updateEntities.length >= 4
-        ? html`
-            <button class="show-more" @click=${this._showAllClicked}>
-              ${this.hass.localize("ui.panel.config.updates.more_updates", {
-                count: this.updateEntities!.length - updates.length,
-              })}
-            </button>
-          `
-        : ""}
     `;
   }
 
@@ -88,10 +77,6 @@ class HaConfigUpdates extends LitElement {
     });
   }
 
-  private _showAllClicked() {
-    this.showAll = true;
-  }
-
   static get styles(): CSSResultGroup[] {
     return [
       css`