mirror of
https://github.com/ansible/awx.git
synced 2026-01-22 06:58:06 -03:30
rework org edit form to use Formik
This commit is contained in:
Keith Grant
parent
02cd188c2f
commit
40b2539626
126
package-lock.json
generated
126
package-lock.json
generated
@ -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",
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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>
|
||||
{({ i18n }) => (
|
||||
<FormSelect value={value} onChange={this.onSelectChange} aria-label={i18n._(t`Select Input`)}>
|
||||
{data.map((datum) => (datum === defaultSelected
|
||||
? (<FormSelectOption key="" value="" label={i18n._(t`Use Default ${label}`)} />) : (<FormSelectOption key={datum} value={datum} label={datum} />)))
|
||||
}
|
||||
<FormSelect
|
||||
value={value}
|
||||
onChange={this.onSelectChange}
|
||||
aria-label={i18n._(t`Select Input`)}
|
||||
>
|
||||
{data.map((datum) => (
|
||||
datum === defaultSelected ? (
|
||||
<FormSelectOption
|
||||
key=""
|
||||
value=""
|
||||
label={i18n._(t`Use Default ${label}`)}
|
||||
/>
|
||||
) : (
|
||||
<FormSelectOption key={datum} value={datum} label={datum} />
|
||||
)
|
||||
))}
|
||||
</FormSelect>
|
||||
)}
|
||||
</I18n>
|
||||
|
||||
@ -28,10 +28,10 @@ const FormActionGroup = ({ onSubmit, submitDisabled, onCancel }) => (
|
||||
<ActionGroup style={formActionGroupStyle}>
|
||||
<Toolbar>
|
||||
<ToolbarGroup style={buttonGroupStyle}>
|
||||
<Button aria-label={i18n._(t`Save`)} variant="primary" onClick={onSubmit} isDisabled={submitDisabled}>{i18n._(t`Save`)}</Button>
|
||||
<Button aria-label={i18n._(t`Save`)} variant="primary" type="submit" onClick={onSubmit} isDisabled={submitDisabled}>{i18n._(t`Save`)}</Button>
|
||||
</ToolbarGroup>
|
||||
<ToolbarGroup>
|
||||
<Button aria-label={i18n._(t`Cancel`)} variant="secondary" onClick={onCancel}>{i18n._(t`Cancel`)}</Button>
|
||||
<Button aria-label={i18n._(t`Cancel`)} variant="secondary" type="button" onClick={onCancel}>{i18n._(t`Cancel`)}</Button>
|
||||
</ToolbarGroup>
|
||||
</Toolbar>
|
||||
</ActionGroup>
|
||||
|
||||
56
src/components/FormField.jsx
Normal file
56
src/components/FormField.jsx
Normal file
@ -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 (
|
||||
<Field
|
||||
name={name}
|
||||
validate={validate}
|
||||
render={({ field, form }) => {
|
||||
const isValid = !form.touched[field.name] || !form.errors[field.name];
|
||||
|
||||
return (
|
||||
<FormGroup
|
||||
fieldId={id}
|
||||
helperTextInvalid={form.errors[field.name]}
|
||||
isRequired={isRequired}
|
||||
isValid={isValid}
|
||||
label={label}
|
||||
>
|
||||
<TextInput
|
||||
id={id}
|
||||
isRequired={isRequired}
|
||||
isValid={isValid}
|
||||
{...rest}
|
||||
{...field}
|
||||
onChange={(value, event) => {
|
||||
field.onChange(event);
|
||||
}}
|
||||
/>
|
||||
</FormGroup>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
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;
|
||||
@ -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 (
|
||||
<CardBody>
|
||||
<I18n>
|
||||
{({ i18n }) => (
|
||||
<Form autoComplete="off">
|
||||
<div style={{ display: 'grid', gridGap: '20px', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))' }}>
|
||||
<FormGroup
|
||||
fieldId="edit-org-form-name"
|
||||
helperTextInvalid={name.helperTextInvalid}
|
||||
isRequired
|
||||
isValid={name.isValid}
|
||||
label={i18n._(t`Name`)}
|
||||
>
|
||||
<TextInput
|
||||
id="edit-org-form-name"
|
||||
isRequired
|
||||
isValid={name.isValid}
|
||||
name="name"
|
||||
onChange={this.handleFieldChange}
|
||||
value={name.value || ''}
|
||||
<Formik
|
||||
initialValues={{
|
||||
name: organization.name,
|
||||
description: organization.description,
|
||||
custom_virtualenv: organization.custom_virtualenv || '',
|
||||
}}
|
||||
onSubmit={this.handleSubmit}
|
||||
render={formik => (
|
||||
<Form autoComplete="off" onSubmit={formik.handleSubmit}>
|
||||
<div
|
||||
style={{
|
||||
display: 'grid',
|
||||
gridGap: '20px',
|
||||
gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))'
|
||||
}}
|
||||
>
|
||||
<FormField
|
||||
id="edit-org-form-name"
|
||||
name="name"
|
||||
type="text"
|
||||
label={i18n._(t`Name`)}
|
||||
validate={required()}
|
||||
isRequired
|
||||
/>
|
||||
<FormField
|
||||
id="edit-org-form-description"
|
||||
name="description"
|
||||
type="text"
|
||||
label={i18n._(t`Description`)}
|
||||
/>
|
||||
<ConfigContext.Consumer>
|
||||
{({ custom_virtualenvs }) => (
|
||||
custom_virtualenvs && custom_virtualenvs.length > 1 && (
|
||||
<Field
|
||||
name="custom_virtualenv"
|
||||
render={({ field }) => (
|
||||
<FormGroup
|
||||
fieldId="edit-org-custom-virtualenv"
|
||||
label={i18n._(t`Ansible Environment`)}
|
||||
>
|
||||
<AnsibleSelect
|
||||
data={custom_virtualenvs}
|
||||
defaultSelected={defaultVenv}
|
||||
label={i18n._(t`Ansible Environment`)}
|
||||
{...field}
|
||||
/>
|
||||
</FormGroup>
|
||||
)}
|
||||
/>
|
||||
)
|
||||
)}
|
||||
</ConfigContext.Consumer>
|
||||
</div>
|
||||
<InstanceGroupsLookup
|
||||
api={api}
|
||||
value={instanceGroups}
|
||||
onChange={this.handleInstanceGroupsChange}
|
||||
/>
|
||||
</FormGroup>
|
||||
<FormGroup
|
||||
fieldId="edit-org-form-description"
|
||||
label={i18n._(t`Description`)}
|
||||
>
|
||||
<TextInput
|
||||
id="edit-org-form-description"
|
||||
name="description"
|
||||
onChange={this.handleFieldChange}
|
||||
value={description.value || ''}
|
||||
<FormActionGroup
|
||||
onCancel={this.handleCancel}
|
||||
onSubmit={formik.handleSubmit}
|
||||
submitDisabled={!formIsValid}
|
||||
/>
|
||||
</FormGroup>
|
||||
<ConfigContext.Consumer>
|
||||
{({ custom_virtualenvs }) => (
|
||||
custom_virtualenvs && custom_virtualenvs.length > 1 && (
|
||||
<FormGroup
|
||||
fieldId="edit-org-custom-virtualenv"
|
||||
label={i18n._(t`Ansible Environment`)}
|
||||
>
|
||||
<AnsibleSelect
|
||||
data={custom_virtualenvs}
|
||||
defaultSelected={custom_virtualenv.defaultEnv}
|
||||
label={i18n._(t`Ansible Environment`)}
|
||||
name="custom_virtualenv"
|
||||
onChange={this.handleFieldChange}
|
||||
value={custom_virtualenv.value || ''}
|
||||
/>
|
||||
</FormGroup>
|
||||
)
|
||||
)}
|
||||
</ConfigContext.Consumer>
|
||||
</div>
|
||||
<InstanceGroupsLookup
|
||||
api={api}
|
||||
value={instanceGroups.value}
|
||||
onChange={this.handleInstanceGroupsChange}
|
||||
/>
|
||||
<FormActionGroup
|
||||
onCancel={this.handleCancel}
|
||||
onSubmit={this.handleSubmit}
|
||||
submitDisabled={!formIsValid}
|
||||
/>
|
||||
{ error ? <div>error</div> : '' }
|
||||
</Form>
|
||||
{ error ? <div>error</div> : '' }
|
||||
</Form>
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
</I18n>
|
||||
</CardBody>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user