Generalize errors (#2275)

gallery/src/demos/demo-hui-stack-card.ts

@@ -9,6 +9,9 @@ const ENTITIES = [
   getEntity("light", "kitchen_lights", "on", {
     friendly_name: "Kitchen Lights",
   }),
+  getEntity("light", "bed_light", "on", {
+    friendly_name: "Bed Lights",
+  }),
   getEntity("device_tracker", "demo_paulus", "work", {
     source_type: "gps",
     latitude: 32.877105,

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

@@ -9,6 +9,18 @@ interface Config extends LovelaceCardConfig {
   origConfig: LovelaceCardConfig;
 }
 
+export const createErrorCardElement = (config) => {
+  const el = document.createElement("hui-error-card");
+  el.setConfig(config);
+  return el;
+};
+
+export const createErrorCardConfig = (error, origConfig) => ({
+  type: "error",
+  error,
+  origConfig,
+});
+
 class HuiErrorCard extends LitElement implements LovelaceCard {
   private _config?: Config;
 

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

@@ -17,7 +17,10 @@ import applyThemesOnElement from "../../../common/dom/apply_themes_on_element";
 import computeStateName from "../../../common/entity/compute_state_name";
 
 import { LovelaceCard, LovelaceCardEditor } from "../types";
-import createErrorCardConfig from "../common/create-error-card-config";
+import {
+  createErrorCardConfig,
+  createErrorCardElement,
+} from "./hui-error-card";
 
 export interface SeverityConfig {
   green?: number;
@@ -94,14 +97,8 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
     }
 
     if (error) {
-      const errorConfig = createErrorCardConfig(
-        "Entity not Found!",
-        this._config
-      );
-      const element = document.createElement("hui-error-card");
-      element.setConfig(errorConfig);
       return html`
-        ${element}
+        ${createErrorCardElement(createErrorCardConfig(error, this._config))}
       `;
     }
 

src/panels/lovelace/cards/hui-legacy-wrapper-card.js

@@ -1,4 +1,4 @@
-import createErrorCardConfig from "../common/create-error-card-config";
+import { createErrorCardConfig } from "./hui-error-card";
 import computeDomain from "../../../common/entity/compute_domain";
 
 export default class LegacyWrapperCard extends HTMLElement {

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

@@ -16,6 +16,10 @@ import { LovelaceCardConfig, ActionConfig } from "../../../data/lovelace";
 import { LovelaceCard } from "../types";
 import { handleClick } from "../common/handle-click";
 import { UNAVAILABLE } from "../../../data/entity";
+import {
+  createErrorCardElement,
+  createErrorCardConfig,
+} from "./hui-error-card";
 
 interface Config extends LovelaceCardConfig {
   entity: string;
@@ -62,11 +66,25 @@ class HuiPictureEntityCard extends hassLocalizeLitMixin(LitElement)
   }
 
   protected render(): TemplateResult {
-    if (!this._config || !this.hass || !this.hass.states[this._config.entity]) {
+    if (!this._config || !this.hass) {
       return html``;
     }
 
     const stateObj = this.hass.states[this._config.entity];
+
+    if (!stateObj) {
+      return html`
+        ${
+          createErrorCardElement(
+            createErrorCardConfig(
+              `Entity not found: ${this._config.entity}`,
+              this._config
+            )
+          )
+        }
+      `;
+    }
+
     const name = this._config.name || computeStateName(stateObj);
     const state = computeStateDisplay(
       this.localize,

src/panels/lovelace/common/create-card-element.js

@@ -5,7 +5,10 @@ import "../cards/hui-conditional-card";
 import "../cards/hui-entities-card";
 import "../cards/hui-entity-button-card";
 import "../cards/hui-entity-filter-card";
-import "../cards/hui-error-card";
+import {
+  createErrorCardElement,
+  createErrorCardConfig,
+} from "../cards/hui-error-card";
 import "../cards/hui-glance-card";
 import "../cards/hui-history-graph-card";
 import "../cards/hui-horizontal-stack-card";
@@ -26,8 +29,6 @@ import "../cards/hui-thermostat-card";
 import "../cards/hui-weather-forecast-card";
 import "../cards/hui-gauge-card";
 
-import createErrorCardConfig from "./create-error-card-config";
-
 const CARD_TYPES = new Set([
   "alarm-panel",
   "conditional",
@@ -71,9 +72,8 @@ function _createElement(tag, config) {
   return element;
 }
 
-function _createErrorElement(error, config) {
-  return _createElement("hui-error-card", createErrorCardConfig(error, config));
-}
+const _createErrorElement = (error, config) =>
+  createErrorCardElement(createErrorCardConfig(error, config));
 
 export default function createCardElement(config) {
   if (!config || typeof config !== "object" || !config.type) {

src/panels/lovelace/common/create-error-card-config.js

@@ -1,7 +0,0 @@
-export default function createErrorConfig(error, origConfig) {
-  return {
-    type: "error",
-    error,
-    origConfig,
-  };
-}

src/panels/lovelace/common/create-hui-element.js

@@ -6,7 +6,10 @@ import "../elements/hui-state-icon-element";
 import "../elements/hui-state-label-element";
 
 import { fireEvent } from "../../../common/dom/fire_event";
-import createErrorCardConfig from "./create-error-card-config";
+import {
+  createErrorCardElement,
+  createErrorCardConfig,
+} from "../cards/hui-error-card";
 
 const CUSTOM_TYPE_PREFIX = "custom:";
 const ELEMENT_TYPES = new Set([
@@ -19,7 +22,7 @@ const ELEMENT_TYPES = new Set([
 ]);
 const TIMEOUT = 2000;
 
-function _createElement(tag, config) {
+const _createElement = (tag, config) => {
   const element = document.createElement(tag);
   try {
     element.setConfig(config);
@@ -30,11 +33,10 @@ function _createElement(tag, config) {
     return _createErrorElement(err.message, config);
   }
   return element;
-}
+};
 
-function _createErrorElement(error, config) {
-  return _createElement("hui-error-card", createErrorCardConfig(error, config));
-}
+const _createErrorElement = (error, config) =>
+  createErrorCardElement(createErrorCardConfig(error, config));
 
 function _hideErrorElement(element) {
   element.style.display = "None";

src/panels/lovelace/common/create-row-element.js

@@ -1,5 +1,9 @@
 import { fireEvent } from "../../../common/dom/fire_event";
 
+import {
+  createErrorCardElement,
+  createErrorCardConfig,
+} from "../cards/hui-error-card";
 import "../entity-rows/hui-climate-entity-row";
 import "../entity-rows/hui-cover-entity-row";
 import "../entity-rows/hui-group-entity-row";
@@ -19,8 +23,6 @@ import "../special-rows/hui-divider-row";
 import "../special-rows/hui-section-row";
 import "../special-rows/hui-weblink-row";
 
-import createErrorCardConfig from "./create-error-card-config";
-
 const CUSTOM_TYPE_PREFIX = "custom:";
 const SPECIAL_TYPES = new Set([
   "call-service",
@@ -51,7 +53,7 @@ const DOMAIN_TO_ELEMENT_TYPE = {
 };
 const TIMEOUT = 2000;
 
-function _createElement(tag, config) {
+const _createElement = (tag, config) => {
   const element = document.createElement(tag);
   try {
     if ("setConfig" in element) element.setConfig(config);
@@ -63,18 +65,17 @@ function _createElement(tag, config) {
   }
 
   return element;
-}
+};
 
-function _createErrorElement(error, config) {
-  return _createElement("hui-error-card", createErrorCardConfig(error, config));
-}
+const _createErrorElement = (error, config) =>
+  createErrorCardElement(createErrorCardConfig(error, config));
 
-function _hideErrorElement(element) {
+const _hideErrorElement = (element) => {
   element.style.display = "None";
   return window.setTimeout(() => {
     element.style.display = "";
   }, TIMEOUT);
-}
+};
 
 export default function createRowElement(config) {
   let tag;

src/panels/lovelace/editor/card-editor/hui-card-preview.ts

@@ -1,12 +1,12 @@
 import "@polymer/paper-input/paper-textarea";
 
 import createCardElement from "../../common/create-card-element";
-import createErrorCardConfig from "../../common/create-error-card-config";
 import { HomeAssistant } from "../../../../types";
 import { LovelaceCardConfig } from "../../../../data/lovelace";
 import { LovelaceCard } from "../../types";
 import { ConfigError } from "../types";
 import { getCardElementTag } from "../../common/get-card-element-tag";
+import { createErrorCardConfig } from "../../cards/hui-error-card";
 
 export class HuiCardPreview extends HTMLElement {
   private _hass?: HomeAssistant;