reset notification messages to defaults when switching to new type

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

@@ -1,40 +1,59 @@
 import 'styled-components/macro';
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
-import { useField } from 'formik';
+import { useField, useFormikContext } from 'formik';
+import { Switch, Text } from '@patternfly/react-core';
 import {
-  FormGroup,
-  Title,
-  Switch,
-  Text,
-  TextVariants,
-} from '@patternfly/react-core';
-import {
-  FormColumnLayout,
   FormFullWidthLayout,
   SubFormLayout,
 } from '../../../components/FormLayout';
-import FormField, {
-  PasswordField,
-  CheckboxField,
-  FieldTooltip,
-} from '../../../components/FormField';
-import AnsibleSelect from '../../../components/AnsibleSelect';
 import { CodeMirrorField } from '../../../components/CodeMirrorInput';
-import {
-  combine,
-  required,
-  requiredEmail,
-  url,
-} from '../../../util/validators';
-import { NotificationType } from '../../../types';
 
 function CustomMessagesSubForm({ defaultMessages, type, i18n }) {
   const [useCustomField, , useCustomHelpers] = useField('useCustomMessages');
   const showMessages = type !== 'webhook';
   const showBodies = ['email', 'pagerduty', 'webhook'].includes(type);
 
+  const { setFieldValue } = useFormikContext();
+  const mountedRef = useRef(null);
+  useEffect(
+    function resetToDefaultMessages() {
+      if (!mountedRef.current) {
+        mountedRef.current = true;
+        return;
+      }
+      const defs = defaultMessages[type];
+
+      const resetFields = (name, defaults) => {
+        setFieldValue(`${name}.message`, defaults.message || '');
+        setFieldValue(`${name}.body`, defaults.body || '');
+      };
+
+      resetFields('messages.started', defs.started);
+      resetFields('messages.success', defs.success);
+      resetFields('messages.error', defs.error);
+      resetFields(
+        'messages.workflow_approval.approved',
+        defs.workflow_approval.approved
+      );
+      resetFields(
+        'messages.workflow_approval.denied',
+        defs.workflow_approval.denied
+      );
+      resetFields(
+        'messages.workflow_approval.running',
+        defs.workflow_approval.running
+      );
+      resetFields(
+        'messages.workflow_approval.timed_out',
+        defs.workflow_approval.timed_out
+      );
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [type, setFieldValue]
+  );
+
   return (
     <>
       <Switch

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

@@ -163,7 +163,10 @@ function NotificationTemplateForm({
       {formik => (
         <Form autoComplete="off" onSubmit={formik.handleSubmit}>
           <FormColumnLayout>
-            <NotificationTemplateFormFields i18n={i18n} />
+            <NotificationTemplateFormFields
+              i18n={i18n}
+              defaultMessages={defaultMessages}
+            />
             <FormSubmitError error={submitError} />
             <FormActionGroup
               onCancel={onCancel}

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

@@ -87,7 +87,7 @@ function EmailFields({ i18n }) {
         type="textarea"
         validate={required(null, i18n)}
         isRequired
-        rows="3"
+        rows={3}
         tooltip={i18n._(t`Enter one email address per line to create a recipient
           list for this type of notification.`)}
       />
@@ -187,7 +187,7 @@ function GrafanaFields({ i18n }) {
         label={i18n._(t`Tags for the annotation (optional)`)}
         name="notification_configuration.annotation_tags"
         type="textarea"
-        rows="3"
+        rows={3}
         tooltip={i18n._(t`Enter one Annotation Tag per line, without commas.`)}
       />
       <CheckboxField
@@ -494,7 +494,7 @@ function WebhookFields({ i18n }) {
               headersHelpers.setValue(value);
             }}
             mode="javascript"
-            rows="5"
+            rows={5}
           />
         </FormGroup>
       </FormFullWidthLayout>