From f5f2a5ad5bcdc9462ff145efcbdcc68ccddd8134 Mon Sep 17 00:00:00 2001
From: karwosts <32912880+karwosts@users.noreply.github.com>
Date: Mon, 13 May 2024 05:19:47 -0700
Subject: [PATCH] Show descriptions in script editor (#20765)

* Show descriptions in script editor

* descriptions in blueprints also
---
 src/data/script.ts                                  |  1 +
 .../automation/blueprint-automation-editor.ts       | 13 +++++++++----
 .../config/automation/manual-automation-editor.ts   |  4 ++--
 src/panels/config/script/blueprint-script-editor.ts | 13 +++++++++++--
 src/panels/config/script/manual-script-editor.ts    | 10 +++++++++-
 5 files changed, 32 insertions(+), 9 deletions(-)

diff --git a/src/data/script.ts b/src/data/script.ts
index 942cf0fa84..28aff64dcb 100644
--- a/src/data/script.ts
+++ b/src/data/script.ts
@@ -93,6 +93,7 @@ export type ScriptConfig = ManualScriptConfig | BlueprintScriptConfig;
 
 export interface ManualScriptConfig {
   alias: string;
+  description?: string;
   sequence: Action | Action[];
   icon?: string;
   mode?: (typeof MODES)[number];
diff --git a/src/panels/config/automation/blueprint-automation-editor.ts b/src/panels/config/automation/blueprint-automation-editor.ts
index 2ff983d4c0..83a7c7bb99 100644
--- a/src/panels/config/automation/blueprint-automation-editor.ts
+++ b/src/panels/config/automation/blueprint-automation-editor.ts
@@ -1,11 +1,12 @@
 import "@material/mwc-button/mwc-button";
 import { HassEntity } from "home-assistant-js-websocket";
-import { html } from "lit";
+import { html, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import "../../../components/ha-alert";
 import { BlueprintAutomationConfig } from "../../../data/automation";
 import { fetchBlueprints } from "../../../data/blueprint";
 import { HaBlueprintGenericEditor } from "../blueprint/blueprint-generic-editor";
+import "../../../components/ha-markdown";
 
 @customElement("blueprint-automation-editor")
 export class HaBlueprintAutomationEditor extends HaBlueprintGenericEditor {
@@ -26,7 +27,7 @@ export class HaBlueprintAutomationEditor extends HaBlueprintGenericEditor {
               ${this.hass.localize("ui.panel.config.automation.editor.migrate")}
             </mwc-button>
           </ha-alert>`
-        : ""}
+        : nothing}
       ${this.stateObj?.state === "off"
         ? html`
             <ha-alert alert-type="info">
@@ -42,8 +43,12 @@ export class HaBlueprintAutomationEditor extends HaBlueprintGenericEditor {
           `
         : ""}
       ${this.config.description
-        ? html`<p class="description">${this.config.description}</p>`
-        : ""}
+        ? html`<ha-markdown
+            class="description"
+            breaks
+            .content=${this.config.description}
+          ></ha-markdown>`
+        : nothing}
       ${this.renderCard()}
     `;
   }
diff --git a/src/panels/config/automation/manual-automation-editor.ts b/src/panels/config/automation/manual-automation-editor.ts
index 921e79a472..ceb4da52e0 100644
--- a/src/panels/config/automation/manual-automation-editor.ts
+++ b/src/panels/config/automation/manual-automation-editor.ts
@@ -59,14 +59,14 @@ export class HaManualAutomationEditor extends LitElement {
               </mwc-button>
             </ha-alert>
           `
-        : ""}
+        : nothing}
       ${this.config.description
         ? html`<ha-markdown
             class="description"
             breaks
             .content=${this.config.description}
           ></ha-markdown>`
-        : ""}
+        : nothing}
       <div class="header">
         <h2 id="triggers-heading" class="name">
           ${this.hass.localize(
diff --git a/src/panels/config/script/blueprint-script-editor.ts b/src/panels/config/script/blueprint-script-editor.ts
index c233eae662..ba388f5e0d 100644
--- a/src/panels/config/script/blueprint-script-editor.ts
+++ b/src/panels/config/script/blueprint-script-editor.ts
@@ -1,9 +1,11 @@
-import { html } from "lit";
+import "@material/mwc-button/mwc-button";
+import { html, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import "../../../components/ha-alert";
 import { BlueprintScriptConfig } from "../../../data/script";
 import { fetchBlueprints } from "../../../data/blueprint";
 import { HaBlueprintGenericEditor } from "../blueprint/blueprint-generic-editor";
+import "../../../components/ha-markdown";
 
 @customElement("blueprint-script-editor")
 export class HaBlueprintScriptEditor extends HaBlueprintGenericEditor {
@@ -22,7 +24,14 @@ export class HaBlueprintScriptEditor extends HaBlueprintGenericEditor {
               ${this.hass.localize("ui.panel.config.script.editor.migrate")}
             </mwc-button>
           </ha-alert>`
-        : ""}
+        : nothing}
+      ${this.config.description
+        ? html`<ha-markdown
+            class="description"
+            breaks
+            .content=${this.config.description}
+          ></ha-markdown>`
+        : nothing}
       ${this.renderCard()}
     `;
   }
diff --git a/src/panels/config/script/manual-script-editor.ts b/src/panels/config/script/manual-script-editor.ts
index 850f5406ed..f5f946229d 100644
--- a/src/panels/config/script/manual-script-editor.ts
+++ b/src/panels/config/script/manual-script-editor.ts
@@ -6,6 +6,7 @@ import { fireEvent } from "../../../common/dom/fire_event";
 import { nestedArrayMove } from "../../../common/util/array-move";
 import "../../../components/ha-card";
 import "../../../components/ha-icon-button";
+import "../../../components/ha-markdown";
 import { Action, Fields, ScriptConfig } from "../../../data/script";
 import { haStyle } from "../../../resources/styles";
 import type { HomeAssistant } from "../../../types";
@@ -66,7 +67,14 @@ export class HaManualScriptEditor extends LitElement {
               ${this.hass.localize("ui.panel.config.script.editor.migrate")}
             </mwc-button>
           </ha-alert>`
-        : ""}
+        : nothing}
+      ${this.config.description
+        ? html`<ha-markdown
+            class="description"
+            breaks
+            .content=${this.config.description}
+          ></ha-markdown>`
+        : nothing}
       ${this.config.fields
         ? html`<div class="header">
               <h2 id="fields-heading" class="name">