Add copy entity ID/state/attributes menu button in dev tools/states (#4259)

* 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

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

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-menu-button close-on-activate>
                 <paper-icon-button
-                on-click="entityMoreInfo"
+                  icon="hass:dots-vertical"
-                icon="hass:information-outline"
+                  slot="dropdown-trigger"
-                alt="[[localize('ui.panel.developer-tools.tabs.states.more_info')]]"
+                  alt="menu"
-                title="[[localize('ui.panel.developer-tools.tabs.states.more_info')]]"
+                ></paper-icon-button>
+                <paper-listbox
+                  slot="dropdown-content"
+                  role="listbox"
+                  selected="{{selectedItem}}"
                 >
-              </paper-icon-button>
+                  <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(

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

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"