Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 82 83 | import React, { useState, FC } from 'react'
import { useTranslation, Trans } from 'react-i18next'
import { Input, Button, FormText } from 'reactstrap'
interface Props {
settings: any[]
addPattern: ({ pathPattern, channel }: { pathPattern: string; channel: string }) => void
removePattern: (pattern: string) => void
}
const NotificationPatterns: FC<Props> = ({ settings, addPattern, removePattern }) => {
const [t] = useTranslation()
const [pathPattern, setPathPattern] = useState('')
const [channel, setChannel] = useState('')
const clearInputs = () => {
setPathPattern('')
setChannel('')
}
const handleAddPattern = () => {
addPattern({ pathPattern, channel })
clearInputs()
}
return (
<>
<h3 className="mt-4">{t('admin.notification.patterns.legend')}</h3>
<div className="row">
<table className="offset-1 col-10 table table-bordered">
<thead>
<tr>
<th>{t('admin.notification.patterns.pattern')}</th>
<th>{t('admin.notification.patterns.channel')}</th>
<th>{t('admin.notification.patterns.operation')}</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<Input value={pathPattern} placeholder="e.g. /projects/xxx/MTG/*" onChange={e => setPathPattern(e.target.value)} />
<FormText color="muted">
<Trans i18nKey="admin.notification.patterns.path_pattern_description">
Path name of wiki. Pattern expression with <code>*</code> can be used.
</Trans>
</FormText>
</td>
<td>
<Input value={channel} placeholder="e.g. project-xxx" onChange={e => setChannel(e.target.value)} />
<FormText color="muted">
<Trans i18nKey="admin.notification.patterns.channel_description">
Slack channel name. Without <code>#</code>.
</Trans>
</FormText>
</td>
<td>
<Button color="primary" onClick={handleAddPattern}>
{t('Add')}
</Button>
</td>
</tr>
{settings.map(({ _id, pathPattern, channel }) => (
<tr key={_id}>
<td>{pathPattern}</td>
<td>{channel}</td>
<td>
<form className="admin-remove-updatepost">
<Button onClick={() => removePattern(_id)}>{t('Delete')}</Button>
</form>
</td>
</tr>
))}
</tbody>
</table>
</div>
</>
)
}
export default NotificationPatterns
|