Migrated tablewrapper to use react-virtualized (#387)

Co-authored-by: Benjamin Perez <benjamin@bexsoft.net>

Author: bexsoft

portal-ui/package.json

@@ -17,6 +17,7 @@
     "@types/react-redux": "^7.1.5",
     "@types/react-router": "^5.1.3",
     "@types/react-router-dom": "^5.1.2",
+    "@types/react-virtualized": "^9.21.10",
     "@types/recharts": "^1.8.9",
     "@types/superagent": "^4.1.4",
     "@types/webpack-env": "^1.14.1",
@@ -40,6 +41,8 @@
     "react-redux": "^7.1.3",
     "react-router-dom": "^5.1.2",
     "react-scripts": "3.4.4",
+    "react-virtualized": "^9.22.2",
+    "react-window-infinite-loader": "^1.0.5",
     "recharts": "^1.8.5",
     "redux": "^4.0.4",
     "redux-thunk": "^2.3.0",

portal-ui/src/index.tsx

@@ -21,6 +21,7 @@ import Routes from "./Routes";
 import configureStore from "./store";
 import * as serviceWorker from "./serviceWorker";
 import { ThemeProvider, withStyles } from "@material-ui/core/styles";
+import "react-virtualized/styles.css";
 
 import "./index.css";
 import theme from "./theme/main";

portal-ui/src/screens/Console/Buckets/ListBuckets/ListBuckets.tsx

@@ -197,7 +197,7 @@ const ListBuckets = ({
     }
   });
 
-  const showInPage = filteredRecords.slice(offset, offset + rowsPerPage);
+  const showInPage = filteredRecords;
 
   return (
     <React.Fragment>
@@ -266,26 +266,14 @@ const ListBuckets = ({
                   label: "Size",
                   elementKey: "size",
                   renderFunction: niceBytes,
+                  width: 60,
+                  contentTextAlign: "right",
                 },
               ]}
               isLoading={loading}
               records={showInPage}
               entityName="Buckets"
               idField="name"
-              paginatorConfig={{
-                rowsPerPageOptions: [5, 10, 25],
-                colSpan: 3,
-                count: filteredRecords.length,
-                rowsPerPage: rowsPerPage,
-                page: page,
-                SelectProps: {
-                  inputProps: { "aria-label": "rows per page" },
-                  native: true,
-                },
-                onChangePage: handleChangePage,
-                onChangeRowsPerPage: handleChangeRowsPerPage,
-                ActionsComponent: MinTablePaginationActions,
-              }}
             />
           </Grid>
         </Grid>

portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ListObjects.tsx

@@ -103,6 +103,9 @@ const styles = (theme: Theme) =>
         marginLeft: 10,
       },
     },
+    browsePaper: {
+      height: "calc(100vh - 280px)",
+    },
     "@global": {
       ".rowElementRaw:hover  .iconFileElm": {
         backgroundImage: "url(/images/ob_file_filled.svg)",
@@ -485,12 +488,15 @@ const ListObjects = ({
                   label: "Size",
                   elementKey: "size",
                   renderFunction: niceBytes,
+                  width: 60,
+                  contentTextAlign: "right",
                 },
               ]}
               isLoading={loading}
               entityName="Objects"
               idField="name"
               records={filteredRecords}
+              customPaperHeight={classes.browsePaper}
             />
           </Grid>
         </Grid>

portal-ui/src/screens/Console/Buckets/ViewBucket/ViewBucket.tsx

@@ -642,20 +642,6 @@ class ViewBucket extends React.Component<IViewBucketProps, IViewBucketState> {
                   records={filteredRecords}
                   entityName="Events"
                   idField="id"
-                  paginatorConfig={{
-                    rowsPerPageOptions: [5, 10, 25],
-                    colSpan: 3,
-                    count: totalRecords,
-                    rowsPerPage: rowsPerPage,
-                    page: page,
-                    SelectProps: {
-                      inputProps: { "aria-label": "rows per page" },
-                      native: true,
-                    },
-                    onChangePage: handleChangePage,
-                    onChangeRowsPerPage: handleChangeRowsPerPage,
-                    ActionsComponent: MinTablePaginationActions,
-                  }}
                 />
               </TabPanel>
               <TabPanel index={1} value={curTab}>
@@ -683,20 +669,6 @@ class ViewBucket extends React.Component<IViewBucketProps, IViewBucketState> {
                   records={filteredRules}
                   entityName="Replication Rules"
                   idField="id"
-                  paginatorConfig={{
-                    rowsPerPageOptions: [5, 10, 25],
-                    colSpan: 3,
-                    count: totalRecords,
-                    rowsPerPage: rowsPerPage,
-                    page: page,
-                    SelectProps: {
-                      inputProps: { "aria-label": "rows per page" },
-                      native: true,
-                    },
-                    onChangePage: handleChangePage,
-                    onChangeRowsPerPage: handleChangeRowsPerPage,
-                    ActionsComponent: MinTablePaginationActions,
-                  }}
                 />
               </TabPanel>
             </Grid>

portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts

@@ -104,7 +104,7 @@ const radioBasic = {
   width: 12,
   height: 12,
   borderRadius: "100%",
-  'input:disabled ~ &': {
+  "input:disabled ~ &": {
     border: "1px solid #9C9C9C",
   },
 };
@@ -120,8 +120,7 @@ export const radioIcons = {
 
 export const containerForHeader = (bottomSpacing: any) => ({
   container: {
-    padding: "110px 33px 30px",
-    paddingBottom: bottomSpacing,
+    padding: "110px 33px 0",
     "& h6": {
       color: "#777777",
       fontSize: 14,
@@ -210,3 +209,9 @@ export const objectBrowserCommon = {
     },
   },
 };
+
+export const selectorsCommon = {
+  multiSelectTable: {
+    height: 200,
+  },
+};

portal-ui/src/screens/Console/Common/TableWrapper/TableActionButton.tsx

@@ -25,6 +25,14 @@ import ConsoleIcon from "./TableActionIcons/ConsoleIcon";
 import GetAppIcon from "@material-ui/icons/GetApp";
 import SvgIcon from "@material-ui/core/SvgIcon";
 import { Link } from "react-router-dom";
+import { createStyles, withStyles } from "@material-ui/core/styles";
+
+const styles = () =>
+  createStyles({
+    spacing: {
+      margin: "0 8px",
+    },
+  });
 
 interface IActionButton {
   type: string;
@@ -34,6 +42,7 @@ interface IActionButton {
   selected: boolean;
   sendOnlyId?: boolean;
   idField: string;
+  classes: any;
 }
 
 const defineIcon = (type: string, selected: boolean) => {
@@ -67,6 +76,7 @@ const TableActionButton = ({
   selected,
   to,
   sendOnlyId = false,
+  classes,
 }: IActionButton) => {
   const valueClick = sendOnlyId ? valueToSend[idField] : valueToSend;
 
@@ -82,6 +92,7 @@ const TableActionButton = ({
             }
           : () => null
       }
+      className={classes.spacing}
     >
       {defineIcon(type, selected)}
     </IconButton>
@@ -107,4 +118,4 @@ const TableActionButton = ({
   return null;
 };
 
-export default TableActionButton;
+export default withStyles(styles)(TableActionButton);