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

app/components/Button.js

@@ -2,6 +2,7 @@
 import * as React from 'react';
 import styled from 'styled-components';
 import { darken } from 'polished';
+import { ExpandedIcon } from 'outline-icons';
 
 const RealButton = styled.button`
   display: inline-block;
@@ -22,6 +23,10 @@ const RealButton = styled.button`
   cursor: pointer;
   user-select: none;
 
+  svg {
+    fill: ${props => props.theme.buttonText};
+  }
+
   &::-moz-focus-inner {
     padding: 0;
     border: 0;
@@ -45,6 +50,10 @@ const RealButton = styled.button`
     box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px;
     border: 1px solid ${darken(0.1, props.theme.buttonNeutralBackground)};
 
+    svg {
+      fill: ${props.theme.buttonNeutralText};
+    }
+
     &:hover {
       background: ${darken(0.05, props.theme.buttonNeutralBackground)};
       border: 1px solid ${darken(0.15, props.theme.buttonNeutralBackground)};
@@ -70,8 +79,9 @@ const Label = styled.span`
 `;
 
 const Inner = styled.span`
-  padding: 0 ${props => (props.small ? 8 : 12)}px;
   display: flex;
+  padding: 0 ${props => (props.small ? 8 : 12)}px;
+  padding-right: ${props => (props.disclosure ? 2 : props.small ? 8 : 12)}px;
   line-height: ${props => (props.small ? 24 : 28)}px;
   justify-content: center;
   align-items: center;
@@ -88,6 +98,7 @@ export type Props = {
   className?: string,
   children?: React.Node,
   small?: boolean,
+  disclosure?: boolean,
 };
 
 export default function Button({
@@ -95,6 +106,7 @@ export default function Button({
   icon,
   children,
   value,
+  disclosure,
   small,
   ...rest
 }: Props) {
@@ -103,9 +115,10 @@ export default function Button({
 
   return (
     <RealButton small={small} {...rest}>
-      <Inner hasIcon={hasIcon} small={small}>
+      <Inner hasIcon={hasIcon} small={small} disclosure={disclosure}>
         {hasIcon && icon}
         {hasText && <Label hasIcon={hasIcon}>{children || value}</Label>}
+        {disclosure && <ExpandedIcon />}
       </Inner>
     </RealButton>
   );

app/components/Checkbox.js

@@ -25,6 +25,7 @@ const Wrapper = styled.div`
 const Label = styled.label`
   display: flex;
   align-items: center;
+  user-select: none;
 `;
 
 export default function Checkbox({

app/components/DropdownMenu/DropdownMenu.js

@@ -8,21 +8,32 @@ import styled from 'styled-components';
 import Flex from 'shared/components/Flex';
 import { fadeAndScaleIn } from 'shared/styles/animations';
 
+let previousClosePortal;
+
+type Children =
+  | React.Node
+  | ((options: { closePortal: () => void }) => React.Node);
+
 type Props = {
   label: React.Node,
   onOpen?: () => void,
   onClose?: () => void,
-  children?: React.Node,
+  children?: Children,
   className?: string,
   style?: Object,
+  leftAlign?: boolean,
 };
 
 @observer
 class DropdownMenu extends React.Component<Props> {
   @observable top: number;
   @observable right: number;
+  @observable left: number;
 
-  handleOpen = (openPortal: (SyntheticEvent<*>) => *) => {
+  handleOpen = (
+    openPortal: (SyntheticEvent<*>) => void,
+    closePortal: () => void
+  ) => {
     return (ev: SyntheticMouseEvent<*>) => {
       ev.preventDefault();
       const currentTarget = ev.currentTarget;
@@ -32,7 +43,18 @@ class DropdownMenu extends React.Component<Props> {
         const bodyRect = document.body.getBoundingClientRect();
         const targetRect = currentTarget.getBoundingClientRect();
         this.top = targetRect.bottom - bodyRect.top;
-        this.right = bodyRect.width - targetRect.left - targetRect.width;
+
+        if (this.props.leftAlign) {
+          this.left = targetRect.left;
+        } else {
+          this.right = bodyRect.width - targetRect.left - targetRect.width;
+        }
+
+        // attempt to keep only one flyout menu open at once
+        if (previousClosePortal) {
+          previousClosePortal();
+        }
+        previousClosePortal = closePortal;
         openPortal(ev);
       }
     };
@@ -51,18 +73,27 @@ class DropdownMenu extends React.Component<Props> {
         >
           {({ closePortal, openPortal, portal }) => (
             <React.Fragment>
-              <Label onClick={this.handleOpen(openPortal)}>{label}</Label>
+              <Label onClick={this.handleOpen(openPortal, closePortal)}>
+                {label}
+              </Label>
               {portal(
                 <Menu
-                  onClick={ev => {
-                    ev.stopPropagation();
-                    closePortal();
-                  }}
+                  onClick={
+                    typeof children === 'function'
+                      ? undefined
+                      : ev => {
+                          ev.stopPropagation();
+                          closePortal();
+                        }
+                  }
                   style={this.props.style}
                   top={this.top}
+                  left={this.left}
                   right={this.right}
                 >
-                  {children}
+                  {typeof children === 'function'
+                    ? children({ closePortal })
+                    : children}
                 </Menu>
               )}
             </React.Fragment>
@@ -83,10 +114,11 @@ const Label = styled(Flex).attrs({
 
 const Menu = styled.div`
   animation: ${fadeAndScaleIn} 200ms ease;
-  transform-origin: 75% 0;
+  transform-origin: ${({ left }) => (left !== undefined ? '25%' : '75%')} 0;
 
   position: absolute;
-  right: ${({ right }) => right}px;
+  ${({ left }) => (left !== undefined ? `left: ${left}px` : '')};
+  ${({ right }) => (right !== undefined ? `right: ${right}px` : '')};
   top: ${({ top }) => top}px;
   z-index: 1000;
 

app/components/Empty.js

@@ -3,7 +3,7 @@ import * as React from 'react';
 import styled from 'styled-components';
 
 type Props = {
-  children: string,
+  children: React.Node,
 };
 
 const Empty = (props: Props) => {

app/routes.js

@@ -96,7 +96,7 @@ export default function Routes() {
               />
               <Route path={`/doc/${slug}`} component={KeyedDocument} />
               <Route exact path="/search" component={Search} />
-              <Route exact path="/search/:query" component={Search} />
+              <Route exact path="/search/:term" component={Search} />
               <Route path="/404" component={Error404} />
               <Route component={NotFound} />
             </Switch>

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));

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);

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;

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;

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;

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;

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);

app/stores/DocumentsStore.js

@@ -1,6 +1,15 @@
 // @flow
 import { observable, action, computed, runInAction } from 'mobx';
-import { without, map, find, orderBy, filter, compact, uniq } from 'lodash';
+import {
+  without,
+  map,
+  find,
+  orderBy,
+  filter,
+  compact,
+  omitBy,
+  uniq,
+} from 'lodash';
 import { client } from 'utils/ApiClient';
 import naturalSort from 'shared/utils/naturalSort';
 import invariant from 'invariant';
@@ -225,8 +234,10 @@ export default class DocumentsStore extends BaseStore<Document> {
     query: string,
     options: PaginationParams = {}
   ): Promise<SearchResult[]> => {
+    // $FlowFixMe
+    const compactedOptions = omitBy(options, o => !o);
     const res = await client.get('/documents.search', {
-      ...options,
+      ...compactedOptions,
       query,
     });
     invariant(res && res.data, 'Search response should be available');