feat(ProjectFeedListToolbar): allow user to and/or filter labels

miles-grant-ibigroup · miles-grant-ibigroup · commit c3dd2e7ca7f2 · 2021-07-22T17:00:00.000-04:00
diff --git a/lib/manager/actions/visibilityFilter.js b/lib/manager/actions/visibilityFilter.js
@@ -10,6 +10,10 @@ export const setVisibilityLabel = createAction(
   'SET_PROJECT_VISIBILITY_LABEL',
   (payload: Array<any>) => payload
 )
+export const setVisibilityLabelMode = createAction(
+  'SET_PROJECT_VISIBILITY_LABEL_MODE',
+  (payload: string) => payload
+)
 export const setVisibilityFilter = createAction(
   'SET_PROJECT_VISIBILITY_FILTER',
   (payload: any) => payload
diff --git a/lib/manager/components/ProjectFeedListToolbar.js b/lib/manager/components/ProjectFeedListToolbar.js
@@ -1,3 +1,6 @@
+/* eslint-disable jsx-a11y/no-onchange */
+// Deprecated rule (https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-onchange.md)
+
 // @flow
 
 import Icon from '@conveyal/woonerf/components/icon'
@@ -52,6 +55,7 @@ type Props = ContainerProps & {
   setFeedSourceTableFilterCountStrategy: typeof projectsActions.setFeedSourceTableFilterCountStrategy,
   setVisibilityFilter: typeof visibilityFilterActions.setVisibilityFilter,
   setVisibilityLabel: typeof visibilityFilterActions.setVisibilityLabel,
+  setVisibilityLabelMode: typeof visibilityFilterActions.setVisibilityLabelMode,
   setVisibilitySearchText: typeof visibilityFilterActions.setVisibilitySearchText,
   sort: FeedSourceTableSortStrategiesWithOrders,
   thirdPartySync: typeof projectsActions.thirdPartySync,
@@ -290,30 +294,49 @@ export default class ProjectFeedListToolbar extends PureComponent<Props> {
   }
 
   _renderLabelFilter = () => {
-    const { project, setVisibilityLabel } = this.props
+    const { project, setVisibilityLabel, setVisibilityLabelMode, filter } = this.props
     // This variable must be set directly from this.props both
     // to allow the override and for flow
     const labels = this.props.filter.labels || []
+    const {labelsFilterMode} = filter
 
     function handleClick (labelId: string) {
       const index = labels.indexOf(labelId)
       index >= 0 ? labels.splice(index, 1) : labels.push(labelId)
       setVisibilityLabel(labels)
     }
-    return <MenuItem header style={{minWidth: 275}}>
-      <h5>Select labels to filter by</h5>
-      <div className='feedLabelContainer'>
-        {project.labels.map((label) => (
-          <FeedLabel
-            key={label.id}
-            label={label}
-            checked={labels.includes(label.id)}
-            small
-            onClick={() => handleClick(label.id)}
-          />
-        ))}
-      </div>
-    </MenuItem>
+    function handleSelectLabelMode (e) {
+      const { value: newMode } = e.target
+      setVisibilityLabelMode(newMode)
+    }
+    return (
+      <MenuItem header style={{ minWidth: 275 }}>
+        <h5>
+          Show{' '}
+          <select
+            name='anyonly'
+            id='anyonly'
+            value={labelsFilterMode}
+            onChange={handleSelectLabelMode}
+          >
+            <option value='any'>any</option>
+            <option value='only'>only</option>
+          </select>{' '}
+          feeds with the labels
+        </h5>
+        <div className='feedLabelContainer'>
+          {project.labels.map((label) => (
+            <FeedLabel
+              key={label.id}
+              label={label}
+              checked={labels.includes(label.id)}
+              small
+              onClick={() => handleClick(label.id)}
+            />
+          ))}
+        </div>
+      </MenuItem>
+    )
   }
 
   _renderFilterToolbarLabel = () => {
@@ -348,6 +371,10 @@ export default class ProjectFeedListToolbar extends PureComponent<Props> {
     )
   }
 
+  componentDidMount = () => {
+    this.props.setVisibilityLabelMode('any')
+  }
+
   render () {
     const {
       filter,
diff --git a/lib/manager/containers/ProjectFeedListToolbar.js b/lib/manager/containers/ProjectFeedListToolbar.js
@@ -13,7 +13,8 @@ import {
 import {
   setVisibilityFilter,
   setVisibilitySearchText,
-  setVisibilityLabel
+  setVisibilityLabel,
+  setVisibilityLabelMode
 } from '../actions/visibilityFilter'
 import {deploymentsEnabledAndAccessAllowedForProject} from '../../common/util/permissions'
 import ProjectFeedListToolbar from '../components/ProjectFeedListToolbar'
@@ -72,6 +73,7 @@ const mapDispatchToProps = {
   setVisibilityFilter,
   setVisibilitySearchText,
   setVisibilityLabel,
+  setVisibilityLabelMode,
   thirdPartySync
 }
 
diff --git a/lib/manager/reducers/projects.js b/lib/manager/reducers/projects.js
@@ -38,6 +38,8 @@ const projects = (state: ProjectsState = defaultState, action: Action): Projects
       return update(state, {filter: {searchText: {$set: action.payload}}})
     case 'SET_PROJECT_VISIBILITY_LABEL':
       return update(state, {filter: {labels: {$set: action.payload}}})
+    case 'SET_PROJECT_VISIBILITY_LABEL_MODE':
+      return update(state, {filter: {labelsFilterMode: {$set: action.payload}}})
     case 'SET_PROJECT_VISIBILITY_FILTER':
       return update(state, {filter: {filter: {$set: action.payload}}})
     case 'CREATE_DEPLOYMENT':
diff --git a/lib/manager/util/index.js b/lib/manager/util/index.js
@@ -204,14 +204,22 @@ export function getFilteredFeeds (
       // If no label is specified, return all
       if (!labels || labels.length === 0) return feedSource
 
-      return labels.find(labelToCheck => {
+      function labelVerify (labelToCheck) {
         return feedSource.labels
         // first map to strings
           .map(label => label.id)
         // If any label is matched, we include it regardless
         // of what happens next
           .includes(labelToCheck)
-      })
+      }
+
+      if (filter.labelsFilterMode === 'any') {
+        return labels.find(labelVerify)
+      }
+
+      if (filter.labelsFilterMode === 'only') {
+        return labels.every(labelVerify)
+      }
     })
     .sort(feedSortOptions[sort])
 }
diff --git a/lib/types/reducers.js b/lib/types/reducers.js
@@ -512,6 +512,7 @@ export type ProjectFilter = {
   feedSourceTableFilterCountStrategy: FeedSourceTableFilterCountStrategies,
   filter: any,
   labels?: Array<string>,
+  labelsFilterMode: string,
   searchText: null | string
 }
 

Original file line number	Diff line number	Diff line change
`@@ -512,6 +512,7 @@ export type ProjectFilter = {`
`512`	`512`	`feedSourceTableFilterCountStrategy: FeedSourceTableFilterCountStrategies,`
`513`	`513`	`filter: any,`
`514`	`514`	`labels?: Array<string>,`
	`515`	`+ labelsFilterMode: string,`
`515`	`516`	`searchText: null \| string`
`516`	`517`	`}`
`517`	`518`