FE: Fix merge conflicts

Author: Vixtir

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

@@ -30,7 +30,6 @@ import useFts from 'components/common/Fts/useFts';
 import Fts from 'components/common/Fts/Fts';
 import ClusterContext from 'components/contexts/ClusterContext';
 
-
 import * as S from './List.styled';
 
 const ACList: React.FC = () => {

frontend/src/components/Connect/List/List.tsx

@@ -1,19 +1,12 @@
 import React from 'react';
-
-import useAppParams from 'lib/hooks/useAppParams';
-import { ClusterNameRoute } from 'lib/paths';
-import { useConnectors } from 'lib/hooks/api/kafkaConnect';
-import { useSearchParams } from 'react-router-dom';
 import { ConnectorsTable } from 'components/Connect/List/ConnectorsTable/ConnectorsTable';
+import { FullConnectorInfo } from 'generated-sources';
 
-const List: React.FC = () => {
-  const { clusterName } = useAppParams<ClusterNameRoute>();
-  const [searchParams] = useSearchParams();
-  const { data: connectors = [] } = useConnectors(
-    clusterName,
-    searchParams.get('q') || ''
-  );
+interface ConnectorsListProps {
+  connectors: FullConnectorInfo[];
+}
 
+const List: React.FC<ConnectorsListProps> = ({ connectors }) => {
   return <ConnectorsTable connectors={connectors} />;
 };
 

frontend/src/components/Connect/List/ListPage.tsx

@@ -1,21 +1,44 @@
 import React, { Suspense } from 'react';
 import Search from 'components/common/Search/Search';
 import PageLoader from 'components/common/PageLoader/PageLoader';
+import useAppParams from 'lib/hooks/useAppParams';
+import { ClusterNameRoute } from 'lib/paths';
+import { useConnectors } from 'lib/hooks/api/kafkaConnect';
+import { useSearchParams } from 'react-router-dom';
+import useFts from 'components/common/Fts/useFts';
+import Fts from 'components/common/Fts/Fts';
+import { FullConnectorInfo } from 'generated-sources';
 
 import * as S from './ListPage.styled';
 import List from './List';
 import ConnectorsStatistics from './Statistics/Statistics';
 
-const ListPage: React.FC = () => (
-  <>
-    <ConnectorsStatistics />
-    <S.Search hasInput>
-      <Search placeholder="Search by Connect Name, Status or Type" />
-    </S.Search>
-    <Suspense fallback={<PageLoader />}>
-      <List />
-    </Suspense>
-  </>
-);
+const emptyConnectors: FullConnectorInfo[] = [];
+
+const ListPage: React.FC = () => {
+  const { clusterName } = useAppParams<ClusterNameRoute>();
+  const [searchParams] = useSearchParams();
+  const { isFtsEnabled } = useFts('connects');
+  const { data: connectors = emptyConnectors, isLoading } = useConnectors(
+    clusterName,
+    searchParams.get('q') || '',
+    isFtsEnabled
+  );
+
+  return (
+    <>
+      <ConnectorsStatistics connectors={connectors} isLoading={isLoading} />
+      <S.Search hasInput>
+        <Search
+          placeholder="Search by Connect Name, Status or Type"
+          extraActions={<Fts resourceName="connects" />}
+        />
+      </S.Search>
+      <Suspense fallback={<PageLoader />}>
+        <List connectors={connectors} />
+      </Suspense>
+    </>
+  );
+};
 
 export default ListPage;

frontend/src/components/Connect/List/Statistics/Statistics.tsx

@@ -1,15 +1,17 @@
-import React, { useMemo } from 'react';
+import React, { FC, useMemo } from 'react';
 import * as Statistics from 'components/common/Statistics';
-import useAppParams from 'lib/hooks/useAppParams';
-import { ClusterNameRoute } from 'lib/paths';
-import { useConnectors } from 'lib/hooks/api/kafkaConnect';
+import { FullConnectorInfo } from 'generated-sources';
 
 import { computeStatistics } from './models/computeStatistics';
 
-const ConnectorsStatistics = () => {
-  const { clusterName } = useAppParams<ClusterNameRoute>();
-  const { data: connectors = [], isLoading } = useConnectors(clusterName);
-
+interface ConnectorsStatisticsProps {
+  connectors: FullConnectorInfo[];
+  isLoading: boolean;
+}
+const ConnectorsStatistics: FC<ConnectorsStatisticsProps> = ({
+  connectors,
+  isLoading,
+}) => {
   const statistics = useMemo(() => computeStatistics(connectors), [connectors]);
 
   return (

frontend/src/components/Connect/List/Statistics/__tests__/Statistics.spec.tsx

@@ -25,7 +25,7 @@ describe('Kafka Connect Connectors Statistics', () => {
   function renderComponent({ data = [], isLoading }: RenderComponentProps) {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     useConnectorsMock.mockReturnValue({ data, isLoading } as any);
-    render(<ConnectorsStatistics />);
+    render(<ConnectorsStatistics connectors={data} isLoading={isLoading} />);
   }
 
   describe('when data loading', () => {