FE: Add fts to other resources, add logic to show and handle fts button

Vixtir · Vixtir · commit ca25d847b5fe · 2025-10-12T19:10:54.000+03:00
diff --git a/frontend/src/components/ACLPage/List/List.tsx b/frontend/src/components/ACLPage/List/List.tsx
@@ -26,14 +26,17 @@ 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 * as S from './List.styled';
 
 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 modal = useConfirm(true);
   const theme = useTheme();
@@ -211,6 +214,7 @@ const ACList: React.FC = () => {
           placeholder="Search by Principal Name"
           value={search}
           onChange={setSearch}
+          extraActions={<Fts resourceName="acl" />}
         />
       </ControlPanelWrapper>
       <Table
diff --git a/frontend/src/components/ACLPage/lib/useConsumerGroupsOptions.ts b/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) => {
diff --git a/frontend/src/components/ClusterPage/ClusterPage.tsx b/frontend/src/components/ClusterPage/ClusterPage.tsx
@@ -61,6 +61,8 @@ const ClusterPage: React.FC = () => {
       hasAclViewConfigured:
         features.includes(ClusterFeaturesEnum.KAFKA_ACL_VIEW) ||
         features.includes(ClusterFeaturesEnum.KAFKA_ACL_EDIT),
+      ftsEnabled: false,
+      ftsDefaultEnabled: false,
     };
   }, [clusterName, data]);
 
diff --git a/frontend/src/components/Connect/List/List.tsx b/frontend/src/components/Connect/List/List.tsx
@@ -9,6 +9,7 @@ import { useSearchParams } from 'react-router-dom';
 import { useQueryPersister } from 'components/common/NewTable/ColumnFilter';
 import { useLocalStoragePersister } from 'components/common/NewTable/ColumnResizer/lib';
 import BreakableTextCell from 'components/common/NewTable/BreakableTextCell';
+import useFts from 'components/common/Fts/useFts';
 
 import ActionsCell from './ActionsCell';
 import TopicsCell from './TopicsCell';
@@ -80,9 +81,11 @@ const kafkaConnectColumns: ColumnDef<FullConnectorInfo, string>[] = [
 const List: React.FC = () => {
   const { clusterName } = useAppParams<ClusterNameRoute>();
   const [searchParams] = useSearchParams();
+  const { isFtsEnabled } = useFts('connects');
   const { data: connectors } = useConnectors(
     clusterName,
-    searchParams.get('q') || ''
+    searchParams.get('q') || '',
+    isFtsEnabled
   );
 
   const filterPersister = useQueryPersister(kafkaConnectColumns);
diff --git a/frontend/src/components/Connect/List/ListPage.tsx b/frontend/src/components/Connect/List/ListPage.tsx
@@ -4,20 +4,26 @@ import { ClusterNameRoute } from 'lib/paths';
 import Search from 'components/common/Search/Search';
 import PageLoader from 'components/common/PageLoader/PageLoader';
 import { useConnectors } from 'lib/hooks/api/kafkaConnect';
+import Fts from 'components/common/Fts/Fts';
+import useFts from 'components/common/Fts/useFts';
 
 import * as S from './ListPage.styled';
 import List from './List';
 import ConnectorsStatistics from './Statistics/Statistics';
 
 const ListPage: React.FC = () => {
+  useFts('connects');
   const { clusterName } = useAppParams<ClusterNameRoute>();
   const { data, isLoading } = useConnectors(clusterName);
 
   return (
     <>
       <ConnectorsStatistics connectors={data ?? []} isLoading={isLoading} />
       <S.Search hasInput>
-        <Search placeholder="Search by Connect Name, Status or Type" />
+        <Search
+          placeholder="Search by Connect Name, Status or Type"
+          extraActions={<Fts resourceName="connects" />}
+        />
       </S.Search>
       <Suspense fallback={<PageLoader />}>
         <List />
diff --git a/frontend/src/components/ConsumerGroups/List.tsx b/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}
diff --git a/frontend/src/components/Schemas/List/List.tsx b/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 />
diff --git a/frontend/src/components/Topics/List/__tests__/ListPage.spec.tsx b/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()}>
diff --git a/frontend/src/components/Topics/List/__tests__/TopicTable.spec.tsx b/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()}>
diff --git a/frontend/src/components/Topics/Topic/Overview/__test__/Overview.spec.tsx b/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', () => ({
diff --git a/frontend/src/components/Topics/Topic/__test__/Topic.spec.tsx b/frontend/src/components/Topics/Topic/__test__/Topic.spec.tsx
@@ -75,6 +75,8 @@ describe('Details', () => {
           hasKafkaConnectConfigured: true,
           hasSchemaRegistryConfigured: true,
           isTopicDeletionAllowed: true,
+          ftsEnabled: false,
+          ftsDefaultEnabled: false,
         }}
       >
         <WithRoute path={getNonExactPath(clusterTopicPath())}>
diff --git a/frontend/src/components/common/Fts/Fts.tsx b/frontend/src/components/common/Fts/Fts.tsx
@@ -1,6 +1,8 @@
 import React from 'react';
 import FtsIcon from 'components/common/Icons/FtsIcon';
 import styled from 'styled-components';
+import Tooltip from 'components/common/Tooltip/Tooltip';
+import ClusterContext from 'components/contexts/ClusterContext';
 
 import useFts, { FtsAvailableResource } from './useFts';
 
@@ -19,12 +21,25 @@ export const IconWrapper = styled.span.attrs<{ active: boolean }>(() => ({
 `;
 
 const Fts = ({ resourceName }: { resourceName: FtsAvailableResource }) => {
+  const { ftsEnabled: isFtsFetureEnabled } = React.useContext(ClusterContext);
   const { handleSwitch, isFtsEnabled } = useFts(resourceName);
 
+  if (!isFtsFetureEnabled) {
+    return null;
+  }
+
   return (
-    <IconWrapper onClick={handleSwitch} active={isFtsEnabled}>
-      <FtsIcon />
-    </IconWrapper>
+    <Tooltip
+      value={
+        <IconWrapper onClick={handleSwitch} active={isFtsEnabled}>
+          <FtsIcon />
+        </IconWrapper>
+      }
+      content="Apply full text search"
+      placement="bottom"
+      showTooltip
+      fullWidth
+    />
   );
 };
 
diff --git a/frontend/src/components/common/Fts/useFts.ts b/frontend/src/components/common/Fts/useFts.ts
@@ -1,36 +1,72 @@
+import ClusterContext from 'components/contexts/ClusterContext';
 import React from 'react';
 import { useSearchParams } from 'react-router-dom';
 
-export type FtsAvailableResource = 'topics';
+export type FtsAvailableResource =
+  | 'topics'
+  | 'acl'
+  | 'consumer_groups'
+  | 'connects'
+  | 'schemas';
 
 const storageName = 'kafbat-ui_fts';
 
 const useFts = (resourceName: FtsAvailableResource) => {
+  const { ftsEnabled: isFtsFeatureEnabled, ftsDefaultEnabled } =
+    React.useContext(ClusterContext);
   const [searchParams, setSearchParams] = useSearchParams();
   const storageKey = `${storageName}:${resourceName}`;
 
   React.useEffect(() => {
-    if (!!localStorage.getItem(storageKey) && !searchParams.has('fts')) {
-      searchParams.set('fts', 'true');
+    if (!isFtsFeatureEnabled) {
+      searchParams.delete('fts');
+      localStorage.removeItem(storageKey);
+    }
+
+    if (!searchParams.has('fts')) {
+      const value = localStorage.getItem(storageKey);
+      if (value === null) {
+        searchParams.set('fts', ftsDefaultEnabled ? 'true' : 'false');
+      } else {
+        searchParams.set('fts', value);
+      }
     }
+
     setSearchParams(searchParams);
-  }, []);
+  }, [isFtsFeatureEnabled, ftsDefaultEnabled]);
 
   const handleSwitch = () => {
-    if (searchParams.has('fts')) {
-      localStorage.removeItem(storageKey);
-      searchParams.delete('fts');
+    if (!isFtsFeatureEnabled) {
+      return;
+    }
+    const currentValue = searchParams.get('fts') === 'true';
+    if (currentValue) {
+      localStorage.setItem(storageKey, 'false');
+      searchParams.set('fts', 'false');
     } else {
       localStorage.setItem(storageKey, 'true');
       searchParams.set('fts', 'true');
     }
+
     searchParams.set('page', '1');
     setSearchParams(searchParams);
   };
 
+  let isFtsEnabled = isFtsFeatureEnabled;
+  if (isFtsEnabled) {
+    if (searchParams.has('fts')) {
+      isFtsEnabled = searchParams.get('fts') === 'true';
+    } else if (localStorage.getItem(storageKey)) {
+      isFtsEnabled = localStorage.getItem(storageKey) === 'true';
+    } else {
+      isFtsEnabled = ftsDefaultEnabled;
+    }
+  }
+
   return {
     handleSwitch,
-    isFtsEnabled: !!searchParams.get('fts'),
+    isFtsFetureEnabled: isFtsFeatureEnabled,
+    isFtsEnabled,
   };
 };
 
diff --git a/frontend/src/components/common/Tooltip/Tooltip.tsx b/frontend/src/components/common/Tooltip/Tooltip.tsx
@@ -13,13 +13,15 @@ interface TooltipProps {
   content: string;
   placement?: Placement;
   showTooltip?: boolean;
+  fullWidth?: boolean;
 }
 
 const Tooltip: React.FC<TooltipProps> = ({
   value,
   content,
   placement,
   showTooltip = true,
+  fullWidth,
 }) => {
   const [open, setOpen] = useState(false);
   const { x, y, refs, strategy, context } = useFloating({
@@ -29,19 +31,23 @@ const Tooltip: React.FC<TooltipProps> = ({
   });
   const hover = useHover(context);
   const { getReferenceProps, getFloatingProps } = useInteractions([hover]);
+  const isOpened = showTooltip && open;
   return (
     <>
       <div ref={refs.setReference} {...getReferenceProps()}>
         <S.Wrapper>{value}</S.Wrapper>
       </div>
-      {showTooltip && open && (
+      {isOpened && (
         <S.MessageTooltip
           ref={refs.setFloating}
           style={{
             position: strategy,
             top: y ?? 0,
             left: x ?? 0,
             width: 'max-content',
+            minWidth: fullWidth ? 'max-content' : 'initial',
+            display: 'flex',
+            alignItems: 'center',
           }}
           {...getFloatingProps()}
         >
diff --git a/frontend/src/components/contexts/ClusterContext.ts b/frontend/src/components/contexts/ClusterContext.ts
@@ -5,13 +5,17 @@ export interface ContextProps {
   hasKafkaConnectConfigured: boolean;
   hasSchemaRegistryConfigured: boolean;
   isTopicDeletionAllowed: boolean;
+  ftsEnabled: boolean;
+  ftsDefaultEnabled: boolean;
 }
 
 export const initialValue: ContextProps = {
   isReadOnly: false,
   hasKafkaConnectConfigured: false,
   hasSchemaRegistryConfigured: false,
   isTopicDeletionAllowed: true,
+  ftsEnabled: false,
+  ftsDefaultEnabled: false,
 };
 const ClusterContext = React.createContext(initialValue);
 
diff --git a/frontend/src/lib/hooks/api/acl.ts b/frontend/src/lib/hooks/api/acl.ts
diff --git a/frontend/src/lib/hooks/api/consumers.ts b/frontend/src/lib/hooks/api/consumers.ts
diff --git a/frontend/src/lib/hooks/api/kafkaConnect.ts b/frontend/src/lib/hooks/api/kafkaConnect.ts
diff --git a/frontend/src/lib/hooks/api/schemas.ts b/frontend/src/lib/hooks/api/schemas.ts

Original file line number	Diff line number	Diff line change
`@@ -19,6 +19,8 @@ describe('ListPage Component', () => {`
`19`	`19`	`hasKafkaConnectConfigured: true,`
`20`	`20`	`hasSchemaRegistryConfigured: true,`
`21`	`21`	`isTopicDeletionAllowed: true,`
	`22`	`+ ftsEnabled: false,`
	`23`	`+ ftsDefaultEnabled: false,`
`22`	`24`	`}}`
`23`	`25`	`>`
`24`	`26`	`<WithRoute path={clusterTopicsPath()}>`
Original file line number	Diff line number	Diff line change
`@@ -59,6 +59,8 @@ describe('TopicTable Components', () => {`
`59`	`59`	`hasKafkaConnectConfigured: true,`
`60`	`60`	`hasSchemaRegistryConfigured: true,`
`61`	`61`	`isTopicDeletionAllowed,`
	`62`	`+ ftsEnabled: false,`
	`63`	`+ ftsDefaultEnabled: false,`
`62`	`64`	`}}`
`63`	`65`	`>`
`64`	`66`	`<WithRoute path={clusterTopicsPath()}>`