diff --git a/verification/curator-service/ui/src/components/SourceTable.tsx b/verification/curator-service/ui/src/components/SourceTable.tsx index fbb574e79..19c73bb3d 100644 --- 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 { // 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 index fe7cdc32a..f1ee1f4a9 100644 --- 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(null); @@ -72,9 +66,11 @@ const UploadsTable = () => { const [error, setError] = useState(''); const [pageSize, setPageSize] = useState(10); + const { classes } = useStyles(); + return (
- + {error && ( {error} @@ -82,6 +78,7 @@ const UploadsTable = () => { )} Uploads} columns={[ { title: 'ID', @@ -203,15 +200,6 @@ const UploadsTable = () => { Container: (props): JSX.Element => ( ), - Pagination: (props): JSX.Element => { - return ( - - Uploads - - - - ); - }, }} 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 index 851aae295..25908de13 100644 --- 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 ( - + {error && ( { )} Users} columns={[ ...((user?.roles ?? []).includes(Role.Admin) ? [ @@ -390,30 +393,21 @@ const Users = ({ onUserChange }: UsersProps) => { Container: (props): JSX.Element => ( ), - Pagination: (props): JSX.Element => { - return ( -
- Users - - -
- ); - }, }} 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);