refactor out OrganizationForm; share between add & edit

src/pages/Organizations/screens/OrganizationAdd.jsx

@@ -1,26 +1,19 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { withRouter } from 'react-router-dom';
 import { I18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import {
   PageSection,
-  Form,
-  FormGroup,
-  TextInput,
-  Gallery,
   Card,
   CardHeader,
   CardBody,
   Button,
   Tooltip,
 } from '@patternfly/react-core';
-import { QuestionCircleIcon, TimesIcon } from '@patternfly/react-icons';
+import { TimesIcon } from '@patternfly/react-icons';
 
-import { ConfigContext } from '../../../context';
-import AnsibleSelect from '../../../components/AnsibleSelect';
-import FormActionGroup from '../../../components/FormActionGroup';
-import InstanceGroupsLookup from '../components/InstanceGroupsLookup';
+import OrganizationForm from '../components/OrganizationForm';
 
 class OrganizationAdd extends React.Component {
   constructor (props) {
@@ -33,12 +26,7 @@ class OrganizationAdd extends React.Component {
     this.handleSuccess = this.handleSuccess.bind(this);
 
     this.state = {
-      name: '',
-      description: '',
-      custom_virtualenv: '',
-      instanceGroups: [],
       error: '',
-      defaultEnv: '/venv/ansible/',
     };
   }
 
@@ -50,23 +38,15 @@ class OrganizationAdd extends React.Component {
     this.setState({ [targetName]: val });
   }
 
-  async handleSubmit () {
+  async handleSubmit (values, groupsToAssociate) {
     const { api } = this.props;
-    const { name, description, custom_virtualenv, instanceGroups } = this.state;
-    const data = {
-      name,
-      description,
-      custom_virtualenv
-    };
     try {
-      const { data: response } = await api.createOrganization(data);
+      const { data: response } = await api.createOrganization(values);
       const instanceGroupsUrl = response.related.instance_groups;
       try {
-        if (instanceGroups.length > 0) {
-          instanceGroups.forEach(async (select) => {
-            await api.associateInstanceGroup(instanceGroupsUrl, select.id);
-          });
-        }
+        await Promise.all(groupsToAssociate.map(async id => {
+          await api.associateInstanceGroup(instanceGroupsUrl, id);
+        }));
       } catch (err) {
         this.setState({ error: err });
       } finally {
@@ -89,15 +69,7 @@ class OrganizationAdd extends React.Component {
 
   render () {
     const { api } = this.props;
-    const {
-      name,
-      description,
-      custom_virtualenv,
-      defaultEnv,
-      instanceGroups,
-      error
-    } = this.state;
-    const enabled = name.length > 0; // TODO: add better form validation
+    const { error } = this.state;
 
     return (
       <PageSection>
@@ -119,72 +91,12 @@ class OrganizationAdd extends React.Component {
                 </Tooltip>
               </CardHeader>
               <CardBody>
-                <Form autoComplete="off">
-                  <Gallery gutter="md">
-                    <FormGroup
-                      label={i18n._(t`Name`)}
-                      isRequired
-                      fieldId="add-org-form-name"
-                    >
-                      <TextInput
-                        isRequired
-                        id="add-org-form-name"
-                        name="name"
-                        value={name}
-                        onChange={this.handleFieldChange}
-                      />
-                    </FormGroup>
-                    <FormGroup label={i18n._(t`Description`)} fieldId="add-org-form-description">
-                      <TextInput
-                        id="add-org-form-description"
-                        name="description"
-                        value={description}
-                        onChange={this.handleFieldChange}
-                      />
-                    </FormGroup>
-                    <InstanceGroupsLookup
-                      api={api}
-                      value={instanceGroups}
-                      onChange={this.handleInstanceGroupsChange}
-                    />
-                    <ConfigContext.Consumer>
-                      {({ custom_virtualenvs }) => (
-                        custom_virtualenvs && custom_virtualenvs.length > 1 && (
-                          <FormGroup
-                            label={(
-                              <Fragment>
-                                {i18n._(t`Ansible Environment`)}
-                                {' '}
-                                <Tooltip
-                                  position="right"
-                                  content={i18n._(t`Select the custom Python virtual environment for this organization to run on.`)}
-                                >
-                                  <QuestionCircleIcon />
-                                </Tooltip>
-                              </Fragment>
-                            )}
-                            fieldId="add-org-custom-virtualenv"
-                          >
-                            <AnsibleSelect
-                              label={i18n._(t`Ansible Environment`)}
-                              name="custom_virtualenv"
-                              value={custom_virtualenv}
-                              onChange={this.handleFieldChange}
-                              data={custom_virtualenvs}
-                              defaultSelected={defaultEnv}
-                            />
-                          </FormGroup>
-                        )
-                      )}
-                    </ConfigContext.Consumer>
-                  </Gallery>
-                  <FormActionGroup
-                    onSubmit={this.handleSubmit}
-                    submitDisabled={!enabled}
-                    onCancel={this.handleCancel}
-                  />
-                  {error ? <div>error</div> : ''}
-                </Form>
+                <OrganizationForm
+                  api={api}
+                  handleSubmit={this.handleSubmit}
+                  handleCancel={this.handleCancel}
+                />
+                {error ? <div>error</div> : ''}
               </CardBody>
             </Card>
           )}
@@ -194,6 +106,10 @@ class OrganizationAdd extends React.Component {
   }
 }
 
+OrganizationAdd.propTypes = {
+  api: PropTypes.shape().isRequired,
+};
+
 OrganizationAdd.contextTypes = {
   custom_virtualenvs: PropTypes.arrayOf(PropTypes.string)
 };