Add advanced search dropdown to React editor


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

  1. Values entered in multi-field search should be reflected in the values shown against each field on the dropdown panel.

  2. 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


Kathryn Gough
July 31, 2017, 1:07 AM

Ok , will fix the widths.

David Mason
July 31, 2017, 12:58 AM

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.

Ready for Release


David Mason


David Mason