1
0
mirror of https://github.com/ansible/awx.git synced 2024-11-01 08:21:15 +03:00

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

This commit is contained in:
Marliana Lara 2019-02-25 09:15:21 -05:00
parent c3fc00c45a
commit ff339e0eba
No known key found for this signature in database
GPG Key ID: 38C73B40DFA809EE
2 changed files with 41 additions and 48 deletions

View File

@ -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>

View File

@ -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>
);
}