diff --git a/__tests__/pages/Organizations/screens/Organization/OrganizationEdit.test.jsx b/__tests__/pages/Organizations/screens/Organization/OrganizationEdit.test.jsx index 3ae7f51260..0727033c21 100644 --- a/__tests__/pages/Organizations/screens/Organization/OrganizationEdit.test.jsx +++ b/__tests__/pages/Organizations/screens/Organization/OrganizationEdit.test.jsx @@ -3,7 +3,6 @@ import { mount } from 'enzyme'; import { MemoryRouter } from 'react-router-dom'; import { I18nProvider } from '@lingui/react'; import { ConfigContext } from '../../../../../src/context'; -import APIClient from '../../../../../src/api'; import OrganizationEdit from '../../../../../src/pages/Organizations/screens/Organization/OrganizationEdit'; describe('', () => { diff --git a/src/pages/Organizations/components/InstanceGroupsLookup.jsx b/src/pages/Organizations/components/InstanceGroupsLookup.jsx new file mode 100644 index 0000000000..3edcd13cd1 --- /dev/null +++ b/src/pages/Organizations/components/InstanceGroupsLookup.jsx @@ -0,0 +1,74 @@ +import React, { Fragment } from 'react'; +import PropTypes from 'prop-types'; +import { I18n, i18nMark } from '@lingui/react'; +import { FormGroup, Tooltip } from '@patternfly/react-core'; +import { QuestionCircleIcon } from '@patternfly/react-icons'; +import { t } from '@lingui/macro'; + +import Lookup from '../../../components/Lookup'; + +const INSTANCE_GROUPS_LOOKUP_COLUMNS = [ + { name: i18nMark('Name'), key: 'name', isSortable: true }, + { name: i18nMark('Modified'), key: 'modified', isSortable: false, isNumeric: true }, + { name: i18nMark('Created'), key: 'created', isSortable: false, isNumeric: true } +]; + +class InstanceGroupsLookup extends React.Component { + constructor (props) { + super(props); + + this.getInstanceGroups = this.getInstanceGroups.bind(this); + } + + async getInstanceGroups (params) { + const { api } = this.props; + const data = await api.getInstanceGroups(params); + return data; + } + + render () { + const { value, onChange } = this.props; + + return ( + + {({ i18n }) => ( + + {i18n._(t`Instance Groups`)} + {' '} + + + + + )} + fieldId="add-org-form-instance-groups" + > + + + )} + + ); + } +} + +InstanceGroupsLookup.propTypes = { + api: PropTypes.shape({ + getInstanceGroups: PropTypes.func, + }).isRequired, + value: PropTypes.arrayOf(PropTypes.object).isRequired, + onChange: PropTypes.func.isRequired, +}; + +export default InstanceGroupsLookup; diff --git a/src/pages/Organizations/screens/Organization/OrganizationEdit.jsx b/src/pages/Organizations/screens/Organization/OrganizationEdit.jsx index 0560b588c5..70d620c075 100644 --- a/src/pages/Organizations/screens/Organization/OrganizationEdit.jsx +++ b/src/pages/Organizations/screens/Organization/OrganizationEdit.jsx @@ -11,15 +11,14 @@ import { } from '@patternfly/react-core'; import { ConfigContext } from '../../../../context'; -import Lookup from '../../../../components/Lookup'; import FormActionGroup from '../../../../components/FormActionGroup'; import AnsibleSelect from '../../../../components/AnsibleSelect'; +import InstanceGroupsLookup from '../../components/InstanceGroupsLookup'; class OrganizationEdit extends Component { constructor (props) { super(props); - this.getInstanceGroups = this.getInstanceGroups.bind(this); this.getRelatedInstanceGroups = this.getRelatedInstanceGroups.bind(this); this.checkValidity = this.checkValidity.bind(this); this.onFieldChange = this.onFieldChange.bind(this); @@ -130,12 +129,6 @@ class OrganizationEdit extends Component { history.push(`/organizations/${id}`); } - async getInstanceGroups (params) { - const { api } = this.props; - const data = await api.getInstanceGroups(params); - return data; - } - async getRelatedInstanceGroups () { const { api, @@ -179,6 +172,7 @@ class OrganizationEdit extends Component { } render () { + const { api } = this.props; const { form: { name, @@ -190,12 +184,6 @@ class OrganizationEdit extends Component { error } = this.state; - const instanceGroupsLookupColumns = [ - { name: i18nMark('Name'), key: 'name', isSortable: true }, - { name: i18nMark('Modified'), key: 'modified', isSortable: false, isNumeric: true }, - { name: i18nMark('Created'), key: 'created', isSortable: false, isNumeric: true } - ]; - return ( @@ -249,20 +237,11 @@ class OrganizationEdit extends Component { )} - - - + 0; // TODO: add better form validation - const instanceGroupsLookupColumns = [ - { name: i18nMark('Name'), key: 'name', isSortable: true }, - { name: i18nMark('Modified'), key: 'modified', isSortable: false, isNumeric: true }, - { name: i18nMark('Created'), key: 'created', isSortable: false, isNumeric: true } - ]; return ( @@ -153,31 +142,11 @@ class OrganizationAdd extends React.Component { onChange={this.onFieldChange} /> - - {i18n._(t`Instance Groups`)} - {' '} - - - - - )} - fieldId="add-org-form-instance-groups" - > - - + {({ custom_virtualenvs }) => ( custom_virtualenvs && custom_virtualenvs.length > 1 && (