fix: fix auto collapse fields when emptied (#9988)

* fix: fix auto collapse fields when emptied

* fix: revert mocks

* fix: minor fix

* fix: add check for key count change to setSelectedView

* feat: revert change

* feat: instead of count check actual keys

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

@@ -11,7 +11,7 @@ import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useQueryOperations } from 'hooks/queryBuilder/useQueryBuilderOperations';
 import { get, isEmpty } from 'lodash-es';
 import { BarChart2, ChevronUp, ExternalLink, ScrollText } from 'lucide-react';
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 import { MetricAggregation } from 'types/api/v5/queryRange';
 import { DataSource, ReduceOperators } from 'types/common/queryBuilder';
@@ -171,6 +171,9 @@ function QueryAddOns({
 
 	const [selectedViews, setSelectedViews] = useState<AddOn[]>([]);
 
+	const initializedRef = useRef(false);
+	const prevAvailableKeysRef = useRef<Set<string> | null>(null);
+
 	const { handleChangeQueryData } = useQueryOperations({
 		index,
 		query,
@@ -213,23 +216,41 @@ function QueryAddOns({
 		}
 		setAddOns(filteredAddOns);
 
-		const activeAddOnKeys = new Set(
-			Object.entries(ADD_ONS_KEYS_TO_QUERY_PATH)
-				.filter(([, path]) => hasValue(get(query, path)))
-				.map(([key]) => key),
-		);
+		const availableAddOnKeys = new Set(filteredAddOns.map((a) => a.key));
+		const previousKeys = prevAvailableKeysRef.current;
+		const hasAvailabilityItemsChanged =
+			previousKeys !== null &&
+			(previousKeys.size !== availableAddOnKeys.size ||
+				[...availableAddOnKeys].some((key) => !previousKeys.has(key)));
+		prevAvailableKeysRef.current = availableAddOnKeys;
 
-		const availableAddOnKeys = new Set(filteredAddOns.map((addOn) => addOn.key));
-		// Filter and set selected views: add-ons that are both active and available
-		setSelectedViews(
-			filteredAddOns.filter(
-				(addOn) =>
-					activeAddOnKeys.has(addOn.key) && availableAddOnKeys.has(addOn.key),
+		if (!initializedRef.current || hasAvailabilityItemsChanged) {
+			initializedRef.current = true;
+
+			const activeAddOnKeys = new Set(
+				Object.entries(ADD_ONS_KEYS_TO_QUERY_PATH)
+					.filter(([, path]) => hasValue(get(query, path)))
+					.map(([key]) => key),
+			);
+
+			// Initial seeding from query values on mount
+			setSelectedViews(
+				filteredAddOns.filter(
+					(addOn) =>
+						activeAddOnKeys.has(addOn.key) && availableAddOnKeys.has(addOn.key),
+				),
+			);
+			return;
+		}
+
+		setSelectedViews((prev) =>
+			prev.filter((view) =>
+				filteredAddOns.some((addOn) => addOn.key === view.key),
 			),
 		);
 
 		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [panelType, isListViewPanel, query]);
+	}, [panelType, isListViewPanel, query, showReduceTo]);
 
 	const handleOptionClick = (e: RadioChangeEvent): void => {
 		if (selectedViews.find((view) => view.key === e.target.value.key)) {

frontend/src/components/QueryBuilderV2/QueryV2/__tests__/QueryV2.test.tsx

@@ -5,7 +5,7 @@ import '@testing-library/jest-dom';
 import { jest } from '@jest/globals';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useQueryOperations } from 'hooks/queryBuilder/useQueryBuilderOperations';
-import { render, screen } from 'tests/test-utils';
+import { render, screen, userEvent } from 'tests/test-utils';
 import { Having, IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 import { UseQueryOperations } from 'types/common/operations.types';
 import { DataSource, QueryBuilderContextType } from 'types/common/queryBuilder';
@@ -20,6 +20,13 @@ jest.mock(
 			return <div>QueryAggregation</div>;
 		},
 );
+jest.mock(
+	'../QuerySearch/QuerySearch',
+	() =>
+		function () {
+			return <div>QuerySearch</div>;
+		},
+);
 jest.mock(
 	'../MerticsAggregateSection/MetricsAggregateSection',
 	() =>
@@ -70,7 +77,7 @@ describe('QueryV2 - base render', () => {
 		jest.clearAllMocks();
 	});
 
-	it('renders limit input when dataSource is logs', () => {
+	it('renders limit input when dataSource is logs', async () => {
 		const baseQuery: IBuilderQuery = {
 			queryName: 'A',
 			dataSource: DataSource.LOGS,
@@ -114,5 +121,13 @@ describe('QueryV2 - base render', () => {
 		expect(limitInput).toHaveAttribute('type', 'number');
 		expect(limitInput).toHaveAttribute('name', 'limit');
 		expect(limitInput).toHaveAttribute('data-testid', 'input-Limit');
+
+		// Clear the input and ensure it stays visible (post-mount should not auto-hide)
+		const user = userEvent.setup();
+		await user.click(limitInput);
+		expect(limitInput.value).toBe('10');
+		await user.keyboard('{Backspace>2}'); // press backspace twice
+		expect(limitInput.value).toBe('');
+		expect(limitInput).toBeInTheDocument();
 	});
 });