test(export): type the selected column fixture

frontend/src/components/DownloadOptionsMenu/DownloadOptionsMenu.test.tsx

@@ -1,10 +1,13 @@
 // eslint-disable-next-line no-restricted-imports
 import { Provider } from 'react-redux';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { message } from 'antd';
 import configureStore from 'redux-mock-store';
+import { PANEL_TYPES } from 'constants/queryBuilder';
 import store from 'store';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
+import { TelemetryFieldKey } from 'types/api/v5/queryRange';
 import { EQueryType } from 'types/common/dashboard';
 import { DataSource, StringOperators } from 'types/common/queryBuilder';
 
@@ -35,6 +38,12 @@ jest.mock('hooks/queryBuilder/useQueryBuilder', () => ({
 	useQueryBuilder: (): any => mockUseQueryBuilder(),
 }));
 
+const statusColumn: TelemetryFieldKey = {
+	name: 'http.status',
+	fieldDataType: 'int64',
+	fieldContext: 'attribute',
+};
+
 const mockStore = configureStore([]);
 const createMockReduxStore = (): any =>
 	mockStore({
@@ -78,11 +87,14 @@ const createMockStagedQuery = (dataSource: DataSource): Query => ({
 	clickhouse_sql: [],
 });
 
-const renderWithStore = (dataSource: DataSource): void => {
+const renderWithStore = (
+	dataSource: DataSource,
+	panelType?: PANEL_TYPES,
+): void => {
 	const mockReduxStore = createMockReduxStore();
 	render(
 		<Provider store={mockReduxStore}>
-			<DownloadOptionsMenu dataSource={dataSource} />
+			<DownloadOptionsMenu dataSource={dataSource} panelType={panelType} />
 		</Provider>,
 	);
 };
@@ -117,11 +129,15 @@ describe.each([
 		expect(screen.getByText('FORMAT')).toBeInTheDocument();
 		expect(screen.getByText('Number of Rows')).toBeInTheDocument();
 
-		if (dataSource === DataSource.TRACES) {
-			expect(screen.queryByText('Columns')).not.toBeInTheDocument();
-		} else {
-			expect(screen.getByText('Columns')).toBeInTheDocument();
-		}
+		expect(screen.getByText('Columns')).toBeInTheDocument();
+	});
+
+	it('hides columns scope in the trace view', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		renderWithStore(dataSource, PANEL_TYPES.TRACE);
+		await user.click(screen.getByTestId(testId));
+
+		expect(screen.queryByText('Columns')).not.toBeInTheDocument();
 	});
 
 	it('allows changing export format', () => {
@@ -151,17 +167,6 @@ describe.each([
 	});
 
 	it('allows changing columns scope', () => {
-		if (dataSource === DataSource.TRACES) {
-			renderWithStore(dataSource);
-			fireEvent.click(screen.getByTestId(testId));
-
-			expect(screen.queryByRole('radio', { name: 'All' })).not.toBeInTheDocument();
-			expect(
-				screen.queryByRole('radio', { name: 'Selected' }),
-			).not.toBeInTheDocument();
-			return;
-		}
-
 		renderWithStore(dataSource);
 		fireEvent.click(screen.getByTestId(testId));
 
@@ -221,19 +226,12 @@ describe.each([
 
 	it('keeps selectColumns when column scope is Selected', async () => {
 		const mockQuery = createMockStagedQuery(dataSource);
-		mockQuery.builder.queryData[0].selectColumns = [
-			{ name: 'http.status', fieldDataType: 'int64', fieldContext: 'attribute' },
-		] as any;
+		mockQuery.builder.queryData[0].selectColumns = [statusColumn];
 
 		mockUseQueryBuilder.mockReturnValue({ stagedQuery: mockQuery });
 		renderWithStore(dataSource);
 		fireEvent.click(screen.getByTestId(testId));
-
-		// For traces, column scope is always Selected and the radio is hidden
-		if (dataSource !== DataSource.TRACES) {
-			fireEvent.click(screen.getByRole('radio', { name: 'Selected' }));
-		}
-
+		fireEvent.click(screen.getByRole('radio', { name: 'Selected' }));
 		fireEvent.click(screen.getByText('Export'));
 
 		await waitFor(() => {
@@ -250,15 +248,15 @@ describe.each([
 	});
 
 	it('sends no selectFields when column scope is All', async () => {
-		// For traces, column scope is always Selected — this test only applies to other sources
-		if (dataSource === DataSource.TRACES) {
-			return;
-		}
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		const mockQuery = createMockStagedQuery(dataSource);
+		mockQuery.builder.queryData[0].selectColumns = [statusColumn];
 
+		mockUseQueryBuilder.mockReturnValue({ stagedQuery: mockQuery });
 		renderWithStore(dataSource);
-		fireEvent.click(screen.getByTestId(testId));
-		fireEvent.click(screen.getByRole('radio', { name: 'All' }));
-		fireEvent.click(screen.getByText('Export'));
+		await user.click(screen.getByTestId(testId));
+		await user.click(screen.getByRole('radio', { name: 'All' }));
+		await user.click(screen.getByText('Export'));
 
 		await waitFor(() => {
 			expect(mockDownloadExportData).toHaveBeenCalledTimes(1);

frontend/src/components/DownloadOptionsMenu/DownloadOptionsMenu.tsx

@@ -45,9 +45,7 @@ export default function DownloadOptionsMenu({
 		await handleExportRawData({
 			format: exportFormat,
 			rowLimit,
-			clearSelectColumns:
-				dataSource !== DataSource.TRACES &&
-				columnsScope === DownloadColumnsScopes.ALL,
+			clearSelectColumns: columnsScope === DownloadColumnsScopes.ALL,
 			selectedColumns,
 		});
 	}, [
@@ -56,7 +54,6 @@ export default function DownloadOptionsMenu({
 		columnsScope,
 		selectedColumns,
 		handleExportRawData,
-		dataSource,
 	]);
 
 	const popoverContent = useMemo(
@@ -96,7 +93,7 @@ export default function DownloadOptionsMenu({
 					/>
 				</div>
 
-				{dataSource !== DataSource.TRACES && (
+				{panelType !== PANEL_TYPES.TRACE && (
 					<>
 						<div className="horizontal-line" />
 
@@ -134,7 +131,7 @@ export default function DownloadOptionsMenu({
 			columnsScope,
 			isDownloading,
 			handleExport,
-			dataSource,
+			panelType,
 		],
 	);
 

frontend/src/hooks/useExportData/useServerExport.ts

@@ -55,7 +55,7 @@ export function useExportRawData({
 				setIsDownloading(true);
 
 				const selectColumnsOverride = clearSelectColumns
-					? {}
+					? { selectColumns: [] }
 					: selectedColumns?.length
 						? { selectColumns: selectedColumns }
 						: {};