Merge pull request #5927 from gconsidine/uxi/templates

Uxi/templates

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

@@ -490,9 +490,9 @@ input[type='radio']:checked:before {
 
 .FormToggle {}
 .FormToggle-container {
-    float: right;
     margin: 0 0 0 10px;
     padding-bottom: 5px;
+    display: initial;
 
     label {
         &:first-child {
@@ -513,6 +513,16 @@ input[type='radio']:checked:before {
     }
 }
 
+.Form-inputLabelContainer {
+    width: 100%;
+    display: block !important;
+}
+
+.Form-inputLabelContainer[for=variables] {
+    width: 100%;
+    display: inline-block !important;
+}
+
 .Form-inputLabel{
     text-transform: uppercase;
     color: @default-interface-txt;
@@ -614,6 +624,10 @@ input[type='radio']:checked:before {
     max-width: 100% !important;
 }
 
+.Form-checkbox {
+    float: right;
+}
+
 .Form-subCheckbox {
     margin-top: 5px;
     font-size: small;

awx/ui/client/src/shared/Utilities.js

@@ -665,6 +665,10 @@ angular.module('Utilities', ['RestServices', 'Utilities'])
                     // Don't toggle the dropdown when a multiselect option is
                     // being removed
                     if (multiple) {
+                        if (params.disabledOptions) {
+                            $(element).on('select2:selecting', e => e.preventDefault());
+                        }
+
                         $(element).on('select2:opening', (e) => {
                             var unselecting = $(e.target).data('select2-unselecting');
                             if (unselecting === true) {

awx/ui/client/src/shared/form-generator.js

@@ -639,7 +639,7 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
                     return html;
                 }
 
-                function label() {
+                function label(options) {
                     var html = '';
                     if (field.label || field.labelBind) {
                         html += "<label class=\"";
@@ -681,6 +681,10 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
                                 </div>`;
                         }
 
+                        if (options && options.checkbox) {
+                            html += createCheckbox(options.checkbox);
+                        }
+
                         if (field.labelAction) {
                             let action = field.labelAction;
                             let href = action.href || "";
@@ -697,6 +701,7 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
 
                         html += "\n\t</label>\n";
                     }
+
                     return html;
                 }
 
@@ -770,7 +775,21 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
 
                     //text fields
                     if (field.type === 'text' || field.type === 'password' || field.type === 'email') {
-                        html += label();
+                        let labelOptions = {};
+
+                        if (field.subCheckbox) {
+                            labelOptions.checkbox = {
+                                id: `${this.form.name}_${fld}_ask_chbox`,
+                                ngShow: field.subCheckbox.ngShow,
+                                ngChange: field.subCheckbox.ngChange,
+                                ngModel: field.subCheckbox.variable,
+                                ngDisabled: field.ngDisabled,
+                                text: field.subCheckbox.text || ''
+                            };
+                        }
+
+                        html += label(labelOptions);
+
                         html += "<div ";
                         html += (horizontal) ? "class=\"" + getFieldWidth() + "\"" : "";
                         html += ">\n";
@@ -821,19 +840,6 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
                                 "<i class=\"fa fa-magic\"></i></button></span>\n</div>\n";
                         }
 
-                        if (field.subCheckbox) {
-                            html += "<label class=\"checkbox-inline Form-subCheckbox\" ";
-                            html += (field.subCheckbox.ngShow) ? "ng-show=\"" + field.subCheckbox.ngShow + "\" " : "";
-                            html += ">";
-                            html += "<input type=\"checkbox\" ng-model=\"" + field.subCheckbox.variable + "\" ";
-                            html += (field.subCheckbox.ngChange) ? "ng-change=\"" + field.subCheckbox.ngChange + "\" " : "";
-                            html += (field.ngDisabled) ? "ng-disabled=\"" + field.ngDisabled + "\" " : "";
-                            html += "id=\"" + this.form.name + "_" + fld + "_ask_chbox\" ";
-                            html += ">";
-                            html += field.subCheckbox.text ? field.subCheckbox.text : "";
-                            html += "</label>";
-                        }
-
                         // Add error messages
                         if (field.required || field.awRequiredWhen) {
                             error_message = i18n._('Please enter a value.');
@@ -930,24 +936,6 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
 
                         html += "</div>\n";
 
-                        if (field.subCheckbox) {
-                            html += "<label class=\"checkbox-inline Form-subCheckbox\" ";
-                            html += (field.subCheckbox.ngShow) ? "ng-show=\"" + field.subCheckbox.ngShow + "\" " : "";
-                            html += ">";
-                            html += "<input type=\"checkbox\" ng-model=\"" +
-                                field.subCheckbox.variable + "\" ";
-                            html += (field.subCheckbox.ngChange) ? "ng-change=\"" + field.subCheckbox.ngChange + "\" " : "";
-                            html += "id=\"" + this.form.name + "_" + fld + "_ask_chbox\" ";
-                            if (field.subCheckbox.ngDisabled !== undefined) {
-                                html += "ng-disabled='" + field.subCheckbox.ngDisabled + "'";
-                            } else {
-                                html += (field.ngDisabled) ? "ng-disabled=\"" + field.ngDisabled + "\" " : "";
-                            }
-                            html += ">";
-                            html += field.subCheckbox.text ? field.subCheckbox.text : "";
-                            html += "</label>";
-                        }
-
                         // Add error messages
                         if (field.required || field.awRequiredWhen) {
                             error_message = i18n._("Please enter a value.");
@@ -1006,8 +994,20 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
 
                     //textarea fields
                     if (field.type === 'textarea') {
+                        let labelOptions = {};
 
-                        html += label();
+                        if (field.subCheckbox) {
+                            labelOptions.checkbox = {
+                                id: `${this.form.name}_${fld}_ask_chbox`,
+                                ngModel: field.subCheckbox.variable,
+                                ngShow: field.subCheckbox.ngShow,
+                                ngChange: field.subCheckbox.ngChange,
+                                ngDisabled: field.ngDisabled || field.subCheckbox.ngDisabled,
+                                text: field.subCheckbox.text || ''
+                            };
+                        }
+
+                        html += label(labelOptions);
 
                         html += "<div ";
                         html += (horizontal) ? "class=\"" + getFieldWidth() + "\"" : "";
@@ -1038,23 +1038,6 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
                         }
                         html += "aw-watch ></textarea>\n";
 
-                        if (field.subCheckbox) {
-                            html += "<label class=\"checkbox-inline Form-subCheckbox\" ";
-                            html += (field.subCheckbox.ngShow) ? "ng-show=\"" + field.subCheckbox.ngShow + "\" " : "";
-                            html += ">";
-                            html += "<input type=\"checkbox\" ng-model=\"" +
-                                field.subCheckbox.variable + "\" ";
-                            html += (field.subCheckbox.ngChange) ? "ng-change=\"" + field.subCheckbox.ngChange + "\" " : "";
-                            html += "id=\"" + this.form.name + "_" + fld + "_ask_chbox\" ";
-                            if (field.subCheckbox.ngDisabled) {
-                                html += "ng-disabled='" + field.subCheckbox.ngDisabled + "'";
-                            }
-                            html += (field.ngDisabled) ? "ng-disabled=\"" + field.ngDisabled + "\" " : "";
-                            html += ">";
-                            html += field.subCheckbox.text ? field.subCheckbox.text : "";
-                            html += "</label>";
-                        }
-
                         // Add error messages
                         if (field.required) {
                             html += "<div class=\"error\" id=\"" + this.form.name + "-" + fld + "-required-error\" ng-show=\"" + this.form.name + '_form.' + fld + ".$dirty && " +
@@ -1066,8 +1049,20 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
 
                     //select field
                     if (field.type === 'select') {
+                        let labelOptions = {};
 
-                        html += label();
+                        if (field.subCheckbox) {
+                            labelOptions.checkbox = {
+                                id: `${this.form.name}_${fld}_ask_chbox`,
+                                ngShow: field.subCheckbox.ngShow,
+                                ngModel: field.subCheckbox.variable,
+                                ngChange: field.subCheckbox.ngChange,
+                                ngDisabled: field.subCheckbox.ngDisabled,
+                                text: field.subCheckbox.text
+                            };
+                        }
+
+                        html += label(labelOptions);
 
                         html += "<div ";
                         html += (horizontal) ? "class=\"" + getFieldWidth() + "\"" : "";
@@ -1106,23 +1101,6 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
                         html += "</select>\n";
                         html += "</div>\n";
 
-                        if (field.subCheckbox) {
-                            html += "<label class=\"checkbox-inline Form-subCheckbox\" ";
-                            html += (field.subCheckbox.ngShow) ? "ng-show=\"" + field.subCheckbox.ngShow + "\" " : "";
-                            html += ">";
-                            html += "<input type=\"checkbox\" ng-model=\"" +
-                                field.subCheckbox.variable + "\" ";
-                            html += (field.subCheckbox.ngChange) ? "ng-change=\"" + field.subCheckbox.ngChange + "\" " : "";
-                            html += "id=\"" + this.form.name + "_" + fld + "_ask_chbox\" ";
-                            if (field.subCheckbox.ngDisabled) {
-                                html += "ng-disabled='" + field.subCheckbox.ngDisabled + "'";
-                            }
-                            html += (field.ngDisabled) ? "ng-disabled=\"" + field.ngDisabled + "\" " : "";
-                            html += ">";
-                            html += field.subCheckbox.text ? field.subCheckbox.text : "";
-                            html += "</label>";
-                        }
-
                             // Add error messages
                         if (field.required || field.awRequiredWhen) {
                                 html += "<div class=\"error\" id=\"" + this.form.name + "-" + fld + "-required-error\" ng-show=\"" + this.form.name + '_form.' + fld + ".$dirty && " +
@@ -1142,8 +1120,20 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
 
                     //number field
                     if (field.type === 'number') {
+                        let labelOptions = {};
 
-                        html += label();
+                        if (field.subCheckbox) {
+                            labelOptions.checkbox = {
+                                id: `${this.form.name}_${fld}_ask_chbox`,
+                                ngShow: field.subCheckbox.ngShow,
+                                ngChange: field.subCheckbox.ngChange,
+                                ngModel: field.subCheckbox.variable,
+                                ngDisabled: field.ngDisabled,
+                                text: field.subCheckbox.text || ''
+                            };
+                        }
+
+                        html += label(labelOptions);
 
                         html += "<div ";
                         html += (horizontal) ? "class=\"" + getFieldWidth() + "\"" : "";
@@ -1178,20 +1168,6 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
                         }
                         html += " >\n";
 
-                        if (field.subCheckbox) {
-                            html += "<label class=\"checkbox-inline Form-subCheckbox\" ";
-                            html += (field.subCheckbox.ngShow) ? "ng-show=\"" + field.subCheckbox.ngShow + "\" " : "";
-                            html += ">";
-                            html += "<input type=\"checkbox\" ng-model=\"" +
-                                field.subCheckbox.variable + "\" ";
-                            html += (field.subCheckbox.ngChange) ? "ng-change=\"" + field.subCheckbox.ngChange + "\" " : "";
-                            html += (field.ngDisabled) ? "ng-disabled=\"" + field.ngDisabled + "\" " : "";
-                            html += "id=\"" + this.form.name + "_" + fld + "_ask_chbox\" ";
-                            html += ">";
-                            html += field.subCheckbox.text ? field.subCheckbox.text : "";
-                            html += "</label>";
-                        }
-
                         // Add error messages
                         if (field.required) {
                             html += "<div class=\"error\" id=\"" + this.form.name + "-" + fld + "-required-error\" ng-show=\"" + this.form.name + '_form.' + fld + ".$dirty && " +
@@ -1362,7 +1338,20 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
                     //lookup type fields
                     if (field.type === 'lookup') {
                         let defaultLookupNgClick = `$state.go($state.current.name + '.${field.sourceModel}', {selected: ${field.sourceModel}})`;
-                        html += label();
+                        let labelOptions = {};
+
+                        if (field.subCheckbox) {
+                            labelOptions.checkbox = {
+                                id: `${this.form.name}_${fld}_ask_chbox`,
+                                ngShow: field.subCheckbox.ngShow,
+                                ngChange: field.subCheckbox.ngChange,
+                                ngModel: field.subCheckbox.variable,
+                                ngDisabled: field.ngDisabled,
+                                text: field.subCheckbox.text || ''
+                            };
+                        }
+
+                        html += label(labelOptions);
 
                         html += "<div ";
                         html += (horizontal) ? "class=\"" + getFieldWidth() + "\"" : "";
@@ -1404,20 +1393,6 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
                         html += " awlookup >\n";
                         html += "</div>\n";
 
-                        if (field.subCheckbox) {
-                            html += "<label class=\"checkbox-inline Form-subCheckbox\" ";
-                            html += (field.subCheckbox.ngShow) ? "ng-show=\"" + field.subCheckbox.ngShow + "\" " : "";
-                            html += ">";
-                            html += "<input type=\"checkbox\" ng-model=\"" +
-                                field.subCheckbox.variable + "\" ";
-                            html += (field.subCheckbox.ngChange) ? "ng-change=\"" + field.subCheckbox.ngChange + "\" " : "";
-                            html += (field.ngDisabled) ? "ng-disabled=\"" + field.ngDisabled + "\" " : "";
-                            html += "id=\"" + this.form.name + "_" + fld + "_ask_chbox\" ";
-                            html += ">";
-                            html += field.subCheckbox.text ? field.subCheckbox.text : "";
-                            html += "</label>";
-                        }
-
                         // Add error messages
                         if (field.required || field.awRequiredWhen) {
                             html += "<div class=\"error\" id=\"" + this.form.name + "-" + fld + "-required-error\" ng-show=\"" +
@@ -2022,7 +1997,20 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
 
                 html += `<paginate base-path="${collection.basePath}" dataset="${collection.iterator}_dataset" collection="${collection.iterator}s" iterator="${collection.iterator}" ng-hide="hidePagination">`;
                 return html;
-            }
+            },
         };
+
+        function createCheckbox (options) {
+            let ngChange = options.ngChange ? `ng-change="${options.ngChange}"` : '';
+            let ngDisabled = options.ngDisabled ? `ng-disabled="${options.ngDisabled}"` : '';
+            let ngModel = options.ngModel ? `ng-model="${options.ngModel}"` : '';
+            let ngShow = options.ngShow ? `ng-show="${options.ngShow}"` : '';
+
+            return `
+                <label class="checkbox-inline Form-checkbox" ${ngShow}>
+                    <input type="checkbox" id="${options.id}" ${ngModel} ${ngChange} ${ngDisabled} />
+                    ${options.text}
+                </label> `;
+        }
     }
 ]);

awx/ui/client/src/templates/survey-maker/render/multiple-choice.directive.js

@@ -2,7 +2,6 @@
 import {templateUrl} from '../../../shared/template-url/template-url.factory';
 
 function link($timeout, CreateSelect2, scope, element, attrs, ngModel) {
-
     $timeout(function() {
 
         // select2-ify the dropdown.  If the preview flag is passed here
@@ -13,12 +12,13 @@ function link($timeout, CreateSelect2, scope, element, attrs, ngModel) {
         // and we don't actually need the dropdown portion.  Note that the custom
         // dropdown adapter is used to get the dropdown contents to show up in
         // a modal.
+
         CreateSelect2({
              element: element.find('select'),
              multiple: scope.isMultipleSelect(),
-             customDropdownAdapter: scope.preview ? false : true
+             customDropdownAdapter: scope.preview ? false : true,
+             disabledOptions: true
         });
-
     });
 
 }

awx/ui/client/src/templates/survey-maker/render/survey-question.partial.html

@@ -10,9 +10,7 @@
         question="question"
         choices="choices"
         ng-required="isRequired === 'true'"
-        ng-model="defaultValue"
+        ng-model="defaultValue">
-        ng-disabled="isDisabled === 'true'"
-        preview="preview">
     </multiple-choice>
 </div>
 <div ng-if="question.type === 'password'" class="input_area input-group">

awx/ui/client/src/templates/workflows/workflow-maker/workflow-maker.block.less

@@ -151,9 +151,7 @@
     color: @default-interface-txt;
 }
 .WorkflowLegend-maker--left {
-    display: flex;
     flex: 1 0 auto;
-    padding-left: 20px;
 }
 .WorkflowLegend-maker--right {
     flex: 0 0 215px;
@@ -213,16 +211,20 @@
     padding-right: 20px;
     position:relative;
 }
+
+.Key-menuIcon,
 .WorkflowMaker-manualControlsIcon {
     color: @default-icon;
     vertical-align: middle;
     font-size: 1.2em;
     margin-left: 10px;
 }
+.Key-menuIcon:hover,
 .WorkflowMaker-manualControlsIcon:hover {
     color: @default-link-hov;
     cursor: pointer;
 }
+.Key-menuIcon--active,
 .WorkflowMaker-manualControlsIcon--active {
     color: @default-link-hov;
 }
@@ -248,3 +250,67 @@
 .WorkflowMaker-formTab {
     margin-right: 10px;
 }
+
+.Key-list {
+    margin: 0;
+    padding: 20px;
+    position: absolute;
+    background-color: @default-bg;
+    border: 1px solid @default-list-header-bg;
+}
+.Key-listItem {
+    display: flex;
+    padding: 0;
+    margin: 5px 0 0 0;
+}
+.Key-listItemContent {
+    margin: 0;
+    line-height: 20px;
+}
+.Key-listItemContent--circle {
+    line-height: 28px;
+}
+
+.Key-icon {
+    height: 3px;
+    width: 20px;
+    margin: 9px 5px 9px 0px;
+}
+.Key-heading {
+    font-weight: 700;
+    margin: 0 0 10px;
+    line-height: 0;
+    padding: 0;
+}
+.Key-icon--success {
+    background-color: @submit-button-bg;
+}
+.Key-icon--fail {
+    background-color: @default-err;
+}
+.Key-icon--always {
+    background-color: @default-link;
+}
+.Key-icon--warning {
+    background: @default-warning;
+}
+.Key-icon--default {
+    background: @default-icon;
+}
+.Key-icon--circle {
+    border-radius: 50%;
+    width: 20px;
+    height: 20px;
+    color: @default-bg;
+    text-align: center;
+    line-height: 20px;
+    margin: 4px 5px 5px 0px;
+}
+.Key-details {
+    display: flex;
+    height: 40px;
+    line-height: 40px;
+    padding-left: 20px;
+    border: 1px solid @default-no-items-bord;
+    margin-top:10px;
+}

awx/ui/client/src/templates/workflows/workflow-maker/workflow-maker.controller.js

@@ -35,6 +35,10 @@ export default ['$scope', 'WorkflowService', 'GetBasePath', 'TemplatesService',
          $scope.associateRequests = [];
          $scope.disassociateRequests = [];
 
+        $scope.showKey = false;
+        $scope.toggleKey = () => $scope.showKey = !$scope.showKey;
+        $scope.keyClassList = `{ 'Key-menuIcon--active': showKey }`;
+
         function init() {
 
             let allNodes = [];

awx/ui/client/src/templates/workflows/workflow-maker/workflow-maker.partial.html

@@ -33,27 +33,36 @@
         <div class="WorkflowMaker-contentLeft">
             <div class="WorkflowLegend-maker">
                 <div class="WorkflowLegend-maker--left">
-                    <div class="WorkflowLegend-legendItem">KEY:</div>
+                    <i ng-class="{{ keyClassList }}" class="fa fa-key Key-menuIcon" ng-click="toggleKey()"></i>
-                    <div class="WorkflowLegend-legendItem">
+                    <ul ng-show="showKey" class="Key-list noselect">
-                        <div class="WorkflowLegend-onSuccessLegend"></div>
+                        <li class="Key-listItem">
-                        <div>On Success</div>
+                            <p class="Key-heading">KEY</p>
-                    </div>
+                        </li>
-                    <div class="WorkflowLegend-legendItem">
+                        <li class="Key-listItem">
-                        <div class="WorkflowLegend-onFailLegend"></div>
+                            <div class="Key-icon Key-icon--success"></div>
-                        <div>On Fail</div>
+                            <p class="Key-listItemContent">On Success</p>
-                    </div>
+                        </li>
-                    <div class="WorkflowLegend-legendItem">
+                        <li class="Key-listItem">
-                        <div class="WorkflowLegend-alwaysLegend"></div>
+                            <div class="Key-icon Key-icon--fail"></div>
-                        <div>Always</div>
+                            <p class="Key-listItemContent">On Fail</p>
-                    </div>
+                        </li>
-                    <div class="WorkflowLegend-legendItem">
+                        <li class="Key-listItem">
-                        <div class="WorkflowLegend-letterCircle">P</div>
+                            <div class="Key-icon Key-icon--always"></div>
-                        <div>Project Sync</div>
+                            <p class="Key-listItemContent">Always</p>
-                    </div>
+                        </li>
-                    <div class="WorkflowLegend-legendItem">
+                        <li class="Key-listItem">
-                        <div class="WorkflowLegend-letterCircle">I</div>
+                            <div class="Key-icon Key-icon--circle Key-icon--default">P</div>
-                        <div>Inventory Sync</div>
+                            <p class="Key-listItemContent Key-listItemContent--circle">Project Sync</p>
-                    </div>
+                        </li>
+                        <li class="Key-listItem">
+                            <div class="Key-icon Key-icon--circle Key-icon--default">I</div>
+                            <p class="Key-listItemContent Key-listItemContent--circle">Inventory Sync</p>
+                        </li>
+                        <li class="Key-listItem">
+                            <div class="Key-icon Key-icon--circle Key-icon--warning">!</div>
+                            <p class="Key-listItemContent Key-listItemContent--circle">Warning</p>
+                        </li>
+                    </ul>
                 </div>
                 <div class="WorkflowLegend-maker--right">
                     <span class="WorkflowMaker-totalJobs">TOTAL TEMPLATES</span>