Create TagService

This new Service can be used anywhere that needs a credentials tag and
can be expanded upon to include other helpful tag methods as needed.

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

@@ -168,6 +168,7 @@
     display: flex;
     margin-left: @at-margin-left-list-row-item-tag-container;
     flex-wrap: wrap;
+    line-height: initial;
 }
 
 .at-RowItem-tag {

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

@@ -2,7 +2,8 @@ import { TRUNCATED, TRUNCATE_LENGTH } from './constants';
 
 const templateUrl = require('~components/toggle/toggle-tag.partial.html');
 
-function controller () {
+function controller ($scope, TagService) {
+    const { tags } = $scope;
     const vm = this;
     vm.truncatedLength = TRUNCATE_LENGTH;
     vm.truncated = TRUNCATED;
@@ -10,8 +11,16 @@ function controller () {
     vm.toggle = () => {
         vm.truncated = !vm.truncated;
     };
+
+    vm.tags = [];
+    // build credentials from tags object
+    Object.keys(tags).forEach(key => {
+        vm.tags.push(TagService.buildCredentialTag(tags[key]));
+    });
 }
 
+controller.$inject = ['$scope', 'TagService'];
+
 function atToggleTag () {
     return {
         restrict: 'E',

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

@@ -1,13 +1,13 @@
 <div class="ToggleComponent-wrapper">
     <div ng-show="vm.truncated" class="ToggleComponent-container">
-        <div ng-repeat="tag in tags | limitTo: vm.truncatedLength">
+        <div ng-repeat="tag in vm.tags | limitTo: vm.truncatedLength">
-            <at-tag tag="tag.name" icon="{{ tag.kind }}"></at-tag>
+            <at-tag tag="tag.value" icon="{{ tag.icon }}" link="{{ tag.link }}"></at-tag>
         </div>
         <button class="ToggleComponent-button" ng-click="vm.toggle()">VIEW MORE</button>
     </div>
     <div ng-show="!vm.truncated" class="ToggleComponent-container">
-        <div ng-repeat="tag in tags">
+        <div ng-repeat="tag in vm.tags">
-            <at-tag tag="tag.name" icon="{{ tag.kind }}"></at-tag>
+            <at-tag tag="tag.value" icon="{{ tag.icon }}" link="{{ tag.link }}"></at-tag>
         </div>
         <button class="ToggleComponent-button" ng-click="vm.toggle()">VIEW LESS</button>
     </div>

awx/ui/client/lib/services/index.js

@@ -2,6 +2,7 @@ import AppStrings from '~services/app.strings';
 import BaseStringService from '~services/base-string.service';
 import CacheService from '~services/cache.service';
 import EventService from '~services/event.service';
+import TagService from '~services/tag.service';
 
 const MODULE_NAME = 'at.lib.services';
 
@@ -12,6 +13,7 @@ angular
     .service('AppStrings', AppStrings)
     .service('BaseStringService', BaseStringService)
     .service('CacheService', CacheService)
-    .service('EventService', EventService);
+    .service('EventService', EventService)
+    .service('TagService', TagService);
 
 export default MODULE_NAME;

awx/ui/client/lib/services/tag.service.js

@@ -0,0 +1,14 @@
+function TagService (strings, $filter) {
+    this.buildCredentialTag = (credential) => {
+        const icon = `${credential.kind}`;
+        const link = `/#/credentials/${credential.id}`;
+        const tooltip = strings.get('tooltips.CREDENTIAL');
+        const value = $filter('sanitize')(credential.name);
+
+        return { icon, link, tooltip, value };
+    };
+}
+
+TagService.$inject = ['OutputStrings', '$filter'];
+
+export default TagService;