diff --git a/kafka-ui-react-app/src/components/ConsumerGroups/Details/Details.tsx b/kafka-ui-react-app/src/components/ConsumerGroups/Details/Details.tsx index f1ce947fdb..d45685d763 100644 --- a/kafka-ui-react-app/src/components/ConsumerGroups/Details/Details.tsx +++ b/kafka-ui-react-app/src/components/ConsumerGroups/Details/Details.tsx @@ -1,11 +1,12 @@ import React from 'react'; -import { useNavigate } from 'react-router-dom'; +import { useNavigate, useSearchParams } from 'react-router-dom'; import useAppParams from 'lib/hooks/useAppParams'; import { clusterConsumerGroupResetRelativePath, clusterConsumerGroupsPath, ClusterGroupParam, } from 'lib/paths'; +import Search from 'components/common/Search/Search'; import PageLoader from 'components/common/PageLoader/PageLoader'; import ClusterContext from 'components/contexts/ClusterContext'; import PageHeading from 'components/common/PageHeading/PageHeading'; @@ -24,11 +25,14 @@ import { } from 'redux/reducers/consumerGroups/consumerGroupsSlice'; import getTagColor from 'components/common/Tag/getTagColor'; import { Dropdown, DropdownItem } from 'components/common/Dropdown'; +import { ControlPanelWrapper } from 'components/common/ControlPanel/ControlPanel.styled'; import ListItem from './ListItem'; const Details: React.FC = () => { const navigate = useNavigate(); + const [searchParams] = useSearchParams(); + const searchValue = searchParams.get('q') || ''; const { isReadOnly } = React.useContext(ClusterContext); const { consumerGroupID, clusterName } = useAppParams(); const dispatch = useAppDispatch(); @@ -62,6 +66,14 @@ const Details: React.FC = () => { const partitionsByTopic = groupBy(consumerGroup.partitions, 'topic'); + const filteredPartitionsByTopic = Object.keys(partitionsByTopic).filter( + (el) => el.includes(searchValue) + ); + + const currentPartitionsByTopic = searchValue.length + ? filteredPartitionsByTopic + : Object.keys(partitionsByTopic); + return (
@@ -108,6 +120,9 @@ const Details: React.FC = () => { + + + @@ -116,7 +131,7 @@ const Details: React.FC = () => { - {Object.keys(partitionsByTopic).map((key) => ( + {currentPartitionsByTopic.map((key) => ( { ); }); + it('renders search input', async () => { + await renderComponent(); + expect( + screen.getByPlaceholderText('Search by Topic Name') + ).toBeInTheDocument(); + }); + it('shows confirmation modal on consumer group delete', async () => { expect(screen.queryByRole('dialog')).not.toBeInTheDocument(); userEvent.click(screen.getByText('Delete consumer group'));