Copy dev profile #337

gathuku · 2022-03-19T11:44:03Z

Pull request checklist

Your code contains tests relevant for code you modified
You have linted and tested the project with bin/check

TODO

Replace flash if exists
Show for admin only
closes Button to copy hero/URL of developer profile #326

gathuku · 2022-03-19T13:06:30Z

@joemasilotti This will append many flash messages if you click many times, do you like the behavior?
Looking forward to using turbo stream update/replace

joemasilotti · 2022-03-19T15:34:37Z

Hmm. I'm wondering if changing the copy icon to a check when clicking is a better approach. We could even clear it after a few seconds. Tailwind UI does this and it works quite well.

gathuku · 2022-03-21T06:58:03Z

That will make it simpler, do you have an example from the tailwind UI?

joemasilotti · 2022-03-21T16:25:24Z

If you visit any Tailwind UI example there's a clipboard icon to the right to copy the code.

Default:

Hover:

Clicked:

I don't think we need the tooltip, though. Instead, let's swap out the copy icon with a check (Heroics check) on click. And change it back after 2 seconds.

gathuku · 2022-03-26T19:33:32Z

I have changed this to , do you have some ideas how this can be tested?

when clicked

joemasilotti · 2022-03-26T20:24:53Z

If you set a title in the SVG you can query for it with a CSS selector. There's an example somewhere in the codebase.

As for copy and clipboard, I'm not 100% sure. Might have to get creative if there isn't something built in to capybara.

app/components/developer_primary_action_component.html.erb

joemasilotti · 2022-03-31T22:19:42Z

app/components/developer_primary_action_component.html.erb

+    <%= inline_svg_tag "icons/solid/document-duplicate.svg", class: "h-6 w-5", data: {clipboard_target: "toggleable"} %>
+    <%= inline_svg_tag "icons/solid/check.svg", class: "h-6 w-5 text-green-500 hidden", data: {clipboard_target: "toggleable"} %>


I'd love to get rid of the mismatched height/width calls, if possible. Because I'd be inclined to change them both to *-5 but that would break the layout!

What about getting rid with w-5 and remain with height?

I think the question is more "Why does `w-5 h-5 not work here" when it works everywhere else. Are we missing a flex tag or something?

joemasilotti · 2022-03-31T22:21:58Z

app/javascript/controllers/clipboard_controller.js

+  static targets = ["toggleable"];
+
+  copy({ target: { value } }) {
+    navigator.clipboard.writeText(value);


It seems like this is copying plain text and not text/html. This SO question has a few answers that could help. The accepted on, even though it is a lot of code, does indeed work for me. You can test by pasting the copied code into an email client.

I don't know how trello works but if you paste a link https://railsdevs.com/developers/35
It's able to transform to

That's only the link though. Trello is fetching the title by crawling the page and populating it from <title>.

We want full HTML to be copied, so the text with an embedded link. Not only a link by itself.

app/javascript/controllers/index.js

joemasilotti · 2022-03-31T22:23:07Z

app/components/developer_primary_action_component.html.erb

@@ -8,4 +8,11 @@
    <%= inline_svg_tag "icons/solid/briefcase.svg", class: "-ml-1 mr-3 h-5 w-5" %>
    <%= t("developers.show.hire") %>
  <% end %>
+
+  <% if admin? %>
+  <button data-controller="clipboard" data-action="click->clipboard#copy click->clipboard#toggle" value="<a href='<%= developer_url(@developer) %>'><%= @developer.hero %></a>" type="button" class="shrink-0 mt-4 md:mt-0 inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-base font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">


Is shoving this in the value the best approach? I wonder if it would be better to move this to a hidden element inside the controller with a target. But read my comment below on text/html first because that might help guide you a bit.

joemasilotti · 2022-04-07T14:16:29Z

Hey @gathuku, do you still have the appetite to get this across the finish line? I made a lot of comments in the PR review. If not, let me know and I can take over.

gathuku · 2022-04-07T14:19:44Z

Sure, Am willing to look at it, i might want your help on testing.

joemasilotti · 2022-04-07T14:26:14Z

Sure thing! Let me know when you want to hand it off and I will take it from there.

gathuku · 2022-04-07T14:29:16Z

Tried something like this with no success

  test "should show copy icon to admin user" do
    user = users(:admin)
    render_inline DeveloperPrimaryActionComponent.new(user:, developer: @developer)

    assert_selector "svg[title='document duplicate']"
end

joemasilotti · 2022-04-07T17:45:35Z

app/assets/images/icons/solid/document-duplicate.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">


@gathuku, you have to add the title attribute here for the query to work.

joemasilotti · 2022-04-22T15:39:32Z

Hey @gathuku, are you still working on this? I use a workaround every day that could be sped up a ton by this PR being merged so I'd love to see it get deployed soon. Let me know if you'd rather pass it off and I can take it from here!

gathuku · 2022-04-22T15:44:10Z

Hey @gathuku, are you still working on this? I use a workaround every day that could be sped up a ton by this PR being merged so I'd love to see it get deployed soon. Let me know if you'd rather pass it off and I can take it from here!

It's okay @joemasilotti . Please pick it, i will follow how you implement this.
Thank you.

gathuku added 6 commits March 19, 2022 13:09

add copy btn

7daf5af

add clipboard controller

8de1ee6

flash notice with turbo frame

2379fa8

normalize i18n

c2958d6

show for admin only

f640e3e

update component tests

010fd66

gathuku added 2 commits March 26, 2022 22:15

toggle copied with a check icon

648e483

cleanup previous implementation

25bf4b6

joemasilotti requested changes Mar 31, 2022

View reviewed changes

joemasilotti mentioned this pull request Apr 7, 2022

Add "Invisiblize" button on developer profiles (for admins) #367

Closed

7 tasks

gathuku added 2 commits April 7, 2022 18:07

stimulus manifest update

e589956

fix indentation and update color to green 600

46f8081

joemasilotti reviewed Apr 7, 2022

View reviewed changes

joemasilotti added 5 commits April 22, 2022 12:33

Rework JavaScript clipboard API to work with HTML

8ecc150

Merge branch 'main' into copy-dev-profile

65aaf9f

Copy both plain text and HTML to clipboard

0c406a1

Fix indentation

a58703a

Move admin actions to bottom of details aside

e8abbd1

joemasilotti merged commit 67b5438 into joemasilotti:main Apr 22, 2022
5 checks passed

Copy dev profile #337

Copy dev profile #337

gathuku commented Mar 19, 2022 •

edited

gathuku commented Mar 19, 2022 •

edited

joemasilotti commented Mar 19, 2022

gathuku commented Mar 21, 2022

joemasilotti commented Mar 21, 2022

gathuku commented Mar 26, 2022 •

edited

joemasilotti commented Mar 26, 2022

joemasilotti Mar 31, 2022

gathuku Apr 7, 2022

joemasilotti Apr 7, 2022

joemasilotti Mar 31, 2022

gathuku Apr 7, 2022

joemasilotti Apr 7, 2022

joemasilotti Mar 31, 2022

joemasilotti commented Apr 7, 2022

gathuku commented Apr 7, 2022 •

edited

joemasilotti commented Apr 7, 2022

gathuku commented Apr 7, 2022 •

edited

joemasilotti Apr 7, 2022

joemasilotti commented Apr 22, 2022

gathuku commented Apr 22, 2022

		<%= inline_svg_tag "icons/solid/document-duplicate.svg", class: "h-6 w-5", data: {clipboard_target: "toggleable"} %>
		<%= inline_svg_tag "icons/solid/check.svg", class: "h-6 w-5 text-green-500 hidden", data: {clipboard_target: "toggleable"} %>

		@@ -0,0 +1,4 @@
		<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">

Copy dev profile #337

Copy dev profile #337

Conversation

gathuku commented Mar 19, 2022 • edited

Pull request checklist

gathuku commented Mar 19, 2022 • edited

joemasilotti commented Mar 19, 2022

gathuku commented Mar 21, 2022

joemasilotti commented Mar 21, 2022

gathuku commented Mar 26, 2022 • edited

joemasilotti commented Mar 26, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

joemasilotti commented Apr 7, 2022

gathuku commented Apr 7, 2022 • edited

joemasilotti commented Apr 7, 2022

gathuku commented Apr 7, 2022 • edited

Choose a reason for hiding this comment

joemasilotti commented Apr 22, 2022

gathuku commented Apr 22, 2022

gathuku commented Mar 19, 2022 •

edited

gathuku commented Mar 19, 2022 •

edited

gathuku commented Mar 26, 2022 •

edited

gathuku commented Apr 7, 2022 •

edited

gathuku commented Apr 7, 2022 •

edited