Repository: provectus/kafka-ui
Issue: Implement Search within Consumer group profile
Labels: type/enhancement
good first issue
scope/frontend
status/accepted


**Describe the bug**
Please implement Search by Topic Name within Consumer group profile


**Set up**
https://www.kafka-ui.provectus.io/


**Steps to Reproduce**


1. Navigate to Consumer group profile

**Expected behavior**
Should be available Search by Topic Name

**Screenshots**
<img width="1326" alt="search within consumer" src="https://user-images.githubusercontent.com/104780608/188561560-c59178b9-33c2-42da-ac4a-27bf87e5d882.png">



**Additional context**
<!--
(Add any other context about the problem here)
-->


Issue comments:
`/api/clusters/<cluster>/topics/<topicName>/consumer-groups`
topicName should be an exact one

Pull request review comments:
You can use search without extra state params. Just check how Search component works with searchParams

Patch that resolved the issue:
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 f1ce947fdb7..d45685d7638 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<ClusterGroupParam>();
   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 (
     <div>
       <div>
@@ -108,6 +120,9 @@ const Details: React.FC = () => {
           </Metrics.Indicator>
         </Metrics.Section>
       </Metrics.Wrapper>
+      <ControlPanelWrapper hasInput style={{ margin: '16px 0 20px' }}>
+        <Search placeholder="Search by Topic Name" />
+      </ControlPanelWrapper>
       <Table isFullwidth>
         <thead>
           <tr>
@@ -116,7 +131,7 @@ const Details: React.FC = () => {
           </tr>
         </thead>
         <tbody>
-          {Object.keys(partitionsByTopic).map((key) => (
+          {currentPartitionsByTopic.map((key) => (
             <ListItem
               clusterName={clusterName}
               consumers={partitionsByTopic[key]}
diff --git a/kafka-ui-react-app/src/components/ConsumerGroups/Details/__tests__/Details.spec.tsx b/kafka-ui-react-app/src/components/ConsumerGroups/Details/__tests__/Details.spec.tsx
index 7a99ee07138..e16eae8669b 100644
--- a/kafka-ui-react-app/src/components/ConsumerGroups/Details/__tests__/Details.spec.tsx
+++ b/kafka-ui-react-app/src/components/ConsumerGroups/Details/__tests__/Details.spec.tsx
@@ -77,6 +77,13 @@ describe('Details component', () => {
       );
     });
 
+    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'));


Test patch: