From 0f97a76428fea914c7fa067cba90277745cd7f95 Mon Sep 17 00:00:00 2001
From: karwosts <32912880+karwosts@users.noreply.github.com>
Date: Tue, 28 Mar 2023 09:15:56 -0700
Subject: [PATCH] Fix map card error rendering (#15910)

---
 src/panels/lovelace/cards/hui-history-graph-card.ts | 7 ++++---
 src/panels/lovelace/cards/hui-map-card.ts           | 8 ++++++--
 src/translations/en.json                            | 3 +++
 3 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/panels/lovelace/cards/hui-history-graph-card.ts b/src/panels/lovelace/cards/hui-history-graph-card.ts
index 4ec01f79c8..64e7809e18 100644
--- a/src/panels/lovelace/cards/hui-history-graph-card.ts
+++ b/src/panels/lovelace/cards/hui-history-graph-card.ts
@@ -11,6 +11,7 @@ import { classMap } from "lit/directives/class-map";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
 import "../../../components/chart/state-history-charts";
 import "../../../components/ha-card";
+import "../../../components/ha-alert";
 import {
   computeHistory,
   HistoryResult,
@@ -192,10 +193,10 @@ export class HuiHistoryGraphCard extends LitElement implements LovelaceCard {
         >
           ${this._error
             ? html`
-                <div>
-                  ${this.hass.localize("ui.components.history_charts.error")} :
+                <ha-alert alert-type="error">
+                  ${this.hass.localize("ui.components.history_charts.error")}:
                   ${this._error.message || this._error.code}
-                </div>
+                </ha-alert>
               `
             : html`
                 <state-history-charts
diff --git a/src/panels/lovelace/cards/hui-map-card.ts b/src/panels/lovelace/cards/hui-map-card.ts
index 3f16d4d319..7f1e2fc200 100644
--- a/src/panels/lovelace/cards/hui-map-card.ts
+++ b/src/panels/lovelace/cards/hui-map-card.ts
@@ -22,6 +22,7 @@ import {
 import { computeDomain } from "../../../common/entity/compute_domain";
 import parseAspectRatio from "../../../common/util/parse-aspect-ratio";
 import "../../../components/ha-card";
+import "../../../components/ha-alert";
 import "../../../components/ha-icon-button";
 import "../../../components/map/ha-map";
 import type {
@@ -65,7 +66,7 @@ class HuiMapCard extends LitElement implements LovelaceCard {
 
   private _colorIndex = 0;
 
-  private _error?: string;
+  @state() private _error?: { code: string; message: string };
 
   private _subscribed?: Promise<(() => Promise<void>) | void>;
 
@@ -139,7 +140,10 @@ class HuiMapCard extends LitElement implements LovelaceCard {
       return nothing;
     }
     if (this._error) {
-      return html`<div class="error">${this._error}</div>`;
+      return html`<ha-alert alert-type="error">
+        ${this.hass.localize("ui.components.map.error")}: ${this._error.message}
+        (${this._error.code})
+      </ha-alert>`;
     }
     return html`
       <ha-card id="card" .header=${this._config.title}>
diff --git a/src/translations/en.json b/src/translations/en.json
index c1bc0d2dd2..9ead70fea5 100755
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -491,6 +491,9 @@
         "no_history_found": "No state history found.",
         "error": "Unable to load history"
       },
+      "map": {
+        "error": "Unable to load map"
+      },
       "statistics_charts": {
         "loading_statistics": "Loading statistics…",
         "no_statistics_found": "No statistics found.",