From d1964e92ea049194c8a0a3cbecaa07ce17611a8c Mon Sep 17 00:00:00 2001
From: Paul Bottein <paul.bottein@gmail.com>
Date: Wed, 7 Sep 2022 13:47:24 +0200
Subject: [PATCH] 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
---
 .../config/script/blueprint-script-editor.ts  |  49 ++++--
 src/panels/config/script/ha-script-editor.ts  | 144 +++++++++---------
 src/panels/config/script/ha-script-picker.ts  |  52 +++++--
 src/translations/en.json                      |   2 +
 4 files changed, 158 insertions(+), 89 deletions(-)

diff --git a/src/panels/config/script/blueprint-script-editor.ts b/src/panels/config/script/blueprint-script-editor.ts
index fe99110f00..fac3a7873e 100644
--- a/src/panels/config/script/blueprint-script-editor.ts
+++ b/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}>
-      <span slot="header"
-        >${this.hass.localize(
+    return html`
+      <ha-card
+        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,
-        :host(:not([narrow])) ha-settings-row ha-selector {
-          width: 60%;
+        ha-alert {
+          margin-bottom: 16px;
+          display: block;
         }
       `,
     ];
diff --git a/src/panels/config/script/ha-script-editor.ts b/src/panels/config/script/ha-script-editor.ts
index f7803ef429..171acbf5a3 100644
--- a/src/panels/config/script/ha-script-editor.ts
+++ b/src/panels/config/script/ha-script-editor.ts
@@ -270,47 +270,49 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
                 >
                   ${this._config
                     ? html`
-                        <ha-card outlined>
-                          <div class="card-content">
-                            <ha-form
-                              .schema=${schema}
-                              .data=${data}
-                              .hass=${this.hass}
-                              .computeLabel=${this._computeLabelCallback}
-                              .computeHelper=${this._computeHelperCallback}
-                              @value-changed=${this._valueChanged}
-                            ></ha-form>
-                          </div>
-                          ${this.scriptEntityId
-                            ? html`
-                                <div
-                                  class="card-actions layout horizontal justified center"
-                                >
-                                  <a
-                                    href="/config/script/trace/${this
-                                      .scriptEntityId}"
+                        <div class="config-container">
+                          <ha-card outlined>
+                            <div class="card-content">
+                              <ha-form
+                                .schema=${schema}
+                                .data=${data}
+                                .hass=${this.hass}
+                                .computeLabel=${this._computeLabelCallback}
+                                .computeHelper=${this._computeHelperCallback}
+                                @value-changed=${this._valueChanged}
+                              ></ha-form>
+                            </div>
+                            ${this.scriptEntityId
+                              ? html`
+                                  <div
+                                    class="card-actions layout horizontal justified center"
                                   >
-                                    <mwc-button>
+                                    <a
+                                      href="/config/script/trace/${this
+                                        .scriptEntityId}"
+                                    >
+                                      <mwc-button>
+                                        ${this.hass.localize(
+                                          "ui.panel.config.script.editor.show_trace"
+                                        )}
+                                      </mwc-button>
+                                    </a>
+                                    <mwc-button
+                                      @click=${this._runScript}
+                                      title=${this.hass.localize(
+                                        "ui.panel.config.script.picker.run_script"
+                                      )}
+                                      ?disabled=${this._dirty}
+                                    >
                                       ${this.hass.localize(
-                                        "ui.panel.config.script.editor.show_trace"
+                                        "ui.panel.config.script.picker.run_script"
                                       )}
                                     </mwc-button>
-                                  </a>
-                                  <mwc-button
-                                    @click=${this._runScript}
-                                    title=${this.hass.localize(
-                                      "ui.panel.config.script.picker.run_script"
-                                    )}
-                                    ?disabled=${this._dirty}
-                                  >
-                                    ${this.hass.localize(
-                                      "ui.panel.config.script.picker.run_script"
-                                    )}
-                                  </mwc-button>
-                                </div>
-                              `
-                            : ``}
-                        </ha-card>
+                                  </div>
+                                `
+                              : ``}
+                          </ha-card>
+                        </div>
 
                         ${"use_blueprint" in this._config
                           ? html`
@@ -323,36 +325,38 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
                               ></blueprint-script-editor>
                             `
                           : html`
-                              <div class="header">
-                                <h2 id="sequence-heading" class="name">
-                                  ${this.hass.localize(
-                                    "ui.panel.config.script.editor.sequence"
-                                  )}
-                                </h2>
-                                <a
-                                  href=${documentationUrl(
-                                    this.hass,
-                                    "/docs/scripts/"
-                                  )}
-                                  target="_blank"
-                                  rel="noreferrer"
-                                >
-                                  <ha-icon-button
-                                    .path=${mdiHelpCircle}
-                                    .label=${this.hass.localize(
-                                      "ui.panel.config.script.editor.link_available_actions"
+                              <div class="sequence-container">
+                                <div class="header">
+                                  <h2 id="sequence-heading" class="name">
+                                    ${this.hass.localize(
+                                      "ui.panel.config.script.editor.sequence"
                                     )}
-                                  ></ha-icon-button>
-                                </a>
-                              </div>
+                                  </h2>
+                                  <a
+                                    href=${documentationUrl(
+                                      this.hass,
+                                      "/docs/scripts/"
+                                    )}
+                                    target="_blank"
+                                    rel="noreferrer"
+                                  >
+                                    <ha-icon-button
+                                      .path=${mdiHelpCircle}
+                                      .label=${this.hass.localize(
+                                        "ui.panel.config.script.editor.link_available_actions"
+                                      )}
+                                    ></ha-icon-button>
+                                  </a>
+                                </div>
 
-                              <ha-automation-action
-                                role="region"
-                                aria-labelledby="sequence-heading"
-                                .actions=${this._config.sequence}
-                                @value-changed=${this._sequenceChanged}
-                                .hass=${this.hass}
-                              ></ha-automation-action>
+                                <ha-automation-action
+                                  role="region"
+                                  aria-labelledby="sequence-heading"
+                                  .actions=${this._config.sequence}
+                                  @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%;
diff --git a/src/panels/config/script/ha-script-picker.ts b/src/panels/config/script/ha-script-picker.ts
index 217a86359e..223a58ccf2 100644
--- a/src/panels/config/script/ha-script-picker.ts
+++ b/src/panels/config/script/ha-script-picker.ts
@@ -290,16 +290,31 @@ class HaScriptPicker extends LitElement {
   }
 
   private async _duplicate(script: any) {
-    const config = await getScriptConfig(
-      this.hass,
-      computeObjectId(script.entity_id)
-    );
-    showScriptEditor({
-      ...config,
-      alias: `${config?.alias} (${this.hass.localize(
-        "ui.panel.config.script.picker.duplicate"
-      )})`,
-    });
+    try {
+      const config = await getScriptConfig(
+        this.hass,
+        computeObjectId(script.entity_id)
+      );
+      showScriptEditor({
+        ...config,
+        alias: `${config?.alias} (${this.hass.localize(
+          "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) {
-    await deleteScript(this.hass, computeObjectId(script.entity_id));
+    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 {
diff --git a/src/translations/en.json b/src/translations/en.json
index b4ec4922b3..05b019609a 100755
--- a/src/translations/en.json
+++ b/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",