Create basic toggle tag component

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

@@ -9,6 +9,7 @@
 @import 'relaunchButton/_index';
 @import 'tabs/_index';
 @import 'tag/_index';
+@import 'toggle/_index';
 @import 'truncate/_index';
 @import 'utility/_index';
 @import 'code-mirror/_index';

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

@@ -33,6 +33,7 @@ import sideNavItem from '~components/layout/side-nav-item.directive';
 import tab from '~components/tabs/tab.directive';
 import tabGroup from '~components/tabs/group.directive';
 import tag from '~components/tag/tag.directive';
+import toggleTag from '~components/toggle/toggle-tag.directive';
 import topNavItem from '~components/layout/top-nav-item.directive';
 import truncate from '~components/truncate/truncate.directive';
 import atCodeMirror from '~components/code-mirror';
@@ -80,6 +81,7 @@ angular
     .directive('atTab', tab)
     .directive('atTabGroup', tabGroup)
     .directive('atTag', tag)
+    .directive('atToggleTag', toggleTag)
     .directive('atTopNavItem', topNavItem)
     .directive('atTruncate', truncate)
     .service('BaseInputController', BaseInputController)

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

@@ -167,6 +167,7 @@
 .at-RowItem-tagContainer {
     display: flex;
     margin-left: @at-margin-left-list-row-item-tag-container;
+    flex-wrap: wrap;
 }
 
 .at-RowItem-tag {
@@ -175,8 +176,7 @@
     border-radius: @at-border-radius;
     color: @at-color-list-row-item-tag;
     font-size: @at-font-size-list-row-item-tag;
-    margin-left: @at-margin-left-list-row-item-tag;
-    margin-top: @at-margin-top-list-row-item-tag;
+    margin: @at-space;
     padding: @at-padding-list-row-item-tag;
     line-height: @at-line-height-list-row-item-tag;
 }

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

@@ -42,7 +42,7 @@
             template-type="smartStatus.type" ng-if="smartStatus">
         </aw-smart-status>
         <div class="at-RowItem-tagContainer" ng-if="tagValues && tagValues.length">
-            <div ng-repeat="tag in tagValues" class="at-RowItem-tag at-RowItem-tag--primary">
+            <!-- <div ng-repeat="tag in tagValues" class="at-RowItem-tag at-RowItem-tag--primary">
                 <span ng-switch="tag.kind" class="at-RowItem-tagIcon"
                     ng-if="tagsAreCreds">
                     <span class="fa fa-cloud" ng-switch-when="cloud"></span>
@@ -53,6 +53,10 @@
                     <span class="fa fa-archive" ng-switch-when="vault"></span>
                 </span>
                 {{ tag.name }}
+            </div> -->
+            <div ng-if="tagValues.length <= 5">
+                <at-tag tag="tagValues"></at-tag>
             </div>
+            <at-toggle-tag tags="tagValues" ng-if="tagValues.length > 5"></at-toggle-tag>
         </div>
 </div>

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

@@ -0,0 +1,4 @@
+.ToggleComponent-container {
+    display: flex;
+    flex-wrap: wrap;
+}

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

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

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

@@ -0,0 +1,29 @@
+import { TRUNCATED, TRUNCATE_LENGTH } from './constants';
+
+const templateUrl = require('~components/toggle/toggle-tag.partial.html');
+
+function controller () {
+    const vm = this;
+    vm.truncatedLength = TRUNCATE_LENGTH;
+    vm.truncated = TRUNCATED;
+
+    vm.toggle = () => {
+        vm.truncated = !vm.truncated;
+    };
+}
+
+function atToggleTag () {
+    return {
+        restrict: 'E',
+        replace: true,
+        transclude: true,
+        controller,
+        controllerAs: 'vm',
+        templateUrl,
+        scope: {
+            tags: '=',
+        },
+    };
+}
+
+export default atToggleTag;

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

@@ -0,0 +1,14 @@
+<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.name"></at-tag>
+        </div>
+        <button ng-click="vm.toggle()">VIEW MORE</button>
+    </div>
+    <div ng-show="!vm.truncated" class="ToggleComponent-container">
+        <div ng-repeat="tag in tags">
+            <at-tag tag="tag.name"></at-tag>
+        </div>
+        <button ng-click="vm.toggle()">VIEW LESS</button>
+    </div>
+</div>