Add copy button to demo site URL

[derekblank]

Related to:

• Feature Request: Add Copy Short #56

Proposed Changes

Adds copy button to easily copy demo site URLs, using the same behavior for copying text on the Settings tab.

Testing Instructions

1. Add a site from the sidebar, and then add a demo site from the new site's Share tab.
2. Once the demo site is created, click the copy icon next to the URL (screenshot above).
3. Observe that the URL is copied to the clipboard.

Pre-merge Checklist

• Have you checked for TypeScript, React or other console errors?

[katinthehatsite]

The changes work as expected on my end! Nice work 👍

[wojtekn]

@derekblank, thanks for that improvement. I used to need to open the demo site in a browser to copy the URL, but now I can do that easily without that step.

My only concern is that the helper icon appended to the link/text causes a different action than the preceding link/text, and this behavior is different from links in the Settings tabs. @matt-west as you shared those concerns in the past, what do you think?

[matt-west]

Let's keep the behaviour consistent with URLs on the settings pane. So the URL should be the regular text color, and clicking it copies rather than launching the browser.

[derekblank]

Let's keep the behaviour consistent with URLs on the settings pane. So the URL should be the regular text color, and clicking it copies rather than launching the browser.

@matt-west Updated. The Demo Site URL button now matches the behavior of the Settings tab, where clicking it copies the URL (and does not open the URL in a browser).

copy-text.mov

[matt-west]

Thanks @derekblank!

[fluiddot]

LGTM 🎊 !