updated template list to using new components

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

@@ -9,6 +9,10 @@
     padding: 0;
 }
 
+.at-Panel-headingRow {
+    margin-bottom: 20px;
+}
+
 .at-Panel-dismiss {
     .at-mixin-ButtonIcon();
     color: @at-color-icon-dismiss;
@@ -24,3 +28,19 @@
     .at-mixin-Heading(@at-font-size-panel-heading);
     text-transform: none;
 }
+
+.at-Panel-headingTitleBadge {
+    font-size: 11px;
+    font-weight: normal;
+    padding: 2px 10px;
+    line-height: 10px;
+    background-color: #848992;
+    border-radius: 5px;
+    display: inline-block;
+    min-width: 10px;
+    color: #fff;
+    vertical-align: middle;
+    white-space: nowrap;
+    text-align: center;
+    margin-left: 5px;
+}

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

@@ -1,6 +1,7 @@
 const templateUrl = require('~components/panel/heading.partial.html');
 
 function link (scope, el, attrs, panel) {
+    scope.hideDismiss = Boolean(attrs.hideDismiss);
     panel.use(scope);
 }
 

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

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