Skip to content

Commit f8995e9

Browse files
miles-grant-ibigroupmiles-grant-ibigroup
committed
feat(ProjectFeedListToolbar): allow filtering by label
1 parent 330a9d1 commit f8995e9

File tree

9 files changed

+417
-19
lines changed

9 files changed

+417
-19
lines changed

‎lib/manager/actions/visibilityFilter.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,10 @@ export const setVisibilitySearchText = createAction(
66
'SET_PROJECT_VISIBILITY_SEARCH_TEXT',
77
(payload: null | string) => payload
88
)
9+
export const setVisibilityLabel = createAction(
10+
'SET_PROJECT_VISIBILITY_LABEL',
11+
(payload: Array<any>) => payload
12+
)
913
export const setVisibilityFilter = createAction(
1014
'SET_PROJECT_VISIBILITY_FILTER',
1115
(payload: any) => payload

‎lib/manager/components/ProjectFeedListToolbar.js‎

Lines changed: 53 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ import {
3030
versionStatusFilters
3131
} from '../util'
3232
import {getVersionValidationSummaryByFilterStrategy} from '../util/version'
33-
33+
import FeedLabel from '../../common/components/FeedLabel'
3434
import type {ExtensionType} from '../../types'
3535
import type {Props as ContainerProps} from '../containers/ProjectFeedListToolbar'
3636
import type {
@@ -50,7 +50,8 @@ type Props = ContainerProps & {
5050
projectEditDisabled: boolean,
5151
setFeedSort: typeof projectsActions.setFeedSort,
5252
setFeedSourceTableFilterCountStrategy: typeof projectsActions.setFeedSourceTableFilterCountStrategy,
53-
setVisibilityFilter: typeof visibilityFilterActions.setVisibilitySearchText,
53+
setVisibilityFilter: typeof visibilityFilterActions.setVisibilityFilter,
54+
setVisibilityLabel: typeof visibilityFilterActions.setVisibilityLabel,
5455
setVisibilitySearchText: typeof visibilityFilterActions.setVisibilitySearchText,
5556
sort: FeedSourceTableSortStrategiesWithOrders,
5657
thirdPartySync: typeof projectsActions.thirdPartySync,
@@ -288,6 +289,33 @@ export default class ProjectFeedListToolbar extends PureComponent<Props> {
288289
return options
289290
}
290291

292+
_renderLabelFilter = () => {
293+
const { project, setVisibilityLabel } = this.props
294+
// This variable must be set directly from this.props both
295+
// to allow the override and for flow
296+
const labels = this.props.filter.labels || []
297+
298+
function handleClick (labelId: string) {
299+
const index = labels.indexOf(labelId)
300+
index >= 0 ? labels.splice(index, 1) : labels.push(labelId)
301+
setVisibilityLabel(labels)
302+
}
303+
return <MenuItem header style={{minWidth: 275}}>
304+
<h5>Select labels to filter by</h5>
305+
<div className='feedLabelContainer'>
306+
{project.labels.map((label) => (
307+
<FeedLabel
308+
key={label.id}
309+
label={label}
310+
checked={labels.includes(label.id)}
311+
small
312+
onClick={() => handleClick(label.id)}
313+
/>
314+
))}
315+
</div>
316+
</MenuItem>
317+
}
318+
291319
_renderFilterToolbarLabel = () => {
292320
const {filter, possibleComparisons} = this.props
293321

@@ -331,6 +359,7 @@ export default class ProjectFeedListToolbar extends PureComponent<Props> {
331359

332360
const activeFilter = filter.filter || 'all'
333361
const nonFilterColumnOffset = 25
362+
const activeFilterLabelCount = (filter.labels && filter.labels.length) || 0
334363

335364
return (
336365
<Row>
@@ -359,7 +388,7 @@ export default class ProjectFeedListToolbar extends PureComponent<Props> {
359388
<FormGroup id='feedFilterToolbarControl'>
360389
{this._renderFilterToolbarLabel()}
361390
<ButtonGroup>
362-
{Object.keys(versionStatusFilters).map(filterOption => (
391+
{Object.keys(versionStatusFilters).map((filterOption) => (
363392
<OptionButton
364393
active={activeFilter === filterOption}
365394
className={activeFilter === filterOption ? 'active' : ''}
@@ -368,12 +397,27 @@ export default class ProjectFeedListToolbar extends PureComponent<Props> {
368397
value={filterOption}
369398
>
370399
{this.messages(`filter.${filterOption}`)}{' '}
371-
<Badge
372-
style={{backgroundColor: '#babec0'}}>
400+
<Badge style={{ backgroundColor: '#babec0' }}>
373401
{filterCounts[filterOption]}
374402
</Badge>
375403
</OptionButton>
376404
))}
405+
<DropdownButton
406+
id='project-feedsource-label-filter-button'
407+
// to match the buttons with badges
408+
style={{ paddingBottom: 7 }}
409+
title={
410+
<span
411+
style={{
412+
fontWeight: activeFilterLabelCount > 0 ? 'bold' : ''
413+
}}
414+
>
415+
Labels
416+
</span>
417+
}
418+
>
419+
{this._renderLabelFilter()}
420+
</DropdownButton>
377421
</ButtonGroup>
378422
</FormGroup>
379423
</Col>
@@ -385,7 +429,7 @@ export default class ProjectFeedListToolbar extends PureComponent<Props> {
385429
style={{ marginLeft: 20 }}
386430
title='Actions'
387431
>
388-
{!projectEditDisabled &&
432+
{!projectEditDisabled && (
389433
<MenuItem
390434
data-test-id='project-header-create-new-feed-source-button'
391435
disabled={projectEditDisabled}
@@ -394,7 +438,7 @@ export default class ProjectFeedListToolbar extends PureComponent<Props> {
394438
>
395439
<Glyphicon glyph='plus' /> {this.messages('feeds.new')}
396440
</MenuItem>
397-
}
441+
)}
398442
{this._renderSyncMenuItem('transitland')}
399443
{this._renderSyncMenuItem('transitfeeds')}
400444
{this._renderSyncMenuItem('mtc')}
@@ -405,16 +449,10 @@ export default class ProjectFeedListToolbar extends PureComponent<Props> {
405449
>
406450
<Icon type='cloud-download' /> {this.messages('feeds.update')}
407451
</MenuItem>
408-
<MenuItem
409-
key='merge-feeds-button'
410-
onClick={this._onDownloadMerged}
411-
>
452+
<MenuItem key='merge-feeds-button' onClick={this._onDownloadMerged}>
412453
<Glyphicon glyph='download' /> {this.messages('mergeFeeds')}
413454
</MenuItem>
414-
<MenuItem
415-
key='csv-download-button'
416-
onClick={this._onCsvDownload}
417-
>
455+
<MenuItem key='csv-download-button' onClick={this._onCsvDownload}>
418456
<Icon type='table' /> {this.messages('downloadCsv')}
419457
</MenuItem>
420458
</DropdownButton>

‎lib/manager/containers/ProjectFeedListToolbar.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,8 @@ import {
1212
} from '../actions/projects'
1313
import {
1414
setVisibilityFilter,
15-
setVisibilitySearchText
15+
setVisibilitySearchText,
16+
setVisibilityLabel
1617
} from '../actions/visibilityFilter'
1718
import {deploymentsEnabledAndAccessAllowedForProject} from '../../common/util/permissions'
1819
import ProjectFeedListToolbar from '../components/ProjectFeedListToolbar'
@@ -21,7 +22,6 @@ import {
2122
projectHasAtLeastOneDeployment,
2223
projectHasAtLeastOneFeedWithAPublishedVersion
2324
} from '../util'
24-
2525
import type {Project} from '../../types'
2626
import type {AppState} from '../../types/reducers'
2727

@@ -71,6 +71,7 @@ const mapDispatchToProps = {
7171
setFeedSourceTableFilterCountStrategy,
7272
setVisibilityFilter,
7373
setVisibilitySearchText,
74+
setVisibilityLabel,
7475
thirdPartySync
7576
}
7677

0 commit comments

Comments
 (0)