Add ability to remove Lovelace config (#4430)

* Add ability to remove Lovelace config

* Update hc-lovelace.ts

cast/src/receiver/layout/hc-lovelace.ts

@@ -39,6 +39,7 @@ class HcLovelace extends LitElement {
       mode: "storage",
       language: "en",
       saveConfig: async () => undefined,
+      deleteConfig: async () => undefined,
       setEditMode: () => undefined,
     };
     return this.lovelaceConfig.views[index].panel

src/data/lovelace.ts

@@ -113,6 +113,11 @@ export const saveConfig = (
     config,
   });
 
+export const deleteConfig = (hass: HomeAssistant): Promise<void> =>
+  hass.callWS({
+    type: "lovelace/config/delete",
+  });
+
 export const subscribeLovelaceUpdates = (
   conn: Connection,
   onChange: () => void

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

@@ -6,6 +6,7 @@ import {
   saveConfig,
   subscribeLovelaceUpdates,
   WindowWithLovelaceProm,
+  deleteConfig,
 } from "../../data/lovelace";
 import "../../layouts/hass-loading-screen";
 import "../../layouts/hass-error-screen";
@@ -316,6 +317,28 @@ class LovelacePanel extends LitElement {
           throw err;
         }
       },
+      deleteConfig: async (): Promise<void> => {
+        const { config: previousConfig, mode: previousMode } = this.lovelace!;
+        try {
+          // Optimistic update
+          this._updateLovelace({
+            config: await generateLovelaceConfigFromHass(this.hass!),
+            mode: "generated",
+            editMode: false,
+          });
+          this._ignoreNextUpdateEvent = true;
+          await deleteConfig(this.hass!);
+        } catch (err) {
+          // tslint:disable-next-line
+          console.error(err);
+          // Rollback the optimistic update
+          this._updateLovelace({
+            config: previousConfig,
+            mode: previousMode,
+          });
+          throw err;
+        }
+      },
     };
   }
 

src/panels/lovelace/hui-editor.ts

@@ -28,6 +28,8 @@ import "../../components/ha-code-editor";
 import { HaCodeEditor } from "../../components/ha-code-editor";
 import { HomeAssistant } from "../../types";
 import { computeRTL } from "../../common/util/compute_rtl";
+import { LovelaceConfig } from "../../data/lovelace";
+import { showConfirmationDialog } from "../../dialogs/confirmation/show-dialog-confirmation";
 
 const lovelaceStruct = struct.interface({
   title: "string?",
@@ -180,9 +182,44 @@ class LovelaceFullConfigEditor extends LitElement {
     }
   }
 
+  private async _removeConfig() {
+    try {
+      await this.lovelace!.deleteConfig();
+    } catch (err) {
+      alert(
+        this.hass.localize(
+          "ui.panel.lovelace.editor.raw_editor.error_remove",
+          "error",
+          err
+        )
+      );
+    }
+    window.onbeforeunload = null;
+    if (this.closeEditor) {
+      this.closeEditor();
+    }
+  }
+
   private async _handleSave() {
     this._saving = true;
 
+    const value = this.yamlEditor.value;
+
+    if (!value) {
+      showConfirmationDialog(this, {
+        title: this.hass.localize(
+          "ui.panel.lovelace.editor.raw_editor.confirm_remove_config_title"
+        ),
+        text: this.hass.localize(
+          "ui.panel.lovelace.editor.raw_editor.confirm_remove_config_text"
+        ),
+        confirmBtnText: this.hass.localize("ui.common.yes"),
+        cancelBtnText: this.hass.localize("ui.common.no"),
+        confirm: () => this._removeConfig(),
+      });
+      return;
+    }
+
     if (this.yamlEditor.hasComments) {
       if (
         !confirm(
@@ -195,9 +232,9 @@ class LovelaceFullConfigEditor extends LitElement {
       }
     }
 
-    let value;
+    let config: LovelaceConfig;
     try {
-      value = safeLoad(this.yamlEditor.value);
+      config = safeLoad(value);
     } catch (err) {
       alert(
         this.hass.localize(
@@ -210,7 +247,7 @@ class LovelaceFullConfigEditor extends LitElement {
       return;
     }
     try {
-      value = lovelaceStruct(value);
+      config = lovelaceStruct(config);
     } catch (err) {
       alert(
         this.hass.localize(
@@ -222,7 +259,7 @@ class LovelaceFullConfigEditor extends LitElement {
       return;
     }
     try {
-      await this.lovelace!.saveConfig(value);
+      await this.lovelace!.saveConfig(config);
     } catch (err) {
       alert(
         this.hass.localize(

src/panels/lovelace/types.ts

@@ -21,6 +21,7 @@ export interface Lovelace {
   enableFullEditMode: () => void;
   setEditMode: (editMode: boolean) => void;
   saveConfig: (newConfig: LovelaceConfig) => Promise<void>;
+  deleteConfig: () => Promise<void>;
 }
 
 export interface LovelaceBadge extends HTMLElement {

src/translations/en.json

@@ -1615,11 +1615,14 @@
             "save": "Save",
             "unsaved_changes": "Unsaved changes",
             "saved": "Saved",
+            "confirm_remove_config_title": "Are you sure you want to remove your Lovelace configuration? We will automatically generate your Lovelace views with your areas and devices.",
+            "confirm_remove_config_text": "We will automatically generate your Lovelace views with your areas and devices if you remove your Lovelace configuration.",
             "confirm_unsaved_changes": "You have unsaved changes, are you sure you want to exit?",
             "confirm_unsaved_comments": "Your config contains comment(s), these will not be saved. Do you want to continue?",
             "error_parse_yaml": "Unable to parse YAML: {error}",
             "error_invalid_config": "Your config is not valid: {error}",
-            "error_save_yaml": "Unable to save YAML: {error}"
+            "error_save_yaml": "Unable to save YAML: {error}",
+            "error_remove": "Unable to remove config: {error}"
           },
           "edit_lovelace": {
             "header": "Title of your Lovelace UI",