chore: self review changes

frontend/__mocks__/createIconsMock.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+
+const IconMock = React.forwardRef<SVGSVGElement, React.SVGProps<SVGSVGElement>>(
+	(props, ref) => <svg ref={ref} {...props} />,
+);
+IconMock.displayName = 'IconMock';
+
+// Returns a Proxy that resolves any named export to IconMock by default,
+// so `import { AnyIcon } from '@signozhq/icons'` always returns a valid component.
+// Pass `overrides` to swap in test-specific stubs (e.g. icons with data-testid).
+export function createIconsMock(
+	overrides: Record<string, unknown> = {},
+): Record<string | symbol, unknown> {
+	return new Proxy(
+		{ __esModule: true, default: IconMock, ...overrides } as Record<
+			string | symbol,
+			unknown
+		>,
+		{
+			get(target, prop: string | symbol): unknown {
+				if (prop in target) {
+					return target[prop as string];
+				}
+				return IconMock;
+			},
+		},
+	);
+}

frontend/__mocks__/signozhqIconsMock.tsx

@@ -1,25 +1,3 @@
-import React from 'react';
+import { createIconsMock } from './createIconsMock';
 
-const IconMock = React.forwardRef<SVGSVGElement, React.SVGProps<SVGSVGElement>>(
-	(props, ref) => <svg ref={ref} {...props} />,
-);
-IconMock.displayName = 'IconMock';
-
-// Re-export IconMock as every possible named export via module.exports proxy
-// so that any `import { SomeIcon } from '@signozhq/icons'` resolves to a valid component.
-const moduleExports = new Proxy(
-	{ __esModule: true, default: IconMock },
-	{
-		get(
-			target: Record<string | symbol, unknown>,
-			prop: string | symbol,
-		): unknown {
-			if (prop in target) {
-				return target[prop];
-			}
-			return IconMock;
-		},
-	},
-);
-
-module.exports = moduleExports;
+module.exports = createIconsMock();

frontend/jest.config.ts

@@ -25,6 +25,7 @@ const config: Config.InitialOptions = {
 		'^constants/env$': '<rootDir>/__mocks__/env.ts',
 		'^src/constants/env$': '<rootDir>/__mocks__/env.ts',
 		'^@signozhq/icons$': '<rootDir>/__mocks__/signozhqIconsMock.tsx',
+		'^test-mocks/(.*)$': '<rootDir>/__mocks__/$1',
 		'^react-syntax-highlighter/dist/esm/(.*)$':
 			'<rootDir>/node_modules/react-syntax-highlighter/dist/cjs/$1',
 		'^@signozhq/(?!ui$)([^/]+)$':

frontend/src/container/GantChart/index.tsx

@@ -42,11 +42,9 @@ function GanttChart(props: GanttChartProps): JSX.Element {
 				title={isExpandAll ? 'Collapse All' : 'Expand All'}
 			>
 				{isExpandAll ? (
-					<SquareMinus
-						style={{ fontSize: '16px', color: 'var(--accent-primary)' }}
-					/>
+					<SquareMinus size={16} style={{ color: 'var(--accent-primary)' }} />
 				) : (
-					<SquarePlus style={{ fontSize: '16px', color: 'var(--accent-primary)' }} />
+					<SquarePlus size={16} style={{ color: 'var(--accent-primary)' }} />
 				)}
 			</CollapseButton>
 			<CardWrapper>

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

@@ -100,25 +100,15 @@ jest.mock('hooks/dashboard/useGetResolvedText', () => {
 });
 
 jest.mock('@signozhq/icons', () => {
-	const IconMock = (props: React.SVGProps<SVGSVGElement>): JSX.Element => (
-		<svg {...props} />
-	);
-	const overrides: Record<string, unknown> = {
-		__esModule: true,
-		default: IconMock,
+	const { createIconsMock } = jest.requireActual<
+		typeof import('test-mocks/createIconsMock')
+	>('test-mocks/createIconsMock');
+	return createIconsMock({
 		CircleX: (): JSX.Element => <svg data-testid="lucide-circle-x" />,
 		TriangleAlert: (): JSX.Element => <svg data-testid="lucide-triangle-alert" />,
 		SquareArrowOutUpRight: (): JSX.Element => (
 			<svg data-testid="lucide-square-arrow-out-up-right" />
 		),
-	};
-	return new Proxy(overrides, {
-		get(target, prop: string | symbol): unknown {
-			if (prop in target) {
-				return target[prop as string];
-			}
-			return IconMock;
-		},
 	});
 });
 jest.mock('antd', () => ({

frontend/src/container/ListOfDashboard/DashboardsList.tsx

@@ -492,7 +492,7 @@ function DashboardsList(): JSX.Element {
 									placement="bottomRight"
 									arrow={false}
 									rootClassName="dashboard-actions"
-									trigger={['hover', 'click']}
+									trigger="click"
 								>
 									<EllipsisVertical
 										className="dashboard-action-icon"

frontend/src/container/MetricsApplication/TopOperationsTable.tsx

@@ -104,7 +104,7 @@ function TopOperationsTable({
 
 	const getSearchOption = (): ColumnType<TopOperationList> => ({
 		filterDropdown,
-		filterIcon: <Search />,
+		filterIcon: <Search size="md" />,
 		onFilter: (value, record): boolean =>
 			record.name
 				.toString()

frontend/src/container/NewWidget/RightContainer/__tests__/RightContainer.test.tsx

@@ -114,23 +114,13 @@ jest.mock('hooks/queryBuilder/useCreateAlerts', () => ({
 }));
 
 jest.mock('@signozhq/icons', () => {
-	const IconMock = (props: React.SVGProps<SVGSVGElement>): JSX.Element => (
-		<svg {...props} />
-	);
-	const overrides: Record<string, unknown> = {
-		__esModule: true,
-		default: IconMock,
+	const { createIconsMock } = jest.requireActual<
+		typeof import('test-mocks/createIconsMock')
+	>('test-mocks/createIconsMock');
+	return createIconsMock({
 		SquareArrowOutUpRight: (): JSX.Element => (
 			<svg data-testid="lucide-square-arrow-out-up-right" />
 		),
-	};
-	return new Proxy(overrides, {
-		get(target, prop: string | symbol): unknown {
-			if (prop in target) {
-				return target[prop as string];
-			}
-			return IconMock;
-		},
 	});
 });
 

frontend/src/container/OnboardingContainer/Steps/DataSource/DataSource.tsx

@@ -215,7 +215,10 @@ export default function DataSource(): JSX.Element {
 									rules={[{ required: true, message: 'Please enter service name' }]}
 									validateTrigger="onBlur"
 								>
-									<Input />
+									<Input
+										// oxlint-disable-next-line jsx_a11y/no-autofocus
+										autoFocus
+									/>
 								</Form.Item>
 
 								{enableFrameworks && (

frontend/tsconfig.json

@@ -32,6 +32,9 @@
 			],
 			"@/*": [
 				"./src/*"
+			],
+			"test-mocks/*": [
+				"./__mocks__/*"
 			]
 		},
 		"plugins": [