Part of Phase 1 (1e): migrate embed flags off Redux (#3761)

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

## Description of the changes
- Implements ADR 0004 Phase 1e (embedded UI flags)
- Problem: embedded was a Redux slice with no actions, only an
initializer reading `window.location.search` once.
- Added `packages/jaeger-ui/src/stores/embedded-store.ts`
- Removed: `reducers/embedded.ts`, its test, and embedded from
`combineReducers` and `ReduxState`.
- Tests: `embedded-store.test.ts`; `Page.test.jsx`,
`SearchTracePage/index.test.jsx`, `TracePage/index.test.jsx` updated.

## How was this change tested?
- Unit tests
- Use a single `?` then `&uiEmbed=v0&...` (a second ? breaks parsing),
e.g. `/search?...&uiEmbed=v0&uiSearchHideGraph=1`.
- load a DDG graph, hover nodes/edges, change service

## 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
- [ ] **Light**: AI provided minor assistance (formatting, simple
suggestions)
- [x] **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>
Signed-off-by: Yuri Shkuro <yurishkuro@users.noreply.github.com>
Signed-off-by: Yuri Shkuro <github@ysh.us>
Co-authored-by: Yuri Shkuro <yurishkuro@users.noreply.github.com>
Co-authored-by: Yuri Shkuro <github@ysh.us>

Author: Parship12

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

@@ -4,51 +4,57 @@
 vi.mock('./TopNav', () => mockDefault(() => <div />));
 vi.mock('../../utils/tracking');
 
+const { useEmbeddedStateMock } = vi.hoisted(() => ({
+  useEmbeddedStateMock: jest.fn().mockReturnValue(null),
+}));
+
+vi.mock('../../stores/embedded-store', () => ({
+  useEmbeddedState: (...args) => useEmbeddedStateMock(...args),
+}));
+
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { MemoryRouter } from 'react-router-dom';
 
-import { mapStateToProps, PageImpl as Page } from './Page';
+import { PageImpl as Page } from './Page';
 import { trackPageView } from '../../utils/tracking';
 
-const renderWithPath = (props, path = '/test?search=value') =>
+const renderWithPath = (path = '/test?search=value') =>
   render(
     <MemoryRouter initialEntries={[path]}>
-      <Page {...props} />
+      <Page />
     </MemoryRouter>
   );
 
-describe('mapStateToProps()', () => {
-  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');
-  });
-});
+const embeddedV0 = {
+  version: 'v0',
+  searchHideGraph: false,
+  timeline: {
+    collapseTitle: false,
+    hideMinimap: false,
+    hideSummary: false,
+  },
+};
 
 describe('<Page>', () => {
   beforeEach(() => {
     trackPageView.mockReset();
+    useEmbeddedStateMock.mockReturnValue(null);
   });
 
   it('renders without exploding', () => {
-    renderWithPath({});
+    renderWithPath();
     expect(screen.getByRole('banner')).toBeInTheDocument();
   });
 
   it('tracks an initial page-view using location from useLocation()', () => {
-    renderWithPath({}, '/my-path?q=1');
+    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');
+    const { rerender } = renderWithPath('/first?a=1');
     trackPageView.mockReset();
     // Use a different key to force the MemoryRouter to remount with the new initialEntries.
     rerender(
@@ -60,7 +66,7 @@ describe('<Page>', () => {
   });
 
   it('tracks a pageView when the search changes but pathname is same', () => {
-    const { rerender } = renderWithPath({}, '/same-path?a=1');
+    const { rerender } = renderWithPath('/same-path?a=1');
     trackPageView.mockReset();
     rerender(
       <MemoryRouter key="router-2" initialEntries={['/same-path?a=2']}>
@@ -72,8 +78,9 @@ describe('<Page>', () => {
 
   describe('Page embedded', () => {
     beforeEach(() => {
+      useEmbeddedStateMock.mockReturnValue(embeddedV0);
       trackPageView.mockReset();
-      renderWithPath({ embedded: true });
+      renderWithPath();
     });
 
     it('renders without exploding', () => {

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

@@ -4,27 +4,25 @@
 import * as React from 'react';
 import { Layout } from 'antd';
 import cx from 'classnames';
-import { connect } from 'react-redux';
 import { useLocation } from 'react-router-dom';
 
 import TopNav from './TopNav';
-import { ReduxState } from '../../types';
-import { EmbeddedState } from '../../types/embedded';
+import { useEmbeddedState } from '../../stores/embedded-store';
 import { trackPageView } from '../../utils/tracking';
 import DocumentTitle from '../../utils/documentTitle';
 
 import './Page.css';
-import withRouteProps from '../../utils/withRouteProps';
 
 type TProps = {
   children: React.ReactNode;
-  embedded: EmbeddedState;
 };
 
 const { Header, Content } = Layout;
 
 // export for tests
-export const PageImpl: React.FC<TProps> = ({ children, embedded }) => {
+export const PageImpl: React.FC<TProps> = props => {
+  const embedded = useEmbeddedState();
+  const { children } = props;
   const { pathname, search } = useLocation();
   React.useEffect(() => {
     trackPageView(pathname, search);
@@ -46,11 +44,3 @@ export const PageImpl: React.FC<TProps> = ({ children, embedded }) => {
     </div>
   );
 };
-
-// export for tests
-export function mapStateToProps(state: ReduxState) {
-  const { embedded } = state;
-  return { embedded };
-}
-
-export default connect(mapStateToProps)(withRouteProps(PageImpl));

packages/jaeger-ui/src/components/App/index.dev.test.jsx

@@ -12,7 +12,10 @@ import '@testing-library/jest-dom';
 import { MemoryRouter } from 'react-router-dom';
 
 vi.mock('./NotFound', () => mockDefault(() => <div data-testid="not-found" />));
-vi.mock('./Page', () => mockDefault(({ children }) => <div data-testid="page">{children}</div>));
+vi.mock('./Page', () => {
+  const PageImpl = ({ children }) => <div data-testid="page">{children}</div>;
+  return { PageImpl };
+});
 vi.mock('../DependencyGraph', () => mockDefault(() => <div data-testid="dependency-graph" />));
 vi.mock('../DeepDependencies', () => mockDefault(() => <div data-testid="deep-dependencies" />));
 vi.mock('../QualityMetrics', () => mockDefault(() => <div data-testid="quality-metrics" />));

packages/jaeger-ui/src/components/App/index.test.jsx

@@ -7,7 +7,10 @@ import '@testing-library/jest-dom';
 import { MemoryRouter } from 'react-router-dom';
 
 vi.mock('./NotFound', () => mockDefault(() => <div data-testid="not-found" />));
-vi.mock('./Page', () => mockDefault(({ children }) => <div data-testid="page">{children}</div>));
+vi.mock('./Page', () => {
+  const PageImpl = ({ children }) => <div data-testid="page">{children}</div>;
+  return { PageImpl };
+});
 vi.mock('../DependencyGraph', () => mockDefault(() => <div data-testid="dependency-graph" />));
 vi.mock('../DeepDependencies', () => mockDefault(() => <div data-testid="deep-dependencies" />));
 vi.mock('../QualityMetrics', () => mockDefault(() => <div data-testid="quality-metrics" />));

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

@@ -7,7 +7,7 @@ import { Route, Routes, Navigate } from 'react-router-dom';
 import { AppQueryClientProvider } from '../../query/app-query-client';
 
 import NotFound from './NotFound';
-import Page from './Page';
+import { PageImpl as Page } from './Page';
 import DependencyGraph from '../DependencyGraph';
 import { ROUTE_PATH as dependenciesPath } from '../DependencyGraph/url';
 import DeepDependencies from '../DeepDependencies';
@@ -47,13 +47,6 @@ export default function JaegerUIApp() {
     <AppQueryClientProvider>
       <ThemeProvider>
         <Provider store={store as any}>
-          {
-            // the Page component is a connected component (wrapped by Redux's connect HOC)
-            // that is also wrapped by a custom withRouteProps HOC.
-            // The @ts-ignore was added because of a specific TypeScript error that occurs
-            // when mixing Redux 5/9, React 19, and complex HOCs.
-          }
-          {/* @ts-expect-error - TypeScript error with Redux 5/9, React 19, and complex HOCs */}
           <Page>
             <Routes>
               <Route path={searchPath} element={<SearchTracePage />} />

packages/jaeger-ui/src/components/SearchTracePage/index.test.jsx

@@ -4,6 +4,14 @@
 import { MemoryRouter } from 'react-router-dom';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
+const { useEmbeddedStateMock } = vi.hoisted(() => ({
+  useEmbeddedStateMock: jest.fn().mockReturnValue(null),
+}));
+
+vi.mock('../../stores/embedded-store', () => ({
+  useEmbeddedState: (...args) => useEmbeddedStateMock(...args),
+}));
+
 vi.mock('../../api/v3/client', () => ({
   jaegerClient: {
     fetchServices: jest.fn(() => Promise.resolve([])),
@@ -82,6 +90,7 @@ describe('<SearchTracePage>', () => {
     props = getDefaultProps();
     traces = props.traces;
     traceResultsToDownload = props.traceResultsToDownload;
+    useEmbeddedStateMock.mockReturnValue(null);
   });
 
   it('searches for traces if `service` or `traceID` are in the query string', () => {
@@ -200,20 +209,28 @@ describe('<SearchTracePage>', () => {
   });
 
   it('hides SearchForm if is embed', () => {
-    const testProps = { ...props, embedded: true };
+    useEmbeddedStateMock.mockReturnValue({
+      version: 'v0',
+      searchHideGraph: false,
+      timeline: { collapseTitle: false, hideMinimap: false, hideSummary: false },
+    });
     const { container } = render(
       <AllProvider>
-        <SearchTracePage {...testProps} />
+        <SearchTracePage {...props} />
       </AllProvider>
     );
     expect(container.querySelector('[data-node-key="searchForm"]')).not.toBeInTheDocument();
   });
 
   it('hides logo if is embed', () => {
-    const testProps = { ...props, embedded: true };
+    useEmbeddedStateMock.mockReturnValue({
+      version: 'v0',
+      searchHideGraph: false,
+      timeline: { collapseTitle: false, hideMinimap: false, hideSummary: false },
+    });
     const { container } = render(
       <AllProvider>
-        <SearchTracePage {...testProps} />
+        <SearchTracePage {...props} />
       </AllProvider>
     );
     expect(container.querySelector('.js-test-logo')).not.toBeInTheDocument();
@@ -301,7 +318,6 @@ describe('mapStateToProps()', () => {
     expect(diffCohort[0].data.traceID).toBe(trace.traceID);
 
     expect(rest).toEqual({
-      embedded: undefined,
       queryOfResults: undefined,
       isHomepage: true,
       sortedTracesXformer: expect.any(Function),

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

@@ -26,6 +26,7 @@ import JaegerLogo from '../../img/jaeger-logo.svg';
 import withRouteProps from '../../utils/withRouteProps';
 import { trackSortByChange } from './SearchForm.track';
 import { useTraceDiffStore } from '../../stores/trace-diff-store';
+import { useEmbeddedState } from '../../stores/embedded-store';
 import { useShallow } from 'zustand/react/shallow';
 import { ReduxState } from '../../types';
 import { SearchQuery } from '../../types/search';
@@ -38,10 +39,6 @@ interface IQueryOfResults extends Partial<SearchQuery> {
   limit?: string | number;
 }
 
-interface IEmbeddedConfig {
-  searchHideGraph?: boolean;
-}
-
 interface ISearchTracePageImplOwnProps {
   isHomepage?: boolean;
 }
@@ -51,7 +48,6 @@ interface IStateProps {
   queryOfResults: IQueryOfResults | null;
   // passed as-is from Redux; cohort lookup happens in the component where Zustand is accessible
   tracesInRedux: ReduxState['trace'];
-  embedded?: IEmbeddedConfig;
   loadingTraces: boolean;
   traces: Trace[];
   traceResultsToDownload: unknown[];
@@ -72,9 +68,9 @@ type SearchTracePageImplProps = ISearchTracePageImplOwnProps & IStateProps & IDi
 
 // export for tests
 export function SearchTracePageImpl(props: SearchTracePageImplProps) {
+  const embedded = useEmbeddedState();
   const {
     tracesInRedux,
-    embedded,
     errors,
     fetchMultipleTraces,
     isHomepage,
@@ -185,7 +181,7 @@ export function SearchTracePageImpl(props: SearchTracePageImplProps) {
               cohortRemoveTrace,
               diffCohort,
               disableComparisons: !!embedded,
-              hideGraph: embedded && embedded.searchHideGraph,
+              hideGraph: Boolean(embedded?.searchHideGraph),
               loading: loadingTraces,
               maxTraceDuration,
               queryOfResults,
@@ -247,7 +243,6 @@ export function mapStateToProps(
   state: ReduxState,
   ownProps: { search?: string }
 ): IStateProps & { isHomepage: boolean } {
-  const { embedded } = state;
   const query = getUrlState(ownProps.search || '');
   const isHomepage = !Object.keys(query).length;
   const {
@@ -267,7 +262,6 @@ export function mapStateToProps(
   return {
     queryOfResults: queryOfResults as IQueryOfResults | null,
     tracesInRedux: state.trace,
-    embedded,
     isHomepage,
     loadingTraces,
     traces,