fix page reset on search input change (#1823)

Co-authored-by: Roman Zabaluev <rzabaluev@provectus.com>

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>>(

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', () => {