feat(admin-ui): migration from react-router v5 to v6 #422

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

@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import { Helmet } from 'react-helmet'
-import { withRouter } from 'react-router-dom'
+import { useWithRouter as withRouter } from 'Utils/WithRouter'
 import {
   filter,
   forOwn,

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Route } from 'react-router'
+import { Route } from 'react-router-dom'
 
 export const RoutesRecursiveWrapper = ({ item }) => {
 
@@ -11,7 +11,7 @@ export const RoutesRecursiveWrapper = ({ item }) => {
       children.map((child, i) => (<RoutesRecursiveWrapper key={i} item={child} />))
 
     ) : (!!path &&
-    <Route component={component} path={path} />
+    <Route element={<component />} path={path} />
     )
   )
 

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

@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { withRouter } from 'react-router-dom'
+import { useWithRouter as withRouter } from 'Utils/WithRouter'
 import find from 'lodash/find'
 import includes from 'lodash/includes'
 import mapValues from 'lodash/mapValues'

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

@@ -1,7 +1,7 @@
 import React, { useRef, useState } from 'react'
 import IdleTimer from 'react-idle-timer'
 import SessionTimeoutDialog from './GluuSessionTimeoutDialog'
-import { useHistory } from 'react-router-dom'
+import { useNavigate } from 'react-router-dom'
 let countdownInterval
 let timeout
 
@@ -10,7 +10,7 @@ const SessionTimeout = ({ isAuthenticated }) => {
   const [timeoutCountdown, setTimeoutCountdown] = useState(0)
   const idleTimer = useRef(null)
   const SESSION_TIMEOUT_IN_MINUTES = process.env.SESSION_TIMEOUT_IN_MINUTES
-  const history = useHistory()
+  const navigate =useNavigate()
 
   const clearSessionTimeout = () => {
     clearTimeout(timeout)
@@ -25,7 +25,7 @@ const SessionTimeout = ({ isAuthenticated }) => {
       setTimeoutModalOpen(false)
       clearSessionInterval()
       clearSessionTimeout()
-      history.push('/logout')
+      navigate('/logout')
     } catch (err) {
       console.error(err)
     }

admin-ui/app/routes/index.js

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react'
-import { Route, Switch, Redirect } from 'react-router'
+import { Route, Routes, Navigate } from 'react-router-dom'
 import { useSelector } from 'react-redux'
 
 // ----------- Pages Imports ---------------
@@ -34,51 +34,52 @@ export const RoutedContent = () => {
   }, [])
 
   return (
-    <Switch>
-      <Redirect from="/" to="/home/dashboard" exact />
-      <Route path="/home/dashboard" exact component={DashboardPage} />
-      <Route path="/home/health" exact component={HealthPage} />
-      <Route path="/home/licenseDetails" exact component={LicenseDetailsPage} />
+    <Routes>
+      <Route path="/home/dashboard" element={<DashboardPage />} />
+      <Route path="/" element={ <Navigate to="/home/dashboard" /> } />
+      <Route path="/home/health" element={<HealthPage />} />
+      <Route path="/home/licenseDetails" element={<LicenseDetailsPage />} />
       {/*    Layouts     */}
-      <Route path="/layouts/navbar" component={NavbarOnly} />
-      <Route path="/layouts/sidebar" component={SidebarDefault} />
-      <Route path="/layouts/sidebar-a" component={SidebarA} />
+      <Route path="/layouts/navbar" element={<NavbarOnly />} />
+      <Route path="/layouts/sidebar" element={<SidebarDefault />} />
+      <Route path="/layouts/sidebar-a" element={<SidebarA />} />
       <Route
         path="/layouts/sidebar-with-navbar"
-        component={SidebarWithNavbar}
+        element={<SidebarWithNavbar />}
       />
 
       {/* -------- Plugins ---------*/}
       {pluginMenus.map(
         (item, key) =>
           hasPermission(scopes, item.permission) && (
-            <Route key={key} path={item.path} component={item.component} />
+            <Route key={key} path={item.path} element={<item.component />} />
           ),
       )}
       {/*    Pages Routes    */}
-      <Route component={ProfilePage} path="/profile" />
-      <Route component={ByeBye} path="/logout" />
-      <Route component={Gluu404Error} path="/error-404" />
+      <Route element={<ProfilePage />} path="/profile" />
+      <Route element={<ByeBye />} path="/logout" />
+      <Route element={<Gluu404Error />} path="/error-404" />
 
       {/*    404    */}
-      <Redirect to="/error-404" />
-    </Switch>
+      <Route path="*" element={ <Navigate to="/error-404" /> } />
+    </Routes>
   )
 }
 
 //------ Custom Layout Parts --------
 export const RoutedNavbars = () => (
-  <Switch>
+  <Routes>
     <Route
-      component={() => (
+    path="/*"
+      element={
         <GluuNavBar themeStyle="color" themeColor="primary" navStyle="accent" />
-      )}
+      }
     />
-  </Switch>
+  </Routes>
 )
 
 export const RoutedSidebars = () => (
-  <Switch>
-    <Route component={DefaultSidebar} />
-  </Switch>
+  <Routes>
+    <Route path="/*" element={<DefaultSidebar />} />
+  </Routes>
 )

admin-ui/app/utils/WithRouter.js

@@ -0,0 +1,23 @@
+import React from 'react'
+
+import {
+    useLocation,
+    useNavigate,
+    useParams,
+  } from "react-router-dom";
+
+export function useWithRouter(Component) {
+    function ComponentWithRouterProp(props) {
+      let location = useLocation();
+      let navigate = useNavigate();
+      let params = useParams();
+      return (
+        <Component
+          {...props}
+          {...{ location, navigate, params }}
+        />
+      );
+    }
+
+    return ComponentWithRouterProp;
+  }

admin-ui/package.json

@@ -167,8 +167,8 @@
     "react-image-crop": "8.6.9",
     "react-month-picker": "^2.2.1",
     "react-responsive": "^9.0.0-beta.10",
-    "react-router": "^5.2.0",
-    "react-router-dom": "^5.2.0",
+    "react-router": "^6.3.0",
+    "react-router-dom": "^6.3.0",
     "react-spinners": "^0.11.0",
     "react-test-renderer": "^18.1.0",
     "react-text-mask": "^5.4.3",

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

@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react'
 import { connect } from 'react-redux'
-import { useHistory } from 'react-router-dom'
+import { useNavigate } from 'react-router-dom'
 import { CardBody, Card } from 'Components'
 import CustomScriptForm from './CustomScriptForm'
 import { addCustomScript } from 'Plugins/admin/redux/actions/CustomScriptActions'
@@ -11,12 +11,12 @@ import applicationStyle from 'Routes/Apps/Gluu/styles/applicationstyle'
 
 function CustomScriptAddPage({ scripts, dispatch, saveOperationFlag, errorInSaveOperationFlag }) {
   const userAction = {}
-  const history = useHistory()
+  const navigate =useNavigate()
   const { t } = useTranslation()
 
   useEffect(() => {
     if (saveOperationFlag && !errorInSaveOperationFlag)
-      history.push('/adm/scripts')
+      navigate('/adm/scripts')
   }, [saveOperationFlag])
 
   function handleSubmit(data) {

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

@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react'
 import { connect } from 'react-redux'
-import { useHistory } from 'react-router-dom'
+import { useNavigate } from 'react-router-dom'
 import { CardBody, Card } from 'Components'
 import GluuLoader from 'Routes/Apps/Gluu/GluuLoader'
 import CustomScriptForm from './CustomScriptForm'
@@ -20,12 +20,12 @@ function CustomScriptEditPage({
   viewOnly,
 }) {
   const userAction = {}
-  const history = useHistory()
+  const navigate =useNavigate()
   const { t } = useTranslation()
 
   useEffect(() => {
     if (saveOperationFlag && !errorInSaveOperationFlag)
-      history.push('/adm/scripts')
+      navigate('/adm/scripts')
   }, [saveOperationFlag])
 
   function handleSubmit(data) {

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

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useContext } from 'react'
 import MaterialTable from '@material-table/core'
 import { DeleteOutlined } from '@material-ui/icons'
-import { useHistory } from 'react-router-dom'
+import { useNavigate } from 'react-router-dom'
 import { Paper } from '@material-ui/core'
 import { Badge } from 'reactstrap'
 import { connect } from 'react-redux'
@@ -42,7 +42,7 @@ import getThemeColor from 'Context/theme/config'
 
 function ScriptListTable({ scripts, loading, dispatch, permissions }) {
   const { t } = useTranslation()
-  const history = useHistory()
+  const navigate =useNavigate()
   const userAction = {}
   const options = {}
   const myActions = []
@@ -165,12 +165,12 @@ function ScriptListTable({ scripts, loading, dispatch, permissions }) {
     )
   }
   function handleGoToCustomScriptAddPage() {
-    return history.push('/adm/script/new')
+    return navigate('/adm/script/new')
   }
   function handleGoToCustomScriptEditPage(row, edition) {
     dispatch(viewOnly(edition))
     dispatch(setCurrentItem(row))
-    return history.push(`/adm/script/edit:` + row.inum)
+    return navigate(`/adm/script/edit:` + row.inum)
   }
   function handleCustomScriptDelete(row) {
     setItem(row)
@@ -179,7 +179,7 @@ function ScriptListTable({ scripts, loading, dispatch, permissions }) {
   function onDeletionConfirmed(message) {
     buildPayload(userAction, message, item.inum)
     dispatch(deleteCustomScript(userAction))
-    history.push('/adm/scripts')
+    navigate('/adm/scripts')
     toggle()
   }
   return (

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

@@ -2,7 +2,7 @@ import React, { useEffect } from 'react'
 import { connect } from 'react-redux'
 import ClientWizardForm from './ClientWizardForm'
 import GluuLoader from 'Routes/Apps/Gluu/GluuLoader'
-import { useHistory } from 'react-router-dom'
+import { useNavigate } from 'react-router-dom'
 import { addNewClientAction } from 'Plugins/auth-server/redux/actions/OIDCActions'
 import { getOidcDiscovery } from 'Redux/actions/OidcDiscoveryActions'
 import { getScopes } from 'Plugins/auth-server/redux/actions/ScopeActions'
@@ -24,7 +24,7 @@ function ClientAddPage({
   const userAction = {}
   const options = {}
   options['limit'] = parseInt(100000)
-  const history = useHistory()
+  const navigate =useNavigate()
   const { t } = useTranslation()
   useEffect(() => {
     buildPayload(userAction, '', options)
@@ -39,7 +39,7 @@ function ClientAddPage({
 
   useEffect(() => {
     if (saveOperationFlag && !errorInSaveOperationFlag)
-      history.push('/auth-server/clients')
+      navigate('/auth-server/clients')
   }, [saveOperationFlag])
 
   scopes = scopes.map((item) => ({ dn: item.dn, name: item.id }))

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

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react'
 import Box from '@material-ui/core/Box'
-import { useHistory } from 'react-router-dom'
+import { useNavigate } from 'react-router-dom'
 import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap'
 import isEmpty from 'lodash/isEmpty'
 import { useTranslation } from 'react-i18next'
@@ -42,7 +42,7 @@ function ClientCibaParUmaPanel({
   viewOnly,
 }) {
   const { t } = useTranslation()
-  const history = useHistory()
+  const navigate =useNavigate()
   const claim_uri_id = 'claim_uri_id'
   const cibaDeliveryModes = ['poll', 'push', 'ping']
   const claimRedirectURI = []
@@ -96,7 +96,7 @@ function ClientCibaParUmaPanel({
 
   const handleScopeEdit = (scope) => {
     dispatch(setCurrentItem(scope))
-    return history.push(`/auth-server/scope/edit:${scope.inum}`)
+    return navigate(`/auth-server/scope/edit:${scope.inum}`)
   }
 
   const handleClientEdit = (inum) => {
@@ -105,7 +105,7 @@ function ClientCibaParUmaPanel({
     setOpen(false)
     dispatch(viewOnly(true))
     setCurrentStep(sequence[0])
-    return history.push(`/auth-server/client/edit:${inum?.substring(0, 4)}`)
+    return navigate(`/auth-server/client/edit:${inum?.substring(0, 4)}`)
   }
 
   useEffect(() => {

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

@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react'
 import ClientWizardForm from './ClientWizardForm'
 import GluuLoader from 'Routes/Apps/Gluu/GluuLoader'
-import { useHistory } from 'react-router-dom'
+import { useNavigate } from 'react-router-dom'
 import { connect } from 'react-redux'
 import { editClient } from 'Plugins/auth-server/redux/actions/OIDCActions'
 import { getScopes, getScopeByCreator } from 'Plugins/auth-server/redux/actions/ScopeActions'
@@ -30,7 +30,7 @@ function ClientEditPage({
   const options = {}
   options['limit'] = parseInt(100000)
   const { t } = useTranslation()
-  const history = useHistory()
+  const navigate =useNavigate()
 
   useEffect(() => {
     dispatch(getScopeByCreator({ inum: clientData.inum }))
@@ -48,7 +48,7 @@ function ClientEditPage({
   }, [])
   useEffect(() => {
     if (saveOperationFlag && !errorInSaveOperationFlag)
-      history.push('/auth-server/clients')
+      navigate('/auth-server/clients')
   }, [saveOperationFlag])
 
   if (!clientData.attributes) {

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

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useContext } from 'react'
 import MaterialTable from '@material-table/core'
 import { DeleteOutlined } from '@material-ui/icons'
-import { useHistory, useLocation } from 'react-router-dom'
+import { useNavigate, useLocation } from 'react-router-dom'
 import { connect } from 'react-redux'
 import { Paper } from '@material-ui/core'
 import { Card, CardBody, Badge } from 'Components'
@@ -46,7 +46,7 @@ function ClientListPage({ clients, permissions, scopes, loading, dispatch }) {
   const userAction = {}
   const options = {}
   const myActions = []
-  const history = useHistory()
+  const navigate =useNavigate()
   const { search } = useLocation()
   const pageSize = localStorage.getItem('paggingSize') || 10
   const theme = useContext(ThemeContext)
@@ -206,10 +206,10 @@ function ClientListPage({ clients, permissions, scopes, loading, dispatch }) {
   function handleGoToClientEditPage(row, edition) {
     dispatch(viewOnly(edition))
     dispatch(setCurrentItem(row))
-    return history.push(`/auth-server/client/edit:` + row.inum.substring(0, 4))
+    return navigate(`/auth-server/client/edit:` + row.inum.substring(0, 4))
   }
   function handleGoToClientAddPage() {
-    return history.push('/auth-server/client/new')
+    return navigate('/auth-server/client/new')
   }
   function handleClientDelete(row) {
     dispatch(setCurrentItem(row))
@@ -227,7 +227,7 @@ function ClientListPage({ clients, permissions, scopes, loading, dispatch }) {
   function onDeletionConfirmed(message) {
     buildPayload(userAction, message, item.inum)
     dispatch(deleteClient(userAction))
-    history.push('/auth-server/clients')
+    navigate('/auth-server/clients')
     toggle()
   }