Add copy entity ID/state/attributes menu button in dev tools/states by nicop4 · Pull Request #4259 · home-assistant/frontend

nicop4 · 2019-11-21T12:55:33Z

Hi
I added a functionality I wished I had numerous times : the ability to quickly copy the entity id without having to manually select text, etc...
For this I added a button next to the "More Info" that will store the ID in the clipboard.
I used the "copy-to-clipboard" package.

It look like this:

That's my first PR for HA so I don't really know the process, please tell me how I proceed now.
I'm not really a front-end developer so any feedback and improvement for a future merge in master are more than welcome.

Also I wasn't really sure how to deal with the new labels I use and their translation in Lokalize , so I only modified the file en.json

homeassistant · 2019-11-21T12:55:35Z

Hi @nicop4,

It seems you haven't yet signed a CLA. Please do so here.

Once you do that we will be able to review and accept this pull request.

Thanks!

bramkragten · 2019-11-21T13:05:34Z

Hi Nicolas,

Thanks for your PR!
Should we maybe move the copy button to the select entity combo box at the top? I'm afraid it will get too crowded with all these buttons in the row...

It is one click extra but a lot cleaner.

noxhirsch · 2019-11-21T14:32:25Z

Should we maybe move the copy button to the select entity combo box at the top? I'm afraid it will get too crowded with all these buttons in the row...
It is one click extra but a lot cleaner.

But then you'd have to scroll up again after clicking on the entity to copy it. And if you want to copy several entities in a row you have to scroll up and down several times.

nicop4 · 2019-11-21T14:44:51Z

Hi Nicolas,
Thanks for your PR!
Should we maybe move the copy button to the select entity combo box at the top? I'm afraid it will get too crowded with all these buttons in the row...
It is one click extra but a lot cleaner.

But then you'd have to scroll up again after clicking on the entity to copy it. And if you want to copy several entities in a row you have to scroll up and down several times.

Agreed, the goal was to really quickly copy the ID. Any other thoughts about the button placement ?

bramkragten · 2019-11-21T14:52:15Z

Should we create an overflow menu where we place the items in?

noxhirsch · 2019-11-21T14:53:49Z

Sounds good. Especially does it create a space for more features in the future :)

nicop4 · 2019-11-21T23:28:36Z

Should we create an overflow menu where we place the items in?

Are you talking about a paper menu button ? I'll give it a try ;)

nicop4 · 2019-11-24T19:09:57Z

Hi @noxhirsch @bramkragten
I replaced the button with a drop down menu. It allows multiple actions on the entity, so I offered the ability to copy entity state and attributes as long as ID. It also open space for future actions :)

Here is the new look:

Your thoughts ?

noxhirsch · 2019-11-24T19:13:28Z

I love it! (especially the additional copy options you added) The only change I'd make, is to move the more-info icon into the menu as well :)

nicop4 · 2019-11-24T19:25:48Z

Yes I was wondering also if I moved this button too! I'll try to include it as first button:

More info
Copy entity ID
Copy entity state
Copy entity attributes

Might also remove entity in the menu labels

noxhirsch · 2019-11-24T19:28:07Z

You're right. entity is not really needed 👍

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

SeanPM5 · 2019-11-24T21:17:44Z

This is pretty cool, nice job! I have two very minor suggestions:

I think that for overflow menus typically hass:dots-vertical icon is used, rather than the "hamburger" menu icon (which is more for sidebars and navigation).
And probably remove the exclamation point from "Copied!" on the toast too. It should just say "Copied" or "Copied to clipboard" imo.

nicop4 · 2019-11-25T12:10:21Z

@SeanPM5 Thanks for your feedback, I totally agree !

I have some trouble with the pre-commit hook, which re-indents the source file, which is nice but here it causes problem with the rendering.
In developer-tools-state.js (l.211), I added the attribute id to get its content. My code is:

           <td id="attributes-[[entity.entity_id]]">[[attributeString(entity)]]</td>

But the auto formating hook changes it to this

          <td id="attributes-[[entity.entity_id]]">
                [[attributeString(entity)]]
          </td>

Which should not cause any problem but when displaying the page, the cell with the attributes contains spaces before and after the content which is really ugly (I'll add a screenshot tonight), like if it is some non-breakable spaces.
I disabled the precommit hook so it does not changes the code, but it breaks the CI because of code styling:

/home/travis/build/home-assistant/home-assistant-polymer/src/panels/developer-tools/state/developer-tools-state.js

  211:56  error  Replace `[[attributeString(entity)]]` with `⏎················[[attributeString(entity)]]⏎··············`  prettier/prettier

I don't understand why the spaces are rendered, and how can I change the formatting of the code so that the 'prettifier' doesn't cause this ? I tried many ways of opening and closing tags, with id property but still no luck.

Can someone help or explain me why I have these behaviors ?

nicop4 · 2019-11-25T20:57:57Z

So I did the little changes we talked about, that is much better this way, thanks for your feedback!

Here is the rendering:

I still have one minor problem: the drop down list of the menu keeps the previously selected item as you can see on the screen capture. But it seems to be always the case (see the menu to move or delete a card in the UI editor).
I couldn't manage to deselect the item in the menu. According to this issue there is a workaround but I can't get it to work...

bramkragten · 2019-11-29T09:41:48Z

@@ -60,6 +63,10 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
          height: 24px;


paper-icon-button is no longer used

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 ?

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

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.

bramkragten · 2019-11-29T11:01:15Z

I miss yarn.lock in your changes, did you run yarn?

nicop4 · 2019-11-29T17:48:57Z

Hi @bramkragten
I did use yarn and I have a yarn.lock, i'm not familiar with this dev environment so I thought it was some kind of local file that was not in the gitignore...
Bu tI will push it with the modifications you proposed :)

use paper-icon-item instead of paper-icon-button and add yarn.lock

nicop4 · 2019-12-02T17:54:30Z

Glad to see the PR merged 😃 👍

…states (#4259)" This reverts commit 4b56db5.

…states" (#4337) * Revert "Add copy entity ID/state/attributes menu button in dev tools/states (#4259)" This reverts commit 4b56db5. * Update package.json

jazzmonger · 2020-12-24T19:12:47Z

What ever happened to this PR? It's so much more useful than just the 'info' icon...

nicop4 · 2020-12-24T19:27:55Z

Yeah it almost made it to a release but it seems it had a big impact on performance with "large" amount of entities. I never took a second look at it as I am not a front-end expert, but I still wish to have it.
I might restart it or may be reduce the number of functions of this menu. If you think you can help me we can get in touch!

jazzmonger · 2020-12-24T19:40:46Z

Im just a user that could really use this!! copying this stuff is a pain on a mobile device.

nicop4 added 5 commits November 21, 2019 13:20

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

5545db7

Copy entity id working, tooltip added

401323a

copy ok, use ha toast to notify ok

845c377

cleanup code

0667126

add translation

7983cbb

homeassistant added the cla-needed label Nov 21, 2019

bramkragten reviewed Nov 21, 2019

View reviewed changes

Comment thread src/panels/developer-tools/state/developer-tools-state.js Outdated

bramkragten reviewed Nov 21, 2019

View reviewed changes

Comment thread src/panels/developer-tools/state/developer-tools-state.js Outdated

homeassistant added cla-signed and removed cla-needed labels Nov 21, 2019

removed old useless code

1554702

Replaced copy button with menu

0e51b78

nicop4 added 2 commits November 24, 2019 20:36

Fix comparison operator & removed commented code

5e5e101

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

Fix spaces

5c231b4

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

bramkragten reviewed Nov 25, 2019

View reviewed changes

Comment thread src/panels/developer-tools/state/developer-tools-state.js Outdated

bramkragten reviewed Nov 25, 2019

View reviewed changes

Comment thread src/panels/developer-tools/state/developer-tools-state.js Outdated

Improve copy attributes

59e8703

only one menu & update translation

42c5b5b

nicop4 changed the title ~~Add "Copy entity ID" button in dev tools/states~~ Add copy entity ID/state/attributes menu button in dev tools/states Nov 27, 2019

bramkragten reviewed Nov 29, 2019

View reviewed changes

Comment thread src/panels/developer-tools/state/developer-tools-state.js Outdated

bramkragten reviewed Nov 29, 2019

View reviewed changes

Comment thread src/panels/developer-tools/state/developer-tools-state.js Outdated

bramkragten reviewed Nov 29, 2019

View reviewed changes

Comment thread src/panels/developer-tools/state/developer-tools-state.js Outdated

copy attributes in yml format

b0bf37f

use paper-icon-item instead of paper-icon-button and add yarn.lock

bramkragten reviewed Nov 29, 2019

View reviewed changes

Comment thread src/panels/developer-tools/state/developer-tools-state.js Outdated

removed paper-item

8f63571

bramkragten approved these changes Nov 30, 2019

View reviewed changes

bramkragten merged commit 4b56db5 into home-assistant:dev Dec 2, 2019

bramkragten mentioned this pull request Dec 4, 2019

20191204.0 #4318

Merged

VDRainer mentioned this pull request Dec 5, 2019

Dev Tools/states 'slowing down browser' #4319

Closed

2 tasks

bramkragten added a commit that referenced this pull request Dec 9, 2019

Revert "Add copy entity ID/state/attributes menu button in dev tools/…

29a684b

…states (#4259)" This reverts commit 4b56db5.

bramkragten mentioned this pull request Dec 9, 2019

Revert "Add copy entity ID/state/attributes menu button in dev tools/states" #4337

Merged

bramkragten mentioned this pull request Nov 9, 2020

Add clipboard button #7607

Closed

9 tasks

github-actions Bot locked and limited conversation to collaborators Jul 5, 2022

		@@ -60,6 +63,10 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
		height: 24px;

Conversation

nicop4 commented Nov 21, 2019

Uh oh!

homeassistant commented Nov 21, 2019

Uh oh!

bramkragten commented Nov 21, 2019

Uh oh!

Uh oh!

Uh oh!

noxhirsch commented Nov 21, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

nicop4 commented Nov 21, 2019

Uh oh!

bramkragten commented Nov 21, 2019

Uh oh!

noxhirsch commented Nov 21, 2019

Uh oh!

nicop4 commented Nov 21, 2019

Uh oh!

nicop4 commented Nov 24, 2019

Uh oh!

noxhirsch commented Nov 24, 2019

Uh oh!

nicop4 commented Nov 24, 2019

Uh oh!

noxhirsch commented Nov 24, 2019

Uh oh!

SeanPM5 commented Nov 24, 2019

Uh oh!

nicop4 commented Nov 25, 2019

Uh oh!

Uh oh!

Uh oh!

nicop4 commented Nov 25, 2019

Uh oh!

Uh oh!

bramkragten Nov 29, 2019

Choose a reason for hiding this comment

Uh oh!

nicop4 Nov 29, 2019

Choose a reason for hiding this comment

Uh oh!

bramkragten Nov 29, 2019

Choose a reason for hiding this comment

Uh oh!

nicop4 Nov 30, 2019

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

bramkragten commented Nov 29, 2019

Uh oh!

nicop4 commented Nov 29, 2019

Uh oh!

Uh oh!

nicop4 commented Dec 2, 2019

Uh oh!

jazzmonger commented Dec 24, 2020

Uh oh!

nicop4 commented Dec 24, 2020

Uh oh!

jazzmonger commented Dec 24, 2020

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

noxhirsch commented Nov 21, 2019 •

edited

Loading