Refactor: Rewrite components into functional components to enable useHooks

[Zen-cronic]

Which problem is this PR solving?

• Part of [Deps] Upgrade react-router-dom to 7.x #2532
• Supporting PR/PoC for Update: React router dom from v5 to v6 #2580

Description of the changes

• Converted several class-based components into functional ones, to enable the use of useHooks from rrd v6

How was this change tested?

• npm run test
• Currently, many failing tests - will address if this concept works

Checklist

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

[Zen-cronic]

Update:

This is the default page after clicking "Find Traces" form:
Notice the params in the url.

The DDG page functions as expected (after clicking on "Deep Dependency Graph").
But the page url lost its many of its params:

This is the expected result, with full params:

I'll explain further in the review section.

[Zen-cronic]

as said in the inline comments, the ddg is displayed only with the url params stored in the redux state.

[yurishkuro]

sounds like a regression. Jaeger UI links are supposed to be shareable and capture the complete state.

[Zen-cronic]

i expected useLocation to provide us with the same value as state.router.location due to the use of redux-first-history in the store:

jaeger-ui/packages/jaeger-ui/src/utils/configure-store.js

Line 55 in 1ee19c2

export const history = createReduxHistory(store);

that's what the library is for - to sync the history object shared by react-redux and rrd. From the docs, in rrdv6, we should get useLocation() === state.router.location, but that's not the case here.

[Zen-cronic]

our current implementation stores the url (the params) in the redux store, and related components subscribe to the store and update it via mapStateToProps. E.g.,

jaeger-ui/packages/jaeger-ui/src/components/DeepDependencies/traces.tsx

Line 38 in 1ee19c2

export function mapStateToProps(state: ReduxState, ownProps: TOwnProps): TReduxProps {

But as said above, the useLocation hook doesn't provide us with the synchronized location object. That's probably why the url doesn't get updated correctly:

jaeger-ui/packages/jaeger-ui/src/components/DeepDependencies/traces.tsx

Line 39 in 1ee19c2

const urlState = getUrlState(ownProps.location.search);

[Zen-cronic]

folks have been facing similar issues.

we shouldn't rely anymore on the redux state anymore for navigating url routes and updating query params, and instead use rrdv5-compat and rrdv6's useHooks.

[Zen-cronic]

the discrepancy between location provided by useLocation and what's in the redux state.
This is what's making the ddg displayed correctly under the wrong url (missing params).

[hari45678]

@Zen-cronic I am working on removing redux-form dependency from past few days. We would eventually have to remove history package as rrd v7 handles that internally. And as a result, redux-first-history would need to be removed. We can rewrite the class components to functional components gradually, one by one, otherwise some errors might stay uncaught by the automated tests. I would volunteer by your side in rewriting these components.

For this PR, my recommendation would be to go for one chain of related changes only and testing that change manually. For example, rewrite a single component, check which other components depend/it depends on. Only change that part of code that keeps those related components in a working state, instead of rewriting those components to functional components as well

[Zen-cronic]

thanks for your suggestion, hari.

my goal is to unblock #2580 by following this official v5-v6 migration guide.

from now on, here's my process:

1. Rewrite a component if it meets this criteria:

• if it reads location from the redux state. e.g. SearchTracePage and/or
• if it updates the query params to the redux state e.g. UiFindInput

2. Replace history, location, and query params in the redux state with useHooks b/c routing should be decoupled from the store

3. repeat this process for another set of related components

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 96.61%. Comparing base (2d880b4) to head (9af2a82).

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #2588   +/-   ##
=======================================
  Coverage   96.61%   96.61%           
=======================================
  Files         255      255           
  Lines        7738     7738           
  Branches     1988     2006   +18     
=======================================
  Hits         7476     7476           
  Misses        262      262           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.