pagination and empty state fix

client/src/Components/v2/design-elements/BasePage.tsx

@@ -100,7 +100,7 @@ export const BasePage = ({
 interface BasePageWithStatesProps extends StackProps {
 	loading: boolean;
 	error: any;
-	items: any[];
+	totalCount: number;
 	bullets: string[] | unknown;
 	page: string;
 	actionButtonText: string;
@@ -111,7 +111,7 @@ interface BasePageWithStatesProps extends StackProps {
 export const BasePageWithStates = ({
 	loading,
 	error,
-	items,
+	totalCount,
 	page,
 	bullets,
 	actionButtonText,
@@ -119,9 +119,9 @@ export const BasePageWithStates = ({
 	children,
 	...props
 }: BasePageWithStatesProps) => {
-	const showLoading = loading && (!items || items.length === 0);
+	const showLoading = loading && totalCount === 0;
 
-	if (!loading && isEmpty(items)) {
+	if (!loading && totalCount === 0) {
 		return (
 			<EmptyFallback
 				bullets={bullets}
@@ -146,23 +146,17 @@ export const BasePageWithStates = ({
 interface MonitorBasePageWithStatesProps extends StackProps {
 	loading: boolean;
 	error: any;
-	items: any[];
+	totalCount: number;
 	page: string;
 	actionLink?: string;
 	children: React.ReactNode;
 	priorityFallback?: React.ReactNode;
 }
 
-const isEmpty = (items: any[]) => {
-	if (!items) return true;
-	if (Array.isArray(items) && items.length === 0) return true;
-	return false;
-};
-
 export const MonitorBasePageWithStates = ({
 	loading,
 	error,
-	items,
+	totalCount,
 	page,
 	actionLink,
 	children,
@@ -171,7 +165,7 @@ export const MonitorBasePageWithStates = ({
 }: MonitorBasePageWithStatesProps) => {
 	const { t } = useTranslation();
 
-	const showLoading = loading && (!items || items.length === 0);
+	const showLoading = loading && totalCount === 0;
 
 	if (priorityFallback) {
 		return (
@@ -185,7 +179,7 @@ export const MonitorBasePageWithStates = ({
 		);
 	}
 
-	if (!loading && isEmpty(items)) {
+	if (!loading && totalCount === 0) {
 		return (
 			<EmptyMonitorFallback
 				page={page}

client/src/Components/v2/design-elements/Table.tsx

@@ -27,7 +27,7 @@ import TablePagination from "@mui/material/TablePagination";
 import type { TablePaginationOwnProps } from "@mui/material/TablePagination";
 
 import { useTranslation } from "react-i18next";
-import { useState, Fragment } from "react";
+import { useState, Fragment, useEffect } from "react";
 import { useTheme } from "@mui/material/styles";
 import useMediaQuery from "@mui/material/useMediaQuery";
 
@@ -454,12 +454,26 @@ function HasMoreTablePaginationActions(props: HasMoreTablePaginationActionsProps
 interface PaginationProps extends TablePaginationOwnProps {
 	component?: React.ElementType;
 	hasMore?: boolean;
+	itemsOnPage?: number;
 }
 
 export const Pagination = ({ ...props }: PaginationProps) => {
-	const { hasMore, ...rest } = props;
+	const { hasMore, itemsOnPage, ...rest } = props;
 	const isSmall = useMediaQuery((theme: any) => theme.breakpoints.down("sm"));
 	const theme = useTheme();
+
+	useEffect(() => {
+		if (
+			typeof itemsOnPage === "number" &&
+			itemsOnPage === 0 &&
+			rest.count > 0 &&
+			rest.page > 0 &&
+			rest.onPageChange
+		) {
+			rest.onPageChange(null, rest.page - 1);
+		}
+	}, [itemsOnPage, rest.count, rest.page, rest.onPageChange]);
+
 	const labelDisplayedRows = ({
 		from,
 		to,