Add ability to copy revision hash to clipboard

*Update copy link styles to match app theme

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',
+                columnClass: 'List-tableCell col-lg-4 col-md-2 col-sm-3 hidden-xs',
-                class: 'List-staticColumnAdjacent--monospace',
                 type: 'revision'
             },
             last_updated: {

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;
+}

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;
+                    let full_revision = scope.project.scm_revision;
-                    console.log(scope.project.scm_revision);
-                    scope.seeMoreInactive = true;
-                    scope.count = scope.project.scm_revision.length;
                     scope.revisionHash = $filter('limitTo')(full_revision, 7, 0);
+                    scope.count = scope.project.scm_revision.length;
 
-                    scope.Copy = function() {
+                    scope.copyRevisionHash = function() {
-                        console.log('copy');
+                        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);
                     };
                 }
             };

awx/ui/client/src/projects/revisions/revisions.partial.html

@@ -1,9 +1,6 @@
-<div class="Revision-tag">
+<div class="RevisionHash-tag">
-    <span class="Revision-name">{{revisionHash}}</span>
+    <span class="RevisionHash-name">{{revisionHash}}</span>
 </div>
-<div class="Revision-seeMoreLess" ng-if="count > 7 && seeMoreInactive" ng-click="seeMore()">
+<div class="RevisionHash-copy" ng-if="count > 7" ng-click="copyRevisionHash()">
-    View More
+    Copy
 </div>
-<div class="Revision-seeMoreLess" ng-if="count > 7 && !seeMoreInactive" ng-click="seeLess()">
-    View Less
-</div>

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>
+                <td ${classList}>
-                    <revisions></revisions>    
+                    <revisions class=\"RevisionHash\"></revisions>    
                 </td>`;
             } else if (field.type === 'badgeCount') {
                 html = BadgeCount(params);