fix(settings): disable tabPane animation to prevent stale pane mounts

ServeOpenAPI's nil-response branch still passed WithContentType, so any route
with Response == nil but a ResponseContentType set (notably 204 No Content)
emitted a content block in the generated spec. Clients then try to decode an
empty body and fail — e.g. "unexpected end of JSON input" on
DELETE /api/v1/service_accounts/{id}.

Omit the content type when Response is nil. Regenerate docs/api/openapi.yml (18
bodyless responses drop their content block) and the frontend orval client.

Signed-off-by: grandwizard28 <vibhupandey28@gmail.com>

docs/api/openapi.yml

@@ -9004,10 +9004,6 @@ paths:
           type: string
       responses:
         "204":
-          content:
-            application/json:
-              schema:
-                type: string
           description: No Content
         "401":
           content:
@@ -9160,10 +9156,6 @@ paths:
               $ref: '#/components/schemas/DashboardtypesUpdatablePublicDashboard'
       responses:
         "204":
-          content:
-            application/json:
-              schema:
-                type: string
           description: No Content
         "401":
           content:
@@ -9758,10 +9750,6 @@ paths:
               $ref: '#/components/schemas/Querybuildertypesv5QueryRangeRequest'
       responses:
         "200":
-          content:
-            application/json:
-              schema:
-                type: string
           description: OK
         "400":
           content:
@@ -10946,10 +10934,6 @@ paths:
           type: string
       responses:
         "204":
-          content:
-            application/json:
-              schema:
-                type: string
           description: No Content
         "401":
           content:
@@ -11063,10 +11047,6 @@ paths:
               $ref: '#/components/schemas/AuthtypesPatchableRole'
       responses:
         "204":
-          content:
-            application/json:
-              schema:
-                type: string
           description: No Content
         "401":
           content:
@@ -11213,10 +11193,6 @@ paths:
               $ref: '#/components/schemas/CoretypesPatchableObjects'
       responses:
         "204":
-          content:
-            application/json:
-              schema:
-                type: string
           description: No Content
         "400":
           content:
@@ -11666,10 +11642,6 @@ paths:
           type: string
       responses:
         "204":
-          content:
-            application/json:
-              schema:
-                type: string
           description: No Content
         "401":
           content:
@@ -11777,10 +11749,6 @@ paths:
               $ref: '#/components/schemas/ServiceaccounttypesPostableServiceAccount'
       responses:
         "204":
-          content:
-            application/json:
-              schema:
-                type: string
           description: No Content
         "400":
           content:
@@ -11962,10 +11930,6 @@ paths:
           type: string
       responses:
         "204":
-          content:
-            application/json:
-              schema:
-                type: string
           description: No Content
         "401":
           content:
@@ -12023,10 +11987,6 @@ paths:
               $ref: '#/components/schemas/ServiceaccounttypesUpdatableFactorAPIKey'
       responses:
         "204":
-          content:
-            application/json:
-              schema:
-                type: string
           description: No Content
         "400":
           content:
@@ -12209,10 +12169,6 @@ paths:
           type: string
       responses:
         "204":
-          content:
-            application/json:
-              schema:
-                type: string
           description: No Content
         "401":
           content:
@@ -12288,10 +12244,6 @@ paths:
               $ref: '#/components/schemas/ServiceaccounttypesPostableServiceAccount'
       responses:
         "204":
-          content:
-            application/json:
-              schema:
-                type: string
           description: No Content
         "404":
           content:
@@ -13516,10 +13468,6 @@ paths:
           type: string
       responses:
         "204":
-          content:
-            application/json:
-              schema:
-                type: string
           description: No Content
         "400":
           content:
@@ -13779,10 +13727,6 @@ paths:
           type: string
       responses:
         "204":
-          content:
-            application/json:
-              schema:
-                type: string
           description: No Content
         "400":
           content:
@@ -13835,10 +13779,6 @@ paths:
           type: string
       responses:
         "204":
-          content:
-            application/json:
-              schema:
-                type: string
           description: No Content
         "400":
           content:
@@ -15569,10 +15509,6 @@ paths:
               $ref: '#/components/schemas/MetricsexplorertypesUpdateMetricMetadataRequest'
       responses:
         "200":
-          content:
-            application/json:
-              schema:
-                type: string
           description: OK
         "400":
           content:
@@ -20871,10 +20807,6 @@ paths:
           type: string
       responses:
         "204":
-          content:
-            application/json:
-              schema:
-                type: string
           description: No Content
         "400":
           content:
@@ -20922,10 +20854,6 @@ paths:
           type: string
       responses:
         "204":
-          content:
-            application/json:
-              schema:
-                type: string
           description: No Content
         "400":
           content:

frontend/src/api/generated/services/dashboard/index.ts

@@ -63,7 +63,7 @@ export const deletePublicDashboard = (
 	{ id }: DeletePublicDashboardPathParameters,
 	signal?: AbortSignal,
 ) => {
-	return GeneratedAPIInstance<string>({
+	return GeneratedAPIInstance<void>({
 		url: `/api/v1/dashboards/${id}/public`,
 		method: 'DELETE',
 		signal,
@@ -346,7 +346,7 @@ export const updatePublicDashboard = (
 	dashboardtypesUpdatablePublicDashboardDTO?: BodyType<DashboardtypesUpdatablePublicDashboardDTO>,
 	signal?: AbortSignal,
 ) => {
-	return GeneratedAPIInstance<string>({
+	return GeneratedAPIInstance<void>({
 		url: `/api/v1/dashboards/${id}/public`,
 		method: 'PUT',
 		headers: { 'Content-Type': 'application/json' },
@@ -836,7 +836,7 @@ export const deleteDashboardV2 = (
 	{ id }: DeleteDashboardV2PathParameters,
 	signal?: AbortSignal,
 ) => {
-	return GeneratedAPIInstance<string>({
+	return GeneratedAPIInstance<void>({
 		url: `/api/v2/dashboards/${id}`,
 		method: 'DELETE',
 		signal,
@@ -1214,7 +1214,7 @@ export const unlockDashboardV2 = (
 	{ id }: UnlockDashboardV2PathParameters,
 	signal?: AbortSignal,
 ) => {
-	return GeneratedAPIInstance<string>({
+	return GeneratedAPIInstance<void>({
 		url: `/api/v2/dashboards/${id}/lock`,
 		method: 'DELETE',
 		signal,
@@ -1293,7 +1293,7 @@ export const lockDashboardV2 = (
 	{ id }: LockDashboardV2PathParameters,
 	signal?: AbortSignal,
 ) => {
-	return GeneratedAPIInstance<string>({
+	return GeneratedAPIInstance<void>({
 		url: `/api/v2/dashboards/${id}/lock`,
 		method: 'PUT',
 		signal,
@@ -1471,7 +1471,7 @@ export const unpinDashboardV2 = (
 	{ id }: UnpinDashboardV2PathParameters,
 	signal?: AbortSignal,
 ) => {
-	return GeneratedAPIInstance<string>({
+	return GeneratedAPIInstance<void>({
 		url: `/api/v2/users/me/dashboards/${id}/pins`,
 		method: 'DELETE',
 		signal,
@@ -1550,7 +1550,7 @@ export const pinDashboardV2 = (
 	{ id }: PinDashboardV2PathParameters,
 	signal?: AbortSignal,
 ) => {
-	return GeneratedAPIInstance<string>({
+	return GeneratedAPIInstance<void>({
 		url: `/api/v2/users/me/dashboards/${id}/pins`,
 		method: 'PUT',
 		signal,

frontend/src/api/generated/services/logs/index.ts

@@ -37,7 +37,7 @@ export const handleExportRawDataPOST = (
 	params?: HandleExportRawDataPOSTParams,
 	signal?: AbortSignal,
 ) => {
-	return GeneratedAPIInstance<string>({
+	return GeneratedAPIInstance<void>({
 		url: `/api/v1/export_raw_data`,
 		method: 'POST',
 		headers: { 'Content-Type': 'application/json' },

frontend/src/api/generated/services/metrics/index.ts

@@ -680,7 +680,7 @@ export const updateMetricMetadata = (
 	metricsexplorertypesUpdateMetricMetadataRequestDTO?: BodyType<MetricsexplorertypesUpdateMetricMetadataRequestDTO>,
 	signal?: AbortSignal,
 ) => {
-	return GeneratedAPIInstance<string>({
+	return GeneratedAPIInstance<void>({
 		url: `/api/v2/metrics/${metricName}/metadata`,
 		method: 'POST',
 		headers: { 'Content-Type': 'application/json' },

frontend/src/api/generated/services/role/index.ts

@@ -203,7 +203,7 @@ export const deleteRole = (
 	{ id }: DeleteRolePathParameters,
 	signal?: AbortSignal,
 ) => {
-	return GeneratedAPIInstance<string>({
+	return GeneratedAPIInstance<void>({
 		url: `/api/v1/roles/${id}`,
 		method: 'DELETE',
 		signal,
@@ -372,7 +372,7 @@ export const patchRole = (
 	authtypesPatchableRoleDTO?: BodyType<AuthtypesPatchableRoleDTO>,
 	signal?: AbortSignal,
 ) => {
-	return GeneratedAPIInstance<string>({
+	return GeneratedAPIInstance<void>({
 		url: `/api/v1/roles/${id}`,
 		method: 'PATCH',
 		headers: { 'Content-Type': 'application/json' },
@@ -572,7 +572,7 @@ export const patchObjects = (
 	coretypesPatchableObjectsDTO?: BodyType<CoretypesPatchableObjectsDTO>,
 	signal?: AbortSignal,
 ) => {
-	return GeneratedAPIInstance<string>({
+	return GeneratedAPIInstance<void>({
 		url: `/api/v1/roles/${id}/relations/${relation}/objects`,
 		method: 'PATCH',
 		headers: { 'Content-Type': 'application/json' },

frontend/src/api/generated/services/serviceaccount/index.ts

@@ -222,7 +222,7 @@ export const deleteServiceAccount = (
 	{ id }: DeleteServiceAccountPathParameters,
 	signal?: AbortSignal,
 ) => {
-	return GeneratedAPIInstance<string>({
+	return GeneratedAPIInstance<void>({
 		url: `/api/v1/service_accounts/${id}`,
 		method: 'DELETE',
 		signal,
@@ -405,7 +405,7 @@ export const updateServiceAccount = (
 	serviceaccounttypesPostableServiceAccountDTO?: BodyType<ServiceaccounttypesPostableServiceAccountDTO>,
 	signal?: AbortSignal,
 ) => {
-	return GeneratedAPIInstance<string>({
+	return GeneratedAPIInstance<void>({
 		url: `/api/v1/service_accounts/${id}`,
 		method: 'PUT',
 		headers: { 'Content-Type': 'application/json' },
@@ -707,7 +707,7 @@ export const revokeServiceAccountKey = (
 	{ id, fid }: RevokeServiceAccountKeyPathParameters,
 	signal?: AbortSignal,
 ) => {
-	return GeneratedAPIInstance<string>({
+	return GeneratedAPIInstance<void>({
 		url: `/api/v1/service_accounts/${id}/keys/${fid}`,
 		method: 'DELETE',
 		signal,
@@ -788,7 +788,7 @@ export const updateServiceAccountKey = (
 	serviceaccounttypesUpdatableFactorAPIKeyDTO?: BodyType<ServiceaccounttypesUpdatableFactorAPIKeyDTO>,
 	signal?: AbortSignal,
 ) => {
-	return GeneratedAPIInstance<string>({
+	return GeneratedAPIInstance<void>({
 		url: `/api/v1/service_accounts/${id}/keys/${fid}`,
 		method: 'PUT',
 		headers: { 'Content-Type': 'application/json' },
@@ -1090,7 +1090,7 @@ export const deleteServiceAccountRole = (
 	{ id, rid }: DeleteServiceAccountRolePathParameters,
 	signal?: AbortSignal,
 ) => {
-	return GeneratedAPIInstance<string>({
+	return GeneratedAPIInstance<void>({
 		url: `/api/v1/service_accounts/${id}/roles/${rid}`,
 		method: 'DELETE',
 		signal,
@@ -1254,7 +1254,7 @@ export const updateMyServiceAccount = (
 	serviceaccounttypesPostableServiceAccountDTO?: BodyType<ServiceaccounttypesPostableServiceAccountDTO>,
 	signal?: AbortSignal,
 ) => {
-	return GeneratedAPIInstance<string>({
+	return GeneratedAPIInstance<void>({
 		url: `/api/v1/service_accounts/me`,
 		method: 'PUT',
 		headers: { 'Content-Type': 'application/json' },

frontend/src/components/RouteTab/RouteTab.test.tsx

@@ -90,4 +90,20 @@ describe('RouteTab component', () => {
 		fireEvent.click(screen.getByRole('tab', { name: 'Tab2' }));
 		expect(onChangeHandler).toHaveBeenCalled();
 	});
+
+	it('unmounts inactive tab pane content after switching', () => {
+		const history = createMemoryHistory({ initialEntries: ['/tab1'] });
+		render(
+			<Router history={history}>
+				<RouteTab history={history} routes={testRoutes} activeKey="Tab1" />
+			</Router>,
+		);
+
+		expect(screen.getByText('Dummy Component 1')).toBeInTheDocument();
+
+		fireEvent.click(screen.getByRole('tab', { name: 'Tab2' }));
+
+		expect(screen.queryByText('Dummy Component 1')).not.toBeInTheDocument();
+		expect(screen.getByText('Dummy Component 2')).toBeInTheDocument();
+	});
 });

frontend/src/components/RouteTab/index.tsx

@@ -59,7 +59,7 @@ function RouteTab({
 			destroyInactiveTabPane
 			activeKey={currentRoute?.key || activeKey}
 			defaultActiveKey={currentRoute?.key || activeKey}
-			animated
+			animated={{ inkBar: true, tabPane: false }}
 			items={items}
 			tabBarExtraContent={
 				showRightSection && (

frontend/src/container/CreateAlertRule/index.tsx

@@ -11,6 +11,7 @@ import CreateAlertV2 from 'container/CreateAlertV2';
 import FormAlertRules, { AlertDetectionTypes } from 'container/FormAlertRules';
 import DateTimeSelector from 'container/TopNav/DateTimeSelectionV2';
 import { useGetCompositeQueryParam } from 'hooks/queryBuilder/useGetCompositeQueryParam';
+import useReducedMotion from 'hooks/useReducedMotion';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import useUrlQuery from 'hooks/useUrlQuery';
 import { AlertListTabs } from 'pages/AlertList/types';
@@ -26,6 +27,7 @@ import './CreateAlertRule.styles.scss';
 
 function CreateRules(): JSX.Element {
 	const [formInstance] = Form.useForm();
+	const prefersReducedMotion = useReducedMotion();
 	const compositeQuery = useGetCompositeQueryParam();
 	const queryParams = useUrlQuery();
 	const { safeNavigate } = useSafeNavigate();
@@ -41,7 +43,7 @@ function CreateRules(): JSX.Element {
 
 	useEffect(() => {
 		if (isTypeSelectionMode) {
-			logEvent('Alert: New alert data source selection page visited', {});
+			void logEvent('Alert: New alert data source selection page visited', {});
 		}
 	}, [isTypeSelectionMode]);
 
@@ -187,6 +189,7 @@ function CreateRules(): JSX.Element {
 	return (
 		<Tabs
 			destroyInactiveTabPane
+			animated={!prefersReducedMotion}
 			items={items}
 			activeKey={AlertListTabs.ALERT_RULES}
 			onChange={handleTabChange}

frontend/src/hooks/__tests__/useReducedMotion.test.ts

@@ -0,0 +1,80 @@
+import { act, renderHook } from '@testing-library/react';
+import useReducedMotion from 'hooks/useReducedMotion';
+
+type ChangeListener = (e: Partial<MediaQueryListEvent>) => void;
+
+function mockMatchMedia(matches: boolean): {
+	setMatches: (next: boolean) => void;
+} {
+	const listeners: ChangeListener[] = [];
+	let currentMatches = matches;
+
+	Object.defineProperty(window, 'matchMedia', {
+		writable: true,
+		value: jest.fn(() => ({
+			get matches() {
+				return currentMatches;
+			},
+			addEventListener: jest.fn((_: string, fn: ChangeListener) => {
+				listeners.push(fn);
+			}),
+			removeEventListener: jest.fn(),
+		})),
+	});
+
+	return {
+		setMatches: (next: boolean): void => {
+			currentMatches = next;
+			listeners.forEach((fn) => fn({ matches: next } as MediaQueryListEvent));
+		},
+	};
+}
+
+describe('useReducedMotion', () => {
+	it('returns false when prefers-reduced-motion is not set', () => {
+		mockMatchMedia(false);
+		const { result } = renderHook(() => useReducedMotion());
+		expect(result.current).toBe(false);
+	});
+
+	it('returns true when prefers-reduced-motion: reduce is active', () => {
+		mockMatchMedia(true);
+		const { result } = renderHook(() => useReducedMotion());
+		expect(result.current).toBe(true);
+	});
+
+	it('updates when system preference changes at runtime', () => {
+		const { setMatches } = mockMatchMedia(false);
+		const { result } = renderHook(() => useReducedMotion());
+		expect(result.current).toBe(false);
+
+		act(() => {
+			setMatches(true);
+		});
+		expect(result.current).toBe(true);
+
+		act(() => {
+			setMatches(false);
+		});
+		expect(result.current).toBe(false);
+	});
+
+	it('removes event listener on unmount', () => {
+		const removeEventListener = jest.fn();
+		Object.defineProperty(window, 'matchMedia', {
+			writable: true,
+			value: jest.fn(() => ({
+				matches: false,
+				addEventListener: jest.fn(),
+				removeEventListener,
+			})),
+		});
+
+		const { unmount } = renderHook(() => useReducedMotion());
+		unmount();
+		expect(removeEventListener).toHaveBeenCalledWith(
+			'change',
+			expect.any(Function),
+		);
+	});
+});

frontend/src/hooks/useReducedMotion.ts

@@ -0,0 +1,20 @@
+import { useEffect, useState } from 'react';
+
+function useReducedMotion(): boolean {
+	const [prefersReducedMotion, setPrefersReducedMotion] = useState<boolean>(
+		() => window.matchMedia('(prefers-reduced-motion: reduce)').matches,
+	);
+
+	useEffect(() => {
+		const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
+		const onChange = (e: MediaQueryListEvent): void => {
+			setPrefersReducedMotion(e.matches);
+		};
+		mediaQuery.addEventListener('change', onChange);
+		return (): void => mediaQuery.removeEventListener('change', onChange);
+	}, []);
+
+	return prefersReducedMotion;
+}
+
+export default useReducedMotion;

frontend/src/pages/AlertList/index.tsx

@@ -8,6 +8,7 @@ import AllAlertRules from 'container/ListAlertRules';
 import { PlannedDowntime } from 'container/PlannedDowntime/PlannedDowntime';
 import RoutingPolicies from 'container/RoutingPolicies';
 import TriggeredAlerts from 'container/TriggeredAlerts';
+import useReducedMotion from 'hooks/useReducedMotion';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import useUrlQuery from 'hooks/useUrlQuery';
 import { GalleryVerticalEnd, Pyramid } from '@signozhq/icons';
@@ -21,6 +22,7 @@ function AllAlertList(): JSX.Element {
 	const urlQuery = useUrlQuery();
 	const location = useLocation();
 	const { safeNavigate } = useSafeNavigate();
+	const prefersReducedMotion = useReducedMotion();
 
 	const tab = urlQuery.get('tab');
 	const subTab = urlQuery.get('subTab');
@@ -101,6 +103,7 @@ function AllAlertList(): JSX.Element {
 	return (
 		<Tabs
 			destroyInactiveTabPane
+			animated={!prefersReducedMotion}
 			items={items}
 			activeKey={tab || AlertListTabs.ALERT_RULES}
 			onChange={(tab): void => {

frontend/src/pages/MetricsApplication/MetricsApplication.tsx

@@ -5,6 +5,7 @@ import DBCall from 'container/MetricsApplication/Tabs/DBCall';
 import External from 'container/MetricsApplication/Tabs/External';
 import Overview from 'container/MetricsApplication/Tabs/Overview';
 import ResourceAttributesFilter from 'container/ResourceAttributesFilter';
+import useReducedMotion from 'hooks/useReducedMotion';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import useUrlQuery from 'hooks/useUrlQuery';
 
@@ -20,6 +21,7 @@ function MetricsApplication(): JSX.Element {
 	}>();
 
 	const activeKey = useMetricsApplicationTabKey();
+	const prefersReducedMotion = useReducedMotion();
 
 	const urlQuery = useUrlQuery();
 	const { safeNavigate } = useSafeNavigate();
@@ -56,6 +58,7 @@ function MetricsApplication(): JSX.Element {
 				activeKey={activeKey}
 				className="service-route-tab"
 				destroyInactiveTabPane
+				animated={!prefersReducedMotion}
 				onChange={onTabChange}
 			/>
 		</div>

pkg/http/handler/handler.go

@@ -113,9 +113,11 @@ func (handler *handler) ServeOpenAPI(opCtx openapi.OperationContext) {
 			openapi.WithHTTPStatus(handler.openAPIDef.SuccessStatusCode),
 		)
 	} else {
+		// No response body (e.g. 204 No Content): omit the content type so the
+		// spec doesn't declare a body for a bodyless response, which would make
+		// clients try to decode an empty payload.
 		opCtx.AddRespStructure(
 			nil,
-			openapi.WithContentType(handler.openAPIDef.ResponseContentType),
 			openapi.WithHTTPStatus(handler.openAPIDef.SuccessStatusCode),
 		)
 	}