fix multiple notification form bugs

awx/ui_next/src/components/FormField/FormSubmitError.jsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { useFormikContext } from 'formik';
 import { Alert } from '@patternfly/react-core';
+import { FormFullWidthLayout } from '../FormLayout';
 
 const findErrorStrings = (obj, messages = []) => {
   if (typeof obj === 'string') {
@@ -35,7 +36,13 @@ function FormSubmitError({ error }) {
       typeof error.response.data === 'object' &&
       Object.keys(error.response.data).length > 0
     ) {
-      const errorMessages = error.response.data;
+      const errorMessages = {};
+      Object.keys(error.response.data).forEach(fieldName => {
+        const errors = error.response.data[fieldName];
+        if (errors && errors.length) {
+          errorMessages[fieldName] = errors.join(' ');
+        }
+      });
       setErrors(errorMessages);
 
       const messages = findErrorStrings(error.response.data);
@@ -52,15 +59,17 @@ function FormSubmitError({ error }) {
   }
 
   return (
-    <Alert
-      variant="danger"
-      isInline
-      title={
-        Array.isArray(errorMessage)
-          ? errorMessage.map(msg => <div key={msg}>{msg}</div>)
-          : errorMessage
-      }
-    />
+    <FormFullWidthLayout>
+      <Alert
+        variant="danger"
+        isInline
+        title={
+          Array.isArray(errorMessage)
+            ? errorMessage.map(msg => <div key={msg}>{msg}</div>)
+            : errorMessage
+        }
+      />
+    </FormFullWidthLayout>
   );
 }
 

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

@@ -54,12 +54,13 @@ function NotificationTemplateFormFields({ i18n, defaultMessages }) {
         fieldId="notification-type"
         helperTextInvalid={typeMeta.error}
         isRequired
-        validated={!typeMeta.touched || typeMeta.error ? 'default' : 'error'}
+        validated={!typeMeta.touched || !typeMeta.error ? 'default' : 'error'}
         label={i18n._(t`Type`)}
       >
         <AnsibleSelect
           {...typeField}
           id="notification-type"
+          isValid={!typeMeta.touched || !typeMeta.error}
           data={[
             {
               value: '',

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

@@ -20,6 +20,7 @@ import {
   required,
   requiredEmail,
   url,
+  minMaxValue,
 } from '../../../util/validators';
 import { NotificationType } from '../../../types';
 
@@ -104,16 +105,17 @@ function EmailFields({ i18n }) {
         label={i18n._(t`Port`)}
         name="notification_configuration.port"
         type="number"
-        validate={required(null, i18n)}
+        validate={combine([required(null, i18n), minMaxValue(1, 65535, i18n)])}
         isRequired
         min="0"
+        max="65535"
       />
       <FormField
         id="email-timeout"
         label={i18n._(t`Timeout`)}
         name="notification_configuration.timeout"
         type="number"
-        validate={required(null, i18n)}
+        validate={combine([required(null, i18n), minMaxValue(1, 120, i18n)])}
         isRequired
         min="1"
         max="120"
@@ -306,7 +308,7 @@ function PagerdutyFields({ i18n }) {
         label={i18n._(t`Pagerduty subdomain`)}
         name="notification_configuration.subdomain"
         type="text"
-        validate={required(i18n)}
+        validate={required(null, i18n)}
         isRequired
       />
       <FormField
@@ -314,7 +316,7 @@ function PagerdutyFields({ i18n }) {
         label={i18n._(t`API service/integration key`)}
         name="notification_configuration.service_key"
         type="text"
-        validate={required(i18n)}
+        validate={required(null, i18n)}
         isRequired
       />
       <FormField
@@ -322,7 +324,7 @@ function PagerdutyFields({ i18n }) {
         label={i18n._(t`Client identifier`)}
         name="notification_configuration.client_name"
         type="text"
-        validate={required(i18n)}
+        validate={required(null, i18n)}
         isRequired
       />
     </>

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

@@ -48,7 +48,8 @@ export default typeFieldNames;
 const initialConfigValues = {};
 Object.keys(typeFieldNames).forEach(key => {
   typeFieldNames[key].forEach(fieldName => {
-    initialConfigValues[fieldName] = '';
+    const isBoolean = fieldName.includes('_ssl');
+    initialConfigValues[fieldName] = isBoolean ? false : '';
   });
 });
 

awx/ui_next/src/util/validators.jsx

@@ -78,6 +78,9 @@ export function integer(i18n) {
 
 export function url(i18n) {
   return value => {
+    if (!value) {
+      return undefined;
+    }
     // URL regex from https://urlregex.com/
     if (
       // eslint-disable-next-line max-len