Skip to content

Commit 90d37ad

Browse files
miles-grant-ibigroupmiles-grant-ibigroup
committed
feat(FeedSourceTableRow): add label assigner to feed sources
1 parent 818bb95 commit 90d37ad

File tree

4 files changed

+90
-16
lines changed

4 files changed

+90
-16
lines changed

‎lib/manager/components/FeedSourceTableRow.js‎

Lines changed: 28 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ import ConfirmModal from '../../common/components/ConfirmModal'
2626
import SelectFileModal from '../../common/components/SelectFileModal'
2727
import WatchButton from '../../common/containers/WatchButton'
2828
import FeedLabel from '../../common/components/FeedLabel'
29+
import LabelAssignerModal from '../components/LabelAssignerModal'
2930
import type {Props as ContainerProps} from '../containers/FeedSourceTableRow'
3031
import type {Feed, ValidationSummary} from '../../types'
3132
import type {
@@ -131,7 +132,8 @@ export default class FeedSourceTableRow extends PureComponent<Props> {
131132
const {
132133
comparisonColumn,
133134
comparisonValidationSummary,
134-
feedSource
135+
feedSource,
136+
project
135137
} = this.props
136138

137139
// data for feed source info column
@@ -181,7 +183,7 @@ export default class FeedSourceTableRow extends PureComponent<Props> {
181183
return (
182184
<tr key={feedSource.id} className='feed-source-table-row'>
183185
<td className='feed-source-info'>
184-
<FeedInfo feedSource={feedSource} />
186+
<FeedInfo feedSource={feedSource} project={project} />
185187
</td>
186188
{comparisonColumn &&
187189
<td className='comparison-column'>
@@ -226,9 +228,9 @@ export default class FeedSourceTableRow extends PureComponent<Props> {
226228
}
227229
}
228230

229-
class FeedInfo extends PureComponent<{ feedSource: Feed }> {
231+
class FeedInfo extends PureComponent<{ feedSource: Feed, project: Project }> {
230232
render () {
231-
const {feedSource} = this.props
233+
const {feedSource, project} = this.props
232234

233235
const lastUpdateText = feedSource.lastUpdated
234236
? `Last updated ${moment(feedSource.lastUpdated).format(dateFormat)}`
@@ -241,40 +243,53 @@ class FeedInfo extends PureComponent<{ feedSource: Feed }> {
241243
</h4>
242244
<h5>{lastUpdateText}</h5>
243245
<Row>
244-
{feedSource.url &&
246+
{feedSource.url && (
245247
<Col xs={12}>
246248
<Icon type='link' />
247249
<a href={feedSource.url} target='_blank'>
248250
{abbreviate(feedSource.url)}
249251
<Icon type='external-link' />
250252
</a>
251253
</Col>
252-
}
253-
{feedSource.retrievalMethod === 'FETCHED_AUTOMATICALLY' &&
254+
)}
255+
{feedSource.retrievalMethod === 'FETCHED_AUTOMATICALLY' && (
254256
<Col xs={6}>
255257
<Icon type='feed' />
256258
Auto fetch
257259
</Col>
258-
}
259-
{feedSource.deployable &&
260+
)}
261+
{feedSource.deployable && (
260262
<Col xs={6}>
261263
<Icon type='rocket' />
262264
Deployable
263265
</Col>
264-
}
266+
)}
265267
<Col xs={6}>
266268
<Icon type={feedSource.isPublic ? 'globe' : 'lock'} />
267269
{feedSource.isPublic ? 'Public' : 'Private'}
268270
</Col>
269-
{feedSource.labels.length > 0 &&
270271
<Col xs={12}>
271272
<div className='feedSourceLabelRow'>
272273
<Icon type={'tag'} />
274+
<LabelAssignerModal
275+
ref='labelAssignerModal'
276+
feedSource={feedSource}
277+
project={project}
278+
/>
279+
<button
280+
className='labelActionButton small'
281+
style={{ marginRight: '5px' }}
282+
onClick={() => this.refs.labelAssignerModal.open()}
283+
>
284+
Edit
285+
</button>
273286
<div className='feedLabelContainer'>
274-
{feedSource.labels.map(label => <FeedLabel small key={label.id} label={label} />)}
287+
{feedSource.labels.map((label) => (
288+
<FeedLabel small key={label.id} label={label} />
289+
))}
275290
</div>
276291
</div>
277-
</Col>}
292+
</Col>
278293
</Row>
279294
</div>
280295
)

‎lib/manager/components/LabelAssignerModal.js‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import React from 'react'
2+
import { Modal, Button } from 'react-bootstrap'
3+
4+
// @flow
5+
6+
import LabelAssigner from '../containers/LabelAssigner'
7+
import type {FeedSource, Project} from '../../types'
8+
9+
type Props = {
10+
feedSource: FeedSource,
11+
project: Project
12+
}
13+
14+
type State = {
15+
showModal: boolean,
16+
}
17+
18+
export default class LabelEditorModal extends React.Component<Props, State> {
19+
state = {
20+
showModal: false
21+
}
22+
23+
close = () => {
24+
this.setState({
25+
showModal: false
26+
})
27+
}
28+
29+
open = () => {
30+
this.setState({
31+
showModal: true
32+
})
33+
}
34+
35+
ok = () => {
36+
this.close()
37+
}
38+
39+
render () {
40+
const {Body, Header, Title, Footer} = Modal
41+
const { feedSource, project } = this.props
42+
return (
43+
<Modal show={this.state.showModal} onHide={this.close}>
44+
<Header>
45+
<Title>{`Add Labels to ${feedSource.name}`}</Title>
46+
</Header>
47+
48+
<Body>
49+
<LabelAssigner feedSource={feedSource} project={project} />
50+
</Body>
51+
<Footer>
52+
<Button
53+
data-test-id='label-assigner-done-button'
54+
onClick={this.close}>Done</Button>
55+
</Footer>
56+
</Modal>
57+
)
58+
}
59+
}

‎lib/manager/components/LabelPanel.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ export default class LabelPanel extends Component<{ project: Project; }> {
2828
<Panel header={<h3>Labels</h3>}>
2929
<div className={`feedLabelContainer ${large ? 'large' : ''}`}>
3030
<LabelEditorModal ref='newLabelModal' projectId={projectId} />
31-
<button className='newLabel' onClick={this._onClickNewLabel}>Add a new label</button>
31+
<button className='labelActionButton' onClick={this._onClickNewLabel}>Add a new label</button>
3232
{labelBody}
3333
</div>
3434
</Panel>

‎lib/style.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -230,15 +230,15 @@ td.feed-source-info {
230230
}
231231

232232
/* New Label "button" */
233-
.newLabel {
233+
.labelActionButton {
234234
background: none;
235235
border: none;
236236
margin: 0 0 10px 0;
237237
padding: 0;
238238
color: #337ab7;
239239
text-decoration: none;
240240
}
241-
.newLabel:hover {
241+
.labelActionButton:hover {
242242
text-decoration: underline;
243243
}
244244

0 commit comments

Comments
 (0)