Hide else/default in if/choose actions (#13480)

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

@@ -1,6 +1,6 @@
 import { mdiDelete, mdiPlus } from "@mdi/js";
 import { css, CSSResultGroup, html, LitElement } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../../common/dom/fire_event";
 import { ensureArray } from "../../../../../common/ensure-array";
 import "../../../../../components/ha-icon-button";
@@ -17,8 +17,10 @@ export class HaChooseAction extends LitElement implements ActionElement {
 
   @property() public action!: ChooseAction;
 
+  @state() private _showDefault = false;
+
   public static get defaultConfig() {
-    return { choose: [{ conditions: [], sequence: [] }], default: [] };
+    return { choose: [{ conditions: [], sequence: [] }] };
   }
 
   protected render() {
@@ -78,19 +80,33 @@ export class HaChooseAction extends LitElement implements ActionElement {
       >
         <ha-svg-icon .path=${mdiPlus} slot="icon"></ha-svg-icon>
       </mwc-button>
-      <h2>
-        ${this.hass.localize(
-          "ui.panel.config.automation.editor.actions.type.choose.default"
-        )}:
-      </h2>
-      <ha-automation-action
-        .actions=${action.default || []}
-        @value-changed=${this._defaultChanged}
-        .hass=${this.hass}
-      ></ha-automation-action>
+      ${this._showDefault || action.default
+        ? html`
+            <h2>
+              ${this.hass.localize(
+                "ui.panel.config.automation.editor.actions.type.choose.default"
+              )}:
+            </h2>
+            <ha-automation-action
+              .actions=${action.default || []}
+              @value-changed=${this._defaultChanged}
+              .hass=${this.hass}
+            ></ha-automation-action>
+          `
+        : html` <div class="link-button-row">
+            <button class="link" @click=${this._addDefault}>
+              ${this.hass.localize(
+                "ui.panel.config.automation.editor.actions.type.choose.add_default"
+              )}
+            </button>
+          </div>`}
     `;
   }
 
+  private _addDefault() {
+    this._showDefault = true;
+  }
+
   private _conditionChanged(ev: CustomEvent) {
     ev.stopPropagation();
     const value = ev.detail.value as Condition[];
@@ -171,6 +187,9 @@ export class HaChooseAction extends LitElement implements ActionElement {
         ha-svg-icon {
           height: 20px;
         }
+        .link-button-row {
+          padding: 14px;
+        }
       `,
     ];
   }

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

@@ -1,5 +1,5 @@
-import { CSSResultGroup, html, LitElement } from "lit";
-import { customElement, property } from "lit/decorators";
+import { css, CSSResultGroup, html, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../../common/dom/fire_event";
 import { Action, IfAction } from "../../../../../data/script";
 import { haStyle } from "../../../../../resources/styles";
@@ -15,6 +15,8 @@ export class HaIfAction extends LitElement implements ActionElement {
 
   @property({ attribute: false }) public action!: IfAction;
 
+  @state() private _showElse = false;
+
   public static get defaultConfig() {
     return {
       if: [],
@@ -47,20 +49,33 @@ export class HaIfAction extends LitElement implements ActionElement {
         @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>
+      ${this._showElse || action.else
+        ? html`
+            <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>
+          `
+        : html` <div class="link-button-row">
+            <button class="link" @click=${this._addElse}>
+              ${this.hass.localize(
+                "ui.panel.config.automation.editor.actions.type.if.add_else"
+              )}
+            </button>
+          </div>`}
     `;
   }
 
+  private _addElse() {
+    this._showElse = true;
+  }
+
   private _ifChanged(ev: CustomEvent) {
     ev.stopPropagation();
     const value = ev.detail.value as Condition[];
@@ -96,7 +111,14 @@ export class HaIfAction extends LitElement implements ActionElement {
   }
 
   static get styles(): CSSResultGroup {
-    return haStyle;
+    return [
+      haStyle,
+      css`
+        .link-button-row {
+          padding: 14px;
+        }
+      `,
+    ];
   }
 }
 

src/translations/en.json

@@ -2149,6 +2149,7 @@
                 "choose": {
                   "label": "Choose",
                   "default": "Default actions",
+                  "add_default": "Add default actions",
                   "option": "Option {number}",
                   "add_option": "Add option",
                   "remove_option": "Remove option",
@@ -2159,7 +2160,8 @@
                   "label": "If-then",
                   "if": "If",
                   "then": "Then",
-                  "else": "Else"
+                  "else": "Else",
+                  "add_else": "Add else"
                 },
                 "stop": {
                   "label": "Stop",