Merge pull request #8232 from mabashian/8219-extra-GET-requests

Fix extra GET requests on Notif Template/Container Groups forms

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

2 files changed, 28 insertions, 13 deletions

diff --git a/awx/ui_next/src/screens/InstanceGroup/shared/ContainerGroupForm.jsx b/awx/ui_next/src/screens/InstanceGroup/shared/ContainerGroupForm.jsx
index 472e1b4ca2..e8d734806f 100644
--- a/awx/ui_next/src/screens/InstanceGroup/shared/ContainerGroupForm.jsx
+++ b/awx/ui_next/src/screens/InstanceGroup/shared/ContainerGroupForm.jsx
@@ -1,6 +1,6 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import { func, shape } from 'prop-types';
-import { Formik, useField } from 'formik';
+import { Formik, useField, useFormikContext } from 'formik';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import { Form, FormGroup } from '@patternfly/react-core';
@@ -21,12 +21,20 @@ import {
 import CredentialLookup from '../../../components/Lookup/CredentialLookup';
 import { VariablesField } from '../../../components/CodeMirrorInput';
 
-function ContainerGroupFormFields({ i18n }) {
+function ContainerGroupFormFields({ i18n, instanceGroup }) {
+  const { setFieldValue } = useFormikContext();
   const [credentialField, credentialMeta, credentialHelpers] = useField(
     'credential'
   );
   const [overrideField] = useField('override');
 
+  const onCredentialChange = useCallback(
+    value => {
+      setFieldValue('credential', value);
+    },
+    [setFieldValue]
+  );
+
   return (
     <>
       <FormField
@@ -43,14 +51,13 @@ function ContainerGroupFormFields({ i18n }) {
         helperTextInvalid={credentialMeta.error}
         isValid={!credentialMeta.touched || !credentialMeta.error}
         onBlur={() => credentialHelpers.setTouched()}
-        onChange={value => {
-          credentialHelpers.setValue(value);
-        }}
+        onChange={onCredentialChange}
         value={credentialField.value}
         required
         tooltip={i18n._(
           t`Credential to authenticate with Kubernetes or OpenShift.  Must be of type "Kubernetes/OpenShift API Bearer Token”.`
         )}
+        autoPopulate={!instanceGroup?.id}
       />
 
       <FormGroup
@@ -114,7 +121,7 @@ function ContainerGroupForm({
       {formik => (
         <Form autoComplete="off" onSubmit={formik.handleSubmit}>
           <FormColumnLayout>
-            <ContainerGroupFormFields {...rest} />
+            <ContainerGroupFormFields instanceGroup={instanceGroup} {...rest} />
             {submitError && <FormSubmitError error={submitError} />}
             <FormActionGroup
               onCancel={onCancel}
diff --git a/awx/ui_next/src/screens/NotificationTemplate/shared/NotificationTemplateForm.jsx b/awx/ui_next/src/screens/NotificationTemplate/shared/NotificationTemplateForm.jsx
index bc668d7686..fa100189b5 100644
--- a/awx/ui_next/src/screens/NotificationTemplate/shared/NotificationTemplateForm.jsx
+++ b/awx/ui_next/src/screens/NotificationTemplate/shared/NotificationTemplateForm.jsx
@@ -1,6 +1,6 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import { shape, func } from 'prop-types';
-import { Formik, useField } from 'formik';
+import { Formik, useField, useFormikContext } from 'formik';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import { Form, FormGroup } from '@patternfly/react-core';
@@ -16,13 +16,21 @@ import CustomMessagesSubForm from './CustomMessagesSubForm';
 import hasCustomMessages from './hasCustomMessages';
 import typeFieldNames, { initialConfigValues } from './typeFieldNames';
 
-function NotificationTemplateFormFields({ i18n, defaultMessages }) {
+function NotificationTemplateFormFields({ i18n, defaultMessages, template }) {
+  const { setFieldValue } = useFormikContext();
   const [orgField, orgMeta, orgHelpers] = useField('organization');
   const [typeField, typeMeta] = useField({
     name: 'notification_type',
     validate: required(i18n._(t`Select a value for this field`), i18n),
   });
 
+  const onOrganizationChange = useCallback(
+    value => {
+      setFieldValue('organization', value);
+    },
+    [setFieldValue]
+  );
+
   return (
     <>
       <FormField
@@ -43,13 +51,12 @@ function NotificationTemplateFormFields({ i18n, defaultMessages }) {
         helperTextInvalid={orgMeta.error}
         isValid={!orgMeta.touched || !orgMeta.error}
         onBlur={() => orgHelpers.setTouched()}
-        onChange={value => {
-          orgHelpers.setValue(value);
-        }}
+        onChange={onOrganizationChange}
         value={orgField.value}
         touched={orgMeta.touched}
         error={orgMeta.error}
         required
+        autoPopulate={!template?.id}
       />
       <FormGroup
         fieldId="notification-type"
@@ -179,6 +186,7 @@ function NotificationTemplateForm({
             <NotificationTemplateFormFields
               i18n={i18n}
               defaultMessages={defaultMessages}
+              template={template}
             />
             <FormSubmitError error={submitError} />
             <FormActionGroup