Filter clearing for Task Tables

src/components/HOCs/WithReviewTasks/WithReviewTasks.js

@@ -144,6 +144,10 @@ export const WithReviewTasks = function(WrappedComponent) {
       }
     }
 
+    clearCriteria = () => {
+      this.props.clearFilters()
+    }
+
     updateURL(props, criteria) {
       let searchCriteria = _merge({filters:{}}, criteria)
 
@@ -238,6 +242,7 @@ export const WithReviewTasks = function(WrappedComponent) {
                           updateReviewTasks={(criteria) => this.update(this.props, criteria)}
                           refresh={this.refresh}
                           reviewCriteria={criteria}
+                          clearFilterCriteria={this.clearCriteria}
                           pageSize={criteria.pageSize}
                           changePageSize={this.changePageSize}
                           setFiltered={this.setFiltered}

src/components/HOCs/WithSavedFilters/WithSavedFilters.js

@@ -100,6 +100,7 @@ const WithSavedFilters = function(WrappedComponent, appSettingName) {
 
     getBriefFilters = savedFilters => {
       const criteria = buildSearchCriteriafromURL(savedFilters)
+
       return _compact(_map(criteria.filters, (value, key) => {
         let op = '='
         let textValue = value

src/components/KeywordAutosuggestInput/InTableTagFilter.js

@@ -3,6 +3,7 @@ import { FormattedMessage } from 'react-intl'
 import KeywordAutosuggestInput from './KeywordAutosuggestInput'
 import External from '../External/External'
 import Modal from '../Modal/Modal'
+import SvgSymbol from '../SvgSymbol/SvgSymbol'
 import messages from './Messages'
 
 /**
@@ -23,16 +24,27 @@ export default class InTableTagFilter extends Component {
     this.setState({showTagChooser: false, currentValue: null})
   }
 
+  clearFilter = () => {
+    this.setState({currentValue: ''}, () => {
+      this.props.onChange(this.state.currentValue)
+    })
+  }
+
   render() {
     return (
       <div>
-        <input readOnly type="text" value={this.props.value} className="mr-w-full"
-          onFocus={() => {
-            if (!this.state.showTagChooser) {
-              this.setState({showTagChooser: true})
-            }
-          }}
-        />
+        <div className="mr-space-x-1 mr-pr-1">
+          <input readOnly type="text" value={this.props.value} className="mr-w-full"
+            onFocus={() => {
+              if (!this.state.showTagChooser) {
+                this.setState({showTagChooser: true})
+              }
+            }}
+          />
+          {this.props.value && <button className="mr-text-white hover:mr-text-green-lighter mr-transition-colors" onClick={this.clearFilter}>
+            <SvgSymbol sym="icon-close" viewBox="0 0 20 20" className="mr-fill-current mr-w-2.5 mr-h-2.5"/>
+          </button>}
+        </div>
 
         <External>
           <Modal isActive={this.state.showTagChooser}

src/components/SavedFilters/SavedFiltersList.js

@@ -40,14 +40,14 @@ export default class SavedFiltersList extends Component {
       <React.Fragment>
         <li>
           <button className="mr-text-current"
-                  onClick={this.props.saveFilters}>
+                  onClick={() => {this.props.saveFilters(); this.props.afterClick()}}>
             <FormattedMessage {...messages.saveFiltersLabel} />
           </button>
         </li>
         {listSearches.length > 0 &&
           <li>
             <button className="mr-text-current"
-                    onClick={this.props.manageFilters}>
+                    onClick={() => {this.props.manageFilters(); this.props.afterClick()}}>
               <FormattedMessage {...messages.manageFiltersLabel} />
             </button>
           </li>

src/components/TaskAnalysisTable/TaskAnalysisTable.js

@@ -229,6 +229,28 @@ export class TaskAnalysisTableInternal extends Component {
           <ReactTable
             data={data}
             columns={columns}
+            FilterComponent={({ filter, onChange }) => {
+              const filterValue = filter ? filter.value : ''
+              const clearFilter = () => onChange('')
+              return (
+                <div className='mr-space-x-1'>
+                  <input
+                    type="text"
+                    style={{
+                      width: '100%',
+                    }}
+                    value={filterValue}
+                    onChange={event => {
+                      onChange(event.target.value)
+                    }}
+                  />
+                  {filterValue && <button className="mr-text-white hover:mr-text-green-lighter mr-transition-colors" onClick={clearFilter}>
+                    <SvgSymbol sym="icon-close" viewBox="0 0 20 20" className="mr-fill-current mr-w-2.5 mr-h-2.5"/>
+                  </button>}
+                </div>
+                )
+              }
+            }
             SubComponent={props =>
               <ViewTaskSubComponent taskId={props.original.id} />
             }
@@ -712,7 +734,7 @@ const setupColumnTypes = (props, taskBaseRoute, manager, data, openComments) =>
           {...props}
           preferredTags={preferredTags}
           onChange={onChange}
-          value={_get(filter, 'value')}
+          value={_get(filter, 'value') ?? ""}
         />
       )
     }

src/components/TaskAnalysisTable/TaskAnalysisTableHeader.js

@@ -127,7 +127,7 @@ export class TaskAnalysisTableHeader extends Component {
                       className="mr-fill-current mr-w-5 mr-h-5" />
                   </button>
                 )}
-                dropdownContent={() =>
+                dropdownContent={(dropdown) =>
                   <React.Fragment>
                     <ul className="mr-list-dropdown">
                       {manager.canWriteProject(this.props.challenge.parent) &&
@@ -204,7 +204,10 @@ export class TaskAnalysisTableHeader extends Component {
                       <li>
                         <button
                           className="mr-text-green-lighter"
-                          onClick={() => configureColumns()}>
+                          onClick={() => {
+                            configureColumns()
+                            dropdown.toggleDropdownVisible()  
+                          }}>
                           <FormattedMessage {...messages.configureColumnsLabel} />
                         </button>
                       </li>

src/pages/Review/Review.js

@@ -33,7 +33,6 @@ import WithReviewTasks from '../../components/HOCs/WithReviewTasks/WithReviewTas
 import TasksReviewChallenges from './TasksReview/TasksReviewChallenges'
 import messages from './Messages'
 
-
 const WIDGET_WORKSPACE_NAME = "reviewOverview"
 
 const ReviewWidgetWorkspace = WithReviewTasks(WidgetWorkspace)
@@ -176,6 +175,10 @@ export class ReviewTasksDashboard extends Component {
     })
   }
 
+  clearFilters = () => {
+    this.setSelectedFilters({}, true)
+  }
+
   changeTab = (tab) => {
     this.props.history.push({
       pathname: `/review/${tab}`
@@ -338,6 +341,7 @@ export class ReviewTasksDashboard extends Component {
             reviewTasksSubType={this.state.showSubType}
             defaultFilters={this.state.filterSelected[showType]}
             clearSelected={this.clearSelected}
+            clearFilters={this.clearFilters}
             pageId={showType}
             metaReviewEnabled={metaReviewEnabled}
           />

src/pages/Review/TasksReview/Messages.js

@@ -19,6 +19,11 @@ export default defineMessages({
     defaultMessage: "Toggle Map",
   },
 
+  clearFiltersLabel: {
+    id: "Review.TaskAnalysisTable.clearFilters",
+    defaultMessage: "Clear Filters"
+  },
+
   startReviewing: {
     id: "Review.TaskAnalysisTable.startReviewing",
     defaultMessage: "Review these Tasks",