0ct0pu5/kafka-ui
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix page reset on search input change (#1823)

Browse source 
Co-authored-by: Roman Zabaluev <rzabaluev@provectus.com>
This commit is contained in:
Arsen Simonyan 2022-04-13 13:39:59 +04:00 • committed by GitHub
parent a38077d9d7
commit d79412fe26
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 35 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
kafka-ui-react-app/src/components/Topics/List/List.tsx
View file

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

25
kafka-ui-react-app/src/components/Topics/List/__tests__/List.spec.tsx
View file

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