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>

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>
-                    {i18n._(t`Max Hosts`)}
+                label={
+                  (
+                    <Fragment>
+                      {i18n._(t`Max Hosts`)}
                       {' '}
                       {(
-                          <Tooltip
-                            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."
-                          >
-                            <QuestionCircleIcon />
-                          </Tooltip>
-                        )
-                      }
-                    </Fragment>}
+                        <Tooltip
+                          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."
+                        >
+                          <QuestionCircleIcon />
+                        </Tooltip>
+                      )}
+                    </Fragment>
+                  )
+                }
                 validate={minMaxValue(0, 2147483647, i18n)}
-                onChange={(evt) => this.maxHostsChange(evt)}
-                // isDisabled={!is_superuser + console.log(is_superuser)}
-                // isDisabled={this.readUsers}
-                isDisabled={this.readUsers? true: false}
-            />
+                me={me || {}}
+                isDisabled={!me.is_superuser}
+              />
               <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
-  ])
-}
-
-console.log()
+  label: PropTypes.oneOfType([PropTypes.object, PropTypes.string]).isRequired
+};
 
 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
-          organization={organization}
-          handleSubmit={this.handleSubmit}
-          handleCancel={this.handleCancel}
-        />
+        <Config>
+          {({ me }) => (
+            <OrganizationForm
+              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
-              handleSubmit={this.handleSubmit}
-              handleCancel={this.handleCancel}
-            />
+            <Config>
+              {({ me }) => (
+                <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;