feat(xo-web/SortedTable): move filter and pagination to top (#5914)

CHANGELOG.unreleased.md

@@ -10,6 +10,7 @@
 - [Backup] Go back to previous page instead of going to the overview after editing a job: keeps current filters and page (PR [#5913](https://github.com/vatesfr/xen-orchestra/pull/5913))
 - [Health] Do not take into consideration duplicated MAC addresses from CR VMs (PR [#5916](https://github.com/vatesfr/xen-orchestra/pull/5916))
 - [Health] Ability to filter duplicated MAC addresses by running VMs (PR [#5917](https://github.com/vatesfr/xen-orchestra/pull/5917))
+- [Tables] Move the search bar and pagination to the top of the table (PR [#5914](https://github.com/vatesfr/xen-orchestra/pull/5914))
 
 ### Bug fixes
 

packages/xo-web/src/common/single-line-row.js

@@ -6,7 +6,10 @@ const COL_STYLE = { marginTop: 'auto', marginBottom: 'auto' }
 
 const SingleLineRow = ({ children, className }) => (
   <div className={`${className || ''} row`} style={SINGLE_LINE_STYLE}>
-    {React.Children.map(children, child => child && cloneElement(child, { style: COL_STYLE }))}
+    {React.Children.map(
+      children,
+      child => child && cloneElement(child, { style: { ...child.props.style, ...COL_STYLE } })
+    )}
   </div>
 )
 

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

@@ -800,6 +800,29 @@ class SortedTable extends Component {
             targetNodeSelector={shortcutsTarget}
           />
         )}
+        <Container className='mb-1 p-0'>
+          <SingleLineRow>
+            <Col mediumSize={7}>
+              {displayPagination &&
+                (paginationContainer !== undefined ? (
+                  // Rebuild container function to refresh Portal component.
+                  <Portal container={() => paginationContainer()}>{paginationInstance}</Portal>
+                ) : (
+                  paginationInstance
+                ))}
+            </Col>
+            <Col mediumSize={4}>
+              {filterContainer ? <Portal container={() => filterContainer()}>{filterInstance}</Portal> : filterInstance}
+            </Col>
+            <Col mediumSize={1} style={{ justifyContent: 'end', display: 'flex' }}>
+              {itemsPerPageContainer !== undefined ? (
+                <Portal container={() => itemsPerPageContainer()}>{dropdownItemsPerPage}</Portal>
+              ) : (
+                dropdownItemsPerPage
+              )}
+            </Col>
+          </SingleLineRow>
+        </Container>
         <table className='table'>
           <thead className='thead-default'>
             <tr>
@@ -885,29 +908,6 @@ class SortedTable extends Component {
             )}
           </tbody>
         </table>
-        <Container>
-          <SingleLineRow>
-            <Col mediumSize={7}>
-              {displayPagination &&
-                (paginationContainer !== undefined ? (
-                  // Rebuild container function to refresh Portal component.
-                  <Portal container={() => paginationContainer()}>{paginationInstance}</Portal>
-                ) : (
-                  paginationInstance
-                ))}
-            </Col>
-            <Col mediumSize={4}>
-              {filterContainer ? <Portal container={() => filterContainer()}>{filterInstance}</Portal> : filterInstance}
-            </Col>
-            <Col mediumSize={1} className='pull-right'>
-              {itemsPerPageContainer !== undefined ? (
-                <Portal container={() => itemsPerPageContainer()}>{dropdownItemsPerPage}</Portal>
-              ) : (
-                dropdownItemsPerPage
-              )}
-            </Col>
-          </SingleLineRow>
-        </Container>
       </div>
     )
   }