fix initial values for notification type fields

awx/ui_next/src/screens/NotificationTemplate/shared/NotificationTemplateForm.jsx

@@ -17,11 +17,12 @@ import { getAddedAndRemoved } from '../../../util/lists';
 import { required, minMaxValue } from '../../../util/validators';
 import { FormColumnLayout } from '../../../components/FormLayout';
 import TypeInputsSubForm from './TypeInputsSubForm';
+import typeFieldNames, { initialConfigValues } from './typeFieldNames';
 import { NotificationTemplate } from '../../../types';
 
 function NotificationTemplateFormFields({ i18n, defaultMessages }) {
   const [orgField, orgMeta, orgHelpers] = useField('organization');
-  const [typeField, typeMeta, typeHelpers] = useField({
+  const [typeField, typeMeta] = useField({
     name: 'notification_type',
     validate: required(i18n._(t`Select a value for this field`), i18n),
   });
@@ -97,16 +98,25 @@ function NotificationTemplateForm({
   i18n,
 }) {
   const handleSubmit = values => {
-    console.log(values);
-    // onSubmit(values);
+    onSubmit(normalizeTypeFields(values));
   };
 
+  let emailOptions = '';
+  if (template.notification_type === 'email') {
+    emailOptions = template.notification_configuration.use_ssl ? 'ssl' : 'tls';
+  }
+
   return (
     <Formik
       initialValues={{
         name: template.name,
         description: template.description,
         notification_type: template.notification_type,
+        notification_configuration: {
+          ...initialConfigValues,
+          ...template.notification_configuration,
+        },
+        emailOptions,
       }}
       onSubmit={handleSubmit}
     >
@@ -144,3 +154,25 @@ NotificationTemplateForm.defaultProps = {
 };
 
 export default withI18n()(NotificationTemplateForm);
+
+/* If the user filled in some of the Type Details fields, then switched
+ * to a different notification type, unecessary fields may be set in the
+ * notification_configuration — this function strips them off */
+function normalizeTypeFields(values) {
+  const stripped = {};
+  const fields = typeFieldNames[values.notification_type];
+  fields.foreach(fieldName => {
+    if (typeof values[fieldName] !== 'undefined') {
+      stripped[fieldName] = values[fieldName];
+    }
+  });
+  if (values.notification_type === 'email') {
+    stripped.use_ssl = values.emailOptions === 'ssl';
+    stripped.use_tls = !stripped.use_ssl;
+  }
+
+  return {
+    ...values,
+    notification_configuration: stripped,
+  };
+}

awx/ui_next/src/screens/NotificationTemplate/shared/TypeInputsSubForm.jsx

@@ -1,10 +1,9 @@
 import React from 'react';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
-import { useField } from 'formik';
+import { useField, useFormikContext } from 'formik';
 import { FormGroup, Title } from '@patternfly/react-core';
 import {
-  FormCheckboxLayout,
   FormColumnLayout,
   FormFullWidthLayout,
   SubFormLayout,
@@ -418,7 +417,7 @@ function TwilioFields({ i18n }) {
       <FormField
         id="twilio-destination-numbers"
         label={i18n._(t`Destination SMS number(s)`)}
-        name="notification_configuration.account_token"
+        name="notification_configuration.to_numbers"
         type="textarea"
         validate={required(null, i18n)}
         isRequired
@@ -438,14 +437,14 @@ function TwilioFields({ i18n }) {
 }
 
 function WebhookFields({ i18n }) {
-  const [methodField, methodMeta] = useField({
-    name: 'notification_configuration.http_method',
-    validate: required(i18n._(t`Select a value for this field`), i18n),
-  });
   const [headersField, headersMeta, headersHelpers] = useField({
     name: 'notification_configuration.headers',
     validate: required(i18n._(t`Select enter a value for this field`), i18n),
   });
+  const [methodField, methodMeta] = useField({
+    name: 'notification_configuration.http_method',
+    validate: required(i18n._(t`Select a value for this field`), i18n),
+  });
   return (
     <>
       <FormField

awx/ui_next/src/screens/NotificationTemplate/shared/typeFieldNames.js

@@ -0,0 +1,55 @@
+const typeFieldNames = {
+  email: [
+    'username',
+    'password',
+    'host',
+    'recipients',
+    'sender',
+    'port',
+    'timeout',
+  ],
+  grafana: [
+    'grafana_url',
+    'grafana_key',
+    'dashboardId',
+    'panelId',
+    'annotation_tags',
+    'grafana_no_verify_ssl',
+  ],
+  irc: ['password', 'port', 'server', 'nickname', 'targets', 'use_ssl'],
+  mattermost: [
+    'mattermost_url',
+    'mattermost_username',
+    'mattermost_channel',
+    'mattermost_icon_url',
+    'mattermost_no_verify_ssl',
+  ],
+  pagerduty: ['token', 'subdomain', 'service_key', 'client_name'],
+  rocketchat: [
+    'rocketchat_url',
+    'rocketchat_username',
+    'rocketchat_icon_url',
+    'rocketchat_no_verify_ssl',
+  ],
+  slack: ['channels', 'token', 'hex_color'],
+  twilio: ['account_token', 'from_number', 'to_numbers', 'account_sid'],
+  webhook: [
+    'username',
+    'password',
+    'url',
+    'disable_ssl_verification',
+    'headers',
+    'http_method',
+  ],
+};
+
+export default typeFieldNames;
+
+const initialConfigValues = {};
+Object.keys(typeFieldNames).forEach(key => {
+  typeFieldNames[key].forEach(fieldName => {
+    initialConfigValues[fieldName] = '';
+  });
+});
+
+export { initialConfigValues };