Fixes issues with organization when saving the project form.

Changes helperTextInvalid prop type to node which matches more closely with what the upstream PF component supports.

awx/ui_next/src/components/Lookup/CredentialLookup.jsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { bool, func, number, string, oneOfType } from 'prop-types';
+import { bool, func, node, number, string, oneOfType } from 'prop-types';
 import { withRouter } from 'react-router-dom';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
@@ -113,7 +113,7 @@ function CredentialLookup({
 
 CredentialLookup.propTypes = {
   credentialTypeId: oneOfType([number, string]).isRequired,
-  helperTextInvalid: string,
+  helperTextInvalid: node,
   isValid: bool,
   label: string.isRequired,
   onBlur: func,

awx/ui_next/src/components/Lookup/OrganizationLookup.jsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { string, func, bool } from 'prop-types';
+import { node, func, bool } from 'prop-types';
 import { withRouter } from 'react-router-dom';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
@@ -103,7 +103,7 @@ function OrganizationLookup({
 }
 
 OrganizationLookup.propTypes = {
-  helperTextInvalid: string,
+  helperTextInvalid: node,
   isValid: bool,
   onBlur: func,
   onChange: func.isRequired,

awx/ui_next/src/components/Lookup/ProjectLookup.jsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { string, func, bool } from 'prop-types';
+import { node, string, func, bool } from 'prop-types';
 import { withRouter } from 'react-router-dom';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
@@ -125,7 +125,7 @@ function ProjectLookup({
 
 ProjectLookup.propTypes = {
   value: Project,
-  helperTextInvalid: string,
+  helperTextInvalid: node,
   isValid: bool,
   onBlur: func,
   onChange: func.isRequired,

awx/ui_next/src/screens/Project/ProjectAdd/ProjectAdd.jsx

@@ -24,7 +24,10 @@ function ProjectAdd() {
     try {
       const {
         data: { id },
-      } = await ProjectsAPI.create(values);
+      } = await ProjectsAPI.create({
+        ...values,
+        organization: values.organization.id,
+      });
       history.push(`/projects/${id}/details`);
     } catch (error) {
       setFormSubmitError(error);

awx/ui_next/src/screens/Project/ProjectEdit/ProjectEdit.jsx

@@ -23,7 +23,10 @@ function ProjectEdit({ project }) {
     try {
       const {
         data: { id },
-      } = await ProjectsAPI.update(project.id, values);
+      } = await ProjectsAPI.update(project.id, {
+        ...values,
+        organization: values.organization.id,
+      });
       history.push(`/projects/${id}/details`);
     } catch (error) {
       setFormSubmitError(error);

awx/ui_next/src/screens/Project/ProjectEdit/ProjectEdit.test.jsx

@@ -29,6 +29,10 @@ describe('<ProjectEdit />', () => {
         credential_type_id: 5,
         kind: 'insights',
       },
+      organization: {
+        id: 2,
+        name: 'Default',
+      },
     },
   };
 

awx/ui_next/src/screens/Project/shared/ProjectForm.jsx

@@ -74,8 +74,6 @@ function ProjectFormFields({
   scmTypeOptions,
   setScmSubFormState,
   scmSubFormState,
-  setOrganization,
-  organization,
 }) {
   const scmFormFields = {
     scm_url: '',
@@ -94,12 +92,10 @@ function ProjectFormFields({
     validate: required(i18n._(t`Set a value for this field`), i18n),
   });
   const [venvField] = useField('custom_virtualenv');
-  const orgFieldArr = useField({
+  const [organizationField, organizationMeta, organizationHelpers] = useField({
     name: 'organization',
     validate: required(i18n._(t`Select a value for this field`), i18n),
   });
-  const organizationMeta = orgFieldArr[1];
-  const organizationHelpers = orgFieldArr[2];
 
   /* Save current scm subform field values to state */
   const saveSubFormState = form => {
@@ -164,10 +160,11 @@ function ProjectFormFields({
         isValid={!organizationMeta.touched || !organizationMeta.error}
         onBlur={() => organizationHelpers.setTouched()}
         onChange={value => {
-          organizationHelpers.setValue(value.id);
-          setOrganization(value);
+          organizationHelpers.setValue(value);
         }}
-        value={organization}
+        value={organizationField.value}
+        touched={organizationMeta.touched}
+        error={organizationMeta.error}
         required
       />
       <FormGroup
@@ -293,7 +290,6 @@ function ProjectForm({ i18n, project, submitError, ...props }) {
   const { summary_fields = {} } = project;
   const [contentError, setContentError] = useState(null);
   const [isLoading, setIsLoading] = useState(true);
-  const [organization, setOrganization] = useState(null);
   const [scmSubFormState, setScmSubFormState] = useState(null);
   const [scmTypeOptions, setScmTypeOptions] = useState(null);
   const [credentials, setCredentials] = useState({
@@ -347,7 +343,7 @@ function ProjectForm({ i18n, project, submitError, ...props }) {
             description: project.description || '',
             local_path: project.local_path || '',
             name: project.name || '',
-            organization: project.organization || '',
+            organization: project.summary_fields?.organization || null,
             scm_branch: project.scm_branch || '',
             scm_clean: project.scm_clean || false,
             scm_delete_on_update: project.scm_delete_on_update || false,
@@ -377,8 +373,6 @@ function ProjectForm({ i18n, project, submitError, ...props }) {
                   scmTypeOptions={scmTypeOptions}
                   setScmSubFormState={setScmSubFormState}
                   scmSubFormState={scmSubFormState}
-                  setOrganization={setOrganization}
-                  organization={organization}
                 />
                 <FormSubmitError error={submitError} />
                 <FormActionGroup

awx/ui_next/src/screens/Project/shared/ProjectForm.test.jsx

@@ -27,6 +27,10 @@ describe('<ProjectForm />', () => {
         kind: 'scm',
         name: 'Foo',
       },
+      organization: {
+        id: 2,
+        name: 'Default',
+      },
     },
   };