Redesign automation editor main settings (#13488)

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

@@ -77,15 +77,6 @@ export class HaBlueprintAutomationEditor extends LitElement {
         </span>
         <ha-card outlined>
           <div class="card-content">
-            <ha-textfield
-              .label=${this.hass.localize(
-                "ui.panel.config.automation.editor.alias"
-              )}
-              name="alias"
-              .value=${this.config.alias || ""}
-              @change=${this._valueChanged}
-            >
-            </ha-textfield>
             ${this._showDescription
               ? html`
                   <ha-textarea

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

@@ -1,4 +1,3 @@
-import { ActionDetail } from "@material/mwc-list/mwc-list-foundation";
 import "@material/mwc-list/mwc-list-item";
 import {
   mdiCheck,
@@ -6,6 +5,12 @@ import {
   mdiContentSave,
   mdiDelete,
   mdiDotsVertical,
+  mdiPencil,
+  mdiPlay,
+  mdiPlayCircleOutline,
+  mdiRenameBox,
+  mdiStopCircleOutline,
+  mdiTransitConnection,
 } from "@mdi/js";
 import "@polymer/app-layout/app-header/app-header";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
@@ -41,6 +46,7 @@ import {
 import {
   showAlertDialog,
   showConfirmationDialog,
+  showPromptDialog,
 } from "../../../dialogs/generic/show-dialog-box";
 import "../../../layouts/ha-app-layout";
 import "../../../layouts/hass-tabs-subpage";
@@ -112,12 +118,7 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
         .backCallback=${this._backTapped}
         .tabs=${configSections.automations}
       >
-        <ha-button-menu
+        <ha-button-menu corner="BOTTOM_START" slot="toolbar-icon">
-          corner="BOTTOM_START"
-          slot="toolbar-icon"
-          @action=${this._handleMenuAction}
-          activatable
-        >
           <ha-icon-button
             slot="trigger"
             .label=${this.hass.localize("ui.common.menu")}
@@ -125,12 +126,54 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
           ></ha-icon-button>
 
           <mwc-list-item
-            aria-label=${this.hass.localize(
-              "ui.panel.config.automation.editor.edit_ui"
-            )}
             graphic="icon"
-            ?activated=${this._mode === "gui"}
+            .disabled=${!stateObj}
+            @click=${this._runActions}
           >
+            ${this.hass.localize("ui.panel.config.automation.editor.run")}
+            <ha-svg-icon slot="graphic" .path=${mdiPlay}></ha-svg-icon>
+          </mwc-list-item>
+
+          ${stateObj
+            ? html`<a
+                href="/config/automation/trace/${this._config
+                  ? this._config.id
+                  : ""}"
+                target="_blank"
+                .disabled=${!stateObj}
+              >
+                <mwc-list-item graphic="icon" .disabled=${!stateObj}>
+                  ${this.hass.localize(
+                    "ui.panel.config.automation.editor.show_trace"
+                  )}
+                  <ha-svg-icon
+                    slot="graphic"
+                    .path=${mdiTransitConnection}
+                  ></ha-svg-icon>
+                </mwc-list-item>
+              </a>`
+            : ""}
+
+          <mwc-list-item graphic="icon" @click=${this._promptAutomationAlias}>
+            ${this.hass.localize("ui.panel.config.automation.editor.rename")}
+            <ha-svg-icon slot="graphic" .path=${mdiRenameBox}></ha-svg-icon>
+          </mwc-list-item>
+
+          <mwc-list-item
+            .disabled=${!this.automationId}
+            graphic="icon"
+            @click=${this._duplicate}
+          >
+            ${this.hass.localize("ui.panel.config.automation.picker.duplicate")}
+            <ha-svg-icon
+              slot="graphic"
+              .path=${mdiContentDuplicate}
+            ></ha-svg-icon>
+          </mwc-list-item>
+
+          <li divider role="separator"></li>
+
+          <mwc-list-item graphic="icon" @click=${this._switchUiMode}>
             ${this.hass.localize("ui.panel.config.automation.editor.edit_ui")}
             ${this._mode === "gui"
               ? html`<ha-svg-icon
@@ -140,13 +183,7 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
                 ></ha-svg-icon>`
               : ``}
           </mwc-list-item>
-          <mwc-list-item
+          <mwc-list-item graphic="icon" @click=${this._switchYamlMode}>
-            aria-label=${this.hass.localize(
-              "ui.panel.config.automation.editor.edit_yaml"
-            )}
-            graphic="icon"
-            ?activated=${this._mode === "yaml"}
-          >
             ${this.hass.localize("ui.panel.config.automation.editor.edit_yaml")}
             ${this._mode === "yaml"
               ? html`<ha-svg-icon
@@ -160,32 +197,28 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
           <li divider role="separator"></li>
 
           <mwc-list-item
-            .disabled=${!this.automationId}
-            aria-label=${this.hass.localize(
-              "ui.panel.config.automation.picker.duplicate_automation"
-            )}
             graphic="icon"
+            .disabled=${!stateObj}
+            @click=${this._toggle}
           >
-            ${this.hass.localize(
+            ${!stateObj || stateObj.state === "off"
-              "ui.panel.config.automation.picker.duplicate_automation"
+              ? this.hass.localize("ui.panel.config.automation.editor.enable")
-            )}
+              : this.hass.localize("ui.panel.config.automation.editor.disable")}
             <ha-svg-icon
               slot="graphic"
-              .path=${mdiContentDuplicate}
+              .path=${!stateObj || stateObj.state === "off"
+                ? mdiPlayCircleOutline
+                : mdiStopCircleOutline}
             ></ha-svg-icon>
           </mwc-list-item>
 
           <mwc-list-item
             .disabled=${!this.automationId}
-            aria-label=${this.hass.localize(
-              "ui.panel.config.automation.picker.delete_automation"
-            )}
             class=${classMap({ warning: Boolean(this.automationId) })}
             graphic="icon"
+            @click=${this._deleteConfirm}
           >
-            ${this.hass.localize(
+            ${this.hass.localize("ui.panel.config.automation.picker.delete")}
-              "ui.panel.config.automation.picker.delete_automation"
-            )}
             <ha-svg-icon
               class=${classMap({ warning: Boolean(this.automationId) })}
               slot="graphic"
@@ -197,9 +230,6 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
 
         ${this._config
           ? html`
-              ${this.narrow
-                ? html`<span slot="header">${this._config?.alias}</span>`
-                : ""}
               <div
                 class="content ${classMap({
                   "yaml-mode": this._mode === "yaml",
@@ -211,6 +241,30 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
                   : ""}
                 ${this._mode === "gui"
                   ? html`
+                      ${this.narrow
+                        ? html`<span slot="header"
+                            >${this._config!.alias ||
+                            this.hass.localize(
+                              "ui.panel.config.automation.editor.default_name"
+                            )}</span
+                          >`
+                        : html`
+                            <div class="header-name">
+                              <h1>
+                                ${this._config!.alias ||
+                                this.hass.localize(
+                                  "ui.panel.config.automation.editor.default_name"
+                                )}
+                              </h1>
+                              <ha-icon-button
+                                .path=${mdiPencil}
+                                @click=${this._promptAutomationAlias}
+                                .label=${this.hass.localize(
+                                  "ui.panel.config.automation.editor.rename"
+                                )}
+                              ></ha-icon-button>
+                            </div>
+                          `}
                       ${"use_blueprint" in this._config
                         ? html`
                             <blueprint-automation-editor
@@ -239,32 +293,11 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
                         ? html`
                             <ha-card outlined>
                               <div class="card-header">
-                                ${this._config.alias}
+                                ${this._config.alias ||
+                                this.hass.localize(
+                                  "ui.panel.config.automation.editor.default_name"
+                                )}
                               </div>
-                              ${stateObj
-                                ? html`
-                                    <div
-                                      class="card-actions layout horizontal justified center"
-                                    >
-                                      <ha-entity-toggle
-                                        .hass=${this.hass}
-                                        .stateObj=${stateObj}
-                                        .label=${this.hass.localize(
-                                          "ui.panel.config.automation.editor.enable_disable"
-                                        )}
-                                      ></ha-entity-toggle>
-
-                                      <mwc-button
-                                        @click=${this._runActions}
-                                        .stateObj=${stateObj}
-                                      >
-                                        ${this.hass.localize(
-                                          "ui.card.automation.trigger"
-                                        )}
-                                      </mwc-button>
-                                    </div>
-                                  `
-                                : ""}
                             </ha-card>
                           `
                         : ``}
@@ -317,12 +350,7 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
 
     if (changedProps.has("automationId") && !this.automationId && this.hass) {
       const initData = getAutomationEditorInitData();
-      let baseConfig: Partial<AutomationConfig> = {
+      let baseConfig: Partial<AutomationConfig> = { description: "" };
-        alias: this.hass.localize(
-          "ui.panel.config.automation.editor.default_name"
-        ),
-        description: "",
-      };
       if (!initData || !("use_blueprint" in initData)) {
         baseConfig = {
           ...baseConfig,
@@ -337,6 +365,7 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
         ...initData,
       } as AutomationConfig;
       this._entityId = undefined;
+      this._dirty = true;
     }
 
     if (
@@ -401,8 +430,25 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
     this._errors = undefined;
   }
 
-  private _runActions(ev: Event) {
+  private _runActions() {
-    triggerAutomationActions(this.hass, (ev.target as any).stateObj.entity_id);
+    if (!this.hass || !this._entityId) {
+      return;
+    }
+    triggerAutomationActions(
+      this.hass,
+      this.hass.states[this._entityId].entity_id
+    );
+  }
+
+  private async _toggle(): Promise<void> {
+    if (!this.hass || !this._entityId) {
+      return;
+    }
+    const stateObj = this.hass.states[this._entityId];
+    const service = stateObj.state === "off" ? "turn_on" : "turn_off";
+    await this.hass.callService("automation", service, {
+      entity_id: stateObj.entity_id,
+    });
   }
 
   private _preprocessYaml() {
@@ -471,9 +517,7 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
     showAutomationEditor({
       ...this._config,
       id: undefined,
-      alias: `${this._config?.alias} (${this.hass.localize(
+      alias: undefined,
-        "ui.panel.config.automation.picker.duplicate"
-      )})`,
     });
   }
 
@@ -493,25 +537,50 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
     history.back();
   }
 
-  private async _handleMenuAction(ev: CustomEvent<ActionDetail>) {
+  private _switchUiMode() {
-    switch (ev.detail.index) {
+    this._mode = "gui";
-      case 0:
-        this._mode = "gui";
-        break;
-      case 1:
-        this._mode = "yaml";
-        break;
-      case 2:
-        this._duplicate();
-        break;
-      case 3:
-        this._deleteConfirm();
-        break;
-    }
   }
 
-  private _saveAutomation(): void {
+  private _switchYamlMode() {
+    this._mode = "yaml";
+  }
+
+  private async _promptAutomationAlias(): Promise<string | null> {
+    const result = await showPromptDialog(this, {
+      title: this.hass.localize(
+        "ui.panel.config.automation.editor.automation_alias"
+      ),
+      inputLabel: this.hass.localize("ui.panel.config.automation.editor.alias"),
+      inputType: "string",
+      placeholder: this.hass.localize(
+        "ui.panel.config.automation.editor.default_name"
+      ),
+      defaultValue: this._config!.alias,
+      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();
+      if (!alias) {
+        showAlertDialog(this, {
+          text: this.hass.localize(
+            "ui.panel.config.automation.editor.missing_name"
+          ),
+        });
+        return;
+      }
+      this._config!.alias = alias;
+    }
+
     this.hass!.callApi(
       "POST",
       "config/automation/config/" + id,
@@ -603,6 +672,29 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
         li[role="separator"] {
           border-bottom-color: var(--divider-color);
         }
+        ha-button-menu a {
+          text-decoration: none;
+          color: var(--primary-color);
+        }
+        h1 {
+          margin: 0;
+          font-family: var(--paper-font-headline_-_font-family);
+          -webkit-font-smoothing: var(
+            --paper-font-headline_-_-webkit-font-smoothing
+          );
+          font-size: var(--paper-font-headline_-_font-size);
+          font-weight: var(--paper-font-headline_-_font-weight);
+          letter-spacing: var(--paper-font-headline_-_letter-spacing);
+          line-height: var(--paper-font-headline_-_line-height);
+          opacity: var(--dark-primary-opacity);
+        }
+        .header-name {
+          display: flex;
+          align-items: center;
+          margin: 0 auto;
+          max-width: 1040px;
+          padding: 28px 20px 0;
+        }
       `,
     ];
   }

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

@@ -1,5 +1,5 @@
 import "@material/mwc-button/mwc-button";
-import { mdiHelpCircle } from "@mdi/js";
+import { mdiHelpCircle, mdiRobot } from "@mdi/js";
 import { HassEntity } from "home-assistant-js-websocket";
 import { css, CSSResultGroup, html, LitElement, PropertyValues } from "lit";
 import { customElement, property, state } from "lit/decorators";
@@ -14,7 +14,6 @@ import {
   Condition,
   ManualAutomationConfig,
   Trigger,
-  triggerAutomationActions,
 } from "../../../data/automation";
 import { Action, isMaxMode, MODES } from "../../../data/script";
 import { haStyle } from "../../../resources/styles";
@@ -41,115 +40,99 @@ export class HaManualAutomationEditor extends LitElement {
   protected render() {
     return html`
       <ha-card outlined>
-        <div class="card-content">
+        ${
-          <ha-textfield
+          this.stateObj && this.stateObj.state === "off"
-            .label=${this.hass.localize(
+            ? html`<div class="disabled-bar">
-              "ui.panel.config.automation.editor.alias"
+                ${this.hass.localize(
+                  "ui.panel.config.automation.editor.disabled"
+                )}
+              </div>`
+            : ""
+        }
+
+        <ha-expansion-panel leftChevron>
+          <div slot="header">
+            <ha-svg-icon class="settings-icon" .path=${mdiRobot}></ha-svg-icon>
+            ${this.hass.localize(
+              "ui.panel.config.automation.editor.automation_settings"
             )}
-            name="alias"
+          </div>
-            .value=${this.config.alias || ""}
+          <div class="card-content">
-            @change=${this._valueChanged}
+            </ha-textfield>
-          >
+            ${
-          </ha-textfield>
+              this._showDescription
-          ${this._showDescription
+                ? html`
-            ? html`
+                    <ha-textarea
-                <ha-textarea
+                      .label=${this.hass.localize(
-                  .label=${this.hass.localize(
+                        "ui.panel.config.automation.editor.description.label"
-                    "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>
-              `
-            : html`
-                <div class="link-button-row">
-                  <button class="link" @click=${this._addDescription}>
-                    ${this.hass.localize(
-                      "ui.panel.config.automation.editor.description.add"
-                    )}
-                  </button>
-                </div>
-              `}
-          <ha-select
-            .label=${this.hass.localize(
-              "ui.panel.config.automation.editor.modes.label"
-            )}
-            .value=${this.config.mode || AUTOMATION_DEFAULT_MODE}
-            @selected=${this._modeChanged}
-            fixedMenuPosition
-            .helper=${html`
-              <a
-                style="color: var(--secondary-text-color)"
-                href=${documentationUrl(this.hass, "/docs/automation/modes/")}
-                target="_blank"
-                rel="noreferrer"
-                >${this.hass.localize(
-                  "ui.panel.config.automation.editor.modes.learn_more"
-                )}</a
-              >
-            `}
-          >
-            ${MODES.map(
-              (mode) => html`
-                <mwc-list-item .value=${mode}>
-                  ${this.hass.localize(
-                    `ui.panel.config.automation.editor.modes.${mode}`
-                  ) || mode}
-                </mwc-list-item>
-              `
-            )}
-          </ha-select>
-          ${this.config.mode && isMaxMode(this.config.mode)
-            ? html`
-                <br /><ha-textfield
-                  .label=${this.hass.localize(
-                    `ui.panel.config.automation.editor.max.${this.config.mode}`
-                  )}
-                  type="number"
-                  name="max"
-                  .value=${this.config.max || "10"}
-                  @change=${this._valueChanged}
-                  class="max"
-                >
-                </ha-textfield>
-              `
-            : html``}
-        </div>
-        ${this.stateObj
-          ? html`
-              <div class="card-actions layout horizontal justified center">
-                <div class="layout horizontal center">
-                  <ha-entity-toggle
-                    .hass=${this.hass}
-                    .stateObj=${this.stateObj!}
-                  ></ha-entity-toggle>
-                  ${this.hass.localize(
-                    "ui.panel.config.automation.editor.enable_disable"
-                  )}
-                </div>
-                <div>
-                  <a href="/config/automation/trace/${this.config.id}">
-                    <mwc-button>
-                      ${this.hass.localize(
-                        "ui.panel.config.automation.editor.show_trace"
                       )}
-                    </mwc-button>
+                      .placeholder=${this.hass.localize(
-                  </a>
+                        "ui.panel.config.automation.editor.description.placeholder"
-                  <mwc-button
+                      )}
-                    @click=${this._runActions}
+                      name="description"
-                    .stateObj=${this.stateObj}
+                      autogrow
-                  >
+                      .value=${this.config.description || ""}
-                    ${this.hass.localize("ui.card.automation.trigger")}
+                      @change=${this._valueChanged}
-                  </mwc-button>
+                    ></ha-textarea>
-                </div>
+                  `
-              </div>
+                : html`
-            `
+                    <div class="link-button-row">
-          : ""}
+                      <button class="link" @click=${this._addDescription}>
+                        ${this.hass.localize(
+                          "ui.panel.config.automation.editor.description.add"
+                        )}
+                      </button>
+                    </div>
+                  `
+            }
+            <ha-select
+              .label=${this.hass.localize(
+                "ui.panel.config.automation.editor.modes.label"
+              )}
+              .value=${this.config.mode || AUTOMATION_DEFAULT_MODE}
+              @selected=${this._modeChanged}
+              fixedMenuPosition
+              .helper=${html`
+                <a
+                  style="color: var(--secondary-text-color)"
+                  href=${documentationUrl(this.hass, "/docs/automation/modes/")}
+                  target="_blank"
+                  rel="noreferrer"
+                  >${this.hass.localize(
+                    "ui.panel.config.automation.editor.modes.learn_more"
+                  )}</a
+                >
+              `}
+            >
+              ${MODES.map(
+                (mode) => html`
+                  <mwc-list-item .value=${mode}>
+                    ${this.hass.localize(
+                      `ui.panel.config.automation.editor.modes.${mode}`
+                    ) || mode}
+                  </mwc-list-item>
+                `
+              )}
+            </ha-select>
+            ${
+              this.config.mode && isMaxMode(this.config.mode)
+                ? html`
+                    <br /><ha-textfield
+                      .label=${this.hass.localize(
+                        `ui.panel.config.automation.editor.max.${this.config.mode}`
+                      )}
+                      type="number"
+                      name="max"
+                      .value=${this.config.max || "10"}
+                      @change=${this._valueChanged}
+                      class="max"
+                    >
+                    </ha-textfield>
+                  `
+                : html``
+            }
+          </div>
+        </ha-expansion-panel>
       </ha-card>
 
       <div class="header">
@@ -244,10 +227,6 @@ export class HaManualAutomationEditor extends LitElement {
     }
   }
 
-  private _runActions(ev: Event) {
-    triggerAutomationActions(this.hass, (ev.target as any).stateObj.entity_id);
-  }
-
   private _valueChanged(ev: CustomEvent) {
     ev.stopPropagation();
     const target = ev.target as any;
@@ -360,6 +339,23 @@ export class HaManualAutomationEditor extends LitElement {
         .header a {
           color: var(--secondary-text-color);
         }
+        ha-expansion-panel {
+          --expansion-panel-summary-padding: 0 0 0 8px;
+          --expansion-panel-content-padding: 0;
+        }
+        .card-content {
+          padding: 16px;
+        }
+        .settings-icon {
+          color: var(--sidebar-icon-color);
+          padding-right: 8px;
+        }
+        .disabled-bar {
+          background: var(--divider-color, #e0e0e0);
+          text-align: center;
+          border-top-right-radius: var(--ha-card-border-radius);
+          border-top-left-radius: var(--ha-card-border-radius);
+        }
       `,
     ];
   }

src/translations/en.json

@@ -1788,9 +1788,8 @@
             "edit_automation": "Edit automation",
             "dev_automation": "Debug automation",
             "show_info_automation": "Show info about automation",
-            "delete_automation": "Delete automation",
+            "delete": "Delete",
             "delete_confirm": "Are you sure you want to delete this automation?",
-            "duplicate_automation": "Duplicate automation",
             "duplicate": "Duplicate",
             "headers": {
               "toggle": "Enable/disable",
@@ -1815,15 +1814,22 @@
             "start_empty_description": "Create a new automation from scratch"
           },
           "editor": {
-            "enable_disable": "Enable/Disable automation",
+            "enable": "[%key:ui::common::enable%]",
-            "show_trace": "Show trace",
+            "disable": "[%key:ui::common::disable%]",
+            "disabled": "Automation is disabled",
+            "run": "[%key:ui::panel::config::automation::editor::actions::run%]",
+            "rename": "[%key:ui::panel::config::automation::editor::triggers::rename%]",
+            "show_trace": "Traces",
             "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.",
             "load_error_unknown": "Error loading automation ({err_no}).",
             "save": "Save",
             "unsaved_confirm": "You have unsaved changes. Are you sure you want to leave?",
             "alias": "Name",
+            "automation_alias": "Automation name",
+            "automation_settings": "Automation settings",
             "move_up": "Move up",
             "move_down": "Move down",
             "description": {