Auto merge of #1897 - DSpeckhals:search-result-page-copy, r=carols10cents

Add Cargo.toml copy button to crate rows

To copy the most recent version of a crate to the clipboard, users would have to go to the crate's individual page. However, it would probably be convenient to have the same control on the search results page. To accomplish this, a new component was created to encapsulate the copy control and its notifications (success/failure). This new component was added to the search result page; the crate page was reworked to use it as well.

For this first run at the UI, I added the same copy button to the left of the name/link for the result. I'm open to any other ideas too!

Here are some screenshots to illustrate the changes:

### Crate Page

![Screenshot from 2019-11-14 12-33-09](https://user-images.githubusercontent.com/3310769/68895522-74884d80-06f7-11ea-9fa4-befbf5f44329.png)

![Screenshot from 2019-11-14 12-32-03](https://user-images.githubusercontent.com/3310769/68895511-6d613f80-06f7-11ea-9d2a-ecdf031325d5.png)

### Results Page
![Screenshot from 2019-11-14 14-24-57](https://user-images.githubusercontent.com/3310769/68895552-836f0000-06f7-11ea-820c-137f772cb2ab.png)

Fixes #1587

Author: bors

app/components/crate-row.js

@@ -1,7 +1,11 @@
 import Component from '@ember/component';
+import { computed } from '@ember/object';
 
 export default Component.extend({
   classNames: ['crate', 'row'],
+  crateTomlText: computed('crate.name', 'max_version', function() {
+    return `${this.get('crate.name')} = "${this.get('crate.max_version')}"`;
+  }),
 
   'data-test-crate-row': true,
 });

app/components/crate-toml-copy.js

@@ -0,0 +1,32 @@
+import Component from '@ember/component';
+import { later } from '@ember/runloop';
+
+export default Component.extend({
+  classNames: ['crate-toml-copy'],
+  copyText: '',
+  showSuccess: false,
+  showNotification: false,
+  toggleClipboardProps(isSuccess) {
+    this.setProperties({
+      showSuccess: isSuccess,
+      showNotification: true,
+    });
+    later(
+      this,
+      () => {
+        this.set('showNotification', false);
+      },
+      2000,
+    );
+  },
+  actions: {
+    copySuccess(event) {
+      event.clearSelection();
+      this.toggleClipboardProps(true);
+    },
+
+    copyError() {
+      this.toggleClipboardProps(false);
+    },
+  },
+});

app/controllers/crate/version.js

@@ -4,7 +4,6 @@ import Controller from '@ember/controller';
 import PromiseProxyMixin from '@ember/object/promise-proxy-mixin';
 import ArrayProxy from '@ember/array/proxy';
 import { computed, observer } from '@ember/object';
-import { later } from '@ember/runloop';
 import moment from 'moment';
 
 const NUM_VERSIONS = 5;
@@ -25,6 +24,9 @@ export default Controller.extend({
   fetchingFollowing: true,
   following: false,
   currentVersion: alias('model'),
+  crateTomlText: computed('crate.name', 'currentVersion.num', function() {
+    return `${this.get('crate.name')} = "${this.get('currentVersion.num')}"`;
+  }),
   requestedVersion: null,
   keywords: alias('crate.keywords'),
   categories: alias('crate.categories'),
@@ -152,30 +154,7 @@ export default Controller.extend({
     return data;
   }),
 
-  toggleClipboardProps(isSuccess) {
-    this.setProperties({
-      showSuccess: isSuccess,
-      showNotification: true,
-    });
-    later(
-      this,
-      () => {
-        this.set('showNotification', false);
-      },
-      2000,
-    );
-  },
-
   actions: {
-    copySuccess(event) {
-      event.clearSelection();
-      this.toggleClipboardProps(true);
-    },
-
-    copyError() {
-      this.toggleClipboardProps(false);
-    },
-
     toggleFollow() {
       this.set('fetchingFollowing', true);
 

app/styles/crate.scss

@@ -88,6 +88,28 @@
     }
 }
 
+.crate-toml-copy {
+    button, button:active {
+        background-color: #FFFFFF;
+        border: none;
+        cursor: pointer;
+        position: relative;
+    }
+
+    .copy-notification {
+        font-size: 70%;
+        font-weight: bold;
+        position: absolute;
+
+        &.copy-success {
+            color: $link-color;
+        }
+        &.copy-failure {
+            color: red;
+        }
+    }
+}
+
 #results {
     width: 100%;
     @include display-flex;
@@ -132,6 +154,35 @@
         width: 75%;
     }
 
+    .crate-toml-copy {
+        display: inline-block;
+
+        button, button:active {
+            padding: 0 .2rem;
+            outline: 0;
+
+            &:hover {
+                background: inherit;
+            }
+
+            svg {
+                height: 1rem;
+                width: 1rem;
+            }
+
+            .copy-notification {
+                top: -1.25rem;
+                left: 0;
+                padding: 0;
+                text-align: left;
+                width: 4rem;
+
+                &.copy-failure {
+                    width: 15rem;
+                }
+            }
+        }
+    }
     .info a {
         color: $main-color;
         font-weight: bold;
@@ -300,33 +351,36 @@
             color: white;
             padding: 20px;
         }
-        button, button:active {
-            padding: 5px 0;
-            background-color: #FFFFFF;
-            border: none;
-            width: 60px;
-            cursor: pointer;
-        }
-        button:hover {
-            background: #edebdd;
-        }
         @media only screen and (min-width: 500px) {
             .action { @include flex(2); display: block; }
             code { @include flex(8); }
         }
-    }
-    .copy-result {
-        text-align: right;
+        .crate-toml-copy {
+            display: flex;
 
-        span {
-            font-size: 80%;
-            font-weight: bold;
-        }
-        .copy-success {
-            color: $link-color;
-        }
-        .copy-failure {
-            color: red;
+            button, button:active {
+                padding: 5px 0;
+                width: 60px;
+                cursor: pointer;
+                position: relative;
+            }
+            button:hover {
+                background: #edebdd;
+            }
+
+            .copy-notification {
+                &.copy-success {
+                    width: 100%;
+                    text-align: center;
+                }
+
+                &.copy-failure {
+                    bottom: -2rem;
+                    right: 0;
+                    width: 18rem;
+                    text-align: right;
+                }
+            }
         }
     }
     .crate-readme {

app/templates/components/crate-row.hbs

@@ -1,6 +1,7 @@
 <div class='desc'>
   <div class='info'>
     {{#link-to 'crate' crate.id data-test-crate-link}}{{ crate.name }}{{/link-to}}
+    {{crate-toml-copy copyText=crateTomlText}}
     {{crate-badge crate=crate}}
     {{#each crate.annotated_badges as |badge|}}
       {{component badge.component_name badge=badge data-test-badge=badge.badge_type}}

app/templates/components/crate-toml-copy.hbs

@@ -0,0 +1,12 @@
+{{#copy-button clipboardText=copyText success=(action 'copySuccess') error=(action 'copyError') title="Copy Cargo.toml snippet to clipboard"}}
+  {{svg-jar "copy" alt="Copy Cargo.toml snippet to clipboard"}}
+  <div class="copy-notification {{if showSuccess "copy-success" "copy-failure"}}">
+    {{#if showNotification}}
+      {{#if showSuccess}}
+        Copied!
+      {{else}}
+        An error occured. Please use CTRL+C.
+      {{/if}}
+    {{/if}}
+  </div>
+{{/copy-button}}

app/templates/crate/version.hbs

@@ -65,24 +65,11 @@
     {{else}}
       <div class='install'>
         <div class='action'>Cargo.toml</div>
-        <code id="crate-toml">{{ crate.name }} = "{{ currentVersion.num }}"</code>
+        <code id="crate-toml">{{ crateTomlText }}</code>
         {{#if (is-clipboard-supported)}}
-          {{#copy-button clipboardTarget="#crate-toml" success=(action 'copySuccess') error=(action 'copyError') title="Copy to clipboard"}}
-            {{svg-jar "copy" alt="Copy to clipboard"}}
-          {{/copy-button}}
+          {{crate-toml-copy copyText=crateTomlText}}
         {{/if}}
       </div>
-      <div class="copy-result">
-        <span id="copy-notification" class="{{if showSuccess "copy-success" "copy-failure"}}">
-          {{#if showNotification}}
-            {{#if showSuccess}}
-              Copied!
-            {{else}}
-              An error occured. Please use CTRL+C.
-            {{/if}}
-          {{/if}}
-        </span>
-      </div>
       {{#if crate.readme}}
         <section class="crate-readme" aria-label="Readme">
           {{crate-readme rendered=crate.readme}}