Use progress button when adding/updating mount (#18182)

home-assistant · Oct 11, 2023 · 4293192 · 4293192
1 parent ceaceaf
commit 4293192
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 11 deletions.
diff --git a/src/components/buttons/ha-progress-button.ts b/src/components/buttons/ha-progress-button.ts
@@ -1,6 +1,13 @@
 import "@material/mwc-button";
 import { mdiAlertOctagram, mdiCheckBold } from "@mdi/js";
-import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import {
+  css,
+  CSSResultGroup,
+  html,
+  LitElement,
+  nothing,
+  TemplateResult,
+} from "lit";
 import { customElement, property, state } from "lit/decorators";
 import "../ha-circular-progress";
 import "../ha-svg-icon";
@@ -27,7 +34,7 @@ export class HaProgressButton extends LitElement {
         <slot></slot>
       </mwc-button>
       ${!overlay
-        ? ""
+        ? nothing
         : html`
             <div class="progress">
               ${this._result === "success"

diff --git a/src/panels/config/storage/dialog-mount-view.ts b/src/panels/config/storage/dialog-mount-view.ts
@@ -1,9 +1,14 @@
+import { mdiHelpCircle } from "@mdi/js";
 import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
-import { mdiHelpCircle } from "@mdi/js";
 import { fireEvent } from "../../../common/dom/fire_event";
+import { LocalizeFunc } from "../../../common/translations/localize";
+import { computeRTLDirection } from "../../../common/util/compute_rtl";
+import "../../../components/buttons/ha-progress-button";
+import type { HaProgressButton } from "../../../components/buttons/ha-progress-button";
 import "../../../components/ha-form/ha-form";
+import type { SchemaUnion } from "../../../components/ha-form/types";
 import "../../../components/ha-icon-button";
 import { extractApiErrorMessage } from "../../../data/hassio/common";
 import {
@@ -16,11 +21,8 @@ import {
 } from "../../../data/supervisor/mounts";
 import { haStyle, haStyleDialog } from "../../../resources/styles";
 import { HomeAssistant } from "../../../types";
-import { MountViewDialogParams } from "./show-dialog-view-mount";
-import { LocalizeFunc } from "../../../common/translations/localize";
-import type { SchemaUnion } from "../../../components/ha-form/types";
 import { documentationUrl } from "../../../util/documentation-url";
-import { computeRTLDirection } from "../../../common/util/compute_rtl";
+import { MountViewDialogParams } from "./show-dialog-view-mount";
 
 const mountSchema = memoizeOne(
   (
@@ -269,8 +271,8 @@ class ViewMountDialog extends LitElement {
             : nothing}
         </div>
 
-        <mwc-button
-          .disabled=${this._waiting}
+        <ha-progress-button
+          .progress=${this._waiting}
           slot="primaryAction"
           @click=${this._connectMount}
         >
@@ -281,7 +283,7 @@ class ViewMountDialog extends LitElement {
             : this.hass.localize(
                 "ui.panel.config.storage.network_mounts.connect"
               )}
-        </mwc-button>
+        </ha-progress-button>
       </ha-dialog>
     `;
   }
@@ -333,7 +335,8 @@ class ViewMountDialog extends LitElement {
     }
   }
 
-  private async _connectMount() {
+  private async _connectMount(ev) {
+    const progressButton = ev.target as HaProgressButton;
     this._error = undefined;
     this._waiting = true;
     const mountData = { ...this._data! };
@@ -349,6 +352,7 @@ class ViewMountDialog extends LitElement {
     } catch (err: any) {
       this._error = extractApiErrorMessage(err);
       this._waiting = false;
+      progressButton.actionError();
       if (this._data!.type === "cifs" && !this._showCIFSVersion) {
         this._showCIFSVersion = true;
       }