Add advanced search dropdown to React editor

Description

Allows a dropdown panel to open that includes all the fields of multiple-field search, including the filter toggles.

Values entered in multi-field search should be reflected in the values shown against each field on the dropdown panel.
Typing a value in a field of the dropdown panel should update the multi-field search string to include what is typed (while it is typed).

Technical note

component is already implemented in storybook
date inputs are strings for now (later they will be calendar inputs)
needs a new API endpoint
- move the GWT handler code to a service
- call the service from the GWT handler
- call the service from the new REST API endpoint
API endpoint will re-use the code from the GWT action handler
needs to filter the textflow list on the editor app

Activity

Show:

David Mason

July 31, 2017, 10:58 AM

Copy link to comment

there are still some layout issues with the search input. It does not expand to the available width - it is always so narrow that it cuts off the placeholder text even on a wide screen. The layout also breaks with widths of 640px or less, and from 961px to 1034px.

Ultimately we need a flex layout here, but that would need some changes to the other elements on that header to keep their internal layout in a flex context. That is a bit much to tackle right now so we should just fix the broken layout ranges and make a separate task to change that header to use a flex layout.

I moved all the css for that component into EditorSearchInput/index.css, as far as I could see at least - there were duplicated sections in the Root component's css that both apply only to the EditorSearchInput component and it was not clear where those sections ended. There are a lot of duplicate rules too but that's another thing that's too big to tackle right now.

Kathryn Gough

July 31, 2017, 11:07 AM

Copy link to comment

Ok , will fix the widths.