From e6c580aadce76457480e140cf49f7a5e84e34fc7 Mon Sep 17 00:00:00 2001
From: Raman Gupta <7243222+raman325@users.noreply.github.com>
Date: Thu, 31 Mar 2022 10:06:47 -0400
Subject: [PATCH] Add zwave-js node alerts to device configuration page
 (#12173)

Co-authored-by: Bram Kragten <mail@bramkragten.nl>
---
 src/data/zwave_js.ts                          |  6 ++++
 .../zwave_js/zwave_js-node-config.ts          | 36 +++++++++++--------
 2 files changed, 28 insertions(+), 14 deletions(-)

diff --git a/src/data/zwave_js.ts b/src/data/zwave_js.ts
index 1cc8653752..a1dc54f852 100644
--- a/src/data/zwave_js.ts
+++ b/src/data/zwave_js.ts
@@ -167,12 +167,18 @@ export interface ZwaveJSNodeMetadata {
   wakeup: string;
   reset: string;
   device_database_url: string;
+  comments: ZWaveJSNodeComment[];
 }
 
 export interface ZWaveJSNodeConfigParams {
   [key: string]: ZWaveJSNodeConfigParam;
 }
 
+export interface ZWaveJSNodeComment {
+  level: "info" | "warning" | "error";
+  text: string;
+}
+
 export interface ZWaveJSNodeConfigParam {
   property: number;
   value: any;
diff --git a/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-node-config.ts b/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-node-config.ts
index 70e9d26390..bc84b9a78a 100644
--- a/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-node-config.ts
+++ b/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-node-config.ts
@@ -19,6 +19,7 @@ import { customElement, property, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import memoizeOne from "memoize-one";
 import { debounce } from "../../../../../common/util/debounce";
+import "../../../../../components/ha-alert";
 import "../../../../../components/ha-card";
 import "../../../../../components/ha-icon-next";
 import "../../../../../components/ha-select";
@@ -130,7 +131,7 @@ class ZWaveJSNodeConfig extends SubscribeMixin(LitElement) {
       ></hass-error-screen>`;
     }
 
-    if (!this._config) {
+    if (!this._config || !this._nodeMetadata) {
       return html`<hass-loading-screen></hass-loading-screen>`;
     }
 
@@ -178,20 +179,27 @@ class ZWaveJSNodeConfig extends SubscribeMixin(LitElement) {
               </em>
             </p>
           </div>
-          <ha-card>
-            ${this._config
-              ? html`
-                  ${Object.entries(this._config).map(
-                    ([id, item]) => html` <ha-settings-row
-                      class="config-item"
-                      .configId=${id}
-                      .narrow=${this.narrow}
-                    >
-                      ${this._generateConfigBox(id, item)}
-                    </ha-settings-row>`
+          ${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
+                class="config-item"
+                .configId=${id}
+                .narrow=${this.narrow}
+              >
+                ${this._generateConfigBox(id, item)}
+              </ha-settings-row>`
+            )}
           </ha-card>
         </ha-config-section>
       </hass-tabs-subpage>