ZwaveJS: Resume adding a device if the page is refreshed (#22519)

* ZwaveJS: Resume adding a device if the page is refreshed

* tweak code style

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

@@ -846,7 +846,11 @@ class DialogZWaveJSAddNode extends LitElement {
       undefined,
       undefined,
       dsk
-    );
+    ).catch((err) => {
+      this._error = err.message;
+      this._status = "failed";
+      return () => {};
+    });
     this._addNodeTimeoutHandle = window.setTimeout(() => {
       this._unsubscribe();
       this._status = "timed_out";

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

@@ -2,6 +2,7 @@ import "@material/mwc-button/mwc-button";
 import { mdiCheckCircle, mdiCloseCircle } from "@mdi/js";
 import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import { fireEvent } from "../../../../../common/dom/fire_event";
 import "../../../../../components/ha-circular-progress";
 import { createCloseHeading } from "../../../../../components/ha-dialog";
@@ -25,9 +26,13 @@ class DialogZWaveJSRemoveNode extends LitElement {
 
   @state() private _node?: ZWaveJSRemovedNode;
 
+  @state() private _removedCallback?: () => void;
+
   private _removeNodeTimeoutHandle?: number;
 
-  private _subscribed?: Promise<() => Promise<void>>;
+  private _subscribed?: Promise<UnsubscribeFunc>;
+
+  @state() private _error?: string;
 
   public disconnectedCallback(): void {
     super.disconnectedCallback();
@@ -38,6 +43,10 @@ class DialogZWaveJSRemoveNode extends LitElement {
     params: ZWaveJSRemoveNodeDialogParams
   ): Promise<void> {
     this.entry_id = params.entry_id;
+    this._removedCallback = params.removedCallback;
+    if (params.skipConfirmation) {
+      this._startExclusion();
+    }
   }
 
   protected render() {
@@ -67,7 +76,7 @@ class DialogZWaveJSRemoveNode extends LitElement {
                 )}
               </mwc-button>
             `
-          : ``}
+          : nothing}
         ${this._status === "started"
           ? html`
               <div class="flex-container">
@@ -93,7 +102,7 @@ class DialogZWaveJSRemoveNode extends LitElement {
                 )}
               </mwc-button>
             `
-          : ``}
+          : nothing}
         ${this._status === "failed"
           ? html`
               <div class="flex-container">
@@ -107,13 +116,18 @@ class DialogZWaveJSRemoveNode extends LitElement {
                       "ui.panel.config.zwave_js.remove_node.exclusion_failed"
                     )}
                   </p>
+                  ${this._error
+                    ? html`<ha-alert alert-type="error">
+                        ${this._error}
+                      </ha-alert>`
+                    : nothing}
                 </div>
               </div>
               <mwc-button slot="primaryAction" @click=${this.closeDialog}>
                 ${this.hass.localize("ui.common.close")}
               </mwc-button>
             `
-          : ``}
+          : nothing}
         ${this._status === "finished"
           ? html`
               <div class="flex-container">
@@ -134,7 +148,7 @@ class DialogZWaveJSRemoveNode extends LitElement {
                 ${this.hass.localize("ui.common.close")}
               </mwc-button>
             `
-          : ``}
+          : nothing}
       </ha-dialog>
     `;
   }
@@ -143,13 +157,17 @@ class DialogZWaveJSRemoveNode extends LitElement {
     if (!this.hass) {
       return;
     }
-    this._subscribed = this.hass.connection.subscribeMessage(
-      (message) => this._handleMessage(message),
-      {
+    this._subscribed = this.hass.connection
+      .subscribeMessage((message) => this._handleMessage(message), {
         type: "zwave_js/remove_node",
         entry_id: this.entry_id,
-      }
-    );
+      })
+      .catch((err) => {
+        this._status = "failed";
+        this._error = err.message;
+        return () => {};
+      });
+    this._status = "started";
     this._removeNodeTimeoutHandle = window.setTimeout(
       () => this._unsubscribe(),
       120000
@@ -174,6 +192,9 @@ class DialogZWaveJSRemoveNode extends LitElement {
       this._status = "finished";
       this._node = message.node;
       this._unsubscribe();
+      if (this._removedCallback) {
+        this._removedCallback();
+      }
     }
   }
 

src/panels/config/integrations/integration-panels/zwave_js/show-dialog-zwave_js-remove-node.ts

@@ -2,6 +2,8 @@ import { fireEvent } from "../../../../../common/dom/fire_event";
 
 export interface ZWaveJSRemoveNodeDialogParams {
   entry_id: string;
+  skipConfirmation?: boolean;
+  removedCallback?: () => void;
 }
 
 export const loadRemoveNodeDialog = () =>

src/panels/config/integrations/integration-panels/zwave_js/zwave_js-config-dashboard.ts

@@ -36,8 +36,6 @@ import {
   fetchZwaveProvisioningEntries,
   InclusionState,
   setZwaveDataCollectionPreference,
-  stopZwaveExclusion,
-  stopZwaveInclusion,
   subscribeZwaveControllerStatistics,
   ZWaveJSClient,
   ZWaveJSControllerStatisticsUpdatedMessage,
@@ -81,9 +79,18 @@ class ZWaveJSConfigDashboard extends SubscribeMixin(LitElement) {
   @state()
   private _statistics?: ZWaveJSControllerStatisticsUpdatedMessage;
 
-  protected firstUpdated() {
+  protected async firstUpdated() {
     if (this.hass) {
-      this._fetchData();
+      await this._fetchData();
+      if (this._status === "connected") {
+        const inclusion_state = this._network?.controller.inclusion_state;
+        // show dialog if inclusion/exclusion is already in progress
+        if (inclusion_state === InclusionState.Including) {
+          this._addNodeClicked();
+        } else if (inclusion_state === InclusionState.Excluding) {
+          this._removeNodeClicked();
+        }
+      }
     }
   }
 
@@ -126,31 +133,6 @@ class ZWaveJSConfigDashboard extends SubscribeMixin(LitElement) {
           .path=${mdiRefresh}
           .label=${this.hass!.localize("ui.common.refresh")}
         ></ha-icon-button>
-        ${this._network &&
-        this._status === "connected" &&
-        (this._network?.controller.inclusion_state ===
-          InclusionState.Including ||
-          this._network?.controller.inclusion_state ===
-            InclusionState.Excluding)
-          ? html`
-              <ha-alert alert-type="info">
-                ${this.hass.localize(
-                  `ui.panel.config.zwave_js.common.in_progress_inclusion_exclusion`
-                )}
-                <mwc-button
-                  slot="action"
-                  .label=${this.hass.localize(
-                    `ui.panel.config.zwave_js.common.cancel_inclusion_exclusion`
-                  )}
-                  @click=${this._network?.controller.inclusion_state ===
-                  InclusionState.Including
-                    ? this._cancelInclusion
-                    : this._cancelExclusion}
-                >
-                </mwc-button>
-              </ha-alert>
-            `
-          : ""}
         ${this._network
           ? html`
               <ha-card class="content network-status">
@@ -193,11 +175,11 @@ class ZWaveJSConfigDashboard extends SubscribeMixin(LitElement) {
                                     `ui.panel.config.zwave_js.dashboard.not_ready`,
                                     { count: notReadyDevices }
                                   )})`
-                                : ""}
+                                : nothing}
                             </small>
                           </div>
                         `
-                      : ``}
+                      : nothing}
                   </div>
                 </div>
                 <div class="card-actions">
@@ -224,7 +206,7 @@ class ZWaveJSConfigDashboard extends SubscribeMixin(LitElement) {
                           )}
                         </mwc-button></a
                       >`
-                    : ""}
+                    : nothing}
                 </div>
               </ha-card>
               <ha-card header="Diagnostics">
@@ -464,7 +446,7 @@ class ZWaveJSConfigDashboard extends SubscribeMixin(LitElement) {
                 </div>
               </ha-card>
             `
-          : ``}
+          : nothing}
         <ha-fab
           slot="fab"
           .label=${this.hass.localize(
@@ -540,7 +522,7 @@ class ZWaveJSConfigDashboard extends SubscribeMixin(LitElement) {
             </mwc-button>
           </div>
         `
-      : ""}`;
+      : nothing}`;
   }
 
   private _handleBack(): void {
@@ -593,6 +575,9 @@ class ZWaveJSConfigDashboard extends SubscribeMixin(LitElement) {
   private async _removeNodeClicked() {
     showZWaveJSRemoveNodeDialog(this, {
       entry_id: this.configEntryId!,
+      skipConfirmation:
+        this._network?.controller.inclusion_state === InclusionState.Excluding,
+      removedCallback: () => this._fetchData(),
     });
   }
 
@@ -602,16 +587,6 @@ class ZWaveJSConfigDashboard extends SubscribeMixin(LitElement) {
     });
   }
 
-  private async _cancelInclusion() {
-    stopZwaveInclusion(this.hass!, this.configEntryId!);
-    await this._fetchData();
-  }
-
-  private async _cancelExclusion() {
-    stopZwaveExclusion(this.hass!, this.configEntryId!);
-    await this._fetchData();
-  }
-
   private _dataCollectionToggled(ev) {
     setZwaveDataCollectionPreference(
       this.hass!,