diff --git a/package-lock.json b/package-lock.json
index c346715216..3c0bf4de43 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1657,7 +1657,7 @@
},
"ansi-colors": {
"version": "1.1.0",
- "resolved": "http://registry.npmjs.org/ansi-colors/-/ansi-colors-1.1.0.tgz",
+ "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-1.1.0.tgz",
"integrity": "sha512-SFKX67auSNoVR38N3L+nvsPjOE0bybKTYbkf5tRvushrAPQ9V75huw0ZxBkKVeRU9kqH3d6HA4xTckbwZ4ixmA==",
"requires": {
"ansi-wrap": "^0.1.0"
@@ -2185,6 +2185,11 @@
"integrity": "sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0=",
"dev": true
},
+ "asap": {
+ "version": "2.0.6",
+ "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
+ "integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY="
+ },
"asn1": {
"version": "0.2.4",
"resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.4.tgz",
@@ -2567,12 +2572,12 @@
},
"babel-plugin-syntax-class-properties": {
"version": "6.13.0",
- "resolved": "http://registry.npmjs.org/babel-plugin-syntax-class-properties/-/babel-plugin-syntax-class-properties-6.13.0.tgz",
+ "resolved": "https://registry.npmjs.org/babel-plugin-syntax-class-properties/-/babel-plugin-syntax-class-properties-6.13.0.tgz",
"integrity": "sha1-1+sjt5oxf4VDlixQW4J8fWysJ94="
},
"babel-plugin-syntax-flow": {
"version": "6.18.0",
- "resolved": "http://registry.npmjs.org/babel-plugin-syntax-flow/-/babel-plugin-syntax-flow-6.18.0.tgz",
+ "resolved": "https://registry.npmjs.org/babel-plugin-syntax-flow/-/babel-plugin-syntax-flow-6.18.0.tgz",
"integrity": "sha1-TDqyCiryaqIM0lmVw5jE63AxDI0="
},
"babel-plugin-syntax-jsx": {
@@ -4140,6 +4145,15 @@
"sha.js": "^2.4.8"
}
},
+ "create-react-context": {
+ "version": "0.2.3",
+ "resolved": "https://registry.npmjs.org/create-react-context/-/create-react-context-0.2.3.tgz",
+ "integrity": "sha512-CQBmD0+QGgTaxDL3OX1IDXYqjkp2It4RIbcb99jS6AEg27Ga+a9G3JtK6SIu0HBwPLZlmwt9F7UwWA4Bn92Rag==",
+ "requires": {
+ "fbjs": "^0.8.0",
+ "gud": "^1.0.0"
+ }
+ },
"cross-spawn": {
"version": "5.1.0",
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-5.1.0.tgz",
@@ -4380,6 +4394,11 @@
"resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.3.tgz",
"integrity": "sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ="
},
+ "deepmerge": {
+ "version": "2.2.1",
+ "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-2.2.1.tgz",
+ "integrity": "sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA=="
+ },
"default-gateway": {
"version": "2.7.2",
"resolved": "https://registry.npmjs.org/default-gateway/-/default-gateway-2.7.2.tgz",
@@ -4711,7 +4730,7 @@
},
"readable-stream": {
"version": "2.3.6",
- "resolved": "http://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz",
+ "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz",
"integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==",
"requires": {
"core-util-is": "~1.0.0",
@@ -4852,7 +4871,6 @@
"version": "0.1.12",
"resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.12.tgz",
"integrity": "sha1-U4tm8+5izRq1HsMjgp0flIDHS+s=",
- "dev": true,
"requires": {
"iconv-lite": "~0.4.13"
}
@@ -5686,6 +5704,27 @@
"bser": "^2.0.0"
}
},
+ "fbjs": {
+ "version": "0.8.17",
+ "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-0.8.17.tgz",
+ "integrity": "sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90=",
+ "requires": {
+ "core-js": "^1.0.0",
+ "isomorphic-fetch": "^2.1.1",
+ "loose-envify": "^1.0.0",
+ "object-assign": "^4.1.0",
+ "promise": "^7.1.1",
+ "setimmediate": "^1.0.5",
+ "ua-parser-js": "^0.7.18"
+ },
+ "dependencies": {
+ "core-js": {
+ "version": "1.2.7",
+ "resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz",
+ "integrity": "sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY="
+ }
+ }
+ },
"fbjs-scripts": {
"version": "0.8.3",
"resolved": "https://registry.npmjs.org/fbjs-scripts/-/fbjs-scripts-0.8.3.tgz",
@@ -5736,7 +5775,7 @@
},
"readable-stream": {
"version": "2.3.6",
- "resolved": "http://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz",
+ "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz",
"integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==",
"requires": {
"core-util-is": "~1.0.0",
@@ -6001,6 +6040,22 @@
"mime-types": "^2.1.12"
}
},
+ "formik": {
+ "version": "1.5.1",
+ "resolved": "https://registry.npmjs.org/formik/-/formik-1.5.1.tgz",
+ "integrity": "sha512-FBWGBKQkcCE4d5b5l2fKccD9d1QxNxw/0bQTRvp3EjzA8Bnjmsm9H/Oy0375UA8P3FPmfJkF4cXLLdEqK7fP5A==",
+ "requires": {
+ "create-react-context": "^0.2.2",
+ "deepmerge": "^2.1.1",
+ "hoist-non-react-statics": "^2.5.5",
+ "lodash": "^4.17.11",
+ "lodash-es": "^4.17.11",
+ "prop-types": "^15.6.1",
+ "react-fast-compare": "^2.0.1",
+ "tiny-warning": "^1.0.2",
+ "tslib": "^1.9.3"
+ }
+ },
"forwarded": {
"version": "0.1.2",
"resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.1.2.tgz",
@@ -6831,6 +6886,11 @@
"integrity": "sha1-8QdIy+dq+WS3yWyTxrzCivEgwIE=",
"dev": true
},
+ "gud": {
+ "version": "1.0.0",
+ "resolved": "https://registry.npmjs.org/gud/-/gud-1.0.0.tgz",
+ "integrity": "sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw=="
+ },
"handle-thing": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.0.tgz",
@@ -8031,8 +8091,7 @@
"is-stream": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz",
- "integrity": "sha1-EtSj3U5o4Lec6428hBc66A2RykQ=",
- "dev": true
+ "integrity": "sha1-EtSj3U5o4Lec6428hBc66A2RykQ="
},
"is-string": {
"version": "1.0.4",
@@ -8103,6 +8162,15 @@
}
}
},
+ "isomorphic-fetch": {
+ "version": "2.2.1",
+ "resolved": "https://registry.npmjs.org/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz",
+ "integrity": "sha1-YRrhrPFPXoH3KVB0coGf6XM1WKk=",
+ "requires": {
+ "node-fetch": "^1.0.1",
+ "whatwg-fetch": ">=0.10.0"
+ }
+ },
"isstream": {
"version": "0.1.2",
"resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
@@ -9264,7 +9332,7 @@
},
"kind-of": {
"version": "1.1.0",
- "resolved": "http://registry.npmjs.org/kind-of/-/kind-of-1.1.0.tgz",
+ "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-1.1.0.tgz",
"integrity": "sha1-FAo9LUGjbS78+pN3tiwk+ElaXEQ="
},
"kleur": {
@@ -9358,6 +9426,11 @@
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.11.tgz",
"integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg=="
},
+ "lodash-es": {
+ "version": "4.17.11",
+ "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.11.tgz",
+ "integrity": "sha512-DHb1ub+rMjjrxqlB3H56/6MXtm1lSksDp2rA2cNWjG8mlDUYFhUj3Di2Zn5IwSU87xLv8tNIQ7sSwE/YOX/D/Q=="
+ },
"lodash.assign": {
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/lodash.assign/-/lodash.assign-4.2.0.tgz",
@@ -10117,7 +10190,6 @@
"version": "1.6.3",
"resolved": "http://registry.npmjs.org/node-fetch/-/node-fetch-1.6.3.tgz",
"integrity": "sha1-3CNO3WSJmC1Y6PDbT2lQKavNjAQ=",
- "dev": true,
"requires": {
"encoding": "^0.1.11",
"is-stream": "^1.0.1"
@@ -11305,6 +11377,14 @@
"integrity": "sha512-OE+a6vzqazc+K6LxJrX5UPyKFvGnL5CYmq2jFGNIBWHpc4QyE49/YOumcrpQFJpfejmvRtbJzgO1zPmMCqlbBg==",
"dev": true
},
+ "promise": {
+ "version": "7.3.1",
+ "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
+ "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==",
+ "requires": {
+ "asap": "~2.0.3"
+ }
+ },
"promise-inflight": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/promise-inflight/-/promise-inflight-1.0.1.tgz",
@@ -11554,6 +11634,11 @@
"scheduler": "^0.10.0"
}
},
+ "react-fast-compare": {
+ "version": "2.0.4",
+ "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
+ "integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw=="
+ },
"react-hot-loader": {
"version": "4.3.11",
"resolved": "https://registry.npmjs.org/react-hot-loader/-/react-hot-loader-4.3.11.tgz",
@@ -13014,8 +13099,7 @@
"setimmediate": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
- "integrity": "sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU=",
- "dev": true
+ "integrity": "sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU="
},
"setprototypeof": {
"version": "1.1.0",
@@ -13939,6 +14023,11 @@
"setimmediate": "^1.0.4"
}
},
+ "tiny-warning": {
+ "version": "1.0.2",
+ "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.2.tgz",
+ "integrity": "sha512-rru86D9CpQRLvsFG5XFdy0KdLAvjdQDyZCsRcuu60WtzFylDM3eAWSxEVz5kzL2Gp544XiUvPbVKtOA/txLi9Q=="
+ },
"tippy.js": {
"version": "3.4.1",
"resolved": "https://registry.npmjs.org/tippy.js/-/tippy.js-3.4.1.tgz",
@@ -14111,8 +14200,7 @@
"tslib": {
"version": "1.9.3",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.9.3.tgz",
- "integrity": "sha512-4krF8scpejhaOgqzBEcGM7yDIEfi0/8+8zDRZhNZZ2kjmHJ4hv3zCbQWxoJGz1iw5U0Jl0nma13xzHXcncMavQ==",
- "dev": true
+ "integrity": "sha512-4krF8scpejhaOgqzBEcGM7yDIEfi0/8+8zDRZhNZZ2kjmHJ4hv3zCbQWxoJGz1iw5U0Jl0nma13xzHXcncMavQ=="
},
"tty-browserify": {
"version": "0.0.0",
@@ -14163,6 +14251,11 @@
"integrity": "sha512-Gr4p6nFNaoufRIY4NMdpQRNmgxVIGMs4Fcu/ujdYk3nAZqk7supzBE9idmvfZIlH/Cuj//dvi+019qEue9lV0w==",
"dev": true
},
+ "ua-parser-js": {
+ "version": "0.7.19",
+ "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.19.tgz",
+ "integrity": "sha512-T3PVJ6uz8i0HzPxOF9SWzWAlfN/DavlpQqepn22xgve/5QecC+XMCAtmUNnY7C9StehaV6exjUCI801lOI7QlQ=="
+ },
"uglify-js": {
"version": "3.4.9",
"resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.4.9.tgz",
@@ -15562,6 +15655,11 @@
"iconv-lite": "0.4.24"
}
},
+ "whatwg-fetch": {
+ "version": "3.0.0",
+ "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-3.0.0.tgz",
+ "integrity": "sha512-9GSJUgz1D4MfyKU7KRqwOjXCXTqWdFNvEr7eUBYchQiVc744mqK/MzXPNR2WsPkmkOa4ywfg8C2n8h+13Bey1Q=="
+ },
"whatwg-mimetype": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-2.2.0.tgz",
diff --git a/package.json b/package.json
index 61c168857b..c6ff3dabca 100644
--- a/package.json
+++ b/package.json
@@ -52,6 +52,7 @@
"@patternfly/react-icons": "^3.5.0",
"@patternfly/react-tokens": "^2.0.4",
"axios": "^0.18.0",
+ "formik": "^1.5.1",
"prop-types": "^15.6.2",
"react": "^16.4.1",
"react-dom": "^16.4.1",
diff --git a/src/components/AnsibleSelect/AnsibleSelect.jsx b/src/components/AnsibleSelect/AnsibleSelect.jsx
index 90e1fddccc..c4de1c51e7 100644
--- a/src/components/AnsibleSelect/AnsibleSelect.jsx
+++ b/src/components/AnsibleSelect/AnsibleSelect.jsx
@@ -16,7 +16,7 @@ class AnsibleSelect extends React.Component {
onSelectChange (val, event) {
const { onChange, name } = this.props;
event.target.name = name;
- onChange(val, event);
+ onChange(event, val);
}
render () {
@@ -24,10 +24,22 @@ class AnsibleSelect extends React.Component {
return (
{({ i18n }) => (
-
- {data.map((datum) => (datum === defaultSelected
- ? () : ()))
- }
+
+ {data.map((datum) => (
+ datum === defaultSelected ? (
+
+ ) : (
+
+ )
+ ))}
)}
diff --git a/src/components/FormActionGroup.jsx b/src/components/FormActionGroup.jsx
index 451987e847..675633163e 100644
--- a/src/components/FormActionGroup.jsx
+++ b/src/components/FormActionGroup.jsx
@@ -28,10 +28,10 @@ const FormActionGroup = ({ onSubmit, submitDisabled, onCancel }) => (
-
+
-
+
diff --git a/src/components/FormField.jsx b/src/components/FormField.jsx
new file mode 100644
index 0000000000..177f8eeaa1
--- /dev/null
+++ b/src/components/FormField.jsx
@@ -0,0 +1,56 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Field } from 'formik';
+import { FormGroup, TextInput } from '@patternfly/react-core';
+
+function FormField (props) {
+ const { id, name, label, validate, isRequired, ...rest } = props;
+
+ return (
+ {
+ const isValid = !form.touched[field.name] || !form.errors[field.name];
+
+ return (
+
+ {
+ field.onChange(event);
+ }}
+ />
+
+ );
+ }}
+ />
+ );
+}
+
+FormField.propTypes = {
+ id: PropTypes.string.isRequired,
+ name: PropTypes.string.isRequired,
+ label: PropTypes.string.isRequired,
+ type: PropTypes.string,
+ validate: PropTypes.func,
+ isRequired: PropTypes.bool,
+};
+
+FormField.defaultProps = {
+ type: 'text',
+ validate: () => {},
+ isRequired: false,
+};
+
+export default FormField;
diff --git a/src/pages/Organizations/screens/Organization/OrganizationEdit.jsx b/src/pages/Organizations/screens/Organization/OrganizationEdit.jsx
index c8e22a4542..38d1c255bc 100644
--- a/src/pages/Organizations/screens/Organization/OrganizationEdit.jsx
+++ b/src/pages/Organizations/screens/Organization/OrganizationEdit.jsx
@@ -1,27 +1,35 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { withRouter } from 'react-router-dom';
+import { Formik, Field } from 'formik';
import { I18n, i18nMark } from '@lingui/react';
import { t } from '@lingui/macro';
import {
CardBody,
Form,
FormGroup,
- TextInput,
} from '@patternfly/react-core';
import { ConfigContext } from '../../../../context';
+import FormField from '../../../../components/FormField';
import FormActionGroup from '../../../../components/FormActionGroup';
import AnsibleSelect from '../../../../components/AnsibleSelect';
import InstanceGroupsLookup from '../../components/InstanceGroupsLookup';
+function required (message) {
+ return value => {
+ if (!value.trim()) {
+ return message || i18nMark('This field must not be blank');
+ }
+ return undefined;
+ };
+}
+
class OrganizationEdit extends Component {
constructor (props) {
super(props);
this.getRelatedInstanceGroups = this.getRelatedInstanceGroups.bind(this);
- this.checkValidity = this.checkValidity.bind(this);
- this.handleFieldChange = this.handleFieldChange.bind(this);
this.handleInstanceGroupsChange = this.handleInstanceGroupsChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
this.postInstanceGroups = this.postInstanceGroups.bind(this);
@@ -29,48 +37,25 @@ class OrganizationEdit extends Component {
this.handleSuccess = this.handleSuccess.bind(this);
this.state = {
- form: {
- name: {
- value: '',
- isValid: true,
- validation: {
- required: true
- },
- helperTextInvalid: i18nMark('This field must not be blank')
- },
- description: {
- value: ''
- },
- instanceGroups: {
- value: [],
- initialValue: []
- },
- custom_virtualenv: {
- value: '',
- defaultValue: '/venv/ansible/'
- }
- },
+ initialInstanceGroups: [],
+ instanceGroups: [],
error: '',
- formIsValid: true
+ formIsValid: true,
};
}
async componentDidMount () {
- const { organization } = this.props;
- const { form: formData } = this.state;
-
- formData.name.value = organization.name;
- formData.description.value = organization.description;
- formData.custom_virtualenv.value = organization.custom_virtualenv;
-
+ let instanceGroups;
try {
- formData.instanceGroups.value = await this.getRelatedInstanceGroups();
- formData.instanceGroups.initialValue = [...formData.instanceGroups.value];
+ instanceGroups = await this.getRelatedInstanceGroups();
} catch (err) {
this.setState({ error: err });
}
- this.setState({ form: formData });
+ this.setState({
+ instanceGroups,
+ initialInstanceGroups: instanceGroups,
+ });
}
async getRelatedInstanceGroups () {
@@ -79,56 +64,19 @@ class OrganizationEdit extends Component {
organization: { id }
} = this.props;
const { data } = await api.getOrganizationInstanceGroups(id);
- const { results } = data;
- return results;
+ return data.results;
}
- checkValidity = (value, validation) => {
- const isValid = (validation.required)
- ? (value.trim() !== '') : true;
-
- return isValid;
+ handleInstanceGroupsChange (instanceGroups) {
+ this.setState({ instanceGroups });
}
- handleFieldChange (val, evt) {
- const targetName = evt.target.name;
- const value = val;
-
- const { form: updatedForm } = this.state;
- const updatedFormEl = { ...updatedForm[targetName] };
-
- updatedFormEl.value = value;
- updatedForm[targetName] = updatedFormEl;
-
- updatedFormEl.isValid = (updatedFormEl.validation)
- ? this.checkValidity(updatedFormEl.value, updatedFormEl.validation) : true;
-
- const formIsValid = (updatedFormEl.validation) ? updatedFormEl.isValid : true;
-
- this.setState({ form: updatedForm, formIsValid });
- }
-
- handleInstanceGroupsChange (val, targetName) {
- const { form: updatedForm } = this.state;
- updatedForm[targetName].value = val;
-
- this.setState({ form: updatedForm });
- }
-
- async handleSubmit () {
+ async handleSubmit (values) {
const { api, organization } = this.props;
- const { form: { name, description, custom_virtualenv } } = this.state;
- const formData = { name, description, custom_virtualenv };
-
- const updatedData = {};
- Object.keys(formData)
- .forEach(formId => {
- updatedData[formId] = formData[formId].value;
- });
-
+ const { instanceGroups } = this.state;
try {
- await api.updateOrganizationDetails(organization.id, updatedData);
- await this.postInstanceGroups();
+ await api.updateOrganizationDetails(organization.id, values);
+ await this.postInstanceGroups(instanceGroups);
} catch (err) {
this.setState({ error: err });
} finally {
@@ -146,18 +94,18 @@ class OrganizationEdit extends Component {
history.push(`/organizations/${id}`);
}
- async postInstanceGroups () {
+ async postInstanceGroups (instanceGroups) {
const { api, organization } = this.props;
- const { form: { instanceGroups } } = this.state;
+ const { initialInstanceGroups } = this.state;
const url = organization.related.instance_groups;
- const initialInstanceGroups = instanceGroups.initialValue.map(ig => ig.id);
- const updatedInstanceGroups = instanceGroups.value.map(ig => ig.id);
+ const initialIds = initialInstanceGroups.map(ig => ig.id);
+ const updatedIds = instanceGroups.map(ig => ig.id);
- const groupsToAssociate = [...updatedInstanceGroups]
- .filter(x => !initialInstanceGroups.includes(x));
- const groupsToDisassociate = [...initialInstanceGroups]
- .filter(x => !updatedInstanceGroups.includes(x));
+ const groupsToAssociate = [...updatedIds]
+ .filter(x => !initialIds.includes(x));
+ const groupsToDisassociate = [...initialIds]
+ .filter(x => !updatedIds.includes(x));
try {
await Promise.all(groupsToAssociate.map(async id => {
@@ -172,83 +120,85 @@ class OrganizationEdit extends Component {
}
render () {
- const { api } = this.props;
+ const { api, organization } = this.props;
const {
- form: {
- name,
- description,
- instanceGroups,
- custom_virtualenv
- },
+ instanceGroups,
formIsValid,
- error
+ error,
} = this.state;
+ const defaultVenv = '/venv/ansible/';
return (
{({ i18n }) => (
-
+ { error ? error
: '' }
+
+ )}
+ />
)}