Add take control for yaml mode (#4992)

src/components/ha-yaml-editor.ts

@@ -6,6 +6,13 @@ import { afterNextRender } from "../common/util/render-status";
 // tslint:disable-next-line
 import { HaCodeEditor } from "./ha-code-editor";
 
+declare global {
+  // for fire event
+  interface HASSDomEvents {
+    "editor-refreshed": undefined;
+  }
+}
+
 const isEmpty = (obj: object) => {
   if (typeof obj !== "object") {
     return false;
@@ -37,6 +44,7 @@ export class HaYamlEditor extends LitElement {
       if (this._editor?.codemirror) {
         this._editor.codemirror.refresh();
       }
+      afterNextRender(() => fireEvent(this, "editor-refreshed"));
     });
   }
 

src/panels/lovelace/editor/hui-dialog-save-config.ts

@@ -6,9 +6,11 @@ import {
   CSSResult,
   customElement,
   property,
+  query,
 } from "lit-element";
 import "@polymer/paper-spinner/paper-spinner";
 import "../../../components/dialog/ha-paper-dialog";
+import "../../../components/ha-yaml-editor";
 // tslint:disable-next-line:no-duplicate-imports
 import { HaPaperDialog } from "../../../components/dialog/ha-paper-dialog";
 import "@material/mwc-button";
@@ -16,6 +18,8 @@ import "@material/mwc-button";
 import { haStyleDialog } from "../../../resources/styles";
 import { HomeAssistant } from "../../../types";
 import { SaveDialogParams } from "./show-save-config-dialog";
+import { PolymerChangedEvent } from "../../../polymer-types";
+import { fireEvent } from "../../../common/dom/fire_event";
 
 @customElement("hui-dialog-save-config")
 export class HuiSaveConfig extends LitElement {
@@ -24,6 +28,7 @@ export class HuiSaveConfig extends LitElement {
   @property() private _params?: SaveDialogParams;
 
   @property() private _saving: boolean;
+  @query("ha-paper-dialog") private _dialog?: HaPaperDialog;
 
   public constructor() {
     super();
@@ -33,16 +38,19 @@ export class HuiSaveConfig extends LitElement {
   public async showDialog(params: SaveDialogParams): Promise<void> {
     this._params = params;
     await this.updateComplete;
-    this._dialog.open();
-  }
-
-  private get _dialog(): HaPaperDialog {
-    return this.shadowRoot!.querySelector("ha-paper-dialog")!;
+    this._dialog!.open();
   }
 
   protected render(): TemplateResult {
+    if (!this._params) {
+      return html``;
+    }
     return html`
-      <ha-paper-dialog with-backdrop>
+      <ha-paper-dialog
+        with-backdrop
+        opened
+        @opened-changed=${this._openedChanged}
+      >
         <h2>
           ${this.hass!.localize("ui.panel.lovelace.editor.save_config.header")}
         </h2>
@@ -50,34 +58,81 @@ export class HuiSaveConfig extends LitElement {
           <p>
             ${this.hass!.localize("ui.panel.lovelace.editor.save_config.para")}
           </p>
-          <p>
-            ${this.hass!.localize(
-              "ui.panel.lovelace.editor.save_config.para_sure"
-            )}
-          </p>
+          ${this._params.mode === "storage"
+            ? html`
+                <p>
+                  ${this.hass!.localize(
+                    "ui.panel.lovelace.editor.save_config.para_sure"
+                  )}
+                </p>
+              `
+            : html`
+                <p>
+                  ${this.hass!.localize(
+                    "ui.panel.lovelace.editor.save_config.yaml_mode"
+                  )}
+                </p>
+                <p>
+                  ${this.hass!.localize(
+                    "ui.panel.lovelace.editor.save_config.yaml_control"
+                  )}
+                </p>
+                <p>
+                  ${this.hass!.localize(
+                    "ui.panel.lovelace.editor.save_config.yaml_config"
+                  )}
+                </p>
+                <ha-yaml-editor
+                  .defaultValue=${this._params!.lovelace.config}
+                  @editor-refreshed=${this._editorRefreshed}
+                ></ha-yaml-editor>
+              `}
         </paper-dialog-scrollable>
         <div class="paper-dialog-buttons">
-          <mwc-button @click="${this._closeDialog}"
-            >${this.hass!.localize(
-              "ui.panel.lovelace.editor.save_config.cancel"
-            )}</mwc-button
-          >
-          <mwc-button ?disabled="${this._saving}" @click="${this._saveConfig}">
-            <paper-spinner
-              ?active="${this._saving}"
-              alt="Saving"
-            ></paper-spinner>
-            ${this.hass!.localize(
-              "ui.panel.lovelace.editor.save_config.save"
-            )}</mwc-button
-          >
+          ${this._params.mode === "storage"
+            ? html`
+                <mwc-button @click="${this._closeDialog}"
+                  >${this.hass!.localize(
+                    "ui.panel.lovelace.editor.save_config.cancel"
+                  )}
+                </mwc-button>
+                <mwc-button
+                  ?disabled="${this._saving}"
+                  @click="${this._saveConfig}"
+                >
+                  <paper-spinner
+                    ?active="${this._saving}"
+                    alt="Saving"
+                  ></paper-spinner>
+                  ${this.hass!.localize(
+                    "ui.panel.lovelace.editor.save_config.save"
+                  )}
+                </mwc-button>
+              `
+            : html`
+                <mwc-button @click=${this._closeDialog}
+                  >${this.hass!.localize(
+                    "ui.panel.lovelace.editor.save_config.close"
+                  )}
+                </mwc-button>
+              `}
         </div>
       </ha-paper-dialog>
     `;
   }
 
   private _closeDialog(): void {
-    this._dialog.close();
+    this._dialog!.close();
+  }
+
+  private _openedChanged(ev: PolymerChangedEvent<boolean>): void {
+    if (!ev.detail.value) {
+      this._params = undefined;
+    }
+  }
+
+  private _editorRefreshed() {
+    fireEvent(this._dialog! as HTMLElement, "iron-resize");
   }
 
   private async _saveConfig(): Promise<void> {

src/panels/lovelace/editor/show-save-config-dialog.ts

@@ -13,6 +13,7 @@ const dialogTag = "hui-dialog-save-config";
 
 export interface SaveDialogParams {
   lovelace: Lovelace;
+  mode: "yaml" | "storage";
 }
 
 let registeredDialog = false;

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

@@ -339,6 +339,7 @@ class LovelacePanel extends LitElement {
         }
         showSaveDialog(this, {
           lovelace: this.lovelace!,
+          mode: this.panel!.config.mode,
         });
       },
       saveConfig: async (newConfig: LovelaceConfig): Promise<void> => {

src/translations/en.json

@@ -1935,7 +1935,11 @@
             "header": "Take control of your Lovelace UI",
             "para": "By default Home Assistant will maintain your user interface, updating it when new entities or Lovelace UI components become available. If you take control we will no longer make changes automatically for you.",
             "para_sure": "Are you sure you want to take control of your user interface?",
+            "yaml_mode": "You are using YAML mode, that means you can not change your Lovelace config from the UI. If you want to change Lovelace from the UI, remove the 'mode: yaml' from your Lovelace configuration in 'configuration.yaml.'",
+            "yaml_control": "To take control in YAML mode, create a YAML file with the name you specified in your config for this dashboard, or the default 'ui-lovelace.yaml'.",
+            "yaml_config": "To help you start here is the current config of this dashboard:",
             "cancel": "Never mind",
+            "close": "Close",
             "save": "Take control"
           },
           "migrate": {