Update packages, fix table page selector

frontend/src/components/Table/TableHelpers.ts

@@ -23,6 +23,7 @@ const tableEvents = {
 };
 
 const tableEventReducer = (state: any, { type, payload }: any) => {
+	let offset = state.offset;
 	switch (type) {
 		case tableEvents.PAGE_CHANGED:
 			return {
@@ -45,9 +46,15 @@ const tableEventReducer = (state: any, { type, payload }: any) => {
 				sortBy: payload,
 			};
 		case tableEvents.FILTERS_CHANGED:
+			if (state.filters !== payload) {
+				// this actually was a legit change
+				// sets to page 1 when filter is modified
+				offset = 0;
+			}
 			return {
 				...state,
 				filters: payload,
+				offset,
 			};
 		default:
 			throw new Error(`Unhandled action type: ${type}`);

frontend/src/components/Table/TableLayout.tsx

@@ -40,7 +40,6 @@ export interface TableLayoutProps {
 	canPreviousPage: any;
 	previousPage: any;
 	canNextPage: any;
-	setPageSize: any;
 	nextPage: any;
 	pageCount: any;
 	pageOptions: any;
@@ -59,7 +58,6 @@ function TableLayout({
 	canPreviousPage,
 	previousPage,
 	canNextPage,
-	setPageSize,
 	nextPage,
 	pageCount,
 	pageOptions,
@@ -102,7 +100,7 @@ function TableLayout({
 
 	return (
 		<>
-			<Table {...getTableProps()}>
+			<Table size="sm" {...getTableProps()}>
 				<Thead>
 					{headerGroups.map((headerGroup: any) => (
 						<Tr {...headerGroup.getHeaderGroupProps()}>
@@ -215,7 +213,11 @@ function TableLayout({
 							disabled={!canPreviousPage && !canNextPage}
 							aria-label={intl.formatMessage({
 								id: "tables.pagination-select",
-							})}>
+							})}
+							onChange={(e: any) => {
+								const page = parseInt(e.target.value, 10) - 1;
+								gotoPage(page);
+							}}>
 							{getPageList()}
 						</Select>
 						<IconButton

frontend/src/components/Table/TextFilter.tsx

@@ -113,7 +113,7 @@ function TextFilter({ column: { filterValue, setFilter } }: any) {
 											</FormControl>
 										)}
 									</Field>
-									<ButtonGroup d="flex" justifyContent="flex-end">
+									<ButtonGroup display="flex" justifyContent="flex-end">
 										<Button
 											size="sm"
 											variant="outline"