Repository: provectus/kafka-ui
Issue: Search consumers by name within topic details
Labels: type/enhancement
good first issue
scope/frontend
status/accepted


**Describe the bug**
Implement the Search within Topic/Consumers tab

**Set up**
https://www.kafka-ui.provectus.io/


**Steps to Reproduce**


1. Navigate to Topics
2. Open the Topic
3. Turn to Consumers tab


**Expected behavior**
Search by **consumer Name** should be available within Topic/Consumers tab

**Screenshots**
<img width="1717" alt="search topic:consumers" src="https://user-images.githubusercontent.com/104780608/188839052-d4e88426-4a19-4d93-aa56-6574a94e53ba.png">





Issue comments:
`/api/clusters/{clusterName}/consumer-groups/paged` -- no topicname
`/api/clusters/<cluster>/topics/<topicName>/consumer-groups` -- no query
@Haarolean Can you please assign this to me ?
@shubhwip yo, any plans to do this?:)
@Haarolean I will do it probably this weekend or next.

Pull request review comments:
i suggest writing it like this , since we are not using `getData` function anywhere else 

`const consumerGroups = React.useMemo(
    () => data.filter((item) => item.groupId.toLocaleLowerCase().indexOf(keyword) > -1),
    [data, keyword]
  );`


Patch that resolved the issue:
diff --git a/kafka-ui-react-app/src/components/Topics/Topic/ConsumerGroups/TopicConsumerGroups.styled.ts b/kafka-ui-react-app/src/components/Topics/Topic/ConsumerGroups/TopicConsumerGroups.styled.ts
new file mode 100644
index 00000000000..77768dc9980
--- /dev/null
+++ b/kafka-ui-react-app/src/components/Topics/Topic/ConsumerGroups/TopicConsumerGroups.styled.ts
@@ -0,0 +1,6 @@
+import styled from 'styled-components';
+
+export const SearchWrapper = styled.div`
+  margin: 10px;
+  width: 21%;
+`;
diff --git a/kafka-ui-react-app/src/components/Topics/Topic/ConsumerGroups/TopicConsumerGroups.tsx b/kafka-ui-react-app/src/components/Topics/Topic/ConsumerGroups/TopicConsumerGroups.tsx
index 69948fd66d4..173c28c76e3 100644
--- a/kafka-ui-react-app/src/components/Topics/Topic/ConsumerGroups/TopicConsumerGroups.tsx
+++ b/kafka-ui-react-app/src/components/Topics/Topic/ConsumerGroups/TopicConsumerGroups.tsx
@@ -5,14 +5,27 @@ import useAppParams from 'lib/hooks/useAppParams';
 import { useTopicConsumerGroups } from 'lib/hooks/api/topics';
 import { ColumnDef } from '@tanstack/react-table';
 import Table, { LinkCell, TagCell } from 'components/common/NewTable';
+import Search from 'components/common/Search/Search';
+
+import * as S from './TopicConsumerGroups.styled';
 
 const TopicConsumerGroups: React.FC = () => {
+  const [keyword, setKeyword] = React.useState('');
   const { clusterName, topicName } = useAppParams<RouteParamsClusterTopic>();
 
-  const { data: consumerGroups = [] } = useTopicConsumerGroups({
+  const { data = [] } = useTopicConsumerGroups({
     clusterName,
     topicName,
   });
+
+  const consumerGroups = React.useMemo(
+    () =>
+      data.filter(
+        (item) => item.groupId.toLocaleLowerCase().indexOf(keyword) > -1
+      ),
+    [data, keyword]
+  );
+
   const columns = React.useMemo<ColumnDef<ConsumerGroup>[]>(
     () => [
       {
@@ -61,12 +74,21 @@ const TopicConsumerGroups: React.FC = () => {
     []
   );
   return (
-    <Table
-      columns={columns}
-      data={consumerGroups}
-      enableSorting
-      emptyMessage="No active consumer groups"
-    />
+    <>
+      <S.SearchWrapper>
+        <Search
+          onChange={setKeyword}
+          placeholder="Search by Consumer Name"
+          value={keyword}
+        />
+      </S.SearchWrapper>
+      <Table
+        columns={columns}
+        data={consumerGroups}
+        enableSorting
+        emptyMessage="No active consumer groups"
+      />
+    </>
   );
 };
 


Test patch: