Migrate QueryBuilderSearch in Logs Pipelines to v2 (#10387)

* feat: function idon func added

* feat: test update

* fix: minor refactor

* feat: migrate to querybuilder search v2

* feat: fix failing test

* feat: minor change

frontend/src/components/LogDetail/index.tsx

@@ -86,13 +86,8 @@ function LogDetailInner({
 		const handleClickOutside = (e: MouseEvent): void => {
 			const target = e.target as HTMLElement;
 
-			// Don't close if clicking on drawer content, overlays, or portal elements
-			if (
-				target.closest('[data-log-detail-ignore="true"]') ||
-				target.closest('.cm-tooltip-autocomplete') ||
-				target.closest('.drawer-popover') ||
-				target.closest('.query-status-popover')
-			) {
+			// Don't close if clicking on explicitly ignored regions
+			if (target.closest('[data-log-detail-ignore="true"]')) {
 				return;
 			}
 
@@ -405,11 +400,7 @@ function LogDetailInner({
 			<div className="log-detail-drawer__content" data-log-detail-ignore="true">
 				<div className="log-detail-drawer__log">
 					<Divider type="vertical" className={cx('log-type-indicator', logType)} />
-					<Tooltip
-						title={removeEscapeCharacters(log?.body)}
-						placement="left"
-						mouseLeaveDelay={0}
-					>
+					<Tooltip title={removeEscapeCharacters(log?.body)} placement="left">
 						<div className="log-body" dangerouslySetInnerHTML={htmlBody} />
 					</Tooltip>
 
@@ -475,7 +466,6 @@ function LogDetailInner({
 								title="Show Filters"
 								placement="topLeft"
 								aria-label="Show Filters"
-								mouseLeaveDelay={0}
 							>
 								<Button
 									className="action-btn"
@@ -491,7 +481,6 @@ function LogDetailInner({
 							aria-label={
 								selectedView === VIEW_TYPES.JSON ? 'Copy JSON' : 'Copy Log Link'
 							}
-							mouseLeaveDelay={0}
 						>
 							<Button
 								className="action-btn"

frontend/src/components/Logs/AddToQueryHOC.tsx

@@ -27,11 +27,7 @@ function AddToQueryHOC({
 	return (
 		// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
 		<div className={cx('addToQueryContainer', fontSize)} onClick={handleQueryAdd}>
-			<Popover
-				overlayClassName="drawer-popover"
-				placement="top"
-				content={popOverContent}
-			>
+			<Popover placement="top" content={popOverContent}>
 				{children}
 			</Popover>
 		</div>

frontend/src/components/Logs/CopyClipboardHOC.tsx

@@ -32,7 +32,6 @@ function CopyClipboardHOC({
 		<span onClick={onClick} role="presentation" tabIndex={-1}>
 			<Popover
 				placement="top"
-				overlayClassName="drawer-popover"
 				content={<span style={{ fontSize: '0.9rem' }}>{tooltipText}</span>}
 			>
 				{children}

frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch.tsx

@@ -1328,10 +1328,7 @@ function QuerySearch({
 			)}
 
 			<div className="query-where-clause-editor-container">
-				<Tooltip
-					title={<div data-log-detail-ignore="true">{getTooltipContent()}</div>}
-					placement="left"
-				>
+				<Tooltip title={getTooltipContent()} placement="left">
 					<a
 						href="https://signoz.io/docs/userguide/search-syntax/"
 						target="_blank"

frontend/src/container/LogDetailedView/BodyTitleRenderer.tsx

@@ -121,23 +121,9 @@ function BodyTitleRenderer({
 	return (
 		<TitleWrapper onClick={handleNodeClick}>
 			{typeof value !== 'object' && (
-				<span
-					onClick={(e): void => {
-						e.stopPropagation();
-						e.preventDefault();
-					}}
-					onMouseDown={(e): void => e.preventDefault()}
-				>
-					<Dropdown
-						menu={menu}
-						trigger={['click']}
-						dropdownRender={(originNode): React.ReactNode => (
-							<div data-log-detail-ignore="true">{originNode}</div>
-						)}
-					>
-						<SettingOutlined style={{ marginRight: 8 }} className="hover-reveal" />
-					</Dropdown>
-				</span>
+				<Dropdown menu={menu} trigger={['click']}>
+					<SettingOutlined style={{ marginRight: 8 }} className="hover-reveal" />
+				</Dropdown>
 			)}
 			{title.toString()}{' '}
 			{!parentIsArray && typeof value !== 'object' && (

frontend/src/container/LogDetailedView/FieldRenderer.tsx

@@ -13,7 +13,7 @@ function FieldRenderer({ field }: FieldRendererProps): JSX.Element {
 		<span className="field-renderer-container">
 			{dataType && newField && logType ? (
 				<>
-					<Tooltip placement="left" title={newField} mouseLeaveDelay={0}>
+					<Tooltip placement="left" title={newField}>
 						<Typography.Text ellipsis className="label">
 							{newField}{' '}
 						</Typography.Text>

frontend/src/container/LogDetailedView/TableView.tsx

@@ -245,7 +245,7 @@ function TableView({
 							<Typography.Text>{renderedField}</Typography.Text>
 
 							{traceId && (
-								<Tooltip title="Inspect in Trace" mouseLeaveDelay={0}>
+								<Tooltip title="Inspect in Trace">
 									<Button
 										className="periscope-btn"
 										onClick={(

frontend/src/container/LogsExplorerList/InfinityTableView/index.tsx

@@ -139,7 +139,8 @@ const InfinityTable = forwardRef<TableVirtuosoHandle, InfinityTableProps>(
 					{tableColumns
 						.filter((column) => column.key)
 						.map((column) => {
-							const isDragColumn = column.key !== 'expand';
+							const isDragColumn =
+								column.key !== 'expand' && column.key !== 'state-indicator';
 
 							return (
 								<TableHeaderCellStyled

frontend/src/container/PipelinePage/PipelineListsView/AddNewPipeline/FormFields/FilterInput/index.tsx

@@ -1,7 +1,7 @@
 import { useTranslation } from 'react-i18next';
 import { Form } from 'antd';
 import { initialQueryBuilderFormValuesMap } from 'constants/queryBuilder';
-import QueryBuilderSearch from 'container/QueryBuilder/filters/QueryBuilderSearch';
+import QueryBuilderSearchV2 from 'container/QueryBuilder/filters/QueryBuilderSearchV2/QueryBuilderSearchV2';
 import isEqual from 'lodash-es/isEqual';
 import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
 
@@ -30,7 +30,7 @@ function TagFilterInput({
 	};
 
 	return (
-		<QueryBuilderSearch
+		<QueryBuilderSearchV2
 			query={query}
 			onChange={onQueryChange}
 			placeholder={placeholder}

frontend/src/container/PipelinePage/tests/PipelineListsView.test.tsx

@@ -86,7 +86,7 @@ jest.mock('providers/preferences/sync/usePreferenceSync', () => ({
 }));
 
 const BASE_URL = ENVIRONMENT.baseURL;
-const attributeKeysURL = `${BASE_URL}/api/v3/autocomplete/attribute_keys`;
+const attributeKeysURL = `${BASE_URL}/api/v3/filter_suggestions`;
 
 describe('PipelinePage container test', () => {
 	beforeAll(() => {
@@ -333,26 +333,34 @@ describe('PipelinePage container test', () => {
 					ctx.json({
 						status: 'success',
 						data: {
-							attributeKeys: [
+							attributes: [
 								{
 									key: 'otelServiceName',
 									dataType: DataTypes.String,
 									type: 'tag',
+									isColumn: false,
+									isJSON: false,
+								},
+								{
+									key: 'service.name',
+									dataType: DataTypes.String,
+									type: 'resource',
+									isColumn: false,
+									isJSON: false,
 								},
 								{
 									key: 'service.instance.id',
 									dataType: DataTypes.String,
 									type: 'resource',
-								},
-								{
-									key: 'service.name',
-									dataType: DataTypes.String,
-									type: 'resource',
+									isColumn: false,
+									isJSON: false,
 								},
 								{
 									key: 'service.name',
 									dataType: DataTypes.String,
 									type: 'tag',
+									isColumn: false,
+									isJSON: false,
 								},
 							],
 						},

frontend/src/container/QueryBuilder/filters/QueryBuilderSearchV2/QueryBuilderSearchV2.tsx

@@ -973,6 +973,7 @@ function QueryBuilderSearchV2(
 	return (
 		<div className="query-builder-search-v2">
 			<Select
+				data-testid={'qb-search-select'}
 				ref={selectRef}
 				// eslint-disable-next-line react/jsx-props-no-spreading
 				{...(hasPopupContainer ? { getPopupContainer: popupContainer } : {})}

frontend/src/hooks/logs/useActiveLog.ts

@@ -1,17 +1,15 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import { useQueryClient } from 'react-query';
 import { useDispatch, useSelector } from 'react-redux';
 import { useHistory, useLocation } from 'react-router-dom';
 import { getAggregateKeys } from 'api/queryBuilder/getAttributeKeys';
 import { SOMETHING_WENT_WRONG } from 'constants/api';
-import { QueryParams } from 'constants/query';
 import { OPERATORS, QueryBuilderKeys } from 'constants/queryBuilder';
 import ROUTES from 'constants/routes';
 import { MetricsType } from 'container/MetricsApplication/constant';
 import { getOperatorValue } from 'container/QueryBuilder/filters/QueryBuilderSearch/utils';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useNotifications } from 'hooks/useNotifications';
-import useUrlQuery from 'hooks/useUrlQuery';
 import { getGeneratedFilterQueryString } from 'lib/getGeneratedFilterQueryString';
 import { chooseAutocompleteFromCustomValue } from 'lib/newQueryBuilder/chooseAutocompleteFromCustomValue';
 import { AppState } from 'store/reducers';
@@ -56,20 +54,6 @@ export const useActiveLog = (): UseActiveLog => {
 
 	const [activeLog, setActiveLog] = useState<ILog | null>(null);
 
-	// Close drawer/clear active log when query in URL changes
-	const urlQuery = useUrlQuery();
-	const compositeQuery = urlQuery.get(QueryParams.compositeQuery) ?? '';
-	const prevQueryRef = useRef<string | null>(null);
-	useEffect(() => {
-		if (
-			prevQueryRef.current !== null &&
-			prevQueryRef.current !== compositeQuery
-		) {
-			setActiveLog(null);
-		}
-		prevQueryRef.current = compositeQuery;
-	}, [compositeQuery]);
-
 	const onSetDetailedLogData = useCallback(
 		(logData: ILog) => {
 			dispatch({