Skip to content

Commit b30e2b8

Browse files
landonreedlandonreed
committed
refactor(deployment-settings): refactor OtpServers/Updaters into CollapsiblePanel
1 parent 45f483d commit b30e2b8

File tree

4 files changed

+85
-114
lines changed

4 files changed

+85
-114
lines changed

‎lib/manager/components/Updater.js‎ renamed to ‎lib/manager/components/CollapsiblePanel.js‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,28 +2,29 @@ import React, {PropTypes, Component} from 'react'
22
import {Button, Col, Panel, Glyphicon, Form, FormGroup, ControlLabel, FormControl} from 'react-bootstrap'
33

44
import {getMessage, getComponentMessages} from '../../common/util/config'
5-
import {UPDATER_FIELDS} from '../util/deployment'
65

7-
export default class Updater extends Component {
6+
export default class CollapsiblePanel extends Component {
87
static propTypes = {
8+
data: PropTypes.object,
9+
defaultExpanded: PropTypes.bool,
10+
fields: PropTypes.array,
11+
index: PropTypes.number,
912
onChange: PropTypes.func,
1013
onRemove: PropTypes.func,
1114
updater: PropTypes.object
1215
}
1316

1417
_onChange = (evt) => this.props.onChange(evt, this.props.index)
1518

16-
// _onChangeNumber = (evt) => this.props.onChange(this.props.index, {[evt.target.name]: evt.target.value})
17-
1819
_onRemove = () => this.props.onRemove(this.props.index)
1920

2021
render () {
2122
const messages = getComponentMessages('ProjectSettings')
22-
const {updater} = this.props
23+
const {fields, data, defaultExpanded, title} = this.props
2324
return (
2425
<Panel
25-
header={`${updater.type || '[type]'} - ${updater.url || '[url]'}`}
26-
defaultExpanded={!updater.type}
26+
header={<h5 style={{width: '100%', cursor: 'pointer'}}>{title}</h5>}
27+
defaultExpanded={defaultExpanded}
2728
collapsible>
2829
<Form>
2930
<Button
@@ -33,15 +34,16 @@ export default class Updater extends Component {
3334
onClick={this._onRemove}>
3435
Remove <Glyphicon glyph='remove' />
3536
</Button>
36-
{UPDATER_FIELDS.map((f, i) => {
37+
{fields.map((f, i) => {
3738
const fieldName = f.name.split('.').slice(-1)[0]
3839
return (
3940
<Col key={i} xs={f.width || 6}>
4041
<FormGroup>
4142
<ControlLabel>{getMessage(messages, `deployment.${f.name}`)}</ControlLabel>
4243
<FormControl
43-
value={updater[fieldName]}
44+
value={data[fieldName]}
4445
{...f}
46+
placeholder={f.placeholder || getMessage(messages, `deployment.${f.name}_placeholder`)}
4547
name={f.name}
4648
children={f.children
4749
? f.children.sort((a, b) => {

‎lib/manager/components/DeploymentSettings.js‎

Lines changed: 50 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,8 @@ import update from 'react-addons-update'
66
import {shallowEqual} from 'react-pure-render'
77

88
import {getMessage, getComponentMessages} from '../../common/util/config'
9-
import OtpServer from './OtpServer'
10-
import Updater from './Updater'
11-
import {FIELDS, UPDATER_FIELDS} from '../util/deployment'
9+
import CollapsiblePanel from './CollapsiblePanel'
10+
import {FIELDS, SERVER_FIELDS, UPDATER_FIELDS} from '../util/deployment'
1211

1312
export default class DeploymentSettings extends Component {
1413
static propTypes = {
@@ -33,24 +32,44 @@ export default class DeploymentSettings extends Component {
3332
_getOnChange = (evt, index = null) => {
3433
let item = FIELDS.find(f => f.name === evt.target.name)
3534
if (!item) item = UPDATER_FIELDS.find(f => f.name === evt.target.name)
35+
if (!item) item = SERVER_FIELDS.find(f => f.name === evt.target.name)
3636
if (item) {
3737
const stateUpdate = {}
3838
item.effects && item.effects.forEach(e => {
3939
objectPath.set(stateUpdate, `${e.key}.$set`, e.value)
4040
})
4141
switch (item.type) {
42+
case 'checkbox':
43+
return this._onChangeCheckbox(evt, stateUpdate, index)
4244
case 'select-bool':
4345
return this._onSelectBool(evt, stateUpdate, index)
4446
case 'number':
4547
return this._onChangeNumber(evt, stateUpdate, index)
4648
default:
47-
return this._onChange(evt, stateUpdate, index)
49+
// check for split property, which indicates that comma-separated list should be split into array
50+
if (item.split) {
51+
return this._onChangeSplit(evt, stateUpdate, index)
52+
} else {
53+
return this._onChange(evt, stateUpdate, index)
54+
}
4855
}
4956
} else {
5057
console.log('no onChange function available')
5158
}
5259
}
5360

61+
_onChangeCheckbox = (evt, stateUpdate = {}, index = null) => {
62+
const name = index !== null ? evt.target.name.replace('$index', index) : evt.target.name
63+
objectPath.set(stateUpdate, `${name}.$set`, evt.target.checked)
64+
this.setState(update(this.state, stateUpdate))
65+
}
66+
67+
_onChangeSplit = (evt, stateUpdate = {}, index = null) => {
68+
const name = index !== null ? evt.target.name.replace('$index', index) : evt.target.name
69+
objectPath.set(stateUpdate, `${name}.$set`, evt.target.value.split(','))
70+
this.setState(update(this.state, stateUpdate))
71+
}
72+
5473
_onAddServer = () => {
5574
const stateUpdate = { otpServers: { $push: [{name: '', publicUrl: '', internalUrl: [], admin: false}] } }
5675
this.setState(update(this.state, stateUpdate))
@@ -71,11 +90,6 @@ export default class DeploymentSettings extends Component {
7190
this.setState(update(this.state, stateUpdate))
7291
}
7392

74-
_onChangeServer = (index, props) => {
75-
const stateUpdate = { otpServers: { [index]: { $merge: { ...props } } } }
76-
this.setState(update(this.state, stateUpdate))
77-
}
78-
7993
_onRemoveServer = (index) => {
8094
const stateUpdate = { otpServers: { $splice: [[index, 1]] } }
8195
this.setState(update(this.state, stateUpdate))
@@ -145,6 +159,7 @@ export default class DeploymentSettings extends Component {
145159

146160
render () {
147161
const updaters = objectPath.get(this.state, 'routerConfig.updaters') || []
162+
const {otpServers} = this.state
148163
const messages = getComponentMessages('ProjectSettings')
149164
const {project, editDisabled} = this.props
150165
const noEdits = Object.keys(this.state)
@@ -174,12 +189,21 @@ export default class DeploymentSettings extends Component {
174189
</h4>
175190
}>
176191
{updaters.map((u, i) => (
177-
<Updater
192+
<CollapsiblePanel
178193
key={i}
179194
index={i}
180-
updater={u}
195+
fields={UPDATER_FIELDS}
196+
data={u}
197+
defaultExpanded={!u.type}
181198
onRemove={this._onRemoveUpdater}
182199
onChange={this._getOnChange}
200+
title={u.type
201+
? <span>
202+
{u.type}{' '}
203+
<small>{u.url}</small>
204+
</span>
205+
: `[${getMessage(messages, 'deployment.routerConfig.updaters.title_placeholder')}]`
206+
}
183207
/>
184208
))}
185209
</Panel>
@@ -191,19 +215,28 @@ export default class DeploymentSettings extends Component {
191215
bsStyle='success'
192216
bsSize='xsmall'
193217
onClick={this._onAddServer}>
194-
<Glyphicon glyph='plus' /> {getMessage(messages, 'deployment.servers.new')}
218+
<Glyphicon glyph='plus' /> {getMessage(messages, 'deployment.otpServers.new')}
195219
</Button>
196-
<Icon type='server' /> {getMessage(messages, 'deployment.servers.title')}
220+
<Icon type='server' /> {getMessage(messages, 'deployment.otpServers.title')}
197221
</h4>
198222
}>
199223
<div>
200-
{this.state.otpServers && this.state.otpServers.map((server, i) => (
201-
<OtpServer
224+
{otpServers.map((server, i) => (
225+
<CollapsiblePanel
202226
key={i}
203227
index={i}
204-
server={server}
228+
fields={SERVER_FIELDS}
229+
defaultExpanded={!server.name}
230+
title={server.name
231+
? <span>
232+
{server.name}{' '}
233+
<small>{server.publicUrl}</small>
234+
</span>
235+
: `[${getMessage(messages, 'deployment.otpServers.server_placeholder')}]`
236+
}
237+
data={server}
205238
onRemove={this._onRemoveServer}
206-
onChange={this._onChangeServer} />
239+
onChange={this._getOnChange} />
207240
))}
208241
</div>
209242
</Panel>

‎lib/manager/components/OtpServer.js‎

Lines changed: 0 additions & 88 deletions
This file was deleted.

‎lib/manager/util/deployment.js‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -143,3 +143,27 @@ export const UPDATER_FIELDS = [
143143
type: 'text'
144144
}
145145
]
146+
147+
export const SERVER_FIELDS = [
148+
{
149+
name: 'otpServers.$index.name',
150+
type: 'text',
151+
width: 12
152+
}, {
153+
name: 'otpServers.$index.publicUrl',
154+
placeholder: 'http://otp.example.com',
155+
type: 'text'
156+
}, {
157+
name: 'otpServers.$index.internalUrl',
158+
split: true,
159+
placeholder: 'http://127.0.0.1/otp,http://0.0.0.0/otp',
160+
type: 'text'
161+
}, {
162+
name: 'otpServers.$index.s3Bucket',
163+
placeholder: 's3_bucket_name',
164+
type: 'text'
165+
}, {
166+
name: 'otpServers.$index.admin',
167+
type: 'checkbox'
168+
}
169+
]

0 commit comments

Comments
 (0)