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>

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

@@ -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">

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

@@ -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`${stateObj?.state === "off"
-                    ? 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`
                         <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;

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

@@ -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;
-        }
       `,
     ];
   }

src/panels/config/blueprint/blueprint-generic-editor.ts

@@ -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;
+        }
       `,
     ];
   }

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

@@ -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"

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

@@ -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-yaml-editor
-                    ? html`<ha-alert alert-type="warning">
+                  copyClipboard
-                        ${this.hass.localize(
+                  .hass=${this.hass}
-                          "ui.panel.config.script.editor.read_only"
+                  .defaultValue=${this._preprocessYaml()}
-                        )}
+                  .readOnly=${this._readOnly}
-                        <mwc-button slot="action" @click=${this._duplicate}>
+                  @value-changed=${this._yamlChanged}
-                          ${this.hass.localize(
+                ></ha-yaml-editor>`
-                            "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>`
               : 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;

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

@@ -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;
-        }
       `,
     ];
   }

src/translations/en.json

@@ -2771,11 +2771,7 @@
             "migrate": "Migrate",
             "duplicate": "[%key:ui::common::duplicate%]",
             "take_control": "Take control",
-            "take_control_confirmation": {
+            "confirm_take_control": "Your are viewing a preview of the automation config, do you want to take control?",
-              "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"
-            },
             "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": {
+            "confirm_take_control": "Your are viewing a preview of the script config, do you want to take control?",
-              "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%]"
-            },
             "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",