From e33604de713b1888409356142d5755d285257327 Mon Sep 17 00:00:00 2001
From: Jake McDermott <jmcdermott@ansible.com>
Date: Wed, 17 Jan 2018 13:18:07 -0500
Subject: [PATCH] show credential kind icon on credential tags

---
 .../multi-credential-modal.partial.html       | 50 ++++++++++++-------
 .../multi-credential.block.less               | 37 +++++++++++++-
 .../multi-credential.partial.html             | 25 +++++++---
 .../multi-credential.service.js               |  1 +
 4 files changed, 86 insertions(+), 27 deletions(-)

diff --git a/awx/ui/client/src/templates/job_templates/multi-credential/multi-credential-modal.partial.html b/awx/ui/client/src/templates/job_templates/multi-credential/multi-credential-modal.partial.html
index 1e52f574fc..93b6a26e67 100644
--- a/awx/ui/client/src/templates/job_templates/multi-credential/multi-credential-modal.partial.html
+++ b/awx/ui/client/src/templates/job_templates/multi-credential/multi-credential-modal.partial.html
@@ -21,25 +21,37 @@
                     <div class="MultiCredential-tags">
                         <div class="MultiCredential-tagSection">
                             <div class="MultiCredential-flexContainer">
-                                <div
-                                    class="MultiCredential-tagContainer ng-scope"
-                                    ng-repeat="tag in tags track by $index">
-                                        <div class="MultiCredential-deleteContainer"
-                                            ng-click="vm.removeCredential(tag.id)"
-                                            ng-if="!tag.readOnly">
-                                            <i class="fa fa-times MultiCredential-tagDelete"></i>
-                                        </div>
-                                        <div class="MultiCredential-tag" ng-class="tag.readOnly ? 'MultiCredential-tag--disabled' : 'MultiCredential-tag--deletable'">
-                                            <span ng-if="tag.info" class="MultiCredential-name--label ng-binding">
-                                                {{ tag.typeName }} {{ tag.info }}:
-                                            </span>
-                                            <span ng-if="!tag.info" class="MultiCredential-name--label ng-binding">
-                                                {{ tag.typeName }}:
-                                            </span>
-                                            <span class="MultiCredential-name u-wordwrap ng-binding">
-                                                {{ tag.name }}
-                                            </span>
-                                        </div>
+                                <div class="MultiCredential-tagContainer ng-scope" ng-repeat="tag in tags track by $index">
+                                    <div class="MultiCredential-deleteContainer"
+                                        ng-click="vm.deselectCredential(tag)"
+                                        ng-hide="fieldIsDisabled || tag.readOnly">
+                                        <i class="fa fa-times MultiCredential-tagDelete"></i>
+                                    </div>
+                                    <div class="MultiCredential-iconContainer--disabled" ng-switch="tag.kind" ng-if="fieldIsDisabled || tag.readOnly">
+                                        <i class="fa fa-cloud MultiCredential-tagIcon" ng-switch-when="cloud"></i>
+                                        <i class="fa fa-info MultiCredential-tagIcon" ng-switch-when="insights"></i>
+                                        <i class="fa fa-sitemap MultiCredential-tagIcon" ng-switch-when="net"></i>
+                                        <i class="fa fa-code-fork MultiCredential-tagIcon" ng-switch-when="scm"></i>
+                                        <i class="fa fa-key MultiCredential-tagIcon" ng-switch-when="ssh"></i>
+                                        <i class="fa fa-archive MultiCredential-tagIcon" ng-switch-when="vault"></i>
+                                    </div>
+                                    <div class="MultiCredential-iconContainer" ng-switch="tag.kind" ng-if="!(fieldIsDisabled || tag.readOnly)">
+                                        <i class="fa fa-cloud MultiCredential-tagIcon" ng-switch-when="cloud"></i>
+                                        <i class="fa fa-info MultiCredential-tagIcon" ng-switch-when="insights"></i>
+                                        <i class="fa fa-sitemap MultiCredential-tagIcon" ng-switch-when="net"></i>
+                                        <i class="fa fa-code-fork MultiCredential-tagIcon" ng-switch-when="scm"></i>
+                                        <i class="fa fa-key MultiCredential-tagIcon" ng-switch-when="ssh"></i>
+                                        <i class="fa fa-archive MultiCredential-tagIcon" ng-switch-when="vault"></i>
+                                    </div>
+                                    <div class="MultiCredential-tag"
+                                        ng-class="{'MultiCredential-tag--deletable': !fieldIsDisabled && !tag.readOnly, 'MultiCredential-tag--disabled': tag.readOnly}">
+                                        <span ng-if="!tag.info" class="MultiCredential-name--label ng-binding">
+                                            {{ tag.name }}
+                                        </span>
+                                        <span ng-if="tag.info" class="MultiCredential-name--label ng-binding">
+                                            {{ tag.name }} | {{ tag.info }}
+                                        </span>
+                                    </div>
                                 </div>
                             </div>
                         </div>
diff --git a/awx/ui/client/src/templates/job_templates/multi-credential/multi-credential.block.less b/awx/ui/client/src/templates/job_templates/multi-credential/multi-credential.block.less
index 4f007ea2f4..33d1fb8750 100644
--- a/awx/ui/client/src/templates/job_templates/multi-credential/multi-credential.block.less
+++ b/awx/ui/client/src/templates/job_templates/multi-credential/multi-credential.block.less
@@ -53,6 +53,9 @@
 
 .MultiCredential-tag--disabled {
     background-color: @default-icon;
+    border-top-left-radius: 0px;
+    border-bottom-left-radius: 0px;
+    padding-left: 10px;
 }
 
 .MultiCredential-tag--deletable {
@@ -79,7 +82,37 @@
 }
 
 .MultiCredential-tagDelete {
-    font-size: 13px;
+    font-size: 11px;
+}
+
+.MultiCredential-iconContainer {
+    background-color: @default-link!important;
+    color: @default-bg;
+    border-top-left-radius: 0px;
+    border-bottom-left-radius: 0px;
+    padding: 0px 5px;
+    margin: 3px 0px;
+    margin-left: -3px;
+    align-items: center;
+    display: flex;
+}
+
+.MultiCredential-iconContainer--disabled {
+    background-color: @default-icon;
+    color: @default-bg;
+    border-top-left-radius: 5px;
+    border-bottom-left-radius: 5px;
+    padding: 0 5px;
+    padding-left: 10px;
+    margin: 3px 0px;
+    align-items: center;
+    display: flex;
+}
+
+
+.MultiCredential-tagIcon {
+    margin: 0px 0px;
+    font-size: 10px;
 }
 
 .MultiCredential-name {
@@ -91,7 +124,7 @@
 .MultiCredential-name--label {
     color: @default-list-header-bg;
     font-size: 10px;
-    margin-left: -7px;
+    margin-left: -8px;
     margin-right: 5px;
     text-transform: uppercase;
 }
diff --git a/awx/ui/client/src/templates/job_templates/multi-credential/multi-credential.partial.html b/awx/ui/client/src/templates/job_templates/multi-credential/multi-credential.partial.html
index 3302dcc5d4..bdbfa903ce 100644
--- a/awx/ui/client/src/templates/job_templates/multi-credential/multi-credential.partial.html
+++ b/awx/ui/client/src/templates/job_templates/multi-credential/multi-credential.partial.html
@@ -22,17 +22,30 @@
                             ng-hide="fieldIsDisabled || tag.readOnly">
                             <i class="fa fa-times MultiCredential-tagDelete"></i>
                         </div>
+                        <div class="MultiCredential-iconContainer--disabled" ng-switch="tag.kind" ng-if="fieldIsDisabled || tag.readOnly">
+                            <i class="fa fa-cloud MultiCredential-tagIcon" ng-switch-when="cloud"></i>
+                            <i class="fa fa-info MultiCredential-tagIcon" ng-switch-when="insights"></i>
+                            <i class="fa fa-sitemap MultiCredential-tagIcon" ng-switch-when="net"></i>
+                            <i class="fa fa-code-fork MultiCredential-tagIcon" ng-switch-when="scm"></i>
+                            <i class="fa fa-key MultiCredential-tagIcon" ng-switch-when="ssh"></i>
+                            <i class="fa fa-archive MultiCredential-tagIcon" ng-switch-when="vault"></i>
+                        </div>
+                        <div class="MultiCredential-iconContainer" ng-switch="tag.kind" ng-if="!(fieldIsDisabled || tag.readOnly)">
+                            <i class="fa fa-cloud MultiCredential-tagIcon" ng-switch-when="cloud"></i>
+                            <i class="fa fa-info MultiCredential-tagIcon" ng-switch-when="insights"></i>
+                            <i class="fa fa-sitemap MultiCredential-tagIcon" ng-switch-when="net"></i>
+                            <i class="fa fa-code-fork MultiCredential-tagIcon" ng-switch-when="scm"></i>
+                            <i class="fa fa-key MultiCredential-tagIcon" ng-switch-when="ssh"></i>
+                            <i class="fa fa-archive MultiCredential-tagIcon" ng-switch-when="vault"></i>
+                        </div>
                         <div class="MultiCredential-tag"
                             ng-class="{'MultiCredential-tag--deletable': !fieldIsDisabled && !tag.readOnly, 'MultiCredential-tag--disabled': tag.readOnly}">
-                            <span ng-if="tag.info" class="MultiCredential-name--label ng-binding">
-                                {{ tag.typeName }} {{ tag.info }}:
-                            </span>
                             <span ng-if="!tag.info" class="MultiCredential-name--label ng-binding">
-                                {{ tag.typeName }}:
-                            </span>
-                            <span class="MultiCredential-name u-wordwrap ng-binding">
                                 {{ tag.name }}
                             </span>
+                            <span ng-if="tag.info" class="MultiCredential-name--label ng-binding">
+                                {{ tag.name }} | {{ tag.info }}
+                            </span>
                         </div>
                     </div>
                 </div>
diff --git a/awx/ui/client/src/templates/job_templates/multi-credential/multi-credential.service.js b/awx/ui/client/src/templates/job_templates/multi-credential/multi-credential.service.js
index 10db0a5a94..527f984c5b 100644
--- a/awx/ui/client/src/templates/job_templates/multi-credential/multi-credential.service.js
+++ b/awx/ui/client/src/templates/job_templates/multi-credential/multi-credential.service.js
@@ -84,6 +84,7 @@ function MultiCredentialService (Rest, ProcessErrors, $q, GetBasePath)  {
         return {
             id: credential.id,
             name: credential.name,
+            kind: _.get(credentialType, 'kind'),
             typeName: _.get(credentialType, 'name'),
             info: _.get(credential, 'inputs.vault_id'),
             readOnly: this.isReadOnly(credential),