add acl search

Author: git-halinka

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

@@ -22,10 +22,16 @@ import PlusIcon from 'components/common/Icons/PlusIcon';
 import ActionButton from 'components/common/ActionComponent/ActionButton/ActionButton';
 
 import * as S from './List.styled';
+import {ControlPanelWrapper} from "../../common/ControlPanel/ControlPanel.styled";
+import Search from "../../common/Search/Search";
+import {useSearchParams} from "react-router-dom";
 
 const ACList: React.FC = () => {
   const { clusterName } = useAppParams<{ clusterName: ClusterName }>();
-  const { data: aclList } = useAcls(clusterName);
+  const [searchParams] = useSearchParams();
+  const aclList = useAcls(clusterName).data?.filter(
+    (acl) => acl.principal.match(searchParams.get('q') || '')
+  );
   const { deleteResource } = useDeleteAcl(clusterName);
   const modal = useConfirm(true);
   const theme = useTheme();
@@ -162,6 +168,9 @@ const ACList: React.FC = () => {
           <PlusIcon /> Create ACL
         </ActionButton>
       </PageHeading>
+      <ControlPanelWrapper hasInput>
+        <Search placeholder="Search by Principal Name" />
+      </ControlPanelWrapper>
       <Table
         columns={columns}
         data={aclList ?? []}