FE: Add Search Functionality to ACLs page

api/src/main/java/io/kafbat/ui/controller/AclsController.java

@@ -67,6 +67,7 @@ public Mono<ResponseEntity<Flux<KafkaAclDTO>>> listAcls(String clusterName,
                                                           KafkaAclResourceTypeDTO resourceTypeDto,
                                                           String resourceName,
                                                           KafkaAclNamePatternTypeDTO namePatternTypeDto,
+                                                          String search,
                                                           ServerWebExchange exchange) {
     AccessContext context = AccessContext.builder()
         .cluster(clusterName)
@@ -87,7 +88,7 @@ public Mono<ResponseEntity<Flux<KafkaAclDTO>>> listAcls(String clusterName,
     return validateAccess(context).then(
         Mono.just(
             ResponseEntity.ok(
-                aclsService.listAcls(getCluster(clusterName), filter)
+                aclsService.listAcls(getCluster(clusterName), filter, search)
                     .map(ClusterMapper::toKafkaAclDto)))
     ).doOnEach(sig -> audit(context, sig));
   }

api/src/main/java/io/kafbat/ui/service/acl/AclsService.java

@@ -68,10 +68,11 @@ public Mono<Void> deleteAcl(KafkaCluster cluster, AclBinding aclBinding) {
         .doOnSuccess(v -> log.info("ACL DELETED: [{}]", aclString));
   }
 
-  public Flux<AclBinding> listAcls(KafkaCluster cluster, ResourcePatternFilter filter) {
+  public Flux<AclBinding> listAcls(KafkaCluster cluster, ResourcePatternFilter filter, String principalSearch) {
     return adminClientService.get(cluster)
         .flatMap(c -> c.listAcls(filter))
         .flatMapIterable(acls -> acls)
+        .filter(acl -> principalSearch == null || acl.entry().principal().contains(principalSearch))
         .sort(Comparator.comparing(AclBinding::toString));  //sorting to keep stable order on different calls
   }
 

contract/src/main/resources/swagger/kafbat-ui-api.yaml

@@ -1943,6 +1943,11 @@ paths:
           required: false
           schema:
             $ref: '#/components/schemas/KafkaAclNamePatternType'
+        - name: search
+          in: query
+          required: false
+          schema:
+            type: string
       responses:
         200:
           description: OK

frontend/src/components/ACLPage/List/List.tsx

@@ -1,4 +1,5 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
+import { useSearchParams } from 'react-router-dom';
 import { ColumnDef, Row } from '@tanstack/react-table';
 import PageHeading from 'components/common/PageHeading/PageHeading';
 import Table from 'components/common/NewTable';
@@ -20,12 +21,16 @@ import { useTheme } from 'styled-components';
 import ACLFormContext from 'components/ACLPage/Form/AclFormContext';
 import PlusIcon from 'components/common/Icons/PlusIcon';
 import ActionButton from 'components/common/ActionComponent/ActionButton/ActionButton';
+import { ControlPanelWrapper } from 'components/common/ControlPanel/ControlPanel.styled';
+import Search from 'components/common/Search/Search';
 
 import * as S from './List.styled';
 
 const ACList: React.FC = () => {
   const { clusterName } = useAppParams<{ clusterName: ClusterName }>();
-  const { data: aclList } = useAcls(clusterName);
+  const [searchParams] = useSearchParams();
+  const [search, setSearch] = useState(searchParams.get('q') || '');
+  const { data: aclList } = useAcls({ clusterName, search });
   const { deleteResource } = useDeleteAcl(clusterName);
   const modal = useConfirm(true);
   const theme = useTheme();
@@ -36,6 +41,11 @@ const ACList: React.FC = () => {
   } = useBoolean();
   const [rowId, setRowId] = React.useState('');
 
+  // Set the search params to the url based on the localStorage value
+  useEffect(() => {
+    setSearch(searchParams.get('q') || '');
+  }, [searchParams]);
+
   const handleDeleteClick = (acl: KafkaAcl | null) => {
     if (acl) {
       modal('Are you sure want to delete this ACL record?', () =>
@@ -162,6 +172,9 @@ const ACList: React.FC = () => {
           <PlusIcon /> Create ACL
         </ActionButton>
       </PageHeading>
+      <ControlPanelWrapper hasInput>
+        <Search placeholder="Search by Principle Name" />
+      </ControlPanelWrapper>
       <Table
         columns={columns}
         data={aclList ?? []}

frontend/src/lib/hooks/api/acl.ts

@@ -14,11 +14,22 @@ import {
   KafkaAcl,
 } from 'generated-sources';
 
-export function useAcls(clusterName: ClusterName) {
+export function useAcls({
+  clusterName,
+  search,
+}: {
+  clusterName: ClusterName;
+  search?: string;
+}) {
   return useQuery(
-    ['clusters', clusterName, 'acls'],
-    () => api.listAcls({ clusterName }),
+    ['clusters', clusterName, 'acls', { search }],
+    () =>
+      api.listAcls({
+        clusterName,
+        search,
+      }),
     {
+      keepPreviousData: true,
       suspense: false,
     }
   );