Use ha-alert in the energy validation results (#9876)

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 = "";
 

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
+            ${
+              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;