diff options
| author | Fabian Mastenbroek <mail.fabianm@gmail.com> | 2021-07-19 15:47:23 +0200 |
|---|---|---|
| committer | Fabian Mastenbroek <mail.fabianm@gmail.com> | 2021-07-19 16:03:11 +0200 |
| commit | 5e5ab63b280eb446db4090733cd3ad2e97d02018 (patch) | |
| tree | 352766be8a86c78f2aa233bb24db1a2711cc0f21 /opendc-web/opendc-web-ui/src/components/modals/custom-components/NewTopologyModal.js | |
| parent | 54d07120191eb81de91a49cdebf619cfecce2666 (diff) | |
refactor(ui): Restructure components per page
This change updates the source structure of the OpenDC frontend to
follow the page structure.
Diffstat (limited to 'opendc-web/opendc-web-ui/src/components/modals/custom-components/NewTopologyModal.js')
| -rw-r--r-- | opendc-web/opendc-web-ui/src/components/modals/custom-components/NewTopologyModal.js | 81 |
1 files changed, 0 insertions, 81 deletions
diff --git a/opendc-web/opendc-web-ui/src/components/modals/custom-components/NewTopologyModal.js b/opendc-web/opendc-web-ui/src/components/modals/custom-components/NewTopologyModal.js deleted file mode 100644 index 49952aec..00000000 --- a/opendc-web/opendc-web-ui/src/components/modals/custom-components/NewTopologyModal.js +++ /dev/null @@ -1,81 +0,0 @@ -import PropTypes from 'prop-types' -import React, { useRef, useState } from 'react' -import Modal from '../Modal' -import { Form, FormGroup, FormSelect, FormSelectOption, TextInput } from '@patternfly/react-core' -import { useProjectTopologies } from '../../../data/topology' - -const NewTopologyModal = ({ projectId, isOpen, onSubmit: onSubmitUpstream, onCancel: onCancelUpstream }) => { - const nameInput = useRef(null) - const [isSubmitted, setSubmitted] = useState(false) - const [originTopology, setOriginTopology] = useState(-1) - const [errors, setErrors] = useState({}) - - const { data: topologies = [] } = useProjectTopologies(projectId) - - const clearState = () => { - nameInput.current.value = '' - setSubmitted(false) - setOriginTopology(-1) - setErrors({}) - } - - const onSubmit = (event) => { - setSubmitted(true) - - if (event) { - event.preventDefault() - } - - const name = nameInput.current.value - - if (!name) { - setErrors({ name: true }) - return false - } else if (originTopology === -1) { - onSubmitUpstream(name) - } else { - onSubmitUpstream(name, originTopology) - } - - clearState() - return true - } - - const onCancel = () => { - onCancelUpstream() - clearState() - } - - return ( - <Modal title="New Topology" isOpen={isOpen} onSubmit={onSubmit} onCancel={onCancel}> - <Form onSubmit={onSubmit}> - <FormGroup - label="Name" - fieldId="name" - isRequired - validated={isSubmitted && errors.name ? 'error' : 'default'} - helperTextInvalid="This field cannot be empty" - > - <TextInput id="name" name="name" type="text" isRequired ref={nameInput} /> - </FormGroup> - <FormGroup label="Topology to duplicate" fieldId="origin" isRequired> - <FormSelect id="origin" name="origin" value={originTopology} onChange={setOriginTopology}> - <FormSelectOption value={-1} key={-1} label="None - start from scratch" /> - {topologies.map((topology) => ( - <FormSelectOption value={topology._id} key={topology._id} label={topology.name} /> - ))} - </FormSelect> - </FormGroup> - </Form> - </Modal> - ) -} - -NewTopologyModal.propTypes = { - projectId: PropTypes.string, - isOpen: PropTypes.bool.isRequired, - onSubmit: PropTypes.func.isRequired, - onCancel: PropTypes.func.isRequired, -} - -export default NewTopologyModal |
