support more than label limit on edit and list views

awx/ui/client/legacy-styles/forms.less

@@ -173,7 +173,8 @@
 }
 
 .Form-formGroup--fullWidth {
-    max-width: none;
+    max-width: none !important;
+    width: 100% !important;
 }
 
 .Form-formGroup--checkbox{
@@ -289,7 +290,7 @@
 }
 
 .Form-dropDown {
-    height: 30px !important;
+    min-height: 30px !important;
     border-radius: 5px !important;
     border:1px solid @field-border!important;
     color: @field-input-text!important;

awx/ui/client/src/access/roleList.block.less

@@ -37,7 +37,7 @@
     border-top-left-radius: 0px;
     border-bottom-left-radius: 0px;
     border-right: 0;
-    max-wdith: ~"calc(100% - 23px)";
+    max-width: ~"calc(100% - 23px)";
     margin-right: 5px;
 }
 

awx/ui/client/src/bread-crumb/bread-crumb.directive.js

@@ -1,5 +1,5 @@
 export default
-    [   'templateUrl', '$state', 'FeaturesService', 'ProcessErrors', 'Store', 'Empty', function(templateUrl, $state, FeaturesService, ProcessErrors, Store, Empty) {
+    [   'templateUrl', '$state', 'FeaturesService', 'ProcessErrors', 'Store', 'Empty', '$log', function(templateUrl, $state, FeaturesService, ProcessErrors, Store, Empty, $log) {
         return {
             restrict: 'E',
             templateUrl: templateUrl('bread-crumb/bread-crumb'),
@@ -75,6 +75,7 @@ export default
                             scope.licenseType = licenseInfo ? licenseInfo.license_type : null;
                             if (!licenseInfo) {
                                 console.warn("License info not loaded correctly"); // jshint ignore:line
+                                $log.error("License info not loaded correctly");
                             }
                         })
                         .catch(function (response) {

awx/ui/client/src/forms/JobTemplates.js

@@ -224,41 +224,6 @@ export default
                         text: 'Prompt on launch'
                     }
                 },
-                labels: {
-                    label: 'Labels',
-                    type: 'select',
-                    ngOptions: 'label.label for label in labelOptions track by label.value',
-                    multiSelect: true,
-                    addRequired: false,
-                    editRequired: false,
-                    dataTitle: 'Labels',
-                    dataPlacement: 'right',
-                    awPopOver: 'You can add labels to a job template to aid in filtering',
-                    dataContainer: 'body'
-                },
-                variables: {
-                    label: 'Extra Variables',
-                    type: 'textarea',
-                    class: 'Form-textAreaLabel Form-formGroup--fullWidth',
-                    rows: 6,
-                    addRequired: false,
-                    editRequired: false,
-                    "default": "---",
-                    column: 2,
-                    awPopOver: "<p>Pass extra command line variables to the playbook. This is the -e or --extra-vars command line parameter " +
-                        "for ansible-playbook. Provide key/value pairs using either YAML or JSON.</p>" +
-                        "JSON:<br />\n" +
-                        "<blockquote>{<br />&emsp;\"somevar\": \"somevalue\",<br />&emsp;\"password\": \"magic\"<br /> }</blockquote>\n" +
-                        "YAML:<br />\n" +
-                        "<blockquote>---<br />somevar: somevalue<br />password: magic<br /></blockquote>\n",
-                    dataTitle: 'Extra Variables',
-                    dataPlacement: 'right',
-                    dataContainer: "body",
-                    subCheckbox: {
-                        variable: 'ask_variables_on_launch',
-                        text: 'Prompt on launch'
-                    }
-                },
                 become_enabled: {
                   label: 'Enable Privilege Escalation',
                   type: 'checkbox',
@@ -309,6 +274,49 @@ export default
                     dataPlacement: 'right',
                     dataTitle: "Host Config Key",
                     dataContainer: "body"
+                },
+                survey: {
+                    type: 'custom',
+                    column: 2,
+                    ngHide: "job_type.value === 'scan'" ,
+                    control: '<button type="button" class="btn btn-sm Form-surveyButton" id="job_templates_create_survey_btn" ng-show="!survey_exists" ng-click="addSurvey()">ADD SURVEY</button>'+
+                            '<button type="button" class="btn btn-sm Form-surveyButton" id="job_templates_edit_survey_btn" ng-show="survey_exists" ng-click="editSurvey()">EDIT SURVEY</button>'
+                },
+                labels: {
+                    label: 'Labels',
+                    type: 'select',
+                    class: 'Form-formGroup--fullWidth',
+                    ngOptions: 'label.label for label in labelOptions track by label.value',
+                    multiSelect: true,
+                    addRequired: false,
+                    editRequired: false,
+                    dataTitle: 'Labels',
+                    dataPlacement: 'right',
+                    awPopOver: 'You can add labels to a job template to aid in filtering',
+                    dataContainer: 'body'
+                },
+                variables: {
+                    label: 'Extra Variables',
+                    type: 'textarea',
+                    class: 'Form-textAreaLabel Form-formGroup--fullWidth',
+                    rows: 6,
+                    addRequired: false,
+                    editRequired: false,
+                    "default": "---",
+                    column: 2,
+                    awPopOver: "<p>Pass extra command line variables to the playbook. This is the -e or --extra-vars command line parameter " +
+                        "for ansible-playbook. Provide key/value pairs using either YAML or JSON.</p>" +
+                        "JSON:<br />\n" +
+                        "<blockquote>{<br />&emsp;\"somevar\": \"somevalue\",<br />&emsp;\"password\": \"magic\"<br /> }</blockquote>\n" +
+                        "YAML:<br />\n" +
+                        "<blockquote>---<br />somevar: somevalue<br />password: magic<br /></blockquote>\n",
+                    dataTitle: 'Extra Variables',
+                    dataPlacement: 'right',
+                    dataContainer: "body",
+                    subCheckbox: {
+                        variable: 'ask_variables_on_launch',
+                        text: 'Prompt on launch'
+                    }
                 }
             },
 

awx/ui/client/src/job-templates/edit/job-templates-edit.controller.js

@@ -419,25 +419,48 @@ export default
             Rest.setUrl('api/v1/labels');
             Wait("start");
             Rest.get()
-                .success(function (data) {
+                .success(function () {
-                    $scope.labelOptions = data.results
+                    var seeMoreResolve = $q.defer();
-                        .map((i) => ({label: i.name, value: i.id}));
+
-                    $scope.$emit("choicesReady");
+                    var getNext = function(data, arr, resolve) {
+                        Rest.setUrl(data.next);
+                        Rest.get()
+                            .success(function (data) {
+                                if (data.next) {
+                                    getNext(data, arr.concat(data.results), resolve);
+                                } else {
+                                    resolve.resolve(arr.concat(data.results));
+                                }
+                            });
+                    };
+
                     Rest.setUrl(defaultUrl + $state.params.template_id +
                          "/labels");
                     Rest.get()
                         .success(function(data) {
-                            var opts = data.results
+                            if (data.next) {
-                                .map(i => ({id: i.id + "",
+                                getNext(data, data.results, seeMoreResolve);
-                                    test: i.name}));
+                            } else {
-                            CreateSelect2({
+                                seeMoreResolve.resolve(data.results);
-                                element:'#job_templates_labels',
+                            }
-                                multiple: true,
+
-                                addNew: true,
+                            seeMoreResolve.promise.then(function (labels) {
-                                opts: opts
+                                $scope.labelOptions = labels
+                                    .map((i) => ({label: i.name, value: i.id}));
+                                $scope.$emit("choicesReady");
+                                var opts = labels
+                                    .map(i => ({id: i.id + "",
+                                        test: i.name}));
+                                CreateSelect2({
+                                    element:'#job_templates_labels',
+                                    multiple: true,
+                                    addNew: true,
+                                    opts: opts
+                                });
+                                Wait("stop");
                             });
-                            Wait("stop");
                         });
+
                     CreateSelect2({
                         element:'#job_templates_verbosity',
                         multiple: false

awx/ui/client/src/job-templates/labels/labelsList.block.less

@@ -7,7 +7,8 @@
     align-items: flex-start;
 }
 
-.LabelList-tagContainer {
+.LabelList-tagContainer,
+.LabelList-seeMore {
     display: flex;
     max-width: 100%;
 }
@@ -16,11 +17,10 @@
     border-radius: 5px;
     padding: 2px 10px;
     margin: 4px 0px;
-    border: 1px solid @d7grey;
     font-size: 12px;
-    color: @default-interface-txt;
+    color: @default-bg;
     text-transform: uppercase;
-    background-color: @default-bg;
+    background-color: @default-link;
     margin-right: 5px;
     max-width: 100%;
     white-space: nowrap;
@@ -28,23 +28,36 @@
     overflow: hidden;
 }
 
+.LabelList-seeMore {
+    color: @default-link;
+    margin: 4px 0px;
+    text-transform: uppercase;
+    padding: 2px 0px;
+    cursor: pointer;
+    border-radius: 5px;
+    font-size: 11px;
+}
+
+.LabelList-seeMore:hover {
+    color: @default-link-hov;
+}
+
 .LabelList-tag--deletable {
     margin-right: 0px;
-    border-top-right-radius: 0px;
+    border-top-left-radius: 0px;
-    border-bottom-right-radius: 0px;
+    border-bottom-left-radius: 0px;
     border-right: 0;
-    max-wdith: ~"calc(100% - 23px)";
+    max-width: ~"calc(100% - 23px)";
+    margin-right: 5px;
 }
 
 .LabelList-deleteContainer {
-    border: 1px solid @d7grey;
+    background-color: @default-link;
-    border-left-color: @default-bg;
+    border-top-left-radius: 5px;
-    background-color: @default-bg;
+    border-bottom-left-radius: 5px;
-    border-top-right-radius: 5px;
+    color: @default-bg;
-    border-bottom-right-radius: 5px;
     padding: 0 5px;
     margin: 4px 0px;
-    margin-right: 5px;
     align-items: center;
     display: flex;
     cursor: pointer;
@@ -52,7 +65,7 @@
 
 .LabelList-tagDelete {
     font-size: 13px;
-    color: @default-icon;
+    color: @default-bg;
 }
 
 .LabelList-name {

awx/ui/client/src/job-templates/labels/labelsList.directive.js

@@ -6,14 +6,50 @@ export default
         'GetBasePath',
         'ProcessErrors',
         'Prompt',
-        function(templateUrl, Wait, Rest, GetBasePath, ProcessErrors, Prompt) {
+        '$q',
+        function(templateUrl, Wait, Rest, GetBasePath, ProcessErrors, Prompt, $q) {
             return {
                 restrict: 'E',
                 scope: false,
                 templateUrl: templateUrl('job-templates/labels/labelsList'),
                 link: function(scope, element, attrs) {
+                    scope.seeMoreInactive = true;
+
                     scope.labels = scope.
-                        job_template.summary_fields.labels;
+                        job_template.summary_fields.labels.results;
+
+                    scope.count = scope.
+                        job_template.summary_fields.labels.count;
+
+                    var getNext = function(data, arr, resolve) {
+                        Rest.setUrl(data.next);
+                        Rest.get()
+                            .success(function (data) {
+                                if (data.next) {
+                                    getNext(data, arr.concat(data.results), resolve);
+                                } else {
+                                    resolve.resolve(arr.concat(data.results));
+                                }
+                            });
+                    };
+
+                    scope.seeMore = function () {
+                        var seeMoreResolve = $q.defer();
+                        Rest.setUrl(scope.job_template.related.labels);
+                        Rest.get()
+                            .success(function(data) {
+                                if (data.next) {
+                                    getNext(data, data.results, seeMoreResolve);
+                                } else {
+                                    seeMoreResolve.resolve(data.results);
+                                }
+                            });
+
+                        seeMoreResolve.promise.then(function (labels) {
+                            scope.labels = labels;
+                            scope.seeMoreInactive = false;
+                        });
+                    };
 
                     scope.deleteLabel = function(templateId, templateName, labelId, labelName) {
                         var action = function () {

awx/ui/client/src/job-templates/labels/labelsList.partial.html

@@ -1,10 +1,11 @@
-<div class="LabelList-tagContainer"
+<div class="LabelList-tagContainer" ng-repeat="label in labels">
-    ng-repeat="label in labels">
-    <div class="LabelList-tag LabelList-tag--deletable">
-        <span class="LabelList-name">{{ label.name }}</span>
-    </div>
     <div class="LabelList-deleteContainer"
         ng-click="deleteLabel(job_template.id, job_template.name, label.id, label.name)">
         <i class="fa fa-times LabelList-tagDelete"></i>
     </div>
+    <div class="LabelList-tag LabelList-tag--deletable">
+        <span class="LabelList-name">{{ label.name }}</span>
+    </div>
 </div>
+<div class="LabelList-seeMore" ng-show="count > 2 && seeMoreInactive"
+    ng-click="seeMore()">View More</div>