Manageiq-ui-classic: Move Search to the Toolbar

Created on 31 Oct 2019  路  6Comments  路  Source: ManageIQ/manageiq-ui-classic

Pre-Requisites

  • [ ] [the expression editor is re-written in React](https://github.com/ManageIQ/manageiq-ui-classic/issues/6835)
  • [ ] the advanced search modal is converted to React

The search/adv search box has long occupied space in the title area (even when not visible), causing some titles to wrap.

Screen Shot 2019-10-30 at 7 54 38 PM
Screen Shot 2019-10-30 at 7 55 49 PM

Mobile/Tablet:
Screen Shot 2019-10-30 at 9 28 01 PM

Now that we've optimized the toolbar by removing History and icons from the dropdowns, I think it would be a good time to move search (as a search icon adjacent to the view buttons), which is a PF standard: https://www.patternfly.org/v3/pattern-library/forms-and-controls/toolbar/#code

Like this:
Screen Shot 2019-10-30 at 8 07 29 PM

And once clicked:

Simple Search

Screen Shot 2019-10-30 at 9 12 38 PM

Advanced Search (arrow or other icon would trigger the modal as it does now )

Screen Shot 2019-10-30 at 9 12 14 PM

@terezanovotna @Loicavenel @martinpovolny Thoughts?

enhancement formattinstyling help wanted ureview

Most helpful comment

I like this!

All 6 comments

@epwinchell 'epwinchell, martinpovolny' is an invalid assignee, ignoring...

@miq-bot assign @epwinchell

I like this!

I'm a little worried that without the new expresison editor this would be a little hacky to implement :confused:

  1. To have this in the toolbar, it needs to be ideally in react
  2. If it is written in react, the button that opens the expression editor is in react
  3. This implies that we open old world code from the new world
  4. H.A.C.K. :disappointed:

On the other hand if we have the new expression editor, we just have to open a new world component from another new world component, maybe even using redux.

As @skateman wrote. This needs to be done AFTER

  • the expression editor is written and
  • the advanced search modal is converted to React.

Before that it's not a good idea.

@epwinchell 'epwinchell' is an invalid assignee, ignoring...

Was this page helpful?
0 / 5 - 0 ratings