Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
bramkragten merged 13 commits into from
Dec 2, 2019
Merged

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

Show file tree
Hide file tree
Changes from 11 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
5545db7
Added button and js method to copy with copy-to-clipboard library
nicop4 Nov 8, 2019
401323a
Copy entity id working, tooltip added
nicop4 Nov 14, 2019
845c377
copy ok, use ha toast to notify ok
nicop4 Nov 17, 2019
0667126
cleanup code
nicop4 Nov 17, 2019
7983cbb
add translation
nicop4 Nov 17, 2019
1554702
removed old useless code
nicop4 Nov 21, 2019
0e51b78
Replaced copy button with menu
nicop4 Nov 24, 2019
5e5e101
Fix comparison operator & removed commented code
nicop4 Nov 24, 2019
5c231b4
Fix spaces
nicop4 Nov 24, 2019
59e8703
Improve copy attributes
nicop4 Nov 25, 2019
42c5b5b
only one menu & update translation
nicop4 Nov 25, 2019
b0bf37f
copy attributes in yml format
nicop4 Nov 29, 2019
8f63571
removed paper-item
nicop4 Nov 30, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
86 changes: 79 additions & 7 deletions src/panels/developer-tools/state/developer-tools-state.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";

Expand All @@ -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 = {};
/*
Expand Down Expand Up @@ -60,6 +63,10 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
height: 24px;

@bramkragten bramkragten Nov 29, 2019

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

paper-icon-button is no longer used

@nicop4 nicop4 Nov 29, 2019

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Don't we use paper-icon-button inside a paper-menu-button ?
Or was it about the paper-icon-buttons I replaced in the list as you suggested in your other comment ?

@bramkragten bramkragten Nov 29, 2019

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah you use it inside it, but this style rules are not necessary anymore I think?

@nicop4 nicop4 Nov 30, 2019

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actually there is a 8px padding that shifts the text and it is not aligned with the rest of the table. The height reduces the size of the icon that is too big otherwise.

padding: 0;
}
.entities paper-menu-button {
height: 24px;
padding: 0;
}
.entities td:nth-child(3) {
white-space: pre-wrap;
word-break: break-word;
Expand All @@ -68,6 +75,9 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
.entities a {
color: var(--primary-color);
}
paper-item {
cursor: pointer;
}
</style>

<div class="inputs">
Expand Down Expand Up @@ -150,13 +160,57 @@ 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="true">
Comment thread
nicop4 marked this conversation as resolved.
Outdated
<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-item on-click="entityMoreInfo">
Comment thread
nicop4 marked this conversation as resolved.
Outdated
<paper-icon-button
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>
[[localize('ui.panel.developer-tools.tabs.states.more_info')]]
</paper-item>

<paper-item action="copyId" on-click="entityCopyValue">
<paper-icon-button
icon="hass:content-copy"
alt="[[localize('ui.panel.developer-tools.tabs.states.copy_entity_id')]]"
title="[[localize('ui.panel.developer-tools.tabs.states.copy_entity_id')]]"
></paper-icon-button>
[[localize('ui.panel.developer-tools.tabs.states.copy_entity_id')]]
</paper-item>

<paper-item action="copyState" on-click="entityCopyValue">
<paper-icon-button
icon="hass:content-copy"
alt="[[localize('ui.panel.developer-tools.tabs.states.copy_entity_state')]]"
title="[[localize('ui.panel.developer-tools.tabs.states.copy_entity_state')]]"
></paper-icon-button>
[[localize('ui.panel.developer-tools.tabs.states.copy_entity_state')]]
</paper-item>

<paper-item
action="copyAttributes"
on-click="entityCopyValue"
>
<paper-icon-button
icon="hass:content-copy"
alt="[[localize('ui.panel.developer-tools.tabs.states.copy_entity_attribute')]]"
title="[[localize('ui.panel.developer-tools.tabs.states.copy_entity_attribute')]]"
></paper-icon-button>
[[localize('ui.panel.developer-tools.tabs.states.copy_entity_attribute')]]
</paper-item>
</paper-listbox>
</paper-menu-button>
<a href="#" on-click="entitySelected">[[entity.entity_id]]</a>
</td>
<td>[[entity.state]]</td>
Expand Down Expand Up @@ -255,6 +309,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(this.attributeString(ev.model.entity).replace(/\n/g, "<br />"));
Comment thread
nicop4 marked this conversation as resolved.
Outdated
} else {
return;
}
showToast(this, {
message: this.hass.localize(
"ui.panel.developer-tools.tabs.states.copied"
),
});
}

handleSetState() {
if (!this._entityId) {
alert(
Expand Down
6 changes: 5 additions & 1 deletion src/translations/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2042,7 +2042,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",
Expand Down