From 516a03be0962865b7f25fa47cd5ffcf75b943718 Mon Sep 17 00:00:00 2001
From: Martin Brennan <mjrbrennan@gmail.com>
Date: Mon, 22 Jun 2020 13:14:16 +1000
Subject: [PATCH] FIX: Improve admin permalink UX (#10101)

The admin permalink list was a little tricky to use because the URLs are easily reduced with a ... if they are too long. This adds a copy to clipboard button for the URL and a title on hover so the full text of the URL can be seen.
---
 .../javascripts/admin/controllers/admin-permalinks.js  | 10 ++++++++++
 .../admin/templates/components/permalink-form.hbs      |  1 +
 app/assets/javascripts/admin/templates/permalinks.hbs  |  4 ++--
 app/assets/stylesheets/common/admin/customize.scss     |  2 +-
 config/locales/client.en.yml                           |  3 ++-
 5 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/app/assets/javascripts/admin/controllers/admin-permalinks.js b/app/assets/javascripts/admin/controllers/admin-permalinks.js
index 177bb4148db..23c47f57399 100644
--- a/app/assets/javascripts/admin/controllers/admin-permalinks.js
+++ b/app/assets/javascripts/admin/controllers/admin-permalinks.js
@@ -22,6 +22,16 @@ export default Controller.extend({
       this.model.unshiftObject(arg);
     },
 
+    copyUrl(pl) {
+      let linkElement = document.querySelector(`#admin-permalink-${pl.id}`);
+      let textArea = document.createElement("textarea");
+      textArea.value = linkElement.textContent;
+      document.body.appendChild(textArea);
+      textArea.select();
+      document.execCommand("Copy");
+      textArea.remove();
+    },
+
     destroy: function(record) {
       return bootbox.confirm(
         I18n.t("admin.permalink.delete_confirm"),
diff --git a/app/assets/javascripts/admin/templates/components/permalink-form.hbs b/app/assets/javascripts/admin/templates/components/permalink-form.hbs
index 1f5d1c06f21..8792d78734c 100644
--- a/app/assets/javascripts/admin/templates/components/permalink-form.hbs
+++ b/app/assets/javascripts/admin/templates/components/permalink-form.hbs
@@ -12,6 +12,7 @@
   content=permalinkTypes
   value=permalinkType
   onChange=(action (mut permalinkType))
+  class="permalink-type"
 }}
 
 {{text-field
diff --git a/app/assets/javascripts/admin/templates/permalinks.hbs b/app/assets/javascripts/admin/templates/permalinks.hbs
index 1424e530b9c..a66151140aa 100644
--- a/app/assets/javascripts/admin/templates/permalinks.hbs
+++ b/app/assets/javascripts/admin/templates/permalinks.hbs
@@ -21,7 +21,7 @@
       <tbody>
         {{#each model as |pl|}}
           <tr class="admin-list-item">
-            <td class="col first url">{{pl.url}}</td>
+            <td class="col first url">{{d-button title="admin.permalink.copy_to_clipboard" icon="far-clipboard" action=(action "copyUrl" pl)}} <span id="admin-permalink-{{pl.id}}" title={{pl.url}}>{{pl.url}}</span></td>
             <td class="col destination">
               {{#if pl.topic_id}}
                 <a href={{pl.topic_url}}>{{pl.topic_title}}</a>
@@ -42,7 +42,7 @@
                 <a href={{pl.external_url}}>{{pl.external_url}}</a>
               {{/if}}
             </td>
-            <td class="col action">
+            <td class="col action" style="text-align: right;">
               {{d-button action=(action "destroy") actionParam=pl icon="far-trash-alt" class="btn-danger"}}
             </td>
           </tr>
diff --git a/app/assets/stylesheets/common/admin/customize.scss b/app/assets/stylesheets/common/admin/customize.scss
index 7fd4fc4f4c3..5f24c7b9461 100644
--- a/app/assets/stylesheets/common/admin/customize.scss
+++ b/app/assets/stylesheets/common/admin/customize.scss
@@ -623,7 +623,7 @@
   }
 
   .select-kit {
-    width: 150px;
+    width: 200px;
   }
   input {
     margin: 5px 0;
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index 301e9d522b9..0045b41d076 100644
--- a/config/locales/client.en.yml
+++ b/config/locales/client.en.yml
@@ -4760,8 +4760,9 @@ en:
         category_id: "Category ID"
         category_title: "Category"
         tag_name: "Tag name"
-        external_url: "External URL"
+        external_url: "External or Relative URL"
         destination: "Destination"
+        copy_to_clipboard: "Copy Permalink to Clipboard"
         delete_confirm: Are you sure you want to delete this permalink?
         form:
           label: "New:"