Include Retire explicit filter on search

src/components/common/FilterDrawer.jsx

@@ -8,7 +8,7 @@ import {
 } from 'lodash';
 
 const FilterDrawer = props => {
-  const { open, filters, onClose, onApply, defaultIncludeRetired } = props;
+  const { open, filters, onClose, onApply } = props;
   const uiFilters = omit(omitBy(filters, isEmpty), ['is_active', 'is_latest_version'])
 
   const existingFilters = () => {
@@ -23,20 +23,14 @@ const FilterDrawer = props => {
   }
 
   const [appliedFilters, setFilters] = React.useState(existingFilters());
-  const [includeRetired, setIncludeRetired] = React.useState(defaultIncludeRetired);
 
   const onApplyClick = () => {
-    const filters = cloneDeep(appliedFilters);
-    if(includeRetired)
-      filters['includeRetired'] = {'true': true}
-
-    onApply(filters)
+    onApply(cloneDeep(appliedFilters))
     onClose()
   }
 
   const onClear = () => {
     setFilters({})
-    setIncludeRetired(false)
     onApply({})
     onClose()
   }
@@ -60,16 +54,6 @@ const FilterDrawer = props => {
     <Drawer anchor='left' open={open} onClose={onClose}>
       <div className='col-md-12 no-side-padding' style={{width: '500px', height: 'calc(100% - 60px)', overflow: 'scroll'}}>
         <List>
-          <Typography style={{padding: '5px 10px 0px 10px', fontWeight: 'bold'}}>
-            General
-          </Typography>
-          <ListItem style={{padding: '0px 16px 0px 6px'}}>
-            <ListItemIcon>
-              <Checkbox checked={includeRetired} onChange={event => setIncludeRetired(event.target.checked)}/>
-            </ListItemIcon>
-            <ListItemText primary='Include Retired' />
-          </ListItem>
-          <Divider />
           {
             map(uiFilters, (facets, field) => (
               <div key={field}>

src/components/common/IncludeRetiredFilterChip.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Chip } from '@material-ui/core';
+
+const IncludeRetiredFilterChip = ({ size, applied, onClick }) => {
+  const label = applied ? 'Exclude Retired' : 'Include Retired';
+  const color = applied ? 'primary' : 'secondary';
+  return (
+    <Chip
+      label={ label }
+      variant="outlined"
+      clickable
+      color={ color }
+      size={ size || 'medium' }
+      onClick={ onClick }
+    />
+  );
+}
+
+export default IncludeRetiredFilterChip;

src/components/search/Search.jsx

@@ -18,6 +18,7 @@ import SortButton from './SortButton';
 import ResultsCountDropDown from '../common/ResultsCountDropDown';
 import PageResultsLabel from './PageResultsLabel';
 import ChipDatePicker from '../common/ChipDatePicker';
+import IncludeRetiredFilterChip from '../common/IncludeRetiredFilterChip';
 import FilterButton from '../common/FilterButton';
 import FilterDrawer from '../common/FilterDrawer';
 import { DEFAULT_LIMIT } from '../../common/constants';
@@ -50,6 +51,7 @@ class Search extends React.Component {
       limit: DEFAULT_LIMIT,
       openFacetsDrawer: false,
       appliedFacets: {},
+      includeRetired: false,
       results: {
         concepts: cloneDeep(resourceResultStruct),
         mappings: cloneDeep(resourceResultStruct),
@@ -182,9 +184,13 @@ class Search extends React.Component {
       })
     }
     this.setState(newState, () => {
-      const { resource, searchStr, page, exactMatch, sortParams, updatedSince, limit } = this.state;
+      const {
+        resource, searchStr, page, exactMatch, sortParams, updatedSince, limit,
+        includeRetired,
+      } = this.state;
       const queryParams = {
         q: searchStr, page: page, exact_match: exactMatch, limit: limit,
+        includeRetired: includeRetired,
         verbose: includes(['sources', 'collections', 'organizations', 'users'], resource),
         ...this.getFacetQueryParam(),
       };
@@ -249,18 +255,27 @@ class Search extends React.Component {
     return 'All Time'
   }
 
+  onClickIncludeRetired = () => {
+    this.fetchNewResults({includeRetired: !this.state.includeRetired}, true, true)
+  }
+
   getFilterControls() {
     const updatedSinceText = this.getUpdatedSinceText();
     const totalResults = this.getCurrentResourceTotalResults();
-    const { updatedSince, limit, appliedFacets, resource } = this.state;
+    const {
+      updatedSince, limit, appliedFacets, resource, includeRetired
+    } = this.state;
     const isDisabledFilters = includes(['organizations', 'users'], resource);
     return (
       <span style={{display: 'inline-flex'}}>
+        <span style={{paddingRight: '5px'}}>
+          <IncludeRetiredFilterChip applied={includeRetired} onClick={this.onClickIncludeRetired} />
+        </span>
         <span style={{paddingRight: '5px'}}>
           <ChipDatePicker onChange={this.onDateChange} label={updatedSinceText} date={updatedSince} />
         </span>
         <span style={{paddingRight: '5px'}}>
-          <FilterButton count={size(appliedFacets)} onClick={this.toggleFacetsDrawer} disabled={isDisabledFilters} />
+          <FilterButton count={size(appliedFacets)} onClick={this.toggleFacetsDrawer} disabled={isDisabledFilters} label='More Filters' />
         </span>
         {
           !this.isTable && <span style={{paddingRight: '5px'}}>
@@ -290,10 +305,6 @@ class Search extends React.Component {
     this.setState({appliedFacets: filters}, () => this.fetchNewResults(null, true, true))
   }
 
-  areRetiredIncluded() {
-    return Boolean(get(this.state.appliedFacets, 'includeRetired', false))
-  }
-
   render() {
     const {
       resource, results, isLoading, limit, sortParams, openFacetsDrawer,
@@ -353,7 +364,6 @@ class Search extends React.Component {
         </div>
         <FilterDrawer
           open={openFacetsDrawer}
-          defaultIncludeRetired={this.areRetiredIncluded()}
           onClose={this.onCloseFacetsDrawer}
           filters={get(results[resource], 'facets.fields', {})}
           onApply={this.onApplyFacets}