From f53ec8968b682188512c7ff258c8885cac7971a5 Mon Sep 17 00:00:00 2001
From: Florent BEAUCHAMP <flo850@free.fr>
Date: Wed, 29 Sep 2021 17:35:46 +0200
Subject: [PATCH] feat(xo-web/SortedTable): move filter and pagination to top
 (#5914)

---
 CHANGELOG.unreleased.md                       |  1 +
 packages/xo-web/src/common/single-line-row.js |  5 +-
 .../xo-web/src/common/sorted-table/index.js   | 46 +++++++++----------
 3 files changed, 28 insertions(+), 24 deletions(-)

diff --git a/CHANGELOG.unreleased.md b/CHANGELOG.unreleased.md
index 4440b5c25..52b4cb448 100644
--- a/CHANGELOG.unreleased.md
+++ b/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
 
diff --git a/packages/xo-web/src/common/single-line-row.js b/packages/xo-web/src/common/single-line-row.js
index 9285c209b..d30d2b21f 100644
--- a/packages/xo-web/src/common/single-line-row.js
+++ b/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>
 )
 
diff --git a/packages/xo-web/src/common/sorted-table/index.js b/packages/xo-web/src/common/sorted-table/index.js
index e124e530b..52e4a6381 100644
--- a/packages/xo-web/src/common/sorted-table/index.js
+++ b/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>
     )
   }