Some fixes for routing issues in console due to v6 upgrade

wso2 · Jun 4, 2024 · ce3820c · ce3820c
1 parent 70cfbde
commit ce3820c
Show file tree

Hide file tree

Showing 19 changed files with 1,166 additions and 2,076 deletions.
diff --git a/apps/console/package.json b/apps/console/package.json
@@ -67,7 +67,6 @@
         "country-language": "^0.1.7",
         "deep-equal": "^2.2.2",
         "file-saver": "^2.0.5",
-        "history": "^4.9.0",
         "html-react-parser": "^2.0.0",
         "i18next": "^21.9.1",
         "i18next-browser-languagedetector": "^6.1.5",
@@ -86,7 +85,6 @@
         "react-joyride": "^2.3.0",
         "react-notification-system": "^0.4.0",
         "react-redux": "^7.2.9",
-        "react-router-dom": "^4.3.1",
         "reactflow": "11.7.2",
         "recharts": "^2.6.2",
         "reduce-reducers": "^1.0.4",
@@ -114,12 +112,8 @@
         "@types/lodash-es": "^4.17.4",
         "@types/node": "^13.9.2",
         "@types/node-forge": "^0.9.3",
-        "@types/react": "^18.0.18",
-        "@types/react-dom": "^18.0.6",
         "@types/react-notification-system": "0.2.39",
         "@types/react-redux": "^7.1.25",
-        "@types/react-router": "^5.1.18",
-        "@types/react-router-dom": "^5.1.3",
         "@types/reactour": "^1.18.1",
         "@types/redux-mock-store": "^1.0.2",
         "@types/testing-library__jest-dom": "^5.14.3",

diff --git a/apps/console/src/app.tsx b/apps/console/src/app.tsx
diff --git a/apps/myaccount/src/app.tsx b/apps/myaccount/src/app.tsx
@@ -40,7 +40,6 @@ import { Navigate, Route, Routes, useNavigate } from "react-router-dom";
 import { PreLoader } from "./components";
 import { getBaseRoutes } from "./configs";
 import { AppConstants } from "./constants";
-import { history } from "./helpers";
 import {
     ConfigReducerStateInterface,
     FeatureConfigInterface

diff --git a/features/admin.core.v1/components/header.tsx b/features/admin.core.v1/components/header.tsx
@@ -490,9 +490,6 @@ export const Header: FunctionComponent<HeaderPropsInterface> = (
                         ? (
                             <MenuItem
                                 color="inherit"
-                                key={ t(
-                                    "myAccount:components.header.appSwitch.console.name"
-                                ) }
                                 onClick={ () => {
                                     eventPublisher.publish(
                                         "console-click-visit-my-account"

diff --git a/features/admin.core.v1/components/index.ts b/features/admin.core.v1/components/index.ts
@@ -20,7 +20,6 @@ export * from "./advanced-search-with-basic-filters";
 export * from "./authenticator-accordion";
 export * from "./footer";
 export * from "./header";
-export * from "./protected-route";
 export * from "./upload-certificate";
 export * from "./groups";
 export * from "./roles";

diff --git a/features/admin.core.v1/components/protected-route.tsx b/features/admin.core.v1/components/protected-route.tsx
diff --git a/features/admin.core.v1/configs/routes.tsx b/features/admin.core.v1/configs/routes.tsx
@@ -1714,7 +1714,7 @@ export const getBaseRoutes = (): RouteInterface[] => {
             icon: null,
             id: "app",
             name: "App",
-            path: AppConstants.getPaths().get("ROOT"),
+            path: `${AppConstants.getPaths().get("ROOT")}*`,
             protected: false,
             showOnSidePanel: false
         }

diff --git a/features/admin.layouts.v1/app.tsx b/features/admin.layouts.v1/app.tsx
@@ -17,7 +17,6 @@
  */
 
 import { AppState, AppUtils, PreLoader } from "@wso2is/admin.core.v1";
-import { ProtectedRoute } from "@wso2is/admin.core.v1/components";
 import { getAppLayoutRoutes, getEmptyPlaceholderIllustrations } from "@wso2is/admin.core.v1/configs";
 import { AppConstants } from "@wso2is/admin.core.v1/constants";
 import { store } from "@wso2is/admin.core.v1/store";
@@ -32,7 +31,7 @@ import {
 import React, { FunctionComponent, ReactElement, Suspense, useEffect, useState } from "react";
 import { Trans, useTranslation } from "react-i18next";
 import { useSelector } from "react-redux";
-import { Redirect, Route, RouteComponentProps, Switch } from "react-router-dom";
+import { Navigate, Route, Routes } from "react-router-dom";
 
 /**
  * Implementation of the Main app layout skeleton.
@@ -48,6 +47,7 @@ export const AppLayout: FunctionComponent<Record<string, unknown>> = (): ReactEl
     const isCookieConsentBannerEnabled: boolean = useSelector((state: AppState) => {
         return state.config.ui.isCookieConsentBannerEnabled;
     });
+    const isAuthenticated: boolean = useSelector((state: AppState) => state.auth.isAuthenticated);
 
     /**
      * Listen for base name changes and updated the layout routes.
@@ -78,35 +78,35 @@ export const AppLayout: FunctionComponent<Record<string, unknown>> = (): ReactEl
                 ) }
             >
                 <Suspense fallback={ <PreLoader /> }>
-                    <Switch>
+                    <Routes>
                         {
                             appRoutes.map((route: RouteInterface, index: number) => (
                                 route.redirectTo
-                                    ? <Redirect to={ route.redirectTo } key={ index } />
+                                    ? <Route path="*" element={ <Navigate to={ route.redirectTo } /> } key={ index }/>
                                     : route.protected
                                         ? (
-                                            <ProtectedRoute
-                                                component={ route.component ? route.component : null }
+                                            <Route
+                                                element={
+                                                    isAuthenticated && route.component ? <route.component /> : null
+                                                }
                                                 path={ route.path }
                                                 key={ index }
-                                                exact={ route.exact }
                                             />
                                         )
                                         : (
                                             <Route
                                                 path={ route.path }
-                                                render={ (renderProps: RouteComponentProps) =>
+                                                element={
                                                     route.component
-                                                        ? <route.component { ...renderProps } />
+                                                        ? <route.component />
                                                         : null
                                                 }
                                                 key={ index }
-                                                exact={ route.exact }
                                             />
                                         )
                             ))
                         }
-                    </Switch>
+                    </Routes>
                 </Suspense>
                 {
                     isCookieConsentBannerEnabled && (

diff --git a/features/admin.layouts.v1/auth.tsx b/features/admin.layouts.v1/auth.tsx
@@ -16,15 +16,14 @@
  * under the License.
  */
 
-import { PreLoader } from "@wso2is/admin.core.v1";
-import { ProtectedRoute } from "@wso2is/admin.core.v1/components";
+import { AppState, PreLoader } from "@wso2is/admin.core.v1";
 import { getAuthLayoutRoutes } from "@wso2is/admin.core.v1/configs";
 import { AppConstants } from "@wso2is/admin.core.v1/constants";
 import { RouteInterface } from "@wso2is/core/models";
 import { AuthLayout as AuthLayoutSkeleton } from "@wso2is/react-components";
 import React, { FunctionComponent, ReactElement, Suspense, useEffect, useState } from "react";
-import { StaticContext } from "react-router";
-import { Redirect, Route, RouteComponentProps, Switch } from "react-router-dom";
+import { useSelector } from "react-redux";
+import { Navigate, Route, Routes } from "react-router-dom";
 
 /**
  * Auth layout props interface.
@@ -52,6 +51,8 @@ export const AuthLayout: FunctionComponent<AuthLayoutPropsInterface> = (
 
     const [ authLayoutRoutes, setAuthLayoutRoutes ] = useState<RouteInterface[]>(getAuthLayoutRoutes());
 
+    const isAuthenticated: boolean = useSelector((state: AppState) => state.auth.isAuthenticated);
+
     /**
      * Listen for base name changes and updated the layout routes.
      */
@@ -62,37 +63,33 @@ export const AuthLayout: FunctionComponent<AuthLayoutPropsInterface> = (
     return (
         <AuthLayoutSkeleton fluid={ fluid }>
             <Suspense fallback={ <PreLoader /> }>
-                <Switch>
+                <Routes>
                     {
                         authLayoutRoutes.map((route: RouteInterface, index: number) => (
                             route.redirectTo
-                                ? <Redirect key={ index } to={ route.redirectTo } />
+                                ? <Route path="*" element={ <Navigate to={ route.redirectTo } /> } key={ index } />
                                 : route.protected
                                     ? (
-                                        <ProtectedRoute
-                                            component={ route.component ? route.component : null }
+                                        <Route
+                                            element={ isAuthenticated && route.component ? route.component : null }
                                             path={ route.path }
                                             key={ index }
-                                            exact={ route.exact }
                                         />
                                     )
                                     : (
                                         <Route
                                             path={ route.path }
-                                            render={ (renderProps: RouteComponentProps<{
-                                                [x: string]: string;
-                                            }, StaticContext, unknown>) =>
+                                            element={
                                                 route.component
-                                                    ? <route.component { ...renderProps } />
+                                                    ? <route.component />
                                                     : null
                                             }
                                             key={ index }
-                                            exact={ route.exact }
                                         />
                                     )
                         ))
                     }
-                </Switch>
+                </Routes>
             </Suspense>
         </AuthLayoutSkeleton>
     );

diff --git a/features/admin.layouts.v1/default.tsx b/features/admin.layouts.v1/default.tsx
@@ -21,7 +21,6 @@ import {
     AppState,
     Footer,
     Header,
-    ProtectedRoute,
     UIConstants,
     getDefaultLayoutRoutes
 } from "@wso2is/admin.core.v1";
@@ -43,8 +42,7 @@ import React, {
 } from "react";
 import { System } from "react-notification-system";
 import { useDispatch, useSelector } from "react-redux";
-import { StaticContext } from "react-router";
-import { Redirect, Route, RouteComponentProps, Switch } from "react-router-dom";
+import { Navigate, Route, Routes } from "react-router-dom";
 import { Dispatch } from "redux";
 
 /**
@@ -80,6 +78,7 @@ export const DefaultLayout: FunctionComponent<DefaultLayoutPropsInterface> = (
     const alert: AlertInterface = useSelector((state: AppState) => state.global.alert);
     const alertSystem: System = useSelector((state: AppState) => state.global.alertSystem);
     const isAJAXTopLoaderVisible: boolean = useSelector((state: AppState) => state.global.isAJAXTopLoaderVisible);
+    const isAuthenticated: boolean = useSelector((state: AppState) => state.auth.isAuthenticated);
 
     const [ defaultLayoutRoutes, setDefaultLayoutRoutes ] = useState<RouteInterface[]>(getDefaultLayoutRoutes());
 
@@ -128,38 +127,32 @@ export const DefaultLayout: FunctionComponent<DefaultLayoutPropsInterface> = (
             ) }
         >
             <Suspense fallback={ <ContentLoader dimmer={ false } /> }>
-                <Switch>
+                <Routes>
                     {
                         defaultLayoutRoutes.map((route: RouteInterface, index: number) => (
                             route.redirectTo
-                                ? <Redirect to={ route.redirectTo } key={ index } />
+                                ? <Route path="*" element={ <Navigate to={ route.redirectTo } /> } key={ index } />
                                 : route.protected
                                     ? (
-                                        <ProtectedRoute
-                                            component={ route.component ? route.component : null }
+                                        <Route
+                                            element={ isAuthenticated && route.component ? <route.component /> : null }
                                             path={ route.path }
                                             key={ index }
-                                            exact={ route.exact }
                                         />
                                     )
                                     : (
                                         <Route
                                             path={ route.path }
-                                            render={
-                                                (renderProps: RouteComponentProps<{
-                                                    [x: string]: string; },
-                                                    StaticContext, unknown>
-                                                ) => route.component
-                                                    ? <route.component { ...renderProps } />
-                                                    : null
+                                            element={ route.component
+                                                ? <route.component />
+                                                : null
                                             }
                                             key={ index }
-                                            exact={ route.exact }
                                         />
                                     )
                         ))
                     }
-                </Switch>
+                </Routes>
             </Suspense>
         </DefaultLayoutSkeleton>
     );