Make action-choose options collapsible (#17239)

* Make action-choose options collapsible

* padding changes

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

@@ -1,5 +1,6 @@
+import { consume } from "@lit-labs/context";
 import { mdiDelete, mdiPlus } from "@mdi/js";
-import { CSSResultGroup, LitElement, css, html } from "lit";
+import { CSSResultGroup, LitElement, PropertyValues, css, html } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { ensureArray } from "../../../../../common/array/ensure-array";
 import { fireEvent } from "../../../../../common/dom/fire_event";
@@ -10,6 +11,9 @@ import { Action, ChooseAction } from "../../../../../data/script";
 import { haStyle } from "../../../../../resources/styles";
 import { HomeAssistant } from "../../../../../types";
 import { ActionElement } from "../ha-automation-action-row";
+import { describeCondition } from "../../../../../data/automation_i18n";
+import { fullEntitiesContext } from "../../../../../data/context";
+import { EntityRegistryEntry } from "../../../../../data/entity_registry";
 
 @customElement("ha-automation-action-choose")
 export class HaChooseAction extends LitElement implements ActionElement {
@@ -23,17 +27,104 @@ export class HaChooseAction extends LitElement implements ActionElement {
 
   @state() private _showDefault = false;
 
+  @state() private expandedUpdateFlag = false;
+
+  @state()
+  @consume({ context: fullEntitiesContext, subscribe: true })
+  _entityReg!: EntityRegistryEntry[];
+
   public static get defaultConfig() {
     return { choose: [{ conditions: [], sequence: [] }] };
   }
 
+  protected willUpdate(changedProperties: PropertyValues) {
+    if (!changedProperties.has("action")) {
+      return;
+    }
+
+    const oldCnt =
+      changedProperties.get("action") === undefined ||
+      changedProperties.get("action").choose === undefined
+        ? 0
+        : ensureArray(changedProperties.get("action").choose).length;
+    const newCnt = this.action.choose
+      ? ensureArray(this.action.choose).length
+      : 0;
+    if (newCnt === oldCnt + 1) {
+      this.expand(newCnt - 1);
+    }
+  }
+
+  private expand(i: number) {
+    this.updateComplete.then(() => {
+      this.shadowRoot!.querySelectorAll("ha-expansion-panel")[i].expanded =
+        true;
+      this.expandedUpdateFlag = !this.expandedUpdateFlag;
+    });
+  }
+
+  private isExpanded(i: number) {
+    const nodes = this.shadowRoot!.querySelectorAll("ha-expansion-panel");
+    if (nodes[i]) {
+      return nodes[i].expanded;
+    }
+    return false;
+  }
+
+  private _expandedChanged() {
+    this.expandedUpdateFlag = !this.expandedUpdateFlag;
+  }
+
+  private _getDescription(option, idx: number) {
+    if (this.isExpanded(idx)) {
+      return "";
+    }
+    if (!option.conditions || option.conditions.length === 0) {
+      return this.hass.localize(
+        "ui.panel.config.automation.editor.actions.type.choose.no_conditions"
+      );
+    }
+    let str = "";
+    if (typeof option.conditions[0] === "string") {
+      str += option.conditions[0];
+    } else {
+      str += describeCondition(
+        option.conditions[0],
+        this.hass,
+        this._entityReg
+      );
+    }
+    if (option.conditions.length > 1) {
+      str += this.hass.localize(
+        "ui.panel.config.automation.editor.actions.type.choose.option_description_additional",
+        "numberOfAdditionalConditions",
+        option.conditions.length - 1
+      );
+    }
+    return str;
+  }
+
   protected render() {
     const action = this.action;
 
     return html`
       ${(action.choose ? ensureArray(action.choose) : []).map(
         (option, idx) => html`<ha-card>
+          <ha-expansion-panel
+            leftChevron
+            @expanded-changed=${this._expandedChanged}
+          >
+            <h3 slot="header">
+              ${this.hass.localize(
+                "ui.panel.config.automation.editor.actions.type.choose.option",
+                "number",
+                idx + 1
+              )}:
+              ${this._getDescription(option, idx)}
+            </h3>
+
             <ha-icon-button
+              slot="icons"
               .idx=${idx}
               .disabled=${this.disabled}
               @click=${this._removeOption}
@@ -43,32 +134,27 @@ export class HaChooseAction extends LitElement implements ActionElement {
               .path=${mdiDelete}
             ></ha-icon-button>
             <div class="card-content">
-            <h2>
+              <h4>
-              ${this.hass.localize(
-                "ui.panel.config.automation.editor.actions.type.choose.option",
-                "number",
-                idx + 1
-              )}:
-            </h2>
-            <h3>
                 ${this.hass.localize(
                   "ui.panel.config.automation.editor.actions.type.choose.conditions"
                 )}:
-            </h3>
+              </h4>
               <ha-automation-condition
                 nested
-              .conditions=${ensureArray<string | Condition>(option.conditions)}
+                .conditions=${ensureArray<string | Condition>(
+                  option.conditions
+                )}
                 .reOrderMode=${this.reOrderMode}
                 .disabled=${this.disabled}
                 .hass=${this.hass}
                 .idx=${idx}
                 @value-changed=${this._conditionChanged}
               ></ha-automation-condition>
-            <h3>
+              <h4>
                 ${this.hass.localize(
                   "ui.panel.config.automation.editor.actions.type.choose.sequence"
                 )}:
-            </h3>
+              </h4>
               <ha-automation-action
                 nested
                 .actions=${ensureArray(option.sequence) || []}
@@ -79,6 +165,7 @@ export class HaChooseAction extends LitElement implements ActionElement {
                 @value-changed=${this._actionChanged}
               ></ha-automation-action>
             </div>
+          </ha-expansion-panel>
         </ha-card>`
       )}
       <ha-button
@@ -188,25 +275,36 @@ export class HaChooseAction extends LitElement implements ActionElement {
       haStyle,
       css`
         ha-card {
-          margin: 16px 0;
+          margin: 0 0 16px 0;
         }
         .add-card mwc-button {
           display: block;
           text-align: center;
         }
+        ha-expansion-panel {
+          --expansion-panel-summary-padding: 0 0 0 8px;
+          --expansion-panel-content-padding: 0;
+        }
+        h3 {
+          margin: 0;
+          font-size: inherit;
+          font-weight: inherit;
+        }
         ha-icon-button {
           position: absolute;
           right: 0;
           inset-inline-start: initial;
           inset-inline-end: 0;
           direction: var(--direction);
-          padding: 4px;
         }
         ha-svg-icon {
           height: 20px;
         }
         .link-button-row {
-          padding: 14px;
+          padding: 14px 14px 0 14px;
+        }
+        .card-content {
+          padding: 0 16px 16px 16px;
         }
       `,
     ];

src/translations/en.json

@@ -2703,7 +2703,9 @@
                   "option": "Option {number}",
                   "add_option": "Add option",
                   "remove_option": "Remove option",
+                  "option_description_additional": " {numberOfAdditionalConditions, plural,\n one {and 1 more condition}\n other {and {numberOfAdditionalConditions} more conditions}}",
                   "conditions": "Conditions",
+                  "no_conditions": "[%key:ui::panel::config::devices::automation::conditions::no_conditions%]",
                   "sequence": "Actions",
                   "description": {
                     "full": "Choose between {number} {number, plural,\n one {action}\n other{actions}\n}",