FE: Optional FTS

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

@@ -26,6 +26,8 @@ import ResourcePageHeading from 'components/common/ResourcePageHeading/ResourceP
 import BreakableTextCell from 'components/common/NewTable/BreakableTextCell';
 import { useQueryPersister } from 'components/common/NewTable/ColumnFilter';
 import { ActionPermissionWrapper } from 'components/common/ActionComponent';
+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';
@@ -34,7 +36,8 @@ const ACList: React.FC = () => {
   const { clusterName } = useAppParams<{ clusterName: ClusterName }>();
   const [searchParams, setSearchParams] = useSearchParams();
   const [search, setSearch] = useState(searchParams.get('q') || '');
-  const { data: aclList } = useAcls({ clusterName, search });
+  const { isFtsEnabled } = useFts('acl');
+  const { data: aclList } = useAcls({ clusterName, search, fts: isFtsEnabled });
   const { deleteResource } = useDeleteAcl(clusterName);
   const { isReadOnly } = React.useContext(ClusterContext);
   const modal = useConfirm(true);
@@ -214,6 +217,7 @@ const ACList: React.FC = () => {
           placeholder="Search by Principal Name"
           value={search}
           onChange={setSearch}
+          extraActions={<Fts resourceName="acl" />}
         />
       </ControlPanelWrapper>
       <Table

frontend/src/components/ACLPage/lib/useConsumerGroupsOptions.ts

@@ -1,8 +1,14 @@
+import useFts from 'components/common/Fts/useFts';
 import { useConsumerGroups } from 'lib/hooks/api/consumers';
 import { useMemo } from 'react';
 
 const useConsumerGroupsOptions = (clusterName: string) => {
-  const { data } = useConsumerGroups({ clusterName, search: '' });
+  const { isFtsEnabled } = useFts('consumer_groups');
+  const { data } = useConsumerGroups({
+    clusterName,
+    search: '',
+    fts: isFtsEnabled,
+  });
   const consumerGroups = useMemo(() => {
     return (
       data?.consumerGroups?.map((cg) => {

frontend/src/components/ClusterPage/ClusterPage.tsx

@@ -42,7 +42,7 @@ const ClusterPage: React.FC = () => {
   const { clusterName } = useAppParams<ClusterNameRoute>();
   const appInfo = React.useContext(GlobalSettingsContext);
 
-  const { data } = useClusters();
+  const { data, isFetched } = useClusters();
   const contextValue = React.useMemo(() => {
     const cluster = data?.find(({ name }) => name === clusterName);
     const features = cluster?.features || [];
@@ -61,9 +61,17 @@ const ClusterPage: React.FC = () => {
       hasAclViewConfigured:
         features.includes(ClusterFeaturesEnum.KAFKA_ACL_VIEW) ||
         features.includes(ClusterFeaturesEnum.KAFKA_ACL_EDIT),
+      ftsEnabled: features.includes(ClusterFeaturesEnum.FTS_ENABLED),
+      ftsDefaultEnabled: features.includes(
+        ClusterFeaturesEnum.FTS_DEFAULT_ENABLED
+      ),
     };
   }, [clusterName, data]);
 
+  if (!isFetched) {
+    return <PageLoader />;
+  }
+
   return (
     <Suspense fallback={<PageLoader />}>
       <ClusterContext.Provider value={contextValue}>

frontend/src/components/ClusterPage/__tests__/ClusterPage.spec.tsx

@@ -52,6 +52,7 @@ describe('ClusterPage', () => {
   const renderComponent = async (pathname: string, payload: Cluster[] = []) => {
     (useClusters as jest.Mock).mockImplementation(() => ({
       data: payload,
+      isFetched: true,
     }));
     await render(
       <WithRoute path={`${clusterPath()}/*`}>

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

@@ -1,18 +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', () => {

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

@@ -15,6 +15,7 @@ import {
   useResetConnectorOffsets,
   useUpdateConnectorState,
 } from 'lib/hooks/api/kafkaConnect';
+import { FullConnectorInfo } from 'generated-sources';
 
 const mockedUsedNavigate = jest.fn();
 const mockDelete = jest.fn();
@@ -34,11 +35,14 @@ jest.mock('lib/hooks/api/kafkaConnect', () => ({
 
 const clusterName = 'local';
 
-const renderComponent = (contextValue: ContextProps = initialValue) =>
+const renderComponent = (
+  contextValue: ContextProps = initialValue,
+  data: FullConnectorInfo[] = connectors
+) =>
   render(
     <ClusterContext.Provider value={contextValue}>
       <WithRoute path={clusterConnectorsPath()}>
-        <List />
+        <List connectors={data} />
       </WithRoute>
     </ClusterContext.Provider>,
     { initialEntries: [clusterConnectorsPath(clusterName)] }
@@ -47,9 +51,6 @@ const renderComponent = (contextValue: ContextProps = initialValue) =>
 describe('Connectors List', () => {
   describe('when the connectors are loaded', () => {
     beforeEach(() => {
-      (useConnectors as jest.Mock).mockImplementation(() => ({
-        data: connectors,
-      }));
       const restartConnector = jest.fn();
       (useUpdateConnectorState as jest.Mock).mockImplementation(() => ({
         mutateAsync: restartConnector,
@@ -84,7 +85,7 @@ describe('Connectors List', () => {
     });
 
     it('renders empty table', async () => {
-      renderComponent();
+      renderComponent(undefined, []);
       expect(screen.getByRole('table')).toBeInTheDocument();
       expect(
         screen.getByRole('row', { name: 'No connectors found' })

frontend/src/components/ConsumerGroups/List.tsx

@@ -17,11 +17,14 @@ import { useConsumerGroups } from 'lib/hooks/api/consumers';
 import Tooltip from 'components/common/Tooltip/Tooltip';
 import ResourcePageHeading from 'components/common/ResourcePageHeading/ResourcePageHeading';
 import { useLocalStoragePersister } from 'components/common/NewTable/ColumnResizer/lib';
+import useFts from 'components/common/Fts/useFts';
+import Fts from 'components/common/Fts/Fts';
 
 const List = () => {
   const { clusterName } = useAppParams<ClusterNameRoute>();
   const [searchParams] = useSearchParams();
   const navigate = useNavigate();
+  const { isFtsEnabled } = useFts('consumer_groups');
 
   const consumerGroups = useConsumerGroups({
     clusterName,
@@ -32,6 +35,7 @@ const List = () => {
     page: Number(searchParams.get('page') || 1),
     perPage: Number(searchParams.get('perPage') || PER_PAGE),
     search: searchParams.get('q') || '',
+    fts: isFtsEnabled,
   });
 
   const columns = React.useMemo<ColumnDef<ConsumerGroup>[]>(
@@ -104,7 +108,10 @@ const List = () => {
     <>
       <ResourcePageHeading text="Consumers" />
       <ControlPanelWrapper hasInput>
-        <Search placeholder="Search by Consumer Group ID" />
+        <Search
+          placeholder="Search by Consumer Group ID"
+          extraActions={<Fts resourceName="consumer_groups" />}
+        />
       </ControlPanelWrapper>
       <Table
         columns={columns}

frontend/src/components/PageContainer/PageContainer.styled.ts

@@ -35,6 +35,8 @@ export const Sidebar = styled.div<{ $visible: boolean }>(
     left: 0;
     bottom: 0;
     padding: 16px;
+    scrollbar-gutter: stable;
+    scrollbar-width: thin;
     overflow-y: auto;
     transition:
       width 0.25s,

frontend/src/components/Schemas/List/List.tsx

@@ -24,6 +24,8 @@ import { useNavigate, useSearchParams } from 'react-router-dom';
 import { PER_PAGE } from 'lib/constants';
 import { useGetSchemas } from 'lib/hooks/api/schemas';
 import ResourcePageHeading from 'components/common/ResourcePageHeading/ResourcePageHeading';
+import useFts from 'components/common/Fts/useFts';
+import Fts from 'components/common/Fts/Fts';
 
 import GlobalSchemaSelector from './GlobalSchemaSelector/GlobalSchemaSelector';
 
@@ -32,6 +34,7 @@ const List: React.FC = () => {
   const { clusterName } = useAppParams<ClusterNameRoute>();
   const navigate = useNavigate();
   const [searchParams] = useSearchParams();
+  const { isFtsEnabled } = useFts('schemas');
   const {
     isInitialLoading,
     isError,
@@ -45,6 +48,7 @@ const List: React.FC = () => {
     sortOrder:
       (searchParams.get('sortDirection')?.toUpperCase() as SortOrder) ||
       undefined,
+    fts: isFtsEnabled,
   });
 
   const columns = React.useMemo<ColumnDef<SchemaSubject>[]>(
@@ -111,7 +115,10 @@ const List: React.FC = () => {
         )}
       </ResourcePageHeading>
       <ControlPanelWrapper hasInput>
-        <Search placeholder="Search by Schema Name" />
+        <Search
+          placeholder="Search by Schema Name"
+          extraActions={<Fts resourceName="schemas" />}
+        />
       </ControlPanelWrapper>
       {isInitialLoading || isError ? (
         <PageLoader />

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

@@ -12,11 +12,15 @@ import PageLoader from 'components/common/PageLoader/PageLoader';
 import TopicTable from 'components/Topics/List/TopicTable';
 import { Action, ResourceType } from 'generated-sources';
 import ResourcePageHeading from 'components/common/ResourcePageHeading/ResourcePageHeading';
+import Fts from 'components/common/Fts/Fts';
+import useFts from 'components/common/Fts/useFts';
 
 const ListPage: React.FC = () => {
   const { isReadOnly } = React.useContext(ClusterContext);
   const [searchParams, setSearchParams] = useSearchParams();
 
+  useFts('topics');
+
   // Set the search params to the url based on the localStorage value
   React.useEffect(() => {
     if (!searchParams.has('perPage')) {
@@ -62,7 +66,10 @@ const ListPage: React.FC = () => {
         )}
       </ResourcePageHeading>
       <ControlPanelWrapper hasInput>
-        <Search placeholder="Search by Topic Name" />
+        <Search
+          placeholder="Search by Topic Name"
+          extraActions={<Fts resourceName="topics" />}
+        />
         <label>
           <Switch
             name="ShowInternalTopics"

frontend/src/components/Topics/List/TopicTable.tsx

@@ -9,6 +9,7 @@ import ClusterContext from 'components/contexts/ClusterContext';
 import { useTopics } from 'lib/hooks/api/topics';
 import { PER_PAGE } from 'lib/constants';
 import { useLocalStoragePersister } from 'components/common/NewTable/ColumnResizer/lib';
+import useFts from 'components/common/Fts/useFts';
 
 import { TopicTitleCell } from './TopicTitleCell';
 import ActionsCell from './ActionsCell';
@@ -18,8 +19,11 @@ const TopicTable: React.FC = () => {
   const { clusterName } = useAppParams<{ clusterName: ClusterName }>();
   const [searchParams] = useSearchParams();
   const { isReadOnly } = React.useContext(ClusterContext);
+  const { isFtsEnabled } = useFts('topics');
+
   const { data } = useTopics({
     clusterName,
+    fts: isFtsEnabled,
     page: Number(searchParams.get('page') || 1),
     perPage: Number(searchParams.get('perPage') || PER_PAGE),
     search: searchParams.get('q') || undefined,

frontend/src/components/Topics/List/__tests__/ListPage.spec.tsx

@@ -19,6 +19,8 @@ describe('ListPage Component', () => {
           hasKafkaConnectConfigured: true,
           hasSchemaRegistryConfigured: true,
           isTopicDeletionAllowed: true,
+          ftsEnabled: false,
+          ftsDefaultEnabled: false,
         }}
       >
         <WithRoute path={clusterTopicsPath()}>

frontend/src/components/Topics/List/__tests__/TopicTable.spec.tsx

@@ -59,6 +59,8 @@ describe('TopicTable Components', () => {
           hasKafkaConnectConfigured: true,
           hasSchemaRegistryConfigured: true,
           isTopicDeletionAllowed,
+          ftsEnabled: false,
+          ftsDefaultEnabled: false,
         }}
       >
         <WithRoute path={clusterTopicsPath()}>

frontend/src/components/Topics/Topic/Overview/__test__/Overview.spec.tsx

@@ -21,6 +21,8 @@ const defaultContextValues = {
   hasKafkaConnectConfigured: true,
   hasSchemaRegistryConfigured: true,
   isTopicDeletionAllowed: true,
+  ftsEnabled: false,
+  ftsDefaultEnabled: false,
 };
 
 jest.mock('lib/hooks/api/topics', () => ({