Some fixes for script picker and editor (#13635)

* Show error when user try to delete or duplicate yaml only script

* Use same layout as automation

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

@@ -45,13 +45,14 @@ export class HaBlueprintScriptEditor extends LitElement {
 
   protected render() {
     const blueprint = this._blueprint;
-    return html` <ha-config-section vertical .isWide=${this.isWide}>
+    return html`
-      <span slot="header"
+      <ha-card
-        >${this.hass.localize(
+        outlined
+        class="blueprint"
+        .header=${this.hass.localize(
           "ui.panel.config.automation.editor.blueprint.header"
-        )}</span
+        )}
       >
-      <ha-card outlined>
         <div class="blueprint-picker-container">
           ${this._blueprints
             ? Object.keys(this._blueprints).length
@@ -118,7 +119,7 @@ export class HaBlueprintScriptEditor extends LitElement {
                   </p>`}`
           : ""}
       </ha-card>
-    </ha-config-section>`;
+    `;
   }
 
   private async _getBlueprints() {
@@ -173,22 +174,50 @@ export class HaBlueprintScriptEditor extends LitElement {
     return [
       haStyle,
       css`
+        :host {
+          display: block;
+        }
+        ha-card.blueprint {
+          margin: 0 auto;
+        }
         .padding {
           padding: 16px;
         }
+        .link-button-row {
+          padding: 14px;
+        }
         .blueprint-picker-container {
-          padding: 16px;
+          padding: 0 16px 16px;
+        }
+        ha-textfield,
+        ha-blueprint-picker {
+          display: block;
+        }
+        h3 {
+          margin: 16px;
+        }
+        .introduction {
+          margin-top: 0;
+          margin-bottom: 12px;
+        }
+        .introduction a {
+          color: var(--primary-color);
         }
         p {
           margin-bottom: 0;
         }
+        .description {
+          margin-bottom: 16px;
+        }
         ha-settings-row {
           --paper-time-input-justify-content: flex-end;
+          --settings-row-content-width: 100%;
+          --settings-row-prefix-display: contents;
           border-top: 1px solid var(--divider-color);
         }
-        :host(:not([narrow])) ha-settings-row ha-textfield,
+        ha-alert {
-        :host(:not([narrow])) ha-settings-row ha-selector {
+          margin-bottom: 16px;
-          width: 60%;
+          display: block;
         }
       `,
     ];

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

@@ -270,6 +270,7 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
                 >
                   ${this._config
                     ? html`
+                        <div class="config-container">
                           <ha-card outlined>
                             <div class="card-content">
                               <ha-form
@@ -311,6 +312,7 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
                                 `
                               : ``}
                           </ha-card>
+                        </div>
 
                         ${"use_blueprint" in this._config
                           ? html`
@@ -323,6 +325,7 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
                               ></blueprint-script-editor>
                             `
                           : html`
+                              <div class="sequence-container">
                                 <div class="header">
                                   <h2 id="sequence-heading" class="name">
                                     ${this.hass.localize(
@@ -353,6 +356,7 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
                                   @value-changed=${this._sequenceChanged}
                                   .hass=${this.hass}
                                 ></ha-automation-action>
+                              </div>
                             `}
                       `
                     : ""}
@@ -787,15 +791,19 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
           font-weight: bold;
           color: var(--error-color);
         }
-        .content {
-          padding: 16px 16px 20px;
-        }
         .yaml-mode {
           height: 100%;
           display: flex;
           flex-direction: column;
           padding-bottom: 0;
         }
+        blueprint-script-editor,
+        .config-container,
+        .sequence-container {
+          margin: 0 auto;
+          max-width: 1040px;
+          padding: 28px 20px 0;
+        }
         ha-yaml-editor {
           flex-grow: 1;
           --code-mirror-height: 100%;

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

@@ -290,6 +290,7 @@ class HaScriptPicker extends LitElement {
   }
 
   private async _duplicate(script: any) {
+    try {
       const config = await getScriptConfig(
         this.hass,
         computeObjectId(script.entity_id)
@@ -300,6 +301,20 @@ class HaScriptPicker extends LitElement {
           "ui.panel.config.script.picker.duplicate"
         )})`,
       });
+    } catch (err: any) {
+      await showAlertDialog(this, {
+        text:
+          err.status_code === 404
+            ? this.hass.localize(
+                "ui.panel.config.script.editor.load_error_not_duplicable"
+              )
+            : this.hass.localize(
+                "ui.panel.config.script.editor.load_error_unknown",
+                "err_no",
+                err.status_code
+              ),
+      });
+    }
   }
 
   private async _deleteConfirm(script: any) {
@@ -312,7 +327,22 @@ class HaScriptPicker extends LitElement {
   }
 
   private async _delete(script: any) {
+    try {
       await deleteScript(this.hass, computeObjectId(script.entity_id));
+    } catch (err: any) {
+      await showAlertDialog(this, {
+        text:
+          err.status_code === 400
+            ? this.hass.localize(
+                "ui.panel.config.script.editor.load_error_not_deletable"
+              )
+            : this.hass.localize(
+                "ui.panel.config.script.editor.load_error_unknown",
+                "err_no",
+                err.status_code
+              ),
+      });
+    }
   }
 
   static get styles(): CSSResultGroup {

src/translations/en.json

@@ -2303,6 +2303,8 @@
               "parallel": "Max number of parallel runs"
             },
             "load_error_not_editable": "Only scripts inside scripts.yaml are editable.",
+            "load_error_not_duplicable": "Only scripts in scripts.yaml can be duplicated.",
+            "load_error_not_deletable": "Only scripts in scripts.yaml can be deleted.",
             "load_error_unknown": "Error loading script ({err_no}).",
             "delete_confirm": "Are you sure you want to delete this script?",
             "save_script": "Save script",