Skip to content

Commit

Permalink
Add Custom withRouteProps HOC for react-router-dom v6 migration (#1836)
Browse files Browse the repository at this point in the history
  • Loading branch information
@anshgoyalevil
anshgoyalevil authored Sep 30, 2023
1 parent 658ce7d commit bcee38a
Show file tree
Hide file tree
Showing 17 changed files with 385 additions and 155 deletions.
2 changes: 1 addition & 1 deletion packages/jaeger-ui/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@
"@types/lodash": "^4.14.123",
"@types/object-hash": "^3.0.2",
"@types/react-helmet": "^6.1.5",
"@types/react-router-dom": "^4.3.1",
"@types/react-router-dom": "^5.1.0",
"@types/redux-actions": "2.2.1",
"antd": "4.24.13",
"chance": "^1.0.10",
Expand Down
6 changes: 3 additions & 3 deletions packages/jaeger-ui/src/components/App/Page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,16 +17,16 @@ import { Layout } from 'antd';
import cx from 'classnames';
import Helmet from 'react-helmet';
import { connect } from 'react-redux';
import { RouteComponentProps, withRouter } from 'react-router-dom';

import TopNav from './TopNav';
import { ReduxState } from '../../types';
import { EmbeddedState } from '../../types/embedded';
import { trackPageView } from '../../utils/tracking';

import './Page.css';
import withRouteProps from '../../utils/withRouteProps';

type TProps = RouteComponentProps<any> & {
type TProps = {
children: React.ReactNode;
embedded: EmbeddedState;
pathname: string;
Expand Down Expand Up @@ -76,4 +76,4 @@ export function mapStateToProps(state: ReduxState) {
return { embedded, pathname, search };
}

export default withRouter(connect(mapStateToProps)(PageImpl));
export default connect(mapStateToProps)(withRouteProps(PageImpl));
7 changes: 4 additions & 3 deletions packages/jaeger-ui/src/components/App/TopNav.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ import { Dropdown, Menu } from 'antd';
import { IoChevronDown } from 'react-icons/io5';
import _has from 'lodash/has';
import { connect } from 'react-redux';
import { RouteComponentProps, Link, withRouter } from 'react-router-dom';
import { Link } from 'react-router-dom';

import TraceIDSearchInput from './TraceIDSearchInput';
import * as dependencyGraph from '../DependencyGraph/url';
Expand All @@ -32,8 +32,9 @@ import { getConfigValue } from '../../utils/config/get-config';
import prefixUrl from '../../utils/prefix-url';

import './TopNav.css';
import withRouteProps from '../../utils/withRouteProps';

type Props = RouteComponentProps<any> & ReduxState;
type Props = ReduxState;

const NAV_LINKS = [
{
Expand Down Expand Up @@ -155,4 +156,4 @@ export function mapStateToProps(state: ReduxState) {
return state;
}

export default withRouter(connect(mapStateToProps)(TopNavImpl));
export default connect(mapStateToProps)(withRouteProps(TopNavImpl));
11 changes: 7 additions & 4 deletions packages/jaeger-ui/src/components/App/TraceIDSearchInput.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,20 +16,23 @@

import React from 'react';
import { createMemoryHistory } from 'history';
import { Router } from 'react-router-dom';
import { render, screen, fireEvent } from '@testing-library/react';
import '@testing-library/jest-dom';
import { Router } from 'react-router-dom';
import TraceIDSearchInput from './TraceIDSearchInput';
import { HistoryProvider } from '../../utils/useHistory';

describe('<TraceIDSearchInput />', () => {
let history;

beforeEach(() => {
history = createMemoryHistory();
render(
<Router history={history}>
<TraceIDSearchInput />
</Router>
<HistoryProvider history={history}>
<Router history={history}>
<TraceIDSearchInput />
</Router>
</HistoryProvider>
);
});

Expand Down
9 changes: 5 additions & 4 deletions packages/jaeger-ui/src/components/App/TraceIDSearchInput.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,14 +18,15 @@ import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Input } from 'antd';
import { IoSearch } from 'react-icons/io5';
import { RouteComponentProps, Router as RouterHistory, withRouter } from 'react-router-dom';

import { History } from 'history';
import { getUrl } from '../TracePage/url';

import './TraceIDSearchInput.css';
import withRouteProps from '../../utils/withRouteProps';

type Props = RouteComponentProps<any> & {
history: RouterHistory;
type Props = {
history: History;
};

class TraceIDSearchInput extends React.PureComponent<Props> {
Expand Down Expand Up @@ -57,4 +58,4 @@ class TraceIDSearchInput extends React.PureComponent<Props> {
}
}

export default withRouter(TraceIDSearchInput);
export default withRouteProps(TraceIDSearchInput);
202 changes: 114 additions & 88 deletions packages/jaeger-ui/src/components/App/__snapshots__/index.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ exports[`JaegerUIApp does not explode 1`] = `
}
}
>
<Router
<HistoryProvider
history={
Object {
"action": "POP",
Expand All @@ -37,98 +37,124 @@ exports[`JaegerUIApp does not explode 1`] = `
}
}
>
<withRouter(Connect(PageImpl))>
<Switch>
<Route
component={
Object {
"$$typeof": Symbol(react.memo),
"WrappedComponent": [Function],
"compare": null,
"type": [Function],
<Router
history={
Object {
"action": "POP",
"back": [Function],
"block": [Function],
"createHref": [Function],
"forward": [Function],
"go": [Function],
"goBack": [Function],
"goForward": [Function],
"length": 1,
"listen": [Function],
"listenObject": false,
"location": Object {
"hash": "",
"pathname": "/",
"search": "",
"state": undefined,
},
"push": [Function],
"replace": [Function],
}
}
>
<Connect(WithRouteProps)>
<Switch>
<Route
component={
Object {
"$$typeof": Symbol(react.memo),
"WrappedComponent": [Function],
"compare": null,
"type": [Function],
}
}
}
path="/search"
/>
<Route
component={
Object {
"$$typeof": Symbol(react.memo),
"WrappedComponent": [Function],
"compare": null,
"type": [Function],
path="/search"
/>
<Route
component={
Object {
"$$typeof": Symbol(react.memo),
"WrappedComponent": [Function],
"compare": null,
"type": [Function],
}
}
}
path="/trace/:a?\\\\.\\\\.\\\\.:b?"
/>
<Route
component={
Object {
"$$typeof": Symbol(react.memo),
"WrappedComponent": [Function],
"compare": null,
"type": [Function],
path="/trace/:a?\\\\.\\\\.\\\\.:b?"
/>
<Route
component={
Object {
"$$typeof": Symbol(react.memo),
"WrappedComponent": [Function],
"compare": null,
"type": [Function],
}
}
}
path="/trace/:id"
/>
<Route
component={
Object {
"$$typeof": Symbol(react.memo),
"WrappedComponent": [Function],
"compare": null,
"type": [Function],
path="/trace/:id"
/>
<Route
component={
Object {
"$$typeof": Symbol(react.memo),
"WrappedComponent": [Function],
"compare": null,
"type": [Function],
}
}
}
path="/dependencies"
/>
<Route
component={
Object {
"$$typeof": Symbol(react.memo),
"WrappedComponent": [Function],
"compare": null,
"type": [Function],
path="/dependencies"
/>
<Route
component={
Object {
"$$typeof": Symbol(react.memo),
"WrappedComponent": [Function],
"compare": null,
"type": [Function],
}
}
}
path="/deep-dependencies"
/>
<Route
component={
Object {
"$$typeof": Symbol(react.memo),
"WrappedComponent": [Function],
"compare": null,
"type": [Function],
path="/deep-dependencies"
/>
<Route
component={
Object {
"$$typeof": Symbol(react.memo),
"WrappedComponent": [Function],
"compare": null,
"type": [Function],
}
}
}
path="/quality-metrics"
/>
<Route
component={[Function]}
path="/monitor"
/>
<Redirect
exact={true}
path="/"
to="/search"
/>
<Redirect
exact={true}
path=""
to="/search"
/>
<Redirect
exact={true}
path="/"
to="/search"
/>
<Route
component={[Function]}
/>
</Switch>
</withRouter(Connect(PageImpl))>
</Router>
path="/quality-metrics"
/>
<Route
component={[Function]}
path="/monitor"
/>
<Redirect
exact={true}
path="/"
to="/search"
/>
<Redirect
exact={true}
path=""
to="/search"
/>
<Redirect
exact={true}
path="/"
to="/search"
/>
<Route
component={[Function]}
/>
</Switch>
</Connect(WithRouteProps)>
</Router>
</HistoryProvider>
</Provider>
`;
37 changes: 20 additions & 17 deletions packages/jaeger-ui/src/components/App/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@ import '../common/vars.css';
import '../common/utils.css';
import './index.css';
import { history, store } from '../../utils/configure-store';
import { HistoryProvider } from '../../utils/useHistory';

export default class JaegerUIApp extends Component {
constructor(props) {
Expand All @@ -51,25 +52,27 @@ export default class JaegerUIApp extends Component {
render() {
return (
<Provider store={store}>
<Router history={history}>
<Page>
<Switch>
<Route path={searchPath} component={SearchTracePage} />
<Route path={traceDiffPath} component={TraceDiff} />
<Route path={tracePath} component={TracePage} />
<Route path={dependenciesPath} component={DependencyGraph} />
<Route path={deepDependenciesPath} component={DeepDependencies} />
<Route path={qualityMetricsPath} component={QualityMetrics} />
<Route path={monitorATMPath} component={MonitorATMPage} />
<HistoryProvider history={history}>
<Router history={history}>
<Page>
<Switch>
<Route path={searchPath} component={SearchTracePage} />
<Route path={traceDiffPath} component={TraceDiff} />
<Route path={tracePath} component={TracePage} />
<Route path={dependenciesPath} component={DependencyGraph} />
<Route path={deepDependenciesPath} component={DeepDependencies} />
<Route path={qualityMetricsPath} component={QualityMetrics} />
<Route path={monitorATMPath} component={MonitorATMPage} />

<Redirect exact path="/" to={searchPath} />
<Redirect exact path={prefixUrl()} to={searchPath} />
<Redirect exact path={prefixUrl('/')} to={searchPath} />
<Redirect exact path="/" to={searchPath} />
<Redirect exact path={prefixUrl()} to={searchPath} />
<Redirect exact path={prefixUrl('/')} to={searchPath} />

<Route component={NotFound} />
</Switch>
</Page>
</Router>
<Route component={NotFound} />
</Switch>
</Page>
</Router>
</HistoryProvider>
</Provider>
);
}
Expand Down
Loading

0 comments on commit bcee38a

Please sign in to comment.