1- import React from 'react' ;
1+ import React , { useEffect , useState } from 'react' ;
2+ import { useSearchParams } from 'react-router-dom' ;
23import { ColumnDef , Row } from '@tanstack/react-table' ;
34import Table from 'components/common/NewTable' ;
45import { useConfirm } from 'lib/hooks/useConfirm' ;
@@ -19,14 +20,18 @@ import { useTheme } from 'styled-components';
1920import ACLFormContext from 'components/ACLPage/Form/AclFormContext' ;
2021import PlusIcon from 'components/common/Icons/PlusIcon' ;
2122import ActionButton from 'components/common/ActionComponent/ActionButton/ActionButton' ;
23+ import { ControlPanelWrapper } from 'components/common/ControlPanel/ControlPanel.styled' ;
24+ import Search from 'components/common/Search/Search' ;
2225import ResourcePageHeading from 'components/common/ResourcePageHeading/ResourcePageHeading' ;
2326import BreakableTextCell from 'components/common/NewTable/BreakableTextCell' ;
2427
2528import * as S from './List.styled' ;
2629
2730const ACList : React . FC = ( ) => {
2831 const { clusterName } = useAppParams < { clusterName : ClusterName } > ( ) ;
29- const { data : aclList } = useAcls ( clusterName ) ;
32+ const [ searchParams , setSearchParams ] = useSearchParams ( ) ;
33+ const [ search , setSearch ] = useState ( searchParams . get ( 'q' ) || '' ) ;
34+ const { data : aclList } = useAcls ( { clusterName, search } ) ;
3035 const { deleteResource } = useDeleteAcl ( clusterName ) ;
3136 const modal = useConfirm ( true ) ;
3237 const theme = useTheme ( ) ;
@@ -37,6 +42,17 @@ const ACList: React.FC = () => {
3742 } = useBoolean ( ) ;
3843 const [ rowId , setRowId ] = React . useState ( '' ) ;
3944
45+ useEffect ( ( ) => {
46+ const params = new URLSearchParams ( searchParams ) ;
47+ if ( search ) {
48+ params . set ( 'q' , search ) ;
49+ params . set ( 'page' , '1' ) ; // reset to first page on new search
50+ } else {
51+ params . delete ( 'q' ) ;
52+ }
53+ setSearchParams ( params , { replace : true } ) ;
54+ } , [ search ] ) ;
55+
4056 const handleDeleteClick = ( acl : KafkaAcl | null ) => {
4157 if ( acl ) {
4258 modal ( 'Are you sure want to delete this ACL record?' , ( ) =>
@@ -164,6 +180,13 @@ const ACList: React.FC = () => {
164180 < PlusIcon /> Create ACL
165181 </ ActionButton >
166182 </ ResourcePageHeading >
183+ < ControlPanelWrapper hasInput >
184+ < Search
185+ placeholder = "Search by Principal Name"
186+ value = { search }
187+ onChange = { setSearch }
188+ />
189+ </ ControlPanelWrapper >
167190 < Table
168191 columns = { columns }
169192 data = { aclList ?? [ ] }
0 commit comments