Add collapse/expand all for automations (#26695)

src/components/ha-selector/ha-selector-action.ts

@@ -1,7 +1,7 @@
 import { consume, ContextProvider } from "@lit/context";
 import type { UnsubscribeFunc } from "home-assistant-js-websocket";
 import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { customElement, property, query, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fullEntitiesContext } from "../../data/context";
 import {
@@ -13,6 +13,7 @@ import { migrateAutomationAction } from "../../data/script";
 import type { ActionSelector } from "../../data/selector";
 import { SubscribeMixin } from "../../mixins/subscribe-mixin";
 import "../../panels/config/automation/action/ha-automation-action";
+import type HaAutomationAction from "../../panels/config/automation/action/ha-automation-action";
 import type { HomeAssistant } from "../../types";
 
 @customElement("ha-selector-action")
@@ -35,6 +36,9 @@ export class HaActionSelector extends SubscribeMixin(LitElement) {
 
   @state() private _entitiesContext;
 
+  @query("ha-automation-action")
+  private _actionElement?: HaAutomationAction;
+
   protected hassSubscribeRequiredHostProps = ["_entitiesContext"];
 
   private _actions = memoizeOne((action: Action | undefined) => {
@@ -61,6 +65,14 @@ export class HaActionSelector extends SubscribeMixin(LitElement) {
     ];
   }
 
+  public expandAll() {
+    this._actionElement?.expandAll();
+  }
+
+  public collapseAll() {
+    this._actionElement?.collapseAll();
+  }
+
   protected render() {
     return html`
       ${this.label ? html`<label>${this.label}</label>` : nothing}

src/components/ha-selector/ha-selector-condition.ts

@@ -1,8 +1,9 @@
 import { css, html, LitElement, nothing } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, query } from "lit/decorators";
 import type { Condition } from "../../data/automation";
 import type { ConditionSelector } from "../../data/selector";
 import "../../panels/config/automation/condition/ha-automation-condition";
+import type HaAutomationCondition from "../../panels/config/automation/condition/ha-automation-condition";
 import type { HomeAssistant } from "../../types";
 
 @customElement("ha-selector-condition")
@@ -19,6 +20,9 @@ export class HaConditionSelector extends LitElement {
 
   @property({ type: Boolean, reflect: true }) public disabled = false;
 
+  @query("ha-automation-condition")
+  private _conditionElement?: HaAutomationCondition;
+
   protected render() {
     return html`
       ${this.label ? html`<label>${this.label}</label>` : nothing}
@@ -32,6 +36,14 @@ export class HaConditionSelector extends LitElement {
     `;
   }
 
+  public expandAll() {
+    this._conditionElement?.expandAll();
+  }
+
+  public collapseAll() {
+    this._conditionElement?.collapseAll();
+  }
+
   static styles = css`
     ha-automation-condition {
       display: block;

src/data/action.ts

@@ -91,6 +91,15 @@ export const isService = (key: string | undefined): boolean | undefined =>
 export const getService = (key: string): string =>
   key.substring(SERVICE_PREFIX.length);
 
+export const COLLAPSIBLE_ACTION_ELEMENTS = [
+  "ha-automation-action-choose",
+  "ha-automation-action-condition",
+  "ha-automation-action-if",
+  "ha-automation-action-parallel",
+  "ha-automation-action-repeat",
+  "ha-automation-action-sequence",
+];
+
 export const ACTION_BUILDING_BLOCKS = [
   "choose",
   "if",

src/data/condition.ts

@@ -52,3 +52,9 @@ export const CONDITION_GROUPS: AutomationElementGroup = {
 } as const;
 
 export const CONDITION_BUILDING_BLOCKS = ["and", "or", "not"];
+
+export const COLLAPSIBLE_CONDITION_ELEMENTS = [
+  "ha-automation-condition-and",
+  "ha-automation-condition-not",
+  "ha-automation-condition-or",
+];

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

@@ -5,11 +5,15 @@ import { dynamicElement } from "../../../../common/dom/dynamic-element-directive
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-yaml-editor";
 import type { HaYamlEditor } from "../../../../components/ha-yaml-editor";
+import { COLLAPSIBLE_ACTION_ELEMENTS } from "../../../../data/action";
 import { migrateAutomationAction, type Action } from "../../../../data/script";
 import type { HomeAssistant } from "../../../../types";
 import "../ha-automation-editor-warning";
 import { editorStyles } from "../styles";
-import { getAutomationActionType } from "./ha-automation-action-row";
+import {
+  getAutomationActionType,
+  type ActionElement,
+} from "./ha-automation-action-row";
 
 @customElement("ha-automation-action-editor")
 export default class HaAutomationActionEditor extends LitElement {
@@ -34,6 +38,9 @@ export default class HaAutomationActionEditor extends LitElement {
 
   @query("ha-yaml-editor") public yamlEditor?: HaYamlEditor;
 
+  @query(COLLAPSIBLE_ACTION_ELEMENTS.join(", "))
+  private _collapsibleElement?: ActionElement;
+
   protected render() {
     const yamlMode = this.yamlMode || !this.uiSupported;
     const type = getAutomationActionType(this.action);
@@ -103,6 +110,14 @@ export default class HaAutomationActionEditor extends LitElement {
     fireEvent(this, "value-changed", { value });
   }
 
+  public expandAll() {
+    this._collapsibleElement?.expandAll?.();
+  }
+
+  public collapseAll() {
+    this._collapsibleElement?.collapseAll?.();
+  }
+
   static styles = editorStyles;
 }
 

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

@@ -109,6 +109,8 @@ export const getAutomationActionType = memoizeOne(
 
 export interface ActionElement extends LitElement {
   action: Action;
+  expandAll?: () => void;
+  collapseAll?: () => void;
 }
 
 export const handleChangeEvent = (element: ActionElement, ev: CustomEvent) => {
@@ -181,7 +183,7 @@ export default class HaAutomationActionRow extends LitElement {
   @state() private _warnings?: string[];
 
   @query("ha-automation-action-editor")
-  private actionEditor?: HaAutomationActionEditor;
+  private _actionEditor?: HaAutomationActionEditor;
 
   protected willUpdate(changedProperties: PropertyValues) {
     if (changedProperties.has("yamlMode")) {
@@ -479,7 +481,7 @@ export default class HaAutomationActionRow extends LitElement {
     this.openSidebar(value); // refresh sidebar
 
     if (this._yamlMode && !this.optionsInSidebar) {
-      this.actionEditor?.yamlEditor?.setValue(value);
+      this._actionEditor?.yamlEditor?.setValue(value);
     }
   };
 
@@ -582,7 +584,7 @@ export default class HaAutomationActionRow extends LitElement {
       if (this._selected && this.optionsInSidebar) {
         this.openSidebar(value); // refresh sidebar
       } else if (this._yamlMode) {
-        this.actionEditor?.yamlEditor?.setValue(value);
+        this._actionEditor?.yamlEditor?.setValue(value);
       }
     }
   };
@@ -669,6 +671,7 @@ export default class HaAutomationActionRow extends LitElement {
       yamlMode: this._yamlMode,
     } satisfies ActionSidebarConfig);
     this._selected = true;
+    this._collapsed = false;
 
     if (this.narrow) {
       this.scrollIntoView({
@@ -679,11 +682,39 @@ export default class HaAutomationActionRow extends LitElement {
   }
 
   public expand() {
+    if (this.optionsInSidebar) {
+      this._collapsed = false;
+      return;
+    }
+
     this.updateComplete.then(() => {
       this.shadowRoot!.querySelector("ha-expansion-panel")!.expanded = true;
     });
   }
 
+  public collapse() {
+    if (this.optionsInSidebar) {
+      this._collapsed = true;
+      return;
+    }
+
+    this.updateComplete.then(() => {
+      this.shadowRoot!.querySelector("ha-expansion-panel")!.expanded = false;
+    });
+  }
+
+  public expandAll() {
+    this.expand();
+
+    this._actionEditor?.expandAll();
+  }
+
+  public collapseAll() {
+    this.collapse();
+
+    this._actionEditor?.collapseAll();
+  }
+
   private _uiSupported = memoizeOne(
     (type: string) =>
       customElements.get(`ha-automation-action-${type}`) !== undefined

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

@@ -2,7 +2,7 @@ import { mdiDrag, mdiPlus } from "@mdi/js";
 import deepClone from "deep-clone-simple";
 import type { PropertyValues } from "lit";
 import { LitElement, css, html, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { customElement, property, queryAll, state } from "lit/decorators";
 import { repeat } from "lit/directives/repeat";
 import { storage } from "../../../../common/decorators/storage";
 import { fireEvent } from "../../../../common/dom/fire_event";
@@ -55,6 +55,9 @@ export default class HaAutomationAction extends LitElement {
   })
   public _clipboard?: AutomationClipboard;
 
+  @queryAll("ha-automation-action-row")
+  private _actionRowElements?: HaAutomationActionRow[];
+
   private _focusLastActionOnChange = false;
 
   private _actionKeys = new WeakMap<Action, string>();
@@ -179,11 +182,14 @@ export default class HaAutomationAction extends LitElement {
   }
 
   public expandAll() {
-    const rows = this.shadowRoot!.querySelectorAll<HaAutomationActionRow>(
+    this._actionRowElements?.forEach((row) => {
-      "ha-automation-action-row"
+      row.expandAll();
-    )!;
+    });
-    rows.forEach((row) => {
+  }
-      row.expand();
+
+  public collapseAll() {
+    this._actionRowElements?.forEach((row) => {
+      row.collapseAll();
     });
   }
 

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

@@ -1,5 +1,5 @@
 import { type CSSResultGroup, LitElement, css, html } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { customElement, property, query, state } from "lit/decorators";
 import { ensureArray } from "../../../../../common/array/ensure-array";
 import { fireEvent } from "../../../../../common/dom/fire_event";
 import "../../../../../components/ha-button";
@@ -7,7 +7,9 @@ import type { Action, ChooseAction, Option } from "../../../../../data/script";
 import { haStyle } from "../../../../../resources/styles";
 import type { HomeAssistant } from "../../../../../types";
 import "../../option/ha-automation-option";
+import type HaAutomationOption from "../../option/ha-automation-option";
 import "../ha-automation-action";
+import type HaAutomationAction from "../ha-automation-action";
 import type { ActionElement } from "../ha-automation-action-row";
 
 @customElement("ha-automation-action-choose")
@@ -24,6 +26,10 @@ export class HaChooseAction extends LitElement implements ActionElement {
 
   @state() private _showDefault = false;
 
+  @query("ha-automation-option") private _optionElement?: HaAutomationOption;
+
+  @query("ha-automation-action") private _actionElement?: HaAutomationAction;
+
   public static get defaultConfig(): ChooseAction {
     return { choose: [{ conditions: [], sequence: [] }] };
   }
@@ -104,6 +110,16 @@ export class HaChooseAction extends LitElement implements ActionElement {
     fireEvent(this, "value-changed", { value: newValue });
   }
 
+  public expandAll() {
+    this._optionElement?.expandAll();
+    this._actionElement?.expandAll();
+  }
+
+  public collapseAll() {
+    this._optionElement?.collapseAll();
+    this._actionElement?.collapseAll();
+  }
+
   static get styles(): CSSResultGroup {
     return [
       haStyle,

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

@@ -1,5 +1,5 @@
 import { css, html, LitElement, nothing } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, query } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../../../common/dom/fire_event";
 import { stringCompare } from "../../../../../common/string/compare";
@@ -14,6 +14,7 @@ import {
 } from "../../../../../data/condition";
 import type { Entries, HomeAssistant } from "../../../../../types";
 import "../../condition/ha-automation-condition-editor";
+import type HaAutomationConditionEditor from "../../condition/ha-automation-condition-editor";
 import "../../condition/types/ha-automation-condition-and";
 import "../../condition/types/ha-automation-condition-device";
 import "../../condition/types/ha-automation-condition-not";
@@ -41,6 +42,9 @@ export class HaConditionAction extends LitElement implements ActionElement {
 
   @property({ type: Boolean, attribute: "indent" }) public indent = false;
 
+  @query("ha-automation-condition-editor")
+  private _conditionEditor?: HaAutomationConditionEditor;
+
   public static get defaultConfig(): Omit<Condition, "state" | "entity_id"> {
     return { condition: "state" };
   }
@@ -146,6 +150,14 @@ export class HaConditionAction extends LitElement implements ActionElement {
       customElements.get(`ha-automation-condition-${type}`) !== undefined
   );
 
+  public expandAll() {
+    this._conditionEditor?.expandAll();
+  }
+
+  public collapseAll() {
+    this._conditionEditor?.collapseAll();
+  }
+
   static styles = css`
     ha-select {
       margin-bottom: 24px;

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

@@ -1,13 +1,21 @@
 import type { CSSResultGroup } from "lit";
 import { css, html, LitElement } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import {
+  customElement,
+  property,
+  query,
+  queryAll,
+  state,
+} from "lit/decorators";
 import { fireEvent } from "../../../../../common/dom/fire_event";
 import "../../../../../components/ha-textfield";
 import type { Action, IfAction } from "../../../../../data/script";
 import { haStyle } from "../../../../../resources/styles";
 import type { HomeAssistant } from "../../../../../types";
 import type { Condition } from "../../../../lovelace/common/validate-condition";
+import type HaAutomationCondition from "../../condition/ha-automation-condition";
 import "../ha-automation-action";
+import type HaAutomationAction from "../ha-automation-action";
 import type { ActionElement } from "../ha-automation-action-row";
 
 @customElement("ha-automation-action-if")
@@ -24,6 +32,12 @@ export class HaIfAction extends LitElement implements ActionElement {
 
   @state() private _showElse = false;
 
+  @query("ha-automation-condition")
+  private _conditionElement?: HaAutomationCondition;
+
+  @queryAll("ha-automation-action")
+  private _actionElements?: HaAutomationAction[];
+
   public static get defaultConfig(): IfAction {
     return {
       if: [],
@@ -132,6 +146,16 @@ export class HaIfAction extends LitElement implements ActionElement {
     fireEvent(this, "value-changed", { value: newValue });
   }
 
+  public expandAll() {
+    this._conditionElement?.expandAll();
+    this._actionElements?.forEach((element) => element.expandAll?.());
+  }
+
+  public collapseAll() {
+    this._conditionElement?.collapseAll();
+    this._actionElements?.forEach((element) => element.collapseAll?.());
+  }
+
   static get styles(): CSSResultGroup {
     return [
       haStyle,

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

@@ -1,12 +1,13 @@
 import type { CSSResultGroup } from "lit";
 import { html, LitElement } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, query } from "lit/decorators";
 import { fireEvent } from "../../../../../common/dom/fire_event";
 import "../../../../../components/ha-textfield";
 import type { Action, ParallelAction } from "../../../../../data/script";
 import { haStyle } from "../../../../../resources/styles";
 import type { HomeAssistant } from "../../../../../types";
 import "../ha-automation-action";
+import type HaAutomationAction from "../ha-automation-action";
 import type { ActionElement } from "../ha-automation-action-row";
 
 @customElement("ha-automation-action-parallel")
@@ -21,6 +22,9 @@ export class HaParallelAction extends LitElement implements ActionElement {
 
   @property({ type: Boolean }) public indent = false;
 
+  @query("ha-automation-action")
+  private _actionElement?: HaAutomationAction;
+
   public static get defaultConfig(): ParallelAction {
     return {
       parallel: [],
@@ -53,6 +57,14 @@ export class HaParallelAction extends LitElement implements ActionElement {
     });
   }
 
+  public expandAll() {
+    this._actionElement?.expandAll();
+  }
+
+  public collapseAll() {
+    this._actionElement?.collapseAll();
+  }
+
   static get styles(): CSSResultGroup {
     return haStyle;
   }

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

@@ -1,6 +1,6 @@
 import type { CSSResultGroup } from "lit";
 import { css, html, LitElement } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, query } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../../../common/dom/fire_event";
 import "../../../../../components/ha-textfield";
@@ -12,10 +12,14 @@ import type { ActionElement } from "../ha-automation-action-row";
 
 import { isTemplate } from "../../../../../common/string/has-template";
 import "../../../../../components/ha-form/ha-form";
+import type { HaForm } from "../../../../../components/ha-form/ha-form";
 import type {
   HaFormSchema,
   SchemaUnion,
 } from "../../../../../components/ha-form/types";
+import type { HaSelector } from "../../../../../components/ha-selector/ha-selector";
+import type { HaActionSelector } from "../../../../../components/ha-selector/ha-selector-action";
+import type { HaConditionSelector } from "../../../../../components/ha-selector/ha-selector-condition";
 
 const OPTIONS = ["count", "while", "until", "for_each"] as const;
 type RepeatType = (typeof OPTIONS)[number];
@@ -37,6 +41,9 @@ export class HaRepeatAction extends LitElement implements ActionElement {
 
   @property({ type: Boolean, attribute: "indent" }) public indent = false;
 
+  @query("ha-form")
+  private _formElement?: HaForm;
+
   public static get defaultConfig(): RepeatAction {
     return { repeat: { count: 2, sequence: [] } };
   }
@@ -175,6 +182,41 @@ export class HaRepeatAction extends LitElement implements ActionElement {
     ];
   }
 
+  private _getSelectorElements() {
+    if (this._formElement) {
+      const selectors =
+        this._formElement.shadowRoot?.querySelectorAll<HaSelector>(
+          "ha-selector"
+        );
+
+      const selectorElements: (HaConditionSelector | HaActionSelector)[] = [];
+
+      selectors?.forEach((selector) => {
+        selectorElements.push(
+          ...Array.from(
+            selector.shadowRoot?.querySelectorAll<
+              HaConditionSelector | HaActionSelector
+            >("ha-selector-condition, ha-selector-action") || []
+          )
+        );
+      });
+      return selectorElements;
+    }
+    return [];
+  }
+
+  public expandAll() {
+    this._getSelectorElements().forEach((element) => {
+      element.expandAll?.();
+    });
+  }
+
+  public collapseAll() {
+    this._getSelectorElements().forEach((element) => {
+      element.collapseAll?.();
+    });
+  }
+
   private _computeLabelCallback = (
     schema: SchemaUnion<ReturnType<typeof this._schema>>
   ): string => {

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

@@ -1,6 +1,6 @@
 import type { CSSResultGroup } from "lit";
 import { html, LitElement } from "lit";
-import { customElement, property } from "lit/decorators";
+import { query, customElement, property } from "lit/decorators";
 import { fireEvent } from "../../../../../common/dom/fire_event";
 import "../../../../../components/ha-textfield";
 import type { Action, SequenceAction } from "../../../../../data/script";
@@ -8,6 +8,7 @@ import { haStyle } from "../../../../../resources/styles";
 import type { HomeAssistant } from "../../../../../types";
 import "../ha-automation-action";
 import type { ActionElement } from "../ha-automation-action-row";
+import type HaAutomationAction from "../ha-automation-action";
 
 @customElement("ha-automation-action-sequence")
 export class HaSequenceAction extends LitElement implements ActionElement {
@@ -21,6 +22,9 @@ export class HaSequenceAction extends LitElement implements ActionElement {
 
   @property({ type: Boolean }) public indent = false;
 
+  @query("ha-automation-action")
+  private _actionElement?: HaAutomationAction;
+
   public static get defaultConfig(): SequenceAction {
     return {
       sequence: [],
@@ -53,6 +57,14 @@ export class HaSequenceAction extends LitElement implements ActionElement {
     });
   }
 
+  public expandAll() {
+    this._actionElement?.expandAll();
+  }
+
+  public collapseAll() {
+    this._actionElement?.collapseAll();
+  }
+
   static get styles(): CSSResultGroup {
     return haStyle;
   }

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

@@ -8,9 +8,11 @@ import "../../../../components/ha-yaml-editor";
 import type { HaYamlEditor } from "../../../../components/ha-yaml-editor";
 import type { Condition } from "../../../../data/automation";
 import { expandConditionWithShorthand } from "../../../../data/automation";
+import { COLLAPSIBLE_CONDITION_ELEMENTS } from "../../../../data/condition";
 import type { HomeAssistant } from "../../../../types";
 import "../ha-automation-editor-warning";
 import { editorStyles } from "../styles";
+import type { ConditionElement } from "./ha-automation-condition-row";
 
 @customElement("ha-automation-condition-editor")
 export default class HaAutomationConditionEditor extends LitElement {
@@ -33,6 +35,9 @@ export default class HaAutomationConditionEditor extends LitElement {
 
   @query("ha-yaml-editor") public yamlEditor?: HaYamlEditor;
 
+  @query(COLLAPSIBLE_CONDITION_ELEMENTS.join(", "))
+  private _collapsibleElement?: ConditionElement;
+
   private _processedCondition = memoizeOne((condition) =>
     expandConditionWithShorthand(condition)
   );
@@ -108,6 +113,14 @@ export default class HaAutomationConditionEditor extends LitElement {
     fireEvent(this, "value-changed", { value });
   }
 
+  public expandAll() {
+    this._collapsibleElement?.expandAll?.();
+  }
+
+  public collapseAll() {
+    this._collapsibleElement?.collapseAll?.();
+  }
+
   static styles = [
     editorStyles,
     css`

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

@@ -70,6 +70,8 @@ import "./types/ha-automation-condition-zone";
 
 export interface ConditionElement extends LitElement {
   condition: Condition;
+  expandAll?: () => void;
+  collapseAll?: () => void;
 }
 
 export const handleChangeEvent = (
@@ -575,11 +577,32 @@ export default class HaAutomationConditionRow extends LitElement {
   };
 
   public expand() {
+    if (this.optionsInSidebar) {
+      this._collapsed = false;
+      return;
+    }
+
     this.updateComplete.then(() => {
       this.shadowRoot!.querySelector("ha-expansion-panel")!.expanded = true;
     });
   }
 
+  public collapse() {
+    this._collapsed = true;
+  }
+
+  public expandAll() {
+    this.expand();
+
+    this.conditionEditor?.expandAll();
+  }
+
+  public collapseAll() {
+    this.collapse();
+
+    this.conditionEditor?.collapseAll();
+  }
+
   private _handleUiModeNotAvailable(ev: CustomEvent) {
     this._warnings = handleStructError(this.hass, ev.detail).warnings;
     if (!this._yamlMode) {
@@ -622,6 +645,7 @@ export default class HaAutomationConditionRow extends LitElement {
       yamlMode: this._yamlMode,
     } satisfies ConditionSidebarConfig);
     this._selected = true;
+    this._collapsed = false;
 
     if (this.narrow) {
       this.scrollIntoView({

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

@@ -2,7 +2,7 @@ import { mdiDrag, mdiPlus } from "@mdi/js";
 import deepClone from "deep-clone-simple";
 import type { PropertyValues } from "lit";
 import { LitElement, css, html, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { customElement, property, queryAll, state } from "lit/decorators";
 import { repeat } from "lit/directives/repeat";
 import { storage } from "../../../../common/decorators/storage";
 import { fireEvent } from "../../../../common/dom/fire_event";
@@ -53,6 +53,9 @@ export default class HaAutomationCondition extends LitElement {
   })
   public _clipboard?: AutomationClipboard;
 
+  @queryAll("ha-automation-condition-row")
+  private _conditionRowElements?: HaAutomationConditionRow[];
+
   private _focusLastConditionOnChange = false;
 
   private _conditionKeys = new WeakMap<Condition, string>();
@@ -123,11 +126,14 @@ export default class HaAutomationCondition extends LitElement {
   }
 
   public expandAll() {
-    const rows = this.shadowRoot!.querySelectorAll<HaAutomationConditionRow>(
+    this._conditionRowElements?.forEach((row) => {
-      "ha-automation-condition-row"
+      row.expandAll();
-    )!;
+    });
-    rows.forEach((row) => {
+  }
-      row.expand();
+
+  public collapseAll() {
+    this._conditionRowElements?.forEach((row) => {
+      row.collapseAll();
     });
   }
 

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

@@ -1,9 +1,10 @@
 import { html, LitElement } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, query } from "lit/decorators";
 import { fireEvent } from "../../../../../common/dom/fire_event";
 import type { LogicalCondition } from "../../../../../data/automation";
 import type { HomeAssistant } from "../../../../../types";
 import "../ha-automation-condition";
+import type HaAutomationCondition from "../ha-automation-condition";
 import type { ConditionElement } from "../ha-automation-condition-row";
 
 @customElement("ha-automation-condition-logical")
@@ -22,6 +23,9 @@ export abstract class HaLogicalCondition
   @property({ type: Boolean, attribute: "sidebar" }) public optionsInSidebar =
     false;
 
+  @query("ha-automation-condition")
+  private _conditionElement?: HaAutomationCondition;
+
   protected render() {
     return html`
       <ha-automation-condition
@@ -35,6 +39,14 @@ export abstract class HaLogicalCondition
     `;
   }
 
+  public expandAll() {
+    this._conditionElement?.expandAll?.();
+  }
+
+  public collapseAll() {
+    this._conditionElement?.collapseAll?.();
+  }
+
   private _valueChanged(ev: CustomEvent): void {
     ev.stopPropagation();
     fireEvent(this, "value-changed", {

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

@@ -16,6 +16,8 @@ import {
   mdiStopCircleOutline,
   mdiTag,
   mdiTransitConnection,
+  mdiUnfoldLessHorizontal,
+  mdiUnfoldMoreHorizontal,
 } from "@mdi/js";
 import type { UnsubscribeFunc } from "home-assistant-js-websocket";
 import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
@@ -369,6 +371,30 @@ export class HaAutomationEditor extends PreventUnsavedMixin(
             <ha-svg-icon slot="graphic" .path=${mdiPlaylistEdit}></ha-svg-icon>
           </ha-list-item>
 
+          ${!useBlueprint
+            ? html`
+                <ha-list-item graphic="icon" @click=${this._collapseAll}>
+                  <ha-svg-icon
+                    slot="graphic"
+                    .path=${mdiUnfoldLessHorizontal}
+                  ></ha-svg-icon>
+                  ${this.hass.localize(
+                    "ui.panel.config.automation.editor.collapse_all"
+                  )}
+                </ha-list-item>
+
+                <ha-list-item graphic="icon" @click=${this._expandAll}>
+                  <ha-svg-icon
+                    slot="graphic"
+                    .path=${mdiUnfoldMoreHorizontal}
+                  ></ha-svg-icon>
+                  ${this.hass.localize(
+                    "ui.panel.config.automation.editor.expand_all"
+                  )}
+                </ha-list-item>
+              `
+            : nothing}
+
           <li divider role="separator"></li>
 
           <ha-list-item
@@ -1098,6 +1124,14 @@ export class HaAutomationEditor extends PreventUnsavedMixin(
     return this._confirmUnsavedChanged();
   }
 
+  private _collapseAll() {
+    this._manualEditor?.collapseAll();
+  }
+
+  private _expandAll() {
+    this._manualEditor?.expandAll();
+  }
+
   static get styles(): CSSResultGroup {
     return [
       haStyle,

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

@@ -40,7 +40,9 @@ import type { HomeAssistant } from "../../../types";
 import { documentationUrl } from "../../../util/documentation-url";
 import { showToast } from "../../../util/toast";
 import "./action/ha-automation-action";
+import type HaAutomationAction from "./action/ha-automation-action";
 import "./condition/ha-automation-condition";
+import type HaAutomationCondition from "./condition/ha-automation-condition";
 import "./ha-automation-sidebar";
 import { showPasteReplaceDialog } from "./paste-replace-dialog/show-dialog-paste-replace";
 import { saveFabStyles } from "./styles";
@@ -574,6 +576,24 @@ export class HaManualAutomationEditor extends LitElement {
     });
   }
 
+  private _getCollapsableElements() {
+    return this.shadowRoot!.querySelectorAll<
+      HaAutomationAction | HaAutomationCondition
+    >("ha-automation-action, ha-automation-condition");
+  }
+
+  public expandAll() {
+    this._getCollapsableElements().forEach((element) => {
+      element.expandAll();
+    });
+  }
+
+  public collapseAll() {
+    this._getCollapsableElements().forEach((element) => {
+      element.collapseAll();
+    });
+  }
+
   static get styles(): CSSResultGroup {
     return [
       saveFabStyles,

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

@@ -9,7 +9,7 @@ import {
 } from "@mdi/js";
 import type { CSSResultGroup } from "lit";
 import { LitElement, css, html, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { customElement, property, query, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { ensureArray } from "../../../../common/array/ensure-array";
 import { fireEvent } from "../../../../common/dom/fire_event";
@@ -37,7 +37,9 @@ import {
 } from "../../../../dialogs/generic/show-dialog-box";
 import type { HomeAssistant } from "../../../../types";
 import "../action/ha-automation-action";
+import type HaAutomationAction from "../action/ha-automation-action";
 import "../condition/ha-automation-condition";
+import type HaAutomationCondition from "../condition/ha-automation-condition";
 import { editorStyles, rowStyles } from "../styles";
 
 @customElement("ha-automation-option-row")
@@ -69,6 +71,12 @@ export default class HaAutomationOptionRow extends LitElement {
   @consume({ context: fullEntitiesContext, subscribe: true })
   _entityReg!: EntityRegistryEntry[];
 
+  @query("ha-automation-condition")
+  private _conditionElement?: HaAutomationCondition;
+
+  @query("ha-automation-action")
+  private _actionElement?: HaAutomationAction;
+
   private _expandedChanged(ev) {
     if (ev.currentTarget.id !== "option") {
       return;
@@ -355,6 +363,7 @@ export default class HaAutomationOptionRow extends LitElement {
       delete: this._removeOption,
     } satisfies OptionSidebarConfig);
     this._selected = true;
+    this._collapsed = false;
 
     if (this.narrow) {
       this.scrollIntoView({
@@ -365,11 +374,34 @@ export default class HaAutomationOptionRow extends LitElement {
   }
 
   public expand() {
+    if (this.optionsInSidebar) {
+      this._collapsed = false;
+      return;
+    }
+
     this.updateComplete.then(() => {
       this.shadowRoot!.querySelector("ha-expansion-panel")!.expanded = true;
     });
   }
 
+  public collapse() {
+    this._collapsed = true;
+  }
+
+  public expandAll() {
+    this.expand();
+
+    this._conditionElement?.expandAll();
+    this._actionElement?.expandAll();
+  }
+
+  public collapseAll() {
+    this.collapse();
+
+    this._conditionElement?.collapseAll();
+    this._actionElement?.collapseAll();
+  }
+
   private _toggleCollapse() {
     this._collapsed = !this._collapsed;
   }

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

@@ -2,7 +2,7 @@ import { mdiDrag, mdiPlus } from "@mdi/js";
 import deepClone from "deep-clone-simple";
 import type { PropertyValues } from "lit";
 import { LitElement, css, html, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { customElement, property, queryAll, state } from "lit/decorators";
 import { repeat } from "lit/directives/repeat";
 import { storage } from "../../../../common/decorators/storage";
 import { fireEvent } from "../../../../common/dom/fire_event";
@@ -41,6 +41,9 @@ export default class HaAutomationOption extends LitElement {
   })
   public _clipboard?: AutomationClipboard;
 
+  @queryAll("ha-automation-option-row")
+  private _optionRowElements?: HaAutomationOptionRow[];
+
   private _focusLastOptionOnChange = false;
 
   private _optionsKeys = new WeakMap<Option, string>();
@@ -144,12 +147,11 @@ export default class HaAutomationOption extends LitElement {
   }
 
   public expandAll() {
-    const rows = this.shadowRoot!.querySelectorAll<HaAutomationOptionRow>(
+    this._optionRowElements?.forEach((row) => row.expandAll());
-      "ha-automation-option-row"
+  }
-    )!;
+
-    rows.forEach((row) => {
+  public collapseAll() {
-      row.expand();
+    this._optionRowElements?.forEach((row) => row.collapseAll());
-    });
   }
 
   private _addOption = () => {

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

@@ -15,6 +15,8 @@ import {
   mdiRobotConfused,
   mdiTag,
   mdiTransitConnection,
+  mdiUnfoldLessHorizontal,
+  mdiUnfoldMoreHorizontal,
 } from "@mdi/js";
 import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
 import { LitElement, css, html, nothing } from "lit";
@@ -340,6 +342,30 @@ export class HaScriptEditor extends SubscribeMixin(
             <ha-svg-icon slot="graphic" .path=${mdiPlaylistEdit}></ha-svg-icon>
           </ha-list-item>
 
+          ${!useBlueprint
+            ? html`
+                <ha-list-item graphic="icon" @click=${this._collapseAll}>
+                  <ha-svg-icon
+                    slot="graphic"
+                    .path=${mdiUnfoldLessHorizontal}
+                  ></ha-svg-icon>
+                  ${this.hass.localize(
+                    "ui.panel.config.automation.editor.collapse_all"
+                  )}
+                </ha-list-item>
+
+                <ha-list-item graphic="icon" @click=${this._expandAll}>
+                  <ha-svg-icon
+                    slot="graphic"
+                    .path=${mdiUnfoldMoreHorizontal}
+                  ></ha-svg-icon>
+                  ${this.hass.localize(
+                    "ui.panel.config.automation.editor.expand_all"
+                  )}
+                </ha-list-item>
+              `
+            : nothing}
+
           <li divider role="separator"></li>
 
           <ha-list-item
@@ -1025,6 +1051,14 @@ export class HaScriptEditor extends SubscribeMixin(
     return this._confirmUnsavedChanged();
   }
 
+  private _collapseAll() {
+    this._manualEditor?.collapseAll();
+  }
+
+  private _expandAll() {
+    this._manualEditor?.expandAll();
+  }
+
   static get styles(): CSSResultGroup {
     return [
       haStyle,

src/panels/config/script/ha-script-field-row.ts

@@ -1,7 +1,7 @@
 import { mdiDelete, mdiDotsVertical } from "@mdi/js";
 import type { CSSResultGroup } from "lit";
 import { LitElement, css, html, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { customElement, property, query, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { preventDefaultStopPropagation } from "../../../common/dom/prevent_default_stop_propagation";
@@ -19,6 +19,7 @@ import { showConfirmationDialog } from "../../../dialogs/generic/show-dialog-box
 import { haStyle } from "../../../resources/styles";
 import type { HomeAssistant } from "../../../types";
 import "./ha-script-field-selector-editor";
+import type HaScriptFieldSelectorEditor from "./ha-script-field-selector-editor";
 
 @customElement("ha-script-field-row")
 export default class HaScriptFieldRow extends LitElement {
@@ -45,6 +46,9 @@ export default class HaScriptFieldRow extends LitElement {
 
   @state() private _selectorRowCollapsed = false;
 
+  @query("ha-script-field-selector-editor")
+  private _selectorEditor?: HaScriptFieldSelectorEditor;
+
   protected render() {
     return html`
       <ha-card outlined>
@@ -141,10 +145,40 @@ export default class HaScriptFieldRow extends LitElement {
     this._collapsed = !this._collapsed;
   }
 
+  public expand() {
+    this._collapsed = false;
+  }
+
+  public collapse() {
+    this._collapsed = true;
+  }
+
+  public expandSelectorRow() {
+    this._selectorRowCollapsed = false;
+  }
+
+  public collapseSelectorRow() {
+    this._selectorRowCollapsed = true;
+  }
+
   private _toggleSelectorRowCollapse() {
     this._selectorRowCollapsed = !this._selectorRowCollapsed;
   }
 
+  public expandAll() {
+    this.expand();
+    this.expandSelectorRow();
+
+    this._selectorEditor?.expandAll();
+  }
+
+  public collapseAll() {
+    this.collapse();
+    this.collapseSelectorRow();
+
+    this._selectorEditor?.collapseAll();
+  }
+
   private _toggleSidebar(ev: Event) {
     ev?.stopPropagation();
 
@@ -155,6 +189,7 @@ export default class HaScriptFieldRow extends LitElement {
     }
 
     this._selected = true;
+    this._collapsed = false;
     this.openSidebar();
   }
 
@@ -168,6 +203,7 @@ export default class HaScriptFieldRow extends LitElement {
     }
 
     this._selectorRowSelected = true;
+    this._selectorRowCollapsed = false;
     this.openSidebar(true);
   }
 

src/panels/config/script/ha-script-field-selector-editor.ts

@@ -1,12 +1,16 @@
 import type { CSSResultGroup } from "lit";
 import { LitElement, css, html, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { customElement, property, query, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../common/dom/fire_event";
 import type { LocalizeKeys } from "../../../common/translations/localize";
 import "../../../components/ha-alert";
 import "../../../components/ha-form/ha-form";
+import type { HaForm } from "../../../components/ha-form/ha-form";
 import type { SchemaUnion } from "../../../components/ha-form/types";
+import type { HaSelector } from "../../../components/ha-selector/ha-selector";
+import type { HaActionSelector } from "../../../components/ha-selector/ha-selector-action";
+import type { HaConditionSelector } from "../../../components/ha-selector/ha-selector-condition";
 import "../../../components/ha-yaml-editor";
 import type { Field } from "../../../data/script";
 import { SELECTOR_SELECTOR_BUILDING_BLOCKS } from "../../../data/selector/selector_selector";
@@ -33,6 +37,9 @@ export default class HaScriptFieldSelectorEditor extends LitElement {
 
   @state() private _yamlError?: undefined | "yaml_error" | "key_not_unique";
 
+  @query("ha-form")
+  private _formElement?: HaForm;
+
   private _schema = memoizeOne(
     (selector: any) =>
       [
@@ -138,6 +145,41 @@ export default class HaScriptFieldSelectorEditor extends LitElement {
     this.hass.localize(`ui.panel.config.script.editor.field.${error}` as any) ||
     error;
 
+  private _getSelectorElements() {
+    if (this._formElement) {
+      const selectors =
+        this._formElement.shadowRoot?.querySelectorAll<HaSelector>(
+          "ha-selector"
+        );
+
+      const selectorElements: (HaConditionSelector | HaActionSelector)[] = [];
+
+      selectors?.forEach((selector) => {
+        selectorElements.push(
+          ...Array.from(
+            selector.shadowRoot?.querySelectorAll<
+              HaConditionSelector | HaActionSelector
+            >("ha-selector-condition, ha-selector-action") || []
+          )
+        );
+      });
+      return selectorElements;
+    }
+    return [];
+  }
+
+  public expandAll() {
+    this._getSelectorElements().forEach((element) => {
+      element.expandAll?.();
+    });
+  }
+
+  public collapseAll() {
+    this._getSelectorElements().forEach((element) => {
+      element.collapseAll?.();
+    });
+  }
+
   static get styles(): CSSResultGroup {
     return [
       haStyle,

src/panels/config/script/ha-script-fields.ts

@@ -1,7 +1,7 @@
 import { mdiPlus } from "@mdi/js";
 import type { PropertyValues } from "lit";
 import { LitElement, css, html, nothing } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, queryAll } from "lit/decorators";
 import { fireEvent } from "../../../common/dom/fire_event";
 import "../../../components/ha-button";
 import "../../../components/ha-button-menu";
@@ -23,6 +23,9 @@ export default class HaScriptFields extends LitElement {
 
   @property({ type: Boolean }) public narrow = false;
 
+  @queryAll("ha-script-field-row")
+  private _fieldRowElements?: HaScriptFieldRow[];
+
   private _focusLastActionOnChange = false;
 
   protected render() {
@@ -48,12 +51,7 @@ export default class HaScriptFields extends LitElement {
             )}
           </div> `
         : nothing}
-      <ha-button
+      <ha-button @click=${this._addField} .disabled=${this.disabled}>
-        appearance="filled"
-        size="small"
-        @click=${this._addField}
-        .disabled=${this.disabled}
-      >
         <ha-svg-icon .path=${mdiPlus} slot="start"></ha-svg-icon>
         ${this.hass.localize("ui.panel.config.script.editor.field.add_field")}
       </ha-button>
@@ -144,6 +142,18 @@ export default class HaScriptFields extends LitElement {
     return key;
   }
 
+  public expandAll() {
+    this._fieldRowElements?.forEach((row) => {
+      row.expandAll();
+    });
+  }
+
+  public collapseAll() {
+    this._fieldRowElements?.forEach((row) => {
+      row.collapseAll();
+    });
+  }
+
   static styles = css`
     ha-script-field-row {
       display: block;

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

@@ -31,6 +31,7 @@ import type { HomeAssistant } from "../../../types";
 import { documentationUrl } from "../../../util/documentation-url";
 import { showToast } from "../../../util/toast";
 import "../automation/action/ha-automation-action";
+import type HaAutomationAction from "../automation/action/ha-automation-action";
 import "../automation/ha-automation-sidebar";
 import { showPasteReplaceDialog } from "../automation/paste-replace-dialog/show-dialog-paste-replace";
 import { saveFabStyles } from "../automation/styles";
@@ -460,6 +461,24 @@ export class HaManualScriptEditor extends LitElement {
     fireEvent(this, "save-script");
   }
 
+  private _getCollapsableElements() {
+    return this.shadowRoot!.querySelectorAll<
+      HaAutomationAction | HaScriptFields
+    >("ha-automation-action, ha-script-fields");
+  }
+
+  public expandAll() {
+    this._getCollapsableElements().forEach((element) => {
+      element.expandAll();
+    });
+  }
+
+  public collapseAll() {
+    this._getCollapsableElements().forEach((element) => {
+      element.collapseAll();
+    });
+  }
+
   static get styles(): CSSResultGroup {
     return [
       saveFabStyles,

src/translations/en.json

@@ -3792,6 +3792,8 @@
             "automation_settings": "Automation settings",
             "move_up": "Move up",
             "move_down": "Move down",
+            "collapse_all": "Collapse all",
+            "expand_all": "Expand all",
             "description": {
               "label": "Description",
               "placeholder": "Optional description",