Update packages, fix table page selector

frontend/package.json

@@ -3,63 +3,63 @@
 	"version": "3.0.0",
 	"private": true,
 	"dependencies": {
-		"@chakra-ui/react": "^1.8.3",
+		"@chakra-ui/react": "^2.1.0",
 		"@emotion/react": "^11",
-		"@emotion/styled": "^11.6.0",
-		"@testing-library/jest-dom": "5.16.2",
-		"@testing-library/react": "12.1.2",
+		"@emotion/styled": "^11.8.1",
+		"@testing-library/jest-dom": "5.16.4",
+		"@testing-library/react": "13.2.0",
 		"@types/humps": "^2.0.1",
-		"@types/jest": "27.4.0",
-		"@types/lodash": "4.14.178",
-		"@types/node": "17.0.15",
-		"@types/react": "17.0.39",
-		"@types/react-dom": "17.0.11",
+		"@types/jest": "27.5.1",
+		"@types/lodash": "4.14.182",
+		"@types/node": "17.0.35",
+		"@types/react": "18.0.9",
+		"@types/react-dom": "18.0.4",
 		"@types/react-router-dom": "5.3.3",
-		"@types/react-table": "^7.7.9",
-		"@types/styled-components": "5.1.22",
-		"@typescript-eslint/eslint-plugin": "^5.10.2",
-		"@typescript-eslint/parser": "^5.10.2",
+		"@types/react-table": "^7.7.12",
+		"@types/styled-components": "5.1.25",
+		"@typescript-eslint/eslint-plugin": "^5.25.0",
+		"@typescript-eslint/parser": "^5.25.0",
 		"babel-eslint": "^10.1.0",
 		"classnames": "^2.3.1",
-		"country-flag-icons": "^1.4.20",
+		"country-flag-icons": "^1.5.2",
 		"date-fns": "2.28.0",
-		"eslint": "^8.8.0",
-		"eslint-config-prettier": "^8.3.0",
-		"eslint-config-react-app": "^7.0.0",
+		"eslint": "^8.16.0",
+		"eslint-config-prettier": "^8.5.0",
+		"eslint-config-react-app": "^7.0.1",
 		"eslint-loader": "^4.0.2",
 		"eslint-plugin-flowtype": "^8.0.3",
-		"eslint-plugin-import": "^2.25.4",
+		"eslint-plugin-import": "^2.26.0",
 		"eslint-plugin-jsx-a11y": "^6.5.1",
 		"eslint-plugin-prettier": "^4.0.0",
-		"eslint-plugin-react": "^7.28.0",
-		"eslint-plugin-react-hooks": "^4.3.0",
+		"eslint-plugin-react": "^7.30.0",
+		"eslint-plugin-react-hooks": "^4.5.0",
 		"formik": "^2.2.9",
 		"framer-motion": "^6",
 		"humps": "^2.0.1",
 		"jest-date-mock": "1.0.8",
 		"jest-fetch-mock": "3.0.3",
-		"jest-junit": "^13.0.0",
-		"jest-localstorage-mock": "2.4.18",
-		"jest-runner-eslint": "1.0.0",
+		"jest-junit": "^13.2.0",
+		"jest-localstorage-mock": "2.4.21",
+		"jest-runner-eslint": "1.0.1",
 		"lodash": "4.17.21",
-		"moment": "2.29.1",
+		"moment": "2.29.3",
 		"node-sass": "^7.0.1",
-		"prettier": "2.5.1",
+		"prettier": "2.6.2",
 		"query-string": "7.1.1",
-		"react": "^17.0.2",
+		"react": "^18.1.0",
 		"react-async": "10.0.1",
-		"react-dom": "17.0.2",
-		"react-focus-lock": "^2.8.1",
+		"react-dom": "18.1.0",
+		"react-focus-lock": "^2.9.1",
 		"react-icons": "^4.3.1",
-		"react-intl": "^5.24.6",
-		"react-markdown": "^8.0.1",
-		"react-query": "^3.34.19",
-		"react-router-dom": "^6.2.1",
-		"react-scripts": "5.0.0",
-		"react-table": "^7.7.0",
-		"rooks": "5.10.0",
+		"react-intl": "^6.0.1",
+		"react-markdown": "^8.0.3",
+		"react-query": "^3.39.0",
+		"react-router-dom": "^6.3.0",
+		"react-scripts": "5.0.1",
+		"react-table": "^7.8.0",
+		"rooks": "5.11.2",
 		"tmp": "^0.2.1",
-		"typescript": "^4.5.5"
+		"typescript": "^4.6.4"
 	},
 	"scripts": {
 		"start": "react-scripts start",
@@ -105,7 +105,7 @@
 		}
 	},
 	"devDependencies": {
-		"@formatjs/cli": "^4.8.2",
+		"@formatjs/cli": "^5.0.1",
 		"@types/country-flag-icons": "^1.2.0"
 	}
 }

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"