feat(query-search-v2): add initial expression support & store to manage

frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/Provider/QuerySearchV2.provider.tsx

@@ -0,0 +1,126 @@
+import { ReactNode, useCallback, useEffect, useMemo, useRef } from 'react';
+import { parseAsString, useQueryState } from 'nuqs';
+import { useStore } from 'zustand';
+
+import {
+	combineInitialAndUserExpression,
+	getUserExpressionFromCombined,
+} from '../utils';
+import { QuerySearchV2Context } from './context';
+import type { QuerySearchV2ContextValue } from './QuerySearchV2.store';
+import { createExpressionStore } from './QuerySearchV2.store';
+
+export interface QuerySearchV2ProviderProps {
+	queryParamKey: string;
+	initialExpression?: string;
+	/**
+	 * @default false
+	 */
+	persistOnUnmount?: boolean;
+	children: ReactNode;
+}
+
+/**
+ * Provider component that creates a scoped zustand store and exposes
+ * expression state to children via context.
+ */
+export function QuerySearchV2Provider({
+	initialExpression = '',
+	persistOnUnmount = false,
+	queryParamKey,
+	children,
+}: QuerySearchV2ProviderProps): JSX.Element {
+	const storeRef = useRef(createExpressionStore());
+	const store = storeRef.current;
+
+	const [urlExpression, setUrlExpression] = useQueryState(
+		queryParamKey,
+		parseAsString,
+	);
+
+	const committedExpression = useStore(store, (s) => s.committedExpression);
+	const setInputExpression = useStore(store, (s) => s.setInputExpression);
+	const commitExpression = useStore(store, (s) => s.commitExpression);
+	const initializeFromUrl = useStore(store, (s) => s.initializeFromUrl);
+	const resetExpression = useStore(store, (s) => s.resetExpression);
+
+	const isInitialized = useRef(false);
+	useEffect(() => {
+		if (!isInitialized.current && urlExpression) {
+			const cleanedExpression = getUserExpressionFromCombined(
+				initialExpression,
+				urlExpression,
+			);
+			initializeFromUrl(cleanedExpression);
+			isInitialized.current = true;
+		}
+	}, [urlExpression, initialExpression, initializeFromUrl]);
+
+	useEffect(() => {
+		if (isInitialized.current || !urlExpression) {
+			setUrlExpression(committedExpression || null);
+		}
+	}, [committedExpression, setUrlExpression, urlExpression]);
+
+	useEffect(() => {
+		return (): void => {
+			if (!persistOnUnmount) {
+				setUrlExpression(null);
+				resetExpression();
+			}
+		};
+	}, [persistOnUnmount, setUrlExpression, resetExpression]);
+
+	const handleChange = useCallback(
+		(expression: string): void => {
+			const userOnly = getUserExpressionFromCombined(
+				initialExpression,
+				expression,
+			);
+			setInputExpression(userOnly);
+		},
+		[initialExpression, setInputExpression],
+	);
+
+	const handleRun = useCallback(
+		(expression: string): void => {
+			const userOnly = getUserExpressionFromCombined(
+				initialExpression,
+				expression,
+			);
+			commitExpression(userOnly);
+		},
+		[initialExpression, commitExpression],
+	);
+
+	const combinedExpression = useMemo(
+		() => combineInitialAndUserExpression(initialExpression, committedExpression),
+		[initialExpression, committedExpression],
+	);
+
+	const contextValue = useMemo<QuerySearchV2ContextValue>(
+		() => ({
+			expression: combinedExpression,
+			userExpression: committedExpression,
+			initialExpression,
+			querySearchProps: {
+				initialExpression: initialExpression.trim() ? initialExpression : undefined,
+				onChange: handleChange,
+				onRun: handleRun,
+			},
+		}),
+		[
+			combinedExpression,
+			committedExpression,
+			initialExpression,
+			handleChange,
+			handleRun,
+		],
+	);
+
+	return (
+		<QuerySearchV2Context.Provider value={contextValue}>
+			{children}
+		</QuerySearchV2Context.Provider>
+	);
+}

frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/Provider/QuerySearchV2.store.ts

@@ -0,0 +1,60 @@
+import { createStore, StoreApi } from 'zustand';
+
+export type QuerySearchV2Store = {
+	/**
+	 * User-typed expression (local state, updates on typing)
+	 */
+	inputExpression: string;
+	/**
+	 * Committed expression (synced to URL, updates on submit)
+	 */
+	committedExpression: string;
+	setInputExpression: (expression: string) => void;
+	commitExpression: (expression: string) => void;
+	resetExpression: () => void;
+	initializeFromUrl: (urlExpression: string) => void;
+};
+
+export interface QuerySearchProps {
+	initialExpression: string | undefined;
+	onChange: (expression: string) => void;
+	onRun: (expression: string) => void;
+}
+
+export interface QuerySearchV2ContextValue {
+	/**
+	 * Combined expression: "initialExpression AND (userExpression)"
+	 */
+	expression: string;
+	userExpression: string;
+	initialExpression: string;
+	querySearchProps: QuerySearchProps;
+}
+
+export function createExpressionStore(): StoreApi<QuerySearchV2Store> {
+	return createStore<QuerySearchV2Store>((set) => ({
+		inputExpression: '',
+		committedExpression: '',
+		setInputExpression: (expression: string): void => {
+			set({ inputExpression: expression });
+		},
+		commitExpression: (expression: string): void => {
+			set({
+				inputExpression: expression,
+				committedExpression: expression,
+			});
+		},
+		resetExpression: (): void => {
+			set({
+				inputExpression: '',
+				committedExpression: '',
+			});
+		},
+		initializeFromUrl: (urlExpression: string): void => {
+			set({
+				inputExpression: urlExpression,
+				committedExpression: urlExpression,
+			});
+		},
+	}));
+}

frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/Provider/__tests__/QuerySearchExpressionProvider.test.tsx

@@ -0,0 +1,95 @@
+import { ReactNode } from 'react';
+import { act, renderHook } from '@testing-library/react';
+
+import { useQuerySearchV2Context } from '../context';
+import {
+	QuerySearchV2Provider,
+	QuerySearchV2ProviderProps,
+} from '../QuerySearchV2.provider';
+
+const mockSetQueryState = jest.fn();
+let mockUrlValue: string | null = null;
+
+jest.mock('nuqs', () => ({
+	parseAsString: {},
+	useQueryState: jest.fn(() => [mockUrlValue, mockSetQueryState]),
+}));
+
+function createWrapper(
+	props: Partial<QuerySearchV2ProviderProps> = {},
+): ({ children }: { children: ReactNode }) => JSX.Element {
+	return function Wrapper({ children }: { children: ReactNode }): JSX.Element {
+		return (
+			<QuerySearchV2Provider queryParamKey="testExpression" {...props}>
+				{children}
+			</QuerySearchV2Provider>
+		);
+	};
+}
+
+describe('QuerySearchExpressionProvider', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+		mockUrlValue = null;
+	});
+
+	it('should provide initial context values', () => {
+		const { result } = renderHook(() => useQuerySearchV2Context(), {
+			wrapper: createWrapper(),
+		});
+
+		expect(result.current.expression).toBe('');
+		expect(result.current.userExpression).toBe('');
+		expect(result.current.initialExpression).toBe('');
+	});
+
+	it('should combine initialExpression with userExpression', () => {
+		const { result } = renderHook(() => useQuerySearchV2Context(), {
+			wrapper: createWrapper({ initialExpression: 'k8s.pod.name = "my-pod"' }),
+		});
+
+		expect(result.current.expression).toBe('k8s.pod.name = "my-pod"');
+		expect(result.current.initialExpression).toBe('k8s.pod.name = "my-pod"');
+
+		act(() => {
+			result.current.querySearchProps.onChange('service = "api"');
+		});
+		act(() => {
+			result.current.querySearchProps.onRun('service = "api"');
+		});
+
+		expect(result.current.expression).toBe(
+			'k8s.pod.name = "my-pod" AND (service = "api")',
+		);
+		expect(result.current.userExpression).toBe('service = "api"');
+	});
+
+	it('should provide querySearchProps with correct callbacks', () => {
+		const { result } = renderHook(() => useQuerySearchV2Context(), {
+			wrapper: createWrapper({ initialExpression: 'initial' }),
+		});
+
+		expect(result.current.querySearchProps.initialExpression).toBe('initial');
+		expect(typeof result.current.querySearchProps.onChange).toBe('function');
+		expect(typeof result.current.querySearchProps.onRun).toBe('function');
+	});
+
+	it('should initialize from URL value on mount', () => {
+		mockUrlValue = 'status = 500';
+
+		const { result } = renderHook(() => useQuerySearchV2Context(), {
+			wrapper: createWrapper(),
+		});
+
+		expect(result.current.userExpression).toBe('status = 500');
+		expect(result.current.expression).toBe('status = 500');
+	});
+
+	it('should throw error when used outside provider', () => {
+		expect(() => {
+			renderHook(() => useQuerySearchV2Context());
+		}).toThrow(
+			'useQuerySearchV2Context must be used within a QuerySearchV2Provider',
+		);
+	});
+});

frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/Provider/__tests__/store.test.ts

@@ -0,0 +1,61 @@
+import { createExpressionStore } from '../QuerySearchV2.store';
+
+describe('createExpressionStore', () => {
+	it('should create a store with initial state', () => {
+		const store = createExpressionStore();
+		const state = store.getState();
+
+		expect(state.inputExpression).toBe('');
+		expect(state.committedExpression).toBe('');
+	});
+
+	it('should update inputExpression via setInputExpression', () => {
+		const store = createExpressionStore();
+
+		store.getState().setInputExpression('service.name = "api"');
+
+		expect(store.getState().inputExpression).toBe('service.name = "api"');
+		expect(store.getState().committedExpression).toBe('');
+	});
+
+	it('should update both expressions via commitExpression', () => {
+		const store = createExpressionStore();
+
+		store.getState().setInputExpression('service.name = "api"');
+		store.getState().commitExpression('service.name = "api"');
+
+		expect(store.getState().inputExpression).toBe('service.name = "api"');
+		expect(store.getState().committedExpression).toBe('service.name = "api"');
+	});
+
+	it('should reset all state via resetExpression', () => {
+		const store = createExpressionStore();
+
+		store.getState().setInputExpression('service.name = "api"');
+		store.getState().commitExpression('service.name = "api"');
+		store.getState().resetExpression();
+
+		expect(store.getState().inputExpression).toBe('');
+		expect(store.getState().committedExpression).toBe('');
+	});
+
+	it('should initialize from URL value', () => {
+		const store = createExpressionStore();
+
+		store.getState().initializeFromUrl('status = 500');
+
+		expect(store.getState().inputExpression).toBe('status = 500');
+		expect(store.getState().committedExpression).toBe('status = 500');
+	});
+
+	it('should create isolated store instances', () => {
+		const store1 = createExpressionStore();
+		const store2 = createExpressionStore();
+
+		store1.getState().setInputExpression('expr1');
+		store2.getState().setInputExpression('expr2');
+
+		expect(store1.getState().inputExpression).toBe('expr1');
+		expect(store2.getState().inputExpression).toBe('expr2');
+	});
+});

frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/Provider/context.ts

@@ -0,0 +1,18 @@
+// eslint-disable-next-line no-restricted-imports -- React Context required for scoped store pattern
+import { createContext, useContext } from 'react';
+
+import type { QuerySearchV2ContextValue } from './QuerySearchV2.store';
+
+export const QuerySearchV2Context = createContext<QuerySearchV2ContextValue | null>(
+	null,
+);
+
+export function useQuerySearchV2Context(): QuerySearchV2ContextValue {
+	const context = useContext(QuerySearchV2Context);
+	if (!context) {
+		throw new Error(
+			'useQuerySearchV2Context must be used within a QuerySearchV2Provider',
+		);
+	}
+	return context;
+}

frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/Provider/index.ts

@@ -0,0 +1,8 @@
+export { useQuerySearchV2Context } from './context';
+export type { QuerySearchV2ProviderProps } from './QuerySearchV2.provider';
+export { QuerySearchV2Provider } from './QuerySearchV2.provider';
+export type {
+	QuerySearchProps,
+	QuerySearchV2ContextValue,
+	QuerySearchV2Store,
+} from './QuerySearchV2.store';

frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch.styles.scss

@@ -13,6 +13,13 @@
 		display: flex;
 		flex-direction: row;
 
+		.query-search-initial-scope-label {
+			position: absolute;
+			left: 8px;
+			top: 10px;
+			z-index: 10;
+		}
+
 		.query-where-clause-editor {
 			flex: 1;
 			min-width: 400px;
@@ -47,6 +54,10 @@
 				}
 			}
 		}
+
+		&.hasInitialExpression .cm-editor .cm-content {
+			padding-left: 22px !important;
+		}
 	}
 
 	.cm-editor {
@@ -62,7 +73,6 @@
 			border-radius: 2px;
 			border: 1px solid var(--l1-border);
 			padding: 0px !important;
-			background-color: var(--l1-background) !important;
 
 			&:focus-within {
 				border-color: var(--l1-border);

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

@@ -30,7 +30,7 @@ import { useDashboardVariablesByType } from 'hooks/dashboard/useDashboardVariabl
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import useDebounce from 'hooks/useDebounce';
 import { debounce, isNull } from 'lodash-es';
-import { Info, TriangleAlert } from 'lucide-react';
+import { Filter, Info, TriangleAlert } from 'lucide-react';
 import {
 	IDetailedError,
 	IQueryContext,
@@ -47,6 +47,7 @@ import { validateQuery } from 'utils/queryValidationUtils';
 import { unquote } from 'utils/stringUtils';
 
 import { queryExamples } from './constants';
+import { combineInitialAndUserExpression } from './utils';
 
 import './QuerySearch.styles.scss';
 
@@ -85,6 +86,8 @@ interface QuerySearchProps {
 	hardcodedAttributeKeys?: QueryKeyDataSuggestionsProps[];
 	onRun?: (query: string) => void;
 	showFilterSuggestionsWithoutMetric?: boolean;
+	/** When set, the editor shows only the user expression; API/filter uses `initial AND (user)`. */
+	initialExpression?: string;
 }
 
 function QuerySearch({
@@ -96,6 +99,7 @@ function QuerySearch({
 	signalSource,
 	hardcodedAttributeKeys,
 	showFilterSuggestionsWithoutMetric,
+	initialExpression,
 }: QuerySearchProps): JSX.Element {
 	const isDarkMode = useIsDarkMode();
 	const [valueSuggestions, setValueSuggestions] = useState<any[]>([]);
@@ -112,18 +116,26 @@ function QuerySearch({
 	const [isFocused, setIsFocused] = useState(false);
 	const editorRef = useRef<EditorView | null>(null);
 
-	const handleQueryValidation = useCallback((newExpression: string): void => {
-		try {
-			const validationResponse = validateQuery(newExpression);
-			setValidation(validationResponse);
-		} catch (error) {
-			setValidation({
-				isValid: false,
-				message: 'Failed to process query',
-				errors: [error as IDetailedError],
-			});
-		}
-	}, []);
+	const isScopedFilter = initialExpression !== undefined;
+
+	const validateExpressionForEditor = useCallback(
+		(editorDoc: string): void => {
+			const toValidate = isScopedFilter
+				? combineInitialAndUserExpression(initialExpression ?? '', editorDoc)
+				: editorDoc;
+			try {
+				const validationResponse = validateQuery(toValidate);
+				setValidation(validationResponse);
+			} catch (error) {
+				setValidation({
+					isValid: false,
+					message: 'Failed to process query',
+					errors: [error as IDetailedError],
+				});
+			}
+		},
+		[initialExpression, isScopedFilter],
+	);
 
 	const getCurrentExpression = useCallback(
 		(): string => editorRef.current?.state.doc.toString() || '',
@@ -165,6 +177,8 @@ function QuerySearch({
 		setIsEditorReady(true);
 	}, []);
 
+	const prevQueryDataExpressionRef = useRef<string | undefined>();
+
 	useEffect(
 		() => {
 			if (!isEditorReady) {
@@ -173,13 +187,22 @@ function QuerySearch({
 
 			const newExpression = queryData.filter?.expression || '';
 			const currentExpression = getCurrentExpression();
+			const prevExpression = prevQueryDataExpressionRef.current;
 
-			// Do not update codemirror editor if the expression is the same
-			if (newExpression !== currentExpression && !isFocused) {
+			// Only sync editor when queryData.filter?.expression actually changed from external source
+			// Not when focus changed (which would reset uncommitted user input)
+			const queryDataExpressionChanged = prevExpression !== newExpression;
+			prevQueryDataExpressionRef.current = newExpression;
+
+			if (
+				queryDataExpressionChanged &&
+				newExpression !== currentExpression &&
+				!isFocused
+			) {
 				updateEditorValue(newExpression, { skipOnChange: true });
-				if (newExpression) {
-					handleQueryValidation(newExpression);
-				}
+			}
+			if (!isFocused) {
+				validateExpressionForEditor(currentExpression);
 			}
 		},
 		// eslint-disable-next-line react-hooks/exhaustive-deps
@@ -286,7 +309,7 @@ function QuerySearch({
 						}
 					});
 				}
-				setKeySuggestions(Array.from(merged.values()));
+				setKeySuggestions([...merged.values()]);
 
 				// Force reopen the completion if editor is available and focused
 				if (editorRef.current) {
@@ -339,7 +362,7 @@ function QuerySearch({
 		// If value contains single quotes, escape them and wrap in single quotes
 		if (value.includes("'")) {
 			// Replace single quotes with escaped single quotes
-			const escapedValue = value.replace(/'/g, "\\'");
+			const escapedValue = value.replaceAll(/'/g, "\\'");
 			return `'${escapedValue}'`;
 		}
 
@@ -616,7 +639,7 @@ function QuerySearch({
 
 	const handleBlur = (): void => {
 		const currentExpression = getCurrentExpression();
-		handleQueryValidation(currentExpression);
+		validateExpressionForEditor(currentExpression);
 		setIsFocused(false);
 	};
 
@@ -634,7 +657,6 @@ function QuerySearch({
 	);
 
 	const handleExampleClick = (exampleQuery: string): void => {
-		// If there's an existing query, append the example with AND
 		const currentExpression = getCurrentExpression();
 		const newExpression = currentExpression
 			? `${currentExpression} AND ${exampleQuery}`
@@ -899,12 +921,12 @@ function QuerySearch({
 
 			// If we have previous pairs, we can prioritize keys that haven't been used yet
 			if (queryContext.queryPairs && queryContext.queryPairs.length > 0) {
-				const usedKeys = queryContext.queryPairs.map((pair) => pair.key);
+				const usedKeys = new Set(queryContext.queryPairs.map((pair) => pair.key));
 
 				// Add boost to unused keys to prioritize them
 				options = options.map((option) => ({
 					...option,
-					boost: usedKeys.includes(option.label) ? -10 : 10,
+					boost: usedKeys.has(option.label) ? -10 : 10,
 				}));
 			}
 
@@ -1319,6 +1341,19 @@ function QuerySearch({
 			)}
 
 			<div className="query-where-clause-editor-container">
+				{isScopedFilter ? (
+					<Tooltip title={initialExpression || ''} placement="left">
+						<div className="query-search-initial-scope-label">
+							<Filter
+								size={14}
+								style={{
+									opacity: 0.9,
+									color: isDarkMode ? Color.BG_VANILLA_100 : Color.BG_INK_500,
+								}}
+							/>
+						</div>
+					</Tooltip>
+				) : null}
 				<Tooltip
 					title={<div data-log-detail-ignore="true">{getTooltipContent()}</div>}
 					placement="left"
@@ -1358,6 +1393,7 @@ function QuerySearch({
 					className={cx('query-where-clause-editor', {
 						isValid: validation.isValid === true,
 						hasErrors: validation.errors.length > 0,
+						hasInitialExpression: isScopedFilter,
 					})}
 					extensions={[
 						autocompletion({
@@ -1392,7 +1428,12 @@ function QuerySearch({
 									// Mod-Enter is usually Ctrl-Enter or Cmd-Enter based on OS
 									run: (): boolean => {
 										if (onRun && typeof onRun === 'function') {
-											onRun(getCurrentExpression());
+											const user = getCurrentExpression();
+											onRun(
+												isScopedFilter
+													? combineInitialAndUserExpression(initialExpression ?? '', user)
+													: user,
+											);
 										}
 										return true;
 									},
@@ -1557,6 +1598,7 @@ QuerySearch.defaultProps = {
 	placeholder:
 		"Enter your filter query (e.g., http.status_code >= 500 AND service.name = 'frontend')",
 	showFilterSuggestionsWithoutMetric: false,
+	initialExpression: undefined,
 };
 
 export default QuerySearch;

frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/__tests__/utils.ts

@@ -0,0 +1,58 @@
+import {
+	combineInitialAndUserExpression,
+	getUserExpressionFromCombined,
+} from '../utils';
+
+describe('entityLogsExpression', () => {
+	describe('combineInitialAndUserExpression', () => {
+		it('returns user when initial is empty', () => {
+			expect(combineInitialAndUserExpression('', 'body contains error')).toBe(
+				'body contains error',
+			);
+		});
+
+		it('returns initial when user is empty', () => {
+			expect(combineInitialAndUserExpression('k8s.pod.name = "x"', '')).toBe(
+				'k8s.pod.name = "x"',
+			);
+		});
+
+		it('wraps user in parentheses with AND', () => {
+			expect(
+				combineInitialAndUserExpression('k8s.pod.name = "x"', 'body = "a"'),
+			).toBe('k8s.pod.name = "x" AND (body = "a")');
+		});
+	});
+
+	describe('getUserExpressionFromCombined', () => {
+		it('returns empty when combined equals initial', () => {
+			expect(
+				getUserExpressionFromCombined('k8s.pod.name = "x"', 'k8s.pod.name = "x"'),
+			).toBe('');
+		});
+
+		it('extracts user from wrapped form', () => {
+			expect(
+				getUserExpressionFromCombined(
+					'k8s.pod.name = "x"',
+					'k8s.pod.name = "x" AND (body = "a")',
+				),
+			).toBe('body = "a"');
+		});
+
+		it('extracts user from legacy AND without parens', () => {
+			expect(
+				getUserExpressionFromCombined(
+					'k8s.pod.name = "x"',
+					'k8s.pod.name = "x" AND body = "a"',
+				),
+			).toBe('body = "a"');
+		});
+
+		it('returns full combined when initial is empty', () => {
+			expect(getUserExpressionFromCombined('', 'service.name = "a"')).toBe(
+				'service.name = "a"',
+			);
+		});
+	});
+});

frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/utils.ts

@@ -0,0 +1,40 @@
+export function combineInitialAndUserExpression(
+	initial: string,
+	user: string,
+): string {
+	const i = initial.trim();
+	const u = user.trim();
+	if (!i) {
+		return u;
+	}
+	if (!u) {
+		return i;
+	}
+	return `${i} AND (${u})`;
+}
+
+export function getUserExpressionFromCombined(
+	initial: string,
+	combined: string | null | undefined,
+): string {
+	const i = initial.trim();
+	const c = (combined ?? '').trim();
+	if (!c) {
+		return '';
+	}
+	if (!i) {
+		return c;
+	}
+	if (c === i) {
+		return '';
+	}
+	const wrappedPrefix = `${i} AND (`;
+	if (c.startsWith(wrappedPrefix) && c.endsWith(')')) {
+		return c.slice(wrappedPrefix.length, -1);
+	}
+	const plainPrefix = `${i} AND `;
+	if (c.startsWith(plainPrefix)) {
+		return c.slice(plainPrefix.length);
+	}
+	return c;
+}

frontend/src/components/QueryBuilderV2/index.ts

@@ -0,0 +1,14 @@
+export type {
+	QuerySearchProps,
+	QuerySearchV2ContextValue,
+	QuerySearchV2ProviderProps,
+} from './QueryV2/QuerySearch/Provider';
+export {
+	QuerySearchV2Provider,
+	useQuerySearchV2Context,
+} from './QueryV2/QuerySearch/Provider';
+export { QueryBuilderV2 } from './QueryBuilderV2';
+export {
+	QueryBuilderV2Provider,
+	useQueryBuilderV2Context,
+} from './QueryBuilderV2Context';

frontend/src/hooks/useResourceAttribute/__tests__/ResourceProvider.test.tsx

@@ -1,577 +0,0 @@
-import { ReactNode } from 'react';
-import { QueryClient, QueryClientProvider } from 'react-query';
-import { Router } from 'react-router-dom';
-import { act, renderHook, waitFor } from '@testing-library/react';
-import { FeatureKeys } from 'constants/features';
-import ROUTES from 'constants/routes';
-import { createMemoryHistory, MemoryHistory } from 'history';
-import { encode } from 'js-base64';
-import { AppContext } from 'providers/App/App';
-import { IAppContext } from 'providers/App/types';
-import { getAppContextMock } from 'tests/test-utils';
-
-import ResourceProvider from '../ResourceProvider';
-import useResourceAttribute from '../useResourceAttribute';
-
-const mockSafeNavigate = jest.fn();
-
-jest.mock('hooks/useSafeNavigate', () => ({
-	useSafeNavigate: (): { safeNavigate: jest.Mock } => ({
-		safeNavigate: mockSafeNavigate,
-	}),
-}));
-
-jest.mock('lib/history', () => ({
-	__esModule: true,
-	default: {
-		push: jest.fn(),
-		location: {
-			search: '',
-			pathname: '/',
-		},
-	},
-}));
-
-jest.mock('api/metrics/getResourceAttributes', () => ({
-	getResourceAttributesTagKeys: jest.fn(),
-	getResourceAttributesTagValues: jest.fn(),
-}));
-
-// eslint-disable-next-line import/first, import/order
-import {
-	getResourceAttributesTagKeys,
-	getResourceAttributesTagValues,
-	// eslint-disable-next-line import/newline-after-import
-} from 'api/metrics/getResourceAttributes';
-// eslint-disable-next-line import/first, import/order
-import history from 'lib/history';
-
-const mockTagKeys = getResourceAttributesTagKeys as jest.MockedFunction<
-	typeof getResourceAttributesTagKeys
->;
-const mockTagValues = getResourceAttributesTagValues as jest.MockedFunction<
-	typeof getResourceAttributesTagValues
->;
-
-function createWrapper({
-	routerHistory,
-	appContextOverrides,
-}: {
-	routerHistory: MemoryHistory;
-	appContextOverrides?: Partial<IAppContext>;
-}): ({ children }: { children: ReactNode }) => JSX.Element {
-	const queryClient = new QueryClient({
-		defaultOptions: { queries: { retry: false } },
-	});
-	return function Wrapper({ children }: { children: ReactNode }): JSX.Element {
-		return (
-			<QueryClientProvider client={queryClient}>
-				<AppContext.Provider value={getAppContextMock('ADMIN', appContextOverrides)}>
-					<Router history={routerHistory}>
-						<ResourceProvider>{children}</ResourceProvider>
-					</Router>
-				</AppContext.Provider>
-			</QueryClientProvider>
-		);
-	};
-}
-
-function mockLibHistory(search = '', pathname = '/'): void {
-	(history.location as { search: string; pathname: string }).search = search;
-	(history.location as { search: string; pathname: string }).pathname = pathname;
-}
-
-type TagKeysPayload = Parameters<typeof mockTagKeys.mockResolvedValue>[0];
-type TagValuesPayload = Parameters<typeof mockTagValues.mockResolvedValue>[0];
-
-function successTagKeysPayload(keys: string[]): TagKeysPayload {
-	return ({
-		statusCode: 200,
-		error: null,
-		message: 'ok',
-		payload: {
-			data: {
-				attributeKeys: keys.map((key) => ({
-					key,
-					dataType: 'string',
-					type: 'resource',
-					isColumn: false,
-				})),
-			},
-		},
-	} as unknown) as TagKeysPayload;
-}
-
-function successTagValuesPayload(values: string[]): TagValuesPayload {
-	return ({
-		statusCode: 200,
-		error: null,
-		message: 'ok',
-		payload: {
-			data: {
-				stringAttributeValues: values,
-			},
-		},
-	} as unknown) as TagValuesPayload;
-}
-
-describe('ResourceProvider', () => {
-	beforeEach(() => {
-		mockSafeNavigate.mockReset();
-		mockTagKeys.mockReset();
-		mockTagValues.mockReset();
-		mockLibHistory('', '/');
-	});
-
-	describe('initial state', () => {
-		it('starts loading with empty staging, selectedQuery, and queries', () => {
-			const routerHistory = createMemoryHistory({ initialEntries: ['/'] });
-			const { result } = renderHook(() => useResourceAttribute(), {
-				wrapper: createWrapper({ routerHistory }),
-			});
-
-			expect(result.current.loading).toBe(true);
-			expect(result.current.queries).toStrictEqual([]);
-			expect(result.current.staging).toStrictEqual([]);
-			expect(result.current.selectedQuery).toStrictEqual([]);
-			expect(result.current.optionsData).toStrictEqual({ mode: undefined, options: [] });
-		});
-
-		it('hydrates queries from the resourceAttribute URL param on mount', () => {
-			const seeded = [
-				{
-					id: 'abc',
-					tagKey: 'resource_service_name',
-					operator: 'IN',
-					tagValue: ['frontend'],
-				},
-			];
-			mockLibHistory(`?resourceAttribute=${encode(JSON.stringify(seeded))}`, '/');
-
-			const routerHistory = createMemoryHistory({ initialEntries: ['/'] });
-			const { result } = renderHook(() => useResourceAttribute(), {
-				wrapper: createWrapper({ routerHistory }),
-			});
-
-			expect(result.current.queries).toStrictEqual(seeded);
-		});
-	});
-
-	describe('state-machine transitions via handleFocus / handleChange', () => {
-		it('Idle → TagKey fetches tag keys and populates options', async () => {
-			mockTagKeys.mockResolvedValue(successTagKeysPayload(['resource_service_name']));
-			const routerHistory = createMemoryHistory({ initialEntries: ['/'] });
-			const { result } = renderHook(() => useResourceAttribute(), {
-				wrapper: createWrapper({ routerHistory }),
-			});
-
-			act(() => {
-				result.current.handleFocus();
-			});
-
-			await waitFor(() => {
-				expect(mockTagKeys).toHaveBeenCalledTimes(1);
-				expect(result.current.loading).toBe(false);
-				expect(result.current.optionsData.options).toStrictEqual([
-					{ label: 'service.name', value: 'resource_service_name' },
-				]);
-			});
-		});
-
-		it('TagKey → Operator sets OperatorSchema on handleChange (no mode)', async () => {
-			mockTagKeys.mockResolvedValue(successTagKeysPayload(['resource_service_name']));
-			const routerHistory = createMemoryHistory({ initialEntries: ['/'] });
-			const { result } = renderHook(() => useResourceAttribute(), {
-				wrapper: createWrapper({ routerHistory }),
-			});
-
-			act(() => {
-				result.current.handleFocus();
-			});
-			await waitFor(() => expect(result.current.loading).toBe(false));
-
-			act(() => {
-				result.current.handleChange('resource_service_name');
-			});
-
-			expect(result.current.staging).toStrictEqual(['resource_service_name']);
-			expect(result.current.optionsData.options).toStrictEqual([
-				{ label: 'IN', value: 'IN' },
-				{ label: 'Not IN', value: 'Not IN' },
-			]);
-		});
-
-		it('Operator → TagValue fetches values using staging[0]', async () => {
-			mockTagKeys.mockResolvedValue(successTagKeysPayload(['resource_service_name']));
-			mockTagValues.mockResolvedValue(successTagValuesPayload(['frontend', 'backend']));
-			const routerHistory = createMemoryHistory({ initialEntries: ['/'] });
-			const { result } = renderHook(() => useResourceAttribute(), {
-				wrapper: createWrapper({ routerHistory }),
-			});
-
-			act(() => {
-				result.current.handleFocus();
-			});
-			await waitFor(() => expect(result.current.loading).toBe(false));
-			act(() => {
-				result.current.handleChange('resource_service_name');
-			});
-			act(() => {
-				result.current.handleChange('IN');
-			});
-
-			await waitFor(() => {
-				expect(mockTagValues).toHaveBeenCalledWith(
-					expect.objectContaining({ tagKey: 'resource_service_name' }),
-				);
-				expect(result.current.optionsData.mode).toBe('multiple');
-				expect(result.current.optionsData.options).toStrictEqual([
-					{ label: 'frontend', value: 'frontend' },
-					{ label: 'backend', value: 'backend' },
-				]);
-			});
-		});
-
-		it('handleChange with mode updates selectedQuery instead of staging', async () => {
-			mockTagKeys.mockResolvedValue(successTagKeysPayload(['resource_service_name']));
-			mockTagValues.mockResolvedValue(successTagValuesPayload(['frontend']));
-			const routerHistory = createMemoryHistory({ initialEntries: ['/'] });
-			const { result } = renderHook(() => useResourceAttribute(), {
-				wrapper: createWrapper({ routerHistory }),
-			});
-
-			act(() => {
-				result.current.handleFocus();
-			});
-			await waitFor(() => expect(result.current.loading).toBe(false));
-			act(() => {
-				result.current.handleChange('resource_service_name');
-			});
-			act(() => {
-				result.current.handleChange('IN');
-			});
-			await waitFor(() => expect(result.current.optionsData.mode).toBe('multiple'));
-
-			act(() => {
-				// In multiple mode, handleChange treats value as iterable of selected values.
-				result.current.handleChange(('frontend' as unknown) as string);
-			});
-
-			expect(result.current.selectedQuery).toStrictEqual([
-				'f',
-				'r',
-				'o',
-				'n',
-				't',
-				'e',
-				'n',
-				'd',
-			]);
-			// Staging not advanced by mode-mode handleChange
-			expect(result.current.staging).toStrictEqual(['resource_service_name', 'IN']);
-		});
-	});
-
-	describe('handleBlur', () => {
-		it('commits a query when TagValue staging is complete and selectedQuery non-empty', async () => {
-			mockTagKeys.mockResolvedValue(successTagKeysPayload(['resource_service_name']));
-			mockTagValues.mockResolvedValue(successTagValuesPayload(['frontend']));
-			const routerHistory = createMemoryHistory({ initialEntries: ['/svc'] });
-			const { result } = renderHook(() => useResourceAttribute(), {
-				wrapper: createWrapper({ routerHistory }),
-			});
-
-			act(() => {
-				result.current.handleFocus();
-			});
-			await waitFor(() => expect(result.current.loading).toBe(false));
-			act(() => result.current.handleChange('resource_service_name'));
-			act(() => result.current.handleChange('IN'));
-			await waitFor(() => expect(result.current.optionsData.mode).toBe('multiple'));
-			act(() => {
-				// Build selectedQuery = ['frontend']
-				result.current.handleChange((['frontend'] as unknown) as string);
-			});
-
-			act(() => {
-				result.current.handleBlur();
-			});
-
-			await waitFor(() => {
-				expect(result.current.queries).toHaveLength(1);
-				expect(result.current.queries[0]).toMatchObject({
-					tagKey: 'resource_service_name',
-					operator: 'IN',
-					tagValue: ['frontend'],
-				});
-				expect(result.current.staging).toStrictEqual([]);
-				expect(result.current.selectedQuery).toStrictEqual([]);
-				expect(mockSafeNavigate).toHaveBeenCalled();
-			});
-		});
-
-		it('resets state without committing when staging is incomplete', async () => {
-			mockTagKeys.mockResolvedValue(successTagKeysPayload(['resource_service_name']));
-			const routerHistory = createMemoryHistory({ initialEntries: ['/'] });
-			const { result } = renderHook(() => useResourceAttribute(), {
-				wrapper: createWrapper({ routerHistory }),
-			});
-
-			act(() => {
-				result.current.handleFocus();
-			});
-			await waitFor(() => expect(result.current.loading).toBe(false));
-			act(() => result.current.handleChange('resource_service_name'));
-
-			act(() => {
-				result.current.handleBlur();
-			});
-
-			expect(result.current.queries).toStrictEqual([]);
-			expect(result.current.staging).toStrictEqual([]);
-			expect(mockSafeNavigate).not.toHaveBeenCalled();
-		});
-	});
-
-	describe('handleClose / handleClearAll', () => {
-		it('handleClose removes the matching query and navigates', async () => {
-			const seeded = [
-				{ id: 'a', tagKey: 'resource_a', operator: 'IN', tagValue: ['x'] },
-				{ id: 'b', tagKey: 'resource_b', operator: 'IN', tagValue: ['y'] },
-			];
-			mockLibHistory(`?resourceAttribute=${encode(JSON.stringify(seeded))}`, '/');
-
-			const routerHistory = createMemoryHistory({ initialEntries: ['/'] });
-			const { result } = renderHook(() => useResourceAttribute(), {
-				wrapper: createWrapper({ routerHistory }),
-			});
-
-			expect(result.current.queries).toHaveLength(2);
-
-			act(() => {
-				result.current.handleClose('a');
-			});
-
-			await waitFor(() => {
-				expect(result.current.queries).toStrictEqual([seeded[1]]);
-				expect(mockSafeNavigate).toHaveBeenCalled();
-			});
-		});
-
-		it('handleClearAll wipes queries, staging, selectedQuery, options', async () => {
-			const seeded = [
-				{ id: 'a', tagKey: 'resource_a', operator: 'IN', tagValue: ['x'] },
-			];
-			mockLibHistory(`?resourceAttribute=${encode(JSON.stringify(seeded))}`, '/');
-
-			const routerHistory = createMemoryHistory({ initialEntries: ['/'] });
-			const { result } = renderHook(() => useResourceAttribute(), {
-				wrapper: createWrapper({ routerHistory }),
-			});
-
-			act(() => {
-				result.current.handleClearAll();
-			});
-
-			await waitFor(() => {
-				expect(result.current.queries).toStrictEqual([]);
-				expect(result.current.staging).toStrictEqual([]);
-				expect(result.current.optionsData).toStrictEqual({
-					mode: undefined,
-					options: [],
-				});
-			});
-		});
-	});
-
-	describe('handleEnvironmentChange', () => {
-		it('adds an environment query when envs are provided', async () => {
-			const routerHistory = createMemoryHistory({ initialEntries: ['/'] });
-			const { result } = renderHook(() => useResourceAttribute(), {
-				wrapper: createWrapper({ routerHistory }),
-			});
-
-			act(() => {
-				result.current.handleEnvironmentChange(['production']);
-			});
-
-			await waitFor(() => {
-				expect(result.current.queries).toHaveLength(1);
-				expect(result.current.queries[0]).toMatchObject({
-					tagKey: 'resource_deployment_environment',
-					operator: 'IN',
-					tagValue: ['production'],
-				});
-			});
-		});
-
-		it('clears the environment query when an empty array is passed', async () => {
-			const seeded = [
-				{
-					id: 'env',
-					tagKey: 'resource_deployment_environment',
-					operator: 'IN',
-					tagValue: ['production'],
-				},
-				{
-					id: 'svc',
-					tagKey: 'resource_service_name',
-					operator: 'IN',
-					tagValue: ['frontend'],
-				},
-			];
-			mockLibHistory(`?resourceAttribute=${encode(JSON.stringify(seeded))}`, '/');
-
-			const routerHistory = createMemoryHistory({ initialEntries: ['/'] });
-			const { result } = renderHook(() => useResourceAttribute(), {
-				wrapper: createWrapper({ routerHistory }),
-			});
-
-			act(() => {
-				result.current.handleEnvironmentChange([]);
-			});
-
-			await waitFor(() => {
-				const tagKeys = result.current.queries.map((q) => q.tagKey);
-				expect(tagKeys).not.toContain('resource_deployment_environment');
-				expect(tagKeys).toContain('resource_service_name');
-			});
-		});
-
-		it('replaces an existing environment query rather than appending', async () => {
-			const seeded = [
-				{
-					id: 'env',
-					tagKey: 'resource_deployment_environment',
-					operator: 'IN',
-					tagValue: ['production'],
-				},
-			];
-			mockLibHistory(`?resourceAttribute=${encode(JSON.stringify(seeded))}`, '/');
-
-			const routerHistory = createMemoryHistory({ initialEntries: ['/'] });
-			const { result } = renderHook(() => useResourceAttribute(), {
-				wrapper: createWrapper({ routerHistory }),
-			});
-
-			act(() => {
-				result.current.handleEnvironmentChange(['staging']);
-			});
-
-			await waitFor(() => {
-				const envQueries = result.current.queries.filter(
-					(q) => q.tagKey === 'resource_deployment_environment',
-				);
-				expect(envQueries).toHaveLength(1);
-				expect(envQueries[0].tagValue).toStrictEqual(['staging']);
-			});
-		});
-
-		it('uses the dotted deployment env key when DOT_METRICS_ENABLED is active', async () => {
-			const routerHistory = createMemoryHistory({ initialEntries: ['/'] });
-			const { result } = renderHook(() => useResourceAttribute(), {
-				wrapper: createWrapper({
-					routerHistory,
-					appContextOverrides: {
-						featureFlags: [
-							{
-								name: FeatureKeys.DOT_METRICS_ENABLED,
-								active: true,
-								usage: 0,
-								usage_limit: -1,
-								route: '',
-							},
-						],
-					},
-				}),
-			});
-
-			act(() => {
-				result.current.handleEnvironmentChange(['production']);
-			});
-
-			await waitFor(() => {
-				expect(result.current.queries[0].tagKey).toBe(
-					'resource_deployment.environment',
-				);
-			});
-		});
-
-		it('preserves unrelated query params when dispatching', async () => {
-			const routerHistory = createMemoryHistory({
-				initialEntries: ['/?tab=overview'],
-			});
-			const { result } = renderHook(() => useResourceAttribute(), {
-				wrapper: createWrapper({ routerHistory }),
-			});
-
-			act(() => {
-				result.current.handleEnvironmentChange(['production']);
-			});
-
-			await waitFor(() => {
-				expect(mockSafeNavigate).toHaveBeenCalled();
-				const calledWith = mockSafeNavigate.mock.calls[0][0] as string;
-				expect(calledWith).toContain('tab=overview');
-				expect(calledWith).toContain('resourceAttribute=');
-			});
-		});
-	});
-
-	describe('getVisibleQueries (SERVICE_MAP filtering)', () => {
-		it('filters queries down to whitelisted keys on SERVICE_MAP', () => {
-			const seeded = [
-				{
-					id: 'a',
-					tagKey: 'resource_service_name',
-					operator: 'IN',
-					tagValue: ['frontend'],
-				},
-				{
-					id: 'b',
-					tagKey: 'resource_k8s_cluster_name',
-					operator: 'IN',
-					tagValue: ['prod'],
-				},
-			];
-			mockLibHistory(
-				`?resourceAttribute=${encode(JSON.stringify(seeded))}`,
-				ROUTES.SERVICE_MAP,
-			);
-
-			const routerHistory = createMemoryHistory({
-				initialEntries: [ROUTES.SERVICE_MAP],
-			});
-			const { result } = renderHook(() => useResourceAttribute(), {
-				wrapper: createWrapper({ routerHistory }),
-			});
-
-			expect(result.current.queries).toStrictEqual([seeded[1]]);
-		});
-
-		it('returns all queries on non-SERVICE_MAP routes', () => {
-			const seeded = [
-				{
-					id: 'a',
-					tagKey: 'resource_service_name',
-					operator: 'IN',
-					tagValue: ['frontend'],
-				},
-				{
-					id: 'b',
-					tagKey: 'resource_k8s_cluster_name',
-					operator: 'IN',
-					tagValue: ['prod'],
-				},
-			];
-			mockLibHistory(`?resourceAttribute=${encode(JSON.stringify(seeded))}`, '/services');
-
-			const routerHistory = createMemoryHistory({ initialEntries: ['/services'] });
-			const { result } = renderHook(() => useResourceAttribute(), {
-				wrapper: createWrapper({ routerHistory }),
-			});
-
-			expect(result.current.queries).toHaveLength(2);
-		});
-	});
-});