From 763afc72457f4a1400b26120a49fd1987a5358be Mon Sep 17 00:00:00 2001
From: Marliana Lara <mlara@redhat.com>
Date: Thu, 19 Apr 2018 13:13:13 -0400
Subject: [PATCH] Fix row label bugs and responsive actions button alignment

---
 .../client/features/jobs/jobsList.view.html   |  2 +-
 .../templates/templatesList.view.html         |  2 +-
 awx/ui/client/lib/components/list/_index.less |  6 ++++
 .../templates/labels/labelsList.block.less    |  4 +++
 .../templates/labels/labelsList.directive.js  | 31 +++++++++----------
 5 files changed, 26 insertions(+), 19 deletions(-)

diff --git a/awx/ui/client/features/jobs/jobsList.view.html b/awx/ui/client/features/jobs/jobsList.view.html
index 71fd2d875e..38237e0e93 100644
--- a/awx/ui/client/features/jobs/jobsList.view.html
+++ b/awx/ui/client/features/jobs/jobsList.view.html
@@ -66,7 +66,7 @@
                     tag-values="job.summary_fields.credentials"
                     tags-are-creds="true">
                 </at-row-item>
-                <labels-list class="LabelList" show-delete="false" is-row-item="true">
+                <labels-list class="LabelList" show-delete="false" is-row-item="true" state="job">
                 </labels-list>
             </div>
             <div class="at-Row-actions">
diff --git a/awx/ui/client/features/templates/templatesList.view.html b/awx/ui/client/features/templates/templatesList.view.html
index 7713e153db..fee9f2b31a 100644
--- a/awx/ui/client/features/templates/templatesList.view.html
+++ b/awx/ui/client/features/templates/templatesList.view.html
@@ -83,7 +83,7 @@
                     label-value="{{:: vm.strings.get('list.ROW_ITEM_LABEL_RAN') }}"
                     value="{{ vm.getLastRan(template) }}">
                 </at-row-item>
-                <labels-list class="LabelList" show-delete="false" is-row-item="true">
+                <labels-list class="LabelList" show-delete="false" is-row-item="true" state="template">
                 </labels-list>
             </div>
             <div class="at-Row-actions">
diff --git a/awx/ui/client/lib/components/list/_index.less b/awx/ui/client/lib/components/list/_index.less
index c4fc0df98c..dfcb74adad 100644
--- a/awx/ui/client/lib/components/list/_index.less
+++ b/awx/ui/client/lib/components/list/_index.less
@@ -114,6 +114,7 @@
 .at-Row-content {
     align-items: center;
     display: flex;
+    flex-wrap: wrap;
     grid-column-start: 2;
     padding: @at-padding-list-row;
 }
@@ -160,6 +161,10 @@
     line-height: @at-line-height-list-row-item-labels;
     display: flex;
     flex-wrap: wrap;
+
+    * {
+        font-size: 10px;
+    }
 }
 
 .at-RowItem-header {
@@ -268,6 +273,7 @@
 @media screen and (max-width: @at-breakpoint-compact-list) {
     .at-Row-actions {
         flex-direction: column;
+        align-items: center;
     }
 
     .at-RowAction {
diff --git a/awx/ui/client/src/templates/labels/labelsList.block.less b/awx/ui/client/src/templates/labels/labelsList.block.less
index ccec1c058e..39041117a0 100644
--- a/awx/ui/client/src/templates/labels/labelsList.block.less
+++ b/awx/ui/client/src/templates/labels/labelsList.block.less
@@ -6,6 +6,9 @@
     align-items: flex-start;
 }
 
+.LabelList-tagContainer {
+    height: fit-content;
+}
 
 .LabelList-tagContainer,
 .LabelList-seeMoreLess {
@@ -70,6 +73,7 @@
 .LabelList-name {
     flex: initial;
     max-width: 100%;
+    word-break: break-word;
 }
 
 .LabelList-tag--deletable > .LabelList-name {
diff --git a/awx/ui/client/src/templates/labels/labelsList.directive.js b/awx/ui/client/src/templates/labels/labelsList.directive.js
index 3763998427..422f04da33 100644
--- a/awx/ui/client/src/templates/labels/labelsList.directive.js
+++ b/awx/ui/client/src/templates/labels/labelsList.directive.js
@@ -12,7 +12,9 @@ export default
         function(templateUrl, Wait, Rest, GetBasePath, ProcessErrors, Prompt, $q, $filter, $state) {
             return {
                 restrict: 'E',
-                scope: false,
+                scope: {
+                    state: '='
+                },
                 templateUrl: templateUrl('templates/labels/labelsList'),
                 link: function(scope, element, attrs) {
                     scope.showDelete = attrs.showDelete === 'true';
@@ -33,7 +35,9 @@ export default
 
                     scope.seeMore = function () {
                         var seeMoreResolve = $q.defer();
-                        Rest.setUrl(scope[scope.$parent.list.iterator].related.labels);
+                        if (scope.state) {
+                            Rest.setUrl(scope.state.related.labels);
+                        }
                         Rest.get()
                             .then(({data}) => {
                                 if (data.next) {
@@ -92,23 +96,16 @@ export default
                         });
                     };
 
-                    if (scope.$parent.$parent.template) {
-                        if (_.has(scope, '$parent.$parent.template.summary_fields.labels.results')) {
-                            scope.labels = scope.$parent.$parent.template.summary_fields.labels.results.slice(0, 5);
-                            scope.count = scope.$parent.$parent.template.summary_fields.labels.count;
-                        }
-                    } else if (scope.$parent.$parent.job) {
-                        if (_.has(scope, '$parent.$parent.job.summary_fields.labels.results')) {
-                            scope.labels = scope.$parent.$parent.job.summary_fields.labels.results.slice(0, 5);
-                            scope.count = scope.$parent.$parent.job.summary_fields.labels.count;
-                        }
-                    } else {
-                        scope.$watchCollection(scope.$parent.list.iterator, function() {
+                    if (_.has(scope.state, 'summary_fields.labels.results')) {
+                        scope.labels = scope.state.summary_fields.labels.results.slice(0, 5);
+                        scope.count = scope.state.summary_fields.labels.count;
+                       } else {
+                        scope.$watchCollection(scope.state, function() {
                             // To keep the array of labels fresh, we need to set up a watcher - otherwise, the
                             // array will get set initially and then never be updated as labels are removed
-                            if (scope[scope.$parent.list.iterator].summary_fields.labels){
-                                scope.labels = scope[scope.$parent.list.iterator].summary_fields.labels.results.slice(0, 5);
-                                scope.count = scope[scope.$parent.list.iterator].summary_fields.labels.count;
+                            if (scope.state.summary_fields.labels){
+                                scope.labels = scope.state.summary_fields.labels.results.slice(0, 5);
+                                scope.count = scope.state.summary_fields.labels.count;
                             }
                             else{
                                 scope.labels = null;