Modify panel header to accept title and badge string bindings

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

@@ -5,12 +5,14 @@
 }
 
 .at-Panel-heading {
-    margin: 0;
+    margin-bottom: 20px;
     padding: 0;
 }
 
 .at-Panel-headingRow {
-    margin-bottom: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
 }
 
 .at-Panel-dismiss {
@@ -42,7 +44,13 @@
     vertical-align: middle;
     white-space: nowrap;
     text-align: center;
-    margin-left: 5px;
+    margin-left: 10px;
+    margin-right: auto;
+}
+
+.at-Panel-headingCustomContent {
+    display: flex;
+    flex: 1;
 }
 
 .at-Panel-label {

awx/ui/client/lib/components/panel/heading.directive.js

@@ -12,7 +12,11 @@ function atPanelHeading () {
         replace: true,
         transclude: true,
         templateUrl,
-        link
+        link,
+        scope: {
+            title: '@',
+            badge: '@?'
+        }
     };
 }
 

awx/ui/client/lib/components/panel/heading.partial.html

@@ -1,20 +1,27 @@
-<div class="row at-Panel-headingRow">
-    <div class="col-xs-10"
+<div class="at-Panel-heading">
+    <div class="at-Panel-headingRow"
         ng-if="!hideDismiss">
         <h3 class="at-Panel-headingTitle">
-            <ng-transclude></ng-transclude>
+            {{ title }}
         </h3>
-    </div>
-    <div class="col-xs-2"
-        ng-if="!hideDismiss">
+        <span ng-if="badge" class="at-Panel-headingTitleBadge">
+            {{ badge }}
+        </span>
+
+        <div class="at-Panel-headingCustomContent" ng-transclude></div>
+
         <div class="at-Panel-dismiss">
             <i class="fa fa-times-circle fa-lg" ng-click="dismiss()"></i>
         </div>
     </div>
-    <div class="col-xs-12"
+
+    <div class="at-Panel-headingRow"
         ng-if="hideDismiss">
         <h3 class="at-Panel-headingTitle">
-            <ng-transclude></ng-transclude>
+            {{ title }}
         </h3>
+        <span ng-if="badge" class="at-Panel-headingTitleBadge">
+            {{ badge }}
+        </span>
     </div>
 </div>