Skip to content

Commit

Permalink
Change take control of blueprint UX (#21254)
Browse files Browse the repository at this point in the history 
* Change take control of blueprint UX

* Add margin to ha-alert

---------

Co-authored-by: Paul Bottein <[email protected]>
  • Loading branch information
@bramkragten @piitaya
bramkragten and piitaya authored Jul 2, 2024
1 parent 09accb3 commit 9a2051a
Show file tree
Hide file tree
Showing 8 changed files with 130 additions and 153 deletions.
8 changes: 0 additions & 8 deletions src/panels/config/automation/blueprint-automation-editor.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
97 changes: 61 additions & 36 deletions src/panels/config/automation/ha-automation-editor.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,9 +81,9 @@ declare global {
unsub?: UnsubscribeFunc;
};
"ui-mode-not-available": Error;
duplicate: undefined;
"move-down": undefined;
"move-up": undefined;
duplicate: undefined;
}
}

Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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>
Expand All @@ -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}
>
Expand All @@ -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"
Expand Down Expand Up @@ -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
Expand All @@ -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`
Expand All @@ -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(
Expand All @@ -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}
Expand Down Expand Up @@ -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,
Expand All @@ -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, {
Expand Down Expand Up @@ -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;
Expand Down
18 changes: 0 additions & 18 deletions src/panels/config/automation/manual-automation-editor.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -238,10 +230,6 @@ export class HaManualAutomationEditor extends LitElement {
});
}

private _duplicate() {
fireEvent(this, "duplicate");
}

static get styles(): CSSResultGroup {
return [
haStyle,
Expand Down Expand Up @@ -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;
}
`,
];
}
Expand Down
21 changes: 6 additions & 15 deletions src/panels/config/blueprint/blueprint-generic-editor.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -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>`
Expand Down Expand Up @@ -261,10 +260,6 @@ export abstract class HaBlueprintGenericEditor extends LitElement {
});
}

protected _duplicate() {
fireEvent(this, "duplicate");
}

static get styles(): CSSResultGroup {
return [
haStyle,
Expand Down Expand Up @@ -318,21 +313,17 @@ 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;
}
ha-icon.section-header {
padding-right: 10px;
}
ha-alert {
display: block;
margin-bottom: 16px;
}
`,
];
}
Expand Down
9 changes: 0 additions & 9 deletions src/panels/config/script/blueprint-script-editor.ts
View file
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -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"
Expand Down
Loading

0 comments on commit 9a2051a

Please sign in to comment.