Merge pull request #6390 from marshmalien/fix-select-behavior

Fix bugs related to Job Template labels and tags

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

awx/ui_next/src/components/FormActionGroup/FormActionGroup.jsx

@@ -11,7 +11,7 @@ const FormActionGroup = ({ onSubmit, submitDisabled, onCancel, i18n }) => (
       <Button
         aria-label={i18n._(t`Save`)}
         variant="primary"
-        type="submit"
+        type="button"
         onClick={onSubmit}
         isDisabled={submitDisabled}
       >

awx/ui_next/src/components/MultiSelect/TagMultiSelect.jsx

@@ -25,8 +25,8 @@ function TagMultiSelect({ onChange, value }) {
     onChange(arrayToString(newValue));
   };
 
-  const toggleExpanded = () => {
-    setIsExpanded(!isExpanded);
+  const toggleExpanded = toggleValue => {
+    setIsExpanded(toggleValue);
   };
 
   const renderOptions = opts => {

awx/ui_next/src/screens/Template/JobTemplateAdd/JobTemplateAdd.jsx

@@ -3,7 +3,7 @@ import { useHistory } from 'react-router-dom';
 import { Card, PageSection } from '@patternfly/react-core';
 import { CardBody } from '@components/Card';
 import JobTemplateForm from '../shared/JobTemplateForm';
-import { JobTemplatesAPI } from '@api';
+import { JobTemplatesAPI, OrganizationsAPI } from '@api';
 
 function JobTemplateAdd() {
   const [formSubmitError, setFormSubmitError] = useState(null);
@@ -35,10 +35,20 @@ function JobTemplateAdd() {
     }
   }
 
-  function submitLabels(templateId, labels = [], organizationId) {
+  async function submitLabels(templateId, labels = [], formOrg) {
+    let orgId = formOrg;
+
+    if (!orgId && labels.length > 0) {
+      const {
+        data: { results },
+      } = await OrganizationsAPI.read();
+      orgId = results[0].id;
+    }
+
     const associationPromises = labels.map(label =>
-      JobTemplatesAPI.associateLabel(templateId, label, organizationId)
+      JobTemplatesAPI.associateLabel(templateId, label, orgId)
     );
+
     return Promise.all([...associationPromises]);
   }
 

awx/ui_next/src/screens/Template/JobTemplateEdit/JobTemplateEdit.jsx

@@ -4,7 +4,7 @@ import { withRouter, Redirect } from 'react-router-dom';
 import { CardBody } from '@components/Card';
 import ContentError from '@components/ContentError';
 import ContentLoading from '@components/ContentLoading';
-import { JobTemplatesAPI, ProjectsAPI } from '@api';
+import { JobTemplatesAPI, OrganizationsAPI, ProjectsAPI } from '@api';
 import { JobTemplate } from '@types';
 import { getAddedAndRemoved } from '@util/lists';
 import JobTemplateForm from '../shared/JobTemplateForm';
@@ -118,17 +118,27 @@ class JobTemplateEdit extends Component {
     }
   }
 
-  async submitLabels(labels = [], organizationId) {
+  async submitLabels(labels = [], formOrgId) {
     const { template } = this.props;
+    let orgId = formOrgId;
+
     const { added, removed } = getAddedAndRemoved(
       template.summary_fields.labels.results,
       labels
     );
+
+    if (!orgId && added.length > 0) {
+      const {
+        data: { results },
+      } = await OrganizationsAPI.read();
+      orgId = results[0].id;
+    }
+
     const disassociationPromises = removed.map(label =>
       JobTemplatesAPI.disassociateLabel(template.id, label)
     );
     const associationPromises = added.map(label => {
-      return JobTemplatesAPI.associateLabel(template.id, label, organizationId);
+      return JobTemplatesAPI.associateLabel(template.id, label, orgId);
     });
 
     const results = await Promise.all([

awx/ui_next/src/screens/Template/shared/LabelSelect.jsx

@@ -36,8 +36,8 @@ function LabelSelect({ value, placeholder, onChange, onError }) {
   );
   const [isExpanded, setIsExpanded] = useState(false);
 
-  const toggleExpanded = () => {
-    setIsExpanded(!isExpanded);
+  const toggleExpanded = toggleValue => {
+    setIsExpanded(toggleValue);
   };
 
   useEffect(() => {