From df0e7e3422d2af366019f709b28a235f6e5c86dd Mon Sep 17 00:00:00 2001
From: maxiadlovskii <maksym.yadlovskyi@graylog.com>
Date: Tue, 14 Nov 2023 15:40:56 +0100
Subject: [PATCH] Add logic to change perPage in component ListWithOwnState
 states when new perPage prop arrives (#17278)

* Add logic to change perPage in state of ListWithOwnState component when new perPage prop would arrive

* Some refactoring

* Add changelog

* fix changelog

* fix changelog

* fix changelog
---
 changelog/unreleased/issue-17261.toml         |  4 ++++
 .../src/components/common/PaginatedList.tsx   | 23 ++++++++++++-------
 2 files changed, 19 insertions(+), 8 deletions(-)
 create mode 100644 changelog/unreleased/issue-17261.toml

diff --git a/changelog/unreleased/issue-17261.toml b/changelog/unreleased/issue-17261.toml
new file mode 100644
index 000000000000..4d799864908f
--- /dev/null
+++ b/changelog/unreleased/issue-17261.toml
@@ -0,0 +1,4 @@
+type = "f"
+message = "Fixing problem with persisting selected page size for some paginated lists."
+issues = ["17261"]
+pulls = ["17278"]
diff --git a/graylog2-web-interface/src/components/common/PaginatedList.tsx b/graylog2-web-interface/src/components/common/PaginatedList.tsx
index be8ddecff8c7..c94a86fa38d4 100644
--- a/graylog2-web-interface/src/components/common/PaginatedList.tsx
+++ b/graylog2-web-interface/src/components/common/PaginatedList.tsx
@@ -15,7 +15,7 @@
  * <http://www.mongodb.com/licensing/server-side-public-license>.
  */
 import * as React from 'react';
-import { useEffect, useMemo, useCallback } from 'react';
+import { useEffect, useMemo, useCallback, useState } from 'react';
 
 import IfInteractive from 'views/components/dashboard/IfInteractive';
 import usePaginationQueryParameter, { DEFAULT_PAGE_SIZES } from 'hooks/usePaginationQueryParameter';
@@ -110,16 +110,23 @@ const ListWithOwnState = ({
   pageSize: propPageSize,
   ...props
 }: Required<Props> & { activePage: number, pageSize: number }) => {
-  const [{ page: currentPage, pageSize: currentPageSize }, setPagination] = React.useState({
-    page: Math.max(activePage, INITIAL_PAGE),
-    pageSize: propPageSize,
-  });
+  const [currentPage, setCurrentPage] = useState<number>(Math.max(activePage, INITIAL_PAGE));
+  const [currentPageSize, setCurrentPageSize] = useState<number>(propPageSize);
 
   useEffect(() => {
-    if (activePage > 0 && activePage !== currentPage) {
-      setPagination((cur) => ({ ...cur, page: activePage }));
+    if (activePage > 0) {
+      setCurrentPage(activePage);
     }
-  }, [activePage, currentPage]);
+  }, [activePage]);
+
+  useEffect(() => {
+    setCurrentPageSize(propPageSize);
+  }, [propPageSize]);
+
+  const setPagination = useCallback(({ page, pageSize }) => {
+    setCurrentPageSize(pageSize);
+    setCurrentPage(page);
+  }, []);
 
   return (
     <ListBase {...props}