From ff339e0eba6c8ce44be40c3c303aaf98805a353b Mon Sep 17 00:00:00 2001
From: Marliana Lara <mlara@redhat.com>
Date: Mon, 25 Feb 2019 09:15:21 -0500
Subject: [PATCH] Update org edit form layout and remove chip group component
 from lookup;

---
 src/components/Lookup/Lookup.jsx              | 22 +++---
 .../screens/Organization/OrganizationEdit.jsx | 67 +++++++++----------
 2 files changed, 41 insertions(+), 48 deletions(-)

diff --git a/src/components/Lookup/Lookup.jsx b/src/components/Lookup/Lookup.jsx
index bc57dbb1c4..454b937edb 100644
--- a/src/components/Lookup/Lookup.jsx
+++ b/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;
-    if (value) {
-      chips = (
-        <ChipGroup>
-          {value.map(chip => (
-            <Chip key={chip.id} onClick={() => this.toggleSelected(chip)}>
-              {chip.name}
-            </Chip>
-          ))}
-        </ChipGroup>
-      );
-    }
+    const chips = value ? (
+      <div className="pf-c-chip-group">
+        {value.map(chip => (
+          <Chip key={chip.id} onClick={() => this.toggleSelected(chip)}>
+            {chip.name}
+          </Chip>
+        ))}
+      </div>
+    ) : null;
 
     return (
       <I18n>
diff --git a/src/pages/Organizations/screens/Organization/OrganizationEdit.jsx b/src/pages/Organizations/screens/Organization/OrganizationEdit.jsx
index 0ed3e8887d..2fd9f280ba 100644
--- a/src/pages/Organizations/screens/Organization/OrganizationEdit.jsx
+++ b/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 }) => (
-              <Gallery gutter="md">
+        <I18n>
+          {({ i18n }) => (
+            <Form autoComplete="off">
+              <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>
-            )}
-          </I18n>
-          <FormActionGroup
-            onCancel={this.onCancel}
-            onSubmit={this.onSubmit}
-            submitDisabled={!formIsValid}
-          />
-          { error ? <div>error</div> : '' }
-        </Form>
+              </div>
+              <FormGroup
+                fieldId="edit-org-form-instance-groups"
+                label={i18n._(t`Instance Groups`)}
+              >
+                { instanceGroups.value
+                  && (
+                    <Lookup
+                      columns={instanceGroupsLookupColumns}
+                      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>
     );
   }