Copy button - Details page

[trmendes]

What does this PR do?

It makes usage of the “Copy To Clipboard” component, so the users can copy the title of the details page to the clipboard.

Screenshot / video of UI

What issues does this PR fix or reference?

Fixes #4241

How to test this PR?

1. Open the detail page
2. Click on the copy button
3. Check if the title is present on your clipboard as expected

[trmendes]

Not very happy with the layout of it. Any suggestions and hints for the CSS?

[benoitf]

I think it's around the vertical alignment (I have not looked at the html elements being currently used to give you the proper answer but hints would be around items-center, align-middle, etc

[trmendes]

@dgolovin Thank you do much for your guidance with CSS :)

It looks much better now <3

[benoitf]

I find confusing the clipboard button being in the middle of the line as I'm not sure what it could copy

I don't know if we need to move the sha to a newline or think in a different way or just copy the sha and not the image name (so button is at the right)

[trmendes]

@benoitf I completely agree, and I experienced the same feeling of confusion when opening the panel to take the screenshot.

I might be a bit busy with an interview this week, but I will come back to it, do some experiments and post screenshots here as soon as possible.

Thanks for your comment :)

[benoitf]

@trmendes good stuff anyway

maybe to be less confusing it's to have the icon appearing only on hover and a different background including both the thing to copy and the copy button so we see that it's the 'same unit'

I'll let others comment here

[trmendes]

@benoitf I took a quick look at docker desktop to see how they handle that sort of information, and they actually have a copy button for the hash and not for the object name. They also print the tag along with the name.

What is the reason(s) we choose copying the name over hash?

[benoitf]

cc @mairin

[axel7083]

cc @mairin

I had something similar open long time ago see @mairin comment on the subject #4242 (comment)

[mairin]

@axel7083 Yep exactly what I was gonna suggest :) Here's a prototype, it's a little hairy but you get the idea:

https://design.penpot.app/#/view/43442e9d-d45f-8169-8003-daff3cb3e0b8?page-id=43442e9d-d45f-8169-8003-daff3cb3e0b9&section=interactions&index=0&share-id=93d0ad32-dfe5-8194-8003-db0444b2c3bf

Screencast.from.2024-02-06.10-34-52.webm

[feloy]

I find confusing the clipboard button being in the middle of the line as I'm not sure what it could copy

I don't know if we need to move the sha to a newline or think in a different way or just copy the sha and not the image name (so button is at the right)

I would move the icon closer to the text it copies. Here it is exactly in the middle, the reason why IMO it is confusing.

[deboer-tim]

+1 to design from @mairin. That's a much cleaner look, which means we could use it in far more places (e.g. we don't need to decide between name or hash, both could allow copying without any UI clutter or confusion).

CopyToClipboard is already used in Preferences > Resources page (#5687), I think the question is whether we use it here basically as-is or refactor it to the design first. Since there are multiple comments on placement I'd prefer the latter, also so that we wouldn't add buttons and then 'remove' them later.

[feloy]

+1 to design from @mairin. That's a much cleaner look, which means we could use it in far more places (e.g. we don't need to decide between name or hash, both could allow copying without any UI clutter or confusion).

CopyToClipboard is already used in Preferences > Resources page (#5687), I think the question is whether we use it here basically as-is or refactor it to the design first. Since there are multiple comments on placement I'd prefer the latter, also so that we wouldn't add buttons and then 'remove' them later.

My only concern about these popup on which we need to click (not specifically here, but in different apps/websites), is related to accessibility and that you have to be quite precise with your mouse and don't move too much, or the popup disappears before you can click on it. And is it usable with keyboard only?

[deboer-tim]

My only concern about these popup on which we need to click (not specifically here, but in different apps/websites), is related to accessibility and that you have to be quite precise with your mouse and don't move too much, or the popup disappears before you can click on it.

Agreed, we need to make sure it is not finicky and mouse-over area is generous. Could be other things we could do too, e.g. maybe clicking on the text keeps the popup open?

And is it usable with keyboard only?

FWIW, I just checked what to me is the 'Mac equivalent': copying a password from the password manager. When you're using the keyboard you never see the popup - when you tab in it auto-selects all the text and a normal Ctrl-C works fine.

[mairin]

@deboer-tim Ah that is what I would suggest for keyboard... just enable ctrl+c on copyable fields on focus.

[benoitf]

converting do draft