Move edit description into rename dialog (#13580)

src/panels/config/automation/automation-rename-dialog/dialog-automation-rename.ts

@@ -0,0 +1,125 @@
+import "@material/mwc-button";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { fireEvent } from "../../../../common/dom/fire_event";
+import { createCloseHeading } from "../../../../components/ha-dialog";
+import { HassDialog } from "../../../../dialogs/make-dialog-manager";
+import { haStyle, haStyleDialog } from "../../../../resources/styles";
+import type { HomeAssistant } from "../../../../types";
+import type { AutomationRenameDialog } from "./show-dialog-automation-rename";
+
+@customElement("ha-dialog-automation-rename")
+class DialogAutomationRename extends LitElement implements HassDialog {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @state() private _opened = false;
+
+  private _params!: AutomationRenameDialog;
+
+  private _newName?: string;
+
+  private _newDescription?: string;
+
+  public showDialog(params: AutomationRenameDialog): void {
+    this._opened = true;
+    this._params = params;
+    this._newName = params.config.alias || "";
+    this._newDescription = params.config.description || "";
+  }
+
+  public closeDialog(): void {
+    this._params.onClose();
+
+    if (this._opened) {
+      fireEvent(this, "dialog-closed", { dialog: this.localName });
+    }
+    this._opened = false;
+  }
+
+  protected render(): TemplateResult {
+    if (!this._opened) {
+      return html``;
+    }
+    return html`
+      <ha-dialog
+        open
+        @closed=${this.closeDialog}
+        .heading=${createCloseHeading(
+          this.hass,
+          this.hass.localize("ui.panel.config.automation.editor.rename")
+        )}
+      >
+        <ha-textfield
+          dialogInitialFocus
+          value=${this._newName}
+          .placeholder=${this.hass.localize(
+            "ui.panel.config.automation.editor.default_name"
+          )}
+          .label=${this.hass.localize(
+            "ui.panel.config.automation.editor.alias"
+          )}
+          type="string"
+          @change=${this._valueChanged}
+        ></ha-textfield>
+
+        <ha-textarea
+          .label=${this.hass.localize(
+            "ui.panel.config.automation.editor.description.label"
+          )}
+          .placeholder=${this.hass.localize(
+            "ui.panel.config.automation.editor.description.placeholder"
+          )}
+          name="description"
+          autogrow
+          .value=${this._newDescription}
+          @change=${this._valueChanged}
+        ></ha-textarea>
+
+        <mwc-button @click=${this.closeDialog} slot="secondaryAction">
+          ${this.hass.localize("ui.dialogs.generic.cancel")}
+        </mwc-button>
+        <mwc-button @click=${this._save} slot="primaryAction">
+          ${this.hass.localize("ui.panel.config.automation.editor.rename")}
+        </mwc-button>
+      </ha-dialog>
+    `;
+  }
+
+  private _valueChanged(ev: CustomEvent) {
+    ev.stopPropagation();
+    const target = ev.target as any;
+    if (target.name === "description") {
+      this._newDescription = target.value;
+    } else {
+      this._newName = target.value;
+    }
+  }
+
+  private _save(): void {
+    this._params.updateAutomation({
+      ...this._params.config,
+      alias: this._newName,
+      description: this._newDescription,
+    });
+    this.closeDialog();
+  }
+
+  static get styles(): CSSResultGroup {
+    return [
+      haStyle,
+      haStyleDialog,
+      css`
+        ha-textfield,
+        ha-textarea {
+          display: block;
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-dialog-automation-rename": DialogAutomationRename;
+  }
+}

src/panels/config/automation/automation-rename-dialog/show-dialog-automation-rename.ts

@@ -0,0 +1,22 @@
+import { fireEvent } from "../../../../common/dom/fire_event";
+import type { AutomationConfig } from "../../../../data/automation";
+
+export const loadAutomationRenameDialog = () =>
+  import("./dialog-automation-rename");
+
+export interface AutomationRenameDialog {
+  config: AutomationConfig;
+  updateAutomation: (config: AutomationConfig) => void;
+  onClose: () => void;
+}
+
+export const showAutomationRenameDialog = (
+  element: HTMLElement,
+  dialogParams: AutomationRenameDialog
+): void => {
+  fireEvent(element, "show-dialog", {
+    dialogTag: "ha-dialog-automation-rename",
+    dialogImport: loadAutomationRenameDialog,
+    dialogParams,
+  });
+};

src/panels/config/automation/blueprint-automation-editor.ts

@@ -49,26 +49,6 @@ export class HaBlueprintAutomationEditor extends LitElement {
   protected render() {
     const blueprint = this._blueprint;
     return html`
-      <p class="introduction">
-        ${this.hass.localize("ui.panel.config.automation.editor.introduction")}
-      </p>
-      <ha-card outlined>
-        <div class="card-content">
-          <ha-textarea
-            .label=${this.hass.localize(
-              "ui.panel.config.automation.editor.description.label"
-            )}
-            .placeholder=${this.hass.localize(
-              "ui.panel.config.automation.editor.description.placeholder"
-            )}
-            name="description"
-            autogrow
-            .value=${this.config.description || ""}
-            @change=${this._valueChanged}
-          ></ha-textarea>
-        </div>
-      </ha-card>
-
       <ha-card
         outlined
         class="blueprint"
@@ -198,22 +178,6 @@ export class HaBlueprintAutomationEditor extends LitElement {
     });
   }
 
-  private _valueChanged(ev: CustomEvent) {
-    ev.stopPropagation();
-    const target = ev.target as any;
-    const name = target.name;
-    if (!name) {
-      return;
-    }
-    const newVal = target.value;
-    if ((this.config![name] || "") === newVal) {
-      return;
-    }
-    fireEvent(this, "value-changed", {
-      value: { ...this.config!, [name]: newVal },
-    });
-  }
-
   static get styles(): CSSResultGroup {
     return [
       haStyle,
@@ -222,7 +186,7 @@ export class HaBlueprintAutomationEditor extends LitElement {
           display: block;
         }
         ha-card.blueprint {
-          margin: 24px auto;
+          margin: 0 auto;
         }
         .padding {
           padding: 16px;
@@ -233,7 +197,6 @@ export class HaBlueprintAutomationEditor extends LitElement {
         .blueprint-picker-container {
           padding: 0 16px 16px;
         }
-        ha-textarea,
         ha-textfield,
         ha-blueprint-picker {
           display: block;

src/panels/config/automation/ha-automation-editor.ts

@@ -6,7 +6,6 @@ import {
   mdiDelete,
   mdiDotsVertical,
   mdiInformationOutline,
-  mdiPencil,
   mdiPlay,
   mdiPlayCircleOutline,
   mdiRenameBox,
@@ -48,7 +47,6 @@ import {
 import {
   showAlertDialog,
   showConfirmationDialog,
-  showPromptDialog,
 } from "../../../dialogs/generic/show-dialog-box";
 import "../../../layouts/ha-app-layout";
 import "../../../layouts/hass-subpage";
@@ -57,7 +55,7 @@ import { haStyle } from "../../../resources/styles";
 import { HomeAssistant, Route } from "../../../types";
 import { showToast } from "../../../util/toast";
 import "../ha-config-section";
-import { configSections } from "../ha-panel-config";
+import { showAutomationRenameDialog } from "./automation-rename-dialog/show-dialog-automation-rename";
 import "./blueprint-automation-editor";
 import "./manual-automation-editor";
 
@@ -118,7 +116,12 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
         .narrow=${this.narrow}
         .route=${this.route}
         .backCallback=${this._backTapped}
-        .tabs=${configSections.automations}
+        .header=${!this._config
+          ? ""
+          : this._config.alias ||
+            this.hass.localize(
+              "ui.panel.config.automation.editor.default_name"
+            )}
       >
         <ha-button-menu corner="BOTTOM_START" slot="toolbar-icon">
           <ha-icon-button
@@ -234,14 +237,6 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
 
         ${this._config
           ? html`
-              ${this.narrow
-                ? html`<span slot="header"
-                    >${this._config!.alias ||
-                    this.hass.localize(
-                      "ui.panel.config.automation.editor.default_name"
-                    )}</span
-                  >`
-                : ""}
               <div
                 class="content ${classMap({
                   "yaml-mode": this._mode === "yaml",
@@ -252,48 +247,27 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
                   ? html`<div class="errors">${this._errors}</div>`
                   : ""}
                 ${this._mode === "gui"
-                  ? html`
+                  ? "use_blueprint" in this._config
-                      ${this.narrow
+                    ? html`
-                        ? ""
+                        <blueprint-automation-editor
-                        : html`
+                          .hass=${this.hass}
-                            <div class="header-name">
+                          .narrow=${this.narrow}
-                              <h1>
+                          .isWide=${this.isWide}
-                                ${this._config!.alias ||
+                          .stateObj=${stateObj}
-                                this.hass.localize(
+                          .config=${this._config}
-                                  "ui.panel.config.automation.editor.default_name"
+                          @value-changed=${this._valueChanged}
-                                )}
+                        ></blueprint-automation-editor>
-                              </h1>
+                      `
-                              <ha-icon-button
+                    : html`
-                                .path=${mdiPencil}
+                        <manual-automation-editor
-                                @click=${this._promptAutomationAlias}
+                          .hass=${this.hass}
-                                .label=${this.hass.localize(
+                          .narrow=${this.narrow}
-                                  "ui.panel.config.automation.editor.rename"
+                          .isWide=${this.isWide}
-                                )}
+                          .stateObj=${stateObj}
-                              ></ha-icon-button>
+                          .config=${this._config}
-                            </div>
+                          @value-changed=${this._valueChanged}
-                          `}
+                        ></manual-automation-editor>
-                      ${"use_blueprint" in this._config
+                      `
-                        ? html`
-                            <blueprint-automation-editor
-                              .hass=${this.hass}
-                              .narrow=${this.narrow}
-                              .isWide=${this.isWide}
-                              .stateObj=${stateObj}
-                              .config=${this._config}
-                              @value-changed=${this._valueChanged}
-                            ></blueprint-automation-editor>
-                          `
-                        : html`
-                            <manual-automation-editor
-                              .hass=${this.hass}
-                              .narrow=${this.narrow}
-                              .isWide=${this.isWide}
-                              .stateObj=${stateObj}
-                              .config=${this._config}
-                              @value-changed=${this._valueChanged}
-                            ></manual-automation-editor>
-                          `}
-                    `
                   : this._mode === "yaml"
                   ? html`
                       ${!this.narrow
@@ -559,32 +533,26 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
     this._mode = "yaml";
   }
 
-  private async _promptAutomationAlias(): Promise<string | null> {
+  private async _promptAutomationAlias(): Promise<void> {
-    const result = await showPromptDialog(this, {
+    return new Promise((resolve) => {
-      title: this.hass.localize(
+      showAutomationRenameDialog(this, {
-        "ui.panel.config.automation.editor.automation_alias"
+        config: this._config!,
-      ),
+        updateAutomation: (config) => {
-      inputLabel: this.hass.localize("ui.panel.config.automation.editor.alias"),
+          this._config = config;
-      inputType: "string",
+          this._dirty = true;
-      placeholder: this.hass.localize(
+          this.requestUpdate();
-        "ui.panel.config.automation.editor.default_name"
+          resolve();
-      ),
+        },
-      defaultValue: this._config!.alias,
+        onClose: () => resolve(),
-      confirmText: this.hass.localize("ui.common.submit"),
+      });
     });
-    if (result) {
-      this._config!.alias = result;
-      this._dirty = true;
-      this.requestUpdate();
-    }
-    return result;
   }
 
   private async _saveAutomation(): Promise<void> {
     const id = this.automationId || String(Date.now());
     if (!this._config!.alias) {
-      const alias = await this._promptAutomationAlias();
+      await this._promptAutomationAlias();
-      if (!alias) {
+      if (!this._config!.alias) {
         showAlertDialog(this, {
           text: this.hass.localize(
             "ui.panel.config.automation.editor.missing_name"
@@ -592,7 +560,6 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
         });
         return;
       }
-      this._config!.alias = alias;
     }
 
     this.hass!.callApi(

src/panels/config/automation/manual-automation-editor.ts

@@ -54,18 +54,6 @@ export class HaManualAutomationEditor extends LitElement {
             )}
           </h3>
           <div class="card-content">
-            <ha-textarea
-              .label=${this.hass.localize(
-                "ui.panel.config.automation.editor.description.label"
-              )}
-              .placeholder=${this.hass.localize(
-                "ui.panel.config.automation.editor.description.placeholder"
-              )}
-              name="description"
-              autogrow
-              .value=${this.config.description || ""}
-              @change=${this._valueChanged}
-            ></ha-textarea>
             <ha-select
               .label=${this.hass.localize(
                 "ui.panel.config.automation.editor.modes.label"

src/translations/en.json

@@ -1825,7 +1825,6 @@
             "rename": "[%key:ui::panel::config::automation::editor::triggers::rename%]",
             "show_trace": "Traces",
             "show_info": "Information",
-            "introduction": "Use automations to bring your home to life.",
             "default_name": "New Automation",
             "missing_name": "Cannot save automation without a name",
             "load_error_not_editable": "Only automations in automations.yaml are editable.",