Change take control of blueprint UX (#21254)

* Change take control of blueprint UX

* Add margin to ha-alert

---------

Co-authored-by: Paul Bottein <paul.bottein@gmail.com>
This commit is contained in:
Bram Kragten 2024-07-02 21:18:58 +02:00 committed by GitHub
parent 09accb3071
commit 9a2051a679
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
8 changed files with 130 additions and 153 deletions

View File

@ -20,14 +20,6 @@ export class HaBlueprintAutomationEditor extends HaBlueprintGenericEditor {
protected render() {
return html`
${this.disabled
? html`<ha-alert alert-type="warning">
${this.hass.localize("ui.panel.config.automation.editor.read_only")}
<mwc-button slot="action" @click=${this._duplicate}>
${this.hass.localize("ui.panel.config.automation.editor.migrate")}
</mwc-button>
</ha-alert>`
: nothing}
${this.stateObj?.state === "off"
? html`
<ha-alert alert-type="info">

View File

@ -81,9 +81,9 @@ declare global {
unsub?: UnsubscribeFunc;
};
"ui-mode-not-available": Error;
duplicate: undefined;
"move-down": undefined;
"move-up": undefined;
duplicate: undefined;
}
}
@ -116,6 +116,8 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
@state() private _validationErrors?: (string | TemplateResult)[];
@state() private _blueprintConfig?: BlueprintAutomationConfig;
private _configSubscriptions: Record<
string,
(config?: AutomationConfig) => void
@ -200,7 +202,9 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
<ha-list-item
graphic="icon"
@click=${this._promptAutomationAlias}
.disabled=${!this.automationId || this._mode === "yaml"}
.disabled=${this._readOnly ||
!this.automationId ||
this._mode === "yaml"}
>
${this.hass.localize("ui.panel.config.automation.editor.rename")}
<ha-svg-icon slot="graphic" .path=${mdiRenameBox}></ha-svg-icon>
@ -224,7 +228,8 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
: nothing}
<ha-list-item
.disabled=${!this._readOnly && !this.automationId}
.disabled=${this._blueprintConfig ||
(!this._readOnly && !this.automationId)}
graphic="icon"
@click=${this._duplicate}
>
@ -244,7 +249,7 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
<ha-list-item
graphic="icon"
@click=${this._takeControl}
.disabled=${this._readOnly || this._mode === "yaml"}
.disabled=${this._readOnly}
>
${this.hass.localize(
"ui.panel.config.automation.editor.take_control"
@ -337,6 +342,32 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
: nothing}
</ha-alert>`
: ""}
${this._blueprintConfig
? html`<ha-alert alert-type="info">
${this.hass.localize(
"ui.panel.config.automation.editor.confirm_take_control"
)}
<div slot="action" style="display: flex;">
<mwc-button @click=${this._takeControlSave}
>${this.hass.localize("ui.common.yes")}</mwc-button
>
<mwc-button @click=${this._revertBlueprint}
>${this.hass.localize("ui.common.no")}</mwc-button
>
</div>
</ha-alert>`
: this._readOnly
? html`<ha-alert alert-type="warning" dismissable
>${this.hass.localize(
"ui.panel.config.automation.editor.read_only"
)}
<mwc-button slot="action" @click=${this._duplicate}>
${this.hass.localize(
"ui.panel.config.automation.editor.migrate"
)}
</mwc-button>
</ha-alert>`
: nothing}
${this._mode === "gui"
? html`
<div
@ -354,7 +385,6 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
.config=${this._config}
.disabled=${Boolean(this._readOnly)}
@value-changed=${this._valueChanged}
@duplicate=${this._duplicate}
></blueprint-automation-editor>
`
: html`
@ -366,25 +396,12 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
.config=${this._config}
.disabled=${Boolean(this._readOnly)}
@value-changed=${this._valueChanged}
@duplicate=${this._duplicate}
></manual-automation-editor>
`}
</div>
`
: this._mode === "yaml"
? html` ${this._readOnly
? html`<ha-alert alert-type="warning">
${this.hass.localize(
"ui.panel.config.automation.editor.read_only"
)}
<mwc-button slot="action" @click=${this._duplicate}>
${this.hass.localize(
"ui.panel.config.automation.editor.migrate"
)}
</mwc-button>
</ha-alert>`
: nothing}
${stateObj?.state === "off"
? html`${stateObj?.state === "off"
? html`
<ha-alert alert-type="info">
${this.hass.localize(
@ -409,7 +426,7 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
</div>
<ha-fab
slot="fab"
class=${classMap({ dirty: this._dirty })}
class=${classMap({ dirty: !this._readOnly && this._dirty })}
.label=${this.hass.localize("ui.panel.config.automation.editor.save")}
extended
@click=${this._saveAutomation}
@ -651,20 +668,6 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
private async _takeControl() {
const config = this._config as BlueprintAutomationConfig;
const confirmation = await showConfirmationDialog(this, {
title: this.hass!.localize(
"ui.panel.config.automation.editor.take_control_confirmation.title"
),
text: this.hass!.localize(
"ui.panel.config.automation.editor.take_control_confirmation.text"
),
confirmText: this.hass!.localize(
"ui.panel.config.automation.editor.take_control_confirmation.action"
),
});
if (!confirmation) return;
try {
const result = await substituteBlueprint(
this.hass,
@ -675,18 +678,38 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
const newConfig = {
...normalizeAutomationConfig(result.substituted_config),
id: config.id,
alias: config.alias,
description: config.description,
};
this._blueprintConfig = config;
this._config = newConfig;
this._dirty = true;
if (this._mode === "yaml") {
this.renderRoot.querySelector("ha-yaml-editor")?.setValue(this._config);
}
this._readOnly = true;
this._errors = undefined;
} catch (err: any) {
this._errors = err.message;
}
}
private _revertBlueprint() {
this._config = this._blueprintConfig;
if (this._mode === "yaml") {
this.renderRoot.querySelector("ha-yaml-editor")?.setValue(this._config);
}
this._blueprintConfig = undefined;
this._readOnly = false;
}
private _takeControlSave() {
this._readOnly = false;
this._dirty = true;
this._blueprintConfig = undefined;
}
private async _duplicate() {
const result = this._readOnly
? await showConfirmationDialog(this, {
@ -819,10 +842,12 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
padding-bottom: 0;
}
manual-automation-editor,
blueprint-automation-editor {
blueprint-automation-editor,
:not(.yaml-mode) > ha-alert {
margin: 0 auto;
max-width: 1040px;
padding: 28px 20px 0;
display: block;
}
ha-yaml-editor {
flex-grow: 1;

View File

@ -38,14 +38,6 @@ export class HaManualAutomationEditor extends LitElement {
protected render() {
return html`
${this.disabled
? html`<ha-alert alert-type="warning">
${this.hass.localize("ui.panel.config.automation.editor.read_only")}
<mwc-button slot="action" @click=${this._duplicate}>
${this.hass.localize("ui.panel.config.automation.editor.migrate")}
</mwc-button>
</ha-alert>`
: nothing}
${this.stateObj?.state === "off"
? html`
<ha-alert alert-type="info">
@ -238,10 +230,6 @@ export class HaManualAutomationEditor extends LitElement {
});
}
private _duplicate() {
fireEvent(this, "duplicate");
}
static get styles(): CSSResultGroup {
return [
haStyle,
@ -280,12 +268,6 @@ export class HaManualAutomationEditor extends LitElement {
font-weight: normal;
line-height: 0;
}
ha-alert.re-order {
display: block;
margin-bottom: 16px;
border-radius: var(--ha-card-border-radius, 12px);
overflow: hidden;
}
`,
];
}

View File

@ -3,7 +3,6 @@ import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import { fireEvent } from "../../../common/dom/fire_event";
import { nestedArrayMove } from "../../../common/util/array-move";
import "../../../components/ha-alert";
import "../../../components/ha-blueprint-picker";
import "../../../components/ha-card";
import "../../../components/ha-circular-progress";
@ -126,14 +125,14 @@ export abstract class HaBlueprintGenericEditor extends LitElement {
);
const expanded = !section.collapsed || anyRequired;
return html` <ha-expansion-panel
return html`<ha-expansion-panel
outlined
.expanded=${expanded}
.noCollapse=${anyRequired}
>
<div slot="header" role="heading" aria-level="3" class="section-header">
${section?.icon
? html` <ha-icon
? html`<ha-icon
class="section-header"
.icon=${section.icon}
></ha-icon>`
@ -261,10 +260,6 @@ export abstract class HaBlueprintGenericEditor extends LitElement {
});
}
protected _duplicate() {
fireEvent(this, "duplicate");
}
static get styles(): CSSResultGroup {
return [
haStyle,
@ -318,14 +313,6 @@ export abstract class HaBlueprintGenericEditor extends LitElement {
margin-left: 8px;
margin-right: 8px;
}
ha-alert {
margin-bottom: 16px;
display: block;
}
ha-alert.re-order {
border-radius: var(--ha-card-border-radius, 12px);
overflow: hidden;
}
div.section-header {
display: flex;
vertical-align: middle;
@ -333,6 +320,10 @@ export abstract class HaBlueprintGenericEditor extends LitElement {
ha-icon.section-header {
padding-right: 10px;
}
ha-alert {
display: block;
margin-bottom: 16px;
}
`,
];
}

View File

@ -1,7 +1,6 @@
import "@material/mwc-button/mwc-button";
import { html, nothing } from "lit";
import { customElement, property } from "lit/decorators";
import "../../../components/ha-alert";
import "../../../components/ha-markdown";
import { fetchBlueprints } from "../../../data/blueprint";
import { BlueprintScriptConfig } from "../../../data/script";
@ -17,14 +16,6 @@ export class HaBlueprintScriptEditor extends HaBlueprintGenericEditor {
protected render() {
return html`
${this.disabled
? html`<ha-alert alert-type="warning">
${this.hass.localize("ui.panel.config.script.editor.read_only")}
<mwc-button slot="action" @click=${this._duplicate}>
${this.hass.localize("ui.panel.config.script.editor.migrate")}
</mwc-button>
</ha-alert>`
: nothing}
${this.config.description
? html`<ha-markdown
class="description"

View File

@ -99,6 +99,8 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
@state() private _validationErrors?: (string | TemplateResult)[];
@state() private _blueprintConfig?: BlueprintScriptConfig;
protected render(): TemplateResult | typeof nothing {
if (!this._config) {
return nothing;
@ -216,7 +218,8 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
: nothing}
<ha-list-item
.disabled=${!this._readOnly && !this.scriptId}
.disabled=${this._blueprintConfig ||
(!this._readOnly && !this.scriptId)}
graphic="icon"
@click=${this._duplicate}
>
@ -236,7 +239,7 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
<ha-list-item
graphic="icon"
@click=${this._takeControl}
.disabled=${this._readOnly || this._mode === "yaml"}
.disabled=${this._readOnly}
>
${this.hass.localize(
"ui.panel.config.script.editor.take_control"
@ -312,6 +315,32 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
: nothing}
</ha-alert>`
: ""}
${this._blueprintConfig
? html`<ha-alert alert-type="info">
${this.hass.localize(
"ui.panel.config.script.editor.confirm_take_control"
)}
<div slot="action" style="display: flex;">
<mwc-button @click=${this._takeControlSave}
>${this.hass.localize("ui.common.yes")}</mwc-button
>
<mwc-button @click=${this._revertBlueprint}
>${this.hass.localize("ui.common.no")}</mwc-button
>
</div>
</ha-alert>`
: this._readOnly
? html`<ha-alert alert-type="warning" dismissable
>${this.hass.localize(
"ui.panel.config.script.editor.read_only"
)}
<mwc-button slot="action" @click=${this._duplicate}>
${this.hass.localize(
"ui.panel.config.script.editor.migrate"
)}
</mwc-button>
</ha-alert>`
: nothing}
${this._mode === "gui"
? html`
<div
@ -328,7 +357,6 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
.config=${this._config}
.disabled=${this._readOnly}
@value-changed=${this._valueChanged}
@duplicate=${this._duplicate}
></blueprint-script-editor>
`
: html`
@ -339,31 +367,18 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
.config=${this._config}
.disabled=${this._readOnly}
@value-changed=${this._valueChanged}
@duplicate=${this._duplicate}
></manual-script-editor>
`}
</div>
`
: this._mode === "yaml"
? html` ${this._readOnly
? html`<ha-alert alert-type="warning">
${this.hass.localize(
"ui.panel.config.script.editor.read_only"
)}
<mwc-button slot="action" @click=${this._duplicate}>
${this.hass.localize(
"ui.panel.config.script.editor.migrate"
)}
</mwc-button>
</ha-alert>`
: nothing}
<ha-yaml-editor
copyClipboard
.hass=${this.hass}
.defaultValue=${this._preprocessYaml()}
.readOnly=${this._readOnly}
@value-changed=${this._yamlChanged}
></ha-yaml-editor>`
? html`<ha-yaml-editor
copyClipboard
.hass=${this.hass}
.defaultValue=${this._preprocessYaml()}
.readOnly=${this._readOnly}
@value-changed=${this._yamlChanged}
></ha-yaml-editor>`
: nothing}
</div>
<ha-fab
@ -625,20 +640,6 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
private async _takeControl() {
const config = this._config as BlueprintScriptConfig;
const confirmation = await showConfirmationDialog(this, {
title: this.hass!.localize(
"ui.panel.config.script.editor.take_control_confirmation.title"
),
text: this.hass!.localize(
"ui.panel.config.script.editor.take_control_confirmation.text"
),
confirmText: this.hass!.localize(
"ui.panel.config.script.editor.take_control_confirmation.action"
),
});
if (!confirmation) return;
try {
const result = await substituteBlueprint(
this.hass,
@ -653,14 +654,33 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
description: config.description,
};
this._blueprintConfig = config;
this._config = newConfig;
this._dirty = true;
if (this._mode === "yaml") {
this.renderRoot.querySelector("ha-yaml-editor")?.setValue(this._config);
}
this._readOnly = true;
this._errors = undefined;
} catch (err: any) {
this._errors = err.message;
}
}
private _revertBlueprint() {
this._config = this._blueprintConfig;
if (this._mode === "yaml") {
this.renderRoot.querySelector("ha-yaml-editor")?.setValue(this._config);
}
this._blueprintConfig = undefined;
this._readOnly = false;
}
private _takeControlSave() {
this._readOnly = false;
this._dirty = true;
this._blueprintConfig = undefined;
}
private async _duplicate() {
const result = this._readOnly
? await showConfirmationDialog(this, {
@ -812,10 +832,12 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
}
.config-container,
manual-script-editor,
blueprint-script-editor {
blueprint-script-editor,
:not(.yaml-mode) > ha-alert {
margin: 0 auto;
max-width: 1040px;
padding: 28px 20px 0;
display: block;
}
.config-container ha-alert {
margin-bottom: 16px;

View File

@ -60,14 +60,6 @@ export class HaManualScriptEditor extends LitElement {
protected render() {
return html`
${this.disabled
? html`<ha-alert alert-type="warning">
${this.hass.localize("ui.panel.config.script.editor.read_only")}
<mwc-button slot="action" @click=${this._duplicate}>
${this.hass.localize("ui.panel.config.script.editor.migrate")}
</mwc-button>
</ha-alert>`
: nothing}
${this.config.description
? html`<ha-markdown
class="description"
@ -170,10 +162,6 @@ export class HaManualScriptEditor extends LitElement {
});
}
private _duplicate() {
fireEvent(this, "duplicate");
}
static get styles(): CSSResultGroup {
return [
haStyle,
@ -205,12 +193,6 @@ export class HaManualScriptEditor extends LitElement {
.header a {
color: var(--secondary-text-color);
}
ha-alert.re-order {
display: block;
margin-bottom: 16px;
border-radius: var(--ha-card-border-radius, 12px);
overflow: hidden;
}
`,
];
}

View File

@ -2771,11 +2771,7 @@
"migrate": "Migrate",
"duplicate": "[%key:ui::common::duplicate%]",
"take_control": "Take control",
"take_control_confirmation": {
"title": "Take control of automation?",
"text": "This automation is based on a blueprint. You are about to take control, which will separate it from the blueprint and give you the ability to fully edit the automation. Would you like to proceed?",
"action": "Take control"
},
"confirm_take_control": "Your are viewing a preview of the automation config, do you want to take control?",
"run": "[%key:ui::panel::config::automation::editor::actions::run%]",
"rename": "[%key:ui::panel::config::automation::editor::triggers::rename%]",
"show_trace": "Traces",
@ -3648,11 +3644,7 @@
"rename": "[%key:ui::panel::config::automation::editor::triggers::rename%]",
"change_mode": "[%key:ui::panel::config::automation::editor::change_mode%]",
"take_control": "[%key:ui::panel::config::automation::editor::take_control%]",
"take_control_confirmation": {
"title": "Take control of script?",
"text": "This script is based on a blueprint. You are about to take control, which will separate it from the blueprint and give you the ability to fully edit the script. Would you like to proceed?",
"action": "[%key:ui::panel::config::automation::editor::take_control_confirmation::action%]"
},
"confirm_take_control": "Your are viewing a preview of the script config, do you want to take control?",
"read_only": "This script cannot be edited from the UI, because it is not stored in the ''scripts.yaml'' file.",
"unavailable": "Script is unavailable",
"migrate": "Migrate",