Refactor Toggle Tag Component

This refactor includes the following things:
- Offload credential tag formatting to the parent controller, e.g.
`TemplateListController`.
- Initialize the `Toggle Tag` component in the parent view instead of
the List Item component view.
- Rename some variables for better comprehension.

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

@@ -164,7 +164,7 @@ function ListTemplatesController(
 
         return html;
     };
-
+    
     vm.buildCredentialTags = (credentials) => {
         return credentials.map(credential => {
             const icon = `${credential.kind}`;

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

@@ -68,24 +68,12 @@
                     value="{{ template.summary_fields.project.name }}"
                     value-link="/#/projects/{{ template.summary_fields.project.id }}">
                 </at-row-item>
-                <!-- TODO: add see more for creds -->
-                <at-toggle-tag tags="vm.buildCredentialTags(template.summary_fields.credentials)"></at-toggle-tag>
-
-
-
-
-                <!-- <at-row-item
+                <at-row-item
                     label-value="{{:: vm.strings.get('list.ROW_ITEM_LABEL_CREDENTIALS') }}"
                     tag-values="template.summary_fields.credentials"
-                    tags-are-creds="true"> -->
-                        
-                    <!-- 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> -->
+                    tags-are-creds="true">
+                    <at-toggle-tag ng-init="credTags=vm.buildCredentialTags(template.summary_fields.credentials)" tags="credTags"></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,19 +42,6 @@
             template-type="smartStatus.type" ng-if="smartStatus">
         </aw-smart-status>
         <div class="at-RowItem-tagContainer" ng-if="tagValues && tagValues.length">
-            <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> -->
+            <ng-transclude></ng-transclude>
         </div>
 </div>

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

@@ -1,2 +1,2 @@
 export const TRUNCATE_LENGTH = 5;
-export const TRUNCATED = true;
+export const IS_TRUNCATED = true;

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

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

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

@@ -1,16 +1,21 @@
 <div class="ToggleComponent-wrapper">
-    <div ng-show="vm.truncated" class="ToggleComponent-container">
-        <div ng-repeat="tag in tags | limitTo: vm.truncatedLength">
-            <at-tag tag="tag.value" icon="{{ tag.icon }}" link="{{ tag.link }}"></at-tag>
-            <!-- <at-tag tag="tag.value"></at-tag> -->
+    <div ng-if="tags.length > vm.truncatedLength">
+        <div ng-show="vm.isTruncated" class="ToggleComponent-container">
+            <div ng-repeat="tag in tags | limitTo: vm.truncatedLength">
+                <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_MORE') }}</button>
+        </div>
+        <div ng-show="!vm.isTruncated" class="ToggleComponent-container">
+            <div ng-repeat="tag in tags">
+                <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>
-        <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-if="tags.length <= vm.truncatedLength" class="ToggleComponent-container">
         <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 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>
 </div>