From 65dd53ac5f89c048e313591c4f92ef497d14a801 Mon Sep 17 00:00:00 2001
From: Marliana Lara <marliana.lara@gmail.com>
Date: Thu, 11 May 2017 15:27:10 -0400
Subject: [PATCH] Add ability to copy revision hash to clipboard

*Update copy link styles to match app theme
---
 awx/ui/client/src/projects/projects.list.js   |  3 +-
 .../projects/revisions/revisions.block.less   | 22 +++++++++
 .../projects/revisions/revisions.directive.js | 47 ++++++++++++++++---
 .../projects/revisions/revisions.partial.html | 11 ++---
 awx/ui/client/src/shared/generator-helpers.js |  6 ++-
 5 files changed, 72 insertions(+), 17 deletions(-)
 create mode 100644 awx/ui/client/src/projects/revisions/revisions.block.less

diff --git a/awx/ui/client/src/projects/projects.list.js b/awx/ui/client/src/projects/projects.list.js
index eacfdb72d4..9d03e69d3a 100644
--- a/awx/ui/client/src/projects/projects.list.js
+++ b/awx/ui/client/src/projects/projects.list.js
@@ -48,8 +48,7 @@ export default ['i18n', function(i18n) {
             scm_revision: {
                 label: i18n._('Revision'),
                 excludeModal: true,
-                columnClass: 'col-lg-4 col-md-2 col-sm-3 hidden-xs',
-                class: 'List-staticColumnAdjacent--monospace',
+                columnClass: 'List-tableCell col-lg-4 col-md-2 col-sm-3 hidden-xs',
                 type: 'revision'
             },
             last_updated: {
diff --git a/awx/ui/client/src/projects/revisions/revisions.block.less b/awx/ui/client/src/projects/revisions/revisions.block.less
new file mode 100644
index 0000000000..ddfd44c305
--- /dev/null
+++ b/awx/ui/client/src/projects/revisions/revisions.block.less
@@ -0,0 +1,22 @@
+@import "./client/src/shared/branding/colors.default.less";
+
+.RevisionHash {
+    display: flex;
+    align-items: center;
+}
+
+.RevisionHash-name {
+    font-family: monospace; 
+}
+
+.RevisionHash-copy {
+    color: @default-link;
+    text-transform: uppercase;
+    cursor: pointer;
+    font-size: 11px;
+    margin-left: 5px;
+}
+
+.RevisionHash-copy:hover {
+    color: @default-link-hov;
+}
\ No newline at end of file
diff --git a/awx/ui/client/src/projects/revisions/revisions.directive.js b/awx/ui/client/src/projects/revisions/revisions.directive.js
index 75f261e392..c470739108 100644
--- a/awx/ui/client/src/projects/revisions/revisions.directive.js
+++ b/awx/ui/client/src/projects/revisions/revisions.directive.js
@@ -9,14 +9,49 @@ export default
                 scope: false,
                 templateUrl: templateUrl('projects/revisions/revisions'),
                 link: function(scope)  {
-                    var full_revision = scope.project.scm_revision;
-                    console.log(scope.project.scm_revision);
-                    scope.seeMoreInactive = true;
-                    scope.count = scope.project.scm_revision.length;
+                    let full_revision = scope.project.scm_revision;
                     scope.revisionHash = $filter('limitTo')(full_revision, 7, 0);
+                    scope.count = scope.project.scm_revision.length;
 
-                    scope.Copy = function() {
-                        console.log('copy');
+                    scope.copyRevisionHash = function() {
+                        let textArea = document.createElement("textarea");
+
+                        // Place in top-left corner of screen regardless of scroll position.
+                        textArea.style.position = 'fixed';
+                        textArea.style.top = 0;
+                        textArea.style.left = 0;
+
+                        // Ensure it has a small width and height. Setting to 1px / 1em
+                        // doesn't work as this gives a negative w/h on some browsers.
+                        textArea.style.width = '2em';
+                        textArea.style.height = '2em';
+
+                        // We don't need padding, reducing the size if it does flash render.
+                        textArea.style.padding = 0;
+
+                        // Clean up any borders.
+                        textArea.style.border = 'none';
+                        textArea.style.outline = 'none';
+                        textArea.style.boxShadow = 'none';
+
+                        // Avoid flash of white box if rendered for any reason.
+                        textArea.style.background = 'transparent';
+
+                        textArea.value = full_revision;
+
+                        document.body.appendChild(textArea);
+
+                        textArea.select();
+
+                        try {
+                            var successful = document.execCommand('copy');
+                            var msg = successful ? 'successful' : 'unsuccessful';
+                            console.log('Copying text command was ' + msg);
+                        } catch (err) {
+                            console.log('Oops, unable to copy');
+                        }
+
+                        document.body.removeChild(textArea);
                     };
                 }
             };
diff --git a/awx/ui/client/src/projects/revisions/revisions.partial.html b/awx/ui/client/src/projects/revisions/revisions.partial.html
index 10f8b5ecfc..a20f7a9317 100644
--- a/awx/ui/client/src/projects/revisions/revisions.partial.html
+++ b/awx/ui/client/src/projects/revisions/revisions.partial.html
@@ -1,9 +1,6 @@
-<div class="Revision-tag">
-    <span class="Revision-name">{{revisionHash}}</span>
+<div class="RevisionHash-tag">
+    <span class="RevisionHash-name">{{revisionHash}}</span>
 </div>
-<div class="Revision-seeMoreLess" ng-if="count > 7 && seeMoreInactive" ng-click="seeMore()">
-    View More
+<div class="RevisionHash-copy" ng-if="count > 7" ng-click="copyRevisionHash()">
+    Copy
 </div>
-<div class="Revision-seeMoreLess" ng-if="count > 7 && !seeMoreInactive" ng-click="seeLess()">
-    View Less
-</div>
\ No newline at end of file
diff --git a/awx/ui/client/src/shared/generator-helpers.js b/awx/ui/client/src/shared/generator-helpers.js
index d4c4a7ddc2..7d5f6dac8b 100644
--- a/awx/ui/client/src/shared/generator-helpers.js
+++ b/awx/ui/client/src/shared/generator-helpers.js
@@ -502,9 +502,11 @@ angular.module('GeneratorHelpers', [systemStatus.name])
 </td>
                 `;
             } else if (field.type === 'revision') {
+                classList = (field.columnClass) ?
+                Attr(field, 'columnClass') : "";
                 html += `
-                <td>
-                    <revisions></revisions>    
+                <td ${classList}>
+                    <revisions class=\"RevisionHash\"></revisions>    
                 </td>`;
             } else if (field.type === 'badgeCount') {
                 html = BadgeCount(params);