Cleanup remaining entity not-found warnings (#2779)

src/panels/lovelace/cards/hui-entity-button-card.ts

@@ -12,6 +12,7 @@ import { styleMap } from "lit-html/directives/style-map";
 import "@material/mwc-ripple";
 
 import "../../../components/ha-card";
+import "../components/hui-warning";
 
 import isValidEntityId from "../../../common/entity/valid_entity_id";
 import stateIcon from "../../../common/entity/state_icon";
@@ -91,9 +92,13 @@ class HuiEntityButtonCard extends LitElement implements LovelaceCard {
 
     if (!stateObj) {
       return html`
-        <div class="not-found">
-          Entity not available: ${this._config.entity}
-        </div>
+        <hui-warning
+          >${this.hass.localize(
+            "ui.panel.lovelace.warning.entity_not_found",
+            "entity",
+            this._config.entity
+          )}</hui-warning
+        >
       `;
     }
 
@@ -157,11 +162,6 @@ class HuiEntityButtonCard extends LitElement implements LovelaceCard {
       ha-icon[data-state="unavailable"] {
         color: var(--state-icon-unavailable-color);
       }
-      .not-found {
-        flex: 1;
-        background-color: yellow;
-        padding: 8px;
-      }
     `;
   }
 

src/panels/lovelace/cards/hui-gauge-card.ts

@@ -297,11 +297,6 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
         padding-top: calc(var(--base-unit) * 0.15);
         font-size: calc(var(--base-unit) * 0.3);
       }
-      .not-found {
-        flex: 1;
-        background-color: yellow;
-        padding: 8px;
-      }
     `;
   }
 }

src/panels/lovelace/cards/hui-glance-card.ts

@@ -13,6 +13,7 @@ import { LovelaceCardConfig, ActionConfig } from "../../../data/lovelace";
 import { longPress } from "../common/directives/long-press-directive";
 import { EntityConfig } from "../entity-rows/types";
 import { processConfigEntities } from "../common/process-config-entities";
+import { handleClick } from "../common/handle-click";
 
 import computeStateDisplay from "../../../common/entity/compute_state_display";
 import computeStateName from "../../../common/entity/compute_state_name";
@@ -21,7 +22,7 @@ import applyThemesOnElement from "../../../common/dom/apply_themes_on_element";
 import "../../../components/entity/state-badge";
 import "../../../components/ha-card";
 import "../../../components/ha-icon";
-import { handleClick } from "../common/handle-click";
+import "../components/hui-warning";
 
 export interface ConfigEntity extends EntityConfig {
   tap_action?: ActionConfig;
@@ -176,10 +177,6 @@ export class HuiGlanceCard extends LitElement implements LovelaceCard {
         state-badge {
           margin: 8px 0;
         }
-        .not-found {
-          background-color: yellow;
-          text-align: center;
-        }
       </style>
     `;
   }
@@ -189,10 +186,13 @@ export class HuiGlanceCard extends LitElement implements LovelaceCard {
 
     if (!stateObj) {
       return html`
-        <div class="entity not-found">
-          <div class="name">${entityConf.entity}</div>
-          Entity Not Available
-        </div>
+        <hui-warning
+          >${this.hass!.localize(
+            "ui.panel.lovelace.warning.entity_not_found",
+            "entity",
+            entityConf.entity
+          )}</hui-warning
+        >
       `;
     }
 

src/panels/lovelace/cards/hui-sensor-card.ts

@@ -12,6 +12,7 @@ import { LovelaceCard, LovelaceCardEditor } from "../types";
 import { LovelaceCardConfig } from "../../../data/lovelace";
 import { HomeAssistant } from "../../../types";
 import { fireEvent } from "../../../common/dom/fire_event";
+import { fetchRecent } from "../../../data/history";
 
 import applyThemesOnElement from "../../../common/dom/apply_themes_on_element";
 import computeStateName from "../../../common/entity/compute_state_name";
@@ -19,7 +20,7 @@ import stateIcon from "../../../common/entity/state_icon";
 
 import "../../../components/ha-card";
 import "../../../components/ha-icon";
-import { fetchRecent } from "../../../data/history";
+import "../components/hui-warning";
 
 const midPoint = (
   _Ax: number,
@@ -199,15 +200,27 @@ class HuiSensorCard extends LitElement implements LovelaceCard {
 
     const stateObj = this.hass.states[this._config.entity];
 
+    if (!stateObj) {
+      return html`
+        <hui-warning
+          >${this.hass.localize(
+            "ui.panel.lovelace.warning.entity_not_found",
+            "entity",
+            this._config.entity
+          )}</hui-warning
+        >
+      `;
+    }
+
     let graph;
 
     if (stateObj && this._config.graph === "line") {
       if (!stateObj.attributes.unit_of_measurement) {
-        graph = html`
-          <div class="not-found">
-            Entity: ${this._config.entity} - Has no Unit of Measurement and
-            therefore can not display a line graph.
-          </div>
+        return html`
+          <hui-warning
+            >Entity: ${this._config.entity} - Has no Unit of Measurement and
+            therefore can not display a line graph.</hui-warning
+          >
         `;
       } else if (!this._history) {
         graph = svg`
@@ -233,13 +246,6 @@ class HuiSensorCard extends LitElement implements LovelaceCard {
     return html`
       ${this.renderStyle()}
       <ha-card @click="${this._handleClick}">
-        ${!stateObj
-          ? html`
-              <div class="not-found">
-                Entity not available: ${this._config.entity}
-              </div>
-            `
-          : html`
         <div class="flex">
           <div class="icon">
             <ha-icon
@@ -260,7 +266,6 @@ class HuiSensorCard extends LitElement implements LovelaceCard {
           >
         </div>
         <div class="graph"><div>${graph}</div></div>
-            `}
       </ha-card>
     `;
   }
@@ -399,11 +404,6 @@ class HuiSensorCard extends LitElement implements LovelaceCard {
           align-self: flex-end;
           margin: auto 8px;
         }
-        .not-found {
-          flex: 1;
-          background-color: yellow;
-          padding: 8px;
-        }
       </style>
     `;
   }

src/panels/lovelace/components/hui-generic-entity-row.ts

@@ -1,7 +1,3 @@
-import "../../../components/entity/state-badge";
-import "../../../components/ha-relative-time";
-import "../../../components/ha-icon";
-
 import computeStateName from "../../../common/entity/compute_state_name";
 import {
   LitElement,
@@ -11,10 +7,16 @@ import {
   PropertyValues,
   property,
 } from "lit-element";
+
 import { HomeAssistant } from "../../../types";
 import { EntitiesCardEntityConfig } from "../cards/hui-entities-card";
 import { computeRTL } from "../../../common/util/compute_rtl";
 
+import "../../../components/entity/state-badge";
+import "../../../components/ha-relative-time";
+import "../../../components/ha-icon";
+import "../components/hui-warning";
+
 class HuiGenericEntityRow extends LitElement {
   @property() public hass?: HomeAssistant;
   @property() public config?: EntitiesCardEntityConfig;
@@ -30,7 +32,13 @@ class HuiGenericEntityRow extends LitElement {
 
     if (!stateObj) {
       return html`
-        <div class="not-found">Entity not available: [[config.entity]]</div>
+        <hui-warning
+          >${this.hass.localize(
+            "ui.panel.lovelace.warning.entity_not_found",
+            "entity",
+            this.config.entity
+          )}</hui-warning
+        >
       `;
     }
 
@@ -107,11 +115,6 @@ class HuiGenericEntityRow extends LitElement {
         display: block;
         color: var(--secondary-text-color);
       }
-      .not-found {
-        flex: 1;
-        background-color: yellow;
-        padding: 8px;
-      }
       state-badge {
         flex: 0 0 40px;
       }