Update Users Uploads and Sources tables

globaldothealth · May 1, 2024 · f22653b · f22653b
1 parent 6b4ab01
commit f22653b
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 41 deletions.
diff --git a/verification/curator-service/ui/src/components/SourceTable.tsx b/verification/curator-service/ui/src/components/SourceTable.tsx
@@ -643,7 +643,6 @@ class SourceTable extends React.Component<Props, SourceTableState> {
                         // https://docs.mongodb.com/manual/text-search/
                         search: false,
                         filtering: false,
-                        sorting: false,
                         emptyRowsWhenPaging: false,
                         padding: 'dense',
                         draggable: false, // No need to be able to drag and drop headers.

diff --git a/verification/curator-service/ui/src/components/UploadsTable.tsx b/verification/curator-service/ui/src/components/UploadsTable.tsx
@@ -1,30 +1,18 @@
 import MaterialTable, { QueryResult } from '@material-table/core';
-import { Paper, TablePagination, Typography } from '@mui/material';
+import { Paper, Typography } from '@mui/material';
 import { useRef, useState } from 'react';
-
 import { styled } from '@mui/material/styles';
-
 import { Link } from 'react-router-dom';
 import MuiAlert from '@mui/material/Alert';
 import axios from 'axios';
 import renderDate from './util/date';
+import { makeStyles } from 'tss-react/mui';
 
 const Alert = styled(MuiAlert)(({ theme }) => ({
     borderRadius: theme.spacing(1),
     marginTop: theme.spacing(2),
 }));
 
-const Spacer = styled('span')(() => ({
-    flex: 1,
-}));
-
-const TablePaginationBar = styled('div')(({ theme }) => ({
-    alignItems: 'center',
-    backgroundColor: theme.palette.background.default,
-    display: 'flex',
-    height: '64px',
-}));
-
 interface UploadSummary {
     numCreated?: number;
     numUpdated?: number;
@@ -64,6 +52,12 @@ interface TableRow {
     accepted: boolean;
 }
 
+const useStyles = makeStyles()(() => ({
+    uploadsSection: {
+        marginTop: '66px',
+    },
+}));
+
 const UploadsTable = () => {
     // eslint-disable-next-line
     const tableRef = useRef<any>(null);
@@ -72,16 +66,19 @@ const UploadsTable = () => {
     const [error, setError] = useState('');
     const [pageSize, setPageSize] = useState(10);
 
+    const { classes } = useStyles();
+
     return (
         <div>
-            <Paper>
+            <Paper className={classes?.uploadsSection}>
                 {error && (
                     <Alert variant="filled" severity="error">
                         {error}
                     </Alert>
                 )}
                 <MaterialTable
                     tableRef={tableRef}
+                    title={<Typography>Uploads</Typography>}
                     columns={[
                         {
                             title: 'ID',
@@ -203,15 +200,6 @@ const UploadsTable = () => {
                         Container: (props): JSX.Element => (
                             <Paper elevation={0} {...props}></Paper>
                         ),
-                        Pagination: (props): JSX.Element => {
-                            return (
-                                <TablePaginationBar>
-                                    <Typography>Uploads</Typography>
-                                    <Spacer />
-                                    <TablePagination {...props} />
-                                </TablePaginationBar>
-                            );
-                        },
                     }}
                     style={{ fontFamily: 'Inter' }}
                     options={{
@@ -225,8 +213,7 @@ const UploadsTable = () => {
                         draggable: false, // No need to be able to drag and drop headers.
                         pageSize: pageSize,
                         pageSizeOptions: [5, 10, 20, 50, 100],
-                        paginationPosition: 'top',
-                        toolbar: false,
+                        paginationPosition: 'bottom',
                         maxBodyHeight: 'calc(100vh - 15em)',
                         headerStyle: {
                             zIndex: 1,

diff --git a/verification/curator-service/ui/src/components/Users.tsx b/verification/curator-service/ui/src/components/Users.tsx
@@ -10,7 +10,6 @@ import {
     DialogTitle,
     Menu,
     Paper,
-    TablePagination,
     Typography,
     FormControl,
     MenuItem,
@@ -67,6 +66,9 @@ const useStyles = makeStyles()((theme: Theme) => ({
         display: 'flex',
         height: '64px',
     },
+    usersSection: {
+        marginTop: '66px',
+    },
 }));
 
 const rowMenuStyles = makeStyles()((theme: Theme) => ({
@@ -284,7 +286,7 @@ const Users = ({ onUserChange }: UsersProps) => {
     };
 
     return (
-        <Paper>
+        <Paper className={classes?.usersSection}>
             {error && (
                 <MuiAlert
                     classes={{ root: classes.alert }}
@@ -296,6 +298,7 @@ const Users = ({ onUserChange }: UsersProps) => {
             )}
             <MaterialTable
                 tableRef={tableRef}
+                title={<Typography>Users</Typography>}
                 columns={[
                     ...((user?.roles ?? []).includes(Role.Admin)
                         ? [
@@ -390,30 +393,21 @@ const Users = ({ onUserChange }: UsersProps) => {
                     Container: (props): JSX.Element => (
                         <Paper elevation={0} {...props}></Paper>
                     ),
-                    Pagination: (props): JSX.Element => {
-                        return (
-                            <div className={classes.tablePaginationBar}>
-                                <Typography>Users</Typography>
-                                <span className={classes.spacer}></span>
-                                <TablePagination {...props}></TablePagination>
-                            </div>
-                        );
-                    },
                 }}
                 style={{ fontFamily: 'Inter' }}
                 options={{
                     search: false,
                     filtering: false,
-                    sorting: false,
                     padding: 'dense',
                     draggable: false, // No need to be able to drag and drop headers.
                     pageSize: pageSize,
                     pageSizeOptions: [5, 10, 20, 50, 100],
-                    paginationPosition: 'top',
-                    toolbar: false,
+                    paginationPosition: 'bottom',
+                    // toolbar: false,
                     headerStyle: {
                         zIndex: 1,
                     },
+                    emptyRowsWhenPaging: false,
                 }}
                 onRowsPerPageChange={(newPageSize: number) => {
                     setPageSize(newPageSize);