Offload tag formatting logic to templateList controller

awx/ui/client/features/templates/templatesList.controller.js

@@ -165,6 +165,17 @@ function ListTemplatesController(
         return html;
     };
 
+    vm.buildCredentialTags = (credentials) => {
+        return credentials.map(credential => {
+            const icon = `${credential.kind}`;
+            const link = `/#/credentials/${credential.id}`;
+            const tooltip = strings.get('tooltips.VIEW_THE_CREDENTIAL');
+            const value = $filter('sanitize')(credential.name);
+
+            return { icon, link, tooltip, value };
+        })
+    };
+
     vm.getLastRan = template => {
         const lastJobRun = _.get(template, 'last_job_run');
 

awx/ui/client/features/templates/templatesList.view.html

@@ -69,11 +69,23 @@
                     value-link="/#/projects/{{ template.summary_fields.project.id }}">
                 </at-row-item>
                 <!-- TODO: add see more for creds -->
-                <at-row-item
+                <at-toggle-tag tags="vm.buildCredentialTags(template.summary_fields.credentials)"></at-toggle-tag>
+
+
+
+
+                <!-- <at-row-item
                     label-value="{{:: vm.strings.get('list.ROW_ITEM_LABEL_CREDENTIALS') }}"
                     tag-values="template.summary_fields.credentials"
-                    tags-are-creds="true">
+                    tags-are-creds="true"> -->
-                </at-row-item>
+                        
+                    <!-- If there are 5 or less credential tags, show them all with Tag Component -->
+                    <!-- <div ng-if="tagValues.length <= 5" ng-repeat="tag in tagValues">
+                        <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 tag-type="cred" tags="tagValues" ng-if="tagValues.length > 5"></at-toggle-tag> -->
+                <!-- </at-row-item> -->
                 <at-row-item
                     label-value="{{:: vm.strings.get('list.ROW_ITEM_LABEL_MODIFIED') }}"
                     value-bind-html="{{ vm.getModified(template) }}">

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

@@ -42,11 +42,19 @@
             template-type="smartStatus.type" ng-if="smartStatus">
         </aw-smart-status>
         <div class="at-RowItem-tagContainer" ng-if="tagValues && tagValues.length">
-            <!-- If there are 5 or less credential tags, show them all with Tag Component -->
             <div ng-if="tagValues.length <= 5" ng-repeat="tag in tagValues">
                 <at-tag tag="tag.name" icon="{{ tag.kind }}" link="/#/credentials/{{ tag.id }}"></at-tag>
             </div>
+
+
+
+            <!-- <at-toggle-tag tag-length="tagValues.length" tags="tagValues"></at-toggle-tag> -->
+            <!-- <at-tag tag="thing"></at-tag> -->
+            <!-- If there are 5 or less credential tags, show them all with Tag Component -->
+            <!-- <div ng-if="tagValues.length <= 5" ng-repeat="tag in tagValues">
+                <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 tag-type="cred" 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-tag/toggle-tag.directive.js

@@ -2,8 +2,8 @@ import { TRUNCATED, TRUNCATE_LENGTH } from './constants';
 
 const templateUrl = require('~components/toggle-tag/toggle-tag.partial.html');
 
-function controller ($scope, TagService, strings) {
+function controller (strings) {
-    const { tags } = $scope;
+    // const { tags } = $scope;
     const vm = this;
     vm.truncatedLength = TRUNCATE_LENGTH;
     vm.truncated = TRUNCATED;
@@ -13,20 +13,20 @@ function controller ($scope, TagService, strings) {
         vm.truncated = !vm.truncated;
     };
 
-    vm.tags = [];
+    // vm.tags = [];
 
     // 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 => {
+    // Object.keys(tags).forEach(key => {
-        if ($scope.tagType === 'cred') {
+    //     if ($scope.tagType === 'cred') {
-            vm.tags.push(TagService.buildCredentialTag(tags[key]));
+    //         vm.tags.push(TagService.buildCredentialTag(tags[key]));
-        } else {
+    //     } else {
-            vm.tags.push(TagService.buildTag(tags[key]));
+    //         vm.tags.push(TagService.buildTag(tags[key]));
-        }
+    //     }
-    });
+    // });
 }
 
-controller.$inject = ['$scope', 'TagService', 'ComponentsStrings'];
+controller.$inject = ['ComponentsStrings'];
 
 function atToggleTag () {
     return {
@@ -39,6 +39,7 @@ function atToggleTag () {
         scope: {
             tags: '=',
             tagType: '@',
+            tagLength: '@',
         },
     };
 }

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

@@ -1,15 +1,15 @@
 <div class="ToggleComponent-wrapper">
     <div ng-show="vm.truncated" class="ToggleComponent-container">
-        <div ng-repeat="tag in vm.tags | limitTo: vm.truncatedLength">
+        <div ng-repeat="tag in tags | limitTo: vm.truncatedLength">
-            <at-tag ng-if="tagType === 'cred'" tag="tag.value" icon="{{ tag.icon }}" link="{{ tag.link }}"></at-tag>
+            <at-tag tag="tag.value" icon="{{ tag.icon }}" link="{{ tag.link }}"></at-tag>
-            <at-tag ng-if="tagType !== 'cred'" tag="tag.value"></at-tag>
+            <!-- <at-tag tag="tag.value"></at-tag> -->
         </div>
         <button class="ToggleComponent-button" ng-click="vm.toggle()">{{:: vm.strings.get('toggle.VIEW_MORE') }}</button>
     </div>
     <div ng-show="!vm.truncated" class="ToggleComponent-container">
-        <div ng-repeat="tag in vm.tags">
+        <div ng-repeat="tag in tags">
-            <at-tag ng-if="tagType === 'cred'" tag="tag.value" icon="{{ tag.icon }}" link="{{ tag.link }}"></at-tag>
+            <!-- <at-tag ng-if="tagType === 'cred'" tag="tag.value" icon="{{ tag.icon }}" link="{{ tag.link }}"></at-tag> -->
-            <at-tag ng-if="tagType !== 'cred'" tag="tag.value"></at-tag>
+            <at-tag tag="tag.value" icon="{{ tag.icon }}" link="{{ tag.link }}"></at-tag>
         </div>
         <button class="ToggleComponent-button" ng-click="vm.toggle()">{{:: vm.strings.get('toggle.VIEW_LESS') }}</button>
     </div>