From 0cadea1cb547182163428b4944dc037dc69810e2 Mon Sep 17 00:00:00 2001
From: mabashian <mabashia@redhat.com>
Date: Wed, 21 Mar 2018 14:55:38 -0400
Subject: [PATCH 1/2] Fixed bug preventing the user from ignoring a
 non-required multi-select survey question on launch

---
 awx/ui/client/src/shared/directives.js | 33 +++++++++++++-------------
 1 file changed, 17 insertions(+), 16 deletions(-)

diff --git a/awx/ui/client/src/shared/directives.js b/awx/ui/client/src/shared/directives.js
index 59d3029ebe..f63ed7ed76 100644
--- a/awx/ui/client/src/shared/directives.js
+++ b/awx/ui/client/src/shared/directives.js
@@ -1252,26 +1252,27 @@ function(ConfigurationUtils, i18n, $rootScope) {
         require: 'ngModel',
         link: function postLink(scope, element, attrs, ngModel) {
             // Watch for changes to the required attribute
-            attrs.$observe('required', function(value) {
-                if(value) {
-                    ngModel.$validators.required = function (value) {
-                        if(angular.isArray(value)) {
-                            if(value.length === 0) {
-                                return false;
-                            }
-                            else {
-                                return (!value[0] || value[0] === "") ? false : true;
-                            }
+            attrs.$observe('required', function() {
+                ngModel.$validate();
+            });
+
+            ngModel.$validators.required = function (value) {
+                if(attrs.required) {
+                    if(angular.isArray(value)) {
+                        if(value.length === 0) {
+                            return false;
                         }
                         else {
-                            return (!value || value === "") ? false : true;
+                            return (!value[0] || value[0] === "") ? false : true;
                         }
-                    };
+                    }
+                    else {
+                        return (!value || value === "") ? false : true;
+                    }
+                } else {
+                    return true;
                 }
-                else {
-                    delete ngModel.$validators.required;
-                }
-            });
+            };
         }
     };
 }]);

From c3b32e2a73334e80f84f5d56a8913f4ec9512018 Mon Sep 17 00:00:00 2001
From: mabashian <mabashia@redhat.com>
Date: Thu, 22 Mar 2018 11:58:47 -0400
Subject: [PATCH 2/2] Cleaned up awRequireMultiple and fixed broken survey
 question error messaging

---
 .../features/templates/templates.strings.js   |  1 +
 awx/ui/client/src/shared/directives.js        | 21 ++++++------
 .../steps/survey/prompt-survey.partial.html   | 32 +++++++++++--------
 .../render/multiple-choice.directive.js       |  3 +-
 .../render/multiple-choice.partial.html       |  2 +-
 5 files changed, 31 insertions(+), 28 deletions(-)

diff --git a/awx/ui/client/features/templates/templates.strings.js b/awx/ui/client/features/templates/templates.strings.js
index 515673e003..6f338c873f 100644
--- a/awx/ui/client/features/templates/templates.strings.js
+++ b/awx/ui/client/features/templates/templates.strings.js
@@ -51,6 +51,7 @@ function TemplatesStrings (BaseString) {
         CHOOSE_VERBOSITY: t.s('Choose a verbosity'),
         EXTRA_VARIABLES: t.s('Extra Variables'),
         PLEASE_ENTER_ANSWER: t.s('Please enter an answer.'),
+        PLEASE_SELECT_VALUE: t.s('Please select a value'),
         VALID_INTEGER: t.s('Please enter an answer that is a valid integer.'),
         VALID_DECIMAL: t.s('Please enter an answer that is a decimal number.'),
         PLAYBOOK_RUN: t.s('Playbook Run'),
diff --git a/awx/ui/client/src/shared/directives.js b/awx/ui/client/src/shared/directives.js
index f63ed7ed76..400a967584 100644
--- a/awx/ui/client/src/shared/directives.js
+++ b/awx/ui/client/src/shared/directives.js
@@ -1247,7 +1247,7 @@ function(ConfigurationUtils, i18n, $rootScope) {
     };
 }])
 
-.directive('awRequireMultiple', [function() {
+.directive('awRequireMultiple', ['Empty', function(Empty) {
     return {
         require: 'ngModel',
         link: function postLink(scope, element, attrs, ngModel) {
@@ -1256,18 +1256,15 @@ function(ConfigurationUtils, i18n, $rootScope) {
                 ngModel.$validate();
             });
 
-            ngModel.$validators.required = function (value) {
+            ngModel.$validators.multipleSelect = function (modelValue) {
                 if(attrs.required) {
-                    if(angular.isArray(value)) {
-                        if(value.length === 0) {
-                            return false;
-                        }
-                        else {
-                            return (!value[0] || value[0] === "") ? false : true;
-                        }
-                    }
-                    else {
-                        return (!value || value === "") ? false : true;
+                    if(angular.isArray(modelValue)) {
+                        // Checks to make sure at least one value in the array
+                        return _.some(modelValue, function(arrayVal) {
+                            return !Empty(arrayVal);
+                        });
+                    } else {
+                        return !Empty(modelValue);
                     }
                 } else {
                     return true;
diff --git a/awx/ui/client/src/templates/prompt/steps/survey/prompt-survey.partial.html b/awx/ui/client/src/templates/prompt/steps/survey/prompt-survey.partial.html
index 8ff7aeba52..73d23c6f81 100644
--- a/awx/ui/client/src/templates/prompt/steps/survey/prompt-survey.partial.html
+++ b/awx/ui/client/src/templates/prompt/steps/survey/prompt-survey.partial.html
@@ -10,13 +10,13 @@
         </div>
         <div ng-if="question.type === 'text'">
             <input type="text" id="survey_question_{{$index}}" ng-model="question.model" name="survey_question_{{$index}}" ng-minlength="question.minlength" ng-maxlength="question.maxlength" class="form-control Form-textInput" ng-required="question.required">
-            <div class="error survey_error" ng-show="forms.survey.survey_question_{{$index}}.$dirty && forms.survey.survey_question_{{$index}}.$error.required">{{:: vm.strings.get('prompt.PLEASE_ENTER_ANSWER') }}</div>
-            <div class="error survey_error" ng-show="forms.survey.survey_question_{{$index}}.$error.minlength || forms.survey.survey_question_{{$index}}.$error.maxlength"><span translate>Please enter an answer between</span> {{question.minlength}} <span translate>to</span> {{question.maxlength}} <span translate>characters long.</span></div>
+            <div class="error survey_error" ng-show="surveyForm.survey_question_{{$index}}.$dirty && surveyForm.survey_question_{{$index}}.$error.required">{{:: vm.strings.get('prompt.PLEASE_ENTER_ANSWER') }}</div>
+            <div class="error survey_error" ng-show="surveyForm.survey_question_{{$index}}.$error.minlength || surveyForm.survey_question_{{$index}}.$error.maxlength"><span translate>Please enter an answer between</span> {{question.minlength}} <span translate>to</span> {{question.maxlength}} <span translate>characters long.</span></div>
         </div>
         <div ng-if="question.type === 'textarea'">
             <textarea id="survey_question_{{$index}}" name="survey_question_{{$index}}" ng-model="question.model" ng-minlength="question.minlength" ng-maxlength="question.maxlength" class="form-control final Form-textArea" ng-required="question.required" rows="3"></textarea>
-            <div class="error survey_error" ng-show="forms.survey.survey_question_{{$index}}.$dirty && forms.survey.survey_question_{{$index}}.$error.required">{{:: vm.strings.get('prompt.PLEASE_ENTER_ANSWER') }}</div>
-            <div class="error survey_error" ng-show="forms.survey.survey_question_{{$index}}.$error.minlength || forms.survey.survey_question_{{$index}}.$error.maxlength"><span translate>Please enter an answer between</span> {{question.minlength}} <span translate>to</span> {{question.maxlength}} <span translate>characters long.</span></div>
+            <div class="error survey_error" ng-show="surveyForm.survey_question_{{$index}}.$dirty && surveyForm.survey_question_{{$index}}.$error.required">{{:: vm.strings.get('prompt.PLEASE_ENTER_ANSWER') }}</div>
+            <div class="error survey_error" ng-show="surveyForm.survey_question_{{$index}}.$error.minlength || surveyForm.survey_question_{{$index}}.$error.maxlength"><span translate>Please enter an answer between</span> {{question.minlength}} <span translate>to</span> {{question.maxlength}} <span translate>characters long.</span></div>
         </div>
         <div ng-if="question.type === 'password'">
             <div class="input-group">
@@ -26,20 +26,20 @@
                 <input id="survey_question_{{$index}}" ng-if="!question.default" type="password" ng-model="question.model" name="survey_question_{{$index}}" ng-required="question.required" ng-minlength="question.minlength" ng-maxlength="question.maxlength" class="form-control Form-textInput" autocomplete="false">
                 <input id="survey_question_{{$index}}" ng-if="question.default" type="password" ng-model="question.model" name="survey_question_{{$index}}" ng-required="question.required" aw-password-min="question.minlength" aw-password-max="question.maxlength" class="form-control Form-textInput" autocomplete="false">
             </div>
-            <div class="error survey_error" ng-show="forms.survey.survey_question_{{$index}}.$dirty && forms.survey.survey_question_{{$index}}.$error.required">{{:: vm.strings.get('prompt.PLEASE_ENTER_ANSWER') }}</div>
-            <div class="error survey_error" ng-show="forms.survey.survey_question_{{$index}}.$error.awPasswordMin || forms.survey.survey_question_{{$index}}.$error.awPasswordMax || forms.survey.survey_question_{{$index}}.$error.minlength || forms.survey.survey_question_{{$index}}.$error.maxlength"><span translate>Please enter an answer between</span> {{question.minlength}} <span translate>to</span> {{question.maxlength}} <span translate>characters long.</span></div>
+            <div class="error survey_error" ng-show="surveyForm.survey_question_{{$index}}.$dirty && surveyForm.survey_question_{{$index}}.$error.required">{{:: vm.strings.get('prompt.PLEASE_ENTER_ANSWER') }}</div>
+            <div class="error survey_error" ng-show="surveyForm.survey_question_{{$index}}.$error.awPasswordMin || surveyForm.survey_question_{{$index}}.$error.awPasswordMax || surveyForm.survey_question_{{$index}}.$error.minlength || surveyForm.survey_question_{{$index}}.$error.maxlength"><span translate>Please enter an answer between</span> {{question.minlength}} <span translate>to</span> {{question.maxlength}} <span translate>characters long.</span></div>
         </div>
         <div ng-if="question.type === 'integer'">
             <input type="number" id="survey_question_{{$index}}" ng-model="question.model" class="form-control Form-textInput" name="survey_question_{{$index}}" ng-required="question.required" integer aw-min="question.minValue" aw-max="question.maxValue"/>
-            <div class="error survey_error" ng-show="forms.survey.survey_question_{{$index}}.$dirty && forms.survey.survey_question_{{$index}}.$error.required">{{:: vm.strings.get('prompt.PLEASE_ENTER_ANSWER') }}</div>
-            <div class="error survey_error" ng-show="forms.survey.survey_question_{{$index}}.$error.number || forms.survey.survey_question_{{$index}}.$error.integer">{{:: vm.strings.get('prompt.VALID_INTEGER') }}</div>
-            <div class="error survey_error" ng-show="forms.survey.survey_question_{{$index}}.$error.awMin || forms.survey.survey_question_{{$index}}.$error.awMax"><span translate>Please enter an answer between</span> {{question.minValue}} <span>and</span> {{question.maxValue}}.</div>
+            <div class="error survey_error" ng-show="surveyForm.survey_question_{{$index}}.$dirty && surveyForm.survey_question_{{$index}}.$error.required">{{:: vm.strings.get('prompt.PLEASE_ENTER_ANSWER') }}</div>
+            <div class="error survey_error" ng-show="surveyForm.survey_question_{{$index}}.$error.number || surveyForm.survey_question_{{$index}}.$error.integer">{{:: vm.strings.get('prompt.VALID_INTEGER') }}</div>
+            <div class="error survey_error" ng-show="surveyForm.survey_question_{{$index}}.$error.awMin || surveyForm.survey_question_{{$index}}.$error.awMax"><span translate>Please enter an answer between</span> {{question.minValue}} <span>and</span> {{question.maxValue}}.</div>
         </div>
         <div ng-if="question.type === 'float'">
             <input type="number" id="survey_question_{{$index}}" ng-model="question.model" class="form-control Form-textInput" name="survey_question_{{$index}}" ng-required="question.required" smart-float aw-min="question.minValue" aw-max="question.maxValue"/>
-            <div class="error survey_error" ng-show="forms.survey.survey_question_{{$index}}.$dirty && forms.survey.survey_question_{{$index}}.$error.required">{{:: vm.strings.get('prompt.PLEASE_ENTER_ANSWER') }}</div>
-            <div class="error survey_error" ng-show="forms.survey.survey_question_{{$index}}.$error.number || forms.survey.survey_question_{{$index}}.$error.float">{{:: vm.strings.get('prompt.VALID_DECIMAL') }}</div>
-            <div class="error survey_error" ng-show="forms.survey.survey_question_{{$index}}.$error.awMin || forms.survey.survey_question_{{$index}}.$error.awMax"><span translate>Please enter an answer between</span> {{question.minValue}} <span translate>and</span> {{question.maxValue}}.</div>
+            <div class="error survey_error" ng-show="surveyForm.survey_question_{{$index}}.$dirty && surveyForm.survey_question_{{$index}}.$error.required">{{:: vm.strings.get('prompt.PLEASE_ENTER_ANSWER') }}</div>
+            <div class="error survey_error" ng-show="surveyForm.survey_question_{{$index}}.$error.number || surveyForm.survey_question_{{$index}}.$error.float">{{:: vm.strings.get('prompt.VALID_DECIMAL') }}</div>
+            <div class="error survey_error" ng-show="surveyForm.survey_question_{{$index}}.$error.awMin || surveyForm.survey_question_{{$index}}.$error.awMax"><span translate>Please enter an answer between</span> {{question.minValue}} <span translate>and</span> {{question.maxValue}}.</div>
         </div>
         <div ng-if="question.type === 'multiplechoice'">
             <div class="survey_taker_input">
@@ -48,9 +48,11 @@
                     question="question"
                     choices="question.choices"
                     ng-required="question.required"
-                    ng-model="question.model">
+                    ng-model="question.model"
+                    form-element-name="survey_question_{{$index}}">
                 </multiple-choice>
             </div>
+            <div class="error survey_error" ng-show="surveyForm.survey_question_{{$index}}.$dirty && surveyForm.survey_question_{{$index}}.$error.multipleSelect">{{:: vm.strings.get('prompt.PLEASE_SELECT_VALUE') }}</div>
         </div>
         <div ng-if="question.type === 'multiselect'">
             <multiple-choice
@@ -58,8 +60,10 @@
                 question="question"
                 choices="question.choices"
                 ng-required="question.required"
-                ng-model="question.model">
+                ng-model="question.model"
+                form-element-name="survey_question_{{$index}}">
             </multiple-choice>
+            <div class="error survey_error" ng-show="surveyForm.survey_question_{{$index}}.$dirty && surveyForm.survey_question_{{$index}}.$error.multipleSelect">{{:: vm.strings.get('prompt.PLEASE_SELECT_VALUE') }}</div>
         </div>
     </div>
 </form>
diff --git a/awx/ui/client/src/templates/survey-maker/render/multiple-choice.directive.js b/awx/ui/client/src/templates/survey-maker/render/multiple-choice.directive.js
index 9eccb7c195..c55231f24e 100644
--- a/awx/ui/client/src/templates/survey-maker/render/multiple-choice.directive.js
+++ b/awx/ui/client/src/templates/survey-maker/render/multiple-choice.directive.js
@@ -36,7 +36,8 @@ export default
                         isRequired: '=ngRequired',
                         selectedValue: '=ngModel',
                         isDisabled: '=ngDisabled',
-                        preview: '='
+                        preview: '=',
+                        formElementName: '@'
                     },
                     templateUrl: templateUrl('templates/survey-maker/render/multiple-choice'),
                     link: _.partial(link, $timeout, CreateSelect2)
diff --git a/awx/ui/client/src/templates/survey-maker/render/multiple-choice.partial.html b/awx/ui/client/src/templates/survey-maker/render/multiple-choice.partial.html
index 7fa7e1fa0d..a29362e7ec 100644
--- a/awx/ui/client/src/templates/survey-maker/render/multiple-choice.partial.html
+++ b/awx/ui/client/src/templates/survey-maker/render/multiple-choice.partial.html
@@ -1,5 +1,5 @@
 <div>
-  <select class="form-control SurveyMaker-previewSelect" ng-model="selectedValue" multi-select ng-required="isRequired" ng-disabled="isDisabled" aw-require-multiple>
+  <select class="form-control SurveyMaker-previewSelect" name="{{formElementName}}" ng-model="selectedValue" multi-select ng-required="isRequired" ng-disabled="isDisabled" aw-require-multiple>
     <option ng-repeat="choice in choices" value="{{choice}}">{{choice}}</option>
   </select>
 </div>