From 850df5c64666d7fe90746b59e21b712046dc8942 Mon Sep 17 00:00:00 2001
From: Marliana Lara <marliana.lara@gmail.com>
Date: Thu, 15 Jun 2017 16:02:54 -0400
Subject: [PATCH] Style Instance Groups tags to appear like Labels

---
 .../instance-groups-multiselect.controller.js      |  7 ++++++-
 .../instance-groups.block.less                     |  4 ++++
 .../instance-groups.partial.html                   | 14 ++++++++++----
 3 files changed, 20 insertions(+), 5 deletions(-)
 create mode 100644 awx/ui/client/src/instance-groups/instance-groups-multiselect/instance-groups.block.less

diff --git a/awx/ui/client/src/instance-groups/instance-groups-multiselect/instance-groups-multiselect.controller.js b/awx/ui/client/src/instance-groups/instance-groups-multiselect/instance-groups-multiselect.controller.js
index 304ac7aa4e..c6895f6a2b 100644
--- a/awx/ui/client/src/instance-groups/instance-groups-multiselect/instance-groups-multiselect.controller.js
+++ b/awx/ui/client/src/instance-groups/instance-groups-multiselect/instance-groups-multiselect.controller.js
@@ -4,7 +4,12 @@ export default ['$scope',
         $scope.instanceGroupsTags = [];
 
         $scope.$watch('instanceGroups', function() {
-            $scope.instanceGroupsTags = _.map($scope.instanceGroups, (item) => item.name);
+            $scope.instanceGroupsTags = $scope.instanceGroups;
         }, true);
+
+        $scope.deleteTag = function(tag){
+            _.remove($scope.instanceGroups, {id: tag.id});
+            console.log($scope.instanceGroups);
+        }
     }
 ];
\ No newline at end of file
diff --git a/awx/ui/client/src/instance-groups/instance-groups-multiselect/instance-groups.block.less b/awx/ui/client/src/instance-groups/instance-groups-multiselect/instance-groups.block.less
new file mode 100644
index 0000000000..a3aab73a19
--- /dev/null
+++ b/awx/ui/client/src/instance-groups/instance-groups-multiselect/instance-groups.block.less
@@ -0,0 +1,4 @@
+#InstanceGroups {
+    display: flex;
+    padding: 0 12px;
+}
\ No newline at end of file
diff --git a/awx/ui/client/src/instance-groups/instance-groups-multiselect/instance-groups.partial.html b/awx/ui/client/src/instance-groups/instance-groups-multiselect/instance-groups.partial.html
index 27ffc7f50b..b4e4021205 100644
--- a/awx/ui/client/src/instance-groups/instance-groups-multiselect/instance-groups.partial.html
+++ b/awx/ui/client/src/instance-groups/instance-groups-multiselect/instance-groups.partial.html
@@ -4,9 +4,15 @@
             <i class="fa fa-search"></i>
         </button>
     </span>
-    <span class="form-control Form-textInput Form-textInput--variableHeight input-medium lookup" style="padding: 4px 6px;">
-        <span class="LabelList-tag" ng-repeat="tag in instanceGroupsTags">
-            <span class="LabelList-name">{{ tag }}</span>
-        </span>
+    <span id="InstanceGroups" class="form-control Form-textInput Form-textInput--variableHeight input-medium lookup">
+        <div class="LabelList-tagContainer" ng-repeat="tag in instanceGroupsTags">
+            <div class="LabelList-deleteContainer"
+                ng-click="deleteTag(tag)">
+                <i class="fa fa-times LabelList-tagDelete"></i>
+            </div>
+            <div class="LabelList-tag LabelList-tag--deletable">
+                <span class="LabelList-name">{{ tag.name }}</span>
+            </div>
+        </div>
     </span>
 </div>
\ No newline at end of file