jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-11-10 11:30:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

Automation editor: fix yaml editor and editor switch (#26772)

Browse Source
This commit is contained in:
Wendelin
2025-09-01 13:26:17 +02:00
committed by GitHub
parent eea43494da
commit ded85d9f27
19 changed files with 156 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/data/automation.ts
View File

@@ -556,7 +556,6 @@ export interface AutomationClipboard {
}
export interface BaseSidebarConfig {
toggleYamlMode: () => boolean;
delete: () => void;
close: (focus?: boolean) => void;
}
@@ -568,6 +567,7 @@ export interface TriggerSidebarConfig extends BaseSidebarConfig {
duplicate: () => void;
cut: () => void;
copy: () => void;
toggleYamlMode: () => void;
config: Trigger;
yamlMode: boolean;
uiSupported: boolean;
@@ -581,6 +581,7 @@ export interface ConditionSidebarConfig extends BaseSidebarConfig {
duplicate: () => void;
cut: () => void;
copy: () => void;
toggleYamlMode: () => void;
config: Condition;
yamlMode: boolean;
uiSupported: boolean;
@@ -594,6 +595,7 @@ export interface ActionSidebarConfig extends BaseSidebarConfig {
cut: () => void;
copy: () => void;
run: () => void;
toggleYamlMode: () => void;
config: {
action: Action;
};
@@ -615,6 +617,7 @@ export interface ScriptFieldSidebarConfig extends BaseSidebarConfig {
key: string;
excludeKeys: string[];
};
toggleYamlMode: () => void;
yamlMode: boolean;
}

2
src/panels/config/automation/action/ha-automation-action-editor.ts
View File

@@ -97,7 +97,7 @@ export default class HaAutomationActionEditor extends LitElement {
if (!ev.detail.isValid) {
return;
}
fireEvent(this, "value-changed", {
fireEvent(this, "yaml-changed", {
value: migrateAutomationAction(ev.detail.value),
});
}

2
src/panels/config/automation/action/ha-automation-action-row.ts
View File

@@ -688,7 +688,7 @@ export default class HaAutomationActionRow extends LitElement {
},
toggleYamlMode: () => {
this._toggleYamlMode();
return this._yamlMode;
this.openSidebar();
},
disable: this._onDisable,
delete: this._onDelete,

3
src/panels/config/automation/condition/ha-automation-condition-editor.ts
View File

@@ -103,8 +103,7 @@ export default class HaAutomationConditionEditor extends LitElement {
if (!ev.detail.isValid) {
return;
}
// @ts-ignore
fireEvent(this, "value-changed", { value: ev.detail.value, yaml: true });
fireEvent(this, "yaml-changed", { value: ev.detail.value });
}
private _onUiChanged(ev: CustomEvent) {

2
src/panels/config/automation/condition/ha-automation-condition-row.ts
View File

@@ -660,7 +660,7 @@ export default class HaAutomationConditionRow extends LitElement {
},
toggleYamlMode: () => {
this._toggleYamlMode();
return this._yamlMode;
this.openSidebar();
},
disable: this._onDisable,
delete: this._onDelete,

19
src/panels/config/automation/ha-automation-sidebar.ts
View File

@@ -1,6 +1,5 @@
import { css, html, LitElement, nothing } from "lit";
import { customElement, property, query, state } from "lit/decorators";
import { fireEvent } from "../../../common/dom/fire_event";
import "../../../components/ha-bottom-sheet";
import type { HaBottomSheet } from "../../../components/ha-bottom-sheet";
import {
@@ -34,6 +33,8 @@ export default class HaAutomationSidebar extends LitElement {
@property({ type: Boolean }) public narrow = false;
@property({ attribute: "sidebar-key" }) public sidebarKey?: string;
@state() private _yamlMode = false;
@query("ha-bottom-sheet") private _bottomSheetElement?: HaBottomSheet;
@@ -52,6 +53,7 @@ export default class HaAutomationSidebar extends LitElement {
.narrow=${this.narrow}
.disabled=${this.disabled}
.yamlMode=${this._yamlMode}
.sidebarKey=${this.sidebarKey}
@toggle-yaml-mode=${this._toggleYamlMode}
@close-sidebar=${this._handleCloseSidebar}
></ha-automation-sidebar-trigger>
@@ -67,6 +69,7 @@ export default class HaAutomationSidebar extends LitElement {
.narrow=${this.narrow}
.disabled=${this.disabled}
.yamlMode=${this._yamlMode}
.sidebarKey=${this.sidebarKey}
@toggle-yaml-mode=${this._toggleYamlMode}
@close-sidebar=${this._handleCloseSidebar}
></ha-automation-sidebar-condition>
@@ -82,6 +85,7 @@ export default class HaAutomationSidebar extends LitElement {
.narrow=${this.narrow}
.disabled=${this.disabled}
.yamlMode=${this._yamlMode}
.sidebarKey=${this.sidebarKey}
@toggle-yaml-mode=${this._toggleYamlMode}
@close-sidebar=${this._handleCloseSidebar}
></ha-automation-sidebar-action>
@@ -110,6 +114,7 @@ export default class HaAutomationSidebar extends LitElement {
.narrow=${this.narrow}
.disabled=${this.disabled}
.yamlMode=${this._yamlMode}
.sidebarKey=${this.sidebarKey}
@toggle-yaml-mode=${this._toggleYamlMode}
@close-sidebar=${this._handleCloseSidebar}
></ha-automation-sidebar-script-field-selector>
@@ -125,6 +130,7 @@ export default class HaAutomationSidebar extends LitElement {
.narrow=${this.narrow}
.disabled=${this.disabled}
.yamlMode=${this._yamlMode}
.sidebarKey=${this.sidebarKey}
@toggle-yaml-mode=${this._toggleYamlMode}
@close-sidebar=${this._handleCloseSidebar}
></ha-automation-sidebar-script-field>
@@ -197,13 +203,7 @@ export default class HaAutomationSidebar extends LitElement {
}
private _toggleYamlMode = () => {
this._yamlMode = this.config!.toggleYamlMode();
fireEvent(this, "value-changed", {
value: {
...this.config,
yamlMode: this._yamlMode,
},
});
(this.config as ActionSidebarConfig)?.toggleYamlMode();
};
static styles = css`
@@ -235,5 +235,8 @@ declare global {
interface HASSDomEvents {
"toggle-yaml-mode": undefined;
"yaml-changed": {
value: unknown;
};
}
}

4
src/panels/config/automation/manual-automation-editor.ts
View File

@@ -92,6 +92,8 @@ export class HaManualAutomationEditor extends LitElement {
@state() private _sidebarConfig?: SidebarConfig;
@state() private _sidebarKey?: string;
@query("ha-automation-sidebar") private _sidebarElement?: HaAutomationSidebar;
private _previousConfig?: ManualAutomationConfig;
@@ -287,6 +289,7 @@ export class HaManualAutomationEditor extends LitElement {
.config=${this._sidebarConfig}
@value-changed=${this._sidebarConfigChanged}
.disabled=${this.disabled}
.sidebarKey=${this._sidebarKey}
></ha-automation-sidebar>
</div>
</div>
@@ -314,6 +317,7 @@ export class HaManualAutomationEditor extends LitElement {
// deselect previous selected row
this._sidebarConfig?.close?.();
this._sidebarConfig = ev.detail;
this._sidebarKey = JSON.stringify(this._sidebarConfig);
await this._sidebarElement?.updateComplete;
this._sidebarElement?.focus();

1
src/panels/config/automation/option/ha-automation-option-row.ts
View File

@@ -395,7 +395,6 @@ export default class HaAutomationOptionRow extends LitElement {
rename: () => {
this._renameOption();
},
toggleYamlMode: () => false, // no yaml mode for options
delete: this._removeOption,
duplicate: this._duplicateOption,
defaultOption: !!this.defaultActions,

37
src/panels/config/automation/sidebar/ha-automation-sidebar-action.ts
View File

@@ -11,6 +11,7 @@ import {
} from "@mdi/js";
import { html, LitElement } from "lit";
import { customElement, property, query, state } from "lit/decorators";
import { keyed } from "lit/directives/keyed";
import { fireEvent } from "../../../../common/dom/fire_event";
import { handleStructError } from "../../../../common/structs/handle-errors";
import type { LocalizeKeys } from "../../../../common/translations/localize";
@@ -41,6 +42,8 @@ export default class HaAutomationSidebarAction extends LitElement {
@property({ type: Boolean }) public narrow = false;
@property({ attribute: "sidebar-key" }) public sidebarKey?: string;
@state() private _warnings?: string[];
@query(".sidebar-editor")
@@ -181,18 +184,22 @@ export default class HaAutomationSidebarAction extends LitElement {
</ha-md-menu-item>
${description && !this.yamlMode
? html`<div class="description">${description}</div>`
: html`<ha-automation-action-editor
class="sidebar-editor"
.hass=${this.hass}
.action=${actionConfig}
.yamlMode=${this.yamlMode}
.uiSupported=${this.config.uiSupported}
@value-changed=${this._valueChangedSidebar}
sidebar
narrow
.disabled=${this.disabled}
@ui-mode-not-available=${this._handleUiModeNotAvailable}
></ha-automation-action-editor>`}
: keyed(
this.sidebarKey,
html`<ha-automation-action-editor
class="sidebar-editor"
.hass=${this.hass}
.action=${actionConfig}
.yamlMode=${this.yamlMode}
.uiSupported=${this.config.uiSupported}
@value-changed=${this._valueChangedSidebar}
@yaml-changed=${this._yamlChangedSidebar}
sidebar
narrow
.disabled=${this.disabled}
@ui-mode-not-available=${this._handleUiModeNotAvailable}
></ha-automation-action-editor>`
)}
</ha-automation-sidebar-card>`;
}
@@ -220,6 +227,12 @@ export default class HaAutomationSidebarAction extends LitElement {
}
}
private _yamlChangedSidebar(ev: CustomEvent) {
ev.stopPropagation();
this.config?.save?.(ev.detail.value);
}
private _toggleYamlMode = () => {
fireEvent(this, "toggle-yaml-mode");
};

35
src/panels/config/automation/sidebar/ha-automation-sidebar-condition.ts
View File

@@ -11,6 +11,7 @@ import {
} from "@mdi/js";
import { html, LitElement } from "lit";
import { customElement, property, query, state } from "lit/decorators";
import { keyed } from "lit/directives/keyed";
import { fireEvent } from "../../../../common/dom/fire_event";
import { handleStructError } from "../../../../common/structs/handle-errors";
import type { ConditionSidebarConfig } from "../../../../data/automation";
@@ -35,6 +36,8 @@ export default class HaAutomationSidebarCondition extends LitElement {
@property({ type: Boolean }) public narrow = false;
@property({ attribute: "sidebar-key" }) public sidebarKey?: string;
@state() private _warnings?: string[];
@query(".sidebar-editor")
@@ -173,17 +176,21 @@ export default class HaAutomationSidebarCondition extends LitElement {
</ha-md-menu-item>
${description && !this.yamlMode
? html`<div class="description">${description}</div>`
: html`<ha-automation-condition-editor
class="sidebar-editor"
.hass=${this.hass}
.condition=${this.config.config}
.yamlMode=${this.yamlMode}
.uiSupported=${this.config.uiSupported}
@value-changed=${this._valueChangedSidebar}
.disabled=${this.disabled}
@ui-mode-not-available=${this._handleUiModeNotAvailable}
sidebar
></ha-automation-condition-editor> `}
: keyed(
this.sidebarKey,
html`<ha-automation-condition-editor
class="sidebar-editor"
.hass=${this.hass}
.condition=${this.config.config}
.yamlMode=${this.yamlMode}
.uiSupported=${this.config.uiSupported}
@value-changed=${this._valueChangedSidebar}
@yaml-changed=${this._yamlChangedSidebar}
.disabled=${this.disabled}
@ui-mode-not-available=${this._handleUiModeNotAvailable}
sidebar
></ha-automation-condition-editor>`
)}
</ha-automation-sidebar-card>`;
}
@@ -209,6 +216,12 @@ export default class HaAutomationSidebarCondition extends LitElement {
}
}
private _yamlChangedSidebar(ev: CustomEvent) {
ev.stopPropagation();
this.config?.save?.(ev.detail.value);
}
private _toggleYamlMode = () => {
fireEvent(this, "toggle-yaml-mode");
};

29
src/panels/config/automation/sidebar/ha-automation-sidebar-script-field-selector.ts
View File

@@ -1,6 +1,7 @@
import { mdiDelete, mdiPlaylistEdit } from "@mdi/js";
import { html, LitElement } from "lit";
import { customElement, property, query, state } from "lit/decorators";
import { keyed } from "lit/directives/keyed";
import { fireEvent } from "../../../../common/dom/fire_event";
import type { LocalizeKeys } from "../../../../common/translations/localize";
import type { ScriptFieldSidebarConfig } from "../../../../data/automation";
@@ -24,6 +25,8 @@ export default class HaAutomationSidebarScriptFieldSelector extends LitElement {
@property({ type: Boolean }) public narrow = false;
@property({ attribute: "sidebar-key" }) public sidebarKey?: string;
@state() private _warnings?: string[];
@query(".sidebar-editor")
@@ -81,14 +84,18 @@ export default class HaAutomationSidebarScriptFieldSelector extends LitElement {
)}
<ha-svg-icon slot="start" .path=${mdiDelete}></ha-svg-icon>
</ha-md-menu-item>
<ha-script-field-selector-editor
class="sidebar-editor"
.hass=${this.hass}
.field=${this.config.config.field}
.disabled=${this.disabled}
@value-changed=${this._valueChangedSidebar}
.yamlMode=${this.yamlMode}
></ha-script-field-selector-editor>
${keyed(
this.sidebarKey,
html`<ha-script-field-selector-editor
class="sidebar-editor"
.hass=${this.hass}
.field=${this.config.config.field}
.disabled=${this.disabled}
@value-changed=${this._valueChangedSidebar}
@yaml-changed=${this._yamlChangedSidebar}
.yamlMode=${this.yamlMode}
></ha-script-field-selector-editor>`
)}
</ha-automation-sidebar-card>`;
}
@@ -116,6 +123,12 @@ export default class HaAutomationSidebarScriptFieldSelector extends LitElement {
}
}
private _yamlChangedSidebar(ev: CustomEvent) {
ev.stopPropagation();
this.config?.save?.(ev.detail.value);
}
private _toggleYamlMode = () => {
fireEvent(this, "toggle-yaml-mode");
};

33
src/panels/config/automation/sidebar/ha-automation-sidebar-script-field.ts
View File

@@ -1,6 +1,7 @@
import { mdiDelete, mdiPlaylistEdit } from "@mdi/js";
import { html, LitElement } from "lit";
import { customElement, property, query, state } from "lit/decorators";
import { keyed } from "lit/directives/keyed";
import { fireEvent } from "../../../../common/dom/fire_event";
import type { ScriptFieldSidebarConfig } from "../../../../data/automation";
import type { HomeAssistant } from "../../../../types";
@@ -23,6 +24,8 @@ export default class HaAutomationSidebarScriptField extends LitElement {
@property({ type: Boolean }) public narrow = false;
@property({ attribute: "sidebar-key" }) public sidebarKey?: string;
@state() private _warnings?: string[];
@query(".sidebar-editor")
@@ -74,16 +77,20 @@ export default class HaAutomationSidebarScriptField extends LitElement {
)}
<ha-svg-icon slot="start" .path=${mdiDelete}></ha-svg-icon>
</ha-md-menu-item>
<ha-script-field-editor
class="sidebar-editor"
.hass=${this.hass}
.field=${this.config.config.field}
.key=${this.config.config.key}
.excludeKeys=${this.config.config.excludeKeys}
.disabled=${this.disabled}
.yamlMode=${this.yamlMode}
@value-changed=${this._valueChangedSidebar}
></ha-script-field-editor>
${keyed(
this.sidebarKey,
html`<ha-script-field-editor
class="sidebar-editor"
.hass=${this.hass}
.field=${this.config.config.field}
.key=${this.config.config.key}
.excludeKeys=${this.config.config.excludeKeys}
.disabled=${this.disabled}
.yamlMode=${this.yamlMode}
@value-changed=${this._valueChangedSidebar}
@yaml-changed=${this._yamlChangedSidebar}
></ha-script-field-editor>`
)}
</ha-automation-sidebar-card>`;
}
@@ -110,6 +117,12 @@ export default class HaAutomationSidebarScriptField extends LitElement {
}
}
private _yamlChangedSidebar(ev: CustomEvent) {
ev.stopPropagation();
this.config?.save?.(ev.detail.value);
}
private _toggleYamlMode = () => {
fireEvent(this, "toggle-yaml-mode");
};

37
src/panels/config/automation/sidebar/ha-automation-sidebar-trigger.ts
View File

@@ -11,6 +11,7 @@ import {
} from "@mdi/js";
import { html, LitElement, nothing } from "lit";
import { customElement, property, query, state } from "lit/decorators";
import { keyed } from "lit/directives/keyed";
import { fireEvent } from "../../../../common/dom/fire_event";
import { handleStructError } from "../../../../common/structs/handle-errors";
import type { TriggerSidebarConfig } from "../../../../data/automation";
@@ -35,6 +36,8 @@ export default class HaAutomationSidebarTrigger extends LitElement {
@property({ type: Boolean }) public narrow = false;
@property({ attribute: "sidebar-key" }) public sidebarKey?: string;
@state() private _requestShowId = false;
@state() private _warnings?: string[];
@@ -183,18 +186,22 @@ export default class HaAutomationSidebarTrigger extends LitElement {
)}
<ha-svg-icon slot="start" .path=${mdiDelete}></ha-svg-icon>
</ha-md-menu-item>
<ha-automation-trigger-editor
class="sidebar-editor"
.hass=${this.hass}
.trigger=${this.config.config}
@value-changed=${this._valueChangedSidebar}
.uiSupported=${this.config.uiSupported}
.showId=${this._requestShowId}
.yamlMode=${this.yamlMode}
.disabled=${this.disabled}
@ui-mode-not-available=${this._handleUiModeNotAvailable}
sidebar
></ha-automation-trigger-editor>
${keyed(
this.sidebarKey,
html`<ha-automation-trigger-editor
class="sidebar-editor"
.hass=${this.hass}
.trigger=${this.config.config}
@value-changed=${this._valueChangedSidebar}
@yaml-changed=${this._yamlChangedSidebar}
.uiSupported=${this.config.uiSupported}
.showId=${this._requestShowId}
.yamlMode=${this.yamlMode}
.disabled=${this.disabled}
@ui-mode-not-available=${this._handleUiModeNotAvailable}
sidebar
></ha-automation-trigger-editor>`
)}
</ha-automation-sidebar-card>
`;
}
@@ -221,6 +228,12 @@ export default class HaAutomationSidebarTrigger extends LitElement {
}
}
private _yamlChangedSidebar(ev: CustomEvent) {
ev.stopPropagation();
this.config?.save?.(ev.detail.value);
}
private _toggleYamlMode = () => {
fireEvent(this, "toggle-yaml-mode");
};

2
src/panels/config/automation/trigger/ha-automation-trigger-editor.ts
View File

@@ -121,7 +121,7 @@ export default class HaAutomationTriggerEditor extends LitElement {
if (!ev.detail.isValid) {
return;
}
fireEvent(this, "value-changed", {
fireEvent(this, "yaml-changed", {
value: migrateAutomationTrigger(ev.detail.value),
});
}

2
src/panels/config/automation/trigger/ha-automation-trigger-row.ts
View File

@@ -494,7 +494,7 @@ export default class HaAutomationTriggerRow extends LitElement {
},
toggleYamlMode: () => {
this._toggleYamlMode();
return this._yamlMode;
this.openSidebar();
},
disable: this._onDisable,
delete: this._onDelete,

9
src/panels/config/script/ha-script-field-editor.ts
View File

@@ -152,7 +152,12 @@ export default class HaScriptFieldEditor extends LitElement {
ev.stopPropagation();
const value = { ...ev.detail.value };
if (typeof value !== "object" || Object.keys(value).length !== 1) {
if (
typeof value !== "object" ||
Object.keys(value).length !== 1 ||
!value[Object.keys(value)[0]] ||
!value[Object.keys(value)[0]].selector
) {
this._yamlError = "yaml_error";
return;
}
@@ -165,7 +170,7 @@ export default class HaScriptFieldEditor extends LitElement {
const newValue = { ...value[key], key };
fireEvent(this, "value-changed", { value: newValue });
fireEvent(this, "yaml-changed", { value: newValue });
}
private _computeLabelCallback = (

2
src/panels/config/script/ha-script-field-row.ts
View File

@@ -218,7 +218,7 @@ export default class HaScriptFieldRow extends LitElement {
},
toggleYamlMode: () => {
this._toggleYamlMode();
return this._yamlMode;
this.openSidebar();
},
delete: this._onDelete,
config: {

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

@@ -132,7 +132,7 @@ export default class HaScriptFieldSelectorEditor extends LitElement {
return;
}
fireEvent(this, "value-changed", { value });
fireEvent(this, "yaml-changed", { value });
}
private _computeLabelCallback = (

4
src/panels/config/script/manual-script-editor.ts
View File

@@ -73,6 +73,8 @@ export class HaManualScriptEditor extends LitElement {
@state() private _sidebarConfig?: SidebarConfig;
@state() private _sidebarKey?: string;
@query("ha-script-fields")
private _scriptFields?: HaScriptFields;
@@ -223,6 +225,7 @@ export class HaManualScriptEditor extends LitElement {
</div>
<div class="sidebar-positioner">
<ha-automation-sidebar
.sidebarKey=${this._sidebarKey}
tabindex="-1"
class=${classMap({ hidden: !this._sidebarConfig })}
.narrow=${this.narrow}
@@ -463,6 +466,7 @@ export class HaManualScriptEditor extends LitElement {
// deselect previous selected row
this._sidebarConfig?.close?.();
this._sidebarConfig = ev.detail;
this._sidebarKey = JSON.stringify(this._sidebarConfig);
await this._sidebarElement?.updateComplete;
this._sidebarElement?.focus();