Fix Z-Wave JS add node wizard and add interview status (#9145)

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

@@ -34,8 +34,14 @@ class DialogZWaveJSAddNode extends LitElement {
 
   @state() private _status = "";
 
+  @state() private _nodeAdded = false;
+
   @state() private _device?: ZWaveJSAddNodeDevice;
 
+  @state() private _stages?: string[];
+
+  private _stoppedTimeout?: any;
+
   private _addNodeTimeoutHandle?: number;
 
   private _subscribed?: Promise<() => Promise<void>>;
@@ -128,6 +134,40 @@ class DialogZWaveJSAddNode extends LitElement {
               </mwc-button>
             `
           : ``}
+        ${this._status === "interviewing"
+          ? html`
+              <div class="flex-container">
+                <ha-circular-progress active></ha-circular-progress>
+                <div class="status">
+                  <p>
+                    <b
+                      >${this.hass.localize(
+                        "ui.panel.config.zwave_js.add_node.interview_started"
+                      )}</b
+                    >
+                  </p>
+                  ${this._stages
+                    ? html` <div class="stages">
+                        ${this._stages.map(
+                          (stage) => html`
+                            <span class="stage">
+                              <ha-svg-icon
+                                .path=${mdiCheckCircle}
+                                class="success"
+                              ></ha-svg-icon>
+                              ${stage}
+                            </span>
+                          `
+                        )}
+                      </div>`
+                    : ""}
+                </div>
+              </div>
+              <mwc-button slot="primaryAction" @click=${this.closeDialog}>
+                ${this.hass.localize("ui.panel.config.zwave_js.common.close")}
+              </mwc-button>
+            `
+          : ``}
         ${this._status === "failed"
           ? html`
               <div class="flex-container">
@@ -141,6 +181,21 @@ class DialogZWaveJSAddNode extends LitElement {
                       "ui.panel.config.zwave_js.add_node.inclusion_failed"
                     )}
                   </p>
+                  ${this._stages
+                    ? html` <div class="stages">
+                        ${this._stages.map(
+                          (stage) => html`
+                            <span class="stage">
+                              <ha-svg-icon
+                                .path=${mdiCheckCircle}
+                                class="success"
+                              ></ha-svg-icon>
+                              ${stage}
+                            </span>
+                          `
+                        )}
+                      </div>`
+                    : ""}
                 </div>
               </div>
               <mwc-button slot="primaryAction" @click=${this.closeDialog}>
@@ -168,6 +223,21 @@ class DialogZWaveJSAddNode extends LitElement {
                       )}
                     </mwc-button>
                   </a>
+                  ${this._stages
+                    ? html` <div class="stages">
+                        ${this._stages.map(
+                          (stage) => html`
+                            <span class="stage">
+                              <ha-svg-icon
+                                .path=${mdiCheckCircle}
+                                class="success"
+                              ></ha-svg-icon>
+                              ${stage}
+                            </span>
+                          `
+                        )}
+                      </div>`
+                    : ""}
                 </div>
               </div>
               <mwc-button slot="primaryAction" @click=${this.closeDialog}>
@@ -211,16 +281,41 @@ class DialogZWaveJSAddNode extends LitElement {
       this._status = "failed";
     }
     if (message.event === "inclusion stopped") {
-      if (this._status !== "finished") {
+      // we get the inclusion stopped event before the node added event
-        this._status = "";
+      // during a successful inclusion. so we set a timer to wait 3 seconds
-      }
+      // to give the node added event time to come in before assuming it
-      this._unsubscribe();
+      // timed out or was cancelled and unsubscribing.
+      this._stoppedTimeout = setTimeout(() => {
+        if (!this._nodeAdded) {
+          this._status = "";
+          this._unsubscribe();
+          this._stoppedTimeout = undefined;
+        }
+      }, 3000);
     }
     if (message.event === "device registered") {
       this._device = message.device;
+    }
+    if (message.event === "node added") {
+      this._nodeAdded = true;
+      if (this._stoppedTimeout) {
+        clearTimeout(this._stoppedTimeout);
+      }
+      this._status = "interviewing";
+    }
+
+    if (message.event === "interview completed") {
       this._status = "finished";
       this._unsubscribe();
     }
+
+    if (message.event === "interview stage completed") {
+      if (this._stages === undefined) {
+        this._stages = [message.stage];
+      } else {
+        this._stages = [...this._stages, message.stage];
+      }
+    }
   }
 
   private _unsubscribe(): void {
@@ -246,7 +341,13 @@ class DialogZWaveJSAddNode extends LitElement {
     this._unsubscribe();
     this.entry_id = undefined;
     this._status = "";
+    this._nodeAdded = false;
     this._device = undefined;
+    this._stages = undefined;
+    if (this._stoppedTimeout) {
+      clearTimeout(this._stoppedTimeout);
+      this._stoppedTimeout = undefined;
+    }
     this._use_secure_inclusion = false;
 
     fireEvent(this, "dialog-closed", { dialog: this.localName });
@@ -261,11 +362,24 @@ class DialogZWaveJSAddNode extends LitElement {
         }
 
         .success {
-          color: green;
+          color: var(--success-color);
         }
 
         .failed {
-          color: red;
+          color: var(--warning-color);
+        }
+
+        .stages {
+          margin-top: 16px;
+        }
+
+        .flex-container .stage ha-svg-icon {
+          width: 16px;
+          height: 16px;
+          margin-right: 0px;
+        }
+        .stage {
+          padding: 8px;
         }
 
         blockquote {

src/translations/en.json

@@ -2633,8 +2633,10 @@
             "controller_in_inclusion_mode": "Your Z-Wave controller is now in inclusion mode.",
             "follow_device_instructions": "Follow the directions that came with your device to trigger pairing on the device.",
             "inclusion_failed": "The node could not be added. Please check the logs for more information.",
-            "inclusion_finished": "The node has been added. It may take a few minutes for all entities to show up as we finish setting up the node in the background.",
+            "inclusion_finished": "The node has been added.",
-            "view_device": "View Device"
+            "view_device": "View Device",
+            "interview_started": "The device is being interviewed. This may take some time.",
+            "interview_failed": "The device interview failed. Additional information may be available in the logs."
           },
           "remove_node": {
             "title": "Remove a Z-Wave Node",