Move zwave_js node comments from device config to info page (#12625)

Co-authored-by: Zack Barett <zackbarett@hey.com>
Co-authored-by: Bram Kragten <mail@bramkragten.nl>

src/data/zwave_js.ts

@@ -167,6 +167,9 @@ export interface ZwaveJSNodeMetadata {
   wakeup: string;
   reset: string;
   device_database_url: string;
+}
+
+export interface ZwaveJSNodeComments {
   comments: ZWaveJSNodeComment[];
 }
 
@@ -442,6 +445,15 @@ export const fetchZwaveNodeMetadata = (
     device_id,
   });
 
+export const fetchZwaveNodeComments = (
+  hass: HomeAssistant,
+  device_id: string
+): Promise<ZwaveJSNodeComments> =>
+  hass.callWS({
+    type: "zwave_js/node_comments",
+    device_id,
+  });
+
 export const fetchZwaveNodeConfigParameters = (
   hass: HomeAssistant,
   device_id: string

src/panels/config/devices/device-detail/integration-elements/zwave_js/ha-device-alerts-zwave_js.ts

@@ -0,0 +1,52 @@
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { DeviceRegistryEntry } from "../../../../../../data/device_registry";
+import {
+  ZwaveJSNodeComments,
+  fetchZwaveNodeComments,
+} from "../../../../../../data/zwave_js";
+import { HomeAssistant } from "../../../../../../types";
+
+@customElement("ha-device-alerts-zwave_js")
+export class HaDeviceAlertsZWaveJS extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public device!: DeviceRegistryEntry;
+
+  @state() private _nodeComments?: ZwaveJSNodeComments;
+
+  protected willUpdate(changedProperties: PropertyValues) {
+    super.willUpdate(changedProperties);
+    if (changedProperties.has("device")) {
+      this._fetchNodeDetails();
+    }
+  }
+
+  private async _fetchNodeDetails() {
+    this._nodeComments = await fetchZwaveNodeComments(
+      this.hass,
+      this.device.id
+    );
+  }
+
+  protected render(): TemplateResult {
+    if (this._nodeComments && this._nodeComments.comments?.length > 0) {
+      return html`
+        <div>
+          ${this._nodeComments.comments.map(
+            (comment) => html`<ha-alert .alertType=${comment.level}>
+              ${comment.text}
+            </ha-alert>`
+          )}
+        </div>
+      `;
+    }
+    return html``;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-device-alerts-zwave_js": HaDeviceAlertsZWaveJS;
+  }
+}

src/panels/config/devices/ha-config-device-page.ts

@@ -389,6 +389,7 @@ export class HaConfigDevicePage extends LitElement {
       : device.configuration_url;
 
     const deviceInfo: TemplateResult[] = [];
+    const deviceAlerts: TemplateResult[] = [];
 
     if (device.disabled_by) {
       deviceInfo.push(
@@ -445,7 +446,8 @@ export class HaConfigDevicePage extends LitElement {
       device,
       integrations,
       deviceInfo,
-      deviceActions
+      deviceActions,
+      deviceAlerts
     );
 
     if (Array.isArray(this._diagnosticDownloadLinks)) {
@@ -547,6 +549,11 @@ export class HaConfigDevicePage extends LitElement {
                 </div>
           </div>
           <div class="column">
+              ${
+                deviceAlerts.length
+                  ? html` <div class="fullwidth">${deviceAlerts}</div> `
+                  : ""
+              }
               <ha-device-info-card
                 .hass=${this.hass}
                 .areas=${this.areas}
@@ -928,7 +935,8 @@ export class HaConfigDevicePage extends LitElement {
     device: DeviceRegistryEntry,
     integrations: ConfigEntry[],
     deviceInfo: TemplateResult[],
-    deviceActions: (string | TemplateResult)[]
+    deviceActions: (string | TemplateResult)[],
+    deviceAlerts: TemplateResult[]
   ) {
     const domains = integrations.map((int) => int.domain);
     if (domains.includes("mqtt")) {
@@ -959,12 +967,21 @@ export class HaConfigDevicePage extends LitElement {
       `);
     }
     if (domains.includes("zwave_js")) {
+      import(
+        "./device-detail/integration-elements/zwave_js/ha-device-alerts-zwave_js"
+      );
       import(
         "./device-detail/integration-elements/zwave_js/ha-device-info-zwave_js"
       );
       import(
         "./device-detail/integration-elements/zwave_js/ha-device-actions-zwave_js"
       );
+      deviceAlerts.push(html`
+        <ha-device-alerts-zwave_js
+          .hass=${this.hass}
+          .device=${device}
+        ></ha-device-alerts-zwave_js>
+      `);
       deviceInfo.push(html`
         <ha-device-info-zwave_js
           .hass=${this.hass}

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

@@ -546,12 +546,6 @@ class ZWaveJSConfigDashboard extends LitElement {
           max-width: 600px;
         }
 
-        button.dump {
-          width: 100%;
-          text-align: center;
-          color: var(--secondary-text-color);
-        }
-
         [hidden] {
           display: none;
         }

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

@@ -166,17 +166,6 @@ class ZWaveJSNodeConfig extends SubscribeMixin(LitElement) {
               </em>
             </p>
           </div>
-          ${this._nodeMetadata.comments?.length > 0
-            ? html`
-                <div>
-                  ${this._nodeMetadata.comments.map(
-                    (comment) => html`<ha-alert .alertType=${comment.level}>
-                      ${comment.text}
-                    </ha-alert>`
-                  )}
-                </div>
-              `
-            : ``}
           <ha-card>
             ${Object.entries(this._config).map(
               ([id, item]) => html` <ha-settings-row