Copy to clipboard button for service response (#18872)

src/components/ha-yaml-editor.ts

@@ -1,9 +1,19 @@
 import { DEFAULT_SCHEMA, dump, load, Schema } from "js-yaml";
-import { html, LitElement, nothing, PropertyValues } from "lit";
+import {
+  CSSResultGroup,
+  css,
+  html,
+  LitElement,
+  nothing,
+  PropertyValues,
+} from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
 import type { HomeAssistant } from "../types";
+import { haStyle } from "../resources/styles";
 import "./ha-code-editor";
+import { showToast } from "../util/toast";
+import { copyToClipboard } from "../common/util/copy-clipboard";
 
 const isEmpty = (obj: Record<string, unknown>): boolean => {
   if (typeof obj !== "object") {
@@ -37,6 +47,8 @@ export class HaYamlEditor extends LitElement {
 
   @property({ type: Boolean }) public required = false;
 
+  @property({ type: Boolean }) public copyClipboard = false;
+
   @state() private _yaml = "";
 
   public setValue(value): void {
@@ -88,6 +100,15 @@ export class HaYamlEditor extends LitElement {
         @value-changed=${this._onChange}
         dir="ltr"
       ></ha-code-editor>
+      ${this.copyClipboard
+        ? html`<div class="card-actions">
+            <mwc-button @click=${this._copyYaml}>
+              ${this.hass.localize(
+                "ui.components.yaml-editor.copy_to_clipboard"
+              )}
+            </mwc-button>
+          </div>`
+        : nothing}
     `;
   }
 
@@ -117,6 +138,35 @@ export class HaYamlEditor extends LitElement {
   get yaml() {
     return this._yaml;
   }
+
+  private async _copyYaml(): Promise<void> {
+    if (this.yaml) {
+      await copyToClipboard(this.yaml);
+      showToast(this, {
+        message: this.hass.localize("ui.common.copied_clipboard"),
+      });
+    }
+  }
+
+  static get styles(): CSSResultGroup {
+    return [
+      haStyle,
+      css`
+        .card-actions {
+          border-radius: var(
+            --actions-border-radius,
+            0px 0px var(--ha-card-border-radius, 12px)
+              var(--ha-card-border-radius, 12px)
+          );
+          border: 1px solid var(--divider-color);
+          padding: 5px 16px;
+        }
+        ha-code-editor {
+          flex-grow: 1;
+        }
+      `,
+    ];
+  }
 }
 
 declare global {

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

@@ -25,19 +25,16 @@ import {
   html,
   nothing,
 } from "lit";
-import { property, query, state } from "lit/decorators";
+import { property, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { navigate } from "../../../common/navigate";
-import { copyToClipboard } from "../../../common/util/copy-clipboard";
 import { afterNextRender } from "../../../common/util/render-status";
 import "../../../components/ha-button-menu";
-import "../../../components/ha-card";
 import "../../../components/ha-fab";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-svg-icon";
 import "../../../components/ha-yaml-editor";
-import type { HaYamlEditor } from "../../../components/ha-yaml-editor";
 import {
   AutomationConfig,
   AutomationEntity,
@@ -112,8 +109,6 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
 
   @state() private _validationErrors?: (string | TemplateResult)[];
 
-  @query("ha-yaml-editor", true) private _yamlEditor?: HaYamlEditor;
-
   private _configSubscriptions: Record<
     string,
     (config?: AutomationConfig) => void
@@ -342,8 +337,7 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
                         ></manual-automation-editor>
                       `
                   : this._mode === "yaml"
-                    ? html`
+                    ? html` ${this._readOnly
-                        ${this._readOnly
                           ? html`<ha-alert alert-type="warning">
                               ${this.hass.localize(
                                 "ui.panel.config.automation.editor.read_only"
@@ -376,22 +370,13 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
                             `
                           : ""}
                         <ha-yaml-editor
+                          copyClipboard
                           .hass=${this.hass}
                           .defaultValue=${this._preprocessYaml()}
                           .readOnly=${this._readOnly}
                           @value-changed=${this._yamlChanged}
-                        ></ha-yaml-editor>
+                        ></ha-yaml-editor>`
-                        <ha-card outlined>
+                    : nothing}
-                          <div class="card-actions">
-                            <mwc-button @click=${this._copyYaml}>
-                              ${this.hass.localize(
-                                "ui.panel.config.automation.editor.copy_to_clipboard"
-                              )}
-                            </mwc-button>
-                          </div>
-                        </ha-card>
-                      `
-                    : ``}
               </div>
             `
           : ""}
@@ -612,15 +597,6 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
     return cleanConfig;
   }
 
-  private async _copyYaml(): Promise<void> {
-    if (this._yamlEditor?.yaml) {
-      await copyToClipboard(this._yamlEditor.yaml);
-      showToast(this, {
-        message: this.hass.localize("ui.common.copied_clipboard"),
-      });
-    }
-  }
-
   private _yamlChanged(ev: CustomEvent) {
     ev.stopPropagation();
     if (!ev.detail.isValid) {
@@ -776,9 +752,6 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
     return [
       haStyle,
       css`
-        ha-card {
-          overflow: hidden;
-        }
         .content {
           padding-bottom: 20px;
         }
@@ -796,13 +769,11 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
         }
         ha-yaml-editor {
           flex-grow: 1;
+          --actions-border-radius: 0;
           --code-mirror-height: 100%;
           min-height: 0;
-        }
+          display: flex;
-        .yaml-mode ha-card {
+          flex-direction: column;
-          overflow: initial;
-          --ha-card-border-radius: 0;
-          border-bottom: 1px solid var(--divider-color);
         }
         p {
           margin-bottom: 0;

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

@@ -26,7 +26,6 @@ import { fireEvent } from "../../../common/dom/fire_event";
 import { navigate } from "../../../common/navigate";
 import { slugify } from "../../../common/string/slugify";
 import { computeRTL } from "../../../common/util/compute_rtl";
-import { copyToClipboard } from "../../../common/util/copy-clipboard";
 import { afterNextRender } from "../../../common/util/render-status";
 import "../../../components/ha-button-menu";
 import "../../../components/ha-card";
@@ -38,7 +37,6 @@ import type {
 import "../../../components/ha-icon-button";
 import "../../../components/ha-svg-icon";
 import "../../../components/ha-yaml-editor";
-import type { HaYamlEditor } from "../../../components/ha-yaml-editor";
 import { validateConfig } from "../../../data/config";
 import { UNAVAILABLE } from "../../../data/entity";
 import { EntityRegistryEntry } from "../../../data/entity_registry";
@@ -94,8 +92,6 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
 
   @state() private _readOnly = false;
 
-  @query("ha-yaml-editor") private _yamlEditor?: HaYamlEditor;
-
   @query("manual-script-editor")
   private _manualEditor?: HaManualScriptEditor;
 
@@ -405,24 +401,14 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
                 </div>
               `
             : this._mode === "yaml"
-              ? html`
+              ? html` <ha-yaml-editor
-                  <ha-yaml-editor
+                  copyClipboard
-                    .hass=${this.hass}
+                  .hass=${this.hass}
-                    .defaultValue=${this._preprocessYaml()}
+                  .defaultValue=${this._preprocessYaml()}
-                    .readOnly=${this._readOnly}
+                  .readOnly=${this._readOnly}
-                    @value-changed=${this._yamlChanged}
+                  @value-changed=${this._yamlChanged}
-                  ></ha-yaml-editor>
+                ></ha-yaml-editor>`
-                  <ha-card outlined>
+              : nothing}
-                    <div class="card-actions">
-                      <mwc-button @click=${this._copyYaml}>
-                        ${this.hass.localize(
-                          "ui.panel.config.automation.editor.copy_to_clipboard"
-                        )}
-                      </mwc-button>
-                    </div>
-                  </ha-card>
-                `
-              : ``}
         </div>
         <ha-fab
           slot="fab"
@@ -735,15 +721,6 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
     return this._config;
   }
 
-  private async _copyYaml(): Promise<void> {
-    if (this._yamlEditor?.yaml) {
-      await copyToClipboard(this._yamlEditor.yaml);
-      showToast(this, {
-        message: this.hass.localize("ui.common.copied_clipboard"),
-      });
-    }
-  }
-
   private _yamlChanged(ev: CustomEvent) {
     ev.stopPropagation();
     if (!ev.detail.isValid) {
@@ -903,8 +880,11 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
         }
         ha-yaml-editor {
           flex-grow: 1;
+          --actions-border-radius: 0;
           --code-mirror-height: 100%;
           min-height: 0;
+          display: flex;
+          flex-direction: column;
         }
         .yaml-mode ha-card {
           overflow: initial;

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

@@ -184,6 +184,8 @@ class HaPanelDevService extends LitElement {
             >
               <div class="card-content">
                 <ha-yaml-editor
+                  .hass=${this.hass}
+                  copyClipboard
                   readOnly
                   autoUpdate
                   .value=${this._response}

src/translations/en.json

@@ -865,6 +865,9 @@
       "climate-control": {
         "temperature_up": "Increase temperature",
         "temperature_down": "Decrease temperature"
+      },
+      "yaml-editor": {
+        "copy_to_clipboard": "[%key:ui::panel::config::automation::editor::copy_to_clipboard%]"
       }
     },
     "dialogs": {