External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-01-13 19:10:07 -03:30
Code Issues Packages Projects Releases Wiki Activity

fix linting issues

Browse Source
This commit is contained in:
John Mitchell 2019-01-24 13:05:36 -05:00
parent 2588832629
commit 7de89f6486
No known key found for this signature in database
GPG Key ID: FE6A9B5BD4EB5C94
25 changed files with 254 additions and 241 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
__tests__/App.test.jsx
View File

@ -7,8 +7,6 @@ import { asyncFlush } from '../jest.setup';
import App from '../src/App';
const DEFAULT_ACTIVE_GROUP = 'views_group';
describe('<App />', () => {
test('expected content is rendered', () => {
const appWrapper = mount(
@ -60,13 +58,13 @@ describe('<App />', () => {
const ansible_version = '111';
const version = '222';
const getConfig = jest.fn(() => Promise.resolve({ data: { ansible_version, version} }));
const getConfig = jest.fn(() => Promise.resolve({ data: { ansible_version, version } }));
const api = { getConfig };
const wrapper = mount(
<MemoryRouter>
<I18nProvider>
<App api={api}/>
<App api={api} />
</I18nProvider>
</MemoryRouter>
);

2
__tests__/api.test.js
View File

@ -105,7 +105,7 @@ describe('APIClient (api.js)', () => {
const mockHttp = ({ post: jest.fn(createPromise) });
const api = new APIClient(mockHttp);
const data = { name: 'test '};
const data = { name: 'test ' };
await api.createOrganization(data);
expect(mockHttp.post).toHaveBeenCalledTimes(1);

4
__tests__/components/AnsibleSelect.test.jsx
View File

@ -2,8 +2,8 @@ import React from 'react';
import { mount } from 'enzyme';
import AnsibleSelect from '../../src/components/AnsibleSelect';
const label = "test select"
const mockData = ["/venv/baz/", "/venv/ansible/"];
const label = 'test select';
const mockData = ['/venv/baz/', '/venv/ansible/'];
describe('<AnsibleSelect />', () => {
test('initially renders succesfully', async () => {
mount(

9
__tests__/components/Background.test.jsx
View File

@ -1,14 +1,13 @@
import React from 'react';
import { mount } from 'enzyme';
import { I18nProvider } from '@lingui/react';
import Background from '../../src/components/Background';
describe('Background', () => {
test('renders the expected content', () => {
const wrapper = mount(<Background><div id="test"/></Background>);
expect(wrapper).toHaveLength(1);
expect(wrapper.find('BackgroundImage')).toHaveLength(1);
expect(wrapper.find('#test')).toHaveLength(1);
const wrapper = mount(<Background><div id="test" /></Background>);
expect(wrapper).toHaveLength(1);
expect(wrapper.find('BackgroundImage')).toHaveLength(1);
expect(wrapper.find('#test')).toHaveLength(1);
});
});

18
__tests__/components/DataListToolbar.test.jsx
View File

@ -29,7 +29,7 @@ describe('<DataListToolbar />', () => {
<I18nProvider>
<DataListToolbar
isAllSelected={false}
showExpandCollapse={true}
showExpandCollapse
sortedColumnKey="name"
sortOrder="ascending"
columns={columns}
@ -94,10 +94,10 @@ describe('<DataListToolbar />', () => {
sortDropdownToggle.at(1).simulate('click');
sortDropdownToggle.at(0).simulate('click');
toolbar.update();
const sortDropdownItems = toolbar.find(sortDropdownItemsSelector);
expect(sortDropdownItems.length).toBe(2);
const mockedSortEvent = { target: { innerText: 'Bar' } };
sortDropdownItems.at(0).simulate('click', mockedSortEvent);
toolbar = mount(
@ -114,28 +114,28 @@ describe('<DataListToolbar />', () => {
</I18nProvider>
);
toolbar.update();
const sortDropdownToggleDescending = toolbar.find(sortDropdownToggleSelector);
expect(sortDropdownToggleDescending.length).toBe(2);
sortDropdownToggleDescending.at(1).simulate('click');
sortDropdownToggleDescending.at(0).simulate('click');
toolbar.update();
const sortDropdownItemsDescending = toolbar.find(sortDropdownItemsSelector);
expect(sortDropdownItemsDescending.length).toBe(2);
const mockedSortEventDescending = { target: { innerText: 'Bar' } };
sortDropdownItems.at(0).simulate('click', mockedSortEventDescending);
toolbar.update();
const searchDropdownToggle = toolbar.find(searchDropdownToggleSelector);
expect(searchDropdownToggle.length).toBe(1);
searchDropdownToggle.at(0).simulate('click');
toolbar.update();
const searchDropdownItems = toolbar.find(searchDropdownItemsSelector);
expect(searchDropdownItems.length).toBe(3);
const mockedSearchEvent = { target: { innerText: 'Bar' } };
searchDropdownItems.at(0).simulate('click', mockedSearchEvent);
});

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

@ -1,9 +1,9 @@
import React from 'react';
import { mount } from 'enzyme';
import Lookup from '../../src/components/Lookup';
import { I18nProvider } from '@lingui/react';
import Lookup from '../../src/components/Lookup';
const mockData = [{ name: 'foo', id: 0, isChecked: false }];
let mockData = [{ name: 'foo', id: 0, isChecked: false }];
describe('<Lookup />', () => {
test('initially renders succesfully', () => {
mount(
@ -46,7 +46,7 @@ describe('<Lookup />', () => {
});
test('calls "onRemove" when remove icon is clicked', () => {
const spy = jest.spyOn(Lookup.prototype, 'onRemove');
const mockData = [{ name: 'foo', id: 0, isChecked: false }, { name: 'bar', id: 1, isChecked: true }];
mockData = [{ name: 'foo', id: 0, isChecked: false }, { name: 'bar', id: 1, isChecked: true }];
const wrapper = mount(
<I18nProvider>
<Lookup
@ -61,7 +61,7 @@ describe('<Lookup />', () => {
});
test('"wrapTags" method properly handles data', () => {
const spy = jest.spyOn(Lookup.prototype, 'wrapTags');
const mockData = [{ name: 'foo', id: 0, isChecked: false }, { name: 'bar', id: 1, isChecked: false }];
mockData = [{ name: 'foo', id: 0, isChecked: false }, { name: 'bar', id: 1, isChecked: false }];
const wrapper = mount(
<I18nProvider>
<Lookup

2
__tests__/components/PageHeaderToolbar.test.jsx
View File

@ -10,7 +10,7 @@ describe('PageHeaderToolbar', () => {
const pageUserDropdownSelector = 'Dropdown UserIcon';
test('expected content is rendered on initialization', () => {
const wrapper = mount(<I18nProvider><PageHeaderToolbar/></I18nProvider>);
const wrapper = mount(<I18nProvider><PageHeaderToolbar /></I18nProvider>);
expect(wrapper.find(pageHelpDropdownSelector)).toHaveLength(1);
expect(wrapper.find(pageUserDropdownSelector)).toHaveLength(1);

2
__tests__/components/Pagination.test.jsx
View File

@ -162,7 +162,7 @@ describe('<Pagination />', () => {
pageSizeOptions={[5, 10, 25, 50]}
onSetPage={onSetPage}
/>
</I18nProvider>
</I18nProvider>
);
});
});

1
__tests__/components/TowerLogo.test.jsx
View File

@ -57,7 +57,6 @@ describe('<TowerLogo />', () => {
});
test('handles mouse over and out state.hover changes', () => {
const onLogoClick = jest.fn();
logoWrapper = mount(
<MemoryRouter>
<I18nProvider>

2
__tests__/index.test.jsx
View File

@ -2,7 +2,7 @@ import { mount } from 'enzyme';
import { main, getLanguage } from '../src/index';
const render = template => mount(template);
const data = { custom_logo: 'foo', custom_login_info: '' }
const data = { custom_logo: 'foo', custom_login_info: '' };
describe('index.jsx', () => {
test('login loads when unauthenticated', async (done) => {

6
__tests__/pages/Organizations/screens/OrganizationAdd.test.jsx
View File

@ -1,7 +1,7 @@
import React from 'react';
import { mount } from 'enzyme';
import { MemoryRouter } from 'react-router-dom';
import OrganizationAdd from '../../../../src/pages/Organizations/screens/OrganizationAdd'
import OrganizationAdd from '../../../../src/pages/Organizations/screens/OrganizationAdd';
describe('<OrganizationAdd />', () => {
test('initially renders succesfully', () => {
@ -69,7 +69,7 @@ describe('<OrganizationAdd />', () => {
});
test('API response is formatted properly', (done) => {
const spy = jest.spyOn(OrganizationAdd.WrappedComponent.prototype, 'format');
const mockedResp = {data: {id: 1, name: 'foo bar'} };
const mockedResp = { data: { id: 1, name: 'foo bar' } };
const api = { getInstanceGroups: jest.fn().mockResolvedValue(mockedResp) };
mount(
<MemoryRouter>
@ -86,7 +86,7 @@ describe('<OrganizationAdd />', () => {
test('Successful form submission triggers redirect', (done) => {
const onSuccess = jest.spyOn(OrganizationAdd.WrappedComponent.prototype, 'onSuccess');
const resetForm = jest.spyOn(OrganizationAdd.WrappedComponent.prototype, 'resetForm');
const mockedResp = {data: {id: 1, related: {instance_groups: '/bar'}}};
const mockedResp = { data: { id: 1, related: { instance_groups: '/bar' } } };
const api = { createOrganization: jest.fn().mockResolvedValue(mockedResp), createInstanceGroups: jest.fn().mockResolvedValue('done') };
const wrapper = mount(
<MemoryRouter>

16
__tests__/qs.test.js
View File

@ -8,11 +8,11 @@ describe('qs (qs.js)', () => {
[{ order_by: 'name', page: 1, page_size: 5 }, 'order_by=name&page=1&page_size=5'],
[{ '-order_by': 'name', page: '1', page_size: 5 }, '-order_by=name&page=1&page_size=5'],
]
.forEach(([params, expectedQueryString]) => {
const actualQueryString = encodeQueryString(params);
.forEach(([params, expectedQueryString]) => {
const actualQueryString = encodeQueryString(params);
expect(actualQueryString).toEqual(expectedQueryString);
});
expect(actualQueryString).toEqual(expectedQueryString);
});
});
test('parseQueryString returns the expected queryParams', () => {
@ -20,10 +20,10 @@ describe('qs (qs.js)', () => {
['order_by=name&page=1&page_size=5', ['page', 'page_size'], { order_by: 'name', page: 1, page_size: 5 }],
['order_by=name&page=1&page_size=5', ['page_size'], { order_by: 'name', page: '1', page_size: 5 }],
]
.forEach(([queryString, integerFields, expectedQueryParams]) => {
const actualQueryParams = parseQueryString(queryString, integerFields);
.forEach(([queryString, integerFields, expectedQueryParams]) => {
const actualQueryParams = parseQueryString(queryString, integerFields);
expect(actualQueryParams).toEqual(expectedQueryParams)
});
expect(actualQueryParams).toEqual(expectedQueryParams);
});
});
});

36
src/App.jsx
View File

@ -35,28 +35,17 @@ class App extends Component {
this.onAboutModalClose = this.onAboutModalClose.bind(this);
this.onAboutModalOpen = this.onAboutModalOpen.bind(this);
this.onNavToggle = this.onNavToggle.bind(this);
};
}
componentDidMount () {
this.fetchConfig();
}
async fetchConfig () {
const { api } = this.props;
try {
const { data: { ansible_version, custom_virtualenvs, version } } = await api.getConfig();
this.setState({ ansible_version, custom_virtualenvs, version });
} catch (err) {
this.setState({ ansible_version: null, custom_virtualenvs: null, version: null });
}
}
async onLogout () {
const { api } = this.props;
await api.logout();
window.location.replace('/#/login')
window.location.replace('/#/login');
}
onAboutModalOpen () {
@ -71,6 +60,17 @@ class App extends Component {
this.setState(({ isNavOpen }) => ({ isNavOpen: !isNavOpen }));
}
async fetchConfig () {
const { api } = this.props;
try {
const { data: { ansible_version, custom_virtualenvs, version } } = await api.getConfig();
this.setState({ ansible_version, custom_virtualenvs, version });
} catch (err) {
this.setState({ ansible_version: null, custom_virtualenvs: null, version: null });
}
}
render () {
const {
ansible_version,
@ -100,17 +100,17 @@ class App extends Component {
<PageHeader
showNavToggle
onNavToggle={this.onNavToggle}
logo={<TowerLogo linkTo="/"/>}
toolbar={
logo={<TowerLogo linkTo="/" />}
toolbar={(
<PageHeaderToolbar
isAboutDisabled={!version}
onAboutClick={this.onAboutModalOpen}
onLogoutClick={this.onLogout}
/>
}
)}
/>
)}
sidebar={
sidebar={(
<PageSidebar
isNavOpen={isNavOpen}
nav={(
@ -128,7 +128,7 @@ class App extends Component {
</Nav>
)}
/>
}
)}
>
<ConfigContext.Provider value={config}>
{render && render({ routeGroups })}

35
src/components/AnsibleSelect/AnsibleSelect.jsx
View File

@ -7,7 +7,7 @@ import {
} from '@patternfly/react-core';
class AnsibleSelect extends React.Component {
constructor(props) {
constructor (props) {
super(props);
this.onSelectChange = this.onSelectChange.bind(this);
}
@ -16,34 +16,39 @@ class AnsibleSelect extends React.Component {
count: 1,
}
static getDerivedStateFromProps(nexProps, _) {
static getDerivedStateFromProps (nexProps) {
if (nexProps.data) {
return {
count: nexProps.data.length,
}
};
}
return null;
}
onSelectChange(val, _) {
this.props.selectChange(val);
onSelectChange (val) {
const { selectChange } = this.props;
selectChange(val);
}
render() {
render () {
const { count } = this.state;
const { labelName, selected, data } = this.props;
let elem;
if (count > 1) {
return (
<FormGroup label={this.props.labelName} fieldId="ansible-select">
<Select value={this.props.selected} onChange={this.onSelectChange} aria-label="Select Input">
{this.props.data.map((datum, index) => (
<SelectOption isDisabled={datum.disabled} key={index} value={datum} label={datum} />
elem = (
<FormGroup label={labelName} fieldId="ansible-select">
<Select value={selected} onChange={this.onSelectChange} aria-label="Select Input">
{data.map((datum) => (
<SelectOption isDisabled={datum.disabled} key={datum} value={datum} label={datum} />
))}
</Select>
</FormGroup>
)
}
else {
return null;
);
} else {
elem = null;
}
return elem;
}
}

10
src/components/DataListToolbar/DataListToolbar.jsx
View File

@ -53,10 +53,6 @@ class DataListToolbar extends React.Component {
this.onSort = this.onSort.bind(this);
}
handleSearchInputChange (searchValue) {
this.setState({ searchValue });
}
onSortDropdownToggle (isSortDropdownOpen) {
this.setState({ isSortDropdownOpen });
}
@ -97,6 +93,10 @@ class DataListToolbar extends React.Component {
onSort(sortedColumnKey, newSortOrder);
}
handleSearchInputChange (searchValue) {
this.setState({ searchValue });
}
render () {
const { up } = DropdownPosition;
const {
@ -223,7 +223,7 @@ class DataListToolbar extends React.Component {
variant="plain"
aria-label={i18n._(t`Sort`)}
>
<SortIcon/>
<SortIcon />
</Button>
</ToolbarItem>
</ToolbarGroup>

42
src/components/ListItem/CheckboxListItem.jsx
View File

@ -11,24 +11,24 @@ export default ({
isSelected,
onSelect,
}) => (
<li key={itemId} className="pf-c-data-list__item" aria-labelledby="check-action-item1">
<div className="pf-c-data-list__check">
<I18n>
{({ i18n }) => (
<Checkbox
checked={isSelected}
onChange={onSelect}
aria-label={i18n._(t`selected ${itemId}`)}
id={`selectd-${itemId}`}
value={itemId}
/>
)}
</I18n>
</div>
<div className="pf-c-data-list__cell">
<label htmlFor={`selectd-${itemId}`} className="check-action-item">
<b>{name}</b>
</label>
</div>
</li>
);
<li key={itemId} className="pf-c-data-list__item" aria-labelledby="check-action-item1">
<div className="pf-c-data-list__check">
<I18n>
{({ i18n }) => (
<Checkbox
checked={isSelected}
onChange={onSelect}
aria-label={i18n._(t`selected ${itemId}`)}
id={`selectd-${itemId}`}
value={itemId}
/>
)}
</I18n>
</div>
<div className="pf-c-data-list__cell">
<label htmlFor={`selectd-${itemId}`} className="check-action-item">
<b>{name}</b>
</label>
</div>
</li>
);

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

@ -9,14 +9,14 @@ import {
ToolbarGroup,
} from '@patternfly/react-core';
import CheckboxListItem from '../ListItem'
import CheckboxListItem from '../ListItem';
class Lookup extends React.Component {
constructor(props) {
constructor (props) {
super(props);
this.state = {
isModalOpen: false,
}
};
this.handleModalToggle = this.handleModalToggle.bind(this);
this.onLookup = this.onLookup.bind(this);
this.onChecked = this.onChecked.bind(this);
@ -24,46 +24,54 @@ class Lookup extends React.Component {
this.onRemove = this.onRemove.bind(this);
}
handleModalToggle() {
this.setState((prevState, _) => ({
isModalOpen: !prevState.isModalOpen,
}));
};
onLookup() {
onLookup () {
this.handleModalToggle();
}
onChecked(_, evt) {
this.props.lookupChange(evt.target.value);
};
onRemove(evt) {
this.props.lookupChange(evt.target.id);
}
wrapTags(tags) {
return tags.filter(tag => tag.isChecked).map((tag, index) => {
return (
<span className="awx-c-tag--pill" key={index}>{tag.name}<span className="awx-c-icon--remove" id={tag.id} onClick={this.onRemove}>x</span></span>
)
})
onChecked (_, evt) {
const { lookupChange } = this.props;
lookupChange(evt.target.value);
}
render() {
onRemove (evt) {
const { lookupChange } = this.props;
lookupChange(evt.target.id);
}
handleModalToggle () {
this.setState((prevState) => ({
isModalOpen: !prevState.isModalOpen,
}));
}
wrapTags (tags) {
return tags.filter(tag => tag.isChecked).map((tag) => (
<span className="awx-c-tag--pill" key={tag.id}>
{tag.name}
<Button className="awx-c-icon--remove" id={tag.id} onClick={this.onRemove}>
x
</Button>
</span>
));
}
render () {
const { isModalOpen } = this.state;
const { data } = this.props;
const { data, lookupHeader } = this.props;
return (
<div className="pf-c-input-group awx-lookup">
<span className="pf-c-input-group__text" aria-label="search" id="search" onClick={this.onLookup}><SearchIcon /></span>
<div className="pf-c-form-control">{this.wrapTags(this.props.data)}</div>
<Button className="pf-c-input-group__text" aria-label="search" id="search" onClick={this.onLookup}>
<SearchIcon />
</Button>
<div className="pf-c-form-control">{this.wrapTags(data)}</div>
<Modal
className="awx-c-modal"
title={`Select ${this.props.lookupHeader}`}
title={`Select ${lookupHeader}`}
isOpen={isModalOpen}
onClose={this.handleModalToggle}
>
<ul className="pf-c-data-list awx-c-list">
{data.map(i =>
{data.map(i => (
<CheckboxListItem
key={i.id}
itemId={i.id}
@ -71,12 +79,12 @@ class Lookup extends React.Component {
isSelected={i.isChecked}
onSelect={this.onChecked}
/>
)}
))}
</ul>
<ActionGroup className="at-align-right">
<Toolbar>
<ToolbarGroup>
<Button className="at-C-SubmitButton" variant="primary" onClick={this.handleModalToggle} >Select</Button>
<Button className="at-C-SubmitButton" variant="primary" onClick={this.handleModalToggle}>Select</Button>
</ToolbarGroup>
<ToolbarGroup>
<Button className="at-C-CancelButton" variant="secondary" onClick={this.handleModalToggle}>Cancel</Button>
@ -85,7 +93,7 @@ class Lookup extends React.Component {
</ActionGroup>
</Modal>
</div>
)
);
}
}
export default Lookup;

14
src/components/Pagination/Pagination.jsx
View File

@ -49,6 +49,7 @@ class Pagination extends Component {
event.preventDefault();
// eslint-disable-next-line no-bitwise
const isPositiveInteger = value >>> 0 === parseFloat(value) && parseInt(value, 10) > 0;
const isValid = isPositiveInteger && parseInt(value, 10) <= pageCount;
@ -73,7 +74,7 @@ class Pagination extends Component {
}
onNext () {
const { onSetPage, page, pageCount, page_size } = this.props;
const { onSetPage, page, page_size } = this.props;
const nextPage = page + 1;
onSetPage(nextPage, page_size);
@ -82,7 +83,7 @@ class Pagination extends Component {
onLast () {
const { onSetPage, pageCount, page_size } = this.props;
onSetPage(pageCount, page_size)
onSetPage(pageCount, page_size);
}
onTogglePageSize (isOpen) {
@ -160,7 +161,7 @@ class Pagination extends Component {
<LevelItem>
<Split gutter="md" className="pf-u-display-flex pf-u-align-items-center">
<SplitItem>
<Trans>{itemMin} - {itemMax} of {count}</Trans>
<Trans>{`${itemMin} - ${itemMax} of ${count}`}</Trans>
</SplitItem>
<SplitItem>
<div className="pf-c-input-group">
@ -187,7 +188,8 @@ class Pagination extends Component {
<SplitItem isMain>
<form onSubmit={this.onSubmit}>
<Trans>
Page <TextInput
{'Page '}
<TextInput
isDisabled={pageCount === 1}
aria-label={i18n._(t`Page Number`)}
style={{
@ -201,7 +203,9 @@ class Pagination extends Component {
value={value}
type="text"
onChange={this.onPageChange}
/> of {pageCount}
/>
{' of '}
{pageCount}
</Trans>
</form>
</SplitItem>

10
src/components/Tabs/Tab.jsx
View File

@ -3,7 +3,6 @@ import { Link } from 'react-router-dom';
import './tabs.scss';
const Tab = ({ location, match, tab, currentTab, children, breadcrumb }) => {
const tabClasses = () => {
let classes = 'pf-c-tabs__item';
@ -28,13 +27,14 @@ const Tab = ({ location, match, tab, currentTab, children, breadcrumb }) => {
return (
<li className={tabClasses()}>
<Link
className={'pf-c-tabs__button'}
className="pf-c-tabs__button"
to={{ pathname: `${match.url}`, search: tabParams(), state: { breadcrumb } }}
replace={tab === currentTab}>
replace={tab === currentTab}
>
{children}
</Link>
</li>
)
}
);
};
export default Tab;

1
src/components/Tabs/Tabs.jsx
View File

@ -1,7 +1,6 @@
import React from 'react';
import './tabs.scss';
const Tabs = ({ children, labelText }) => (
<div className="pf-c-tabs" aria-label={labelText}>
<ul className="pf-c-tabs__list">

3
src/context.jsx
View File

@ -1,3 +1,4 @@
import React from "react";
import React from 'react';
// eslint-disable-next-line import/prefer-default-export
export const ConfigContext = React.createContext({});

9
src/index.jsx
View File

@ -65,7 +65,7 @@ export function getLanguage (nav) {
const languageWithoutRegionCode = language.toLowerCase().split(/[_-]+/)[0];
return languageWithoutRegionCode;
};
}
//
// Function Main
@ -269,7 +269,7 @@ export async function main (render, api) {
/>
)}
/>
))
))
)}
/>
)}
@ -280,7 +280,8 @@ export async function main (render, api) {
)}
</I18n>
</I18nProvider>
</HashRouter>, el);
};
</HashRouter>, el
);
}
main(ReactDOM.render, new APIClient(http));

1
src/pages/Organizations/components/OrganizationBreadcrumb.jsx
View File

@ -70,7 +70,6 @@ const OrganizationBreadcrumb = ({ parentObj, organization, currentTab, location
</Fragment>
);
} else {
breadcrumb = (
<Fragment>
{generateCrumb(true)}

23
src/pages/Organizations/screens/Organization/OrganizationEdit.jsx
View File

@ -8,18 +8,15 @@ import {
Link
} from 'react-router-dom';
const OrganizationEdit = ({ match, parentBreadcrumbObj, organization }) => {
return (
<Card className="at-c-orgPane">
<CardBody>
<Trans>edit view </Trans>
<Link to={{ pathname: `/organizations/${match.params.id}`, state: { breadcrumb: parentBreadcrumbObj, organization } }}>
<Trans>save/cancel and go back to view</Trans>
</Link>
</CardBody>
</Card>
);
};
const OrganizationEdit = ({ match, parentBreadcrumbObj, organization }) => (
<Card className="at-c-orgPane">
<CardBody>
<Trans>edit view </Trans>
<Link to={{ pathname: `/organizations/${match.params.id}`, state: { breadcrumb: parentBreadcrumbObj, organization } }}>
<Trans>save/cancel and go back to view</Trans>
</Link>
</CardBody>
</Card>
);
export default OrganizationEdit;

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

@ -20,10 +20,20 @@ import {
import { ConfigContext } from '../../../context';
import Lookup from '../../../components/Lookup';
import AnsibleSelect from '../../../components/AnsibleSelect'
import AnsibleSelect from '../../../components/AnsibleSelect';
const { light } = PageSectionVariants;
class OrganizationAdd extends React.Component {
constructor(props) {
static format (data) {
const results = data.results.map((result) => ({
id: result.id,
name: result.name,
isChecked: false
}));
return results;
}
constructor (props) {
super(props);
this.handleChange = this.handleChange.bind(this);
@ -45,87 +55,80 @@ class OrganizationAdd extends React.Component {
error: '',
};
onSelectChange(value, _) {
this.setState({ custom_virtualenv: value });
};
onLookupChange(id, _) {
let selected = { ...this.state.results }
const index = id - 1;
selected[index].isChecked = !selected[index].isChecked;
this.setState({ selected })
}
resetForm() {
this.setState({
name: '',
description: '',
});
let reset = [];
this.state.results.map((result) => {
reset.push({ id: result.id, name: result.name, isChecked: false });
})
this.setState({ results: reset });
}
handleChange(_, evt) {
this.setState({ [evt.target.name]: evt.target.value });
}
async onSubmit() {
const { api } = this.props;
const data = Object.assign({}, { ...this.state });
try {
const { data: response } = await api.createOrganization(data);
const url = response.related.instance_groups;
const selected = this.state.results.filter(group => group.isChecked);
try {
if (selected.length > 0) {
selected.forEach( async (select) => {
await api.createInstanceGroups(url, select.id);
});
}
} catch (err) {
this.setState({ createInstanceGroupsError: err })
} finally {
this.resetForm();
this.onSuccess(response.id);
}
}
catch (err) {
this.setState({ onSubmitError: err })
}
}
onCancel() {
this.props.history.push('/organizations');
}
onSuccess(id) {
this.props.history.push(`/organizations/${id}`);
}
format(data) {
let results = [];
data.results.map((result) => {
results.push({ id: result.id, name: result.name, isChecked: false });
});
return results;
};
async componentDidMount() {
async componentDidMount () {
const { api } = this.props;
try {
const { data } = await api.getInstanceGroups();
const results = this.format(data);
this.setState({ results });
} catch (error) {
this.setState({ getInstanceGroupsError: error })
this.setState({ getInstanceGroupsError: error });
}
}
render() {
const { name, results } = this.state;
onSelectChange (value) {
this.setState({ custom_virtualenv: value });
}
onLookupChange (id) {
const { results } = this.state;
const selected = { ...results };
const index = id - 1;
selected[index].isChecked = !selected[index].isChecked;
this.setState({ selected });
}
async onSubmit () {
const { api } = this.props;
const data = Object.assign({}, { ...this.state });
const { results } = this.state;
try {
const { data: response } = await api.createOrganization(data);
const url = response.related.instance_groups;
const selected = results.filter(group => group.isChecked);
try {
if (selected.length > 0) {
selected.forEach(async (select) => {
await api.createInstanceGroups(url, select.id);
});
}
} catch (err) {
this.setState({ createInstanceGroupsError: err });
} finally {
this.resetForm();
this.onSuccess(response.id);
}
} catch (err) {
this.setState({ onSubmitError: err });
}
}
onCancel () {
const { history } = this.props;
history.push('/organizations');
}
onSuccess (id) {
const { history } = this.props;
history.push(`/organizations/${id}`);
}
handleChange (_, evt) {
this.setState({ [evt.target.name]: evt.target.value });
}
resetForm () {
this.setState({
name: '',
description: '',
});
const { results } = this.state;
const reset = results.map((result) => ({ id: result.id, name: result.name, isChecked: false }));
this.setState({ results: reset });
}
render () {
const { name, results, description, custom_virtualenv } = this.state;
const enabled = name.length > 0; // TODO: add better form validation
return (
@ -150,7 +153,7 @@ class OrganizationAdd extends React.Component {
type="text"
id="add-org-form-name"
name="name"
value={this.state.name}
value={name}
onChange={this.handleChange}
/>
</FormGroup>
@ -158,7 +161,7 @@ class OrganizationAdd extends React.Component {
<TextInput
id="add-org-form-description"
name="description"
value={this.state.description}
value={description}
onChange={this.handleChange}
/>
</FormGroup>
@ -170,14 +173,14 @@ class OrganizationAdd extends React.Component {
/>
</FormGroup>
<ConfigContext.Consumer>
{({ custom_virtualenvs }) =>
{({ custom_virtualenvs }) => (
<AnsibleSelect
labelName="Ansible Environment"
selected={this.state.custom_virtualenv}
selected={custom_virtualenv}
selectChange={this.onSelectChange}
data={custom_virtualenvs}
/>
}
)}
</ConfigContext.Consumer>
</Gallery>
<ActionGroup className="at-align-right">
@ -200,7 +203,7 @@ class OrganizationAdd extends React.Component {
}
OrganizationAdd.contextTypes = {
custom_virtualenvs: PropTypes.array,
custom_virtualenvs: PropTypes.arrayOf(PropTypes.string)
};
export default withRouter(OrganizationAdd);