Merge pull request #6253 from marshmalien/truncateRevisionHash

Abbreviate revision hash within the Projects panel

awx/ui/client/src/projects/main.js

@@ -13,9 +13,10 @@ import { N_ } from '../i18n';
 import GetProjectPath from './factories/get-project-path.factory';
 import GetProjectIcon from './factories/get-project-icon.factory';
 import GetProjectToolTip from './factories/get-project-tool-tip.factory';
+import revisions from './revisions/main';
 
 export default
-angular.module('Projects', [])
+angular.module('Projects', [revisions.name])
     .controller('ProjectsList', ProjectsList)
     .controller('ProjectsAdd', ProjectsAdd)
     .controller('ProjectsEdit', ProjectsEdit)

awx/ui/client/src/projects/projects.list.js

@@ -48,8 +48,8 @@ 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: {
                 label: i18n._('Last Updated'),

awx/ui/client/src/projects/revisions/main.js

@@ -0,0 +1,11 @@
+/*************************************************
+ * Copyright (c) 2015 Ansible, Inc.
+ *
+ * All Rights Reserved
+ *************************************************/
+
+import revisions from './revisions.directive';
+
+export default
+    angular.module('revisions', [])
+        .directive('revisions', revisions);

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: 10px;
+}
+
+.RevisionHash-copy:hover {
+    color: @default-link-hov;
+}

awx/ui/client/src/projects/revisions/revisions.directive.js

@@ -0,0 +1,51 @@
+export default
+    [   'templateUrl',
+        'Rest',
+        '$q',
+        '$filter',
+        function(templateUrl, Rest, $q, $filter) {
+            return {
+                restrict: 'E',
+                scope: false,
+                templateUrl: templateUrl('projects/revisions/revisions'),
+                link: function(scope)  {
+                    let full_revision = scope.project.scm_revision;
+                    scope.revisionHash = $filter('limitTo')(full_revision, 7, 0);
+                    scope.count = scope.project.scm_revision.length;
+
+                    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();
+                        
+                        document.execCommand('copy');
+
+                        document.body.removeChild(textArea);
+                    };
+                }
+            };
+        }
+    ];

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

@@ -0,0 +1,6 @@
+<div class="RevisionHash-tag">
+    <span class="RevisionHash-name">{{revisionHash}}</span>
+</div>
+<div class="RevisionHash-copy" ng-if="count > 7" aw-tool-tip="Copy full revision to clipboard"  data-placement="top" ng-click="copyRevisionHash()">
+    Copy
+</div>

awx/ui/client/src/shared/generator-helpers.js

@@ -501,7 +501,14 @@ angular.module('GeneratorHelpers', [systemStatus.name])
     <owner-list></owner-list>
 </td>
                 `;
-            }else if (field.type === 'badgeCount') {
+            } else if (field.type === 'revision') {
+                classList = (field.columnClass) ?
+                Attr(field, 'columnClass') : "";
+                html += `
+                <td ${classList}>
+                    <revisions class=\"RevisionHash\"></revisions>
+                </td>`;
+            } else if (field.type === 'badgeCount') {
                 html = BadgeCount(params);
             } else if (field.type === 'badgeOnly') {
                 html = Badge(field);

awx/ui/client/src/shared/list-generator/list-generator.factory.js

@@ -72,10 +72,10 @@
  *
  * ##Field Actions
  *
- * A list contains a fieldActions object. Each icon found in the Actions column is defined as an object within the feildActions object. fieldActions can have a columnClass attribute,
+ * A list contains a fieldActions object. Each icon found in the Actions column is defined as an object within the fieldActions object. fieldActions can have a columnClass attribute,
  * which may contain a string of CSS class names to add to the action <td> element. It may also contain a label attribute, which can be set to false to suppress the Actions column header.
  *
- * Feld action items can have the following attributes:
+ * Field action items can have the following attributes:
  *
  * | Attribute | Description |
  * | --------- | ----------- |