hassio-supervisor-info feedback (#6737)

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

@@ -1,4 +1,3 @@
-import "@material/mwc-button";
 import {
   css,
   CSSResult,
@@ -8,6 +7,7 @@ import {
   property,
   TemplateResult,
 } from "lit-element";
+import "../../../src/components/buttons/ha-progress-button";
 import "../../../src/components/ha-card";
 import "../../../src/components/ha-settings-row";
 import "../../../src/components/ha-switch";
@@ -56,12 +56,12 @@ class HassioSupervisorInfo extends LitElement {
             </span>
             ${this.supervisorInfo.version !== this.supervisorInfo.version_latest
               ? html`
-                  <mwc-button
+                  <ha-progress-button
                     title="Update the supervisor"
-                    label="Update"
                     @click=${this._supervisorUpdate}
                   >
-                  </mwc-button>
+                    Update
+                  </ha-progress-button>
                 `
               : ""}
           </ha-settings-row>
@@ -74,21 +74,21 @@ class HassioSupervisorInfo extends LitElement {
             </span>
             ${this.supervisorInfo.channel === "beta"
               ? html`
-                  <mwc-button
+                  <ha-progress-button
                     @click=${this._toggleBeta}
-                    label="Leave beta channel"
                     title="Get stable updates for Home Assistant, supervisor and host"
                   >
-                  </mwc-button>
+                    Leave beta channel
+                  </ha-progress-button>
                 `
               : this.supervisorInfo.channel === "stable"
               ? html`
-                  <mwc-button
+                  <ha-progress-button
                     @click=${this._toggleBeta}
-                    label="Join beta channel"
                     title="Get beta updates for Home Assistant (RCs), supervisor and host"
                   >
-                  </mwc-button>
+                    Join beta channel
+                  </ha-progress-button>
                 `
               : ""}
           </ha-settings-row>
@@ -131,55 +131,21 @@ class HassioSupervisorInfo extends LitElement {
               </div>`}
         </div>
         <div class="card-actions">
-          <mwc-button
+          <ha-progress-button
             @click=${this._supervisorReload}
             title="Reload parts of the supervisor."
-            label="Reload"
           >
-          </mwc-button>
+            Reload
+          </ha-progress-button>
         </div>
       </ha-card>
     `;
   }
 
-  static get styles(): CSSResult[] {
+  private async _toggleBeta(ev: CustomEvent): Promise<void> {
-    return [
+    const button = ev.target as any;
-      haStyle,
+    button.progress = true;
-      hassioStyle,
-      css`
-        ha-card {
-          height: 100%;
-          justify-content: space-between;
-          flex-direction: column;
-          display: flex;
-        }
-        .card-actions {
-          height: 48px;
-          border-top: none;
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-        }
-        button.link {
-          color: var(--primary-color);
-        }
-        ha-settings-row {
-          padding: 0;
-          height: 54px;
-          width: 100%;
-        }
-        ha-settings-row[three-line] {
-          height: 74px;
-        }
-        ha-settings-row > span[slot="description"] {
-          white-space: normal;
-          color: var(--secondary-text-color);
-        }
-      `,
-    ];
-  }
 
-  private async _toggleBeta(): Promise<void> {
     if (this.supervisorInfo.channel === "stable") {
       const confirmed = await showConfirmationDialog(this, {
         title: "WARNING",
@@ -202,6 +168,7 @@ class HassioSupervisorInfo extends LitElement {
       });
 
       if (!confirmed) {
+        button.progress = false;
         return;
       }
     }
@@ -219,9 +186,13 @@ class HassioSupervisorInfo extends LitElement {
           typeof err === "object" ? err.body?.message || "Unkown error" : err,
       });
     }
+    button.progress = false;
   }
 
-  private async _supervisorReload(): Promise<void> {
+  private async _supervisorReload(ev: CustomEvent): Promise<void> {
+    const button = ev.target as any;
+    button.progress = true;
+
     try {
       await reloadSupervisor(this.hass);
     } catch (err) {
@@ -231,9 +202,25 @@ class HassioSupervisorInfo extends LitElement {
           typeof err === "object" ? err.body?.message || "Unkown error" : err,
       });
     }
+    button.progress = false;
   }
 
-  private async _supervisorUpdate(): Promise<void> {
+  private async _supervisorUpdate(ev: CustomEvent): Promise<void> {
+    const button = ev.target as any;
+    button.progress = true;
+
+    const confirmed = await showConfirmationDialog(this, {
+      title: "Update supervisor",
+      text: `Are you sure you want to upgrade supervisor to version ${this.supervisorInfo.version_latest}?`,
+      confirmText: "update",
+      dismissText: "cancel",
+    });
+
+    if (!confirmed) {
+      button.progress = false;
+      return;
+    }
+
     try {
       await updateSupervisor(this.hass);
     } catch (err) {
@@ -243,6 +230,7 @@ class HassioSupervisorInfo extends LitElement {
           typeof err === "object" ? err.body.message || "Unkown error" : err,
       });
     }
+    button.progress = false;
   }
 
   private async _diagnosticsInformationDialog(): Promise<void> {
@@ -274,6 +262,43 @@ class HassioSupervisorInfo extends LitElement {
       });
     }
   }
+
+  static get styles(): CSSResult[] {
+    return [
+      haStyle,
+      hassioStyle,
+      css`
+        ha-card {
+          height: 100%;
+          justify-content: space-between;
+          flex-direction: column;
+          display: flex;
+        }
+        .card-actions {
+          height: 48px;
+          border-top: none;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+        }
+        button.link {
+          color: var(--primary-color);
+        }
+        ha-settings-row {
+          padding: 0;
+          height: 54px;
+          width: 100%;
+        }
+        ha-settings-row[three-line] {
+          height: 74px;
+        }
+        ha-settings-row > div[slot="description"] {
+          white-space: normal;
+          color: var(--secondary-text-color);
+        }
+      `,
+    ];
+  }
 }
 
 declare global {