Add if/else automation/script action (#12301)

Co-authored-by: Zack Barett <zackbarett@hey.com>

src/data/script.ts

@@ -194,6 +194,13 @@ export interface ChooseAction {
   default?: Action | Action[];
 }
 
+export interface IfAction {
+  alias?: string;
+  if: string | Condition[];
+  then: Action | Action[];
+  else?: Action | Action[];
+}
+
 export interface VariablesAction {
   alias?: string;
   variables: Record<string, unknown>;
@@ -215,6 +222,7 @@ export type Action =
   | WaitForTriggerAction
   | RepeatAction
   | ChooseAction
+  | IfAction
   | VariablesAction
   | PlayMediaAction
   | UnknownAction;
@@ -228,6 +236,7 @@ export interface ActionTypes {
   activate_scene: SceneAction;
   repeat: RepeatAction;
   choose: ChooseAction;
+  if: IfAction;
   wait_for_trigger: WaitForTriggerAction;
   variables: VariablesAction;
   service: ServiceAction;
@@ -299,6 +308,9 @@ export const getActionType = (action: Action): ActionType => {
   if ("choose" in action) {
     return "choose";
   }
+  if ("if" in action) {
+    return "if";
+  }
   if ("wait_for_trigger" in action) {
     return "wait_for_trigger";
   }

src/panels/config/automation/action/ha-automation-action-row.ts

@@ -32,6 +32,7 @@ import "./types/ha-automation-action-condition";
 import "./types/ha-automation-action-delay";
 import "./types/ha-automation-action-device_id";
 import "./types/ha-automation-action-event";
+import "./types/ha-automation-action-if";
 import "./types/ha-automation-action-play_media";
 import "./types/ha-automation-action-repeat";
 import "./types/ha-automation-action-service";
@@ -49,6 +50,7 @@ const OPTIONS = [
   "wait_for_trigger",
   "repeat",
   "choose",
+  "if",
   "device_id",
 ];
 

src/panels/config/automation/action/types/ha-automation-action-if.ts

@@ -0,0 +1,109 @@
+import { CSSResultGroup, html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
+import { fireEvent } from "../../../../../common/dom/fire_event";
+import { Action, IfAction } from "../../../../../data/script";
+import { HaDeviceCondition } from "../../condition/types/ha-automation-condition-device";
+import { HaDeviceAction } from "./ha-automation-action-device_id";
+import { haStyle } from "../../../../../resources/styles";
+import type { HomeAssistant } from "../../../../../types";
+import type { Condition } from "../../../../lovelace/common/validate-condition";
+import "../ha-automation-action";
+import "../../../../../components/ha-textfield";
+import type { ActionElement } from "../ha-automation-action-row";
+
+@customElement("ha-automation-action-if")
+export class HaIfAction extends LitElement implements ActionElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public action!: IfAction;
+
+  public static get defaultConfig() {
+    return {
+      if: [{ ...HaDeviceCondition.defaultConfig, condition: "device" }],
+      then: [HaDeviceAction.defaultConfig],
+    };
+  }
+
+  protected render() {
+    const action = this.action;
+
+    return html`
+      <h3>
+        ${this.hass.localize(
+          "ui.panel.config.automation.editor.actions.type.if.if"
+        )}*:
+      </h3>
+      <ha-automation-condition
+        .conditions=${action.if}
+        .hass=${this.hass}
+        @value-changed=${this._ifChanged}
+      ></ha-automation-condition>
+
+      <h3>
+        ${this.hass.localize(
+          "ui.panel.config.automation.editor.actions.type.if.then"
+        )}*:
+      </h3>
+      <ha-automation-action
+        .actions=${action.then}
+        @value-changed=${this._thenChanged}
+        .hass=${this.hass}
+      ></ha-automation-action>
+
+      <h3>
+        ${this.hass.localize(
+          "ui.panel.config.automation.editor.actions.type.if.else"
+        )}:
+      </h3>
+      <ha-automation-action
+        .actions=${action.else || []}
+        @value-changed=${this._elseChanged}
+        .hass=${this.hass}
+      ></ha-automation-action>
+    `;
+  }
+
+  private _ifChanged(ev: CustomEvent) {
+    ev.stopPropagation();
+    const value = ev.detail.value as Condition[];
+    fireEvent(this, "value-changed", {
+      value: {
+        ...this.action,
+        if: value,
+      },
+    });
+  }
+
+  private _thenChanged(ev: CustomEvent) {
+    ev.stopPropagation();
+    const value = ev.detail.value as Action[];
+    fireEvent(this, "value-changed", {
+      value: {
+        ...this.action,
+        then: value,
+      },
+    });
+  }
+
+  private _elseChanged(ev: CustomEvent) {
+    ev.stopPropagation();
+    const value = ev.detail.value as Action[];
+
+    fireEvent(this, "value-changed", {
+      value: {
+        ...this.action,
+        else: value,
+      },
+    });
+  }
+
+  static get styles(): CSSResultGroup {
+    return haStyle;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-automation-action-if": HaIfAction;
+  }
+}

src/translations/en.json

@@ -2014,6 +2014,12 @@
                   "remove_option": "Remove option",
                   "conditions": "Conditions",
                   "sequence": "Actions"
+                },
+                "if": {
+                  "label": "If-then",
+                  "if": "If",
+                  "then": "Then",
+                  "else": "Else"
                 }
               }
             }