From 4b56db5255edfacaf1de935f2fe5ae5dcda0ea9d Mon Sep 17 00:00:00 2001
From: nicop4 <nicop4@users.noreply.github.com>
Date: Mon, 2 Dec 2019 10:35:49 +0100
Subject: [PATCH] Add copy entity ID/state/attributes menu button in dev
 tools/states (#4259)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Added button and js method to copy with copy-to-clipboard library

* Copy entity id working, tooltip added

* copy ok, use ha toast to notify ok

* cleanup code

* add translation

* removed old useless code

* Replaced copy button with menu

* Fix comparison operator & removed commented code

	modifié :         src/panels/developer-tools/state/developer-tools-state.js

* Fix spaces

	modifié :         src/panels/developer-tools/state/developer-tools-state.js

* Improve copy attributes

* only one menu & update translation

* copy attributes in yml format
use paper-icon-item instead of paper-icon-button and add yarn.lock

* removed paper-item
---
 package.json                                  |  1 +
 .../state/developer-tools-state.js            | 85 +++++++++++++++++--
 src/translations/en.json                      |  6 +-
 yarn.lock                                     | 12 +++
 4 files changed, 96 insertions(+), 8 deletions(-)

diff --git a/package.json b/package.json
index 0e2d973d9e..9f111f9e4e 100644
--- a/package.json
+++ b/package.json
@@ -99,6 +99,7 @@
     "regenerator-runtime": "^0.13.2",
     "roboto-fontface": "^0.10.0",
     "superstruct": "^0.6.1",
+    "copy-to-clipboard": "^1.0.9",
     "tslib": "^1.10.0",
     "unfetch": "^4.1.0",
     "web-animations-js": "^2.3.1",
diff --git a/src/panels/developer-tools/state/developer-tools-state.js b/src/panels/developer-tools/state/developer-tools-state.js
index 8312f15e34..bfb0511f34 100644
--- a/src/panels/developer-tools/state/developer-tools-state.js
+++ b/src/panels/developer-tools/state/developer-tools-state.js
@@ -1,6 +1,8 @@
 import "@material/mwc-button";
 import "@polymer/paper-checkbox/paper-checkbox";
 import "@polymer/paper-input/paper-input";
+import "@polymer/paper-menu-button";
+import copy from "copy-to-clipboard";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 
@@ -11,6 +13,7 @@ import "../../../components/ha-code-editor";
 import "../../../resources/ha-style";
 import { EventsMixin } from "../../../mixins/events-mixin";
 import LocalizeMixin from "../../../mixins/localize-mixin";
+import { showToast } from "../../../util/toast";
 
 const ERROR_SENTINEL = {};
 /*
@@ -60,6 +63,10 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
           height: 24px;
           padding: 0;
         }
+        .entities paper-menu-button {
+          height: 24px;
+          padding: 0;
+        }
         .entities td:nth-child(3) {
           white-space: pre-wrap;
           word-break: break-word;
@@ -68,6 +75,9 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
         .entities a {
           color: var(--primary-color);
         }
+        paper-icon-item {
+          cursor: pointer;
+        }
       </style>
 
       <div class="inputs">
@@ -150,13 +160,56 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
         <template is="dom-repeat" items="[[_entities]]" as="entity">
           <tr>
             <td>
-              <paper-icon-button
-                on-click="entityMoreInfo"
-                icon="hass:information-outline"
-                alt="[[localize('ui.panel.developer-tools.tabs.states.more_info')]]"
-                title="[[localize('ui.panel.developer-tools.tabs.states.more_info')]]"
-              >
-              </paper-icon-button>
+              <paper-menu-button close-on-activate>
+                <paper-icon-button
+                  icon="hass:dots-vertical"
+                  slot="dropdown-trigger"
+                  alt="menu"
+                ></paper-icon-button>
+                <paper-listbox
+                  slot="dropdown-content"
+                  role="listbox"
+                  selected="{{selectedItem}}"
+                >
+                  <paper-icon-item on-click="entityMoreInfo">
+                    <ha-icon
+                      icon="hass:information-outline"
+                      slot="item-icon"
+                    ></ha-icon>
+                    [[localize('ui.panel.developer-tools.tabs.states.more_info')]]
+                  </paper-icon-item>
+
+                  <paper-icon-item action="copyId" on-click="entityCopyValue">
+                    <ha-icon
+                      icon="hass:content-copy"
+                      slot="item-icon"
+                    ></ha-icon>
+                    [[localize('ui.panel.developer-tools.tabs.states.copy_entity_id')]]
+                  </paper-icon-item>
+
+                  <paper-icon-item
+                    action="copyState"
+                    on-click="entityCopyValue"
+                  >
+                    <ha-icon
+                      icon="hass:content-copy"
+                      slot="item-icon"
+                    ></ha-icon>
+                    [[localize('ui.panel.developer-tools.tabs.states.copy_entity_state')]]
+                  </paper-icon-item>
+
+                  <paper-icon-item
+                    action="copyAttributes"
+                    on-click="entityCopyValue"
+                  >
+                    <ha-icon
+                      icon="hass:content-copy"
+                      slot="item-icon"
+                    ></ha-icon>
+                    [[localize('ui.panel.developer-tools.tabs.states.copy_entity_attribute')]]
+                  </paper-icon-item>
+                </paper-listbox>
+              </paper-menu-button>
               <a href="#" on-click="entitySelected">[[entity.entity_id]]</a>
             </td>
             <td>[[entity.state]]</td>
@@ -255,6 +308,24 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
     this.fire("hass-more-info", { entityId: ev.model.entity.entity_id });
   }
 
+  entityCopyValue(ev) {
+    var action = ev.currentTarget.attributes.action.value;
+    if (action === "copyId") {
+      copy(ev.model.entity.entity_id);
+    } else if (action === "copyState") {
+      copy(ev.model.entity.state);
+    } else if (action === "copyAttributes") {
+      copy(safeDump(ev.model.entity.attributes).replace(/\n/g, "<br />"));
+    } else {
+      return;
+    }
+    showToast(this, {
+      message: this.hass.localize(
+        "ui.panel.developer-tools.tabs.states.copied"
+      ),
+    });
+  }
+
   handleSetState() {
     if (!this._entityId) {
       alert(
diff --git a/src/translations/en.json b/src/translations/en.json
index f0e465a24a..53ce9c04e4 100755
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -2048,7 +2048,11 @@
             "filter_attributes": "Filter attributes",
             "no_entities": "No entities",
             "more_info": "More Info",
-            "alert_entity_field": "Entity is a mandatory field"
+            "alert_entity_field": "Entity is a mandatory field",
+            "copy_entity_id": "Copy ID",
+            "copy_entity_state": "Copy state",
+            "copy_entity_attribute": "Copy attributes",
+            "copied": "Copied to clipboard"
           },
           "templates": {
             "title": "Template",
diff --git a/yarn.lock b/yarn.lock
index e63a4f791e..44152d0c56 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5069,6 +5069,13 @@ copy-props@^2.0.1:
     each-props "^1.3.0"
     is-plain-object "^2.0.1"
 
+copy-to-clipboard@^1.0.9:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/copy-to-clipboard/-/copy-to-clipboard-1.1.1.tgz#5bcddb4e25743f1a9e862554363e23fc78077b78"
+  integrity sha1-W83bTiV0PxqehiVUNj4j/HgHe3g=
+  dependencies:
+    toggle-selection "^1.0.3"
+
 copy-webpack-plugin@^5.0.2:
   version "5.0.2"
   resolved "https://registry.yarnpkg.com/copy-webpack-plugin/-/copy-webpack-plugin-5.0.2.tgz#56186dfddbf9aa1b29c97fa4c796c1be98870da4"
@@ -13047,6 +13054,11 @@ to-through@^2.0.0:
   dependencies:
     through2 "^2.0.3"
 
+toggle-selection@^1.0.3:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/toggle-selection/-/toggle-selection-1.0.6.tgz#6e45b1263f2017fa0acc7d89d78b15b8bf77da32"
+  integrity sha1-bkWxJj8gF/oKzH2J14sVuL932jI=
+
 toidentifier@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.0.tgz#7e1be3470f1e77948bc43d94a3c8f4d7752ba553"