From 642cc88fcd72e009574e50428d33269813f8702a Mon Sep 17 00:00:00 2001
From: Marliana Lara <mlara@redhat.com>
Date: Thu, 28 Jun 2018 13:44:05 -0400
Subject: [PATCH] Modify panel header to accept title and badge string bindings

---
 .../add-edit-applications.view.html           |  4 +--
 .../applications/applications.strings.js      |  1 +
 .../applications/list-applications.view.html  |  9 +++----
 .../add-edit-credentials.view.html            |  4 +--
 awx/ui/client/features/jobs/index.view.html   |  9 +------
 awx/ui/client/features/jobs/jobs.strings.js   |  1 +
 .../client/features/jobs/routes/jobs.route.js |  7 ++++-
 .../client/features/templates/index.view.html | 17 +++++-------
 .../tokens/users-tokens-add.partial.html      |  4 +--
 .../client/lib/components/panel/_index.less   | 14 +++++++---
 .../lib/components/panel/heading.directive.js |  6 ++++-
 .../lib/components/panel/heading.partial.html | 23 ++++++++++------
 .../add-edit-instance-groups.view.html        |  6 +++--
 .../add-edit/add-instance-group.controller.js |  5 ++++
 .../edit-instance-group.controller.js         |  5 ++++
 .../instance-groups/instance-group.block.less | 26 +++++++++++++++++++
 .../instance-groups.strings.js                |  3 ++-
 .../instances/instances-list.partial.html     |  4 +--
 ...stanceGroupsJobsListContainer.partial.html |  5 ++--
 .../instanceJobsListContainer.partial.html    |  5 ++--
 .../list/instance-groups-list.partial.html    |  9 +++----
 21 files changed, 106 insertions(+), 61 deletions(-)

diff --git a/awx/ui/client/features/applications/add-edit-applications.view.html b/awx/ui/client/features/applications/add-edit-applications.view.html
index a7f2a87580..1b77c009bf 100644
--- a/awx/ui/client/features/applications/add-edit-applications.view.html
+++ b/awx/ui/client/features/applications/add-edit-applications.view.html
@@ -1,7 +1,5 @@
 <at-panel>
-    <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>
diff --git a/awx/ui/client/features/applications/applications.strings.js b/awx/ui/client/features/applications/applications.strings.js
index 8dfcf521a2..ab4f8ea253 100644
--- a/awx/ui/client/features/applications/applications.strings.js
+++ b/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')
diff --git a/awx/ui/client/features/applications/list-applications.view.html b/awx/ui/client/features/applications/list-applications.view.html
index 46a144d487..14b9d8c7b2 100644
--- a/awx/ui/client/features/applications/list-applications.view.html
+++ b/awx/ui/client/features/applications/list-applications.view.html
@@ -1,9 +1,8 @@
 <at-panel>
-    <at-panel-heading hide-dismiss="true">
-        APPLICATIONS
-        <span class="badge List-titleBadge">
-            {{ vm.applicationsCount }}
-        </span>
+    <at-panel-heading
+        title="{{:: vm.strings.get('list.PANEL_TITLE') }}"
+        badge="{{ vm.applicationsCount }}"
+        hide-dismiss="true">
     </at-panel-heading>
 
     <at-panel-body>
diff --git a/awx/ui/client/features/credentials/add-edit-credentials.view.html b/awx/ui/client/features/credentials/add-edit-credentials.view.html
index f86fc34767..277994cd81 100644
--- a/awx/ui/client/features/credentials/add-edit-credentials.view.html
+++ b/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>
diff --git a/awx/ui/client/features/jobs/index.view.html b/awx/ui/client/features/jobs/index.view.html
index 5ff08419e2..9e3709790d 100644
--- a/awx/ui/client/features/jobs/index.view.html
+++ b/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">
-                    <translate>JOBS</translate>
+                <at-panel-heading title="{{:: vm.strings.get('list.PANEL_TITLE') }}" hide-dismiss="true">
                 </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>
diff --git a/awx/ui/client/features/jobs/jobs.strings.js b/awx/ui/client/features/jobs/jobs.strings.js
index a902cc4109..c2fc5e12f5 100644
--- a/awx/ui/client/features/jobs/jobs.strings.js
+++ b/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'),
diff --git a/awx/ui/client/features/jobs/routes/jobs.route.js b/awx/ui/client/features/jobs/routes/jobs.route.js
index 9129fed3d1..37c3946c99 100644
--- a/awx/ui/client/features/jobs/routes/jobs.route.js
+++ b/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,
diff --git a/awx/ui/client/features/templates/index.view.html b/awx/ui/client/features/templates/index.view.html
index 346ab0c0f1..9e8777f8f2 100644
--- a/awx/ui/client/features/templates/index.view.html
+++ b/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">
-            {{:: vm.strings.get('list.PANEL_TITLE') }}
-            <div class="at-Panel-headingTitleBadge" ng-show="vm.count">
-                {{ vm.count }}
-            </div>
+        <at-panel-heading
+            title="{{:: vm.strings.get('list.PANEL_TITLE') }}"
+            hide-dismiss="true"
+            badge="{{ vm.count }}">
         </at-panel-heading>
     </div>
     <div ng-if="!$state.is('templates')">
-        <at-panel-heading>
-            {{:: vm.strings.get('list.PANEL_TITLE') }}
-            <div class="at-Panel-headingTitleBadge" ng-show="vm.count">
-                {{ vm.count }}
-            </div>
+        <at-panel-heading
+            title="{{:: vm.strings.get('list.PANEL_TITLE') }}"
+            badge="{{ vm.count }}">
         </at-panel-heading>
     </div>
     <div ui-view="templatesList"></div>
diff --git a/awx/ui/client/features/users/tokens/users-tokens-add.partial.html b/awx/ui/client/features/users/tokens/users-tokens-add.partial.html
index 21f5a8be04..4b8343a0ed 100644
--- a/awx/ui/client/features/users/tokens/users-tokens-add.partial.html
+++ b/awx/ui/client/features/users/tokens/users-tokens-add.partial.html
@@ -1,7 +1,5 @@
 <at-panel>
-    <at-panel-heading>
-        {{ vm.panelTitle }}
-    </at-panel-heading>
+    <at-panel-heading title="{{:: vm.panelTitle }}"></at-panel-heading>
 
     <at-panel-body>
         <at-form state="vm.form" autocomplete="off">
diff --git a/awx/ui/client/lib/components/panel/_index.less b/awx/ui/client/lib/components/panel/_index.less
index b89faeb405..bf3bf2ab61 100644
--- a/awx/ui/client/lib/components/panel/_index.less
+++ b/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 {
diff --git a/awx/ui/client/lib/components/panel/heading.directive.js b/awx/ui/client/lib/components/panel/heading.directive.js
index 8850c10c2f..34296e7f94 100644
--- a/awx/ui/client/lib/components/panel/heading.directive.js
+++ b/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: '@?'
+        }
     };
 }
 
diff --git a/awx/ui/client/lib/components/panel/heading.partial.html b/awx/ui/client/lib/components/panel/heading.partial.html
index e57e6a880d..186435588c 100644
--- a/awx/ui/client/lib/components/panel/heading.partial.html
+++ b/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>
diff --git a/awx/ui/client/src/instance-groups/add-edit/add-edit-instance-groups.view.html b/awx/ui/client/src/instance-groups/add-edit/add-edit-instance-groups.view.html
index 7d8c61bb59..d4a8983d83 100644
--- a/awx/ui/client/src/instance-groups/add-edit/add-edit-instance-groups.view.html
+++ b/awx/ui/client/src/instance-groups/add-edit/add-edit-instance-groups.view.html
@@ -1,6 +1,8 @@
 <at-panel>
-    <at-panel-heading>
-        {{ vm.panelTitle }}
+    <at-panel-heading title="{{:: 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>
diff --git a/awx/ui/client/src/instance-groups/add-edit/add-instance-group.controller.js b/awx/ui/client/src/instance-groups/add-edit/add-instance-group.controller.js
index 1296e41ed4..537096996b 100644
--- a/awx/ui/client/src/instance-groups/add-edit/add-instance-group.controller.js
+++ b/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 },
diff --git a/awx/ui/client/src/instance-groups/add-edit/edit-instance-group.controller.js b/awx/ui/client/src/instance-groups/add-edit/edit-instance-group.controller.js
index 5d78912397..6b2d66bce4 100644
--- a/awx/ui/client/src/instance-groups/add-edit/edit-instance-group.controller.js
+++ b/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,
diff --git a/awx/ui/client/src/instance-groups/instance-group.block.less b/awx/ui/client/src/instance-groups/instance-group.block.less
index 22b81417ea..a36827befe 100644
--- a/awx/ui/client/src/instance-groups/instance-group.block.less
+++ b/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;
+        }
+    }
 }
diff --git a/awx/ui/client/src/instance-groups/instance-groups.strings.js b/awx/ui/client/src/instance-groups/instance-groups.strings.js
index 32a35b7982..50cd75a0d7 100644
--- a/awx/ui/client/src/instance-groups/instance-groups.strings.js
+++ b/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 = {
diff --git a/awx/ui/client/src/instance-groups/instances/instances-list.partial.html b/awx/ui/client/src/instance-groups/instances/instances-list.partial.html
index 39fae322ba..3e7e11f6b0 100644
--- a/awx/ui/client/src/instance-groups/instances/instances-list.partial.html
+++ b/awx/ui/client/src/instance-groups/instances/instances-list.partial.html
@@ -1,7 +1,5 @@
 <at-panel>
-    <at-panel-heading>
-        {{ vm.panelTitle }}
-    </at-panel-heading>
+    <at-panel-heading title="{{:: 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>
diff --git a/awx/ui/client/src/instance-groups/jobs/instanceGroupsJobsListContainer.partial.html b/awx/ui/client/src/instance-groups/jobs/instanceGroupsJobsListContainer.partial.html
index 8b3f6e5bfd..9794b87262 100644
--- a/awx/ui/client/src/instance-groups/jobs/instanceGroupsJobsListContainer.partial.html
+++ b/awx/ui/client/src/instance-groups/jobs/instanceGroupsJobsListContainer.partial.html
@@ -1,7 +1,6 @@
 <at-panel>
-    <at-panel-heading>
-        {{ vm.panelTitle }}
-    </at-panel-heading>
+    <at-panel-heading title="{{:: 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>
diff --git a/awx/ui/client/src/instance-groups/jobs/instanceJobsListContainer.partial.html b/awx/ui/client/src/instance-groups/jobs/instanceJobsListContainer.partial.html
index 1104ee9548..89a53e08d5 100644
--- a/awx/ui/client/src/instance-groups/jobs/instanceJobsListContainer.partial.html
+++ b/awx/ui/client/src/instance-groups/jobs/instanceJobsListContainer.partial.html
@@ -1,6 +1,5 @@
 <at-panel>
-    <at-panel-heading>
-        {{ vm.panelTitle }}
-    </at-panel-heading>
+    <at-panel-heading title="{{:: vm.panelTitle }}"></at-panel-heading>
+
     <div ui-view="jobsList"></div>
 </at-panel>
diff --git a/awx/ui/client/src/instance-groups/list/instance-groups-list.partial.html b/awx/ui/client/src/instance-groups/list/instance-groups-list.partial.html
index 7e07fb4d5f..81af389e26 100644
--- a/awx/ui/client/src/instance-groups/list/instance-groups-list.partial.html
+++ b/awx/ui/client/src/instance-groups/list/instance-groups-list.partial.html
@@ -1,9 +1,8 @@
 <at-panel>
-    <at-panel-heading hide-dismiss="true">
-        {{ vm.strings.get('list.PANEL_TITLE') }}
-        <span class="badge List-titleBadge">
-            {{ instanceGroupCount }}
-        </span>
+    <at-panel-heading
+        title="{{:: vm.strings.get('list.PANEL_TITLE') }}"
+        hide-dismiss="true"
+        badge="{{ instanceGroupCount }}">
     </at-panel-heading>
 
     <at-panel-body>