From 7de89f6486a726be6cebe648e9da90bd952395dc Mon Sep 17 00:00:00 2001 From: John Mitchell Date: Thu, 24 Jan 2019 13:05:36 -0500 Subject: [PATCH] fix linting issues --- __tests__/App.test.jsx | 6 +- __tests__/api.test.js | 2 +- __tests__/components/AnsibleSelect.test.jsx | 4 +- __tests__/components/Background.test.jsx | 9 +- __tests__/components/DataListToolbar.test.jsx | 18 +- __tests__/components/Lookup.test.jsx | 8 +- .../components/PageHeaderToolbar.test.jsx | 2 +- __tests__/components/Pagination.test.jsx | 2 +- __tests__/components/TowerLogo.test.jsx | 1 - __tests__/index.test.jsx | 2 +- .../screens/OrganizationAdd.test.jsx | 6 +- __tests__/qs.test.js | 16 +- src/App.jsx | 36 ++-- .../AnsibleSelect/AnsibleSelect.jsx | 35 ++-- .../DataListToolbar/DataListToolbar.jsx | 10 +- src/components/ListItem/CheckboxListItem.jsx | 42 ++--- src/components/Lookup/Lookup.jsx | 72 ++++---- src/components/Pagination/Pagination.jsx | 14 +- src/components/Tabs/Tab.jsx | 10 +- src/components/Tabs/Tabs.jsx | 1 - src/context.jsx | 3 +- src/index.jsx | 9 +- .../components/OrganizationBreadcrumb.jsx | 1 - .../screens/Organization/OrganizationEdit.jsx | 23 ++- .../Organizations/screens/OrganizationAdd.jsx | 163 +++++++++--------- 25 files changed, 254 insertions(+), 241 deletions(-) diff --git a/__tests__/App.test.jsx b/__tests__/App.test.jsx index 0a1870eca0..d98025eebd 100644 --- a/__tests__/App.test.jsx +++ b/__tests__/App.test.jsx @@ -7,8 +7,6 @@ import { asyncFlush } from '../jest.setup'; import App from '../src/App'; -const DEFAULT_ACTIVE_GROUP = 'views_group'; - describe('', () => { test('expected content is rendered', () => { const appWrapper = mount( @@ -60,13 +58,13 @@ describe('', () => { 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( - + ); diff --git a/__tests__/api.test.js b/__tests__/api.test.js index 54e7db395b..31b69913b5 100644 --- a/__tests__/api.test.js +++ b/__tests__/api.test.js @@ -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); diff --git a/__tests__/components/AnsibleSelect.test.jsx b/__tests__/components/AnsibleSelect.test.jsx index 5a225b804d..6b72ed5cc2 100644 --- a/__tests__/components/AnsibleSelect.test.jsx +++ b/__tests__/components/AnsibleSelect.test.jsx @@ -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('', () => { test('initially renders succesfully', async () => { mount( diff --git a/__tests__/components/Background.test.jsx b/__tests__/components/Background.test.jsx index fdee92b49d..a7ebeb8d69 100644 --- a/__tests__/components/Background.test.jsx +++ b/__tests__/components/Background.test.jsx @@ -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(
); - expect(wrapper).toHaveLength(1); - expect(wrapper.find('BackgroundImage')).toHaveLength(1); - expect(wrapper.find('#test')).toHaveLength(1); + const wrapper = mount(
); + expect(wrapper).toHaveLength(1); + expect(wrapper.find('BackgroundImage')).toHaveLength(1); + expect(wrapper.find('#test')).toHaveLength(1); }); }); diff --git a/__tests__/components/DataListToolbar.test.jsx b/__tests__/components/DataListToolbar.test.jsx index 958573e2f1..98920bc02c 100644 --- a/__tests__/components/DataListToolbar.test.jsx +++ b/__tests__/components/DataListToolbar.test.jsx @@ -29,7 +29,7 @@ describe('', () => { ', () => { 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('', () => { ); 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); }); diff --git a/__tests__/components/Lookup.test.jsx b/__tests__/components/Lookup.test.jsx index 8175b619e4..cf2c61c014 100644 --- a/__tests__/components/Lookup.test.jsx +++ b/__tests__/components/Lookup.test.jsx @@ -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('', () => { test('initially renders succesfully', () => { mount( @@ -46,7 +46,7 @@ describe('', () => { }); 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( ', () => { }); 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( { const pageUserDropdownSelector = 'Dropdown UserIcon'; test('expected content is rendered on initialization', () => { - const wrapper = mount(); + const wrapper = mount(); expect(wrapper.find(pageHelpDropdownSelector)).toHaveLength(1); expect(wrapper.find(pageUserDropdownSelector)).toHaveLength(1); diff --git a/__tests__/components/Pagination.test.jsx b/__tests__/components/Pagination.test.jsx index 05413a49ad..e11148de25 100644 --- a/__tests__/components/Pagination.test.jsx +++ b/__tests__/components/Pagination.test.jsx @@ -162,7 +162,7 @@ describe('', () => { pageSizeOptions={[5, 10, 25, 50]} onSetPage={onSetPage} /> - + ); }); }); diff --git a/__tests__/components/TowerLogo.test.jsx b/__tests__/components/TowerLogo.test.jsx index 28151624f3..7fec84110a 100644 --- a/__tests__/components/TowerLogo.test.jsx +++ b/__tests__/components/TowerLogo.test.jsx @@ -57,7 +57,6 @@ describe('', () => { }); test('handles mouse over and out state.hover changes', () => { - const onLogoClick = jest.fn(); logoWrapper = mount( diff --git a/__tests__/index.test.jsx b/__tests__/index.test.jsx index 83490ec5ce..4414a46cbd 100644 --- a/__tests__/index.test.jsx +++ b/__tests__/index.test.jsx @@ -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) => { diff --git a/__tests__/pages/Organizations/screens/OrganizationAdd.test.jsx b/__tests__/pages/Organizations/screens/OrganizationAdd.test.jsx index ad47241399..295e5801a7 100644 --- a/__tests__/pages/Organizations/screens/OrganizationAdd.test.jsx +++ b/__tests__/pages/Organizations/screens/OrganizationAdd.test.jsx @@ -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('', () => { test('initially renders succesfully', () => { @@ -69,7 +69,7 @@ describe('', () => { }); 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( @@ -86,7 +86,7 @@ describe('', () => { 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( diff --git a/__tests__/qs.test.js b/__tests__/qs.test.js index d2f4c92985..2016f49b45 100644 --- a/__tests__/qs.test.js +++ b/__tests__/qs.test.js @@ -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); + }); }); }); diff --git a/src/App.jsx b/src/App.jsx index e8de658220..e4fdd54243 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -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 { } - toolbar={ + logo={} + toolbar={( - } + )} /> )} - sidebar={ + sidebar={( )} /> - } + )} > {render && render({ routeGroups })} diff --git a/src/components/AnsibleSelect/AnsibleSelect.jsx b/src/components/AnsibleSelect/AnsibleSelect.jsx index f3da0b4595..ffaae0461a 100644 --- a/src/components/AnsibleSelect/AnsibleSelect.jsx +++ b/src/components/AnsibleSelect/AnsibleSelect.jsx @@ -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 ( - - + {data.map((datum) => ( + ))} - ) - } - else { - return null; + ); + } else { + elem = null; } + + return elem; } } diff --git a/src/components/DataListToolbar/DataListToolbar.jsx b/src/components/DataListToolbar/DataListToolbar.jsx index 8ea46641a8..e296203da6 100644 --- a/src/components/DataListToolbar/DataListToolbar.jsx +++ b/src/components/DataListToolbar/DataListToolbar.jsx @@ -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`)} > - + diff --git a/src/components/ListItem/CheckboxListItem.jsx b/src/components/ListItem/CheckboxListItem.jsx index d27722af19..efd8c78912 100644 --- a/src/components/ListItem/CheckboxListItem.jsx +++ b/src/components/ListItem/CheckboxListItem.jsx @@ -11,24 +11,24 @@ export default ({ isSelected, onSelect, }) => ( -
  • -
    - - {({ i18n }) => ( - - )} - -
    -
    - -
    -
    • - ); +
  • +
    + + {({ i18n }) => ( + + )} + +
    +
    + +
    +
    • +); diff --git a/src/components/Lookup/Lookup.jsx b/src/components/Lookup/Lookup.jsx index 1f81d632f3..691c798350 100644 --- a/src/components/Lookup/Lookup.jsx +++ b/src/components/Lookup/Lookup.jsx @@ -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 ( - {tag.name}x - ) - }) + 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) => ( + + {tag.name} + + + )); + } + + render () { const { isModalOpen } = this.state; - const { data } = this.props; + const { data, lookupHeader } = this.props; return (
    - -
    {this.wrapTags(this.props.data)}
    + +
    {this.wrapTags(data)}
      - {data.map(i => + {data.map(i => ( - )} + ))}
    - + @@ -85,7 +93,7 @@ class Lookup extends React.Component {
    - ) + ); } } export default Lookup; diff --git a/src/components/Pagination/Pagination.jsx b/src/components/Pagination/Pagination.jsx index f7a6e4d461..6959fff17c 100644 --- a/src/components/Pagination/Pagination.jsx +++ b/src/components/Pagination/Pagination.jsx @@ -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 { - {itemMin} - {itemMax} of {count} + {`${itemMin} - ${itemMax} of ${count}`}
    @@ -187,7 +188,8 @@ class Pagination extends Component {
    - Page of {pageCount} + /> + {' of '} + {pageCount}
    diff --git a/src/components/Tabs/Tab.jsx b/src/components/Tabs/Tab.jsx index fdf9b60875..2b40bc1a3e 100644 --- a/src/components/Tabs/Tab.jsx +++ b/src/components/Tabs/Tab.jsx @@ -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 (
  • + replace={tab === currentTab} + > {children}
    • - ) -} + ); +}; export default Tab; diff --git a/src/components/Tabs/Tabs.jsx b/src/components/Tabs/Tabs.jsx index 2dae079219..91fd3e2bda 100644 --- a/src/components/Tabs/Tabs.jsx +++ b/src/components/Tabs/Tabs.jsx @@ -1,7 +1,6 @@ import React from 'react'; import './tabs.scss'; - const Tabs = ({ children, labelText }) => (
      diff --git a/src/context.jsx b/src/context.jsx index 446f82bd63..ab413dd313 100644 --- a/src/context.jsx +++ b/src/context.jsx @@ -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({}); diff --git a/src/index.jsx b/src/index.jsx index 1e9197ac0f..0a5ff2742a 100644 --- a/src/index.jsx +++ b/src/index.jsx @@ -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) { )} - , el); -}; + , el + ); +} main(ReactDOM.render, new APIClient(http)); diff --git a/src/pages/Organizations/components/OrganizationBreadcrumb.jsx b/src/pages/Organizations/components/OrganizationBreadcrumb.jsx index 96f668d83c..a8febba937 100644 --- a/src/pages/Organizations/components/OrganizationBreadcrumb.jsx +++ b/src/pages/Organizations/components/OrganizationBreadcrumb.jsx @@ -70,7 +70,6 @@ const OrganizationBreadcrumb = ({ parentObj, organization, currentTab, location ); } else { - breadcrumb = ( {generateCrumb(true)} diff --git a/src/pages/Organizations/screens/Organization/OrganizationEdit.jsx b/src/pages/Organizations/screens/Organization/OrganizationEdit.jsx index 13e5208bd6..e72b1eba39 100644 --- a/src/pages/Organizations/screens/Organization/OrganizationEdit.jsx +++ b/src/pages/Organizations/screens/Organization/OrganizationEdit.jsx @@ -8,18 +8,15 @@ import { Link } from 'react-router-dom'; -const OrganizationEdit = ({ match, parentBreadcrumbObj, organization }) => { - - return ( - - - edit view - - save/cancel and go back to view - - - - ); -}; +const OrganizationEdit = ({ match, parentBreadcrumbObj, organization }) => ( + + + edit view + + save/cancel and go back to view + + + +); export default OrganizationEdit; diff --git a/src/pages/Organizations/screens/OrganizationAdd.jsx b/src/pages/Organizations/screens/OrganizationAdd.jsx index 2d447d4b77..f94080236d 100644 --- a/src/pages/Organizations/screens/OrganizationAdd.jsx +++ b/src/pages/Organizations/screens/OrganizationAdd.jsx @@ -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} /> @@ -158,7 +161,7 @@ class OrganizationAdd extends React.Component { @@ -170,14 +173,14 @@ class OrganizationAdd extends React.Component { /> - {({ custom_virtualenvs }) => + {({ custom_virtualenvs }) => ( - } + )} @@ -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);