Added migrate dialog when card has no ID

src/panels/lovelace/common/data.ts

@@ -1,4 +1,5 @@
 import { HomeAssistant } from "../../../types";
+import { LovelaceConfig } from "../types";
 
 export const getCardConfig = (
   hass: HomeAssistant,
@@ -12,10 +13,17 @@ export const getCardConfig = (
 export const updateCardConfig = (
   hass: HomeAssistant,
   cardId: string,
-  config: any
+  config: LovelaceConfig | string,
+  configFormat: "json" | "yaml"
 ): Promise<void> =>
   hass!.callWS({
     type: "lovelace/config/card/update",
     card_id: cardId,
     card_config: config,
+    format: configFormat,
+  });
+
+export const migrateConfig = (hass: HomeAssistant): Promise<void> =>
+  hass!.callWS({
+    type: "lovelace/config/migrate",
   });

src/panels/lovelace/components/hui-card-options.ts

@@ -2,17 +2,17 @@ import "@polymer/paper-button/paper-button";
 import { html, LitElement, PropertyDeclarations } from "@polymer/lit-element";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { HomeAssistant } from "../../../types";
+import { LovelaceConfig } from "../types";
 
 let registeredDialog = false;
 
 export class HuiCardOptions extends LitElement {
   public cardId?: string;
+  public cardConfig?: LovelaceConfig;
   protected hass?: HomeAssistant;
 
   static get properties(): PropertyDeclarations {
-    return {
-      hass: {},
-    };
+    return { hass: {} };
   }
 
   public connectedCallback() {
@@ -51,7 +51,7 @@ export class HuiCardOptions extends LitElement {
   private _editCard() {
     fireEvent(this, "show-edit-card", {
       hass: this.hass,
-      cardId: this.cardId,
+      cardConfig: this.cardConfig,
       reloadLovelace: () => fireEvent(this, "config-refresh"),
     });
   }

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

@@ -0,0 +1,57 @@
+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 { LovelaceCard, LovelaceConfig } from "../types";
+import { ConfigError } from "./types";
+
+export class HuiCardPreview extends HTMLElement {
+  private _hass?: HomeAssistant;
+
+  set hass(value: HomeAssistant) {
+    this._hass = value;
+    if (this.lastChild) {
+      (this.lastChild as LovelaceCard).hass = value;
+    }
+  }
+
+  set error(error: ConfigError) {
+    const configValue = createErrorCardConfig(
+      `${error.type}: ${error.message}`,
+      undefined
+    );
+
+    this._createCard(configValue);
+  }
+
+  set value(configValue: LovelaceConfig) {
+    this._createCard(configValue);
+  }
+
+  private _createCard(configValue: LovelaceConfig): void {
+    if (this.lastChild) {
+      this.removeChild(this.lastChild);
+    }
+
+    if (!configValue) {
+      return;
+    }
+
+    const element = createCardElement(configValue);
+
+    if (this._hass) {
+      element.hass = this._hass;
+    }
+
+    this.appendChild(element);
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-card-preview": HuiCardPreview;
+  }
+}
+
+customElements.define("hui-card-preview", HuiCardPreview);