Merge pull request #2361 from marshmalien/fix/panel-header-docs

Modify panel header to accept title and badge string bindings

awx/ui/client/features/applications/add-edit-applications.view.html

@@ -1,7 +1,5 @@
 <at-panel>
-    <at-panel-heading>
+    <at-panel-heading title="{{:: vm.panelTitle }}"></at-panel-heading>
-        {{ vm.panelTitle }}
-    </at-panel-heading>
 
     <at-tab-group>
         <at-tab state="vm.tab.details">{{:: vm.strings.get('tab.DETAILS') }}</at-tab>

awx/ui/client/features/applications/applications.strings.js

@@ -25,6 +25,7 @@ function ApplicationsStrings (BaseString) {
     };
 
     ns.list = {
+        PANEL_TITLE: t.s('APPLICATIONS'),
         ROW_ITEM_LABEL_EXPIRED: t.s('EXPIRATION'),
         ROW_ITEM_LABEL_ORGANIZATION: t.s('ORG'),
         ROW_ITEM_LABEL_MODIFIED: t.s('LAST MODIFIED')

awx/ui/client/features/applications/list-applications.view.html

@@ -1,9 +1,8 @@
 <at-panel>
-    <at-panel-heading hide-dismiss="true">
+    <at-panel-heading
-        APPLICATIONS
+        title="{{:: vm.strings.get('list.PANEL_TITLE') }}"
-        <span class="badge List-titleBadge">
+        badge="{{ vm.applicationsCount }}"
-            {{ vm.applicationsCount }}
+        hide-dismiss="true">
-        </span>
     </at-panel-heading>
 
     <at-panel-body>

awx/ui/client/features/credentials/add-edit-credentials.view.html

@@ -1,5 +1,5 @@
 <at-panel ng-if="!$state.current.name.includes('permissions')">
-    <at-panel-heading>{{ vm.panelTitle }}</at-panel-heading>
+    <at-panel-heading title="{{:: vm.panelTitle }}"></at-panel-heading>
 
     <at-tab-group>
         <at-tab state="vm.tab.details">{{:: vm.strings.get('tab.DETAILS') }}</at-tab>
@@ -29,7 +29,7 @@
 </at-panel>
 
 <at-panel ng-if="$state.current.name.includes('permissions')" on-dismiss="credentials">
-    <at-panel-heading>{{:: vm.strings.get('permissions.TITLE') }}</at-panel-heading>
+    <at-panel-heading title="{{:: vm.strings.get('permissions.TITLE') }}"></at-panel-heading>
 
     <at-tab-group class="at-TabGroup--padBelow">
         <at-tab state="vm.tab.details">{{:: vm.strings.get('tab.DETAILS') }}</at-tab>

awx/ui/client/features/jobs/index.view.html

@@ -3,17 +3,10 @@
     <at-panel ng-cloak id="htmlTemplate">
         <div>
             <div ng-hide="$state.includes('schedules')">
-                <at-panel-heading hide-dismiss="true">
+                <at-panel-heading title="{{:: vm.strings.get('list.PANEL_TITLE') }}" hide-dismiss="true">
-                    <translate>JOBS</translate>
                 </at-panel-heading>
                 <div ui-view="jobsList"></div>
             </div>
-            <div ng-hide="!$state.includes('schedules')">
-                <at-panel-heading hide-dismiss="true">
-                    <translate>SCHEDULES</translate>
-                </at-panel-heading>
-                <div ui-view="schedulesList"></div>
-            </div>
         </div>
     </at-panel>
     <div ng-include="'/static/partials/logviewer.html'"></div>

awx/ui/client/features/jobs/jobs.strings.js

@@ -5,6 +5,7 @@ function JobsStrings (BaseString) {
     const ns = this.jobs;
 
     ns.list = {
+        PANEL_TITLE: t.s('JOBS'),
         ROW_ITEM_LABEL_STARTED: t.s('Started'),
         ROW_ITEM_LABEL_FINISHED: t.s('Finished'),
         ROW_ITEM_LABEL_WORKFLOW_JOB: t.s('Workflow Job'),

awx/ui/client/features/jobs/routes/jobs.route.js

@@ -58,7 +58,12 @@ export default {
     },
     views: {
         '@': {
-            templateUrl: indexTemplate
+            templateUrl: indexTemplate,
+            controller: ['JobsStrings', function (strings) {
+                const vm = this || {};
+                vm.strings = strings;
+            }],
+            controllerAs: 'vm'
         },
         'jobsList@jobs': {
             templateUrl: jobsListTemplate,

awx/ui/client/features/templates/index.view.html

@@ -2,19 +2,16 @@
 <div ui-view="form"></div>
 <at-panel ng-cloak id="htmlTemplate">
     <div ng-if="$state.is('templates')">
-        <at-panel-heading hide-dismiss="true">
+        <at-panel-heading
-            {{:: vm.strings.get('list.PANEL_TITLE') }}
+            title="{{:: vm.strings.get('list.PANEL_TITLE') }}"
-            <div class="at-Panel-headingTitleBadge" ng-show="vm.count">
+            hide-dismiss="true"
-                {{ vm.count }}
+            badge="{{ vm.count }}">
-            </div>
         </at-panel-heading>
     </div>
     <div ng-if="!$state.is('templates')">
-        <at-panel-heading>
+        <at-panel-heading
-            {{:: vm.strings.get('list.PANEL_TITLE') }}
+            title="{{:: vm.strings.get('list.PANEL_TITLE') }}"
-            <div class="at-Panel-headingTitleBadge" ng-show="vm.count">
+            badge="{{ vm.count }}">
-                {{ vm.count }}
-            </div>
         </at-panel-heading>
     </div>
     <div ui-view="templatesList"></div>

awx/ui/client/features/users/tokens/users-tokens-add.partial.html

@@ -1,7 +1,5 @@
 <at-panel>
-    <at-panel-heading>
+    <at-panel-heading title="{{:: vm.panelTitle }}"></at-panel-heading>
-        {{ vm.panelTitle }}
-    </at-panel-heading>
 
     <at-panel-body>
         <at-form state="vm.form" autocomplete="off">

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="at-Panel-heading">
-    <div class="col-xs-10"
+    <div class="at-Panel-headingRow"
         ng-if="!hideDismiss">
         <h3 class="at-Panel-headingTitle">
-            <ng-transclude></ng-transclude>
+            {{ title }}
         </h3>
-    </div>
+        <span ng-if="badge" class="at-Panel-headingTitleBadge">
-    <div class="col-xs-2"
+            {{ badge }}
-        ng-if="!hideDismiss">
+        </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>

awx/ui/client/src/instance-groups/add-edit/add-edit-instance-groups.view.html

@@ -1,6 +1,8 @@
 <at-panel>
-    <at-panel-heading>
+    <at-panel-heading title="{{:: vm.panelTitle }}">
-        {{ vm.panelTitle }}
+        <a class="Panel-docsLink" ng-href="{{ vm.docs.url }}" target="_blank" aw-tool-tip="{{:: vm.docs.help_text }}">
+            <i class="fa fa-book"></i>
+        </a>
     </at-panel-heading>
 
     <at-tab-group>

awx/ui/client/src/instance-groups/add-edit/add-instance-group.controller.js

@@ -6,6 +6,11 @@ function AddController ($state, models, strings) {
     vm.strings = strings;
     vm.panelTitle = strings.get('state.ADD_BREADCRUMB_LABEL');
 
+    vm.docs = {
+        url: 'https://docs.ansible.com/ansible-tower/latest/html/administration/clustering.html',
+        help_text: vm.strings.get('tooltips.DOCS_HELP_TEXT')
+    };
+
     vm.tab = {
         details: { _active: true },
         instances: {_disabled: true },

awx/ui/client/src/instance-groups/add-edit/edit-instance-group.controller.js

@@ -8,6 +8,11 @@ function EditController ($rootScope, $state, models, strings) {
     vm.strings = strings;
     vm.panelTitle = instanceGroup.get('name');
 
+    vm.docs = {
+        url: 'https://docs.ansible.com/ansible-tower/latest/html/administration/clustering.html',
+        help_text: vm.strings.get('tooltips.DOCS_HELP_TEXT')
+    };
+
     vm.tab = {
         details: {
             _active: true,

awx/ui/client/src/instance-groups/instance-group.block.less

@@ -48,4 +48,30 @@
     .List-tableRow .List-titleBadge {
             margin: 0 0 0 5px;
     }
+
+    .Panel-docsLink {
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 7px;
+        background: @at-white;
+        border-radius: @at-border-radius;
+        height: 30px;
+        width: 30px;
+        margin: 0 20px 0 auto;
+
+        i {
+            font-size: @at-font-size-icon;
+            color: @at-gray-848992;
+        }
+    }
+
+    .Panel-docsLink:hover {
+        background-color: @at-blue;
+
+        i {
+            color: @at-white;
+        }
+    }
 }

awx/ui/client/src/instance-groups/instance-groups.strings.js

@@ -28,7 +28,8 @@ function InstanceGroupsStrings (BaseString) {
 
     ns.tooltips = {
         ADD_INSTANCE_GROUP: t.s('Create a new Instance Group'),
-        ASSOCIATE_INSTANCES: t.s('Associate an existing Instance')
+        ASSOCIATE_INSTANCES: t.s('Associate an existing Instance'),
+        DOCS_HELP_TEXT: t.s('Instance Groups Help')
     };
 
     ns.instance = {

awx/ui/client/src/instance-groups/instances/instances-list.partial.html

@@ -1,7 +1,5 @@
 <at-panel>
-    <at-panel-heading>
+    <at-panel-heading title="{{:: vm.panelTitle }}"></at-panel-heading>
-        {{ vm.panelTitle }}
-    </at-panel-heading>
 
     <at-tab-group class="at-TabGroup--padBelow">
         <at-tab state="vm.tab.details">{{:: vm.strings.get('tab.DETAILS') }}</at-tab>

awx/ui/client/src/instance-groups/jobs/instanceGroupsJobsListContainer.partial.html

@@ -1,7 +1,6 @@
 <at-panel>
-    <at-panel-heading>
+    <at-panel-heading title="{{:: vm.panelTitle }}"></at-panel-heading>
-        {{ vm.panelTitle }}
+
-    </at-panel-heading>
     <at-tab-group class="at-TabGroup--padBelow">
         <at-tab state="vm.tab.details">{{:: vm.strings.get('tab.DETAILS') }}</at-tab>
         <at-tab state="vm.tab.instances">{{:: vm.strings.get('tab.INSTANCES') }}</at-tab>

awx/ui/client/src/instance-groups/jobs/instanceJobsListContainer.partial.html

@@ -1,6 +1,5 @@
 <at-panel>
-    <at-panel-heading>
+    <at-panel-heading title="{{:: vm.panelTitle }}"></at-panel-heading>
-        {{ vm.panelTitle }}
+
-    </at-panel-heading>
     <div ui-view="jobsList"></div>
 </at-panel>

awx/ui/client/src/instance-groups/list/instance-groups-list.partial.html

@@ -1,9 +1,8 @@
 <at-panel>
-    <at-panel-heading hide-dismiss="true">
+    <at-panel-heading
-        {{ vm.strings.get('list.PANEL_TITLE') }}
+        title="{{:: vm.strings.get('list.PANEL_TITLE') }}"
-        <span class="badge List-titleBadge">
+        hide-dismiss="true"
-            {{ instanceGroupCount }}
+        badge="{{ instanceGroupCount }}">
-        </span>
     </at-panel-heading>
 
     <at-panel-body>