From 68fe13a67ded6c00cdd1e1afbf46d4226b6d39ab Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joakim=20S=C3=B8rensen?= <joasoe@gmail.com>
Date: Tue, 24 Aug 2021 19:22:40 +0200
Subject: [PATCH] Use ha-alert in the energy validation results (#9876)

---
 src/components/ha-alert.ts                    |  7 +-
 .../components/ha-energy-validation-result.ts | 77 +++++--------------
 2 files changed, 26 insertions(+), 58 deletions(-)

diff --git a/src/components/ha-alert.ts b/src/components/ha-alert.ts
index 718e2a9971..59388d7e16 100644
--- a/src/components/ha-alert.ts
+++ b/src/components/ha-alert.ts
@@ -30,8 +30,11 @@ declare global {
 class HaAlert extends LitElement {
   @property() public title = "";
 
-  @property() public alertType: "info" | "warning" | "error" | "success" =
-    "info";
+  @property({ attribute: "alert-type" }) public alertType:
+    | "info"
+    | "warning"
+    | "error"
+    | "success" = "info";
 
   @property({ attribute: "action-text" }) public actionText = "";
 
diff --git a/src/panels/config/energy/components/ha-energy-validation-result.ts b/src/panels/config/energy/components/ha-energy-validation-result.ts
index 344b6d85b3..86ec6abcbd 100644
--- a/src/panels/config/energy/components/ha-energy-validation-result.ts
+++ b/src/panels/config/energy/components/ha-energy-validation-result.ts
@@ -1,8 +1,7 @@
-import { mdiAlertOutline } from "@mdi/js";
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import { groupBy } from "../../../../common/util/group-by";
-import "../../../../components/ha-svg-icon";
+import "../../../../components/ha-alert";
 import { EnergyValidationIssue } from "../../../../data/energy";
 import { HomeAssistant } from "../../../../types";
 
@@ -23,33 +22,29 @@ class EnergyValidationMessage extends LitElement {
 
     return Object.entries(grouped).map(
       ([issueType, gIssues]) => html`
-        <div class="issue-type">
-          <div class="icon">
-            <ha-svg-icon .path=${mdiAlertOutline}></ha-svg-icon>
-          </div>
-          <div class="content">
-            <div class="title">
-              ${this.hass.localize(
+          <ha-alert
+            alert-type="warning"
+            .title=${
+              this.hass.localize(
                 `ui.panel.config.energy.validation.issues.${issueType}.title`
-              ) || issueType}
-            </div>
-
+              ) || issueType
+            }
+          >
             ${this.hass.localize(
               `ui.panel.config.energy.validation.issues.${issueType}.description`
             )}
-            ${issueType === "entity_not_tracked"
-              ? html`
-                  (<a
-                    href="https://www.home-assistant.io/integrations/recorder#configure-filter"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    >${this.hass.localize(
-                      "ui.panel.config.common.learn_more"
-                    )}</a
-                  >)
-                `
-              : ""}
-
+            ${
+              issueType === "recorder_untracked"
+                ? html`(<a
+                      href="https://www.home-assistant.io/integrations/recorder#configure-filter"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      >${this.hass.localize(
+                        "ui.panel.config.common.learn_more"
+                      )}</a
+                    >)`
+                : ""
+            }
             <ul>
               ${gIssues.map(
                 (issue) =>
@@ -60,43 +55,13 @@ class EnergyValidationMessage extends LitElement {
                   </li>`
               )}
             </ul>
-          </div>
+          </ha-alert>
         </div>
       `
     );
   }
 
   static styles = css`
-    .issue-type {
-      position: relative;
-      padding: 4px;
-      display: flex;
-      margin: 4px 0;
-    }
-    .issue-type::before {
-      position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-      background-color: var(--warning-color);
-      opacity: 0.12;
-      pointer-events: none;
-      content: "";
-      border-radius: 4px;
-    }
-    .icon {
-      margin: 4px 8px;
-      width: 24px;
-      color: var(--warning-color);
-    }
-    .content {
-      padding-right: 4px;
-    }
-    .title {
-      font-weight: bold;
-      margin-top: 5px;
-    }
     ul {
       padding-left: 24px;
       margin: 4px 0;