Upgrade console and my account to React Router v6

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",

apps/myaccount/package.json

@@ -68,7 +68,6 @@
         "react-i18next": "^11.18.5",
         "react-notification-system": "^0.4.0",
         "react-redux": "^7.2.9",
-        "react-router-dom": "^4.3.1",
         "react-top-loading-bar": "^1.2.0",
         "redux": "^4.0.4",
         "redux-thunk": "^2.3.0",
@@ -83,12 +82,8 @@
         "@types/jest": "^29.5.12",
         "@types/lodash-es": "^4.17.4",
         "@types/node": "^13.9.2",
-        "@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/redux-mock-store": "^1.0.2",
         "@types/uuid": "^9.0.1",
         "@types/webpack-env": "^1.16.0",

apps/myaccount/src/api/profile.ts

@@ -23,9 +23,9 @@ import { PatchOperationRequest, ProfileInfoInterface, ProfileSchemaInterface } f
 import { CommonUtils } from "@wso2is/core/utils";
 import axios, { AxiosError } from "axios";
 import isEmpty from "lodash-es/isEmpty";
+import { globalNavigate } from "../components/shared/global-history";
 import { Config } from "../configs";
 import { AppConstants } from "../constants";
-import { history } from "../helpers";
 import { BasicProfileInterface, HttpMethods, ReadOnlyUserStatus } from "../models";
 import { store } from "../store";
 import { toggleSCIMEnabled } from "../store/actions";
@@ -173,7 +173,7 @@ export const getProfileInfo = (): Promise<BasicProfileInterface> => {
                 store.dispatch(toggleSCIMEnabled(false));
 
                 // Navigate to login error page.
-                history.push(AppConstants.getPaths().get("LOGIN_ERROR"));
+                globalNavigate(AppConstants.getPaths().get("LOGIN_ERROR"));
             }
 
             return Promise.reject(error);

apps/myaccount/src/components/authentication/sign-out.tsx

@@ -23,9 +23,10 @@
 import React, { FunctionComponent, ReactElement, useEffect } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { Dispatch } from "redux";
 import { history } from "../../helpers";
 import useOrganizations from "../../hooks/use-organizations";
 import { AppState } from "../../store";
+import { globalNavigate } from "../shared/global-history";
 import { PreLoader } from "../shared/pre-loader/pre-loader";
 
 /**
@@ -59,7 +60,7 @@
 
             signOut()
                 .catch(() => {
-                    history.push(window[ "AppUtils" ].getConfig().routes.home);
+                    globalNavigate(window[ "AppUtils" ].getConfig().routes.home);
                 });
         }
     }, [ logoutInit ]);

apps/myaccount/src/components/overview/widgets/account-security-widget.tsx

@@ -16,12 +16,13 @@
  * under the License.
  */
 
 import { IdentifiableComponentInterface, TestableComponentInterface } from "@wso2is/core/models";
 import React, { FunctionComponent } from "react";
 import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
 import { getWidgetIcons } from "../../../configs";
 import { AppConstants, CommonConstants } from "../../../constants";
 import { history } from "../../../helpers";
 import { SettingsSection } from "../../shared";
 
 type AccountSecurityWidgetPropsInterface = TestableComponentInterface & IdentifiableComponentInterface;
@@ -39,10 +40,7 @@
 
     const { ["data-testid"]: testId } = props;
     const { t } = useTranslation();
-
-    const navigate = () => {
-        history.push(AppConstants.getPaths().get("SECURITY") + "#" + CommonConstants.ACCOUNT_SECURITY);
-    };
+    const navigate = useNavigate();
 
     return (
         <div className="widget account-security" data-testid={ testId }>
@@ -52,7 +50,9 @@
                 header={ t("myAccount:components.overview.widgets.accountSecurity.header") }
                 description={ t("myAccount:components.overview.widgets.accountSecurity.description") }
                 primaryAction={ t("myAccount:components.overview.widgets.accountSecurity.actionTitles.update") }
-                onPrimaryActionClick={ navigate }
+                onPrimaryActionClick={ () => {
+                    navigate(AppConstants.getPaths().get("SECURITY") + "#" + CommonConstants.ACCOUNT_SECURITY)
+                } }
                 icon={ getWidgetIcons().accountSecurity }
                 iconMini={ getWidgetIcons().accountSecurity }
                 iconSize="x60"

apps/myaccount/src/components/overview/widgets/consent-management-widget.tsx

@@ -16,9 +16,10 @@
  * under the License.
  */
 
 import { IdentifiableComponentInterface, TestableComponentInterface } from "@wso2is/core/models";
 import React, { FunctionComponent, ReactElement } from "react";
 import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
 import { getWidgetIcons } from "../../../configs";
 import { AppConstants, CommonConstants } from "../../../constants";
 import { history } from "../../../helpers";
@@ -38,10 +39,7 @@
 
     const { ["data-testid"]: testId } = props;
     const { t } = useTranslation();
-
-    const navigate = () => {
-        history.push(AppConstants.getPaths().get("SECURITY") + "#" + CommonConstants.CONSENTS_CONTROL);
-    };
+    const navigate = useNavigate()
 
     return (
         <div className="widget consent-management" data-testid={ testId }>
@@ -51,7 +49,9 @@
                 header={ t("myAccount:components.overview.widgets.consentManagement.header") }
                 description={ t("myAccount:components.overview.widgets.consentManagement.description") }
                 primaryAction={ t("myAccount:components.overview.widgets.consentManagement.actionTitles.manage") }
-                onPrimaryActionClick={ navigate }
+                onPrimaryActionClick={ () => {
+                    navigate(AppConstants.getPaths().get("SECURITY") + "#" + CommonConstants.CONSENTS_CONTROL)
+                } }
                 icon={ getWidgetIcons().consents }
                 iconMini={ getWidgetIcons().consents }
                 iconSize="x60"

apps/myaccount/src/components/overview/widgets/profile-widget.tsx

@@ -22,6 +22,7 @@ import isEmpty from "lodash-es/isEmpty";
 import React, { FunctionComponent, ReactElement } from "react";
 import { useTranslation } from "react-i18next";
 import { useSelector } from "react-redux";
+import { useNavigate } from "react-router-dom";
 import { Progress } from "semantic-ui-react";
 import { getWidgetIcons } from "../../../configs";
 import { AppConstants, CommonConstants, UIConstants } from "../../../constants";
@@ -58,13 +59,10 @@ export const ProfileWidget: FunctionComponent<ProfileWidgetPropsInterface> = (
 
     const { t } = useTranslation();
     const { organizationDetails } = useThemeProvider();
+    const navigate = useNavigate();
 
     const config: ConfigReducerStateInterface = useSelector((state: AppState) => state.config);
 
-    const navigate = () => {
-        history.push(AppConstants.getPaths().get("PERSONAL_INFO") + "#" + CommonConstants.PERSONAL_INFO);
-    };
-
     const profileCompletion: ProfileCompletion = useSelector((state: AppState) => state.profile.completion);
     const isReadOnlyUser: string = useSelector((state: AppState) => {
         return state.authenticationInformation.profileInfo.isReadOnly;
@@ -163,7 +161,9 @@ export const ProfileWidget: FunctionComponent<ProfileWidgetPropsInterface> = (
                         ? t("myAccount:components.overview.widgets.profileStatus.description")
                         : t("myAccount:components.overview.widgets.profileStatus.readOnlyDescription")
                 }
-                onPrimaryActionClick={ navigate }
+                onPrimaryActionClick={ () => {
+                    navigate(AppConstants.getPaths().get("PERSONAL_INFO") + "#" + CommonConstants.PERSONAL_INFO);
+                } }
                 icon={ getWidgetIcons().profile }
                 iconMini={ getWidgetIcons().profile }
                 iconSize="x60"

apps/myaccount/src/components/overview/widgets/user-sessions-widget.tsx

@@ -24,6 +24,7 @@ import sortBy from "lodash-es/sortBy";
 import React, { FunctionComponent, ReactElement, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useDispatch } from "react-redux";
+import { useNavigate } from "react-router-dom";
 import { Dispatch } from "redux";
 import { Placeholder } from "semantic-ui-react";
 import { fetchUserSessions } from "../../../api";
@@ -50,6 +51,7 @@ export const UserSessionsWidget: FunctionComponent<TestableComponentInterface> =
 ): ReactElement => {
     const { ["data-testid"]: testId } = props;
     const { t } = useTranslation();
+    const navigate = useNavigate();
 
     const dispatch: Dispatch = useDispatch();
 
@@ -115,13 +117,6 @@ export const UserSessionsWidget: FunctionComponent<TestableComponentInterface> =
         getUserSessions();
     }, []);
 
-    /**
-     * Navigates to the Security page.
-     */
-    const navigate = () => {
-        history.push(AppConstants.getPaths().get("SECURITY") + "#" + CommonConstants.ACCOUNT_ACTIVITY);
-    };
-
     return (
         <div className="widget account-status" data-testid={ testId }>
             <SettingsSection
@@ -136,7 +131,9 @@ export const UserSessionsWidget: FunctionComponent<TestableComponentInterface> =
                         : null
                 }
                 primaryAction={ t("myAccount:components.overview.widgets.accountActivity.actionTitles.update") }
-                onPrimaryActionClick={ navigate }
+                onPrimaryActionClick={ () => {
+                    navigate(AppConstants.getPaths().get("SECURITY") + "#" + CommonConstants.ACCOUNT_ACTIVITY);
+                } }
             >
                 { !isSessionDetailsLoading ? (
                     <UserSessionsList

apps/myaccount/src/components/shared/global-history.tsx

@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { NavigateFunction, useNavigate } from "react-router-dom";
+
+export let globalNavigate: NavigateFunction;
+
+export const GlobalHistory = () => {
+    globalNavigate = useNavigate();
+
+    return null;
+};

apps/myaccount/src/components/shared/header.tsx

@@ -71,6 +71,7 @@ import {
     handleAccountSwitching
 } from "../../store/actions";
 import { CommonUtils, refreshPage } from "../../utils";
+import { useNavigate } from "react-router-dom";
 
 /**
  * Dashboard layout Prop types.
@@ -104,6 +105,7 @@ export const Header: FunctionComponent<HeaderPropsInterface> = (
     >(null);
 
     const { t } = useTranslation();
+    const navigate = useNavigate();
 
     // TODO: Get this from profile reducer and cast `ProfileInfoInterface`.
     const profileInfo: any = useSelector(
@@ -295,9 +297,6 @@ export const Header: FunctionComponent<HeaderPropsInterface> = (
                 !(CommonUtils?.isProfileReadOnly(isReadOnlyUser)) &&
                     consoleAppURL && consoleAppURL != "" ? (
                     <MenuItem
-                        key={
-                            t("myAccount:components.header.appSwitch.console.name")
-                        }
                         onClick={ () => window.open(consoleAppURL, "_blank", "noopener") }>
                         <ListItemIcon>
                             <RectangleLineIcon fill="black" />
@@ -391,7 +390,7 @@ export const Header: FunctionComponent<HeaderPropsInterface> = (
                     )
                 },
                 onClick: () => {
-                    history.push(AppConstants.getPaths().get("DASHBOARD"));
+                    navigate(AppConstants.getPaths().get("DASHBOARD"));
                 },
                 title: theme?.images?.myAccountLogo?.title ?? config.ui.appName
             } }
@@ -469,7 +468,11 @@ export const Header: FunctionComponent<HeaderPropsInterface> = (
                     ))
                 ],
                 onActionClick: () =>
-                    history.push(AppConstants.getAppLogoutPath()),
+                    {
+
+                        navigate(AppConstants.getAppLogoutPath())
+                    }
+,
                 triggerOptions: {
                     "data-componentid": "app-header-user-avatar",
                     "data-testid": "app-header-user-avatar"

apps/myaccount/src/components/shared/index.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2019, WSO2 LLC. (https://www.wso2.com). All Rights Reserved.
+ * Copyright (c) 2019-2024, WSO2 LLC. (https://www.wso2.com).
  *
  * WSO2 LLC. licenses this file to you under the Apache License,
  * Version 2.0 (the "License"); you may not use this file except
@@ -28,7 +28,6 @@ export * from "./global-loader";
 export * from "./icon";
 export * from "./page-header";
 export * from "./pre-loader";
-export * from "./protected-route";
 export * from "./settings-section";
 export * from "./user-avatar";
 export * from "./modal";