Improved search filtering (#940)

* Filter search by collectionId * Improve spec, remove recursive import * Add userId filter for documents.search * 💚 * Search filter UI * WIP UI * Date filtering Prevent dupe menu * Refactor * button * Added year option, improved hover states * Add new indexes * Remove manual string interpolation in SQL construction * Move dateFilter validation to controller * Fixes: Double query when changing filter Fixes: Visual jump between filters in dropdown * Add option to clear filters * More clearly define dropdowns in dark mode * Checkbox -> Checkmark
2019-04-23 07:31:20 -07:00
parent a256eba856
commit da7fdfef0a
23 changed files with 679 additions and 76 deletions
--- a/app/scenes/Search/Search.js
+++ b/app/scenes/Search/Search.js
@@ -3,35 +3,40 @@ import * as React from 'react';
 import ReactDOM from 'react-dom';
 import keydown from 'react-keydown';
 import Waypoint from 'react-waypoint';
-import { withRouter } from 'react-router-dom';
+import { withRouter, Link } from 'react-router-dom';
 import { observable, action } from 'mobx';
 import { observer, inject } from 'mobx-react';
 import { debounce } from 'lodash';
+import queryString from 'query-string';
 import styled from 'styled-components';
 import ArrowKeyNavigation from 'boundless-arrow-key-navigation';

 import { DEFAULT_PAGINATION_LIMIT } from 'stores/BaseStore';
 import DocumentsStore from 'stores/DocumentsStore';
+import UsersStore from 'stores/UsersStore';
 import { searchUrl } from 'utils/routeHelpers';
 import { meta } from 'utils/keyboard';

 import Flex from 'shared/components/Flex';
 import Empty from 'components/Empty';
 import Fade from 'components/Fade';
-import Checkbox from 'components/Checkbox';
-
 import HelpText from 'components/HelpText';
 import CenteredContent from 'components/CenteredContent';
 import LoadingIndicator from 'components/LoadingIndicator';
 import DocumentPreview from 'components/DocumentPreview';
 import PageTitle from 'components/PageTitle';
 import SearchField from './components/SearchField';
+import StatusFilter from './components/StatusFilter';
+import CollectionFilter from './components/CollectionFilter';
+import UserFilter from './components/UserFilter';
+import DateFilter from './components/DateFilter';

 type Props = {
  history: Object,
  match: Object,
  location: Object,
  documents: DocumentsStore,
+  users: UsersStore,
  notFound: ?boolean,
 };

@@ -40,20 +45,24 @@ class Search extends React.Component<Props> {
  firstDocument: ?DocumentPreview;

  @observable query: string = '';
+  @observable params: URLSearchParams = new URLSearchParams();
  @observable offset: number = 0;
  @observable allowLoadMore: boolean = true;
  @observable isFetching: boolean = false;
-  @observable includeArchived: boolean = false;
-  @observable pinToTop: boolean = !!this.props.match.params.query;
+  @observable pinToTop: boolean = !!this.props.match.params.term;

  componentDidMount() {
+    this.handleTermChange();
    this.handleQueryChange();
  }

  componentDidUpdate(prevProps) {
-    if (prevProps.match.params.query !== this.props.match.params.query) {
+    if (prevProps.location.search !== this.props.location.search) {
      this.handleQueryChange();
    }
+    if (prevProps.match.params.term !== this.props.match.params.term) {
+      this.handleTermChange();
+    }
  }

  @keydown('esc')
@@ -79,7 +88,18 @@ class Search extends React.Component<Props> {
  };

  handleQueryChange = () => {
-    const query = this.props.match.params.query;
+    this.params = new URLSearchParams(this.props.location.search);
+    this.offset = 0;
+    this.allowLoadMore = true;
+
+    // To prevent "no results" showing before debounce kicks in
+    this.isFetching = true;
+
+    this.fetchResultsDebounced();
+  };
+
+  handleTermChange = () => {
+    const query = this.props.match.params.term;
    this.query = query ? query : '';
    this.offset = 0;
    this.allowLoadMore = true;
@@ -90,11 +110,51 @@ class Search extends React.Component<Props> {
    this.fetchResultsDebounced();
  };

-  handleFilterChange = ev => {
-    this.includeArchived = ev.target.checked;
-    this.fetchResultsDebounced();
+  handleFilterChange = search => {
+    this.props.history.replace({
+      pathname: this.props.location.pathname,
+      search: queryString.stringify({
+        ...queryString.parse(this.props.location.search),
+        ...search,
+      }),
+    });
  };

+  get includeArchived() {
+    return this.params.get('includeArchived') === 'true';
+  }
+
+  get collectionId() {
+    const id = this.params.get('collectionId');
+    return id ? id : undefined;
+  }
+
+  get userId() {
+    const id = this.params.get('userId');
+    return id ? id : undefined;
+  }
+
+  get dateFilter() {
+    const id = this.params.get('dateFilter');
+    return id ? id : undefined;
+  }
+
+  get isFiltered() {
+    return (
+      this.dateFilter ||
+      this.userId ||
+      this.collectionId ||
+      this.includeArchived
+    );
+  }
+
+  get title() {
+    const query = this.query;
+    const title = 'Search';
+    if (query) return `${query} – ${title}`;
+    return title;
+  }
+
  @action
  loadMoreResults = async () => {
    // Don't paginate if there aren't more results or we’re in the middle of fetching
@@ -113,7 +173,10 @@ class Search extends React.Component<Props> {
        const results = await this.props.documents.search(this.query, {
          offset: this.offset,
          limit: DEFAULT_PAGINATION_LIMIT,
+          dateFilter: this.dateFilter,
          includeArchived: this.includeArchived,
+          collectionId: this.collectionId,
+          userId: this.userId,
        });

        if (results.length > 0) this.pinToTop = true;
@@ -136,20 +199,16 @@ class Search extends React.Component<Props> {
  });

  updateLocation = query => {
-    this.props.history.replace(searchUrl(query));
+    this.props.history.replace({
+      pathname: searchUrl(query),
+      search: this.props.location.search,
+    });
  };

  setFirstDocumentRef = ref => {
    this.firstDocument = ref;
  };

-  get title() {
-    const query = this.query;
-    const title = 'Search';
-    if (query) return `${query} - ${title}`;
-    return title;
-  }
-
  render() {
    const { documents, notFound, location } = this.props;
    const results = documents.searchResults(this.query);
@@ -183,16 +242,40 @@ class Search extends React.Component<Props> {
          )}
          {this.pinToTop && (
            <Filters>
-              <Checkbox
-                label="Include archived"
-                name="includeArchived"
-                checked={this.includeArchived}
-                onChange={this.handleFilterChange}
-                small
+              <StatusFilter
+                includeArchived={this.includeArchived}
+                onSelect={includeArchived =>
+                  this.handleFilterChange({ includeArchived })
+                }
+              />
+              <CollectionFilter
+                collectionId={this.collectionId}
+                onSelect={collectionId =>
+                  this.handleFilterChange({ collectionId })
+                }
+              />
+              <UserFilter
+                userId={this.userId}
+                onSelect={userId => this.handleFilterChange({ userId })}
+              />
+              <DateFilter
+                dateFilter={this.dateFilter}
+                onSelect={dateFilter => this.handleFilterChange({ dateFilter })}
              />
            </Filters>
          )}
-          {showEmpty && <Empty>No matching documents.</Empty>}
+          {showEmpty && (
+            <Empty>
+              No results found for search.{' '}
+              {this.isFiltered && (
+                <React.Fragment>
+                  &nbsp;<Link to={this.props.location.pathname}>
+                    Clear Filters
+                  </Link>.
+                </React.Fragment>
+              )}
+            </Empty>
+          )}
          <ResultList column visible={this.pinToTop}>
            <StyledArrowKeyNavigation
              mode={ArrowKeyNavigation.mode.VERTICAL}
@@ -252,8 +335,13 @@ const StyledArrowKeyNavigation = styled(ArrowKeyNavigation)`
 `;

 const Filters = styled(Flex)`
-  border-bottom: 1px solid ${props => props.theme.divider};
-  margin-bottom: 10px;
+  margin-bottom: 12px;
+  opacity: 0.85;
+  transition: opacity 100ms ease-in-out;
+
+  &:hover {
+    opacity: 1;
+  }
 `;

 export default withRouter(inject('documents')(Search));
--- a/app/scenes/Search/components/CollectionFilter.js
+++ b/app/scenes/Search/components/CollectionFilter.js
@@ -0,0 +1,39 @@
+// @flow
+import * as React from 'react';
+import { observer, inject } from 'mobx-react';
+import FilterOptions from './FilterOptions';
+import CollectionsStore from 'stores/CollectionsStore';
+
+const defaultOption = {
+  key: undefined,
+  label: 'Any collection',
+};
+
+type Props = {
+  collections: CollectionsStore,
+  collectionId: ?string,
+  onSelect: (key: ?string) => void,
+};
+
+@observer
+class CollectionFilter extends React.Component<Props> {
+  render() {
+    const { onSelect, collectionId, collections } = this.props;
+    const collectionOptions = collections.orderedData.map(user => ({
+      key: user.id,
+      label: user.name,
+    }));
+
+    return (
+      <FilterOptions
+        options={[defaultOption, ...collectionOptions]}
+        activeKey={collectionId}
+        onSelect={onSelect}
+        defaultLabel="Any collection"
+        selectedPrefix="Collection:"
+      />
+    );
+  }
+}
+
+export default inject('collections')(CollectionFilter);
--- a/app/scenes/Search/components/DateFilter.js
+++ b/app/scenes/Search/components/DateFilter.js
@@ -0,0 +1,29 @@
+// @flow
+import * as React from 'react';
+import FilterOptions from './FilterOptions';
+
+const options = [
+  { key: undefined, label: 'Any time' },
+  { key: 'day', label: 'Past day' },
+  { key: 'week', label: 'Past week' },
+  { key: 'month', label: 'Past month' },
+  { key: 'year', label: 'Past year' },
+];
+
+type Props = {
+  dateFilter: ?string,
+  onSelect: (key: ?string) => void,
+};
+
+const DateFilter = ({ dateFilter, onSelect }: Props) => {
+  return (
+    <FilterOptions
+      options={options}
+      activeKey={dateFilter}
+      onSelect={onSelect}
+      defaultLabel="Any time"
+    />
+  );
+};
+
+export default DateFilter;
--- a/app/scenes/Search/components/FilterOption.js
+++ b/app/scenes/Search/components/FilterOption.js
@@ -0,0 +1,59 @@
+// @flow
+import * as React from 'react';
+import { CheckmarkIcon } from 'outline-icons';
+import styled from 'styled-components';
+import HelpText from 'components/HelpText';
+import Flex from 'shared/components/Flex';
+
+type Props = {
+  label: string,
+  note?: string,
+  onSelect: () => void,
+  active: boolean,
+};
+
+const FilterOption = ({ label, note, onSelect, active }: Props) => {
+  return (
+    <ListItem active={active}>
+      <Anchor onClick={active ? undefined : onSelect}>
+        <Flex align="center" justify="space-between">
+          <span>
+            {label}
+            {note && <HelpText small>{note}</HelpText>}
+          </span>
+          {active && <Checkmark />}
+        </Flex>
+      </Anchor>
+    </ListItem>
+  );
+};
+
+const Checkmark = styled(CheckmarkIcon)`
+  flex-shrink: 0;
+  padding-left: 4px;
+  fill: ${props => props.theme.text};
+`;
+
+const Anchor = styled('a')`
+  display: flex;
+  flex-direction: column;
+  font-size: 15px;
+  padding: 4px 8px;
+  color: ${props => props.theme.text};
+  min-height: 32px;
+
+  ${HelpText} {
+    font-weight: normal;
+  }
+
+  &:hover {
+    background: ${props => props.theme.listItemHoverBackground};
+  }
+`;
+
+const ListItem = styled('li')`
+  list-style: none;
+  font-weight: ${props => (props.active ? '600' : 'normal')};
+`;
+
+export default FilterOption;
--- a/app/scenes/Search/components/FilterOptions.js
+++ b/app/scenes/Search/components/FilterOptions.js
@@ -0,0 +1,99 @@
+// @flow
+import * as React from 'react';
+import { find } from 'lodash';
+import styled from 'styled-components';
+import Scrollable from 'components/Scrollable';
+import Button from 'components/Button';
+import { DropdownMenu } from 'components/DropdownMenu';
+import FilterOption from './FilterOption';
+
+type Props = {
+  options: {
+    key: ?string,
+    label: string,
+    note?: string,
+  }[],
+  activeKey: ?string,
+  defaultLabel?: string,
+  selectedPrefix?: string,
+  onSelect: (key: ?string) => void,
+};
+
+const FilterOptions = ({
+  options,
+  activeKey,
+  defaultLabel,
+  selectedPrefix = '',
+  onSelect,
+}: Props) => {
+  const selected = find(options, { key: activeKey }) || options[0];
+  const selectedLabel = selected ? `${selectedPrefix} ${selected.label}` : '';
+
+  return (
+    <DropdownButton label={activeKey ? selectedLabel : defaultLabel}>
+      <List>
+        {options.map(option => (
+          <FilterOption
+            key={option.key}
+            onSelect={() => onSelect(option.key)}
+            active={option.key === activeKey}
+            {...option}
+          />
+        ))}
+      </List>
+    </DropdownButton>
+  );
+};
+
+const Content = styled('div')`
+  padding: 0 8px;
+  width: 250px;
+  max-height: 50vh;
+
+  p {
+    margin-bottom: 0;
+  }
+`;
+
+const StyledButton = styled(Button)`
+  box-shadow: none;
+  text-transform: none;
+  border-color: transparent;
+  height: 28px;
+
+  &:hover {
+    background: transparent;
+  }
+`;
+
+const SearchFilter = props => {
+  return (
+    <DropdownMenu
+      className={props.className}
+      label={
+        <StyledButton neutral disclosure small>
+          {props.label}
+        </StyledButton>
+      }
+      leftAlign
+    >
+      {({ closePortal }) => (
+        <Content>
+          <Scrollable>{props.children}</Scrollable>
+        </Content>
+      )}
+    </DropdownMenu>
+  );
+};
+
+const DropdownButton = styled(SearchFilter)`
+  margin-right: 8px;
+`;
+
+const List = styled('ol')`
+  list-style: none;
+  margin: 0;
+  padding: 0;
+`;
+
+export default FilterOptions;
--- a/app/scenes/Search/components/StatusFilter.js
+++ b/app/scenes/Search/components/StatusFilter.js
@@ -0,0 +1,34 @@
+// @flow
+import * as React from 'react';
+import FilterOptions from './FilterOptions';
+
+const options = [
+  {
+    key: undefined,
+    label: 'Active documents',
+    note: 'Documents in collections you are able to access',
+  },
+  {
+    key: 'true',
+    label: 'All documents',
+    note: 'Include documents that are in the archive',
+  },
+];
+
+type Props = {
+  includeArchived: boolean,
+  onSelect: (key: ?string) => void,
+};
+
+const StatusFilter = ({ includeArchived, onSelect }: Props) => {
+  return (
+    <FilterOptions
+      options={options}
+      activeKey={includeArchived ? 'true' : undefined}
+      onSelect={onSelect}
+      defaultLabel="Active documents"
+    />
+  );
+};
+
+export default StatusFilter;
--- a/app/scenes/Search/components/UserFilter.js
+++ b/app/scenes/Search/components/UserFilter.js
@@ -0,0 +1,43 @@
+// @flow
+import * as React from 'react';
+import { observer, inject } from 'mobx-react';
+import FilterOptions from './FilterOptions';
+import UsersStore from 'stores/UsersStore';
+
+const defaultOption = {
+  key: undefined,
+  label: 'Any author',
+};
+
+type Props = {
+  users: UsersStore,
+  userId: ?string,
+  onSelect: (key: ?string) => void,
+};
+
+@observer
+class UserFilter extends React.Component<Props> {
+  componentDidMount() {
+    this.props.users.fetchPage({ limit: 100 });
+  }
+
+  render() {
+    const { onSelect, userId, users } = this.props;
+    const userOptions = users.orderedData.map(user => ({
+      key: user.id,
+      label: user.name,
+    }));
+
+    return (
+      <FilterOptions
+        options={[defaultOption, ...userOptions]}
+        activeKey={userId}
+        onSelect={onSelect}
+        defaultLabel="Any author"
+        selectedPrefix="Author:"
+      />
+    );
+  }
+}
+
+export default inject('users')(UserFilter);