[GQL-19] #8537 Move the scroll/count of rows facility to a position that is above the table, not below as currently

GITHUB_PR_NUMBER: 8708
GITHUB_PR_URL: https://github.com/hasura/graphql-engine/pull/8708

PR-URL: https://github.com/hasura/graphql-engine-mono/pull/5127
Co-authored-by: GitStart <1501599+gitstart@users.noreply.github.com>
Co-authored-by: Vijay Prasanna <11921040+vijayprasanna13@users.noreply.github.com>
Co-authored-by: Erik Magnusson <32518962+ejkkan@users.noreply.github.com>
GitOrigin-RevId: e9fb1fb8e8ae272f6095a4bf4e1fda934a90026f

console/src/components/Common/Common.module.scss

@@ -622,10 +622,6 @@ code {
   padding-right: 15px;
 }
 
-.padd_top {
-  padding-top: 20px !important;
-}
-
 .clear_fix {
   clear: both;
 }
@@ -1579,7 +1575,7 @@ code {
 }
 
 .connect_form_width {
-  width: 66%;
+  width: 50%;
 }
 
 /* container height subtracting top header and bottom scroll bar */

console/src/components/Common/TableCommon/ReactTableOverrides.css

@@ -13,9 +13,16 @@
   overflow: unset;
 }
 
+.ReactTable .pagination-top {
+  top: 0;
+  position: sticky;
+  background-color: #f8fafb;
+  z-index: 1;
+}
+
 .ReactTable .rt-noData {
   padding: 0;
-  top: 48px;
+  top: 93px;
   background: none;
 }
 
@@ -43,6 +50,9 @@
 .ReactTable .rt-thead.-header {
   box-shadow: none;
   min-height: 32px;
+  top: 59px;
+  position: sticky;
+  z-index: 1;
 }
 
 .ReactTable .-pagination {

console/src/components/Common/TableCommon/Table.scss

@@ -0,0 +1,226 @@
+@import '../Common.scss';
+
+.container {
+  padding: 0;
+}
+
+.tableContainer {
+  overflow: auto;
+  width: 95%;
+  padding-right: 5px; // removes scrollbar if width is enough
+}
+
+.form_flex {
+  display: flex;
+  flex-direction: column;
+}
+
+.schemaWrapper {
+  width: 100%;
+
+  .schemaSidebarSection {
+    display: inline-block;
+    width: 100%;
+
+    a,
+    label {
+      display: inline-block !important;
+      font-weight: bold;
+    }
+
+    .changeSchema {
+      width: 70%;
+      margin-left: 10px;
+      display: inline-block;
+      font-weight: bold;
+    }
+  }
+}
+
+.viewRowsContainer {
+  border-left: 1px solid #ddd;
+}
+
+.tableHeaderCell {
+  text-align: left;
+  i {
+    font-size: 12px;
+    position: absolute;
+    top: calc(50% - 5px);
+    right: 8px;
+  }
+}
+
+.insertContainer {
+  button {
+    margin: 0 10px;
+  }
+
+  label.radioLabel {
+    padding-top: 0;
+
+    input[type='radio'] {
+      margin-top: 10px;
+    }
+  }
+
+  span.radioSpan {
+    line-height: 34px;
+  }
+}
+
+.table {
+  width: auto;
+
+  tr:nth-child(even) {
+    background: #f4f4f4;
+  }
+
+  th {
+    //min-width: 100px;
+    font-weight: 300;
+  }
+
+  tbody > tr > td {
+    padding: 4px 8px;
+    max-width: 600px;
+    white-space: pre;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+
+.expandable {
+  color: #779ecb;
+  text-decoration: underline;
+}
+
+a.expanded {
+  color: red;
+}
+
+.expandable:hover {
+  background: #eee;
+  transition: 0.2s;
+  cursor: pointer;
+}
+
+.tableNameInput {
+  width: 300px;
+}
+
+.select {
+  width: 300px;
+  display: inline-block;
+  height: 30px;
+  padding-bottom: 5px;
+  padding-top: 5px;
+}
+
+.addCol {
+  .input {
+    width: 300px;
+    display: inline-block;
+  }
+
+  .inputCheckbox {
+    width: auto;
+    display: inline-block;
+    padding-left: 20px;
+    margin: 0px 20px;
+    box-shadow: none;
+  }
+
+  .inputDefault {
+    width: 150px;
+    margin: 0px 20px;
+    display: inline-block;
+  }
+
+  .select {
+    display: inline-block;
+    width: 300px;
+    height: 34px;
+  }
+
+  .defaultWidth {
+    width: 200px;
+    margin-right: 0px;
+  }
+}
+
+.insertBox {
+  min-width: 270px;
+}
+
+.insertBoxLabel {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.tablesBody {
+  padding-top: 20px;
+}
+
+.count {
+  margin-top: 15px;
+}
+
+.addTablesBody {
+  padding-top: 20px;
+  padding-bottom: 30px;
+}
+
+.dataBreadCrumb {
+  padding-top: 20px;
+  padding-bottom: 10px;
+  font-size: 12px;
+  color: #6b7280;
+}
+
+.dataBreadCrumb a {
+  color: #6b7280 !important;
+}
+
+.tableCellCenterAlignedOverflow {
+  text-align: center;
+  overflow: hidden !important;
+}
+
+.tableCellExpanded {
+  white-space: pre-wrap;
+}
+
+.tableCenterContent {
+  display: flex;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+}
+
+.overflowUnset {
+  overflow: unset !important;
+}
+
+.bulkDeleteButton {
+  margin: 10px;
+  font-size: 16px;
+  padding: 0 6px;
+}
+
+.headerInputCheckbox {
+  height: 16px;
+  margin-bottom: 2px;
+  margin-right: 3px !important;
+}
+
+.labelText {
+  display: inline-block;
+  font-size: 14px;
+}
+
+input[type='checkbox'].migrationCheckbox {
+  margin: 0;
+  margin-right: 10px;
+}

console/src/components/Services/Data/TableBrowseRows/ViewRows.js

@@ -1037,6 +1037,8 @@ const ViewRows = props => {
         }
         defaultReorders={columnsOrder}
         showPagination={!shouldHidePagination || useCustomPagination}
+        showPaginationTop
+        showPaginationBottom={false}
         {...paginationProps}
       />
     );
@@ -1070,7 +1072,7 @@ const ViewRows = props => {
           />
         </div>
       )}
-      <div className="w-fit ml-0 mt-md">
+      <div className="w-fit ml-0 pt-sm">
         {getSelectedRowsSection()}
         <div>
           <div>{renderTableBody()}</div>

console/src/new-components/PaginationWithOnlyNav/PaginationWithOnlyNav.tsx

@@ -14,7 +14,7 @@ export const PaginationWithOnlyNav = (props: PaginationWithOnlyNavProps) => {
   const { offset, limit, changePage, changePageSize, rows } = props;
   const newPage = offset / limit;
   return (
-    <div className="flex ml-sm mr-sm justify-around">
+    <div className="flex ml-sm mr-sm mb-sm mt-sm justify-around">
       <div>
         <Button
           onClick={() => changePage(newPage - 1)}