create ArrayTextField component

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

@@ -0,0 +1,69 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useField } from 'formik';
+import { FormGroup, TextArea } from '@patternfly/react-core';
+import FieldTooltip from './FieldTooltip';
+
+function ArrayTextField(props) {
+  const {
+    id,
+    helperText,
+    name,
+    label,
+    tooltip,
+    tooltipMaxWidth,
+    validate,
+    isRequired,
+    type,
+    ...rest
+  } = props;
+
+  const [field, meta, helpers] = useField({ name, validate });
+  const isValid = !(meta.touched && meta.error);
+
+  return (
+    <FormGroup
+      fieldId={id}
+      helperText={helperText}
+      helperTextInvalid={meta.error}
+      isRequired={isRequired}
+      validated={isValid ? 'default' : 'error'}
+      label={label}
+      labelIcon={<FieldTooltip content={tooltip} maxWidth={tooltipMaxWidth} />}
+    >
+      <TextArea
+        id={id}
+        isRequired={isRequired}
+        validated={isValid ? 'default' : 'error'}
+        resizeOrientation="vertical"
+        {...rest}
+        {...field}
+        value={field.value.join('\n')}
+        onChange={value => {
+          helpers.setValue(value.split('\n').map(v => v.trim()));
+        }}
+      />
+    </FormGroup>
+  );
+}
+
+ArrayTextField.propTypes = {
+  helperText: PropTypes.string,
+  id: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  label: PropTypes.oneOfType([PropTypes.object, PropTypes.string]).isRequired,
+  validate: PropTypes.func,
+  isRequired: PropTypes.bool,
+  tooltip: PropTypes.node,
+  tooltipMaxWidth: PropTypes.string,
+};
+
+ArrayTextField.defaultProps = {
+  helperText: '',
+  validate: () => {},
+  isRequired: false,
+  tooltip: null,
+  tooltipMaxWidth: '',
+};
+
+export default ArrayTextField;

awx/ui_next/src/components/FormField/index.js

@@ -4,3 +4,4 @@ export { default as FieldTooltip } from './FieldTooltip';
 export { default as PasswordField } from './PasswordField';
 export { default as PasswordInput } from './PasswordInput';
 export { default as FormSubmitError } from './FormSubmitError';
+export { default as ArrayTextField } from './ArrayTextField';

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

@@ -98,7 +98,6 @@ function NotificationTemplateForm({
   i18n,
 }) {
   const handleSubmit = values => {
-    // TODO: convert list values to arrays (do it in the field itself?)
     onSubmit(normalizeFields(values, defaultMessages));
   };
 

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

@@ -12,6 +12,7 @@ import FormField, {
   PasswordField,
   CheckboxField,
   FieldTooltip,
+  ArrayTextField,
 } from '../../../components/FormField';
 import AnsibleSelect from '../../../components/AnsibleSelect';
 import CodeMirrorInput from '../../../components/CodeMirrorInput';
@@ -80,7 +81,7 @@ function EmailFields({ i18n }) {
         validate={required(null, i18n)}
         isRequired
       />
-      <FormField
+      <ArrayTextField
         id="email-recipients"
         label={i18n._(t`Recipient list`)}
         name="notification_configuration.recipients"
@@ -182,7 +183,7 @@ function GrafanaFields({ i18n }) {
         name="notification_configuration.panelId"
         type="text"
       />
-      <FormField
+      <ArrayTextField
         id="grafana-tags"
         label={i18n._(t`Tags for the annotation (optional)`)}
         name="notification_configuration.annotation_tags"
@@ -232,7 +233,7 @@ function IRCFields({ i18n }) {
         validate={required(null, i18n)}
         isRequired
       />
-      <FormField
+      <ArrayTextField
         id="irc-targets"
         label={i18n._(t`Destination channels or users`)}
         name="notification_configuration.targets"
@@ -365,7 +366,7 @@ function RocketChatFields({ i18n }) {
 function SlackFields({ i18n }) {
   return (
     <>
-      <FormField
+      <ArrayTextField
         id="slack-channels"
         label={i18n._(t`Destination channels`)}
         name="notification_configuration.channels"
@@ -414,7 +415,7 @@ function TwilioFields({ i18n }) {
         tooltip={i18n._(t`Enter the number associated with the "Messaging
           Service" in Twilio in the format +18005550199.`)}
       />
-      <FormField
+      <ArrayTextField
         id="twilio-destination-numbers"
         label={i18n._(t`Destination SMS number(s)`)}
         name="notification_configuration.to_numbers"