From f7f2d930cafb835ed23809963ef8f4e7feea3e32 Mon Sep 17 00:00:00 2001
From: Grzegorz Zdunek <grzegorz.zdunek@goteleport.com>
Date: Mon, 28 Oct 2024 11:08:49 +0100
Subject: [PATCH 1/2] Fix `DataTable` navigation regression

---
 .../design/src/DataTable/Table.test.tsx       | 34 +++++++++++++++++++
 web/packages/design/src/DataTable/useTable.ts |  2 +-
 2 files changed, 35 insertions(+), 1 deletion(-)

diff --git a/web/packages/design/src/DataTable/Table.test.tsx b/web/packages/design/src/DataTable/Table.test.tsx
index f53522f924c57..77ee038dbfb9d 100644
--- a/web/packages/design/src/DataTable/Table.test.tsx
+++ b/web/packages/design/src/DataTable/Table.test.tsx
@@ -18,6 +18,7 @@
 
 import React from 'react';
 import { within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 import { render, fireEvent, screen } from 'design/utils/testing';
 
@@ -366,3 +367,36 @@ describe('sorting by iso date string', () => {
     expect(rows[2]).toHaveTextContent('a3');
   });
 });
+
+test('navigate to next and previous pages', async () => {
+  render(
+    <Table
+      data={data}
+      columns={[
+        {
+          key: 'hostname',
+          headerText: 'created',
+        },
+      ]}
+      emptyText=""
+      pagination={{ pageSize: 2 }}
+    />
+  );
+
+  let { rows } = getTableRows();
+  expect(rows).toHaveLength(2);
+  expect(rows[0]).toHaveTextContent(data[0].hostname);
+  expect(rows[1]).toHaveTextContent(data[1].hostname);
+
+  await userEvent.click(screen.getByTitle('Next page'));
+  rows = getTableRows().rows;
+  expect(rows).toHaveLength(2);
+  expect(rows[0]).toHaveTextContent(data[2].hostname);
+  expect(rows[1]).toHaveTextContent(data[3].hostname);
+
+  await userEvent.click(screen.getByTitle('Previous page'));
+  rows = getTableRows().rows;
+  expect(rows).toHaveLength(2);
+  expect(rows[0]).toHaveTextContent(data[0].hostname);
+  expect(rows[1]).toHaveTextContent(data[1].hostname);
+});
diff --git a/web/packages/design/src/DataTable/useTable.ts b/web/packages/design/src/DataTable/useTable.ts
index 7b7deda0af0e3..3dc86ed96707d 100644
--- a/web/packages/design/src/DataTable/useTable.ts
+++ b/web/packages/design/src/DataTable/useTable.ts
@@ -205,7 +205,7 @@ export default function useTable<T>({
       pagination: state.pagination
         ? {
             ...state.pagination,
-            currentPage: state.pagination.currentPage + 1,
+            currentPage: state.pagination.currentPage - 1,
           }
         : undefined,
     });

From 56e1cb8b9f008f98373beb902ec1554403f957fe Mon Sep 17 00:00:00 2001
From: Grzegorz Zdunek <grzegorz.zdunek@goteleport.com>
Date: Mon, 28 Oct 2024 11:10:37 +0100
Subject: [PATCH 2/2] Convert `setState` to a callback form

---
 web/packages/design/src/DataTable/useTable.ts | 24 +++++++++----------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/web/packages/design/src/DataTable/useTable.ts b/web/packages/design/src/DataTable/useTable.ts
index 3dc86ed96707d..e8c70f3bd2dd0 100644
--- a/web/packages/design/src/DataTable/useTable.ts
+++ b/web/packages/design/src/DataTable/useTable.ts
@@ -185,30 +185,30 @@ export default function useTable<T>({
     if (serversideProps) {
       fetching?.onFetchNext?.();
     }
-    setState({
-      ...state,
-      pagination: state.pagination
+    setState(prevState => ({
+      ...prevState,
+      pagination: prevState.pagination
         ? {
-            ...state.pagination,
-            currentPage: state.pagination.currentPage + 1,
+            ...prevState.pagination,
+            currentPage: prevState.pagination.currentPage + 1,
           }
         : undefined,
-    });
+    }));
   }
 
   function prevPage() {
     if (serversideProps) {
       fetching?.onFetchPrev?.();
     }
-    setState({
-      ...state,
-      pagination: state.pagination
+    setState(prevState => ({
+      ...prevState,
+      pagination: prevState.pagination
         ? {
-            ...state.pagination,
-            currentPage: state.pagination.currentPage - 1,
+            ...prevState.pagination,
+            currentPage: prevState.pagination.currentPage - 1,
           }
         : undefined,
-    });
+    }));
   }
 
   useEffect(() => {