From d79412fe26fb71e651c447697dd5619c061ed576 Mon Sep 17 00:00:00 2001
From: Arsen Simonyan <103444767+simonyandev@users.noreply.github.com>
Date: Wed, 13 Apr 2022 13:39:59 +0400
Subject: [PATCH] fix page reset on search input change (#1823)

Co-authored-by: Roman Zabaluev <rzabaluev@provectus.com>
---
 .../src/components/Topics/List/List.tsx       | 12 +++++++--
 .../Topics/List/__tests__/List.spec.tsx       | 25 +++++++++++++++++++
 2 files changed, 35 insertions(+), 2 deletions(-)

diff --git a/kafka-ui-react-app/src/components/Topics/List/List.tsx b/kafka-ui-react-app/src/components/Topics/List/List.tsx
index 4858da2d2a..dc22ac8104 100644
--- a/kafka-ui-react-app/src/components/Topics/List/List.tsx
+++ b/kafka-ui-react-app/src/components/Topics/List/List.tsx
@@ -82,6 +82,7 @@ const List: React.FC<TopicsListProps> = ({
   const { clusterName } = useParams<{ clusterName: ClusterName }>();
   const { page, perPage, pathname } = usePagination();
   const [showInternal, setShowInternal] = React.useState<boolean>(true);
+  const [cachedPage, setCachedPage] = React.useState<number | null>(null);
   const history = useHistory();
 
   React.useEffect(() => {
@@ -159,9 +160,16 @@ const List: React.FC<TopicsListProps> = ({
   const searchHandler = React.useCallback(
     (searchString: string) => {
       setTopicsSearch(searchString);
-      history.push(`${pathname}?page=1&perPage=${perPage || PER_PAGE}`);
+
+      setCachedPage(page || null);
+
+      const newPageQuery = !searchString && cachedPage ? cachedPage : 1;
+
+      history.push(
+        `${pathname}?page=${newPageQuery}&perPage=${perPage || PER_PAGE}`
+      );
     },
-    [setTopicsSearch, history, pathname, perPage]
+    [setTopicsSearch, history, pathname, perPage, page]
   );
 
   const ActionsCell = React.memo<TableCellProps<TopicWithDetailedInfo, string>>(
diff --git a/kafka-ui-react-app/src/components/Topics/List/__tests__/List.spec.tsx b/kafka-ui-react-app/src/components/Topics/List/__tests__/List.spec.tsx
index 4b07c5f2d0..0bdf6e16cc 100644
--- a/kafka-ui-react-app/src/components/Topics/List/__tests__/List.spec.tsx
+++ b/kafka-ui-react-app/src/components/Topics/List/__tests__/List.spec.tsx
@@ -125,6 +125,31 @@ describe('List', () => {
 
       expect(mockedHistory.push).toHaveBeenCalledWith('/?page=1&perPage=25');
     });
+
+    it('should set cached page query param on show internal toggle change', async () => {
+      const mockedHistory = createMemoryHistory();
+      jest.spyOn(mockedHistory, 'push');
+      component = mountComponentWithProviders(
+        { isReadOnly: false },
+        { fetchTopicsList, totalPages: 10 },
+        mockedHistory
+      );
+
+      const cachedPage = 5;
+
+      mockedHistory.push(`/?page=${cachedPage}&perPage=25`);
+
+      const input = component.find(Search);
+      input.props().handleSearch('nonEmptyString');
+
+      expect(mockedHistory.push).toHaveBeenCalledWith('/?page=1&perPage=25');
+
+      input.props().handleSearch('');
+
+      expect(mockedHistory.push).toHaveBeenCalledWith(
+        `/?page=${cachedPage}&perPage=25`
+      );
+    });
   });
 
   describe('when some list items are selected', () => {