Added 'Max Hosts' field in the Add/Edit Organization view

* max hosts field is enabled is user is superuser, otherwise it is disabled and default is 0
 * OrganizationForm tests added for max hosts input
 * minMaxValue added in validators to validate user input for max hosts

Signed-off-by: catjones9 <catjones@redhat.com>

__tests__/pages/Organizations/components/OrganizationForm.test.jsx

@@ -8,11 +8,16 @@ jest.mock('../../../../src/api');
 
 describe('<OrganizationForm />', () => {
   const network = {};
-
+  const meConfig = {
+    me: {
+      is_superuser: false
+    }
+  };
   const mockData = {
     id: 1,
     name: 'Foo',
     description: 'Bar',
+    max_hosts: 1,
     custom_virtualenv: 'Fizz',
     related: {
       instance_groups: '/api/v2/organizations/1/instance_groups'
@@ -30,6 +35,7 @@ describe('<OrganizationForm />', () => {
           organization={mockData}
           handleSubmit={jest.fn()}
           handleCancel={jest.fn()}
+          me={meConfig.me}
         />
       ), {
         context: { network },
@@ -55,6 +61,7 @@ describe('<OrganizationForm />', () => {
           organization={mockData}
           handleSubmit={jest.fn()}
           handleCancel={jest.fn()}
+          me={meConfig.me}
         />
       ), {
         context: { network },
@@ -72,6 +79,7 @@ describe('<OrganizationForm />', () => {
         organization={mockData}
         handleSubmit={jest.fn()}
         handleCancel={jest.fn()}
+        me={meConfig.me}
       />
     );
 
@@ -98,6 +106,7 @@ describe('<OrganizationForm />', () => {
         organization={mockData}
         handleSubmit={jest.fn()}
         handleCancel={jest.fn()}
+        me={meConfig.me}
       />
     );
 
@@ -110,6 +119,10 @@ describe('<OrganizationForm />', () => {
       target: { value: 'new bar', name: 'description' }
     });
     expect(form.state('values').description).toEqual('new bar');
+    wrapper.find('input#org-max_hosts').simulate('change', {
+      target: { value: '134', name: 'max_hosts' }
+    });
+    expect(form.state('values').max_hosts).toEqual('134');
   });
 
   test('AnsibleSelect component renders if there are virtual environments', () => {
@@ -122,6 +135,7 @@ describe('<OrganizationForm />', () => {
           organization={mockData}
           handleSubmit={jest.fn()}
           handleCancel={jest.fn()}
+          me={meConfig.me}
         />
       ), {
         context: { config },
@@ -138,6 +152,7 @@ describe('<OrganizationForm />', () => {
         organization={mockData}
         handleSubmit={handleSubmit}
         handleCancel={jest.fn()}
+        me={meConfig.me}
       />
     );
     expect(handleSubmit).not.toHaveBeenCalled();
@@ -146,6 +161,7 @@ describe('<OrganizationForm />', () => {
     expect(handleSubmit).toHaveBeenCalledWith({
       name: 'Foo',
       description: 'Bar',
+      max_hosts: 1,
       custom_virtualenv: 'Fizz',
     }, [], []);
   });
@@ -163,6 +179,7 @@ describe('<OrganizationForm />', () => {
     const mockDataForm = {
       name: 'Foo',
       description: 'Bar',
+      max_hosts: 1,
       custom_virtualenv: 'Fizz',
     };
     const handleSubmit = jest.fn();
@@ -175,14 +192,13 @@ describe('<OrganizationForm />', () => {
           organization={mockData}
           handleSubmit={handleSubmit}
           handleCancel={jest.fn()}
+          me={meConfig.me}
         />
       ), {
-        context: { network },
+        context: { network }
       }
     );
-
     await sleep(0);
-
     wrapper.find('InstanceGroupsLookup').prop('onChange')([
       { name: 'One', id: 1 },
       { name: 'Three', id: 3 }
@@ -193,13 +209,95 @@ describe('<OrganizationForm />', () => {
     expect(handleSubmit).toHaveBeenCalledWith(mockDataForm, [3], [2]);
   });
 
+  test('handleSubmit is called with max_hosts value if it is in range', async () => {
+    const handleSubmit = jest.fn();
+
+    // normal mount
+    const wrapper = mountWithContexts(
+      <OrganizationForm
+        organization={mockData}
+        handleSubmit={handleSubmit}
+        handleCancel={jest.fn()}
+        me={meConfig.me}
+      />
+    );
+    wrapper.find('button[aria-label="Save"]').simulate('click');
+    await sleep(0);
+    expect(handleSubmit).toHaveBeenCalledWith({
+      name: 'Foo',
+      description: 'Bar',
+      max_hosts: 1,
+      custom_virtualenv: 'Fizz',
+    }, [], []);
+  });
+
+  test('handleSubmit does not get called if max_hosts value is out of range', async () => {
+    const handleSubmit = jest.fn();
+
+    // not mount with Negative value
+    const mockDataNegative = JSON.parse(JSON.stringify(mockData));
+    mockDataNegative.max_hosts = -5;
+    const wrapper1 = mountWithContexts(
+      <OrganizationForm
+        organization={mockDataNegative}
+        handleSubmit={handleSubmit}
+        handleCancel={jest.fn()}
+        me={meConfig.me}
+      />
+    );
+    wrapper1.find('button[aria-label="Save"]').simulate('click');
+    await sleep(0);
+    expect(handleSubmit).not.toHaveBeenCalled();
+
+    // not mount with Out of Range value
+    const mockDataOoR = JSON.parse(JSON.stringify(mockData));
+    mockDataOoR.max_hosts = 999999999999;
+    const wrapper2 = mountWithContexts(
+      <OrganizationForm
+        organization={mockDataOoR}
+        handleSubmit={handleSubmit}
+        handleCancel={jest.fn()}
+        me={meConfig.me}
+      />
+    );
+    wrapper2.find('button[aria-label="Save"]').simulate('click');
+    await sleep(0);
+    expect(handleSubmit).not.toHaveBeenCalled();
+  });
+
+  test('handleSubmit is called and max_hosts value defaults to 0 if input is not a number', async () => {
+    const handleSubmit = jest.fn();
+
+    // mount with String value (default to zero)
+    const mockDataString = JSON.parse(JSON.stringify(mockData));
+    mockDataString.max_hosts = 'Bee';
+    const wrapper = mountWithContexts(
+      <OrganizationForm
+        organization={mockDataString}
+        handleSubmit={handleSubmit}
+        handleCancel={jest.fn()}
+        me={meConfig.me}
+      />
+    );
+    wrapper.find('button[aria-label="Save"]').simulate('click');
+    await sleep(0);
+    expect(handleSubmit).toHaveBeenCalledWith({
+      name: 'Foo',
+      description: 'Bar',
+      max_hosts: 0,
+      custom_virtualenv: 'Fizz',
+    }, [], []);
+  });
+
   test('calls "handleCancel" when Cancel button is clicked', () => {
     const handleCancel = jest.fn();
+
     const wrapper = mountWithContexts(
       <OrganizationForm
         organization={mockData}
         handleSubmit={jest.fn()}
         handleCancel={handleCancel}
+        me={meConfig.me}
       />
     );
     expect(handleCancel).not.toHaveBeenCalled();

__tests__/pages/Organizations/screens/Organization/OrganizationDetail.test.jsx

@@ -10,6 +10,7 @@ describe('<OrganizationDetail />', () => {
     name: 'Foo',
     description: 'Bar',
     custom_virtualenv: 'Fizz',
+    max_hosts: '0',
     created: 'Bat',
     modified: 'Boo',
     summary_fields: {
@@ -71,11 +72,12 @@ describe('<OrganizationDetail />', () => {
     );
 
     const detailWrapper = wrapper.find('Detail');
-    expect(detailWrapper.length).toBe(5);
+    expect(detailWrapper.length).toBe(6);
 
     const nameDetail = detailWrapper.findWhere(node => node.props().label === 'Name');
     const descriptionDetail = detailWrapper.findWhere(node => node.props().label === 'Description');
     const custom_virtualenvDetail = detailWrapper.findWhere(node => node.props().label === 'Ansible Environment');
+    const max_hostsDetail = detailWrapper.findWhere(node => node.props().label === 'Max Hosts');
     const createdDetail = detailWrapper.findWhere(node => node.props().label === 'Created');
     const modifiedDetail = detailWrapper.findWhere(node => node.props().label === 'Last Modified');
     expect(nameDetail.find('dt').text()).toBe('Name');
@@ -92,6 +94,9 @@ describe('<OrganizationDetail />', () => {
 
     expect(modifiedDetail.find('dt').text()).toBe('Last Modified');
     expect(modifiedDetail.find('dd').text()).toBe('Boo');
+
+    expect(max_hostsDetail.find('dt').text()).toBe('Max Hosts');
+    expect(max_hostsDetail.find('dd').text()).toBe('0');
   });
 
   test('should show edit button for users with edit permission', () => {

src/pages/Organizations/components/OrganizationForm.jsx

@@ -6,6 +6,7 @@ import { withRouter } from 'react-router-dom';
 import { Formik, Field } from 'formik';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
+
 import {
   Tooltip,
   Form,
@@ -19,7 +20,7 @@ import FormField from '../../../components/FormField';
 import FormActionGroup from '../../../components/FormActionGroup/FormActionGroup';
 import AnsibleSelect from '../../../components/AnsibleSelect';
 import InstanceGroupsLookup from './InstanceGroupsLookup';
-
+import { OrganizationsAPI } from '../../../api';
 import { required, minMaxValue } from '../../../util/validators';
 
 class OrganizationForm extends Component {
@@ -28,9 +29,7 @@ class OrganizationForm extends Component {
 
     this.getRelatedInstanceGroups = this.getRelatedInstanceGroups.bind(this);
     this.handleInstanceGroupsChange = this.handleInstanceGroupsChange.bind(this);
-    this.maxHostsChange = this.maxHostsChange.bind(this);
     this.handleSubmit = this.handleSubmit.bind(this);
-    this.readUsers = this.readUsers.bind(this);
 
     this.state = {
       instanceGroups: [],
@@ -64,14 +63,6 @@ class OrganizationForm extends Component {
     return data.results;
   }
 
-  async readUsers (queryParams) {
-    const { api } = this.props;
-    console.log(api.readUsers((queryParams, is_superuser)));
-    console.log(api.readUsers((queryParams)));
-    return true;
-   // return api.readUsers((queryParams));
-  }
-
   isEditingNewOrganization () {
     const { organization } = this.props;
     return !organization.id;
@@ -81,10 +72,6 @@ class OrganizationForm extends Component {
     this.setState({ instanceGroups });
   }
 
-  maxHostsChange (event) {
-    console.log('boop');
-  }
-
   handleSubmit (values) {
     const { handleSubmit } = this.props;
     const { instanceGroups, initialInstanceGroups } = this.state;
@@ -96,23 +83,25 @@ class OrganizationForm extends Component {
     const groupsToDisassociate = [...initialIds]
       .filter(x => !updatedIds.includes(x));
 
+    if (typeof values.max_hosts !== 'number' || values.max_hosts === 'undefined') {
+      values.max_hosts = 0;
+    }
+
     handleSubmit(values, groupsToAssociate, groupsToDisassociate);
   }
 
   render () {
-    const { organization, handleCancel, i18n, is_superuser } = this.props;
+    const { organization, handleCancel, i18n, me } = this.props;
     const { instanceGroups, formIsValid, error } = this.state;
     const defaultVenv = '/venv/ansible/';
 
-    console.log(organization);
-
     return (
       <Formik
         initialValues={{
           name: organization.name,
           description: organization.description,
           custom_virtualenv: organization.custom_virtualenv || '',
-          max_hosts: organization.max_hosts || 0
+          max_hosts: organization.max_hosts || '0',
         }}
         onSubmit={this.handleSubmit}
         render={formik => (
@@ -136,25 +125,26 @@ class OrganizationForm extends Component {
                 id="org-max_hosts"
                 name="max_hosts"
                 type="number"
-                label={<Fragment>
+                label={
-                    {i18n._(t`Max Hosts`)}
+                  (
+                    <Fragment>
+                      {i18n._(t`Max Hosts`)}
                       {' '}
                       {(
-                          <Tooltip
+                        <Tooltip
-                            position="right"
+                          position="right"
-                            content="The maximum number of hosts allowed to be managed by this organization. Value defaults to 0 which means no limit. Refer to the Ansible documentation for more details."
+                          content="The maximum number of hosts allowed to be managed by this organization. Value defaults to 0 which means no limit. Refer to the Ansible documentation for more details."
-                          >
+                        >
-                            <QuestionCircleIcon />
+                          <QuestionCircleIcon />
-                          </Tooltip>
+                        </Tooltip>
-                        )
+                      )}
-                      }
+                    </Fragment>
-                    </Fragment>}
+                  )
+                }
                 validate={minMaxValue(0, 2147483647, i18n)}
-                onChange={(evt) => this.maxHostsChange(evt)}
+                me={me || {}}
-                // isDisabled={!is_superuser + console.log(is_superuser)}
+                isDisabled={!me.is_superuser}
-                // isDisabled={this.readUsers}
+              />
-                isDisabled={this.readUsers? true: false}
-            />
               <Config>
                 {({ custom_virtualenvs }) => (
                   custom_virtualenvs && custom_virtualenvs.length > 1 && (
@@ -197,20 +187,14 @@ class OrganizationForm extends Component {
 }
 
 FormField.propTypes = {
-  //consider changing this in FormField.jsx, as many fields may need tooltips in the label
+  label: PropTypes.oneOfType([PropTypes.object, PropTypes.string]).isRequired
-  label: PropTypes.oneOfType ([
+};
-    PropTypes.object, 
-    PropTypes.string
-  ])
-}
-
-console.log()
 
 OrganizationForm.propTypes = {
   organization: PropTypes.shape(),
   handleSubmit: PropTypes.func.isRequired,
   handleCancel: PropTypes.func.isRequired,
-  };
+};
 
 OrganizationForm.defaultProps = {
   organization: {
@@ -218,7 +202,7 @@ OrganizationForm.defaultProps = {
     description: '',
     max_hosts: '0',
     custom_virtualenv: '',
-  }
+  },
 };
 
 OrganizationForm.contextTypes = {

src/pages/Organizations/screens/Organization/OrganizationDetail.jsx

@@ -78,7 +78,7 @@ class OrganizationDetail extends Component {
           />
           <Detail
             label={i18n._(t`Max Hosts`)}
-            value={''+max_hosts}
+            value={`${max_hosts}`}
           />
           <Detail
             label={i18n._(t`Ansible Environment`)}

src/pages/Organizations/screens/Organization/OrganizationEdit.jsx

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { withRouter } from 'react-router-dom';
 import { CardBody } from '@patternfly/react-core';
 import OrganizationForm from '../../components/OrganizationForm';
+import { Config } from '../../../../contexts/Config';
 import { withNetwork } from '../../../../contexts/Network';
 import { OrganizationsAPI } from '../../../../api';
 
@@ -64,11 +65,16 @@ class OrganizationEdit extends Component {
 
     return (
       <CardBody>
-        <OrganizationForm
+        <Config>
-          organization={organization}
+          {({ me }) => (
-          handleSubmit={this.handleSubmit}
+            <OrganizationForm
-          handleCancel={this.handleCancel}
+              organization={organization}
-        />
+              handleSubmit={this.handleSubmit}
+              handleCancel={this.handleCancel}
+              me={me || {}}
+            />
+          )}
+        </Config>
         {error ? <div>error</div> : null}
       </CardBody>
     );

src/pages/Organizations/screens/OrganizationAdd.jsx

@@ -11,6 +11,7 @@ import {
   Tooltip,
 } from '@patternfly/react-core';
 
+import { Config } from '../../../contexts/Config';
 import { withNetwork } from '../../../contexts/Network';
 import CardCloseButton from '../../../components/CardCloseButton';
 import OrganizationForm from '../components/OrganizationForm';
@@ -71,10 +72,15 @@ class OrganizationAdd extends React.Component {
             </Tooltip>
           </CardHeader>
           <CardBody>
-            <OrganizationForm
+            <Config>
-              handleSubmit={this.handleSubmit}
+              {({ me }) => (
-              handleCancel={this.handleCancel}
+                <OrganizationForm
-            />
+                  handleSubmit={this.handleSubmit}
+                  handleCancel={this.handleCancel}
+                  me={me || {}}
+                />
+              )}
+            </Config>
             {error ? <div>error</div> : ''}
           </CardBody>
         </Card>

src/util/validators.jsx

@@ -21,7 +21,7 @@ export function maxLength (max, i18n) {
 
 export function minMaxValue (min, max, i18n) {
   return value => {
-    if (typeof value !== 'number' || value > max || value < min) {
+    if (value < min || value > max) {
       return i18n._(t`This field must be a number and have a value between ${min} and ${max}`);
     }
     return undefined;