Merge branch 'main' into fix/issue-9481

frontend/src/container/GridCardLayout/WidgetHeader/__tests__/WidgetHeader.test.tsx

@@ -0,0 +1,458 @@
+import { fireEvent, render as rtlRender, screen } from '@testing-library/react';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import { RowData } from 'lib/query/createTableColumnsFromQuery';
+import { AppContext } from 'providers/App/App';
+import { IAppContext } from 'providers/App/types';
+import React, { MutableRefObject } from 'react';
+import { QueryClient, QueryClientProvider, UseQueryResult } from 'react-query';
+import { Provider } from 'react-redux';
+import { MemoryRouter } from 'react-router-dom';
+import configureStore from 'redux-mock-store';
+import thunk from 'redux-thunk';
+import { SuccessResponse, Warning } from 'types/api';
+import { Widgets } from 'types/api/dashboard/getAll';
+import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+import { EQueryType } from 'types/common/dashboard';
+import { ROLES } from 'types/roles';
+
+import { MenuItemKeys } from '../contants';
+import WidgetHeader from '../index';
+
+const TEST_WIDGET_TITLE = 'Test Widget';
+const TABLE_WIDGET_TITLE = 'Table Widget';
+const WIDGET_HEADER_SEARCH = 'widget-header-search';
+const WIDGET_HEADER_SEARCH_INPUT = 'widget-header-search-input';
+const TEST_WIDGET_TITLE_RESOLVED = 'Test Widget Title';
+
+const mockStore = configureStore([thunk]);
+const createMockStore = (): ReturnType<typeof mockStore> =>
+	mockStore({
+		app: {
+			role: 'ADMIN',
+			user: {
+				userId: 'test-user-id',
+				email: 'test@signoz.io',
+				name: 'TestUser',
+			},
+			isLoggedIn: true,
+			org: [],
+		},
+		globalTime: {
+			minTime: '2023-01-01T00:00:00Z',
+			maxTime: '2023-01-02T00:00:00Z',
+		},
+	});
+
+const queryClient = new QueryClient({
+	defaultOptions: {
+		queries: {
+			refetchOnWindowFocus: false,
+			retry: false,
+		},
+	},
+});
+
+const createMockAppContext = (): Partial<IAppContext> => ({
+	user: {
+		accessJwt: '',
+		refreshJwt: '',
+		id: '',
+		email: '',
+		displayName: '',
+		createdAt: 0,
+		organization: '',
+		orgId: '',
+		role: 'ADMIN' as ROLES,
+	},
+});
+
+const render = (ui: React.ReactElement): ReturnType<typeof rtlRender> =>
+	rtlRender(
+		<MemoryRouter>
+			<QueryClientProvider client={queryClient}>
+				<Provider store={createMockStore()}>
+					<AppContext.Provider value={createMockAppContext() as IAppContext}>
+						{ui}
+					</AppContext.Provider>
+				</Provider>
+			</QueryClientProvider>
+		</MemoryRouter>,
+	);
+
+jest.mock('hooks/queryBuilder/useCreateAlerts', () => ({
+	__esModule: true,
+	default: jest.fn(() => jest.fn()),
+}));
+
+jest.mock('hooks/dashboard/useGetResolvedText', () => {
+	// eslint-disable-next-line sonarjs/no-duplicate-string
+	const TEST_WIDGET_TITLE_RESOLVED = 'Test Widget Title';
+	return {
+		__esModule: true,
+		default: jest.fn(() => ({
+			truncatedText: TEST_WIDGET_TITLE_RESOLVED,
+			fullText: TEST_WIDGET_TITLE_RESOLVED,
+		})),
+	};
+});
+
+const mockWidget: Widgets = {
+	id: 'test-widget-id',
+	title: TEST_WIDGET_TITLE,
+	description: 'Test Description',
+	panelTypes: PANEL_TYPES.TIME_SERIES,
+	query: {
+		builder: {
+			queryData: [],
+			queryFormulas: [],
+			queryTraceOperator: [],
+		},
+		promql: [],
+		clickhouse_sql: [],
+		id: 'query-id',
+		queryType: 'builder' as EQueryType,
+	},
+	timePreferance: 'GLOBAL_TIME',
+	opacity: '',
+	nullZeroValues: '',
+	yAxisUnit: '',
+	fillSpans: false,
+	softMin: null,
+	softMax: null,
+	selectedLogFields: [],
+	selectedTracesFields: [],
+};
+
+const mockQueryResponse = ({
+	data: {
+		payload: {
+			data: {
+				result: [],
+				resultType: '',
+			},
+		},
+		statusCode: 200,
+		message: 'success',
+		error: null,
+	},
+	isLoading: false,
+	isError: false,
+	error: null,
+	isFetching: false,
+} as unknown) as UseQueryResult<
+	SuccessResponse<MetricRangePayloadProps, unknown> & {
+		warning?: Warning;
+	},
+	Error
+>;
+
+describe('WidgetHeader', () => {
+	const mockOnView = jest.fn();
+	const mockSetSearchTerm = jest.fn();
+	const tableProcessedDataRef: MutableRefObject<RowData[]> = {
+		current: [
+			{
+				timestamp: 1234567890,
+				key: 'key1',
+				col1: 'val1',
+				col2: 'val2',
+			},
+		],
+	};
+
+	beforeEach(() => {
+		jest.clearAllMocks();
+	});
+
+	it('renders widget header with title', () => {
+		render(
+			<WidgetHeader
+				title={TEST_WIDGET_TITLE}
+				widget={mockWidget}
+				onView={mockOnView}
+				parentHover={false}
+				queryResponse={mockQueryResponse}
+				isWarning={false}
+				isFetchingResponse={false}
+				tableProcessedDataRef={tableProcessedDataRef}
+				setSearchTerm={mockSetSearchTerm}
+			/>,
+		);
+
+		expect(screen.getByText(TEST_WIDGET_TITLE_RESOLVED)).toBeInTheDocument();
+	});
+
+	it('returns null for empty widget', () => {
+		const emptyWidget = {
+			...mockWidget,
+			id: PANEL_TYPES.EMPTY_WIDGET,
+		};
+
+		const { container } = render(
+			<WidgetHeader
+				title="Empty Widget"
+				widget={emptyWidget}
+				onView={mockOnView}
+				parentHover={false}
+				queryResponse={mockQueryResponse}
+				isWarning={false}
+				isFetchingResponse={false}
+				tableProcessedDataRef={tableProcessedDataRef}
+				setSearchTerm={mockSetSearchTerm}
+			/>,
+		);
+
+		expect(container.firstChild).toBeNull();
+	});
+
+	it('shows search input for table panels', () => {
+		const tableWidget = {
+			...mockWidget,
+			panelTypes: PANEL_TYPES.TABLE,
+		};
+
+		render(
+			<WidgetHeader
+				title={TABLE_WIDGET_TITLE}
+				widget={tableWidget}
+				onView={mockOnView}
+				parentHover={false}
+				queryResponse={mockQueryResponse}
+				isWarning={false}
+				isFetchingResponse={false}
+				tableProcessedDataRef={tableProcessedDataRef}
+				setSearchTerm={mockSetSearchTerm}
+			/>,
+		);
+
+		const searchIcon = screen.getByTestId(WIDGET_HEADER_SEARCH);
+		expect(searchIcon).toBeInTheDocument();
+
+		fireEvent.click(searchIcon);
+
+		expect(screen.getByTestId(WIDGET_HEADER_SEARCH_INPUT)).toBeInTheDocument();
+	});
+
+	it('handles search input changes and closing', () => {
+		const tableWidget = {
+			...mockWidget,
+			panelTypes: PANEL_TYPES.TABLE,
+		};
+
+		render(
+			<WidgetHeader
+				title={TABLE_WIDGET_TITLE}
+				widget={tableWidget}
+				onView={mockOnView}
+				parentHover={false}
+				queryResponse={mockQueryResponse}
+				isWarning={false}
+				isFetchingResponse={false}
+				tableProcessedDataRef={tableProcessedDataRef}
+				setSearchTerm={mockSetSearchTerm}
+			/>,
+		);
+
+		const searchIcon = screen.getByTestId(`${WIDGET_HEADER_SEARCH}`);
+		fireEvent.click(searchIcon);
+
+		const searchInput = screen.getByTestId(WIDGET_HEADER_SEARCH_INPUT);
+		fireEvent.change(searchInput, { target: { value: 'test search' } });
+		expect(mockSetSearchTerm).toHaveBeenCalledWith('test search');
+
+		const closeButton = screen
+			.getByTestId(WIDGET_HEADER_SEARCH_INPUT)
+			.parentElement?.querySelector('.search-header-icons');
+		if (closeButton) {
+			fireEvent.click(closeButton);
+			expect(mockSetSearchTerm).toHaveBeenCalledWith('');
+		}
+	});
+
+	it('shows error icon when query has error', () => {
+		const errorResponse = {
+			...mockQueryResponse,
+			isError: true as const,
+			error: { message: 'Test error' } as Error,
+			data: undefined,
+		} as UseQueryResult<
+			SuccessResponse<MetricRangePayloadProps, unknown> & {
+				warning?: Warning;
+			},
+			Error
+		>;
+
+		render(
+			<WidgetHeader
+				title={TEST_WIDGET_TITLE}
+				widget={mockWidget}
+				onView={mockOnView}
+				parentHover={false}
+				queryResponse={errorResponse}
+				isWarning={false}
+				isFetchingResponse={false}
+				tableProcessedDataRef={tableProcessedDataRef}
+				setSearchTerm={mockSetSearchTerm}
+			/>,
+		);
+
+		// check if CircleX icon is rendered
+		const circleXIcon = document.querySelector('.lucide-circle-x');
+		expect(circleXIcon).toBeInTheDocument();
+	});
+
+	it('shows warning icon when query has warning', () => {
+		const warningData = mockQueryResponse.data
+			? {
+					...mockQueryResponse.data,
+					warning: {
+						code: 'WARNING_CODE',
+						message: 'Test warning',
+						url: 'https://example.com',
+						warnings: [{ message: 'Test warning' }],
+					} as Warning,
+			  }
+			: undefined;
+
+		const warningResponse = {
+			...mockQueryResponse,
+			data: warningData,
+		} as UseQueryResult<
+			SuccessResponse<MetricRangePayloadProps, unknown> & {
+				warning?: Warning;
+			},
+			Error
+		>;
+
+		render(
+			<WidgetHeader
+				title={TEST_WIDGET_TITLE}
+				widget={mockWidget}
+				onView={mockOnView}
+				parentHover={false}
+				queryResponse={warningResponse}
+				isWarning
+				isFetchingResponse={false}
+				tableProcessedDataRef={tableProcessedDataRef}
+				setSearchTerm={mockSetSearchTerm}
+			/>,
+		);
+
+		const triangleAlertIcon = document.querySelector('.lucide-triangle-alert');
+		expect(triangleAlertIcon).toBeInTheDocument();
+	});
+
+	it('shows spinner when fetching response', () => {
+		const fetchingResponse = {
+			...mockQueryResponse,
+			isFetching: true,
+			isLoading: true,
+		} as UseQueryResult<
+			SuccessResponse<MetricRangePayloadProps, unknown> & {
+				warning?: Warning;
+			},
+			Error
+		>;
+
+		render(
+			<WidgetHeader
+				title={TEST_WIDGET_TITLE}
+				widget={mockWidget}
+				onView={mockOnView}
+				parentHover={false}
+				queryResponse={fetchingResponse}
+				isWarning={false}
+				isFetchingResponse
+				tableProcessedDataRef={tableProcessedDataRef}
+				setSearchTerm={mockSetSearchTerm}
+			/>,
+		);
+
+		const antSpin = document.querySelector('.ant-spin');
+		expect(antSpin).toBeInTheDocument();
+	});
+
+	it('renders menu options icon', () => {
+		render(
+			<WidgetHeader
+				title={TEST_WIDGET_TITLE}
+				widget={mockWidget}
+				onView={mockOnView}
+				parentHover={false}
+				queryResponse={mockQueryResponse}
+				isWarning={false}
+				isFetchingResponse={false}
+				tableProcessedDataRef={tableProcessedDataRef}
+				setSearchTerm={mockSetSearchTerm}
+				headerMenuList={[MenuItemKeys.View]}
+			/>,
+		);
+
+		const moreOptionsIcon = screen.getByTestId('widget-header-options');
+		expect(moreOptionsIcon).toBeInTheDocument();
+	});
+
+	it('shows search icon for table panels', () => {
+		const tableWidget = {
+			...mockWidget,
+			panelTypes: PANEL_TYPES.TABLE,
+		};
+
+		render(
+			<WidgetHeader
+				title={TABLE_WIDGET_TITLE}
+				widget={tableWidget}
+				onView={mockOnView}
+				parentHover={false}
+				queryResponse={mockQueryResponse}
+				isWarning={false}
+				isFetchingResponse={false}
+				tableProcessedDataRef={tableProcessedDataRef}
+				setSearchTerm={mockSetSearchTerm}
+			/>,
+		);
+
+		const searchIcon = screen.getByTestId(WIDGET_HEADER_SEARCH);
+		expect(searchIcon).toBeInTheDocument();
+	});
+
+	it('does not show search icon for non-table panels', () => {
+		render(
+			<WidgetHeader
+				title={TEST_WIDGET_TITLE}
+				widget={mockWidget}
+				onView={mockOnView}
+				parentHover={false}
+				queryResponse={mockQueryResponse}
+				isWarning={false}
+				isFetchingResponse={false}
+				tableProcessedDataRef={tableProcessedDataRef}
+				setSearchTerm={mockSetSearchTerm}
+			/>,
+		);
+
+		const searchIcon = screen.queryByTestId(WIDGET_HEADER_SEARCH);
+		expect(searchIcon).not.toBeInTheDocument();
+	});
+
+	it('renders threshold when provided', () => {
+		const threshold = <div data-testid="threshold">Threshold Component</div>;
+
+		render(
+			<WidgetHeader
+				title={TEST_WIDGET_TITLE}
+				widget={mockWidget}
+				onView={mockOnView}
+				parentHover={false}
+				queryResponse={mockQueryResponse}
+				isWarning={false}
+				isFetchingResponse={false}
+				tableProcessedDataRef={tableProcessedDataRef}
+				setSearchTerm={mockSetSearchTerm}
+				threshold={threshold}
+			/>,
+		);
+
+		expect(screen.getByTestId('threshold')).toBeInTheDocument();
+	});
+});

frontend/src/container/GridCardLayout/WidgetHeader/index.tsx

@@ -240,6 +240,7 @@ function WidgetHeader({
 							onClick={(e): void => {
 								e.stopPropagation();
 								e.preventDefault();
+								setSearchTerm('');
 								setShowGlobalSearch(false);
 							}}
 							className="search-header-icons"

frontend/src/container/LogExplorerQuerySection/LogExplorerQuerySection.test.tsx

@@ -1,275 +0,0 @@
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import { useGetPanelTypesQueryParam } from 'hooks/queryBuilder/useGetPanelTypesQueryParam';
-import { useShareBuilderUrl } from 'hooks/queryBuilder/useShareBuilderUrl';
-import { ExplorerViews } from 'pages/LogsExplorer/utils';
-import { render, waitFor } from 'tests/test-utils';
-import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
-import { Query, QueryState } from 'types/api/queryBuilder/queryBuilderData';
-import { EQueryType } from 'types/common/dashboard';
-import { DataSource, QueryBuilderContextType } from 'types/common/queryBuilder';
-
-import LogExplorerQuerySection from './index';
-
-const CM_EDITOR_SELECTOR = '.cm-editor .cm-content';
-
-// Mock DOM APIs that CodeMirror needs
-beforeAll(() => {
-	// Mock getClientRects and getBoundingClientRect for Range objects
-	const mockRect: DOMRect = {
-		width: 100,
-		height: 20,
-		top: 0,
-		left: 0,
-		right: 100,
-		bottom: 20,
-		x: 0,
-		y: 0,
-		toJSON: (): DOMRect => mockRect,
-	} as DOMRect;
-
-	// Create a minimal Range mock with only what CodeMirror actually uses
-	const createMockRange = (): Range => {
-		let startContainer: Node = document.createTextNode('');
-		let endContainer: Node = document.createTextNode('');
-		let startOffset = 0;
-		let endOffset = 0;
-
-		const rectList = {
-			length: 1,
-			item: (index: number): DOMRect | null => (index === 0 ? mockRect : null),
-			0: mockRect,
-		};
-
-		const mockRange = {
-			// CodeMirror uses these for text measurement
-			getClientRects: (): DOMRectList => (rectList as unknown) as DOMRectList,
-			getBoundingClientRect: (): DOMRect => mockRect,
-			// CodeMirror calls these to set up text ranges
-			setStart: (node: Node, offset: number): void => {
-				startContainer = node;
-				startOffset = offset;
-			},
-			setEnd: (node: Node, offset: number): void => {
-				endContainer = node;
-				endOffset = offset;
-			},
-			// Minimal Range properties (TypeScript requires these)
-			get startContainer(): Node {
-				return startContainer;
-			},
-			get endContainer(): Node {
-				return endContainer;
-			},
-			get startOffset(): number {
-				return startOffset;
-			},
-			get endOffset(): number {
-				return endOffset;
-			},
-			get collapsed(): boolean {
-				return startContainer === endContainer && startOffset === endOffset;
-			},
-			commonAncestorContainer: document.body,
-		};
-		return (mockRange as unknown) as Range;
-	};
-
-	// Mock document.createRange to return a new Range instance each time
-	document.createRange = (): Range => createMockRange();
-
-	// Mock getBoundingClientRect for elements
-	Element.prototype.getBoundingClientRect = (): DOMRect => mockRect;
-});
-
-jest.mock('hooks/useDarkMode', () => ({
-	useIsDarkMode: (): boolean => false,
-}));
-
-jest.mock('providers/Dashboard/Dashboard', () => ({
-	useDashboard: (): { selectedDashboard: undefined } => ({
-		selectedDashboard: undefined,
-	}),
-}));
-
-jest.mock('api/querySuggestions/getKeySuggestions', () => ({
-	getKeySuggestions: jest.fn().mockResolvedValue({
-		data: {
-			data: { keys: {} },
-		},
-	}),
-}));
-
-jest.mock('api/querySuggestions/getValueSuggestion', () => ({
-	getValueSuggestions: jest.fn().mockResolvedValue({
-		data: { data: { values: { stringValues: [], numberValues: [] } } },
-	}),
-}));
-
-// Mock the hooks
-jest.mock('hooks/queryBuilder/useGetPanelTypesQueryParam');
-jest.mock('hooks/queryBuilder/useShareBuilderUrl');
-
-const mockUseGetPanelTypesQueryParam = jest.mocked(useGetPanelTypesQueryParam);
-const mockUseShareBuilderUrl = jest.mocked(useShareBuilderUrl);
-
-const mockUpdateAllQueriesOperators = jest.fn() as jest.MockedFunction<
-	(query: Query, panelType: PANEL_TYPES, dataSource: DataSource) => Query
->;
-
-const mockResetQuery = jest.fn() as jest.MockedFunction<
-	(newCurrentQuery?: QueryState) => void
->;
-
-const mockRedirectWithQueryBuilderData = jest.fn() as jest.MockedFunction<
-	(query: Query) => void
->;
-
-// Create a mock query that we'll use to verify persistence
-const createMockQuery = (filterExpression?: string): Query => ({
-	id: 'test-query-id',
-	queryType: EQueryType.QUERY_BUILDER,
-	builder: {
-		queryData: [
-			{
-				aggregateAttribute: {
-					id: 'body--string----false',
-					dataType: DataTypes.String,
-					key: 'body',
-					type: '',
-				},
-				aggregateOperator: 'count',
-				dataSource: DataSource.LOGS,
-				disabled: false,
-				expression: 'A',
-				filters: {
-					items: [],
-					op: 'AND',
-				},
-				filter: filterExpression
-					? {
-							expression: filterExpression,
-					  }
-					: undefined,
-				functions: [],
-				groupBy: [],
-				having: [],
-				legend: '',
-				limit: null,
-				orderBy: [{ columnName: 'timestamp', order: 'desc' }],
-				pageSize: 0,
-				queryName: 'A',
-				reduceTo: 'avg',
-				stepInterval: 60,
-			},
-		],
-		queryFormulas: [],
-		queryTraceOperator: [],
-	},
-	clickhouse_sql: [],
-	promql: [],
-});
-
-// Helper function to verify CodeMirror content
-const verifyCodeMirrorContent = async (
-	expectedFilterExpression: string,
-): Promise<void> => {
-	await waitFor(
-		() => {
-			const editorContent = document.querySelector(
-				CM_EDITOR_SELECTOR,
-			) as HTMLElement;
-			expect(editorContent).toBeInTheDocument();
-			const textContent = editorContent.textContent || '';
-			expect(textContent).toBe(expectedFilterExpression);
-		},
-		{ timeout: 3000 },
-	);
-};
-
-const VIEWS_TO_TEST = [
-	ExplorerViews.LIST,
-	ExplorerViews.TIMESERIES,
-	ExplorerViews.TABLE,
-];
-
-describe('LogExplorerQuerySection', () => {
-	let mockQuery: Query;
-	let mockQueryBuilderContext: Partial<QueryBuilderContextType>;
-
-	beforeEach(() => {
-		jest.clearAllMocks();
-
-		mockQuery = createMockQuery();
-
-		// Mock the return value of updateAllQueriesOperators to return the same query
-		mockUpdateAllQueriesOperators.mockReturnValue(mockQuery);
-
-		// Setup query builder context mock
-		mockQueryBuilderContext = {
-			currentQuery: mockQuery,
-			updateAllQueriesOperators: mockUpdateAllQueriesOperators,
-			resetQuery: mockResetQuery,
-			redirectWithQueryBuilderData: mockRedirectWithQueryBuilderData,
-			panelType: PANEL_TYPES.LIST,
-			initialDataSource: DataSource.LOGS,
-			addNewBuilderQuery: jest.fn() as jest.MockedFunction<() => void>,
-			addNewFormula: jest.fn() as jest.MockedFunction<() => void>,
-			handleSetConfig: jest.fn() as jest.MockedFunction<
-				(panelType: PANEL_TYPES, dataSource: DataSource | null) => void
-			>,
-			addTraceOperator: jest.fn() as jest.MockedFunction<() => void>,
-		};
-
-		// Mock useGetPanelTypesQueryParam
-		mockUseGetPanelTypesQueryParam.mockReturnValue(PANEL_TYPES.LIST);
-
-		// Mock useShareBuilderUrl
-		mockUseShareBuilderUrl.mockImplementation(() => {});
-	});
-
-	afterEach(() => {
-		jest.clearAllMocks();
-	});
-
-	it('should maintain query state across multiple view changes', () => {
-		const { rerender } = render(
-			<LogExplorerQuerySection selectedView={ExplorerViews.LIST} />,
-			undefined,
-			{
-				queryBuilderOverrides: mockQueryBuilderContext as QueryBuilderContextType,
-			},
-		);
-
-		const initialQuery = mockQueryBuilderContext.currentQuery;
-
-		VIEWS_TO_TEST.forEach((view) => {
-			rerender(<LogExplorerQuerySection selectedView={view} />);
-			expect(mockQueryBuilderContext.currentQuery).toEqual(initialQuery);
-		});
-	});
-
-	it('should persist filter expressions across view changes', async () => {
-		// Test with a more complex filter expression
-		const complexFilter =
-			"(service.name = 'api-gateway' OR service.name = 'backend') AND http.status_code IN [500, 502, 503] AND NOT error = 'timeout'";
-		const queryWithComplexFilter = createMockQuery(complexFilter);
-
-		const contextWithComplexFilter: Partial<QueryBuilderContextType> = {
-			...mockQueryBuilderContext,
-			currentQuery: queryWithComplexFilter,
-		};
-
-		const { rerender } = render(
-			<LogExplorerQuerySection selectedView={ExplorerViews.LIST} />,
-			undefined,
-			{
-				queryBuilderOverrides: contextWithComplexFilter as QueryBuilderContextType,
-			},
-		);
-
-		VIEWS_TO_TEST.forEach(async (view) => {
-			rerender(<LogExplorerQuerySection selectedView={view} />);
-			await verifyCodeMirrorContent(complexFilter);
-		});
-	});
-});