chore: resolve comments

Replace xstate state machines with useState-based step tracking in the
three remaining consumers (labels form, dashboard search filter,
resource attribute provider). Drops xstate and @xstate/react from
dependencies and removes the corresponding no-restricted-imports
entries from oxlint config.

frontend/.oxlintrc.json

@@ -298,14 +298,6 @@
             "name": "react-redux",
             "message": "[State mgmt] react-redux is deprecated. Migrate to Zustand, nuqs, or react-query."
           },
-          {
-            "name": "xstate",
-            "message": "[State mgmt] xstate is deprecated. Migrate to Zustand or react-query."
-          },
-          {
-            "name": "@xstate/react",
-            "message": "[State mgmt] @xstate/react is deprecated. Migrate to Zustand or react-query."
-          },
           {
             "name": "react",
             "importNames": [

frontend/package.json

@@ -64,7 +64,6 @@
     "@visx/shape": "3.5.0",
     "@visx/tooltip": "3.3.0",
     "@vitejs/plugin-react": "5.1.4",
-    "@xstate/react": "^3.0.0",
     "ansi-to-html": "0.7.2",
     "antd": "5.11.0",
     "antd-table-saveas-excel": "2.2.1",
@@ -147,7 +146,6 @@
     "vite": "npm:rolldown-vite@7.3.1",
     "vite-plugin-html": "3.2.2",
     "web-vitals": "^0.2.4",
-    "xstate": "^4.31.0",
     "zod": "4.3.6",
     "zustand": "5.0.11"
   },

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

@@ -1,126 +0,0 @@
-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

@@ -1,60 +0,0 @@
-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

@@ -1,95 +0,0 @@
-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

@@ -1,61 +0,0 @@
-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

@@ -1,18 +0,0 @@
-// 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

@@ -1,8 +0,0 @@
-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,13 +13,6 @@
 		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;
@@ -54,10 +47,6 @@
 				}
 			}
 		}
-
-		&.hasInitialExpression .cm-editor .cm-content {
-			padding-left: 22px !important;
-		}
 	}
 
 	.cm-editor {
@@ -73,6 +62,7 @@
 			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 { Filter, Info, TriangleAlert } from 'lucide-react';
+import { Info, TriangleAlert } from 'lucide-react';
 import {
 	IDetailedError,
 	IQueryContext,
@@ -47,7 +47,6 @@ import { validateQuery } from 'utils/queryValidationUtils';
 import { unquote } from 'utils/stringUtils';
 
 import { queryExamples } from './constants';
-import { combineInitialAndUserExpression } from './utils';
 
 import './QuerySearch.styles.scss';
 
@@ -86,8 +85,6 @@ 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({
@@ -99,7 +96,6 @@ function QuerySearch({
 	signalSource,
 	hardcodedAttributeKeys,
 	showFilterSuggestionsWithoutMetric,
-	initialExpression,
 }: QuerySearchProps): JSX.Element {
 	const isDarkMode = useIsDarkMode();
 	const [valueSuggestions, setValueSuggestions] = useState<any[]>([]);
@@ -116,26 +112,18 @@ function QuerySearch({
 	const [isFocused, setIsFocused] = useState(false);
 	const editorRef = useRef<EditorView | null>(null);
 
-	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 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 getCurrentExpression = useCallback(
 		(): string => editorRef.current?.state.doc.toString() || '',
@@ -177,8 +165,6 @@ function QuerySearch({
 		setIsEditorReady(true);
 	}, []);
 
-	const prevQueryDataExpressionRef = useRef<string | undefined>();
-
 	useEffect(
 		() => {
 			if (!isEditorReady) {
@@ -187,22 +173,13 @@ function QuerySearch({
 
 			const newExpression = queryData.filter?.expression || '';
 			const currentExpression = getCurrentExpression();
-			const prevExpression = prevQueryDataExpressionRef.current;
 
-			// 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
-			) {
+			// Do not update codemirror editor if the expression is the same
+			if (newExpression !== currentExpression && !isFocused) {
 				updateEditorValue(newExpression, { skipOnChange: true });
-			}
-			if (!isFocused) {
-				validateExpressionForEditor(currentExpression);
+				if (newExpression) {
+					handleQueryValidation(newExpression);
+				}
 			}
 		},
 		// eslint-disable-next-line react-hooks/exhaustive-deps
@@ -309,7 +286,7 @@ function QuerySearch({
 						}
 					});
 				}
-				setKeySuggestions([...merged.values()]);
+				setKeySuggestions(Array.from(merged.values()));
 
 				// Force reopen the completion if editor is available and focused
 				if (editorRef.current) {
@@ -362,7 +339,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.replaceAll(/'/g, "\\'");
+			const escapedValue = value.replace(/'/g, "\\'");
 			return `'${escapedValue}'`;
 		}
 
@@ -639,7 +616,7 @@ function QuerySearch({
 
 	const handleBlur = (): void => {
 		const currentExpression = getCurrentExpression();
-		validateExpressionForEditor(currentExpression);
+		handleQueryValidation(currentExpression);
 		setIsFocused(false);
 	};
 
@@ -657,6 +634,7 @@ 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}`
@@ -921,12 +899,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 = new Set(queryContext.queryPairs.map((pair) => pair.key));
+				const usedKeys = queryContext.queryPairs.map((pair) => pair.key);
 
 				// Add boost to unused keys to prioritize them
 				options = options.map((option) => ({
 					...option,
-					boost: usedKeys.has(option.label) ? -10 : 10,
+					boost: usedKeys.includes(option.label) ? -10 : 10,
 				}));
 			}
 
@@ -1341,19 +1319,6 @@ 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"
@@ -1393,7 +1358,6 @@ function QuerySearch({
 					className={cx('query-where-clause-editor', {
 						isValid: validation.isValid === true,
 						hasErrors: validation.errors.length > 0,
-						hasInitialExpression: isScopedFilter,
 					})}
 					extensions={[
 						autocompletion({
@@ -1428,12 +1392,7 @@ function QuerySearch({
 									// Mod-Enter is usually Ctrl-Enter or Cmd-Enter based on OS
 									run: (): boolean => {
 										if (onRun && typeof onRun === 'function') {
-											const user = getCurrentExpression();
-											onRun(
-												isScopedFilter
-													? combineInitialAndUserExpression(initialExpression ?? '', user)
-													: user,
-											);
+											onRun(getCurrentExpression());
 										}
 										return true;
 									},
@@ -1598,7 +1557,6 @@ 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

@@ -1,58 +0,0 @@
-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

@@ -1,40 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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/container/FormAlertRules/labels/Labels.machine.ts

@@ -1,50 +0,0 @@
-// eslint-disable-next-line no-restricted-imports
-import { createMachine } from 'xstate';
-
-export const ResourceAttributesFilterMachine =
-	/** @xstate-layout N4IgpgJg5mDOIC5QBECGsAWAjA9qgThAAQDKYBAxhkQIIB2xAYgJYA2ALmPgHQAqqUANJgAngGIAcgFEAGr0SgADjljN2zHHQUgAHogAcAFgAM3AOz6ATAEYAzJdsA2Y4cOWAnABoQIxAFpDR2tuQ319AFYTcKdbFycAX3jvNExcAmIySmp6JjZOHn4hUTFNACFWAFd8bWVVdU1tPQQzY1MXY2tDdzNHM3dHd0NvXwR7biMTa313S0i+63DE5PRsPEJScnwqWgYiFg4uPgFhcQAlKRIpeSQQWrUNLRumx3Czbg8TR0sbS31jfUcw38fW47gBHmm4XCVms3SWIBSq3SGyyO1yBx4AHlFFxUOwcPhJLJrkoVPcGk9ENYFuF3i5YR0wtEHECEAEgiEmV8zH1DLYzHZ4Yi0utMltsrt9vluNjcfjCWVKtUbnd6o9QE1rMYBtxbGFvsZ3NrZj1WdYOfotUZLX0XEFHEKViKMpttjk9nlDrL8HiCWJzpcSbcyWrGoh3NCQj0zK53P1ph1WeFLLqnJZ2s5vmZLA6kginWsXaj3VLDoUAGqoSpgEp0cpVGohh5hhDWDy0sz8zruakzamWVm-Qyg362V5-AZOayO1KFlHitEejFHKCV6v+i5XRt1ZuU1s52zjNOOaZfdOWIY+RDZ0Hc6ZmKEXqyLPPCudit2Sz08ACSEFYNbSHI27kuquiIOEjiONwjJgrM3RWJYZisgEIJgnYPTmuEdi2OaiR5nQOAQHA2hvsiH4Sui0qFCcIGhnuLSmP0YJuJ2xjJsmKELG8XZTK0tjdHG06vgW5GupRS7St6vrKqSO4UhqVL8TBWp8o4eqdl0A5Xmy3G6gK56-B4uERDOSKiuJi6lgUAhrhUYB0buimtrEKZBDYrxaS0OZca8+ltheybOI4hivGZzrzp+VGHH+AGOQp4EIHy+ghNYnawtG4TsbYvk8QKfHGAJfQ9uF76WSW37xWBTSGJ0qXpd0vRZdEKGPqC2YeO2-zfO4+HxEAA */
-	createMachine({
-		tsTypes: {} as import('./Labels.machine.typegen').Typegen0,
-		initial: 'Idle',
-		states: {
-			LabelKey: {
-				on: {
-					NEXT: {
-						actions: 'onSelectLabelValue',
-						target: 'LabelValue',
-					},
-					onBlur: {
-						actions: 'onSelectLabelValue',
-						target: 'LabelValue',
-					},
-					RESET: {
-						target: 'Idle',
-					},
-				},
-			},
-			LabelValue: {
-				on: {
-					NEXT: {
-						actions: ['onValidateQuery'],
-					},
-					onBlur: {
-						actions: ['onValidateQuery'],
-						// target: 'Idle',
-					},
-					RESET: {
-						target: 'Idle',
-					},
-				},
-			},
-			Idle: {
-				on: {
-					NEXT: {
-						actions: 'onSelectLabelKey',
-						description: 'Enter a label key',
-						target: 'LabelKey',
-					},
-				},
-			},
-		},
-		id: 'Label Key Values',
-	});

frontend/src/container/FormAlertRules/labels/Labels.machine.typegen.ts

@@ -1,25 +0,0 @@
-// This file was automatically generated. Edits will be overwritten
-
-export interface Typegen0 {
-	'@@xstate/typegen': true;
-	eventsCausingActions: {
-		onSelectLabelValue: 'NEXT' | 'onBlur';
-		onValidateQuery: 'NEXT' | 'onBlur';
-		onSelectLabelKey: 'NEXT';
-	};
-	internalEvents: {
-		'xstate.init': { type: 'xstate.init' };
-	};
-	invokeSrcNameMap: {};
-	missingImplementations: {
-		actions: 'onSelectLabelValue' | 'onValidateQuery' | 'onSelectLabelKey';
-		services: never;
-		guards: never;
-		delays: never;
-	};
-	eventsCausingServices: {};
-	eventsCausingGuards: {};
-	eventsCausingDelays: {};
-	matchesStates: 'LabelKey' | 'LabelValue' | 'Idle';
-	tags: never;
-}

frontend/src/container/FormAlertRules/labels/index.tsx

@@ -4,20 +4,20 @@ import {
 	CloseCircleFilled,
 	ExclamationCircleOutlined,
 } from '@ant-design/icons';
-// eslint-disable-next-line no-restricted-imports
-import { useMachine } from '@xstate/react';
 import { Button, Input, message, Modal } from 'antd';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { map } from 'lodash-es';
 import { Labels } from 'types/api/alerts/def';
 import { v4 as uuid } from 'uuid';
 
-import { ResourceAttributesFilterMachine } from './Labels.machine';
 import QueryChip from './QueryChip';
 import { QueryChipItem, SearchContainer } from './styles';
 import { ILabelRecord } from './types';
 import { createQuery, flattenLabels, prepareLabels } from './utils';
 
+type LabelStep = 'Idle' | 'LabelKey' | 'LabelValue';
+type LabelEvent = 'NEXT' | 'onBlur' | 'RESET';
+
 interface LabelSelectProps {
 	onSetLabels: (q: Labels) => void;
 	initialValues: Labels | undefined;
@@ -35,42 +35,65 @@ function LabelSelect({
 	const [queries, setQueries] = useState<ILabelRecord[]>(
 		initialValues ? flattenLabels(initialValues) : [],
 	);
+	const [step, setStep] = useState<LabelStep>('Idle');
 
 	const dispatchChanges = (updatedRecs: ILabelRecord[]): void => {
 		onSetLabels(prepareLabels(updatedRecs, initialValues));
 		setQueries(updatedRecs);
 	};
 
-	const [state, send] = useMachine(ResourceAttributesFilterMachine, {
-		actions: {
-			onSelectLabelKey: () => {},
-			onSelectLabelValue: () => {
-				if (currentVal !== '') {
-					setStaging((prevState) => [...prevState, currentVal]);
-				} else {
-					return;
-				}
-				setCurrentVal('');
-			},
-			onValidateQuery: (): void => {
-				if (currentVal === '') {
-					return;
-				}
+	const onSelectLabelValue = (): void => {
+		if (currentVal !== '') {
+			setStaging((prevState) => [...prevState, currentVal]);
+		} else {
+			return;
+		}
+		setCurrentVal('');
+	};
 
-				const generatedQuery = createQuery([...staging, currentVal]);
+	const onValidateQuery = (): void => {
+		if (currentVal === '') {
+			return;
+		}
 
-				if (generatedQuery) {
-					dispatchChanges([...queries, generatedQuery]);
-					setStaging([]);
-					setCurrentVal('');
-					send('RESET');
-				}
-			},
-		},
-	});
+		const generatedQuery = createQuery([...staging, currentVal]);
+
+		if (generatedQuery) {
+			dispatchChanges([...queries, generatedQuery]);
+			setStaging([]);
+			setCurrentVal('');
+			setStep('Idle');
+		}
+	};
+
+	const send = (event: LabelEvent): void => {
+		if (event === 'RESET') {
+			setStep('Idle');
+			return;
+		}
+		if (event === 'NEXT') {
+			if (step === 'Idle') {
+				setStep('LabelKey');
+			} else if (step === 'LabelKey') {
+				onSelectLabelValue();
+				setStep('LabelValue');
+			} else if (step === 'LabelValue') {
+				onValidateQuery();
+			}
+			return;
+		}
+		if (event === 'onBlur') {
+			if (step === 'LabelKey') {
+				onSelectLabelValue();
+				setStep('LabelValue');
+			} else if (step === 'LabelValue') {
+				onValidateQuery();
+			}
+		}
+	};
 
 	const handleFocus = (): void => {
-		if (state.value === 'Idle') {
+		if (step === 'Idle') {
 			send('NEXT');
 		}
 	};
@@ -79,7 +102,7 @@ function LabelSelect({
 		if (staging.length === 1 && staging[0] !== undefined) {
 			send('onBlur');
 		}
-	}, [send, staging]);
+	}, [staging]);
 
 	useEffect(() => {
 		handleBlur();
@@ -115,14 +138,14 @@ function LabelSelect({
 		});
 	};
 	const renderPlaceholder = useCallback((): string => {
-		if (state.value === 'LabelKey') {
+		if (step === 'LabelKey') {
 			return 'Enter a label key then press ENTER.';
 		}
-		if (state.value === 'LabelValue') {
+		if (step === 'LabelValue') {
 			return `Enter a value for label key(${staging[0]}) then press ENTER.`;
 		}
 		return t('placeholder_label_key_pair');
-	}, [t, state, staging]);
+	}, [t, step, staging]);
 	return (
 		<SearchContainer isDarkMode={isDarkMode} disabled={false}>
 			<div style={{ display: 'inline-flex', flexWrap: 'wrap' }}>
@@ -148,7 +171,7 @@ function LabelSelect({
 						if (e.key === 'Enter' || e.code === 'Enter' || e.key === ':') {
 							send('NEXT');
 						}
-						if (state.value === 'Idle') {
+						if (step === 'Idle') {
 							send('NEXT');
 						}
 					}}
@@ -159,7 +182,7 @@ function LabelSelect({
 					onBlur={handleBlur}
 				/>
 
-				{queries.length || staging.length || currentVal ? (
+				{queries.length > 0 || staging.length > 0 || currentVal ? (
 					<Button
 						onClick={handleClearAll}
 						icon={<CloseCircleFilled />}

frontend/src/container/ListOfDashboard/SearchFilter/Dashboard.machine.tsx

@@ -1,51 +0,0 @@
-// eslint-disable-next-line no-restricted-imports
-import { createMachine } from 'xstate';
-
-export const DashboardSearchAndFilter = createMachine({
-	tsTypes: {} as import('./Dashboard.machine.typegen').Typegen0,
-	initial: 'Idle',
-	states: {
-		Category: {
-			on: {
-				NEXT: {
-					actions: 'onSelectOperator',
-					target: 'Operator',
-				},
-				onBlur: {
-					actions: 'onBlurPurge',
-					target: 'Idle',
-				},
-			},
-		},
-		Operator: {
-			on: {
-				NEXT: {
-					actions: 'onSelectValue',
-					target: 'Value',
-				},
-				onBlur: {
-					actions: 'onBlurPurge',
-					target: 'Idle',
-				},
-			},
-		},
-		Value: {
-			on: {
-				onBlur: {
-					actions: ['onValidateQuery', 'onBlurPurge'],
-					target: 'Idle',
-				},
-			},
-		},
-		Idle: {
-			on: {
-				NEXT: {
-					actions: 'onSelectCategory',
-					description: 'Select Category',
-					target: 'Category',
-				},
-			},
-		},
-	},
-	id: 'Dashboard Search And Filter',
-});

frontend/src/container/ListOfDashboard/SearchFilter/Dashboard.machine.typegen.ts

@@ -1,32 +0,0 @@
-// This file was automatically generated. Edits will be overwritten
-
-export interface Typegen0 {
-	'@@xstate/typegen': true;
-	eventsCausingActions: {
-		onSelectOperator: 'NEXT';
-		onBlurPurge: 'onBlur';
-		onSelectValue: 'NEXT';
-		onValidateQuery: 'onBlur';
-		onSelectCategory: 'NEXT';
-	};
-	internalEvents: {
-		'xstate.init': { type: 'xstate.init' };
-	};
-	invokeSrcNameMap: {};
-	missingImplementations: {
-		actions:
-			| 'onSelectOperator'
-			| 'onBlurPurge'
-			| 'onSelectValue'
-			| 'onValidateQuery'
-			| 'onSelectCategory';
-		services: never;
-		guards: never;
-		delays: never;
-	};
-	eventsCausingServices: {};
-	eventsCausingGuards: {};
-	eventsCausingDelays: {};
-	matchesStates: 'Category' | 'Operator' | 'Value' | 'Idle';
-	tags: never;
-}

frontend/src/container/ListOfDashboard/SearchFilter/QueryChip.tsx

@@ -1,21 +0,0 @@
-import { QueryChipContainer, QueryChipItem } from './styles';
-import { IQueryStructure } from './types';
-
-export default function QueryChip({
-	queryData,
-	onRemove,
-}: {
-	queryData: IQueryStructure;
-	onRemove: (id: string) => void;
-}): JSX.Element {
-	const { category, operator, value, id } = queryData;
-	return (
-		<QueryChipContainer>
-			<QueryChipItem>{category}</QueryChipItem>
-			<QueryChipItem>{operator}</QueryChipItem>
-			<QueryChipItem closable onClose={(): void => onRemove(id)}>
-				{Array.isArray(value) ? value.join(', ') : null}
-			</QueryChipItem>
-		</QueryChipContainer>
-	);
-}

frontend/src/container/ListOfDashboard/SearchFilter/__tests__/utils.test.ts

@@ -1,64 +0,0 @@
-import { Dashboard } from 'types/api/dashboard/getAll';
-import { v4 as uuid } from 'uuid';
-
-import { TOperator } from '../types';
-import { executeSearchQueries } from '../utils';
-
-describe('executeSearchQueries', () => {
-	const firstDashboard: Dashboard = {
-		id: uuid(),
-		createdAt: '',
-		updatedAt: '',
-		createdBy: '',
-		updatedBy: '',
-		data: {
-			title: 'first dashboard',
-			variables: {},
-		},
-	};
-	const secondDashboard: Dashboard = {
-		id: uuid(),
-		createdAt: '',
-		updatedAt: '',
-		createdBy: '',
-		updatedBy: '',
-		data: {
-			title: 'second dashboard',
-			variables: {},
-		},
-	};
-	const thirdDashboard: Dashboard = {
-		id: uuid(),
-		createdAt: '',
-		updatedAt: '',
-		createdBy: '',
-		updatedBy: '',
-		data: {
-			title: 'third dashboard (with special characters +?\\)',
-			variables: {},
-		},
-	};
-	const dashboards = [firstDashboard, secondDashboard, thirdDashboard];
-
-	it('should filter dashboards based on title', () => {
-		const query = {
-			category: 'title',
-			id: 'someid',
-			operator: '=' as TOperator,
-			value: 'first dashboard',
-		};
-
-		expect(executeSearchQueries([query], dashboards)).toEqual([firstDashboard]);
-	});
-
-	it('should filter dashboards with special characters', () => {
-		const query = {
-			category: 'title',
-			id: 'someid',
-			operator: '=' as TOperator,
-			value: 'third dashboard (with special characters +?\\)',
-		};
-
-		expect(executeSearchQueries([query], dashboards)).toEqual([thirdDashboard]);
-	});
-});

frontend/src/container/ListOfDashboard/SearchFilter/index.tsx

@@ -1,212 +0,0 @@
-import {
-	MutableRefObject,
-	useCallback,
-	useEffect,
-	useRef,
-	useState,
-} from 'react';
-import { CloseCircleFilled } from '@ant-design/icons';
-// eslint-disable-next-line no-restricted-imports
-import { useMachine } from '@xstate/react';
-import { Button, RefSelectProps, Select } from 'antd';
-import history from 'lib/history';
-import { filter, map } from 'lodash-es';
-import { Dashboard } from 'types/api/dashboard/getAll';
-import { v4 as uuidv4 } from 'uuid';
-
-import { DashboardSearchAndFilter } from './Dashboard.machine';
-import QueryChip from './QueryChip';
-import { QueryChipItem, SearchContainer } from './styles';
-import { IOptionsData, IQueryStructure, TCategory, TOperator } from './types';
-import {
-	convertQueriesToURLQuery,
-	convertURLQueryStringToQuery,
-	executeSearchQueries,
-	OptionsSchemas,
-	OptionsValueResolution,
-} from './utils';
-
-function SearchFilter({
-	searchData,
-	filterDashboards,
-}: {
-	searchData: Dashboard[];
-	filterDashboards: (filteredDashboards: Dashboard[]) => void;
-}): JSX.Element {
-	const [category, setCategory] = useState<TCategory>();
-	const [optionsData, setOptionsData] = useState<IOptionsData>(
-		OptionsSchemas.attribute,
-	);
-	const selectRef = useRef() as MutableRefObject<RefSelectProps>;
-	const [selectedValues, setSelectedValues] = useState<string[]>([]);
-	const [staging, setStaging] = useState<string[] | string[][] | unknown[]>([]);
-	const [queries, setQueries] = useState<IQueryStructure[]>([]);
-
-	useEffect(() => {
-		const searchQueryString = new URLSearchParams(history.location.search).get(
-			'search',
-		);
-		if (searchQueryString) {
-			setQueries(convertURLQueryStringToQuery(searchQueryString) || []);
-		}
-	}, []);
-	useEffect(() => {
-		filterDashboards(executeSearchQueries(queries, searchData));
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [queries, searchData]);
-
-	const updateURLWithQuery = useCallback(
-		(inputQueries?: IQueryStructure[]): void => {
-			history.push({
-				pathname: history.location.pathname,
-				search:
-					inputQueries || queries
-						? `?search=${convertQueriesToURLQuery(inputQueries || queries)}`
-						: '',
-			});
-		},
-		[queries],
-	);
-
-	useEffect(() => {
-		if (Array.isArray(queries) && queries.length > 0) {
-			updateURLWithQuery();
-		}
-	}, [queries, updateURLWithQuery]);
-
-	const [state, send] = useMachine(DashboardSearchAndFilter, {
-		actions: {
-			onSelectCategory: () => {
-				setOptionsData(OptionsSchemas.attribute);
-			},
-			onSelectOperator: () => {
-				setOptionsData(OptionsSchemas.operator);
-			},
-			onSelectValue: () => {
-				setOptionsData(
-					OptionsValueResolution(category as TCategory, searchData) as IOptionsData,
-				);
-			},
-			onBlurPurge: () => {
-				setSelectedValues([]);
-				setStaging([]);
-			},
-			onValidateQuery: () => {
-				if (staging.length <= 2 && selectedValues.length === 0) {
-					return;
-				}
-				setQueries([
-					...queries,
-					{
-						id: uuidv4(),
-						category: staging[0] as string,
-						operator: staging[1] as TOperator,
-						value: selectedValues,
-					},
-				]);
-			},
-		},
-	});
-
-	const nextState = (): void => {
-		send('NEXT');
-	};
-
-	const removeQueryById = (queryId: string): void => {
-		setQueries((queries) => {
-			const updatedQueries = filter(queries, ({ id }) => id !== queryId);
-			updateURLWithQuery(updatedQueries);
-			return updatedQueries;
-		});
-	};
-
-	const handleChange = (value: never | string[]): void => {
-		if (!value) {
-			return;
-		}
-		if (optionsData.mode) {
-			setSelectedValues(value.filter(Boolean));
-			return;
-		}
-		setStaging([...staging, value]);
-
-		if (state.value === 'Category') {
-			setCategory(`${value}`.toLowerCase() as TCategory);
-		}
-		nextState();
-		setSelectedValues([]);
-	};
-	const handleFocus = (): void => {
-		if (state.value === 'Idle') {
-			send('NEXT');
-			selectRef.current?.focus();
-		}
-	};
-
-	const handleBlur = (): void => {
-		send('onBlur');
-		selectRef?.current?.blur();
-	};
-
-	const clearQueries = (): void => {
-		setQueries([]);
-		history.push({
-			pathname: history.location.pathname,
-			search: ``,
-		});
-	};
-
-	return (
-		<SearchContainer>
-			<div>
-				{map(queries, (query) => (
-					<QueryChip key={query.id} queryData={query} onRemove={removeQueryById} />
-				))}
-				{map(staging, (value) => (
-					<QueryChipItem key={JSON.stringify(value)}>
-						{value as string}
-					</QueryChipItem>
-				))}
-			</div>
-			{optionsData && (
-				<Select
-					placeholder={
-						!queries.length &&
-						!staging.length &&
-						!selectedValues.length &&
-						'Search or Filter results'
-					}
-					size="small"
-					ref={selectRef}
-					mode={optionsData.mode as 'tags' | 'multiple'}
-					style={{ flex: 1 }}
-					onChange={handleChange}
-					bordered={false}
-					suffixIcon={null}
-					value={selectedValues}
-					onFocus={handleFocus}
-					onBlur={handleBlur}
-					showSearch
-				>
-					{optionsData.options &&
-						Array.isArray(optionsData.options) &&
-						optionsData.options.map(
-							(optionItem): JSX.Element => (
-								<Select.Option
-									key={(optionItem.value as string) || (optionItem.name as string)}
-									value={optionItem.value || optionItem.name}
-								>
-									{optionItem.name}
-								</Select.Option>
-							),
-						)}
-				</Select>
-			)}
-			{queries && queries.length > 0 && (
-				<Button icon={<CloseCircleFilled />} type="text" onClick={clearQueries} />
-			)}
-		</SearchContainer>
-	);
-}
-
-export default SearchFilter;

frontend/src/container/ListOfDashboard/SearchFilter/styles.ts

@@ -1,27 +0,0 @@
-import { grey } from '@ant-design/colors';
-import { Tag } from 'antd';
-import styled from 'styled-components';
-
-export const SearchContainer = styled.div`
-	width: 100%;
-	display: flex;
-	align-items: center;
-	gap: 0.2rem;
-	padding: 0.2rem 0;
-	margin: 1rem 0;
-	border: 1px solid #ccc5;
-`;
-export const QueryChipContainer = styled.span`
-	display: flex;
-	align-items: center;
-	margin-right: 0.5rem;
-	&:hover {
-		& > * {
-			background: ${grey.primary}44;
-		}
-	}
-`;
-
-export const QueryChipItem = styled(Tag)`
-	margin-right: 0.1rem;
-`;

frontend/src/container/ListOfDashboard/SearchFilter/types.ts

@@ -1,18 +0,0 @@
-export type TOperator = '=' | '!=';
-
-export type TCategory = 'title' | 'description' | 'tags';
-export interface IQueryStructure {
-	category: string;
-	id: string;
-	operator: TOperator;
-	value: string | string[];
-}
-
-interface IOptions {
-	name: string;
-	value?: string;
-}
-export interface IOptionsData {
-	mode: undefined | 'tags' | 'multiple';
-	options: IOptions[] | [];
-}

frontend/src/container/ListOfDashboard/SearchFilter/utils.ts

@@ -1,153 +0,0 @@
-/* eslint-disable sonarjs/cognitive-complexity */
-import { decode, encode } from 'js-base64';
-import { flattenDeep, map, uniqWith } from 'lodash-es';
-import { Dashboard } from 'types/api/dashboard/getAll';
-
-import { IOptionsData, IQueryStructure, TCategory, TOperator } from './types';
-
-export const convertQueriesToURLQuery = (
-	queries: IQueryStructure[],
-): string => {
-	if (!queries || !queries.length) {
-		return '';
-	}
-
-	return encode(JSON.stringify(queries));
-};
-
-export const convertURLQueryStringToQuery = (
-	queryString: string,
-): IQueryStructure[] => JSON.parse(decode(queryString));
-
-export const resolveOperator = (
-	result: unknown,
-	operator: TOperator,
-): boolean => {
-	if (operator === '!=') {
-		return !result;
-	}
-	if (operator === '=') {
-		return !!result;
-	}
-	return !!result;
-};
-export const executeSearchQueries = (
-	queries: IQueryStructure[] = [],
-	searchData: Dashboard[] = [],
-): Dashboard[] => {
-	if (!searchData.length || !queries.length) {
-		return searchData;
-	}
-	const escapeRegExp = (regExp: string): string =>
-		regExp.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-
-	queries.forEach((query: IQueryStructure) => {
-		const { operator } = query;
-		let { value } = query;
-		const categoryLowercase: TCategory = `${query.category}`.toLowerCase() as
-			| 'title'
-			| 'description';
-		value = flattenDeep([value]);
-
-		searchData = searchData.filter(({ data: searchPayload }: Dashboard) => {
-			try {
-				const searchSpace =
-					flattenDeep([searchPayload[categoryLowercase]]).filter(Boolean) || null;
-				if (!searchSpace || !searchSpace.length) {
-					return resolveOperator(false, operator);
-				}
-
-				for (const searchSpaceItem of searchSpace) {
-					if (searchSpaceItem) {
-						for (const queryValue of value) {
-							if (searchSpaceItem.match(escapeRegExp(queryValue))) {
-								return resolveOperator(true, operator);
-							}
-						}
-					}
-				}
-			} catch (error) {
-				console.error(error);
-			}
-			return resolveOperator(false, operator);
-		});
-	});
-	return searchData;
-};
-
-export const OptionsSchemas = {
-	attribute: {
-		mode: undefined,
-		options: [
-			{
-				name: 'Title',
-			},
-			{
-				name: 'Description',
-			},
-			{
-				name: 'Tags',
-			},
-		],
-	},
-	operator: {
-		mode: undefined,
-		options: [
-			{
-				value: '=',
-				name: 'Equal',
-			},
-			{
-				name: 'Not Equal',
-				value: '!=',
-			},
-		],
-	},
-};
-
-export function OptionsValueResolution(
-	category: TCategory,
-	searchData: Dashboard[],
-): Record<string, unknown> | IOptionsData {
-	const OptionsValueSchema = {
-		title: {
-			mode: 'tags',
-			options: uniqWith(
-				map(searchData, (searchItem) => ({ name: searchItem.data.title })),
-				(prev, next) => prev.name === next.name,
-			),
-		},
-		description: {
-			mode: 'tags',
-			options: uniqWith(
-				map(searchData, (searchItem) =>
-					searchItem.data.description
-						? {
-								name: searchItem.data.description,
-								value: searchItem.data.description,
-						  }
-						: null,
-				).filter(Boolean),
-				(prev, next) => prev?.name === next?.name,
-			),
-		},
-		tags: {
-			mode: 'tags',
-			options: uniqWith(
-				map(
-					flattenDeep(
-						// @ts-ignore
-						map(searchData, (searchItem) => searchItem.data.tags).filter(Boolean),
-					),
-					(tag) => ({ name: tag }),
-				),
-				(prev, next) => prev.name === next.name,
-			),
-		},
-	};
-
-	return (
-		OptionsValueSchema[category] ||
-		({ mode: undefined, options: [] } as IOptionsData)
-	);
-}

frontend/src/hooks/useResourceAttribute/ResourceProvider.tsx

@@ -1,7 +1,5 @@
 import { ReactNode, useCallback, useEffect, useMemo, useState } from 'react';
 import { useLocation } from 'react-router-dom';
-// eslint-disable-next-line no-restricted-imports
-import { useMachine } from '@xstate/react';
 import { QueryParams } from 'constants/query';
 import ROUTES from 'constants/routes';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
@@ -12,7 +10,6 @@ import { FeatureKeys } from '../../constants/features';
 import { useAppContext } from '../../providers/App/App';
 import { whilelistedKeys } from './config';
 import { ResourceContext } from './context';
-import { ResourceAttributesFilterMachine } from './machine';
 import {
 	IResourceAttribute,
 	IResourceAttributeProps,
@@ -28,6 +25,9 @@ import {
 	OperatorSchema,
 } from './utils';
 
+type ResourceStep = 'Idle' | 'TagKey' | 'Operator' | 'TagValue';
+type ResourceEvent = 'NEXT' | 'onBlur' | 'RESET';
+
 function ResourceProvider({ children }: Props): JSX.Element {
 	const { pathname } = useLocation();
 	const [loading, setLoading] = useState(true);
@@ -36,6 +36,7 @@ function ResourceProvider({ children }: Props): JSX.Element {
 	const [queries, setQueries] = useState<IResourceAttribute[]>(
 		getResourceAttributeQueriesFromURL(),
 	);
+	const [step, setStep] = useState<ResourceStep>('Idle');
 	const { safeNavigate } = useSafeNavigate();
 	const urlQuery = useUrlQuery();
 
@@ -75,64 +76,79 @@ function ResourceProvider({ children }: Props): JSX.Element {
 		[pathname, safeNavigate, urlQuery],
 	);
 
-	const [state, send] = useMachine(ResourceAttributesFilterMachine, {
-		actions: {
-			onSelectTagKey: () => {
-				handleLoading(true);
-				GetTagKeys(dotMetricsEnabled)
-					.then((tagKeys) => {
-						const options = mappingWithRoutesAndKeys(pathname, tagKeys);
+	const loadTagKeys = (): void => {
+		handleLoading(true);
+		GetTagKeys(dotMetricsEnabled)
+			.then((tagKeys) => {
+				const options = mappingWithRoutesAndKeys(pathname, tagKeys);
+				setOptionsData({ options, mode: undefined });
+			})
+			.finally(() => {
+				handleLoading(false);
+			});
+	};
 
-						setOptionsData({
-							options,
-							mode: undefined,
-						});
-					})
-					.finally(() => {
-						handleLoading(false);
-					});
-			},
-			onSelectOperator: () => {
-				setOptionsData({ options: OperatorSchema, mode: undefined });
-			},
-			onSelectTagValue: () => {
-				handleLoading(true);
+	const loadTagValues = (): void => {
+		handleLoading(true);
+		GetTagValues(staging[0])
+			.then((tagValuesOptions) =>
+				setOptionsData({ options: tagValuesOptions, mode: 'multiple' }),
+			)
+			.finally(() => {
+				handleLoading(false);
+			});
+	};
 
-				GetTagValues(staging[0])
-					.then((tagValuesOptions) =>
-						setOptionsData({ options: tagValuesOptions, mode: 'multiple' }),
-					)
-					.finally(() => {
-						handleLoading(false);
-					});
-			},
-			onBlurPurge: () => {
-				setSelectedQueries([]);
-				setStaging([]);
-			},
-			onValidateQuery: (): void => {
-				if (staging.length < 2 || selectedQuery.length === 0) {
-					return;
-				}
+	const handleNext = (): void => {
+		if (step === 'Idle') {
+			loadTagKeys();
+			setStep('TagKey');
+		} else if (step === 'TagKey') {
+			setOptionsData({ options: OperatorSchema, mode: undefined });
+			setStep('Operator');
+		} else if (step === 'Operator') {
+			loadTagValues();
+			setStep('TagValue');
+		}
+	};
 
-				const generatedQuery = createQuery([...staging, selectedQuery]);
+	const handleOnBlur = (): void => {
+		if (step === 'TagValue' && staging.length >= 2 && selectedQuery.length > 0) {
+			const generatedQuery = createQuery([...staging, selectedQuery]);
+			if (generatedQuery) {
+				dispatchQueries([...queries, generatedQuery]);
+			}
+		}
+		if (step !== 'Idle') {
+			setSelectedQueries([]);
+			setStaging([]);
+			setStep('Idle');
+		}
+	};
 
-				if (generatedQuery) {
-					dispatchQueries([...queries, generatedQuery]);
-				}
-			},
-		},
-	});
+	const send = (event: ResourceEvent): void => {
+		if (event === 'RESET') {
+			setStep('Idle');
+			return;
+		}
+		if (event === 'NEXT') {
+			handleNext();
+			return;
+		}
+		if (event === 'onBlur') {
+			handleOnBlur();
+		}
+	};
 
 	const handleFocus = useCallback((): void => {
-		if (state.value === 'Idle') {
+		if (step === 'Idle') {
 			send('NEXT');
 		}
-	}, [send, state.value]);
+	}, [step]);
 
 	const handleBlur = useCallback((): void => {
 		send('onBlur');
-	}, [send]);
+	}, [step, staging, selectedQuery, queries, dispatchQueries]);
 
 	const handleChange = useCallback(
 		(value: string): void => {
@@ -145,7 +161,7 @@ function ResourceProvider({ children }: Props): JSX.Element {
 
 			setSelectedQueries([...value]);
 		},
-		[optionsData.mode, send],
+		[optionsData.mode, step, staging, dotMetricsEnabled, pathname],
 	);
 
 	const handleEnvironmentChange = useCallback(
@@ -166,9 +182,9 @@ function ResourceProvider({ children }: Props): JSX.Element {
 				dispatchQueries([...queriesCopy]);
 			}
 
-			send('RESET');
+			setStep('Idle');
 		},
-		[dispatchQueries, dotMetricsEnabled, queries, send],
+		[dispatchQueries, dotMetricsEnabled, queries],
 	);
 
 	const handleClose = useCallback(
@@ -179,12 +195,12 @@ function ResourceProvider({ children }: Props): JSX.Element {
 	);
 
 	const handleClearAll = useCallback(() => {
-		send('RESET');
+		setStep('Idle');
 		dispatchQueries([]);
 		setStaging([]);
 		setQueries([]);
 		setOptionsData({ mode: undefined, options: [] });
-	}, [dispatchQueries, send]);
+	}, [dispatchQueries]);
 
 	const getVisibleQueries = useMemo(() => {
 		if (pathname === ROUTES.SERVICE_MAP) {

frontend/src/hooks/useResourceAttribute/machine.ts

@@ -1,63 +0,0 @@
-// eslint-disable-next-line no-restricted-imports
-import { createMachine } from 'xstate';
-
-export const ResourceAttributesFilterMachine =
-	/** @xstate-layout N4IgpgJg5mDOIC5QBECGsAWAjA9qgThAAQDKYBAxhkQIIB2xAYgJYA2ALmPgHQAqqUANJgAngGIAcgFEAGrwDaABgC6iUAAccsZu2Y46akAA9EATkUB2bgEYAbBYsBWWwA5HAFkW3F7gDQgRRABaU3duFwsXAGZbWwAmF3co01jTAF80-zRMXAJiMkpqeiY2Th5+IVExfQAhVgBXfCVVJBBNbV19QxMEcys7B2c3T28-AOC4xUduKItrSbiEuNMo6zcMrPRsPEJScnwqWgYiFg4uPgFhcQAlKRIpBRVDdp09A1aevpt7J1cPLx8-kCCCCcUcURmcwWSxWa0cGxA2W2eT2hSOJTOPAA8uouKh2Dh8JJZI8WhotK8uh9EPM4tYZl4IrZHNY1rZrEDgqFwpEoi43HEnMt3NYEUjcrsCgcisdTmVuDi8QSibUGk0nq0Xp13qAerT6VFGRZmayXOzOSDJtNZrT3I44t5bHaLGKthL8vtDsUTqVzor8PjCWJbvdSc8KdrujTFgajSa2RzxpbwZDbfbHc7XTkdh60d65ecKgA1VANMDVOh1RrNcMdN6GYFBayOKw2xZ2h1eZ3+PX2+mxFzWEWmFymBxRLPIyWemUY+XF0v1cshh41zUR+vUhDNuncAdD6wjscWKIW0FTVPt9NdluT92o6Xon2Y7gASQgrHL0jka-JdapuqIPEcTcIoihxHyTh2Pa-JntyETRO4ngig6yTuBkmQgHQOAQHAhjijmD5erKvr4LWlI6sYiDJIo3Aiieh7Gk4UynkmQRRJ44TARYijJC4AJRBOmEESiUrEXOhaXKI5GRluPG0SkI7uIKhr2vaZ7Nq2cxrGByQWKYpiisJbqEWJs7PvK-qBmR67-pReq6aB1g+DEkEcaYcQaS2l7gTCqzrMZ2aiTOT4FuUAglmWMmboB258hCESmNeLgQR4jheVp8y+SlsIBZsQXTnmJEvu+n7RQBVEIEkLh0dYDFjvYjgsRlqY6bxY4GUZGRAA */
-	createMachine({
-		tsTypes: {} as import('./machine.typegen').Typegen0,
-		initial: 'Idle',
-		states: {
-			TagKey: {
-				on: {
-					NEXT: {
-						actions: 'onSelectOperator',
-						target: 'Operator',
-					},
-					onBlur: {
-						actions: 'onBlurPurge',
-						target: 'Idle',
-					},
-					RESET: {
-						target: 'Idle',
-					},
-				},
-			},
-			Operator: {
-				on: {
-					NEXT: {
-						actions: 'onSelectTagValue',
-						target: 'TagValue',
-					},
-					onBlur: {
-						actions: 'onBlurPurge',
-						target: 'Idle',
-					},
-					RESET: {
-						target: 'Idle',
-					},
-				},
-			},
-			TagValue: {
-				on: {
-					onBlur: {
-						actions: ['onValidateQuery', 'onBlurPurge'],
-						target: 'Idle',
-					},
-					RESET: {
-						target: 'Idle',
-					},
-				},
-			},
-			Idle: {
-				on: {
-					NEXT: {
-						actions: 'onSelectTagKey',
-						description: 'Select Category',
-						target: 'TagKey',
-					},
-				},
-			},
-		},
-		predictableActionArguments: true,
-		id: 'ResourceAttributesFilterMachine',
-	});

frontend/src/hooks/useResourceAttribute/machine.typegen.ts

@@ -1,32 +0,0 @@
-// This file was automatically generated. Edits will be overwritten
-
-export interface Typegen0 {
-	'@@xstate/typegen': true;
-	internalEvents: {
-		'xstate.init': { type: 'xstate.init' };
-	};
-	invokeSrcNameMap: {};
-	missingImplementations: {
-		actions:
-			| 'onBlurPurge'
-			| 'onSelectOperator'
-			| 'onSelectTagKey'
-			| 'onSelectTagValue'
-			| 'onValidateQuery';
-		delays: never;
-		guards: never;
-		services: never;
-	};
-	eventsCausingActions: {
-		onBlurPurge: 'onBlur';
-		onSelectOperator: 'NEXT';
-		onSelectTagKey: 'NEXT';
-		onSelectTagValue: 'NEXT';
-		onValidateQuery: 'onBlur';
-	};
-	eventsCausingDelays: {};
-	eventsCausingGuards: {};
-	eventsCausingServices: {};
-	matchesStates: 'Idle' | 'Operator' | 'TagKey' | 'TagValue';
-	tags: never;
-}

frontend/yarn.lock

@@ -7031,14 +7031,6 @@
   resolved "https://registry.npmjs.org/@xobotyi/scrollbar-width/-/scrollbar-width-1.9.5.tgz"
   integrity sha512-N8tkAACJx2ww8vFMneJmaAgmjAG1tnVBZJRLRcx061tmsLRZHSEZSLuGWnwPtunsSLvSqXQ2wfp7Mgqg1I+2dQ==
 
-"@xstate/react@^3.0.0":
-  version "3.2.2"
-  resolved "https://registry.npmjs.org/@xstate/react/-/react-3.2.2.tgz"
-  integrity sha512-feghXWLedyq8JeL13yda3XnHPZKwYDN5HPBLykpLeuNpr9178tQd2/3d0NrH6gSd0sG5mLuLeuD+ck830fgzLQ==
-  dependencies:
-    use-isomorphic-layout-effect "^1.1.2"
-    use-sync-external-store "^1.0.0"
-
 "@zxing/text-encoding@0.9.0":
   version "0.9.0"
   resolved "https://registry.yarnpkg.com/@zxing/text-encoding/-/text-encoding-0.9.0.tgz#fb50ffabc6c7c66a0c96b4c03e3d9be74864b70b"
@@ -19157,11 +19149,6 @@ use-callback-ref@^1.3.3:
   dependencies:
     tslib "^2.0.0"
 
-use-isomorphic-layout-effect@^1.1.2:
-  version "1.1.2"
-  resolved "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz"
-  integrity sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==
-
 use-memo-one@^1.1.1:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/use-memo-one/-/use-memo-one-1.1.3.tgz#2fd2e43a2169eabc7496960ace8c79efef975e99"
@@ -19175,11 +19162,6 @@ use-sidecar@^1.1.3:
     detect-node-es "^1.1.0"
     tslib "^2.0.0"
 
-use-sync-external-store@^1.0.0:
-  version "1.2.0"
-  resolved "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz"
-  integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==
-
 util-deprecate@^1.0.1, util-deprecate@^1.0.2, util-deprecate@~1.0.1:
   version "1.0.2"
   resolved "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz"
@@ -19723,11 +19705,6 @@ xss@^1.0.14:
     commander "^2.20.3"
     cssfilter "0.0.10"
 
-xstate@^4.31.0:
-  version "4.37.2"
-  resolved "https://registry.npmjs.org/xstate/-/xstate-4.37.2.tgz"
-  integrity sha512-Qm337O49CRTZ3PRyRuK6b+kvI+D3JGxXIZCTul+xEsyFCVkTFDt5jixaL1nBWcUBcaTQ9um/5CRGVItPi7fveg==
-
 xtend@^4.0.0:
   version "4.0.2"
   resolved "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz"