Automation editor: expand only root rows per default (#26712)

* Add default expand/collapse

* Readd expanded search param functionality

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

@@ -145,6 +145,8 @@ export default class HaAutomationActionRow extends LitElement {
 
   @property({ type: Boolean }) public disabled = false;
 
+  @property({ type: Boolean }) public root = false;
+
   @property({ type: Boolean }) public first?: boolean;
 
   @property({ type: Boolean }) public last?: boolean;
@@ -178,13 +180,21 @@ export default class HaAutomationActionRow extends LitElement {
 
   @state() private _selected = false;
 
-  @state() private _collapsed = false;
+  @state() private _collapsed = true;
 
   @state() private _warnings?: string[];
 
   @query("ha-automation-action-editor")
   private _actionEditor?: HaAutomationActionEditor;
 
+  protected firstUpdated(changedProperties: PropertyValues): void {
+    super.firstUpdated(changedProperties);
+
+    if (this.root) {
+      this._collapsed = false;
+    }
+  }
+
   protected willUpdate(changedProperties: PropertyValues) {
     if (changedProperties.has("yamlMode")) {
       this._warnings = undefined;

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

@@ -95,6 +95,7 @@ export default class HaAutomationAction extends LitElement {
             (action) => this._getKey(action),
             (action, idx) => html`
               <ha-automation-action-row
+                .root=${this.root}
                 .sortableData=${action}
                 .index=${idx}
                 .first=${idx === 0}
@@ -173,9 +174,8 @@ export default class HaAutomationAction extends LitElement {
               behavior: "smooth",
             });
           }
-        } else if (!this.optionsInSidebar) {
-          row.expand();
         }
+        row.expand();
         row.focus();
       });
     }

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

@@ -14,7 +14,7 @@ import {
   mdiStopCircleOutline,
 } from "@mdi/js";
 import deepClone from "deep-clone-simple";
-import type { CSSResultGroup } from "lit";
+import type { CSSResultGroup, PropertyValues } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
@@ -107,13 +107,15 @@ export default class HaAutomationConditionRow extends LitElement {
 
   @property({ type: Boolean }) public disabled = false;
 
+  @property({ type: Boolean }) public root = false;
+
   @property({ type: Boolean }) public first?: boolean;
 
   @property({ type: Boolean }) public last?: boolean;
 
   @property({ type: Boolean }) public narrow = false;
 
-  @state() private _collapsed = false;
+  @state() private _collapsed = true;
 
   @state() private _warnings?: string[];
 
@@ -395,6 +397,14 @@ export default class HaAutomationConditionRow extends LitElement {
     `;
   }
 
+  protected firstUpdated(changedProperties: PropertyValues): void {
+    super.firstUpdated(changedProperties);
+
+    if (this.root) {
+      this._collapsed = false;
+    }
+  }
+
   protected willUpdate(changedProperties) {
     // on yaml toggle --> clear warnings
     if (changedProperties.has("yamlMode")) {

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

@@ -117,9 +117,8 @@ export default class HaAutomationCondition extends LitElement {
               behavior: "smooth",
             });
           }
-        } else if (!this.optionsInSidebar) {
-          row.expand();
         }
+        row.expand();
         row.focus();
       });
     }
@@ -158,6 +157,7 @@ export default class HaAutomationCondition extends LitElement {
             (condition) => this._getKey(condition),
             (cond, idx) => html`
               <ha-automation-condition-row
+                .root=${this.root}
                 .sortableData=${cond}
                 .index=${idx}
                 .first=${idx === 0}

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

@@ -1,7 +1,7 @@
 import { mdiContentSave, mdiHelpCircle } from "@mdi/js";
 import type { HassEntity } from "home-assistant-js-websocket";
 import { load } from "js-yaml";
-import type { CSSResultGroup } from "lit";
+import type { CSSResultGroup, PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
@@ -18,6 +18,11 @@ import {
 import { ensureArray } from "../../../common/array/ensure-array";
 import { canOverrideAlphanumericInput } from "../../../common/dom/can-override-input";
 import { fireEvent } from "../../../common/dom/fire_event";
+import { constructUrlCurrentPath } from "../../../common/url/construct-url";
+import {
+  extractSearchParam,
+  removeSearchParam,
+} from "../../../common/url/search-params";
 import { computeRTL } from "../../../common/util/compute_rtl";
 import "../../../components/ha-button";
 import "../../../components/ha-fab";
@@ -293,6 +298,23 @@ export class HaManualAutomationEditor extends LitElement {
     `;
   }
 
+  protected firstUpdated(changedProps: PropertyValues): void {
+    super.firstUpdated(changedProps);
+    const expanded = extractSearchParam("expanded");
+    if (expanded === "1") {
+      this._clearParam("expanded");
+      this.expandAll();
+    }
+  }
+
+  private _clearParam(param: string) {
+    window.history.replaceState(
+      null,
+      "",
+      constructUrlCurrentPath(removeSearchParam(param))
+    );
+  }
+
   private _openSidebar(ev: CustomEvent<SidebarConfig>) {
     // deselect previous selected row
     this._sidebarConfig?.close?.();

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

@@ -65,7 +65,7 @@ export default class HaAutomationOptionRow extends LitElement {
 
   @state() private _selected = false;
 
-  @state() private _collapsed = false;
+  @state() private _collapsed = true;
 
   @state()
   @consume({ context: fullEntitiesContext, subscribe: true })

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

@@ -133,14 +133,13 @@ export default class HaAutomationOption extends LitElement {
         "ha-automation-option-row:last-of-type"
       )!;
       row.updateComplete.then(() => {
-        if (!this.optionsInSidebar) {
-          row.expand();
-        } else if (this.narrow) {
+        if (this.narrow) {
           row.scrollIntoView({
             block: "start",
             behavior: "smooth",
           });
         }
+        row.expand();
         row.focus();
       });
     }

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

@@ -1,6 +1,6 @@
 import { mdiContentSave, mdiHelpCircle } from "@mdi/js";
 import { load } from "js-yaml";
-import type { CSSResultGroup } from "lit";
+import type { CSSResultGroup, PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
@@ -17,6 +17,11 @@ import {
 import { ensureArray } from "../../../common/array/ensure-array";
 import { canOverrideAlphanumericInput } from "../../../common/dom/can-override-input";
 import { fireEvent } from "../../../common/dom/fire_event";
+import { constructUrlCurrentPath } from "../../../common/url/construct-url";
+import {
+  extractSearchParam,
+  removeSearchParam,
+} from "../../../common/url/search-params";
 import { computeRTL } from "../../../common/util/compute_rtl";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-markdown";
@@ -221,6 +226,23 @@ export class HaManualScriptEditor extends LitElement {
     `;
   }
 
+  protected firstUpdated(changedProps: PropertyValues): void {
+    super.firstUpdated(changedProps);
+    const expanded = extractSearchParam("expanded");
+    if (expanded === "1") {
+      this._clearParam("expanded");
+      this.expandAll();
+    }
+  }
+
+  private _clearParam(param: string) {
+    window.history.replaceState(
+      null,
+      "",
+      constructUrlCurrentPath(removeSearchParam(param))
+    );
+  }
+
   private _fieldsChanged(ev: CustomEvent): void {
     ev.stopPropagation();
     this.resetPastedConfig();