Update org edit form layout and remove chip group component from lookup;

src/components/Lookup/Lookup.jsx

@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import { SearchIcon, CubesIcon } from '@patternfly/react-icons';
 import {
   Chip,
-  ChipGroup,
   Modal,
   Button,
   EmptyState,
@@ -150,18 +149,15 @@ class Lookup extends React.Component {
     } = this.state;
     const { lookupHeader = 'items', value, columns } = this.props;
 
-    let chips = null;
+    const chips = value ? (
-    if (value) {
+      <div className="pf-c-chip-group">
-      chips = (
+        {value.map(chip => (
-        <ChipGroup>
+          <Chip key={chip.id} onClick={() => this.toggleSelected(chip)}>
-          {value.map(chip => (
+            {chip.name}
-            <Chip key={chip.id} onClick={() => this.toggleSelected(chip)}>
+          </Chip>
-              {chip.name}
+        ))}
-            </Chip>
+      </div>
-          ))}
+    ) : null;
-        </ChipGroup>
-      );
-    }
 
     return (
       <I18n>

src/pages/Organizations/screens/Organization/OrganizationEdit.jsx

@@ -7,7 +7,6 @@ import {
   CardBody,
   Form,
   FormGroup,
-  Gallery,
   TextInput,
 } from '@patternfly/react-core';
 
@@ -201,10 +200,10 @@ class OrganizationEdit extends Component {
 
     return (
       <CardBody>
-        <Form>
+        <I18n>
-          <I18n>
+          {({ i18n }) => (
-            {({ i18n }) => (
+            <Form autoComplete="off">
-              <Gallery gutter="md">
+              <div style={{ display: 'grid', gridGap: '20px', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))' }}>
                 <FormGroup
                   fieldId="edit-org-form-name"
                   helperTextInvalid={name.helperTextInvalid}
@@ -218,7 +217,6 @@ class OrganizationEdit extends Component {
                     isValid={name.isValid}
                     name="name"
                     onChange={this.onFieldChange}
-                    type="text"
                     value={name.value || ''}
                   />
                 </FormGroup>
@@ -230,28 +228,9 @@ class OrganizationEdit extends Component {
                     id="edit-org-form-description"
                     name="description"
                     onChange={this.onFieldChange}
-                    type="text"
                     value={description.value || ''}
                   />
                 </FormGroup>
-                <FormGroup
-                  fieldId="edit-org-form-instance-groups"
-                  label={i18n._(t`Instance Groups`)}
-                >
-                  { instanceGroups.value
-                    && (
-                      <Lookup
-                        columns={instanceGroupsLookupColumns}
-                        getItems={this.getInstanceGroups}
-                        lookupHeader="Instance Groups"
-                        name="instanceGroups"
-                        onLookupSave={this.onLookupSave}
-                        sortedColumnKey="name"
-                        value={instanceGroups.value}
-                      />
-                    )
-                  }
-                </FormGroup>
                 <ConfigContext.Consumer>
                   {({ custom_virtualenvs }) => (
                     custom_virtualenvs && custom_virtualenvs.length > 1 && (
@@ -271,16 +250,34 @@ class OrganizationEdit extends Component {
                     )
                   )}
                 </ConfigContext.Consumer>
-              </Gallery>
+              </div>
-            )}
+              <FormGroup
-          </I18n>
+                fieldId="edit-org-form-instance-groups"
-          <FormActionGroup
+                label={i18n._(t`Instance Groups`)}
-            onCancel={this.onCancel}
+              >
-            onSubmit={this.onSubmit}
+                { instanceGroups.value
-            submitDisabled={!formIsValid}
+                  && (
-          />
+                    <Lookup
-          { error ? <div>error</div> : '' }
+                      columns={instanceGroupsLookupColumns}
-        </Form>
+                      getItems={this.getInstanceGroups}
+                      lookupHeader={i18n._(t`Instance Groups`)}
+                      name="instanceGroups"
+                      onLookupSave={this.onLookupSave}
+                      sortedColumnKey="name"
+                      value={instanceGroups.value}
+                    />
+                  )
+                }
+              </FormGroup>
+              <FormActionGroup
+                onCancel={this.onCancel}
+                onSubmit={this.onSubmit}
+                submitDisabled={!formIsValid}
+              />
+              { error ? <div>error</div> : '' }
+            </Form>
+          )}
+        </I18n>
       </CardBody>
     );
   }