fix: Normalize uppercase trace ids to lowercase in URL (#3485)

## Which problem is this PR solving?
- Resolves #3477

## Description of the changes
- Replaced broken class component normalization with useEffect hook
- Uses useNavigate with replace option for URL normalization
- Preserves query parameters during normalization
- Updated test to match new implementation

## How was this change tested?
- All existing unit tests pass (87/87 tests in TracePage suite)
- Updated the "forces lowercase id" test to verify new implementation
behavior
- Manually tested with uppercase trace ID:
`http://localhost:5173/trace/B36DE06C5972AB071AC119C504CA07DC`
successfully auto-normalizes to lowercase
- Verified already-lowercase URLs don't trigger unnecessary redirects
- TypeScript compilation successful

## Checklist
- [x] I have read
https://github.com/jaegertracing/jaeger/blob/master/CONTRIBUTING_GUIDELINES.md
- [x] I have signed all commits
- [x] I have added unit tests for the new functionality
- [x] I have run lint and test steps successfully
  - for `jaeger`: `make lint test`
  - for `jaeger-ui`: `npm run lint` and `npm run test`

---------

Signed-off-by: Samar <hello.samar7@gmail.com>

Author: samar-703

packages/jaeger-ui/src/components/TracePage/index.test.js

@@ -347,21 +347,15 @@ describe('<TracePage>', () => {
     expect(screen.getByTestId('loading-indicator')).toBeInTheDocument();
   });
 
-  it('forces lowercase id', () => {
-    const replaceMock = jest.fn();
+  it('renders without error when given uppercase id', () => {
+    // URL normalization is handled by the useNormalizeTraceId hook in the wrapper.
+    // This test verifies TracePageImpl renders successfully with uppercase IDs.
     const props = {
       ...defaultProps,
       id: trace.traceID.toUpperCase(),
-      history: {
-        replace: replaceMock,
-      },
     };
-    render(<TracePage {...props} />);
-    expect(replaceMock).toHaveBeenCalledWith(
-      expect.objectContaining({
-        pathname: expect.stringContaining(trace.traceID),
-      })
-    );
+    expect(() => render(<TracePage {...props} />)).not.toThrow();
+    expect(document.querySelector('.Tracepage--headerSection')).toBeInTheDocument();
   });
 
   it('focuses on search bar when there is a search bar and focusOnSearchBar is called', () => {

packages/jaeger-ui/src/components/TracePage/index.tsx

@@ -3,6 +3,7 @@
 
 import * as React from 'react';
 import { InputRef } from 'antd';
+import { useNormalizeTraceId } from './useNormalizeTraceId';
 import { Location, History as RouterHistory } from 'history';
 import _clamp from 'lodash/clamp';
 import _get from 'lodash/get';
@@ -31,7 +32,7 @@ import TracePageHeader from './TracePageHeader';
 import TraceTimelineViewer from './TraceTimelineViewer';
 import { actions as timelineActions } from './TraceTimelineViewer/duck';
 import { TUpdateViewRangeTimeFunction, IViewRange, ViewRangeTimeUpdate, ETraceViewType } from './types';
-import { getLocation, getUrl } from './url';
+import { getUrl } from './url';
 import ErrorMessage from '../common/ErrorMessage';
 import LoadingIndicator from '../common/LoadingIndicator';
 import { extractUiFindFromState } from '../common/UiFindInput';
@@ -291,14 +292,9 @@ export class TracePageImpl extends React.PureComponent<TProps, TState> {
   };
 
   ensureTraceFetched() {
-    const { fetchTrace, location, trace, id } = this.props;
+    const { fetchTrace, trace, id } = this.props;
     if (!trace) {
       fetchTrace(id);
-      return;
-    }
-    const { history } = this.props;
-    if (id && id !== id.toLowerCase()) {
-      history.replace(getLocation(id.toLowerCase(), location.state));
     }
   }
 
@@ -524,9 +520,13 @@ type TracePageProps = {
 
 const TracePage = (props: TracePageProps) => {
   const config = useConfig();
+  const traceID = props.params.id;
+  const normalizedTraceID = useNormalizeTraceId(traceID);
+
   return (
     <ConnectedTracePage
       {...props}
+      params={{ ...props.params, id: normalizedTraceID }}
       archiveEnabled={Boolean(config.archiveEnabled)}
       enableSidePanel={Boolean(config.traceTimeline?.enableSidePanel)}
       storageCapabilities={config.storageCapabilities}

packages/jaeger-ui/src/components/TracePage/useNormalizeTraceId.test.ts

@@ -0,0 +1,66 @@
+// Copyright (c) 2026 The Jaeger Authors.
+// SPDX-License-Identifier: Apache-2.0
+
+const mockNavigate = jest.fn();
+let mockLocation: { search: string; state: unknown } = { search: '', state: null };
+
+jest.mock('react-router-dom-v5-compat', () => ({
+  ...jest.requireActual('react-router-dom-v5-compat'),
+  useNavigate: () => mockNavigate,
+  useLocation: () => mockLocation,
+}));
+
+// Simplified mock sufficient for testing normalization logic;
+// URL prefix handling is tested separately in url/index.test.js
+jest.mock('./url', () => ({
+  getUrl: (id: string) => `/trace/${id}`,
+}));
+
+import { renderHook } from '@testing-library/react';
+
+import { useNormalizeTraceId } from './useNormalizeTraceId';
+
+describe('useNormalizeTraceId', () => {
+  beforeEach(() => {
+    mockNavigate.mockClear();
+    mockLocation = { search: '', state: null };
+  });
+
+  it('normalizes uppercase trace IDs to lowercase in the URL', () => {
+    const uppercaseTraceId = 'ABC123DEF456';
+    const lowercaseTraceId = uppercaseTraceId.toLowerCase();
+
+    const { result } = renderHook(() => useNormalizeTraceId(uppercaseTraceId));
+
+    expect(result.current).toBe(lowercaseTraceId);
+    expect(mockNavigate).toHaveBeenCalledWith(`/trace/${lowercaseTraceId}`, {
+      replace: true,
+      state: null,
+    });
+  });
+
+  it('preserves query parameters during trace ID normalization', () => {
+    const uppercaseTraceId = 'ABC123DEF456';
+    const lowercaseTraceId = uppercaseTraceId.toLowerCase();
+    const searchParams = '?uiFind=foo&x=1';
+
+    mockLocation = { search: searchParams, state: null };
+
+    const { result } = renderHook(() => useNormalizeTraceId(uppercaseTraceId));
+
+    expect(result.current).toBe(lowercaseTraceId);
+    expect(mockNavigate).toHaveBeenCalledWith(`/trace/${lowercaseTraceId}${searchParams}`, {
+      replace: true,
+      state: null,
+    });
+  });
+
+  it('does not redirect when trace ID is already lowercase', () => {
+    const lowercaseTraceId = 'abc123def456';
+
+    const { result } = renderHook(() => useNormalizeTraceId(lowercaseTraceId));
+
+    expect(result.current).toBe(lowercaseTraceId);
+    expect(mockNavigate).not.toHaveBeenCalled();
+  });
+});

packages/jaeger-ui/src/components/TracePage/useNormalizeTraceId.ts

@@ -0,0 +1,24 @@
+// Copyright (c) 2026 The Jaeger Authors.
+// SPDX-License-Identifier: Apache-2.0
+
+import * as React from 'react';
+import { useNavigate, useLocation } from 'react-router-dom-v5-compat';
+
+import { getUrl } from './url';
+
+// Custom hook that normalizes a trace ID to lowercase in the URL
+export function useNormalizeTraceId(traceID: string): string {
+  const normalizedTraceID = traceID.toLowerCase();
+  const navigate = useNavigate();
+  const location = useLocation();
+
+  React.useEffect(() => {
+    if (traceID && traceID !== normalizedTraceID) {
+      const url = getUrl(normalizedTraceID);
+      navigate(`${url}${location.search}`, { replace: true, state: location.state });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [traceID, normalizedTraceID]);
+
+  return normalizedTraceID;
+}