Add more functionality to Toggle Tag Component

- Remove existing `switch` logic in favor of Toggle Tag Component, now
with comments!

- Slight adjustment to icons to center vertically; account for
non-standard credential `kind` attributes so icons display as they
should.

- Style the `View More/Less` button accordingly

- Update Toggle Tag directive template to include icons

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

@@ -42,21 +42,11 @@
             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">
+            <!-- If there are 5 or less credential tags, show them all with Tag Component -->
-                <span ng-switch="tag.kind" class="at-RowItem-tagIcon"
+            <div ng-if="tagValues.length <= 5" ng-repeat="tag in tagValues">
-                    ng-if="tagsAreCreds">
+                <at-tag tag="tag.name" icon="{{ tag.kind }}"></at-tag>
-                    <span class="fa fa-cloud" ng-switch-when="cloud"></span>
-                    <span class="fa fa-info" ng-switch-when="insights"></span>
-                    <span class="fa fa-sitemap" ng-switch-when="net"></span>
-                    <span class="fa fa-code-fork" ng-switch-when="scm"></span>
-                    <span class="fa fa-key" ng-switch-when="ssh"></span>
-                    <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>
+            <!-- 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>
         </div>
 </div>

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

@@ -27,10 +27,15 @@
 }
 
 .TagComponent-icon {
+    .at-mixin-VerticallyCenter();
     line-height: 20px;
     margin-left: @at-space-2x;
 
-    &--cloud:before {
+    &--cloud:before,
+    &--aws:before,
+    &--tower:before,
+    &--azure_rm:before,
+    {
         content: '\f0c2';
     }
 

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

@@ -1,4 +1,11 @@
 .ToggleComponent-container {
     display: flex;
     flex-wrap: wrap;
+}
+
+.ToggleComponent-button {
+    border: none;
+    background: transparent;
+    color: @at-blue;
+    font-size: @at-font-size;
 }

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

@@ -1,14 +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>
+            <at-tag tag="tag.name" icon="{{ tag.kind }}"></at-tag>
         </div>
-        <button ng-click="vm.toggle()">VIEW MORE</button>
+        <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">
-            <at-tag tag="tag.name"></at-tag>
+            <at-tag tag="tag.name" icon="{{ tag.kind }}"></at-tag>
         </div>
-        <button ng-click="vm.toggle()">VIEW LESS</button>
+        <button class="ToggleComponent-button" ng-click="vm.toggle()">VIEW LESS</button>
     </div>
 </div>