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.

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"),

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

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>

app/assets/stylesheets/common/admin/customize.scss

@@ -623,7 +623,7 @@
   }
 
   .select-kit {
-    width: 150px;
+    width: 200px;
   }
   input {
     margin: 5px 0;

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:"