Add credential tags to job details

awx/ui/client/lib/components/list/_index.less

@@ -170,7 +170,6 @@
 }
 
 .at-RowItem-tag {
-    text-transform: uppercase;
     font-weight: 100;
     background-color: @at-color-list-row-item-tag-background;
     border-radius: @at-border-radius;

awx/ui/client/lib/components/tag/_index.less

@@ -1,8 +1,6 @@
-.TagComponentWrapper {
-    padding: @at-space;
-}
 .TagComponent {
-    color: white;
+    color: @at-white;
+    cursor: default;
     background: @at-blue;
     border-radius: @at-space;
     font-size: 12px;
@@ -12,30 +10,48 @@
     min-height: @at-space-4x;
     overflow: hidden;
     max-width: 200px;
+    margin: @at-space;
 }
 
 .TagComponent-name {
+    color: @at-white;
     margin: 2px @at-space-2x;
     align-self: center;
     word-break: break-word;
     text-transform: lowercase;
-}
 
-.TagComponent--cloud {
-    &:before {
-        content: '\f0c2';
-        color: white;
-        height: @at-space-4x;
-        width: @at-space-4x;
+    &:hover,
+    &:focus {
+        color: @at-white;
     }
 }
 
-.TagComponent--key {
-    &:before {
+.TagComponent-icon {
+    line-height: 20px;
+    margin-left: @at-space-2x;
+
+    &--cloud:before {
+        content: '\f0c2';
+    }
+
+    &--insights:before {
+        content: '\f129';
+    }
+
+    &--net:before {
+        content: '\f0e8';
+    }
+
+    &--scm:before {
+        content: '\f126';
+    }
+
+    &--ssh:before {
         content: '\f084';
-        color: white;
-        height: @at-space-4x;
-        width: @at-space-4x;
+    }
+
+    &--vault:before {
+        content: '\f187';
     }
 }
 

awx/ui/client/lib/components/tag/tag.directive.js

@@ -8,6 +8,8 @@ function atTag () {
         templateUrl,
         scope: {
             tag: '=',
+            icon: '@?',
+            link: '@?',
             removeTag: '&?',
         },
     };

awx/ui/client/lib/components/tag/tag.partial.html

@@ -1,5 +1,7 @@
 <div class="TagComponent" ng-transclude>
-    <div class="TagComponent-name">{{ tag }}</div>
+    <div ng-if="icon" class="fa TagComponent-icon TagComponent-icon--{{icon}}"></div>
+    <a ng-if="link" class="TagComponent-name" href="{{ link }}">{{ tag }}</a>
+    <div ng-if="!link" class="TagComponent-name">{{ tag }}</div>
     <div ng-if="removeTag" class="TagComponent-button" ng-click="removeTag(index)">
         <i class="fa fa-times TagComponent-button__delete"></i>
     </div>