fix(ui/datatables): sync page count with filtering [EE-5890] (#10010)

app/react/edge/components/EdgeGroupAssociationTable.tsx

@@ -51,10 +51,10 @@ export function EdgeGroupAssociationTable({
   onClickRow: (env: Environment) => void;
 } & AutomationTestingProps) {
   const tableState = useTableStateWithoutStorage('Name');
-  const [page, setPage] = useState(1);
+  const [page, setPage] = useState(0);
   const environmentsQuery = useEnvironmentList({
     pageLimit: tableState.pageSize,
-    page,
+    page: page + 1,
     search: tableState.search,
     sort: tableState.sortBy.id as 'Group' | 'Name',
     order: tableState.sortBy.desc ? 'desc' : 'asc',
@@ -87,8 +87,10 @@ export function EdgeGroupAssociationTable({
       columns={columns}
       settingsManager={tableState}
       dataset={environments}
+      isServerSidePagination
+      page={page}
       onPageChange={setPage}
-      pageCount={Math.ceil(totalCount / tableState.pageSize)}
+      totalCount={totalCount}
       renderRow={(row) => (
         <TableRow<DecoratedEnvironment>
           cells={row.getVisibleCells()}
@@ -98,7 +100,6 @@ export function EdgeGroupAssociationTable({
       emptyContentLabel={emptyContentLabel}
       data-cy={dataCy}
       disableSelect
-      totalCount={totalCount}
     />
   );
 }

app/react/edge/edge-devices/WaitingRoomView/Datatable/Datatable.tsx

@@ -24,8 +24,6 @@ export function Datatable() {
     search: tableState.search,
   });
 
-  const pageCount = Math.ceil(totalCount / tableState.pageSize);
-
   return (
     <GenericDatatable
       settingsManager={tableState}
@@ -37,10 +35,10 @@ export function Datatable() {
         <TableActions selectedRows={selectedRows} />
       )}
       isLoading={isLoading}
-      totalCount={totalCount}
-      pageCount={pageCount}
+      isServerSidePagination
       page={page}
       onPageChange={setPage}
+      totalCount={totalCount}
       description={<Filter />}
     />
   );

app/react/edge/edge-stacks/ItemView/EnvironmentsDatatable/EnvironmentsDatatable.tsx

@@ -40,7 +40,7 @@ export function EnvironmentsDatatable() {
     (value) => (value ? parseInt(value, 10) : undefined)
   );
   const tableState = useTableStateWithoutStorage('name');
-  const endpointsQuery = useEnvironmentList({
+  const environmentsQuery = useEnvironmentList({
     pageLimit: tableState.pageSize,
     page: page + 1,
     search: tableState.search,
@@ -56,7 +56,7 @@ export function EnvironmentsDatatable() {
   const gitConfigCommitHash = edgeStackQuery.data?.GitConfig?.ConfigHash || '';
   const environments: Array<EdgeStackEnvironment> = useMemo(
     () =>
-      endpointsQuery.environments.map(
+      environmentsQuery.environments.map(
         (env) =>
           ({
             ...env,
@@ -72,7 +72,7 @@ export function EnvironmentsDatatable() {
     [
       currentFileVersion,
       edgeStackQuery.data?.Status,
-      endpointsQuery.environments,
+      environmentsQuery.environments,
       gitConfigCommitHash,
       gitConfigURL,
     ]
@@ -81,13 +81,15 @@ export function EnvironmentsDatatable() {
   return (
     <Datatable
       columns={columns}
-      isLoading={endpointsQuery.isLoading}
+      isLoading={environmentsQuery.isLoading}
       dataset={environments}
       settingsManager={tableState}
       title="Environments Status"
       titleIcon={HardDrive}
+      isServerSidePagination
+      page={page}
       onPageChange={setPage}
-      totalCount={endpointsQuery.totalCount}
+      totalCount={environmentsQuery.totalCount}
       emptyContentLabel="No environment available."
       disableSelect
       description={