Phase 3.1: Replace state.router.location with useLocation() (#3574)

## Which problem is this PR solving?
- Resolves part of #3313

## Description of the changes
- Components were reading the current URL from Redux like this: 
`state.router.location.search -> e.g. "?service=frontend&limit=20"`
This means the URL was being stored in Redux and components were reading
it from there.
- The new way in this PR: components use a React Router hook:
`const { search } = useLocation(); -> e.g. "?service=frontend&limit=20"`
This means ask React Router directly what the current URL search is. No
Redux needed.

#### Why make this change? 
Because in our next phases, we will remove the `history` and
`redux-first-history` packages. Those packages are what put the URL into
Redux in the first place. So, before we can remove them, every component
that reads from `state.router.location` must be updated to use hooks.

#### Every changes in this PR using one of these three patterns:
- Hook directly in component (used in `Page.tsx`, `UiFindInput.tsx`)
- Wrapper component (used in `SearchForm.tsx`, `DdgNodeContent.tsx`,
`DetailsPanel.tsx`)
- Already-injected prop (used in `TraceDiff.tsx`)

## How was this change tested?
- Unit tests
- Components working properly

## Checklist
- [x] I have read
https://github.com/jaegertracing/jaeger/blob/main/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: `make lint test`

## AI Usage in this PR (choose one)
See [AI Usage
Policy](https://github.com/jaegertracing/jaeger/blob/main/CONTRIBUTING_GUIDELINES.md#ai-usage-policy).
- [ ] **None**: No AI tools were used in creating this PR
- [x] **Light**: AI provided minor assistance (formatting, simple
suggestions) **[gave suggestions and fixing the failed unit tests, lint
errors]**
- [ ] **Moderate**: AI helped with code generation or debugging specific
parts
- [ ] **Heavy**: AI generated most or all of the code changes

---------

Signed-off-by: Parship Chowdhury <parshipchowdhury@gmail.com>

Author: Parship12

packages/jaeger-ui/src/components/App/Page.test.js

@@ -7,74 +7,82 @@ jest.mock('../../utils/tracking');
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
+import { MemoryRouter } from 'react-router-dom-v5-compat';
 
 import { mapStateToProps, PageImpl as Page } from './Page';
 import { trackPageView } from '../../utils/tracking';
 
+const renderWithPath = (props, path = '/test?search=value') =>
+  render(
+    <MemoryRouter initialEntries={[path]}>
+      <Page {...props} />
+    </MemoryRouter>
+  );
+
 describe('mapStateToProps()', () => {
-  it('maps state to props', () => {
-    const pathname = 'a-pathname';
-    const search = 'a-search';
-    const state = {
-      router: { location: { pathname, search } },
-    };
-    expect(mapStateToProps(state)).toEqual({ pathname, search });
+  it('maps embedded state to props', () => {
+    const state = { embedded: true };
+    expect(mapStateToProps(state)).toEqual({ embedded: true });
+  });
+
+  it('does not include pathname or search (now from useLocation)', () => {
+    const result = mapStateToProps({ embedded: false });
+    expect(result).not.toHaveProperty('pathname');
+    expect(result).not.toHaveProperty('search');
   });
 });
 
 describe('<Page>', () => {
-  let props;
-
   beforeEach(() => {
     trackPageView.mockReset();
-    props = {
-      pathname: String(Math.random()),
-      search: String(Math.random()),
-    };
-    render(<Page {...props} />);
   });
 
   it('renders without exploding', () => {
+    renderWithPath({});
     expect(screen.getByRole('banner')).toBeInTheDocument();
   });
 
-  it('tracks an initial page-view', () => {
-    const { pathname, search } = props;
-    expect(trackPageView).toHaveBeenCalledWith(pathname, search);
+  it('tracks an initial page-view using location from useLocation()', () => {
+    renderWithPath({}, '/my-path?q=1');
+    expect(trackPageView).toHaveBeenCalledWith('/my-path', '?q=1');
   });
 
   it('tracks a pageView when the location changes', () => {
+    const { rerender } = renderWithPath({}, '/first?a=1');
     trackPageView.mockReset();
-    const newProps = { pathname: 'le-path', search: 'searching' };
-    const { rerender } = render(<Page {...props} />);
-    rerender(<Page {...newProps} />);
-    expect(trackPageView).toHaveBeenCalledWith(newProps.pathname, newProps.search);
+    // Use a different key to force the MemoryRouter to remount with the new initialEntries.
+    rerender(
+      <MemoryRouter key="router-2" initialEntries={['/second?b=2']}>
+        <Page />
+      </MemoryRouter>
+    );
+    expect(trackPageView).toHaveBeenCalledWith('/second', '?b=2');
   });
 
   it('tracks a pageView when the search changes but pathname is same', () => {
+    const { rerender } = renderWithPath({}, '/same-path?a=1');
     trackPageView.mockReset();
-    const staticPathname = '/same-path';
-    const { rerender } = render(<Page pathname={staticPathname} search="?a=1" />);
-    rerender(<Page pathname={staticPathname} search="?a=2" />);
-    expect(trackPageView).toHaveBeenCalledWith(staticPathname, '?a=2');
+    rerender(
+      <MemoryRouter key="router-2" initialEntries={['/same-path?a=2']}>
+        <Page />
+      </MemoryRouter>
+    );
+    expect(trackPageView).toHaveBeenCalledWith('/same-path', '?a=2');
   });
 
   describe('Page embedded', () => {
     beforeEach(() => {
       trackPageView.mockReset();
-      props = {
-        pathname: String(Math.random()),
-        search: 'hideGraph',
-      };
-      render(<Page embedded {...props} />);
+      renderWithPath({ embedded: true });
     });
 
     it('renders without exploding', () => {
-      expect(screen.getByRole('banner')).toBeInTheDocument();
+      // in embedded mode the Header/banner is hidden; check the content area instead.
+      expect(screen.getByRole('main')).toBeInTheDocument();
     });
 
     it('does not render Header', () => {
-      expect(screen.queryByText('Header')).toBeNull();
+      expect(screen.queryByRole('banner')).not.toBeInTheDocument();
     });
   });
 });

packages/jaeger-ui/src/components/App/Page.tsx

@@ -5,6 +5,7 @@ import * as React from 'react';
 import { Layout } from 'antd';
 import cx from 'classnames';
 import { connect } from 'react-redux';
+import { useLocation } from 'react-router-dom-v5-compat';
 
 import TopNav from './TopNav';
 import { ReduxState } from '../../types';
@@ -18,14 +19,13 @@ import withRouteProps from '../../utils/withRouteProps';
 type TProps = {
   children: React.ReactNode;
   embedded: EmbeddedState;
-  pathname: string;
-  search: string;
 };
 
 const { Header, Content } = Layout;
 
 // export for tests
-export const PageImpl: React.FC<TProps> = ({ children, embedded, pathname, search }) => {
+export const PageImpl: React.FC<TProps> = ({ children, embedded }) => {
+  const { pathname, search } = useLocation();
   React.useEffect(() => {
     trackPageView(pathname, search);
   }, [pathname, search]);
@@ -50,8 +50,7 @@ export const PageImpl: React.FC<TProps> = ({ children, embedded, pathname, searc
 // export for tests
 export function mapStateToProps(state: ReduxState) {
   const { embedded } = state;
-  const { pathname, search } = state.router.location;
-  return { embedded, pathname, search };
+  return { embedded };
 }
 
 export default connect(mapStateToProps)(withRouteProps(PageImpl));

packages/jaeger-ui/src/components/DeepDependencies/Graph/DdgNodeContent/index.test.js

@@ -8,11 +8,25 @@ jest.mock('./calc-positioning', () => () => ({
   svcMarginTop: 10,
 }));
 
+// Mutable object so individual tests can control the location without re-creating the mock.
+const mockLocation = { search: '' };
+
+jest.mock('react-router-dom-v5-compat', () => ({
+  ...jest.requireActual('react-router-dom-v5-compat'),
+  useLocation: () => mockLocation,
+}));
+
+jest.mock('../../../../model/path-agnostic-decorations', () => ({
+  __esModule: true,
+  default: jest.fn(() => ({})),
+}));
+
 import React from 'react';
 import { render, screen, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom';
-
-import {
+import { Provider } from 'react-redux';
+import extractDecorationFromState from '../../../../model/path-agnostic-decorations';
+import DdgNodeContentWrapper, {
   getNodeRenderer,
   measureNode,
   mapDispatchToProps,
@@ -676,4 +690,30 @@ describe('<DdgNodeContent>', () => {
       });
     });
   });
+
+  describe('DdgNodeContentWrapper (default export)', () => {
+    const store = {
+      getState: () => ({}),
+      dispatch: jest.fn(),
+      subscribe: jest.fn(() => jest.fn()),
+    };
+
+    beforeEach(() => {
+      extractDecorationFromState.mockClear();
+      extractDecorationFromState.mockReturnValue({});
+    });
+
+    it('injects search from useLocation() into the connected component', () => {
+      mockLocation.search = '?decoration=some-id';
+      render(
+        <Provider store={store}>
+          <DdgNodeContentWrapper {...props} />
+        </Provider>
+      );
+      expect(extractDecorationFromState).toHaveBeenCalledWith(
+        expect.any(Object),
+        expect.objectContaining({ search: '?decoration=some-id' })
+      );
+    });
+  });
 });

packages/jaeger-ui/src/components/DeepDependencies/Graph/DdgNodeContent/index.tsx

@@ -4,6 +4,7 @@
 import * as React from 'react';
 import { Popover } from 'antd';
 import cx from 'classnames';
+import { useLocation } from 'react-router-dom-v5-compat';
 import { TLayoutVertex } from '@jaegertracing/plexus/lib/types';
 import { IoLocate, IoEyeOff } from 'react-icons/io5';
 import { connect } from 'react-redux';
@@ -396,6 +397,17 @@ export function mapDispatchToProps(dispatch: Dispatch<ReduxState>): TDispatchPro
   };
 }
 
-const DdgNodeContent = connect(extractDecorationFromState, mapDispatchToProps)(UnconnectedDdgNodeContent);
+const ConnectedDdgNodeContent = connect(
+  extractDecorationFromState,
+  mapDispatchToProps
+)(UnconnectedDdgNodeContent);
+
+// search is always injected from useLocation(); callers cannot supply it.
+type DdgNodeContentProps = Omit<React.ComponentProps<typeof ConnectedDdgNodeContent>, 'search'>;
+
+function DdgNodeContent(props: DdgNodeContentProps) {
+  const { search } = useLocation();
+  return <ConnectedDdgNodeContent {...props} search={search} />;
+}
 
 export default DdgNodeContent;

packages/jaeger-ui/src/components/DeepDependencies/Header/index.test.js

@@ -64,29 +64,22 @@ jest.mock('./LayoutSettings', () => {
 
 jest.mock('../../common/UiFindInput', () => {
   const mockReact = jest.requireActual('react');
-  return function MockUiFindInput(props) {
+  return mockReact.forwardRef(function MockUiFindInput(props, ref) {
     const inputRef = mockReact.useRef(null);
 
     mockReact.useEffect(() => {
-      if (props.forwardedRef) {
-        props.forwardedRef.current = {
-          focus: () => {
-            if (inputRef.current) {
-              inputRef.current.focus();
-            }
-          },
-          blur: () => {
-            if (inputRef.current) {
-              inputRef.current.blur();
-            }
-          },
-          select: () => {
-            if (inputRef.current) {
-              inputRef.current.select();
-            }
-          },
+      if (ref) {
+        const current = {
+          focus: () => inputRef.current && inputRef.current.focus(),
+          blur: () => inputRef.current && inputRef.current.blur(),
+          select: () => inputRef.current && inputRef.current.select(),
           input: inputRef.current,
         };
+        if (typeof ref === 'function') {
+          ref(current);
+        } else {
+          ref.current = current;
+        }
       }
     });
 
@@ -95,7 +88,7 @@ jest.mock('../../common/UiFindInput', () => {
       'data-testid': 'ui-find-input',
       ...props.inputProps,
     });
-  };
+  });
 });
 
 describe('<Header>', () => {

packages/jaeger-ui/src/components/DeepDependencies/Header/index.tsx

@@ -175,7 +175,7 @@ const Header: React.FC<TProps> = ({
             <IoSearch className="DdgHeader--uiFindSearchIcon" />
             <UiFindInput
               allowClear
-              forwardedRef={uiFindInput}
+              ref={uiFindInput}
               inputProps={{ className: 'DdgHeader--uiFindInput' }}
               trackFindFunction={trackFilter}
             />

packages/jaeger-ui/src/components/DeepDependencies/SidePanel/DetailsPanel.test.js

@@ -1,14 +1,30 @@
 // Copyright (c) 2020 Uber Technologies, Inc.
 // SPDX-License-Identifier: Apache-2.0
 
+// Mutable object so individual tests can control the location without re-creating the mock.
+const mockLocation = { search: '' };
+
+jest.mock('react-router-dom-v5-compat', () => ({
+  ...jest.requireActual('react-router-dom-v5-compat'),
+  useLocation: () => mockLocation,
+}));
+
+jest.mock('../../../model/path-agnostic-decorations', () => ({
+  __esModule: true,
+  default: jest.fn(() => ({})),
+}));
+
 import React from 'react';
 import { render, screen, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import _set from 'lodash/set';
+import { Provider } from 'react-redux';
 
+import extractDecorationFromState from '../../../model/path-agnostic-decorations';
 import stringSupplant from '../../../utils/stringSupplant';
 import JaegerAPI from '../../../api/jaeger';
 import { UnconnectedDetailsPanel as DetailsPanel } from './DetailsPanel';
+import DefaultDetailsPanel from './DetailsPanel';
 
 jest.mock('../../common/VerticalResizer', () => {
   return ({ onChange, position }) => (
@@ -273,4 +289,34 @@ describe('<SidePanel>', () => {
       expect(container.querySelector('.Ddg--DetailsPanel')).toHaveStyle('width: 60vw');
     });
   });
+
+  describe('DetailsPanelWithLocation (default export)', () => {
+    const store = {
+      getState: () => ({}),
+      dispatch: jest.fn(),
+      subscribe: jest.fn(() => jest.fn()),
+    };
+    const wrapperProps = {
+      decorationSchema: { name: 'Wrapper Test Schema' },
+      service: 'wrapper-test-svc',
+    };
+
+    beforeEach(() => {
+      extractDecorationFromState.mockClear();
+      extractDecorationFromState.mockReturnValue({});
+    });
+
+    it('injects search from useLocation() into the connected component', () => {
+      mockLocation.search = '?decoration=my-decoration-id';
+      render(
+        <Provider store={store}>
+          <DefaultDetailsPanel {...wrapperProps} />
+        </Provider>
+      );
+      expect(extractDecorationFromState).toHaveBeenCalledWith(
+        expect.any(Object),
+        expect.objectContaining({ search: '?decoration=my-decoration-id' })
+      );
+    });
+  });
 });

packages/jaeger-ui/src/components/DeepDependencies/SidePanel/DetailsPanel.tsx

@@ -3,6 +3,7 @@
 
 import * as React from 'react';
 import { Tooltip } from 'antd';
+import { useLocation } from 'react-router-dom-v5-compat';
 import _get from 'lodash/get';
 import { connect } from 'react-redux';
 
@@ -180,4 +181,14 @@ function UnconnectedDetailsPanelImpl(props: TProps) {
 
 export const UnconnectedDetailsPanel = React.memo(UnconnectedDetailsPanelImpl);
 
-export default connect(extractDecorationFromState)(UnconnectedDetailsPanel);
+const ConnectedDetailsPanel = connect(extractDecorationFromState)(UnconnectedDetailsPanel);
+
+// search is always injected from useLocation(); callers cannot supply it.
+type DetailsPanelWithLocationProps = Omit<React.ComponentProps<typeof ConnectedDetailsPanel>, 'search'>;
+
+function DetailsPanelWithLocation(props: DetailsPanelWithLocationProps) {
+  const { search } = useLocation();
+  return <ConnectedDetailsPanel {...props} search={search} />;
+}
+
+export default DetailsPanelWithLocation;