Improve Z-Wave firmware update dialog on device page

src/components/ha-file-upload.ts

@@ -86,11 +86,12 @@ export class HaFileUpload extends LitElement {
         ? html`<div class="container">
             <div class="uploading">
               <span class="header"
-                >${this.uploadingLabel || this.value
+                >${this.uploadingLabel ||
+                (this.value
                   ? localize("ui.components.file-upload.uploading_name", {
                       name: this._name,
                     })
-                  : localize("ui.components.file-upload.uploading")}</span
+                  : localize("ui.components.file-upload.uploading"))}</span
               >
               ${this.progress
                 ? html`<div class="progress">

src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-update-firmware-node.ts

@@ -77,6 +77,8 @@ class DialogZWaveJSUpdateFirmwareNode extends LitElement {
 
   private _deviceName?: string;
 
+  private _cancelUpload?: () => void;
+
   public showDialog(params: ZWaveJSUpdateFirmwareNodeDialogParams): void {
     this._deviceName = computeDeviceNameDisplay(params.device, this.hass!);
     this.device = params.device;
@@ -114,12 +116,16 @@ class DialogZWaveJSUpdateFirmwareNode extends LitElement {
         .label=${this.hass.localize(
           "ui.panel.config.zwave_js.update_firmware.upload_firmware"
         )}
+        .uploadingLabel=${this.hass.localize(
+          "ui.panel.config.zwave_js.update_firmware.uploading",
+          { name: this._firmwareFile?.name }
+        )}
         .value=${this._firmwareFile}
         @file-picked=${this._uploadFile}
       ></ha-file-upload>
       ${this._nodeStatus.is_controller_node
         ? nothing
-        : html`<p>
+        : html`<p class=${this._uploading ? "disabled" : ""}>
               ${this.hass.localize(
                 "ui.panel.config.zwave_js.update_firmware.firmware_target_intro"
               )}
@@ -129,11 +135,12 @@ class DialogZWaveJSUpdateFirmwareNode extends LitElement {
               .data=${{ firmware_target: this._firmwareTarget }}
               .schema=${firmwareTargetSchema}
               @value-changed=${this._firmwareTargetChanged}
+              disabled=${this._uploading}
             ></ha-form>`}
       <ha-button
         slot="primaryAction"
         @click=${this._beginFirmwareUpdate}
-        .disabled=${this._firmwareFile === undefined}
+        .disabled=${this._firmwareFile === undefined || this._uploading}
       >
         ${this.hass.localize(
           "ui.panel.config.zwave_js.update_firmware.begin_update"
@@ -182,7 +189,7 @@ class DialogZWaveJSUpdateFirmwareNode extends LitElement {
         ${!this._updateProgressMessage && !this._updateFinishedMessage
           ? !this._updateInProgress
             ? html`
-                <p>
+                <p class=${this._uploading ? "disabled" : ""}>
                   ${this.hass.localize(
                     `ui.panel.config.zwave_js.update_firmware.introduction${localizationKeySuffix}`,
                     {
@@ -191,6 +198,14 @@ class DialogZWaveJSUpdateFirmwareNode extends LitElement {
                   )}
                 </p>
                 ${beginFirmwareUpdateHTML}
+                ${this._uploading && this._nodeStatus.status === NodeStatus.Asleep
+                  ? html`<p class="wakeup">
+                      ${this.hass.localize(
+                        "ui.panel.config.zwave_js.update_firmware.device_asleep"
+                      )}
+                    </p>`
+                  : nothing}
+                ${this._uploading ? abortFirmwareUpdateButton : nothing}
               `
             : html`
                 <p>
@@ -316,17 +331,23 @@ class DialogZWaveJSUpdateFirmwareNode extends LitElement {
     this._updateProgressMessage = this._updateFinishedMessage = undefined;
     try {
       this._subscribeNodeFirmwareUpdate();
-      await uploadFirmwareAndBeginUpdate(
+      await new Promise<void>((resolve, reject) => {
-        this.hass,
+        this._cancelUpload = () => {
-        this.device!.id,
+          this._cancelUpload = undefined;
-        this._firmwareFile!,
+          resolve();
-        this._firmwareTarget
+        };
-      );
+        uploadFirmwareAndBeginUpdate(
+          this.hass,
+          this.device!.id,
+          this._firmwareFile!,
+          this._firmwareTarget
+        )
+          .then(() => this._cancelUpload?.())
+          .catch(reject);
+      });
       this._updateInProgress = true;
-      this._uploading = false;
     } catch (err: any) {
       this._unsubscribeNodeFirmwareUpdate();
-      this._uploading = false;
       showAlertDialog(this, {
         title: this.hass.localize(
           "ui.panel.config.zwave_js.update_firmware.upload_failed"
@@ -334,6 +355,8 @@ class DialogZWaveJSUpdateFirmwareNode extends LitElement {
         text: err.message,
         confirmText: this.hass!.localize("ui.common.close"),
       });
+    } finally {
+      this._uploading = false;
     }
   }
 
@@ -350,6 +373,7 @@ class DialogZWaveJSUpdateFirmwareNode extends LitElement {
         confirmText: this.hass!.localize("ui.common.yes"),
       })
     ) {
+      this._cancelUpload?.();
       this._unsubscribeNodeFirmwareUpdate();
       try {
         await abortZwaveNodeFirmwareUpdate(this.hass, this.device!.id);
@@ -366,6 +390,7 @@ class DialogZWaveJSUpdateFirmwareNode extends LitElement {
       this._updateFinishedMessage = undefined;
       this._updateProgressMessage = undefined;
       this._updateInProgress = false;
+      this._uploading = false;
     }
   }
 
@@ -455,6 +480,17 @@ class DialogZWaveJSUpdateFirmwareNode extends LitElement {
           width: 68px;
           height: 48px;
         }
+
+        p.disabled {
+          color: var(--disabled-text-color);
+        }
+
+        p.wakeup {
+          color: var(--warning-color);
+          font-weight: var(--ha-font-weight-bold);
+          margin-top: 24px;
+          margin-bottom: 0;
+        }
       `,
     ];
   }

src/translations/en.json

@@ -6273,6 +6273,8 @@
             "introduction_controller": "Select the firmware file you would like to use to update {device}. Note that once you start a firmware update, you MUST wait for the update to complete.",
             "firmware_target_intro": "Select the firmware target (0 for the Z-Wave chip, ≥1 for other chips if they exist) for this update.",
             "firmware_target": "Firmware target (chip)",
+            "uploading": "Uploading {name}. Please do not close this dialog.",
+            "device_asleep": "The device is asleep. Wake the device to start the update.",
             "upload_firmware": "Upload firmware",
             "upload_failed": "Upload failed",
             "begin_update": "Begin firmware update",