External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-05-20 07:17:40 -02:30
Code Issues Packages Projects Releases Wiki Activity

incorporate feedback on instance groups pagination

Browse Source
This commit is contained in:
John Mitchell
2019-02-12 11:59:49 -05:00
parent 6431ec603f
commit c1381f7b98
3 changed files with 19 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
__tests__/components/Lookup.test.jsx
View File

@@ -13,7 +13,7 @@ describe('<Lookup />', () => {
name="fooBar" name="fooBar"
value={mockData} value={mockData}
onLookupSave={() => { }} onLookupSave={() => { }}
getEndpoint={() => { }} getItems={() => { }}
/> />
</I18nProvider> </I18nProvider>
); );
@@ -26,7 +26,7 @@ describe('<Lookup />', () => {
name="fooBar" name="fooBar"
value={mockData} value={mockData}
onLookupSave={() => { }} onLookupSave={() => { }}
getEndpoint={() => ({ data: { results: [{ name: 'test instance', id: 1 }] } })} getItems={() => ({ data: { results: [{ name: 'test instance', id: 1 }] } })}
/> />
</I18nProvider> </I18nProvider>
).find('Lookup'); ).find('Lookup');
@@ -46,7 +46,7 @@ describe('<Lookup />', () => {
name="fooBar" name="fooBar"
value={mockSelected} value={mockSelected}
onLookupSave={() => { }} onLookupSave={() => { }}
getEndpoint={() => { }} getItems={() => { }}
/> />
</I18nProvider> </I18nProvider>
).find('Lookup'); ).find('Lookup');
@@ -71,7 +71,7 @@ describe('<Lookup />', () => {
name="fooBar" name="fooBar"
value={mockSelected} value={mockSelected}
onLookupSave={() => { }} onLookupSave={() => { }}
getEndpoint={() => ({ data: { results: [{ name: 'test instance', id: 1 }] } })} getItems={() => ({ data: { results: [{ name: 'test instance', id: 1 }] } })}
/> />
</I18nProvider> </I18nProvider>
); );
@@ -93,7 +93,7 @@ describe('<Lookup />', () => {
name="fooBar" name="fooBar"
value={mockData} value={mockData}
onLookupSave={() => { }} onLookupSave={() => { }}
getEndpoint={() => { }} getItems={() => { }}
/> />
</I18nProvider> </I18nProvider>
); );
@@ -154,7 +154,7 @@ describe('<Lookup />', () => {
name="fooBar" name="fooBar"
value={mockData} value={mockData}
onLookupSave={onLookupSaveFn} onLookupSave={onLookupSaveFn}
getEndpoint={() => { }} getItems={() => { }}
/> />
</I18nProvider> </I18nProvider>
).find('Lookup'); ).find('Lookup');

8
src/components/Lookup/Lookup.jsx
View File

@@ -50,13 +50,13 @@ class Lookup extends React.Component {
} }
async getData (queryParams) { async getData (queryParams) {
const { getEndpoint } = this.props; const { getItems } = this.props;
const { page } = queryParams; const { page } = queryParams;
this.setState({ error: false }); this.setState({ error: false });
try { try {
const { data } = await getEndpoint(queryParams); const { data } = await getItems(queryParams);
const { results, count } = data; const { results, count } = data;
const stateToUpdate = { const stateToUpdate = {
@@ -150,7 +150,7 @@ class Lookup extends React.Component {
<Button key="cancel" variant="secondary" onClick={this.handleModalToggle}>{(results.length === 0) ? i18n._(t`Close`) : i18n._(t`Cancel`)}</Button> <Button key="cancel" variant="secondary" onClick={this.handleModalToggle}>{(results.length === 0) ? i18n._(t`Close`) : i18n._(t`Cancel`)}</Button>
]} ]}
> >
{(results.length === 0) && ( {(results.length === 0) ? (
<EmptyState> <EmptyState>
<EmptyStateIcon icon={CubesIcon} /> <EmptyStateIcon icon={CubesIcon} />
<Title size="lg"> <Title size="lg">
@@ -160,7 +160,7 @@ class Lookup extends React.Component {
<Trans>{`Please add ${lookupHeader.toLowerCase()} to populate this list`}</Trans> <Trans>{`Please add ${lookupHeader.toLowerCase()} to populate this list`}</Trans>
</EmptyStateBody> </EmptyStateBody>
</EmptyState> </EmptyState>
) || ( ) : (
<Fragment> <Fragment>
<ul className="pf-c-data-list awx-c-list"> <ul className="pf-c-data-list awx-c-list">
{results.map(i => ( {results.map(i => (

20
src/pages/Organizations/screens/OrganizationAdd.jsx
View File

@@ -16,14 +16,6 @@ import Lookup from '../../../components/Lookup';
import AnsibleSelect from '../../../components/AnsibleSelect'; import AnsibleSelect from '../../../components/AnsibleSelect';
import FormActionGroup from '../../../components/FormActionGroup'; import FormActionGroup from '../../../components/FormActionGroup';
const initialFormState = {
name: '',
description: '',
custom_virtualenv: '',
instanceGroups: [],
error: '',
};
class OrganizationAdd extends React.Component { class OrganizationAdd extends React.Component {
constructor (props) { constructor (props) {
super(props); super(props);
@@ -34,9 +26,15 @@ class OrganizationAdd extends React.Component {
this.onSubmit = this.onSubmit.bind(this); this.onSubmit = this.onSubmit.bind(this);
this.onCancel = this.onCancel.bind(this); this.onCancel = this.onCancel.bind(this);
this.onSuccess = this.onSuccess.bind(this); this.onSuccess = this.onSuccess.bind(this);
}
state = initialFormState; this.state = {
name: '',
description: '',
custom_virtualenv: '',
instanceGroups: [],
error: '',
};
}
onFieldChange (val, evt) { onFieldChange (val, evt) {
this.setState({ [evt.target.name]: val || evt.target.value }); this.setState({ [evt.target.name]: val || evt.target.value });
@@ -132,7 +130,7 @@ class OrganizationAdd extends React.Component {
name="instanceGroups" name="instanceGroups"
value={instanceGroups} value={instanceGroups}
onLookupSave={this.onLookupSave} onLookupSave={this.onLookupSave}
getEndpoint={this.getInstanceGroups} getItems={this.getInstanceGroups}
/> />
</FormGroup> </FormGroup>
<ConfigContext.Consumer> <ConfigContext.Consumer>