diff --git a/apps/myaccount/src/configs/routes.tsx b/apps/myaccount/src/configs/routes.tsx index 2ce47c3b064..279dda34a8d 100644 --- a/apps/myaccount/src/configs/routes.tsx +++ b/apps/myaccount/src/configs/routes.tsx @@ -21,7 +21,6 @@ import { RouteInterface } from "@wso2is/core/models"; import React,{ FunctionComponent, lazy } from "react"; import { AppConstants } from "../constants"; import { AppLayout, AuthLayout, DashboardLayout, DefaultLayout, ErrorLayout } from "../layouts"; -import OverviewPage from "../pages/overview"; /** * Get default page layout routes. diff --git a/features/admin.core.v1/configs/routes.tsx b/features/admin.core.v1/configs/routes.tsx index 5f8ad9941a8..a30c10b21b8 100644 --- a/features/admin.core.v1/configs/routes.tsx +++ b/features/admin.core.v1/configs/routes.tsx @@ -1685,7 +1685,7 @@ export const getAppLayoutRoutes = (): 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.core.v1/package.json b/features/admin.core.v1/package.json index 75335d8c91a..76d449b89ef 100644 --- a/features/admin.core.v1/package.json +++ b/features/admin.core.v1/package.json @@ -75,6 +75,8 @@ "react-joyride": "^2.3.0", "react-notification-system": "^0.4.0", "react-redux": "^7.2.9", + "react-router": "^6.23.1", + "react-router-dom": "^6.23.1", "reactflow": "^11.7.2", "recharts": "^2.6.2", "reduce-reducers": "^1.0.4", @@ -112,8 +114,11 @@ "@types/lodash-es": "^4.17.4", "@types/node": "^13.9.2", "@types/node-forge": "^0.9.3", + "@types/react": "18.2.22", + "@types/react-dom": "18.2.7", "@types/react-notification-system": "0.2.39", "@types/react-redux": "^7.1.25", + "@types/react-router-dom": "5.3.3", "@types/reactour": "^1.18.1", "@types/redux-mock-store": "^1.0.2", "@types/testing-library__jest-dom": "^5.14.3", diff --git a/features/admin.core.v1/pages/errors/storage-disabled.tsx b/features/admin.core.v1/pages/errors/storage-disabled.tsx index edf3a615eb4..7571c891052 100644 --- a/features/admin.core.v1/pages/errors/storage-disabled.tsx +++ b/features/admin.core.v1/pages/errors/storage-disabled.tsx @@ -19,7 +19,6 @@ import { EmptyPlaceholder } from "@wso2is/react-components"; import React, { FunctionComponent, ReactElement, useEffect } from "react"; import { useTranslation } from "react-i18next"; -import { RouteComponentProps } from "react-router-dom"; import { getEmptyPlaceholderIllustrations } from "../../configs"; import { AppConstants } from "../../constants"; import { history } from "../../helpers"; @@ -27,10 +26,10 @@ import { history } from "../../helpers"; /** * Storage disabled error page. * - * @param {RouteComponentProps} props - Props injected to the component. + * @param props - Props injected to the component. * @return {React.ReactElement} */ -const SessionStorageDisabled: FunctionComponent = (): ReactElement => { +const SessionStorageDisabled: FunctionComponent = (): ReactElement => { const { t } = useTranslation(); diff --git a/features/admin.core.v1/pages/errors/unauthorized.tsx b/features/admin.core.v1/pages/errors/unauthorized.tsx index c7469820e69..fc9c420e10d 100644 --- a/features/admin.core.v1/pages/errors/unauthorized.tsx +++ b/features/admin.core.v1/pages/errors/unauthorized.tsx @@ -19,7 +19,7 @@ import { EmptyPlaceholder, LinkButton } from "@wso2is/react-components"; import React, { FunctionComponent, ReactElement, ReactNode } from "react"; import { useTranslation } from "react-i18next"; -import { Link, RouteComponentProps } from "react-router-dom"; +import { Link, useLocation } from "react-router-dom"; import { getEmptyPlaceholderIllustrations } from "../../configs"; import { AppConstants } from "../../constants"; @@ -29,11 +29,9 @@ import { AppConstants } from "../../constants"; * @param {RouteComponentProps} props - Props injected to the component. * @return {React.ReactElement} */ -const UnauthorizedErrorPage: FunctionComponent = ( - props: RouteComponentProps -): ReactElement => { +const UnauthorizedErrorPage: FunctionComponent = (): ReactElement => { - const { location } = props; + const location = useLocation(); const error = new URLSearchParams(location.search).get("error"); diff --git a/features/admin.layouts.v1/app.tsx b/features/admin.layouts.v1/app.tsx index eed360a6d29..425751047f3 100644 --- a/features/admin.layouts.v1/app.tsx +++ b/features/admin.layouts.v1/app.tsx @@ -31,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 { Navigate, Route, Routes } from "react-router-dom"; +import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom"; /** * Implementation of the Main app layout skeleton. @@ -78,35 +78,41 @@ export const AppLayout: FunctionComponent> = (): ReactEl ) } > }> - - { - appRoutes.map((route: RouteInterface, index: number) => ( - route.redirectTo - ? } key={ index }/> - : route.protected - ? ( - : null - } - path={ route.path } - key={ index } - /> - ) - : ( - - : null - } - key={ index } - /> - ) - )) - } - + + + { + appRoutes.map((route: RouteInterface, index: number) => ( + route.redirectTo + ? ( } + key={ index } + />) + : route.protected + ? ( + : null + } + path={ route.path } + key={ index } + /> + ) + : ( + + : null + } + key={ index } + /> + ) + )) + } + + { isCookieConsentBannerEnabled && ( diff --git a/features/admin.views.v1/app.tsx b/features/admin.views.v1/app.tsx index 865a37212c7..88f94ac93a3 100644 --- a/features/admin.views.v1/app.tsx +++ b/features/admin.views.v1/app.tsx @@ -77,7 +77,7 @@ import React, { import { useTranslation } from "react-i18next"; import { System } from "react-notification-system"; import { useDispatch, useSelector } from "react-redux"; -import { Navigate, Route, Routes, useLocation } from "react-router-dom"; +import { Navigate, Route, Routes, useLocation, useNavigate } from "react-router-dom"; import { Action } from "reduce-reducers"; import { ThunkDispatch } from "redux-thunk"; @@ -90,6 +90,7 @@ import { ThunkDispatch } from "redux-thunk"; */ export const AppView: FunctionComponent = (): ReactElement => { const location = useLocation() + const navigate = useNavigate(); const dispatch: ThunkDispatch = useDispatch(); const { t } = useTranslation(); @@ -352,12 +353,12 @@ export const AppView: FunctionComponent = (): ReactElement => { { ...subRoute.icon } />, label: t(subRoute.name), - onClick: () => history.push(subRoute.path), + onClick: () => navigate(subRoute.path), selected: subRoute.selected ?? selectedRoute?.path === subRoute.path, tag: t(subRoute.featureStatusLabel) })), label: t(route.name), - onClick: () => history.push(route.path), + onClick: () => navigate(route.path), selected: route.selected ?? isRouteActive(route.path), tag: t(route.featureStatusLabel) })) @@ -372,7 +373,8 @@ export const AppView: FunctionComponent = (): ReactElement => { * @returns if the navigation item is active. */ const isRouteActive = (routePath: string): boolean => { - return history.location.pathname === routePath; + console.log(location.pathname === window.location.pathname) + return location.pathname === window.location.pathname; }; return ( diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e2e9b303f89..124edeaf865 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -5204,6 +5204,12 @@ importers: react-redux: specifier: ^7.2.9 version: 7.2.9(react-dom@18.3.1)(react@18.3.1) + react-router: + specifier: ^6.23.1 + version: 6.23.1(react@18.3.1) + react-router-dom: + specifier: ^6.23.1 + version: 6.23.1(react-dom@18.3.1)(react@18.3.1) reactflow: specifier: ^11.7.2 version: 11.7.2(@types/react@18.2.22)(react-dom@18.3.1)(react@18.3.1) @@ -5295,12 +5301,21 @@ importers: '@types/node-forge': specifier: ^0.9.3 version: 0.9.10 + '@types/react': + specifier: 18.2.22 + version: 18.2.22 + '@types/react-dom': + specifier: 18.2.7 + version: 18.2.7 '@types/react-notification-system': specifier: 0.2.39 version: 0.2.39 '@types/react-redux': specifier: ^7.1.25 version: 7.1.33 + '@types/react-router-dom': + specifier: 5.3.3 + version: 5.3.3 '@types/reactour': specifier: ^1.18.1 version: 1.18.5