1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
|
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
|
