Migrate VM List screen to PF4

[rszwajko]

Depends on #1540

Includes:

1. toolbars
2. tooltips
3. spinner
4. masthead icons

Fixes:

1. use translation independent filters
2. allow filter multiselection

[rszwajko]

Overview with filters

VM Actions on a card

VM Actions inside toolbar

Small screen mode

Account Settings toolbar

VM Console toolbar

[ovirt-infra]

All tests passed

[ovirt-infra]

All tests passed

[ovirt-infra]

All tests passed

[ovirt-infra]

All tests passed

[ovirt-infra]

Some tests failed

[ovirt-infra]

All tests passed

[rszwajko]

@sjd78 @sgratch
Note that some styling issues has been fixed in #1584 i.e. truncating action name on the VM card.

[ovirt-infra]

All tests passed

[sjd78]

At first the >4 cards in a row on larger widths was annoying, but it is growing on me. The spacing between the name/status and action button should match the space between the icon and the name/status. It looks a bit bigger. (My guess is .vm-status style doesn't need a min-height).

Your VmActions changes are ok with me, I just didn't look very hard. The original code was a bit of a mess. Yours looks to work well, so I'm just giving that bit a quick skim. VmDetailsActions and VmDropdownActions structure is 👍.

VM List filter toolbar is looking 👍!

Minimal tweaks suggested.

[ovirt-infra]

All tests passed

[sjd78]

L&F issues noted (I'll resolve code comments containing them):

• On card ... The spacing between the name/status and action button should match the space between the icon and the name/status. It looks a bit bigger. (My guess is .vm-status style doesn't need a min-height).

• Card Gallery ... There is something off with the gutters. The gallery container itself doesn't seem to have a left and right gutter / margin. Looks like the scroll-container div has a top and bottom margin padding but needs a left and right to match.

These looks ok in #1594:

• Toolbar ... VmSort font size and asc / desc icon left margin and size are off. asc/desc icon clickable?

• Toolbar ... the "results of" text font size is smaller than expected

[ovirt-infra]

All tests passed

[rszwajko]

/ost

[sjd78]

LGTM

[sjd78]

OST fail:

selenium.common.exceptions.NoSuchElementException: Message: no such element: Unable to locate element: {"method":"xpath","selector":"//div[@class='col-sm-12']/h5"}

[rszwajko]

/ost

[ovirt-infra]

All tests passed

[rszwajko]

/ost

[rszwajko]

/ost

[rszwajko]

Forced pushed with minor changes:

diff --git a/src/components/Toolbar/VmSort.js b/src/components/Toolbar/VmSort.js
index a4bd3cec..7f0d8cc1 100644
--- a/src/components/Toolbar/VmSort.js
+++ b/src/components/Toolbar/VmSort.js
@@ -61,8 +61,8 @@ const VmSort = ({ sort, msg, onSortChange }) => {
         />
       </ToolbarItem>
       <ToolbarItem>
-        <Button variant='plain' ariaLabel={msg.sortDirection()} onClick={() => onSortChange({ ...sort, isAsc: !isAsc })}>
-          {isAsc ? <SortAmountDownAltIcon/> : <SortAmountDownIcon key='icon'/>}
+        <Button variant='plain' aria-label={msg.sortDirection()} onClick={() => onSortChange({ ...sort, isAsc: !isAsc })}>
+          {isAsc ? <SortAmountDownAltIcon/> : <SortAmountDownIcon/>}
         </Button>
       </ToolbarItem>
     </ToolbarGroup>
diff --git a/src/components/Toolbar/VmsListToolbar.js b/src/components/Toolbar/VmsListToolbar.js
index e448d8e9..ac2989cc 100644
--- a/src/components/Toolbar/VmsListToolbar.js
+++ b/src/components/Toolbar/VmsListToolbar.js
@@ -33,6 +33,12 @@ const VmsListToolbar = ({ match, vms, pools, filters = {}, onClearFilters, msg }
           <VmFilters/>
           <VmSort />
           <ToolbarItem>
+            {
+            /* integration tests (OST) expect VM count under xpath //div[@class='col-sm-12']/h5
+            preserve this path:
+            keep the class 'col-sm-12' as marker class
+            keep the structure <div> followed by <h5> */
+            }
             <div className='col-sm-12'>
               <h5>
                 {

[ovirt-infra]

All tests passed

[rszwajko]

/ost

[sjd78]

Most recent OST fail:

selenium.common.exceptions.ElementClickInterceptedException: Message: element click intercepted: Element <a href="#" id="usermenu-logout">...</a> is not clickable at point (1451, 100). Other element would receive the click: <div class="pf-c-tooltip__content">...</div>