Merge pull request #6389 from jlmitch5/fixEmailOptionNotif

update email option notification to select

Reviewed-by: https://github.com/apps/softwarefactory-project-zuul

awx/ui/client/src/notifications/add/add.controller.js

@@ -93,6 +93,15 @@ export default ['Rest', 'Wait', 'NotificationsFormObject',
                 multiple: false
             });
 
+            $scope.emailOptions = [
+                {'id': 'use_tls', 'name': i18n._('Use TLS')},
+                {'id': 'use_ssl', 'name': i18n._('Use SSL')},
+            ];
+            CreateSelect2({
+                element: '#notification_template_email_options',
+                multiple: false
+            });
+
             $scope.httpMethodChoices = [
                 {'id': 'POST', 'name': i18n._('POST')},
                 {'id': 'PUT', 'name': i18n._('PUT')},
@@ -181,27 +190,38 @@ export default ['Rest', 'Wait', 'NotificationsFormObject',
             }
         });
 
-        $scope.emailOptionsChange = function () {
+        $scope.typeChange = function() {
-            if ($scope.email_options === 'use_ssl') {
+            for (var fld in form.fields) {
-                if ($scope.use_ssl) {
+                if (form.fields[fld] && form.fields[fld].subForm) {
-                    $scope.email_options = null;
+                    if (form.fields[fld].type === 'checkbox_group' && form.fields[fld].fields) {
-                    $scope.use_ssl = false;
+                        // Need to loop across the groups fields to null them out
-                    return;
+                        for (var i = 0; i < form.fields[fld].fields.length; i++) {
+                            // Pull the name out of the object (array of objects)
+                            var subFldName = form.fields[fld].fields[i].name;
+                            $scope[subFldName] = null;
+                            $scope.notification_template_form[subFldName].$setPristine();
+                        }
+                    } else {
+                        $scope.notification_template_form[fld].$setPristine();
+                    }
+                }
             }
 
-                $scope.use_ssl = true;
+            NotificationsTypeChange.getDetailFields($scope.notification_type.value).forEach(function(field) {
-                $scope.use_tls = false;
+                $scope[field[0]] = field[1];
-            }
+            });
-            else if ($scope.email_options === 'use_tls') {
-                if ($scope.use_tls) {
-                    $scope.email_options = null;
-                    $scope.use_tls = false;
-                    return;
-                }
 
-                $scope.use_ssl = false;
+
-                $scope.use_tls = true;
+            $scope.parse_type = 'json';
+            if (!$scope.headers) {
+                $scope.headers = "{\n}";
             }
+            ParseTypeChange({
+                scope: $scope,
+                parse_variable: 'parse_type',
+                variable: 'headers',
+                field_id: 'notification_template_headers'
+            });
         };
 
         // Save
@@ -256,11 +276,8 @@ export default ['Rest', 'Wait', 'NotificationsFormObject',
 
             delete params.notification_configuration.email_options;
 
-                for(var j = 0; j < form.fields.email_options.options.length; j++) {
+            params.notification_configuration.use_ssl = $scope.email_options === 'use_ssl';
-                    if(form.fields.email_options.options[j].ngShow && form.fields.email_options.options[j].ngShow.indexOf(v) > -1) {
+            params.notification_configuration.use_tls = $scope.email_options === 'use_tls';
-                        params.notification_configuration[form.fields.email_options.options[j].value] = Boolean($scope[form.fields.email_options.options[j].value]);
-                    }
-                }
 
             Wait('start');
             Rest.setUrl(url);

awx/ui/client/src/notifications/edit/edit.controller.js

@@ -76,7 +76,6 @@ export default ['Rest', 'Wait',
                             master[fld] = data[fld];
                         }
 
-                        if(form.fields[fld].type === 'radio_group') {
                         if(data.notification_configuration.use_ssl === true){
                             $scope.email_options = "use_ssl";
                             master.email_options = "use_ssl";
@@ -85,6 +84,7 @@ export default ['Rest', 'Wait',
                             $scope.use_tls = false;
                             master.use_tls = false;
                         }
+
                         if(data.notification_configuration.use_tls === true){
                             $scope.email_options = "use_tls";
                             master.email_options = "use_tls";
@@ -93,12 +93,12 @@ export default ['Rest', 'Wait',
                             $scope.use_tls = true;
                             master.use_tls = true;
                         }
-                        }
+
-                        else {
                         if (data.notification_configuration.timeout === null ||
                             !data.notification_configuration.timeout){
                             $scope.timeout = 30;
                         }
+
                         if (data.notification_configuration[fld]) {
                             $scope[fld] = data.notification_configuration[fld];
                             master[fld] = data.notification_configuration[fld];
@@ -120,7 +120,6 @@ export default ['Rest', 'Wait',
                                 data.summary_fields[form.fields[fld].sourceModel][form.fields[fld].sourceField];
                         }
                     }
-                    }
                     data.notification_type = (Empty(data.notification_type)) ? '' : data.notification_type;
                     for (var i = 0; i < $scope.notification_type_options.length; i++) {
                         if ($scope.notification_type_options[i].value === data.notification_type) {
@@ -135,6 +134,15 @@ export default ['Rest', 'Wait',
                         multiple: false
                     });
                     
+                    $scope.emailOptions = [
+                        {'id': 'use_tls', 'name': i18n._('Use TLS')},
+                        {'id': 'use_ssl', 'name': i18n._('Use SSL')},
+                    ];
+                    CreateSelect2({
+                        element: '#notification_template_email_options',
+                        multiple: false
+                    });
+
                     $scope.hipchatColors = [
                         {'id': 'gray', 'name': i18n._('Gray')},
                         {'id': 'green', 'name': i18n._('Green')},
@@ -270,29 +278,6 @@ export default ['Rest', 'Wait',
             }
         });
 
-        $scope.emailOptionsChange = function () {
-            if ($scope.email_options === 'use_ssl') {
-                if ($scope.use_ssl) {
-                    $scope.email_options = null;
-                    $scope.use_ssl = false;
-                    return;
-                }
-
-                $scope.use_ssl = true;
-                $scope.use_tls = false;
-            }
-            else if ($scope.email_options === 'use_tls') {
-                if ($scope.use_tls) {
-                    $scope.email_options = null;
-                    $scope.use_tls = false;
-                    return;
-                }
-
-                $scope.use_ssl = false;
-                $scope.use_tls = true;
-            }
-        };
-
         $scope.formSave = function() {
             var params,
                 v = $scope.notification_type.value;
@@ -347,8 +332,8 @@ export default ['Rest', 'Wait',
 
             delete params.notification_configuration.email_options;
 
-                params.notification_configuration.use_ssl = Boolean($scope.use_ssl);
+            params.notification_configuration.use_ssl = $scope.email_options === 'use_ssl';
-                params.notification_configuration.use_tls = Boolean($scope.use_tls);
+            params.notification_configuration.use_tls = $scope.email_options === 'use_tls';            
 
             Wait('start');
             Rest.setUrl(url + id + '/');

awx/ui/client/src/notifications/notificationTemplates.form.js

@@ -555,23 +555,14 @@ export default ['i18n', function(i18n) {
                 ngDisabled: '!(notification_template.summary_fields.user_capabilities.edit || canAdd)'
             },
             email_options: {
-                label: i18n._('Options'),
+                label: i18n._('Email Options'),
-                type: 'radio_group',
+                dataTitle: i18n._('Email Options'),
+                defaultText: i18n._('Choose an email option'),
+                type: 'select',
+                ngOptions: 'type.id as type.name for type in emailOptions',
+                ngShow: "notification_type.value == 'email'",
                 subForm: 'typeSubForm',
-                ngShow: "notification_type.value == 'email'",
+                ngDisabled: '!(notification_template.summary_fields.user_capabilities.edit || canAdd)'
-                ngClick: "emailOptionsChange()",
-                ngDisabled: '!(notification_template.summary_fields.user_capabilities.edit || canAdd)',
-                options: [{
-                    value: 'use_tls',
-                    label: i18n._('Use TLS'),
-                    ngShow: "notification_type.value == 'email' ",
-                    labelClass: 'Form-inputLabel'
-                }, {
-                    value: 'use_ssl',
-                    label: i18n._('Use SSL'),
-                    ngShow: "notification_type.value == 'email'",
-                    labelClass: 'Form-inputLabel'
-                }]
             },
             hex_color: {
                 label: i18n._('Notification Color'),

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

@@ -93,7 +93,7 @@
  * | sourceModel | Used in conjunction with sourceField when the data for the field is part of the summary_fields object returned by the API. Set to the name of the summary_fields object that contains the field. For example, the job_templates object returned by the API contains summary_fields.inventory. |
  * | sourceField | String containing the summary_field.object.field name from the API summary_field object. For example, if a fields should be associated to the summary_fields.inventory.name, set the sourceModel to 'inventory' and the sourceField to 'name'. |
  * | spinner | true or false. If true, adds aw-spinner directive. Optionally add min and max attributes to control the range of allowed values. |
- * | type | String containing one of the following types defined in buildField: alertblock, hidden, text, password, email, textarea, select, number, checkbox, checkbox_group, radio, radio_group, lookup, custom. |
+ * | type | String containing one of the following types defined in buildField: alertblock, hidden, text, password, email, textarea, select, number, checkbox, checkbox_group, radio, lookup, custom. |
  * | trueValue | For radio buttons and checkboxes. Value to set the model to when the checkbox or radio button is selected. |
  * | hasShowInputButton (sensitive type only) | This creates a button next to the input that toggles the input as text and password types. |
  * The form object contains a buttons object for defining any buttons to be included in the generated HTML. Generally all forms will have a Reset and a Submit button. If no buttons should be generated define buttons as an empty object, or set the showButtons option to false.
@@ -1198,51 +1198,6 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
                         }
                     }
 
-                    //radio group
-                    if (field.type === 'radio_group') {
-
-                        html += label();
-
-                        html += "<div ";
-                        html += (field.ngShow) ? "ng-show=\"" + field.ngShow + "\" " : "";
-                        html += (horizontal) ? "class=\"radio-group " + getFieldWidth() + "\"" : "class=\"radio-group\"";
-                        html += ">\n";
-
-                        for (i = 0; i < field.options.length; i++) {
-                            html += "<label class=\"";
-                            html += (field.options[i].labelClass) ? ` ${field.options[i].labelClass} "` : "\"";
-                            html += (field.options[i].ngShow) ? this.attr(field.options[i], 'ngShow') : "";
-                            html += ">";
-                            html += "<input type=\"radio\" ";
-                            html += "name=\"" + fld + "\" ";
-                            html += "value=\"" + field.options[i].value + "\" ";
-                            html += "ng-model=\"" + fld + "\" ";
-                            html += (field.ngChange) ? this.attr(field, 'ngChange') : "";
-                            html += (field.ngClick) ? this.attr(field, 'ngClick') : "";
-                            html += (field.ngDisabled) ? `ng-disabled="${field.ngDisabled}"` : "";
-                            html += (field.readonly) ? "disabled " : "";
-                            html += (field.required) ? "required " : "";
-                            html += (field.ngshow) ? "ng-show=\"" + field.ngShow + "\" " : "";
-                            if(field.awRequiredWhen) {
-                                html += field.awRequiredWhen.init ? "data-awrequired-init=\"" + field.awRequiredWhen.init + "\" " : "";
-                                html += field.awRequiredWhen.reqExpression ? "aw-required-when=\"" + field.awRequiredWhen.reqExpression + "\" " : "";
-                                html += field.awRequiredWhen.alwaysShowAsterisk ? "data-awrequired-always-show-asterisk=true " : "";
-                            }
-                            html += (field.ngDisabled) ? this.attr(field, 'ngDisabled') : "";
-                            html += " > " + field.options[i].label + "\n";
-                            html += "</label>\n";
-                        }
-                        if (field.required || field.awRequiredWhen) {
-                            html += "<div class=\"error\" id=\"" + this.form.name + "-" + fld + "-required-error\" ng-show=\"" +
-                                this.form.name + '_form.' + fld + ".$dirty && " +
-                                this.form.name + '_form.' + fld + ".$error.required\">" + i18n._("Please select a value.") + "</div>\n";
-                        }
-                        html += "<div class=\"error api-error\" id=\"" + this.form.name + "-" + fld + "-api-error\" ng-bind=\"" +
-                            fld + "_api_error\"></div>\n";
-
-                        html += "</div>\n";
-                    }
-
                     // radio button
                     if (field.type === 'radio') {