Repository: provectus/kafka-ui
Issue: Inconsistency in pagination for topics
Labels: type/bug
good first issue
scope/frontend
status/accepted
status/confirmed

**Describe the bug**
(A clear and concise description of what the bug is.)
Pagination automatically jumps to Page 1 even if search was initiated on Page 2 or any other page; makes to navigate to the required page multiple times

**Set up**
(How do you run the app? 
Which version of the app are you running? Provide either docker image version or check commit hash at the top left corner. We won't be able to help you without this information.)
https://www.kafka-ui.provectus.io/ui

**Steps to Reproduce**
Steps to reproduce the behavior:

1. Go to Topics - Page 2
2. Start search for any of the topics (e.g. asd123)
3. Clear the search field
4. Page 1 is displayed, not Page 2

**Expected behavior**
(A clear and concise description of what you expected to happen)
Page 2 is still displayed when search field info is cleaned.

**Screenshots**
(If applicable, add screenshots to help explain your problem)


**Additional context**
(Add any other context about the problem here)


Issue comments:
Always returns to the first page after viewing/editing a topic or schema from the page 2, 3 etc.
  Steps to Reproduce:
1. Go to Topics (Schemas) - Page 2
2. Click a topic(schema) for viewing it (editing)
3. Return to the Topics(Schemas) overview page
4. Page 1 is displayed, not Page 2

Expected behaviour:
Page 2 is still displayed when you returned to the list.

Pull request review comments:

Patch that resolved the issue:
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 4858da2d2af..dc22ac81042 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 4b07c5f2d0f..0bdf6e16cc2 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', () => {


Test patch: