Show descriptions in script editor (#20765)

* Show descriptions in script editor

* descriptions in blueprints also

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];

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()}
     `;
   }

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(

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()}
     `;
   }

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