Skip to content

Commit b4c8d63

Browse files
diemoldiemol
committed
[grid] Removing withRouter in favour of useLocation
Preparing code to migrate to react router dom v6
1 parent 754758e commit b4c8d63

3 files changed

Lines changed: 144 additions & 116 deletions

File tree

‎javascript/grid-ui/src/App.tsx‎

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -21,12 +21,7 @@ import {
2121
InMemoryCache,
2222
NormalizedCacheObject
2323
} from '@apollo/client'
24-
import {
25-
Route,
26-
RouteComponentProps,
27-
Switch,
28-
withRouter
29-
} from 'react-router-dom'
24+
import { Route, Switch } from 'react-router-dom'
3025
import React, { ReactNode } from 'react'
3126
import ReactModal from 'react-modal'
3227
import { GridConfig } from './config'
@@ -51,7 +46,7 @@ export const client: ApolloClient<NormalizedCacheObject> = new ApolloClient(
5146
uri: GridConfig.serverUri
5247
})
5348

54-
interface AppProps extends RouteComponentProps {
49+
interface AppProps {
5550
classes: any
5651
}
5752

@@ -169,7 +164,9 @@ class App extends React.Component<AppProps, AppState> {
169164
<Route exact path="/">
170165
<Overview {...this.props}/>
171166
</Route>
172-
<Route component={Help} {...this.props} />
167+
<Route>
168+
<Help {...this.props}/>
169+
</Route>
173170
</Switch>
174171
</Container>
175172
<Footer />
@@ -180,4 +177,4 @@ class App extends React.Component<AppProps, AppState> {
180177
}
181178
}
182179

183-
export default withStyles(useStyles)(withRouter(App))
180+
export default withStyles(useStyles)(App)

‎javascript/grid-ui/src/components/NavBar/NavBar.tsx‎

Lines changed: 47 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -35,8 +35,7 @@ import {
3535
Typography,
3636
withStyles
3737
} from '@material-ui/core'
38-
import { withRouter } from 'react-router'
39-
import { RouteComponentProps } from 'react-router-dom'
38+
import { useLocation } from 'react-router-dom'
4039
import OverallConcurrency from './OverallConcurrency'
4140
import { StyleRules } from '@material-ui/core/styles'
4241

@@ -84,10 +83,48 @@ const useStyles = (theme: Theme): StyleRules => createStyles(
8483
})
8584

8685
function ListItemLink (props): JSX.Element {
87-
return <ListItem button component='a' {...props} />
86+
return <ListItem button component="a" {...props} />
8887
}
8988

90-
interface NavBarProps extends RouteComponentProps {
89+
function NavBarBottom (props): JSX.Element {
90+
const {
91+
classes,
92+
sessionQueueSize,
93+
sessionCount,
94+
maxSession,
95+
nodeCount
96+
} = props
97+
const location = useLocation()
98+
// Not showing the overall status when the user is on the Overview
99+
// page and there is only one node, because polling is not happening
100+
// at the same time, and it could be confusing for the user. So,
101+
// displaying it when there is more than one node, or when the user is
102+
// on a different page and there is at least one node registered.
103+
const showOverallConcurrency =
104+
nodeCount > 1 || (location.pathname !== '/' && nodeCount > 0)
105+
106+
return (
107+
<div>
108+
<Box p={3} m={1} className={classes.queueBackground}>
109+
<Typography
110+
align="center"
111+
gutterBottom
112+
variant="h4"
113+
>
114+
Queue size: {sessionQueueSize}
115+
</Typography>
116+
</Box>
117+
{showOverallConcurrency && (
118+
<OverallConcurrency
119+
sessionCount={sessionCount}
120+
maxSession={maxSession}
121+
/>
122+
)}
123+
</div>
124+
)
125+
}
126+
127+
interface NavBarProps {
91128
open: boolean
92129
maxSession: number
93130
sessionCount: number
@@ -108,15 +145,9 @@ class NavBar extends React.Component<NavBarProps, {}> {
108145
sessionCount,
109146
nodeCount,
110147
sessionQueueSize,
111-
classes,
112-
location
148+
classes
113149
} = this.props
114150

115-
// Not showing the overall status when the user is on the Overview page and there is only one node, because polling
116-
// is not happening at the same time and it could be confusing for the user. So, displaying it when there is more
117-
// than one node, or when the user is on a different page and there is at least one node registered.
118-
const showOverallConcurrency = nodeCount > 1 || (location.pathname !== '/' && nodeCount > 0)
119-
120151
return (
121152
<Drawer
122153
variant='permanent'
@@ -155,25 +186,17 @@ class NavBar extends React.Component<NavBarProps, {}> {
155186
</List>
156187
<Box flexGrow={1}/>
157188
{open && (
158-
<Box p={3} m={1} className={classes.queueBackground}>
159-
<Typography
160-
align='center'
161-
gutterBottom
162-
variant='h4'
163-
>
164-
Queue size: {sessionQueueSize}
165-
</Typography>
166-
</Box>
167-
)}
168-
{showOverallConcurrency && open && (
169-
<OverallConcurrency
189+
<NavBarBottom
190+
classes={classes}
191+
sessionQueueSize={sessionQueueSize}
170192
sessionCount={sessionCount}
171193
maxSession={maxSession}
194+
nodeCount={nodeCount}
172195
/>
173196
)}
174197
</Drawer>
175198
)
176199
}
177200
}
178201

179-
export default (withStyles(useStyles))(withRouter(NavBar))
202+
export default (withStyles(useStyles))(NavBar)

‎javascript/grid-ui/src/screens/Help/Help.tsx‎

Lines changed: 91 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ import {
2323
Theme,
2424
withStyles
2525
} from '@material-ui/core/styles'
26-
import { RouteComponentProps, withRouter } from 'react-router-dom'
26+
import { useLocation } from 'react-router-dom'
2727

2828
const useStyles = (theme: Theme): StyleRules => createStyles(
2929
{
@@ -43,14 +43,100 @@ const useStyles = (theme: Theme): StyleRules => createStyles(
4343
}
4444
})
4545

46-
interface HelpProps extends RouteComponentProps {
46+
function HelpContainer (): JSX.Element {
47+
const location = useLocation()
48+
return (
49+
<Container maxWidth="md">
50+
{location.pathname !== '/help' && (
51+
<Box mt={2}>
52+
<Typography
53+
align="center"
54+
color="textPrimary"
55+
variant="h2"
56+
>
57+
Whoops! The URL specified routes to this help page.
58+
</Typography>
59+
</Box>
60+
)}
61+
<Box mt={6}>
62+
<Typography
63+
align="center"
64+
color="textPrimary"
65+
variant="h3"
66+
>
67+
More information about Selenium Grid can be found at the{' '}
68+
<Link
69+
href="https://www.selenium.dev/documentation/grid/"
70+
target="_blank" rel="noreferrer"
71+
>
72+
documentation
73+
</Link>.
74+
</Typography>
75+
</Box>
76+
<Box mt={6}>
77+
<Typography
78+
align="center"
79+
color="textPrimary"
80+
variant="h3"
81+
>
82+
Please report bugs and issues to the Selenium{' '}
83+
<Link
84+
href="https://github.com/SeleniumHQ/selenium/issues/new/choose"
85+
target="_blank" rel="noreferrer"
86+
>
87+
issue tracker
88+
</Link>.
89+
</Typography>
90+
</Box>
91+
<Box mt={6}>
92+
<Typography
93+
align="center"
94+
color="textPrimary"
95+
variant="h3"
96+
>
97+
For questions and help, check the different support channels on
98+
our{' '}
99+
<Link
100+
href="https://www.selenium.dev/support/"
101+
target="_blank" rel="noreferrer"
102+
>
103+
website
104+
</Link>.
105+
</Typography>
106+
</Box>
107+
<Box m={10}>
108+
<Typography
109+
align="center"
110+
color="textPrimary"
111+
variant="h4"
112+
>
113+
Selenium is made possible through the efforts of our open source
114+
community, contributions from these{' '}
115+
<Link
116+
href="https://www.selenium.dev/documentation/about/copyright_and_attributions/"
117+
target="_blank" rel="noreferrer"
118+
>
119+
people
120+
</Link>
121+
, and our{' '}
122+
<Link href="https://www.selenium.dev/sponsors/" target="_blank"
123+
rel="noreferrer">
124+
sponsors
125+
</Link>.
126+
</Typography>
127+
</Box>
128+
</Container>
129+
)
130+
}
131+
132+
interface HelpProps {
47133
classes: any
48134
}
49135

50136
class Help extends React.Component<HelpProps, {}> {
51137
// noinspection HtmlUnknownAnchorTarget
52138
render (): ReactNode {
53-
const { classes, location } = this.props
139+
const { classes } = this.props
54140

55141
return (
56142
<div className={classes.root}>
@@ -60,89 +146,11 @@ class Help extends React.Component<HelpProps, {}> {
60146
height='100%'
61147
justifyContent='center'
62148
>
63-
<Container maxWidth='md'>
64-
{location.pathname !== '/help' && (
65-
<Box mt={2}>
66-
<Typography
67-
align='center'
68-
color='textPrimary'
69-
variant='h2'
70-
>
71-
Whoops! The URL specified routes to this help page.
72-
</Typography>
73-
</Box>
74-
)}
75-
<Box mt={6}>
76-
<Typography
77-
align='center'
78-
color='textPrimary'
79-
variant='h3'
80-
>
81-
More information about Selenium Grid can be found at the{' '}
82-
<Link
83-
href="https://www.selenium.dev/documentation/grid/"
84-
target="_blank" rel="noreferrer"
85-
>
86-
documentation
87-
</Link>.
88-
</Typography>
89-
</Box>
90-
<Box mt={6}>
91-
<Typography
92-
align='center'
93-
color='textPrimary'
94-
variant='h3'
95-
>
96-
Please report bugs and issues to the Selenium{' '}
97-
<Link
98-
href='https://github.com/SeleniumHQ/selenium/issues/new/choose'
99-
target='_blank' rel='noreferrer'
100-
>
101-
issue tracker
102-
</Link>.
103-
</Typography>
104-
</Box>
105-
<Box mt={6}>
106-
<Typography
107-
align='center'
108-
color='textPrimary'
109-
variant='h3'
110-
>
111-
For questions and help, check the different support channels on
112-
our{' '}
113-
<Link
114-
href='https://www.selenium.dev/support/'
115-
target='_blank' rel='noreferrer'
116-
>
117-
website
118-
</Link>.
119-
</Typography>
120-
</Box>
121-
<Box m={10}>
122-
<Typography
123-
align='center'
124-
color='textPrimary'
125-
variant='h4'
126-
>
127-
Selenium is made possible through the efforts of our open source
128-
community, contributions from these{' '}
129-
<Link
130-
href="https://www.selenium.dev/documentation/about/copyright_and_attributions/"
131-
target="_blank" rel='noreferrer'
132-
>
133-
people
134-
</Link>
135-
, and our{' '}
136-
<Link href='https://www.selenium.dev/sponsors/' target='_blank' rel='noreferrer'>
137-
sponsors
138-
</Link>.
139-
</Typography>
140-
</Box>
141-
</Container>
149+
<HelpContainer/>
142150
</Box>
143151
</div>
144152
)
145153
}
146154
}
147155

148-
export default withStyles(useStyles)(withRouter(Help))
156+
export default withStyles(useStyles)(Help)

0 commit comments

Comments
 (0)