Button to copy service response as json for templates (#21226)

* Button to copy service response as json for templates

src/components/ha-yaml-editor.ts

@@ -49,6 +49,8 @@ export class HaYamlEditor extends LitElement {
 
   @property({ type: Boolean }) public copyClipboard = false;
 
+  @property({ type: Boolean }) public hasExtraActions = false;
+
   @state() private _yaml = "";
 
   public setValue(value): void {
@@ -100,13 +102,16 @@ export class HaYamlEditor extends LitElement {
         @value-changed=${this._onChange}
         dir="ltr"
       ></ha-code-editor>
-      ${this.copyClipboard
+      ${this.copyClipboard || this.hasExtraActions
         ? html`<div class="card-actions">
-            <mwc-button @click=${this._copyYaml}>
+            ${this.copyClipboard
-              ${this.hass.localize(
+              ? html` <mwc-button @click=${this._copyYaml}>
-                "ui.components.yaml-editor.copy_to_clipboard"
+                  ${this.hass.localize(
-              )}
+                    "ui.components.yaml-editor.copy_to_clipboard"
-            </mwc-button>
+                  )}
+                </mwc-button>`
+              : nothing}
+            <slot name="extra-actions"></slot>
           </div>`
         : nothing}
     `;

src/panels/developer-tools/action/developer-tools-action.ts

@@ -11,10 +11,13 @@ import { hasTemplate } from "../../../common/string/has-template";
 import { extractSearchParam } from "../../../common/url/search-params";
 import { HaProgressButton } from "../../../components/buttons/ha-progress-button";
 import { LocalizeFunc } from "../../../common/translations/localize";
+import { showToast } from "../../../util/toast";
+import { copyToClipboard } from "../../../common/util/copy-clipboard";
 
 import "../../../components/entity/ha-entity-picker";
 import "../../../components/ha-card";
 import "../../../components/ha-alert";
+import "../../../components/ha-button";
 import "../../../components/ha-expansion-panel";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-service-control";
@@ -189,8 +192,15 @@ class HaPanelDevAction extends LitElement {
                   copyClipboard
                   readOnly
                   autoUpdate
+                  hasExtraActions
                   .value=${this._response}
-                ></ha-yaml-editor>
+                >
+                  <ha-button slot="extra-actions" @click=${this._copyTemplate}
+                    >${this.hass.localize(
+                      "ui.panel.developer-tools.tabs.actions.copy_clipboard_template"
+                    )}</ha-button
+                  >
+                </ha-yaml-editor>
               </div>
             </ha-card>
           </div>`
@@ -292,6 +302,15 @@ class HaPanelDevAction extends LitElement {
     `;
   }
 
+  private async _copyTemplate(): Promise<void> {
+    await copyToClipboard(
+      `{% set action_response = ${JSON.stringify(this._response)} %}`
+    );
+    showToast(this, {
+      message: this.hass.localize("ui.common.copied_clipboard"),
+    });
+  }
+
   private _filterSelectorFields = memoizeOne((fields) =>
     fields.filter((field) => !field.selector)
   );

src/translations/en.json

@@ -6771,6 +6771,7 @@
             "all_parameters": "All available parameters",
             "accepts_target": "This action accepts a target, for example: `entity_id: light.bed_light`",
             "no_template_ui_support": "The UI does not support templates, you can still use the YAML editor.",
+            "copy_clipboard_template": "Copy to clipboard (template)",
             "errors": {
               "ui": {
                 "no_service": "No action selected, please select an action",