Automation change mode dialog (#13591)

src/data/automation.ts

@@ -9,6 +9,7 @@ import { DeviceCondition, DeviceTrigger } from "./device_automation";
 import { Action, MODES } from "./script";
 
 export const AUTOMATION_DEFAULT_MODE: typeof MODES[number] = "single";
+export const AUTOMATION_DEFAULT_MAX = 10;
 
 export interface AutomationEntity extends HassEntityBase {
   attributes: HassEntityAttributeBase & {

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

@@ -0,0 +1,166 @@
+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 "../../../../components/ha-textfield";
+import "../../../../components/ha-select";
+import { HassDialog } from "../../../../dialogs/make-dialog-manager";
+import { haStyle, haStyleDialog } from "../../../../resources/styles";
+import type { HomeAssistant } from "../../../../types";
+import type { AutomationModeDialog } from "./show-dialog-automation-mode";
+import {
+  AUTOMATION_DEFAULT_MAX,
+  AUTOMATION_DEFAULT_MODE,
+} from "../../../../data/automation";
+import { documentationUrl } from "../../../../util/documentation-url";
+import { isMaxMode, MODES } from "../../../../data/script";
+import "@material/mwc-list/mwc-list-item";
+import { stopPropagation } from "../../../../common/dom/stop_propagation";
+
+@customElement("ha-dialog-automation-mode")
+class DialogAutomationMode extends LitElement implements HassDialog {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @state() private _opened = false;
+
+  private _params!: AutomationModeDialog;
+
+  @state() private _newMode: typeof MODES[number] = AUTOMATION_DEFAULT_MODE;
+
+  @state() private _newMax?: number;
+
+  public showDialog(params: AutomationModeDialog): void {
+    this._opened = true;
+    this._params = params;
+    this._newMode = params.config.mode || AUTOMATION_DEFAULT_MODE;
+    this._newMax = isMaxMode(this._newMode)
+      ? params.config.max || AUTOMATION_DEFAULT_MAX
+      : undefined;
+  }
+
+  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.change_mode")
+        )}
+      >
+        <ha-select
+          .label=${this.hass.localize(
+            "ui.panel.config.automation.editor.modes.label"
+          )}
+          .value=${this._newMode}
+          @selected=${this._modeChanged}
+          @closed=${stopPropagation}
+          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>
+        ${isMaxMode(this._newMode)
+          ? html`
+              <br /><ha-textfield
+                .label=${this.hass.localize(
+                  `ui.panel.config.automation.editor.max.${this._newMode}`
+                )}
+                type="number"
+                name="max"
+                .value=${this._newMax?.toString() ?? ""}
+                @change=${this._valueChanged}
+                class="max"
+              >
+              </ha-textfield>
+            `
+          : html``}
+
+        <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.change_mode")}
+        </mwc-button>
+      </ha-dialog>
+    `;
+  }
+
+  private _modeChanged(ev) {
+    const mode = ev.target.value;
+    this._newMode = mode;
+    if (!isMaxMode(mode)) {
+      this._newMax = undefined;
+    } else if (!this._newMax) {
+      this._newMax = AUTOMATION_DEFAULT_MAX;
+    }
+  }
+
+  private _valueChanged(ev: CustomEvent) {
+    ev.stopPropagation();
+    const target = ev.target as any;
+    if (target.name === "max") {
+      this._newMax = Number(target.value);
+    }
+  }
+
+  private _save(): void {
+    this._params.updateAutomation({
+      ...this._params.config,
+      mode: this._newMode,
+      max: this._newMax,
+    });
+    this.closeDialog();
+  }
+
+  static get styles(): CSSResultGroup {
+    return [
+      haStyle,
+      haStyleDialog,
+      css`
+        ha-select,
+        ha-textfield {
+          display: block;
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-dialog-automation-mode": DialogAutomationMode;
+  }
+}

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

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

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

@@ -7,6 +7,8 @@ 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";
+import "../../../../components/ha-textarea";
+import "../../../../components/ha-textfield";
 
 @customElement("ha-dialog-automation-rename")
 class DialogAutomationRename extends LitElement implements HassDialog {
@@ -51,7 +53,7 @@ class DialogAutomationRename extends LitElement implements HassDialog {
       >
         <ha-textfield
           dialogInitialFocus
-          value=${this._newName}
+          .value=${this._newName}
           .placeholder=${this.hass.localize(
             "ui.panel.config.automation.editor.default_name"
           )}

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

@@ -10,6 +10,7 @@ import "../../../components/ha-markdown";
 import "../../../components/ha-selector/ha-selector";
 import "../../../components/ha-settings-row";
 import "../../../components/ha-textfield";
+import "../../../components/ha-alert";
 import { BlueprintAutomationConfig } from "../../../data/automation";
 import {
   BlueprintOrError,
@@ -49,6 +50,20 @@ export class HaBlueprintAutomationEditor extends LitElement {
   protected render() {
     const blueprint = this._blueprint;
     return html`
+      ${this.stateObj?.state === "off"
+        ? html`
+            <ha-alert alert-type="info">
+              ${this.hass.localize(
+                "ui.panel.config.automation.editor.disabled"
+              )}
+              <mwc-button slot="action" @click=${this._enable}>
+                ${this.hass.localize(
+                  "ui.panel.config.automation.editor.enable"
+                )}
+              </mwc-button>
+            </ha-alert>
+          `
+        : ""}
       <ha-card
         outlined
         class="blueprint"
@@ -178,6 +193,15 @@ export class HaBlueprintAutomationEditor extends LitElement {
     });
   }
 
+  private async _enable(): Promise<void> {
+    if (!this.hass || !this.stateObj) {
+      return;
+    }
+    await this.hass.callService("automation", "turn_on", {
+      entity_id: this.stateObj.entity_id,
+    });
+  }
+
   static get styles(): CSSResultGroup {
     return [
       haStyle,
@@ -220,6 +244,10 @@ export class HaBlueprintAutomationEditor extends LitElement {
           --settings-row-prefix-display: contents;
           border-top: 1px solid var(--divider-color);
         }
+        ha-alert {
+          margin-bottom: 16px;
+          display: block;
+        }
       `,
     ];
   }

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

@@ -3,6 +3,7 @@ import {
   mdiCheck,
   mdiContentDuplicate,
   mdiContentSave,
+  mdiDebugStepOver,
   mdiDelete,
   mdiDotsVertical,
   mdiInformationOutline,
@@ -55,6 +56,7 @@ import { haStyle } from "../../../resources/styles";
 import { HomeAssistant, Route } from "../../../types";
 import { showToast } from "../../../util/toast";
 import "../ha-config-section";
+import { showAutomationModeDialog } from "./automation-mode-dialog/show-dialog-automation-mode";
 import { showAutomationRenameDialog } from "./automation-rename-dialog/show-dialog-automation-rename";
 import "./blueprint-automation-editor";
 import "./manual-automation-editor";
@@ -161,11 +163,33 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
               </a>`
             : ""}
 
-          <mwc-list-item graphic="icon" @click=${this._promptAutomationAlias}>
+          <mwc-list-item
+            graphic="icon"
+            @click=${this._promptAutomationAlias}
+            .disabled=${!this.automationId || this._mode === "yaml"}
+          >
             ${this.hass.localize("ui.panel.config.automation.editor.rename")}
             <ha-svg-icon slot="graphic" .path=${mdiRenameBox}></ha-svg-icon>
           </mwc-list-item>
 
+          ${this._config && !("use_blueprint" in this._config)
+            ? html`
+                <mwc-list-item
+                  graphic="icon"
+                  @click=${this._promptAutomationMode}
+                  .disabled=${!this.automationId || this._mode === "yaml"}
+                >
+                  ${this.hass.localize(
+                    "ui.panel.config.automation.editor.change_mode"
+                  )}
+                  <ha-svg-icon
+                    slot="graphic"
+                    .path=${mdiDebugStepOver}
+                  ></ha-svg-icon>
+                </mwc-list-item>
+              `
+            : ""}
+
           <mwc-list-item
             .disabled=${!this.automationId}
             graphic="icon"
@@ -208,12 +232,12 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
             .disabled=${!stateObj}
             @click=${this._toggle}
           >
-            ${!stateObj || stateObj.state === "off"
+            ${stateObj?.state === "off"
               ? this.hass.localize("ui.panel.config.automation.editor.enable")
               : this.hass.localize("ui.panel.config.automation.editor.disable")}
             <ha-svg-icon
               slot="graphic"
-              .path=${!stateObj || stateObj.state === "off"
+              .path=${stateObj?.state === "off"
                 ? mdiPlayCircleOutline
                 : mdiStopCircleOutline}
             ></ha-svg-icon>
@@ -270,18 +294,20 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
                       `
                   : this._mode === "yaml"
                   ? html`
-                      ${!this.narrow
+                      ${stateObj?.state === "off"
                         ? html`
-                            <ha-card outlined>
-                              <div class="card-header">
-                                ${this._config.alias ||
-                                this.hass.localize(
-                                  "ui.panel.config.automation.editor.default_name"
+                            <ha-alert alert-type="info">
+                              ${this.hass.localize(
+                                "ui.panel.config.automation.editor.disabled"
                               )}
-                              </div>
-                            </ha-card>
+                              <mwc-button slot="action" @click=${this._toggle}>
+                                ${this.hass.localize(
+                                  "ui.panel.config.automation.editor.enable"
+                                )}
+                              </mwc-button>
+                            </ha-alert>
                           `
-                        : ``}
+                        : ""}
                       <ha-yaml-editor
                         .hass=${this.hass}
                         .defaultValue=${this._preprocessYaml()}
@@ -548,6 +574,21 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
     });
   }
 
+  private async _promptAutomationMode(): Promise<void> {
+    return new Promise((resolve) => {
+      showAutomationModeDialog(this, {
+        config: this._config!,
+        updateAutomation: (config) => {
+          this._config = config;
+          this._dirty = true;
+          this.requestUpdate();
+          resolve();
+        },
+        onClose: () => resolve(),
+      });
+    });
+  }
+
   private async _saveAutomation(): Promise<void> {
     const id = this.automationId || String(Date.now());
     if (!this._config!.alias) {

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

@@ -1,21 +1,19 @@
 import "@material/mwc-button/mwc-button";
-import { mdiHelpCircle, mdiRobot, mdiSort, mdiTextBoxEdit } from "@mdi/js";
+import { mdiHelpCircle, mdiSort, mdiTextBoxEdit } from "@mdi/js";
 import { HassEntity } from "home-assistant-js-websocket";
 import { css, CSSResultGroup, html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../common/dom/fire_event";
 import "../../../components/entity/ha-entity-toggle";
 import "../../../components/ha-card";
-import "../../../components/ha-textarea";
-import "../../../components/ha-textfield";
 import "../../../components/ha-icon-button";
+import "../../../components/ha-alert";
 import {
-  AUTOMATION_DEFAULT_MODE,
   Condition,
   ManualAutomationConfig,
   Trigger,
 } from "../../../data/automation";
-import { Action, isMaxMode, MODES } from "../../../data/script";
+import { Action } from "../../../data/script";
 import { haStyle } from "../../../resources/styles";
 import type { HomeAssistant } from "../../../types";
 import { documentationUrl } from "../../../util/documentation-url";
@@ -43,71 +41,20 @@ export class HaManualAutomationEditor extends LitElement {
 
   protected render() {
     return html`
-      <ha-card outlined>
-        ${this.stateObj && this.stateObj.state === "off"
-          ? html`<div class="disabled-bar">
+      ${this.stateObj?.state === "off"
+        ? html`
+            <ha-alert alert-type="info">
               ${this.hass.localize(
                 "ui.panel.config.automation.editor.disabled"
               )}
-            </div>`
+              <mwc-button slot="action" @click=${this._enable}>
+                ${this.hass.localize(
+                  "ui.panel.config.automation.editor.enable"
+                )}
+              </mwc-button>
+            </ha-alert>
+          `
         : ""}
-
-        <ha-expansion-panel leftChevron>
-          <h3 slot="header">
-            <ha-svg-icon class="settings-icon" .path=${mdiRobot}></ha-svg-icon>
-            ${this.hass.localize(
-              "ui.panel.config.automation.editor.automation_settings"
-            )}
-          </h3>
-          <div class="card-content">
-            <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">
         <h2 id="triggers-heading" class="name">
           ${this.hass.localize(
@@ -221,48 +168,6 @@ export class HaManualAutomationEditor extends LitElement {
     `;
   }
 
-  private _valueChanged(ev: CustomEvent) {
-    ev.stopPropagation();
-    const target = ev.target as any;
-    const name = target.name;
-    if (!name) {
-      return;
-    }
-    let newVal = target.value;
-    if (target.type === "number") {
-      newVal = Number(newVal);
-    }
-    if ((this.config![name] || "") === newVal) {
-      return;
-    }
-    fireEvent(this, "value-changed", {
-      value: { ...this.config!, [name]: newVal },
-    });
-  }
-
-  private _modeChanged(ev) {
-    const mode = ev.target.value;
-
-    if (
-      mode === this.config!.mode ||
-      (!this.config!.mode && mode === MODES[0])
-    ) {
-      return;
-    }
-    const value = {
-      ...this.config!,
-      mode,
-    };
-
-    if (!isMaxMode(mode)) {
-      delete value.max;
-    }
-
-    fireEvent(this, "value-changed", {
-      value,
-    });
-  }
-
   private _triggerChanged(ev: CustomEvent): void {
     ev.stopPropagation();
     fireEvent(this, "value-changed", {
@@ -287,6 +192,15 @@ export class HaManualAutomationEditor extends LitElement {
     });
   }
 
+  private async _enable(): Promise<void> {
+    if (!this.hass || !this.stateObj) {
+      return;
+    }
+    await this.hass.callService("automation", "turn_on", {
+      entity_id: this.stateObj.entity_id,
+    });
+  }
+
   static get styles(): CSSResultGroup {
     return [
       haStyle,
@@ -300,10 +214,6 @@ export class HaManualAutomationEditor extends LitElement {
         .link-button-row {
           padding: 14px;
         }
-        ha-textarea,
-        ha-textfield {
-          display: block;
-        }
 
         p {
           margin-bottom: 0;
@@ -320,6 +230,9 @@ export class HaManualAutomationEditor extends LitElement {
           display: flex;
           align-items: center;
         }
+        .header:first-child {
+          margin-top: -16px;
+        }
         .header .name {
           font-size: 20px;
           font-weight: 400;
@@ -340,9 +253,6 @@ export class HaManualAutomationEditor extends LitElement {
         .card-content {
           padding: 16px;
         }
-        .card-content ha-textarea:first-child {
-          margin-top: -16px;
-        }
         .settings-icon {
           display: none;
         }

src/translations/en.json

@@ -1847,6 +1847,7 @@
               "no_blueprints": "You don't have any blueprints",
               "no_inputs": "This blueprint doesn't have any inputs."
             },
+            "change_mode": "Change mode",
             "modes": {
               "label": "Mode",
               "learn_more": "Learn about modes",