chore: added test file

frontend/src/hooks/logs/__tests__/useLogDetailHandlers.test.ts

@@ -0,0 +1,94 @@
+import { act, renderHook } from '@testing-library/react';
+import { useActiveLog } from 'hooks/logs/useActiveLog';
+import { useIsTextSelected } from 'hooks/useIsTextSelected';
+import { ILog } from 'types/api/logs/log';
+
+import useLogDetailHandlers from '../useLogDetailHandlers';
+
+jest.mock('hooks/logs/useActiveLog');
+jest.mock('hooks/useIsTextSelected');
+
+const mockOnSetActiveLog = jest.fn();
+const mockOnClearActiveLog = jest.fn();
+const mockOnAddToQuery = jest.fn();
+const mockOnGroupByAttribute = jest.fn();
+const mockIsTextSelected = jest.fn();
+
+const mockLog: ILog = {
+	id: 'log-1',
+	timestamp: '2024-01-01T00:00:00Z',
+	date: '2024-01-01',
+	body: 'test log body',
+	severityText: 'INFO',
+	severityNumber: 9,
+	traceFlags: 0,
+	traceId: '',
+	spanID: '',
+	attributesString: {},
+	attributesInt: {},
+	attributesFloat: {},
+	resources_string: {},
+	scope_string: {},
+	attributes_string: {},
+	severity_text: '',
+	severity_number: 0,
+};
+
+beforeEach(() => {
+	jest.clearAllMocks();
+
+	jest.mocked(useIsTextSelected).mockReturnValue(mockIsTextSelected);
+
+	jest.mocked(useActiveLog).mockReturnValue({
+		activeLog: null,
+		onSetActiveLog: mockOnSetActiveLog,
+		onClearActiveLog: mockOnClearActiveLog,
+		onAddToQuery: mockOnAddToQuery,
+		onGroupByAttribute: mockOnGroupByAttribute,
+	});
+});
+
+it('should not open log detail when text is selected', () => {
+	mockIsTextSelected.mockReturnValue(true);
+
+	const { result } = renderHook(() => useLogDetailHandlers());
+
+	act(() => {
+		result.current.handleSetActiveLog(mockLog);
+	});
+
+	expect(mockOnSetActiveLog).not.toHaveBeenCalled();
+});
+
+it('should open log detail when no text is selected', () => {
+	mockIsTextSelected.mockReturnValue(false);
+
+	const { result } = renderHook(() => useLogDetailHandlers());
+
+	act(() => {
+		result.current.handleSetActiveLog(mockLog);
+	});
+
+	expect(mockOnSetActiveLog).toHaveBeenCalledWith(mockLog);
+});
+
+it('should toggle off when clicking the same active log', () => {
+	mockIsTextSelected.mockReturnValue(false);
+
+	jest.mocked(useActiveLog).mockReturnValue({
+		activeLog: mockLog,
+		onSetActiveLog: mockOnSetActiveLog,
+		onClearActiveLog: mockOnClearActiveLog,
+		onAddToQuery: mockOnAddToQuery,
+		onGroupByAttribute: mockOnGroupByAttribute,
+	});
+
+	const { result } = renderHook(() => useLogDetailHandlers());
+
+	act(() => {
+		result.current.handleSetActiveLog(mockLog);
+	});
+
+	expect(mockOnClearActiveLog).toHaveBeenCalled();
+	expect(mockOnSetActiveLog).not.toHaveBeenCalled();
+});

frontend/src/hooks/logs/useLogDetailHandlers.ts

@@ -2,6 +2,7 @@ import { useCallback, useState } from 'react';
 import { VIEW_TYPES } from 'components/LogDetail/constants';
 import type { UseActiveLog } from 'hooks/logs/types';
 import { useActiveLog } from 'hooks/logs/useActiveLog';
+import { useIsTextSelected } from 'hooks/useIsTextSelected';
 import { ILog } from 'types/api/logs/log';
 
 type SelectedTab = typeof VIEW_TYPES[keyof typeof VIEW_TYPES] | undefined;
@@ -28,9 +29,13 @@ function useLogDetailHandlers({
 		onAddToQuery,
 	} = useActiveLog();
 	const [selectedTab, setSelectedTab] = useState<SelectedTab>(defaultTab);
+	const isTextSelected = useIsTextSelected();
 
 	const handleSetActiveLog = useCallback(
 		(log: ILog, nextTab: SelectedTab = defaultTab): void => {
+			if (isTextSelected()) {
+				return;
+			}
 			if (activeLog?.id === log.id) {
 				onClearActiveLog();
 				setSelectedTab(undefined);
@@ -39,7 +44,7 @@ function useLogDetailHandlers({
 			onSetActiveLog(log);
 			setSelectedTab(nextTab ?? defaultTab);
 		},
-		[activeLog?.id, defaultTab, onClearActiveLog, onSetActiveLog],
+		[activeLog?.id, defaultTab, onClearActiveLog, onSetActiveLog, isTextSelected],
 	);
 
 	const handleCloseLogDetail = useCallback((): void => {

frontend/src/hooks/useIsTextSelected.ts

@@ -0,0 +1,10 @@
+import { useCallback } from 'react';
+
+export function useIsTextSelected(): () => boolean {
+	return useCallback((): boolean => {
+		const selection = window.getSelection();
+		return (
+			!!selection && !selection.isCollapsed && selection.toString().length > 0
+		);
+	}, []);
+}