From 63f3a38ceb445d5c3e0cac18ebce329b867f9865 Mon Sep 17 00:00:00 2001
From: kialam <digitalanime@gmail.com>
Date: Wed, 30 May 2018 15:28:10 -0400
Subject: [PATCH] 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
---
 .../lib/components/list/row-item.partial.html  | 18 ++++--------------
 awx/ui/client/lib/components/tag/_index.less   |  7 ++++++-
 .../client/lib/components/toggle/_index.less   |  7 +++++++
 .../components/toggle/toggle-tag.partial.html  |  8 ++++----
 4 files changed, 21 insertions(+), 19 deletions(-)

diff --git a/awx/ui/client/lib/components/list/row-item.partial.html b/awx/ui/client/lib/components/list/row-item.partial.html
index a26405d6cd..89bce7c696 100644
--- a/awx/ui/client/lib/components/list/row-item.partial.html
+++ b/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">
-                <span ng-switch="tag.kind" class="at-RowItem-tagIcon"
-                    ng-if="tagsAreCreds">
-                    <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>
+            <!-- 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 }}"></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>
diff --git a/awx/ui/client/lib/components/tag/_index.less b/awx/ui/client/lib/components/tag/_index.less
index 5fa309c106..d1b14a6893 100644
--- a/awx/ui/client/lib/components/tag/_index.less
+++ b/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';
     }
 
diff --git a/awx/ui/client/lib/components/toggle/_index.less b/awx/ui/client/lib/components/toggle/_index.less
index f86e6a7948..8860faa67b 100644
--- a/awx/ui/client/lib/components/toggle/_index.less
+++ b/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;
 }
\ No newline at end of file
diff --git a/awx/ui/client/lib/components/toggle/toggle-tag.partial.html b/awx/ui/client/lib/components/toggle/toggle-tag.partial.html
index 05685b654e..83952ee7c8 100644
--- a/awx/ui/client/lib/components/toggle/toggle-tag.partial.html
+++ b/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>