feat(xo-web/home): fix toolbar in header (#2798)

Fixes #1581

packages/xo-web/src/xo-app/home/index.js

@@ -4,6 +4,7 @@ import _ from 'intl'
 import ActionButton from 'action-button'
 import Button from 'button'
 import CenterPanel from 'center-panel'
+import classNames from 'classnames'
 import Component from 'base-component'
 import defined, { get } from 'xo-defined'
 import Icon from 'icon'
@@ -14,7 +15,6 @@ import Pagination from 'pagination'
 import propTypes from 'prop-types-decorator'
 import React from 'react'
 import Shortcuts from 'shortcuts'
-import SingleLineRow from 'single-line-row'
 import Tooltip from 'tooltip'
 import { Card, CardHeader, CardBlock } from 'card'
 import {
@@ -782,9 +782,28 @@ export default class Home extends Component {
   // Header --------------------------------------------------------------------
 
   _renderHeader () {
-    const { isAdmin, noResourceSets, type } = this.props
-    const { filters } = OPTIONS[type]
     const customFilters = this._getCustomFilters()
+    const filteredItems = this._getFilteredItems()
+    const nItems = this._getNumberOfItems()
+    const { isAdmin, items, noResourceSets, type } = this.props
+
+    const {
+      selectedHosts,
+      selectedPools,
+      selectedResourceSets,
+      selectedTags,
+      sortBy,
+    } = this.state
+
+    const options = OPTIONS[type]
+    const {
+      filters,
+      mainActions,
+      otherActions,
+      showHostsSelector,
+      showPoolsSelector,
+      showResourceSetsSelector,
+    } = options
 
     return (
       <Container>
@@ -862,65 +881,8 @@ export default class Home extends Component {
             </Col>
           )}
         </Row>
-      </Container>
+        <Row className={classNames(styles.itemRowHeader, 'mt-1')}>
-    )
+          <Col smallSize={11} mediumSize={3}>
-  }
-
-  // ---------------------------------------------------------------------------
-
-  render () {
-    const { isAdmin, noResourceSets } = this.props
-
-    const nItems = this._getNumberOfItems()
-
-    if (nItems < 1) {
-      return <NoObjects_ isAdmin={isAdmin} noResourceSets={noResourceSets} />
-    }
-
-    const filteredItems = this._getFilteredItems()
-    const visibleItems = this._getVisibleItems()
-
-    const {
-      activePage,
-      expandAll,
-      highlighted,
-      selectedHosts,
-      selectedItems,
-      selectedPools,
-      selectedResourceSets,
-      selectedTags,
-      sortBy,
-    } = this.state
-    const { items, type } = this.props
-
-    const options = OPTIONS[type]
-    const {
-      Item,
-      mainActions,
-      otherActions,
-      showHostsSelector,
-      showPoolsSelector,
-      showResourceSetsSelector,
-    } = options
-
-    // Necessary because indeterminate cannot be used as an attribute
-    if (this.refs.masterCheckbox) {
-      this.refs.masterCheckbox.indeterminate =
-        this._getIsSomeSelected() && !this._getIsAllSelected()
-    }
-
-    return (
-      <Page header={this._renderHeader()}>
-        <Shortcuts
-          handler={this._getShortcutsHandler()}
-          isolate
-          name='Home'
-          targetNodeSelector='body'
-        />
-        <div>
-          <div className={styles.itemContainer}>
-            <SingleLineRow className={styles.itemContainerHeader}>
-              <Col smallsize={11} mediumSize={3}>
             <input
               checked={this._getIsAllSelected()}
               onChange={this._toggleMaster}
@@ -987,10 +949,7 @@ export default class Home extends Component {
                     rootClose
                     placement='bottom'
                     overlay={
-                          <Popover
+                      <Popover className={styles.selectObject} id='poolPopover'>
-                            className={styles.selectObject}
-                            id='poolPopover'
-                          >
                         <SelectPool
                           autoFocus
                           multi
@@ -1011,10 +970,7 @@ export default class Home extends Component {
                     rootClose
                     placement='bottom'
                     overlay={
-                          <Popover
+                      <Popover className={styles.selectObject} id='HostPopover'>
-                            className={styles.selectObject}
-                            id='HostPopover'
-                          >
                         <SelectHost
                           autoFocus
                           multi
@@ -1035,10 +991,7 @@ export default class Home extends Component {
                   rootClose
                   placement='bottom'
                   overlay={
-                        <Popover
+                    <Popover className={styles.selectObject} id='tagPopover'>
-                          className={styles.selectObject}
-                          id='tagPopover'
-                        >
                       <SelectTag
                         autoFocus
                         multi
@@ -1075,8 +1028,7 @@ export default class Home extends Component {
                       }
                     >
                       <Button btnStyle='link'>
-                            <Icon icon='resource-set' />{' '}
+                        <Icon icon='resource-set' /> {_('homeAllResourceSets')}
-                            {_('homeAllResourceSets')}
                       </Button>
                     </OverlayTrigger>
                   )}
@@ -1107,12 +1059,48 @@ export default class Home extends Component {
               </div>
             )}
           </Col>
-              <Col smallsize={1} mediumSize={1} className='text-xs-right'>
+          <Col smallSize={1} mediumSize={1} className='text-xs-right'>
             <Button onClick={this._expandAll}>
               <Icon icon='nav' />
             </Button>
           </Col>
-            </SingleLineRow>
+        </Row>
+      </Container>
+    )
+  }
+
+  // ---------------------------------------------------------------------------
+
+  render () {
+    const { isAdmin, noResourceSets } = this.props
+
+    const nItems = this._getNumberOfItems()
+
+    if (nItems < 1) {
+      return <NoObjects_ isAdmin={isAdmin} noResourceSets={noResourceSets} />
+    }
+
+    const filteredItems = this._getFilteredItems()
+    const visibleItems = this._getVisibleItems()
+    const { Item } = OPTIONS[this.props.type]
+    const { activePage, expandAll, highlighted, selectedItems } = this.state
+
+    // Necessary because indeterminate cannot be used as an attribute
+    if (this.refs.masterCheckbox) {
+      this.refs.masterCheckbox.indeterminate =
+        this._getIsSomeSelected() && !this._getIsAllSelected()
+    }
+
+    return (
+      <Page header={this._renderHeader()}>
+        <Shortcuts
+          handler={this._getShortcutsHandler()}
+          isolate
+          name='Home'
+          targetNodeSelector='body'
+        />
+        <div>
+          <div className={styles.itemContainer}>
             {isEmpty(filteredItems) ? (
               <p className='text-xs-center mt-1'>
                 <a className='btn btn-link' onClick={this._clearFilter}>