Skip to content

Commit 29726c4

Browse files
syntrydysyntrydy
committed
feat(admin-ui): migration from react-router v5 to v6 #422 
1 parent 80fd7c1 commit 29726c4

31 files changed

+143
-119
lines changed

‎admin-ui/app/components/Layout/Layout.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom'
33
import PropTypes from 'prop-types'
44
import classNames from 'classnames'
55
import { Helmet } from 'react-helmet'
6-
import { withRouter } from 'react-router-dom'
6+
import { useWithRouter as withRouter } from 'Utils/WithRouter'
77
import {
88
filter,
99
forOwn,

‎admin-ui/app/components/SidebarMenu/RoutesRecursiveWrapper.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react'
2-
import { Route } from 'react-router'
2+
import { Route } from 'react-router-dom'
33

44
export const RoutesRecursiveWrapper = ({ item }) => {
55

@@ -11,7 +11,7 @@ export const RoutesRecursiveWrapper = ({ item }) => {
1111
children.map((child, i) => (<RoutesRecursiveWrapper key={i} item={child} />))
1212

1313
) : (!!path &&
14-
<Route component={component} path={path} />
14+
<Route element={<component />} path={path} />
1515
)
1616
)
1717

‎admin-ui/app/components/SidebarMenu/SidebarMenu.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react'
22
import PropTypes from 'prop-types'
3-
import { withRouter } from 'react-router-dom'
3+
import { useWithRouter as withRouter } from 'Utils/WithRouter'
44
import find from 'lodash/find'
55
import includes from 'lodash/includes'
66
import mapValues from 'lodash/mapValues'

‎admin-ui/app/routes/Apps/Gluu/GluuSessionTimeout.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { useRef, useState } from 'react'
22
import IdleTimer from 'react-idle-timer'
33
import SessionTimeoutDialog from './GluuSessionTimeoutDialog'
4-
import { useHistory } from 'react-router-dom'
4+
import { useNavigate } from 'react-router-dom'
55
let countdownInterval
66
let timeout
77

@@ -10,7 +10,7 @@ const SessionTimeout = ({ isAuthenticated }) => {
1010
const [timeoutCountdown, setTimeoutCountdown] = useState(0)
1111
const idleTimer = useRef(null)
1212
const SESSION_TIMEOUT_IN_MINUTES = process.env.SESSION_TIMEOUT_IN_MINUTES
13-
const history = useHistory()
13+
const navigate =useNavigate()
1414

1515
const clearSessionTimeout = () => {
1616
clearTimeout(timeout)
@@ -25,7 +25,7 @@ const SessionTimeout = ({ isAuthenticated }) => {
2525
setTimeoutModalOpen(false)
2626
clearSessionInterval()
2727
clearSessionTimeout()
28-
history.push('/logout')
28+
navigate('/logout')
2929
} catch (err) {
3030
console.error(err)
3131
}

‎admin-ui/app/routes/index.js

+24-23
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useState, useEffect } from 'react'
2-
import { Route, Switch, Redirect } from 'react-router'
2+
import { Route, Routes, Navigate } from 'react-router-dom'
33
import { useSelector } from 'react-redux'
44

55
// ----------- Pages Imports ---------------
@@ -34,51 +34,52 @@ export const RoutedContent = () => {
3434
}, [])
3535

3636
return (
37-
<Switch>
38-
<Redirect from="/" to="/home/dashboard" exact />
39-
<Route path="/home/dashboard" exact component={DashboardPage} />
40-
<Route path="/home/health" exact component={HealthPage} />
41-
<Route path="/home/licenseDetails" exact component={LicenseDetailsPage} />
37+
<Routes>
38+
<Route path="/home/dashboard" element={<DashboardPage />} />
39+
<Route path="/" element={ <Navigate to="/home/dashboard" /> } />
40+
<Route path="/home/health" element={<HealthPage />} />
41+
<Route path="/home/licenseDetails" element={<LicenseDetailsPage />} />
4242
{/* Layouts */}
43-
<Route path="/layouts/navbar" component={NavbarOnly} />
44-
<Route path="/layouts/sidebar" component={SidebarDefault} />
45-
<Route path="/layouts/sidebar-a" component={SidebarA} />
43+
<Route path="/layouts/navbar" element={<NavbarOnly />} />
44+
<Route path="/layouts/sidebar" element={<SidebarDefault />} />
45+
<Route path="/layouts/sidebar-a" element={<SidebarA />} />
4646
<Route
4747
path="/layouts/sidebar-with-navbar"
48-
component={SidebarWithNavbar}
48+
element={<SidebarWithNavbar />}
4949
/>
5050

5151
{/* -------- Plugins ---------*/}
5252
{pluginMenus.map(
5353
(item, key) =>
5454
hasPermission(scopes, item.permission) && (
55-
<Route key={key} path={item.path} component={item.component} />
55+
<Route key={key} path={item.path} element={<item.component />} />
5656
),
5757
)}
5858
{/* Pages Routes */}
59-
<Route component={ProfilePage} path="/profile" />
60-
<Route component={ByeBye} path="/logout" />
61-
<Route component={Gluu404Error} path="/error-404" />
59+
<Route element={<ProfilePage />} path="/profile" />
60+
<Route element={<ByeBye />} path="/logout" />
61+
<Route element={<Gluu404Error />} path="/error-404" />
6262

6363
{/* 404 */}
64-
<Redirect to="/error-404" />
65-
</Switch>
64+
<Route path="*" element={ <Navigate to="/error-404" /> } />
65+
</Routes>
6666
)
6767
}
6868

6969
//------ Custom Layout Parts --------
7070
export const RoutedNavbars = () => (
71-
<Switch>
71+
<Routes>
7272
<Route
73-
component={() => (
73+
path="/*"
74+
element={
7475
<GluuNavBar themeStyle="color" themeColor="primary" navStyle="accent" />
75-
)}
76+
}
7677
/>
77-
</Switch>
78+
</Routes>
7879
)
7980

8081
export const RoutedSidebars = () => (
81-
<Switch>
82-
<Route component={DefaultSidebar} />
83-
</Switch>
82+
<Routes>
83+
<Route path="/*" element={<DefaultSidebar />} />
84+
</Routes>
8485
)

‎admin-ui/app/utils/WithRouter.js

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import React from 'react'
2+
3+
import {
4+
useLocation,
5+
useNavigate,
6+
useParams,
7+
} from "react-router-dom";
8+
9+
export function useWithRouter(Component) {
10+
function ComponentWithRouterProp(props) {
11+
let location = useLocation();
12+
let navigate = useNavigate();
13+
let params = useParams();
14+
return (
15+
<Component
16+
{...props}
17+
{...{ location, navigate, params }}
18+
/>
19+
);
20+
}
21+
22+
return ComponentWithRouterProp;
23+
}

‎admin-ui/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -167,8 +167,8 @@
167167
"react-image-crop": "8.6.9",
168168
"react-month-picker": "^2.2.1",
169169
"react-responsive": "^9.0.0-beta.10",
170-
"react-router": "^5.2.0",
171-
"react-router-dom": "^5.2.0",
170+
"react-router": "^6.3.0",
171+
"react-router-dom": "^6.3.0",
172172
"react-spinners": "^0.11.0",
173173
"react-test-renderer": "^18.1.0",
174174
"react-text-mask": "^5.4.3",

‎admin-ui/plugins/admin/components/CustomScripts/CustomScriptAddPage.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { useEffect } from 'react'
22
import { connect } from 'react-redux'
3-
import { useHistory } from 'react-router-dom'
3+
import { useNavigate } from 'react-router-dom'
44
import { CardBody, Card } from 'Components'
55
import CustomScriptForm from './CustomScriptForm'
66
import { addCustomScript } from 'Plugins/admin/redux/actions/CustomScriptActions'
@@ -11,12 +11,12 @@ import applicationStyle from 'Routes/Apps/Gluu/styles/applicationstyle'
1111

1212
function CustomScriptAddPage({ scripts, dispatch, saveOperationFlag, errorInSaveOperationFlag }) {
1313
const userAction = {}
14-
const history = useHistory()
14+
const navigate =useNavigate()
1515
const { t } = useTranslation()
1616

1717
useEffect(() => {
1818
if (saveOperationFlag && !errorInSaveOperationFlag)
19-
history.push('/adm/scripts')
19+
navigate('/adm/scripts')
2020
}, [saveOperationFlag])
2121

2222
function handleSubmit(data) {

‎admin-ui/plugins/admin/components/CustomScripts/CustomScriptEditPage.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { useEffect } from 'react'
22
import { connect } from 'react-redux'
3-
import { useHistory } from 'react-router-dom'
3+
import { useNavigate } from 'react-router-dom'
44
import { CardBody, Card } from 'Components'
55
import GluuLoader from 'Routes/Apps/Gluu/GluuLoader'
66
import CustomScriptForm from './CustomScriptForm'
@@ -20,12 +20,12 @@ function CustomScriptEditPage({
2020
viewOnly,
2121
}) {
2222
const userAction = {}
23-
const history = useHistory()
23+
const navigate =useNavigate()
2424
const { t } = useTranslation()
2525

2626
useEffect(() => {
2727
if (saveOperationFlag && !errorInSaveOperationFlag)
28-
history.push('/adm/scripts')
28+
navigate('/adm/scripts')
2929
}, [saveOperationFlag])
3030

3131
function handleSubmit(data) {

‎admin-ui/plugins/admin/components/CustomScripts/ScriptListPage.js

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { useState, useEffect, useContext } from 'react'
22
import MaterialTable from '@material-table/core'
33
import { DeleteOutlined } from '@material-ui/icons'
4-
import { useHistory } from 'react-router-dom'
4+
import { useNavigate } from 'react-router-dom'
55
import { Paper } from '@material-ui/core'
66
import { Badge } from 'reactstrap'
77
import { connect } from 'react-redux'
@@ -42,7 +42,7 @@ import getThemeColor from 'Context/theme/config'
4242

4343
function ScriptListTable({ scripts, loading, dispatch, permissions }) {
4444
const { t } = useTranslation()
45-
const history = useHistory()
45+
const navigate =useNavigate()
4646
const userAction = {}
4747
const options = {}
4848
const myActions = []
@@ -165,12 +165,12 @@ function ScriptListTable({ scripts, loading, dispatch, permissions }) {
165165
)
166166
}
167167
function handleGoToCustomScriptAddPage() {
168-
return history.push('/adm/script/new')
168+
return navigate('/adm/script/new')
169169
}
170170
function handleGoToCustomScriptEditPage(row, edition) {
171171
dispatch(viewOnly(edition))
172172
dispatch(setCurrentItem(row))
173-
return history.push(`/adm/script/edit:` + row.inum)
173+
return navigate(`/adm/script/edit:` + row.inum)
174174
}
175175
function handleCustomScriptDelete(row) {
176176
setItem(row)
@@ -179,7 +179,7 @@ function ScriptListTable({ scripts, loading, dispatch, permissions }) {
179179
function onDeletionConfirmed(message) {
180180
buildPayload(userAction, message, item.inum)
181181
dispatch(deleteCustomScript(userAction))
182-
history.push('/adm/scripts')
182+
navigate('/adm/scripts')
183183
toggle()
184184
}
185185
return (

‎admin-ui/plugins/auth-server/components/Clients/ClientAddPage.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React, { useEffect } from 'react'
22
import { connect } from 'react-redux'
33
import ClientWizardForm from './ClientWizardForm'
44
import GluuLoader from 'Routes/Apps/Gluu/GluuLoader'
5-
import { useHistory } from 'react-router-dom'
5+
import { useNavigate } from 'react-router-dom'
66
import { addNewClientAction } from 'Plugins/auth-server/redux/actions/OIDCActions'
77
import { getOidcDiscovery } from 'Redux/actions/OidcDiscoveryActions'
88
import { getScopes } from 'Plugins/auth-server/redux/actions/ScopeActions'
@@ -24,7 +24,7 @@ function ClientAddPage({
2424
const userAction = {}
2525
const options = {}
2626
options['limit'] = parseInt(100000)
27-
const history = useHistory()
27+
const navigate =useNavigate()
2828
const { t } = useTranslation()
2929
useEffect(() => {
3030
buildPayload(userAction, '', options)
@@ -39,7 +39,7 @@ function ClientAddPage({
3939

4040
useEffect(() => {
4141
if (saveOperationFlag && !errorInSaveOperationFlag)
42-
history.push('/auth-server/clients')
42+
navigate('/auth-server/clients')
4343
}, [saveOperationFlag])
4444

4545
scopes = scopes.map((item) => ({ dn: item.dn, name: item.id }))

‎admin-ui/plugins/auth-server/components/Clients/ClientCibaParUmaPanel.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { useState, useEffect } from 'react'
22
import Box from '@material-ui/core/Box'
3-
import { useHistory } from 'react-router-dom'
3+
import { useNavigate } from 'react-router-dom'
44
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap'
55
import isEmpty from 'lodash/isEmpty'
66
import { useTranslation } from 'react-i18next'
@@ -42,7 +42,7 @@ function ClientCibaParUmaPanel({
4242
viewOnly,
4343
}) {
4444
const { t } = useTranslation()
45-
const history = useHistory()
45+
const navigate =useNavigate()
4646
const claim_uri_id = 'claim_uri_id'
4747
const cibaDeliveryModes = ['poll', 'push', 'ping']
4848
const claimRedirectURI = []
@@ -96,7 +96,7 @@ function ClientCibaParUmaPanel({
9696

9797
const handleScopeEdit = (scope) => {
9898
dispatch(setCurrentItem(scope))
99-
return history.push(`/auth-server/scope/edit:${scope.inum}`)
99+
return navigate(`/auth-server/scope/edit:${scope.inum}`)
100100
}
101101

102102
const handleClientEdit = (inum) => {
@@ -105,7 +105,7 @@ function ClientCibaParUmaPanel({
105105
setOpen(false)
106106
dispatch(viewOnly(true))
107107
setCurrentStep(sequence[0])
108-
return history.push(`/auth-server/client/edit:${inum?.substring(0, 4)}`)
108+
return navigate(`/auth-server/client/edit:${inum?.substring(0, 4)}`)
109109
}
110110

111111
useEffect(() => {

‎admin-ui/plugins/auth-server/components/Clients/ClientEditPage.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { useEffect } from 'react'
22
import ClientWizardForm from './ClientWizardForm'
33
import GluuLoader from 'Routes/Apps/Gluu/GluuLoader'
4-
import { useHistory } from 'react-router-dom'
4+
import { useNavigate } from 'react-router-dom'
55
import { connect } from 'react-redux'
66
import { editClient } from 'Plugins/auth-server/redux/actions/OIDCActions'
77
import { getScopes, getScopeByCreator } from 'Plugins/auth-server/redux/actions/ScopeActions'
@@ -30,7 +30,7 @@ function ClientEditPage({
3030
const options = {}
3131
options['limit'] = parseInt(100000)
3232
const { t } = useTranslation()
33-
const history = useHistory()
33+
const navigate =useNavigate()
3434

3535
useEffect(() => {
3636
dispatch(getScopeByCreator({ inum: clientData.inum }))
@@ -48,7 +48,7 @@ function ClientEditPage({
4848
}, [])
4949
useEffect(() => {
5050
if (saveOperationFlag && !errorInSaveOperationFlag)
51-
history.push('/auth-server/clients')
51+
navigate('/auth-server/clients')
5252
}, [saveOperationFlag])
5353

5454
if (!clientData.attributes) {

‎admin-ui/plugins/auth-server/components/Clients/ClientListPage.js

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { useState, useEffect, useContext } from 'react'
22
import MaterialTable from '@material-table/core'
33
import { DeleteOutlined } from '@material-ui/icons'
4-
import { useHistory, useLocation } from 'react-router-dom'
4+
import { useNavigate, useLocation } from 'react-router-dom'
55
import { connect } from 'react-redux'
66
import { Paper } from '@material-ui/core'
77
import { Card, CardBody, Badge } from 'Components'
@@ -46,7 +46,7 @@ function ClientListPage({ clients, permissions, scopes, loading, dispatch }) {
4646
const userAction = {}
4747
const options = {}
4848
const myActions = []
49-
const history = useHistory()
49+
const navigate =useNavigate()
5050
const { search } = useLocation()
5151
const pageSize = localStorage.getItem('paggingSize') || 10
5252
const theme = useContext(ThemeContext)
@@ -206,10 +206,10 @@ function ClientListPage({ clients, permissions, scopes, loading, dispatch }) {
206206
function handleGoToClientEditPage(row, edition) {
207207
dispatch(viewOnly(edition))
208208
dispatch(setCurrentItem(row))
209-
return history.push(`/auth-server/client/edit:` + row.inum.substring(0, 4))
209+
return navigate(`/auth-server/client/edit:` + row.inum.substring(0, 4))
210210
}
211211
function handleGoToClientAddPage() {
212-
return history.push('/auth-server/client/new')
212+
return navigate('/auth-server/client/new')
213213
}
214214
function handleClientDelete(row) {
215215
dispatch(setCurrentItem(row))
@@ -227,7 +227,7 @@ function ClientListPage({ clients, permissions, scopes, loading, dispatch }) {
227227
function onDeletionConfirmed(message) {
228228
buildPayload(userAction, message, item.inum)
229229
dispatch(deleteClient(userAction))
230-
history.push('/auth-server/clients')
230+
navigate('/auth-server/clients')
231231
toggle()
232232
}
233233

0 commit comments

Comments
 (0)