Fix for when the preview element was an error element (#4969)

* Fix for when the preview element was an error element

* Comments

* Update hui-dialog-edit-card.ts

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

@@ -13,7 +13,7 @@ import { LovelaceCard } from "../types";
 import { HomeAssistant } from "../../../types";
 import { ErrorCardConfig } from "./types";
 
-export const createErrorCardElement = (config) => {
+export const createErrorCardElement = (config: ErrorCardConfig) => {
   const el = document.createElement("hui-error-card");
   el.setConfig(config);
   return el;
@@ -46,7 +46,11 @@ export class HuiErrorCard extends LitElement implements LovelaceCard {
 
     return html`
       ${this._config.error}
+      ${this._config.origConfig
+        ? html`
             <pre>${safeDump(this._config.origConfig)}</pre>
+          `
+        : ""}
     `;
   }
 

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

@@ -1,7 +1,5 @@
 import "@polymer/paper-input/paper-textarea";
 
-import deepClone from "deep-clone-simple";
-
 import { createCardElement } from "../../create-element/create-card-element";
 import { HomeAssistant } from "../../../../types";
 import { LovelaceCardConfig } from "../../../../data/lovelace";
@@ -15,6 +13,10 @@ export class HuiCardPreview extends HTMLElement {
   private _element?: LovelaceCard;
   private _config?: LovelaceCardConfig;
 
+  private get _error() {
+    return this._element?.tagName === "HUI-ERROR-CARD";
+  }
+
   constructor() {
     super();
     this.addEventListener("ll-rebuild", () => {
@@ -37,12 +39,9 @@ export class HuiCardPreview extends HTMLElement {
   }
 
   set error(error: ConfigError) {
-    const configValue = createErrorCardConfig(
+    this._createCard(
-      `${error.type}: ${error.message}`,
+      createErrorCardConfig(`${error.type}: ${error.message}`, undefined)
-      undefined
     );
-
-    this._createCard(configValue);
   }
 
   set config(configValue: LovelaceCardConfig) {
@@ -66,9 +65,10 @@ export class HuiCardPreview extends HTMLElement {
       return;
     }
 
-    if (curConfig && configValue.type === curConfig.type) {
+    // in case the element was an error element we always want to recreate it
+    if (!this._error && curConfig && configValue.type === curConfig.type) {
       try {
-        this._element.setConfig(deepClone(configValue));
+        this._element.setConfig(configValue);
       } catch (err) {
         this._createCard(createErrorCardConfig(err.message, configValue));
       }

src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts

@@ -8,6 +8,8 @@ import {
   property,
 } from "lit-element";
 
+import deepFreeze from "deep-freeze";
+
 import { HomeAssistant } from "../../../../types";
 import { HASSDomEvent } from "../../../../common/dom/fire_event";
 import {
@@ -55,6 +57,9 @@ export class HuiDialogEditCard extends LitElement {
     this._viewConfig = params.lovelaceConfig.views[view];
     this._cardConfig =
       card !== undefined ? this._viewConfig.cards![card] : undefined;
+    if (this._cardConfig && !Object.isFrozen(this._cardConfig)) {
+      this._cardConfig = deepFreeze(this._cardConfig);
+    }
   }
 
   private get _cardEditorEl(): HuiCardEditor | null {
@@ -248,19 +253,20 @@ export class HuiDialogEditCard extends LitElement {
   }
 
   private _handleCardPicked(ev) {
-    this._cardConfig = ev.detail.config;
+    const config = ev.detail.config;
     if (this._params!.entities && this._params!.entities.length > 0) {
-      if (Object.keys(this._cardConfig!).includes("entities")) {
+      if (Object.keys(config).includes("entities")) {
-        this._cardConfig!.entities = this._params!.entities;
+        config.entities = this._params!.entities;
-      } else if (Object.keys(this._cardConfig!).includes("entity")) {
+      } else if (Object.keys(config).includes("entity")) {
-        this._cardConfig!.entity = this._params!.entities[0];
+        config.entity = this._params!.entities[0];
       }
     }
+    this._cardConfig = deepFreeze(config);
     this._error = ev.detail.error;
   }
 
   private _handleConfigChanged(ev) {
-    this._cardConfig = ev.detail.config;
+    this._cardConfig = deepFreeze(ev.detail.config);
     this._error = ev.detail.error;
   }
 

src/panels/lovelace/editor/card-editor/hui-dialog-suggest-card.ts

@@ -9,6 +9,8 @@ import {
   query,
 } from "lit-element";
 
+import deepFreeze from "deep-freeze";
+
 import { HomeAssistant } from "../../../../types";
 import { LovelaceCardConfig } from "../../../../data/lovelace";
 import "./hui-card-editor";
@@ -52,6 +54,9 @@ export class HuiDialogSuggestCard extends LitElement {
         {},
         true
       );
+    if (!Object.isFrozen(this._cardConfig)) {
+      this._cardConfig = deepFreeze(this._cardConfig);
+    }
     if (this._dialog) {
       this._dialog.open();
     }

src/panels/lovelace/ha-panel-lovelace.ts

@@ -1,5 +1,5 @@
 import "@material/mwc-button";
-import * as deepFreeze from "deep-freeze";
+import deepFreeze from "deep-freeze";
 
 import {
   fetchConfig,