fix(xo-web/task): items-per-page dropdown position (#5584)

CHANGELOG.unreleased.md

@@ -14,6 +14,7 @@
 > Users must be able to say: “I had this issue, happy to know it's fixed”
 
 - [VM/advanced] Fix `an error has occurred` in `Misc` section [#5592](https://github.com/vatesfr/xen-orchestra/issues/5592) (PR [#5604](https://github.com/vatesfr/xen-orchestra/pull/5604))
+- [Task] Fix the items-per-page dropdown position (PR [#5584](https://github.com/vatesfr/xen-orchestra/pull/5584))
 
 ### Packages to release
 

packages/xo-web/src/common/sorted-table/index.js

@@ -272,6 +272,7 @@ class SortedTable extends Component {
     ),
     groupedActions: actionsShape,
     individualActions: actionsShape,
+    itemsPerPageContainer: PropTypes.func,
     onSelect: PropTypes.func,
     paginationContainer: PropTypes.func,
     rowAction: PropTypes.func,
@@ -735,7 +736,15 @@ class SortedTable extends Component {
 
   render() {
     const { props, state } = this
-    const { actions, filterContainer, individualActions, onSelect, paginationContainer, shortcutsTarget } = props
+    const {
+      actions,
+      filterContainer,
+      individualActions,
+      itemsPerPageContainer,
+      onSelect,
+      paginationContainer,
+      shortcutsTarget,
+    } = props
     const { all, itemsPerPage } = state
     const groupedActions = this._getGroupedActions()
 
@@ -759,6 +768,16 @@ class SortedTable extends Component {
       <TableFilter filters={props.filters} onChange={this._setFilter} ref='filterInput' value={this._getFilter()} />
     )
 
+    const dropdownItemsPerPage = (
+      <DropdownButton bsStyle='info' title={itemsPerPage}>
+        {ITEMS_PER_PAGE_OPTIONS.map(nItems => (
+          <MenuItem key={nItems} onClick={() => this._setNItemsPerPage(nItems)}>
+            {nItems}
+          </MenuItem>
+        ))}
+      </DropdownButton>
+    )
+
     const userData = this._getUserData()
 
     return (
@@ -871,13 +890,11 @@ class SortedTable extends Component {
               {filterContainer ? <Portal container={() => filterContainer()}>{filterInstance}</Portal> : filterInstance}
             </Col>
             <Col mediumSize={1} className='pull-right'>
-              <DropdownButton bsStyle='info' title={itemsPerPage}>
-                {ITEMS_PER_PAGE_OPTIONS.map(nItems => (
-                  <MenuItem key={nItems} onClick={() => this._setNItemsPerPage(nItems)}>
-                    {nItems}
-                  </MenuItem>
-                ))}
-              </DropdownButton>
+              {itemsPerPageContainer !== undefined ? (
+                <Portal container={() => itemsPerPageContainer()}>{dropdownItemsPerPage}</Portal>
+              ) : (
+                dropdownItemsPerPage
+              )}
             </Col>
           </SingleLineRow>
         </Container>

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

@@ -277,6 +277,10 @@ export default class Tasks extends Component {
     )
   )
 
+  _getItemsPerPageContainer = () => this.state.itemsPerPageContainer
+
+  _setItemsPerPageContainer = itemsPerPageContainer => this.setState({ itemsPerPageContainer })
+
   render() {
     const { props } = this
     const { intl, nTasks, pools } = props
@@ -286,12 +290,15 @@ export default class Tasks extends Component {
       <Page header={HEADER} title={`(${nTasks}) ${formatMessage(messages.taskPage)}`}>
         <Container>
           <Row className='mb-1'>
-            <Col mediumSize={8}>
+            <Col mediumSize={7}>
               <SelectPool multi onChange={this.linkState('pools')} />
             </Col>
             <Col mediumSize={4}>
               <div ref={container => this.setState({ container })} />
             </Col>
+            <Col mediumSize={1}>
+              <div ref={this._setItemsPerPageContainer} />
+            </Col>
           </Row>
           <Row>
             <Col>
@@ -299,6 +306,7 @@ export default class Tasks extends Component {
                 collection={this._getTasks()}
                 columns={COLUMNS}
                 filterContainer={() => this.state.container}
+                itemsPerPageContainer={this._getItemsPerPageContainer}
                 groupedActions={GROUPED_ACTIONS}
                 individualActions={INDIVIDUAL_ACTIONS}
                 stateUrlParam='s'