Skip to content

Rethinking filters/search

Description

This is a meta issue for a collection of filter/search changes, so they can be understand and discussed in context.

Proposal

Big picture:

  • Allow meta filters in search field. e.g. label=CI.
  • Add autocomplete to meta filters in search field.
  • Update search field with meta filters as use filters UI.
  • Let users hide filters UI and/or put it behind an icon.

Additional changes:

  • When searching, treat multiple words as logical AND, not an exact phrase.
  • Support NOT (e.g. using a - prefix).
  • Support boolean logic (AND and OR and ()), but only in the search field.
  • Support exact phrases using quotation marks.
  • Put filters and search on the same level. Entering a new search term shouldn't reset your filters and vice versa.
  • Replace label filter UI w/ autocompleting tag interface, like in the issue edit view.
  • Add filter for subscribed.
  • Save often-used filters/searches

Links / references

Final design

Empty state

smart-filters-empty

Types of filters

As soon as you select the text field, a dropdown comes up to show you the types of filters you can use. You can select one of the options by clicking or hitting Enter. You can navigate the list with the arrow keys in your keyboard or by typing in the type of filter you want. If you type in a word that's not part of the list, a normal text search will be performed. smart-filters--text-keep-typing

Using a filter

When you select the type of filter you want to use, the first half of the token appears and the next dropdown shows up. You can either scroll through the whole list or start typing to narrow it down. smart-filters__author-dropdown

Narrow down results

As you start typing, the closest match gets selected. You can click it or hit enter to select. smart-filters__autocomplete

Filter was added

Once you select the user, the token gets added to the field. smart-filters__author-added_copy

Selecting a token

When you click on a token or hit backspace when the cursor is next to it, the token gets selected, which is represented by it becoming darker. smart-filters__selected-token_copy

Editing a filter

If you double click a token or press enter when it's selected, you can edit the value for the filter. smart-filters__editing-token_copy

Assignee dropdown

smart-filters__assignee-dropdown

Weight dropdown

smart-filters__weight-dropdown

Label dropdown

smart-filters__label__dropdown

Default / Saved filters

The dropdown on the left houses a list of default filters to make it easier to perform common searches, as well as any filters the user has saved. smart-filters__saved-filters

Scrolling

The dropdown at the bottom is fixed and the list scrolls underneath it. smart-filters__saved-filters--scroll

Using a saved filter

The star turns orange to indicate that you're using a saved filter. If you edit this search the star turns grey again. smart-filters__saved-filter

Several filters added

smart-filters__author-complex-search

Mobile - Empty state

smart-filter__mobile--empty

Mobile - Types of filters

When the user taps on the search bar, it takes control of the screen and the user immediately sees the list where they can select the type of filter they want. smart-filter__mobile--types

Mobile - Filtering

Just like on desktop, when they select the type of filter they want, the next dropdown comes up. They can scroll through the list and avoid typing at all. smart-filter__mobile--author-autocomplete

Mobile - Filter added

smart-filter__mobile--added