Account for default tags as well

awx/ui/client/lib/components/list/row-item.partial.html

@@ -47,6 +47,6 @@
                 <at-tag tag="tag.name" icon="{{ tag.kind }}" link="/#/credentials/{{ tag.id }}"></at-tag>
             </div>
             <!-- If there are 5 or MORE credential tags, handle them accordingly with Toggle Tag Component -->
-            <at-toggle-tag tags="tagValues" ng-if="tagValues.length > 5"></at-toggle-tag>
+            <at-toggle-tag tag-type="cred" tags="tagValues" ng-if="tagValues.length > 5"></at-toggle-tag>
         </div>
 </div>

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

@@ -14,9 +14,15 @@ function controller ($scope, TagService, strings) {
     };
 
     vm.tags = [];
-    // build credentials from tags object
+
+    // Let the controller handle what type of tag should be passed to the directive
+    // e.g. default tag, crential tag, etc.
     Object.keys(tags).forEach(key => {
-        vm.tags.push(TagService.buildCredentialTag(tags[key]));
+        if ($scope.tagType === 'cred') {
+            vm.tags.push(TagService.buildCredentialTag(tags[key]));
+        } else {
+            vm.tags.push(TagService.buildTag(tags[key]));
+        }
     });
 }
 
@@ -32,6 +38,7 @@ function atToggleTag () {
         templateUrl,
         scope: {
             tags: '=',
+            tagType: '@',
         },
     };
 }

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

@@ -7,6 +7,10 @@ function TagService (strings, $filter) {
 
         return { icon, link, tooltip, value };
     };
+    this.buildTag = tag => {
+        const value = $filter('sanitize')(tag);
+        return { value };
+    };
 }
 
 TagService.$inject = ['ComponentsStrings', '$filter'];