Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add Custom withRouteProps HOC for react-router-dom v6 migration #1836

Merged
merged 5 commits into from
Sep 30, 2023
Merged

Add Custom withRouteProps HOC for react-router-dom v6 migration #1836

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
f251330
Add Custom withRouteProps
anshgoyalevil Sep 29, 2023
589eed4
fix any types and license header
anshgoyalevil Sep 30, 2023
b2d352d
fix lint errors
anshgoyalevil Sep 30, 2023
857295f
Update packages/jaeger-ui/src/utils/withRouteProps.tsx
anshgoyalevil Sep 30, 2023
10e3c80
fix any type
anshgoyalevil Sep 30, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/jaeger-ui/package.json
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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