CrateSidebar: Show Package URL in "Metadata" section

Author: Turbo87

app/components/crate-sidebar.hbs

@@ -6,6 +6,12 @@
   <div local-class="metadata">
     <h2 local-class="heading">Metadata</h2>
 
+    <div local-class="purl" data-test-purl {{on "click" (fn this.copyToClipboard @version.purl)}}>
+      {{svg-jar "link"}}
+      <span>{{@version.purl}}</span>
+      <Tooltip local-class="purl-tooltip"><strong>Package URL:</strong> {{@version.purl}} <small>(click to copy)</small></Tooltip>
+    </div>
+
     <time
       datetime={{date-format-iso @version.created_at}}
       local-class="date"

app/components/crate-sidebar.js

@@ -1,3 +1,4 @@
+import { action } from '@ember/object';
 import { service } from '@ember/service';
 import Component from '@glimmer/component';
 
@@ -6,6 +7,7 @@ import { didCancel } from 'ember-concurrency';
 import { simplifyUrl } from './crate-sidebar/link';
 
 export default class CrateSidebar extends Component {
+  @service notifications;
   @service playground;
   @service sentry;
 
@@ -39,4 +41,14 @@ export default class CrateSidebar extends Component {
       }
     });
   }
+
+  @action
+  async copyToClipboard(text) {
+    try {
+      await navigator.clipboard.writeText(text);
+      this.notifications.success('Copied to clipboard!');
+    } catch {
+      this.notifications.error('Copy to clipboard failed!');
+    }
+  }
 }

app/components/crate-sidebar.module.css

@@ -22,7 +22,8 @@
 .msrv,
 .edition,
 .license,
-.bytes {
+.bytes,
+.purl {
     display: flex;
     align-items: center;
 
@@ -52,6 +53,26 @@
     font-variant-numeric: tabular-nums;
 }
 
+.purl {
+    cursor: pointer;
+
+    > span {
+        word-break: break-all;
+        max-width: 100%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+}
+
+.purl-tooltip {
+    word-break: break-all;
+
+    > small {
+        word-break: normal;
+    }
+}
+
 .links {
     > * + * {
         margin-top: var(--space-m);