New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add Bindings view in Hooks create page #730
Changes from 3 commits
2936bca
641d42b
b8f864b
f266cfc
5b9d224
f4984a0
7776395
81ca99c
19a54e6
d623a5a
01ce1c8
c9f2079
09636fd
228f4f0
c9b3266
1d3da94
af8de5e
eb645b9
a409b74
3d50fc2
879ab4f
34e753e
9f06ab0
bd061c2
6d1929e
a9eeb15
6a7878e
9af784f
3f681f7
1cc3491
bd28bd5
0936543
3e35cea
a8980c3
645cac1
9aa285d
d28d642
949fbc5
21fd0ef
989c444
3bbbb11
76a6f49
019d25c
023761b
a31db51
61a4307
16d71d2
badc0a3
bf4c6e0
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,149 @@ | ||
import { hot } from 'react-hot-loader'; | ||
import React, { Component, Fragment } from 'react'; | ||
import { withApollo } from 'react-apollo'; | ||
import classNames from 'classnames'; | ||
import { withStyles } from '@material-ui/core/styles'; | ||
import { arrayOf, func, object, string } from 'prop-types'; | ||
import List from '@material-ui/core/List'; | ||
import ListItem from '@material-ui/core/ListItem'; | ||
import ListItemText from '@material-ui/core/ListItemText'; | ||
import ListSubheader from '@material-ui/core/ListSubheader'; | ||
import Tooltip from '@material-ui/core/Tooltip'; | ||
import TextField from '@material-ui/core/TextField'; | ||
import Typography from '@material-ui/core/Typography'; | ||
import IconButton from '@material-ui/core/IconButton'; | ||
import PlusIcon from 'mdi-react/PlusIcon'; | ||
import DeleteIcon from 'mdi-react/DeleteIcon'; | ||
|
||
@hot(module) | ||
@withApollo | ||
@withStyles(theme => ({ | ||
iconButton: { | ||
'& svg': { | ||
fill: theme.palette.text.primary, | ||
}, | ||
}, | ||
plusIcon: { | ||
marginTop: 80, | ||
}, | ||
deleteIcon: { | ||
marginRight: -15, | ||
[theme.breakpoints.down('sm')]: { | ||
marginRight: -14, | ||
}, | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I think we can remove L31-33. |
||
}, | ||
inputWrapper: { | ||
display: 'flex', | ||
justifyContent: 'space-between', | ||
alignItems: 'center', | ||
}, | ||
inputList: { | ||
flex: 1, | ||
}, | ||
bindingListItem: { | ||
paddingTop: 0, | ||
paddingBottom: 0, | ||
}, | ||
subheader: { | ||
fontSize: theme.typography.pxToRem(16), | ||
}, | ||
})) | ||
export default class PulseBindings extends Component { | ||
static propTypes = { | ||
pulseExchange: string.isRequired, | ||
pattern: string.isRequired, | ||
bindings: arrayOf(object).isRequired, | ||
onBindingAdd: func.isRequired, | ||
onBindingRemove: func.isRequired, | ||
onChange: func.isRequired, | ||
}; | ||
|
||
render() { | ||
const { | ||
pulseExchange, | ||
pattern, | ||
bindings, | ||
classes, | ||
onBindingAdd, | ||
onBindingRemove, | ||
onChange, | ||
} = this.props; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Let's add There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I feel all the props are required for this.
Also, I am not sure if we would not need Let me know if there is anything missing There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Looks good. |
||
|
||
return ( | ||
<Fragment> | ||
<div className={classes.inputWrapper}> | ||
<List | ||
className={classes.inputList} | ||
subheader={ | ||
<ListSubheader className={classes.subheader}> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This was related to the above comment. |
||
Bindings | ||
</ListSubheader> | ||
}> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. |
||
<ListItem> | ||
<ListItemText | ||
primary={ | ||
<TextField | ||
required | ||
label="Pulse Exchange" | ||
name="pulseExchange" | ||
placeholder="exchange/<username>/some-exchange-name" | ||
onChange={onChange} | ||
fullWidth | ||
value={pulseExchange} | ||
/> | ||
} | ||
/> | ||
</ListItem> | ||
<ListItem> | ||
<ListItemText | ||
primary={ | ||
<TextField | ||
required | ||
label="Routing Key Pattern" | ||
placeholder="#.some-interesting-key.#" | ||
name="pattern" | ||
onChange={onChange} | ||
fullWidth | ||
value={pattern} | ||
/> | ||
} | ||
/> | ||
</ListItem> | ||
</List> | ||
<Tooltip title="Add Binding"> | ||
<IconButton | ||
className={classNames(classes.iconButton, classes.plusIcon)} | ||
onClick={onBindingAdd}> | ||
<PlusIcon /> | ||
</IconButton> | ||
</Tooltip> | ||
</div> | ||
<List> | ||
{bindings.map(binding => ( | ||
<ListItem | ||
className={classes.bindingListItem} | ||
key={`${binding.exchange}-${binding.routingKeyPattern}`}> | ||
<ListItemText | ||
disableTypography | ||
primary={ | ||
<Typography variant="body2"> | ||
<code>{binding.exchange}</code> with{' '} | ||
<code>{binding.pattern}</code> | ||
</Typography> | ||
} | ||
/> | ||
<Tooltip title="Delete Binding"> | ||
<IconButton | ||
className={classNames(classes.iconButton, classes.deleteIcon)} | ||
name={binding} | ||
onClick={() => onBindingRemove(binding)}> | ||
<DeleteIcon /> | ||
</IconButton> | ||
</Tooltip> | ||
</ListItem> | ||
))} | ||
</List> | ||
</Fragment> | ||
); | ||
} | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
marginRight: -theme.spacing.double,