From 625ae5d1bf9ebe916b589d60ca82152b70fd4cac Mon Sep 17 00:00:00 2001
From: Marliana Lara <mlara@redhat.com>
Date: Tue, 12 Jun 2018 15:38:06 -0400
Subject: [PATCH] Remove panel header directive from instance modals

---
 .../add-edit/instance-list-policy.directive.js |  4 ++++
 .../add-edit/instance-list-policy.partial.html | 18 +++++++++++++-----
 .../instances/instance-modal.controller.js     |  6 +++++-
 .../instances/instance-modal.partial.html      | 18 +++++++++++++-----
 4 files changed, 35 insertions(+), 11 deletions(-)

diff --git a/awx/ui/client/src/instance-groups/add-edit/instance-list-policy.directive.js b/awx/ui/client/src/instance-groups/add-edit/instance-list-policy.directive.js
index 6b9111ab23..a156ac9ceb 100644
--- a/awx/ui/client/src/instance-groups/add-edit/instance-list-policy.directive.js
+++ b/awx/ui/client/src/instance-groups/add-edit/instance-list-policy.directive.js
@@ -66,6 +66,10 @@ function InstanceListPolicyController ($scope, $state, strings) {
 
         $state.go("^.^");
     };
+
+    vm.dismiss = () => {
+        $state.go('^.^');
+    };
 }
 
 InstanceListPolicyController.$inject = [
diff --git a/awx/ui/client/src/instance-groups/add-edit/instance-list-policy.partial.html b/awx/ui/client/src/instance-groups/add-edit/instance-list-policy.partial.html
index 821bbffc64..e9d9287805 100644
--- a/awx/ui/client/src/instance-groups/add-edit/instance-list-policy.partial.html
+++ b/awx/ui/client/src/instance-groups/add-edit/instance-list-policy.partial.html
@@ -1,8 +1,16 @@
 <div id="instance-modal" class="modal-dialog">
-    <at-panel on-dismiss="^.^">
-        <at-panel-heading>
-            {{:: vm.strings.get('instance.PANEL_TITLE') }}
-        </at-panel-heading>
+    <div class="modal-content">
+        <div class="row at-Panel-headingRow">
+            <div class="col-xs-10">
+                <h3 class="at-Panel-headingTitle">{{:: vm.strings.get('instance.PANEL_TITLE') }}</h3>
+            </div>
+            <div class="col-xs-2">
+                <div class="at-Panel-dismiss">
+                    <i class="fa fa-times-circle fa-lg" ng-click="vm.dismiss()"></i>
+                </div>
+            </div>
+        </div>
+
         <multi-select-preview selected-rows='vm.selectedRows' available-rows='instances'></multi-select-preview>
         <at-panel-body>
             <div class="at-List-toolbar">
@@ -49,5 +57,5 @@
                 </div>
             </div>
         </at-panel-body>
-    </at-panel>
+    </div>
 </div>
\ No newline at end of file
diff --git a/awx/ui/client/src/instance-groups/instances/instance-modal.controller.js b/awx/ui/client/src/instance-groups/instances/instance-modal.controller.js
index 4d492c65b8..0edac623d1 100644
--- a/awx/ui/client/src/instance-groups/instances/instance-modal.controller.js
+++ b/awx/ui/client/src/instance-groups/instances/instance-modal.controller.js
@@ -36,7 +36,7 @@ function InstanceModalController ($scope, $state, models, strings, ProcessErrors
     $scope.$watch('vm.instances', function() {
         vm.selectedRows = _.filter(vm.instances, 'isSelected');
         vm.deselectedRows = _.filter(vm.instances, 'isSelected', false);
-     }, true);
+    }, true);
 
     vm.submit = () => {
         Wait('start');
@@ -70,6 +70,10 @@ function InstanceModalController ($scope, $state, models, strings, ProcessErrors
     vm.onSaveSuccess = () => {
         $state.go('instanceGroups.instances', {}, {reload: 'instanceGroups.instances'});
     };
+
+    vm.dismiss = () => {
+        $state.go('instanceGroups.instances');
+    };
 }
 
 InstanceModalController.$inject = [
diff --git a/awx/ui/client/src/instance-groups/instances/instance-modal.partial.html b/awx/ui/client/src/instance-groups/instances/instance-modal.partial.html
index 15c614a1df..90675e2f40 100644
--- a/awx/ui/client/src/instance-groups/instances/instance-modal.partial.html
+++ b/awx/ui/client/src/instance-groups/instances/instance-modal.partial.html
@@ -1,8 +1,16 @@
 <div id="instance-modal" class="modal-dialog">
-    <at-panel on-dismiss="instanceGroups.instances">
-        <at-panel-heading>
-            {{ vm.panelTitle }} | {{ vm.instanceGroupName}}
-        </at-panel-heading>
+    <div class="modal-content">
+        <div class="row at-Panel-headingRow">
+            <div class="col-xs-10">
+                <h3 class="at-Panel-headingTitle">{{ vm.panelTitle }} | {{ vm.instanceGroupName}}</h3>
+            </div>
+            <div class="col-xs-2">
+                <div class="at-Panel-dismiss">
+                    <i class="fa fa-times-circle fa-lg" ng-click="vm.dismiss()"></i>
+                </div>
+            </div>
+        </div>
+
         <multi-select-preview selected-rows='vm.selectedRows' available-rows='vm.instances'></multi-select-preview>
         <at-panel-body>
             <div class="at-List-toolbar">
@@ -51,5 +59,5 @@
                 </div>
             </div>
         </at-panel-body>
-    </at-panel>
+    </div>
 </div>
\ No newline at end of file