Fix routing issues in main routes in myaccount app

wso2 · Jun 3, 2024 · 8714b89 · 8714b89
1 parent 74699dd
commit 8714b89
Show file tree

Hide file tree

Showing 20 changed files with 192 additions and 90 deletions.
diff --git a/apps/myaccount/src/api/profile.ts b/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);

diff --git a/apps/myaccount/src/app.tsx b/apps/myaccount/src/app.tsx
@@ -36,7 +36,7 @@ import * as moment from "moment";
 import React, { ReactElement, Suspense, useContext, useEffect, useState } from "react";
 import { Trans } from "react-i18next";
 import { useSelector } from "react-redux";
-import { Navigate, Route, Routes } from "react-router-dom";
+import { Navigate, Route, Routes, useNavigate } from "react-router-dom";
 import { PreLoader } from "./components";
 import { getBaseRoutes } from "./configs";
 import { AppConstants } from "./constants";
@@ -68,6 +68,7 @@ export const App = (): ReactElement => {
 
     const { signOut, trySignInSilently } = useAuthContext();
     const { themePreference } = useContext(ThemeProviderContext);
+    const navigate = useNavigate();
 
     const { setMode } = useColorScheme();
 
@@ -111,7 +112,7 @@ export const App = (): ReactElement => {
             return;
         }
 
-        history.push(AppConstants.getPaths().get("UNAUTHORIZED"));
+        navigate(AppConstants.getPaths().get("UNAUTHORIZED"));
     }, [ loginInit, allowedScopes, config ]);
 
     /**
@@ -161,7 +162,7 @@ export const App = (): ReactElement => {
      * @param url - Current URL.
      */
     const handleSessionTimeoutAbort = (url: URL): void => {
-        history.push({
+        navigate({
             pathname: url.pathname,
             search: url.search
         });
@@ -171,7 +172,7 @@ export const App = (): ReactElement => {
      * Handles session logout.
      */
     const handleSessionLogout = (): void => {
-        history.push(AppConstants.getAppLogoutPath());
+        navigate(AppConstants.getAppLogoutPath());
     };
 
     /**
@@ -182,11 +183,11 @@ export const App = (): ReactElement => {
             const storage: Storage = sessionStorage;
 
             if (!storage && location.pathname !== AppConstants.getPaths().get("STORING_DATA_DISABLED")) {
-                history.push(AppConstants.getPaths().get("STORING_DATA_DISABLED"));
+                navigate(AppConstants.getPaths().get("STORING_DATA_DISABLED"));
             }
         } catch {
             if (true && location.pathname !== AppConstants.getPaths().get("STORING_DATA_DISABLED")) {
-                history.push(AppConstants.getPaths().get("STORING_DATA_DISABLED"));
+                navigate(AppConstants.getPaths().get("STORING_DATA_DISABLED"));
             }
         }
     };
@@ -200,13 +201,13 @@ export const App = (): ReactElement => {
         trySignInSilently()
             .then((response: boolean) => {
                 if (response === false) {
-                    history.push(AppConstants.getAppLogoutPath());
+                    navigate(AppConstants.getAppLogoutPath());
                 } else {
                     window.history.replaceState(null, null, window.location.pathname);
                 }
             })
             .catch(() => {
-                history.push(AppConstants.getAppLogoutPath());
+                navigate(AppConstants.getAppLogoutPath());
             });
     };
 
@@ -342,23 +343,38 @@ export const App = (): ReactElement => {
                                     config
                                         ? filterRoutes(baseRoutes, config)
                                             .map((route: RouteInterface, index: number) => {
+
+                                                console.log(config);
+                                                console.log(baseRoutes);
+                                                console.log(filterRoutes(baseRoutes, config));
+
                                                 return (
                                                     route.redirectTo
                                                         ? (
-                                                            <Navigate
-                                                                to={ route.redirectTo }
+                                                            <Route
+                                                                path="*"
+                                                                element={
+                                                                    (<Navigate
+                                                                        to={ route.redirectTo }
+                                                                    />)
+                                                                }
                                                             />
                                                         )
-                                                        : route.protected
+                                                        :
+                                                        route.protected
                                                             ? (
                                                                 <Route
                                                                     path={ route.path }
                                                                     element={
                                                                         isAuthenticated && route.component
                                                                             ? <route.component />
-                                                                            : (<Navigate
-                                                                                to={ AppConstants.getAppLoginPath() }
-                                                                            />)
+                                                                            : (
+                                                                                <Navigate
+                                                                                    to={
+                                                                                        AppConstants.getAppLoginPath()
+                                                                                    }
+                                                                                />
+                                                                            )
                                                                     }
                                                                     key={ index }
                                                                 />
@@ -368,7 +384,7 @@ export const App = (): ReactElement => {
                                                                 <Route
                                                                     path={ route.path }
                                                                     element={
-                                                                        <route.component />
+                                                                        route.component
                                                                     }
                                                                     key={ index }
                                                                 />

diff --git a/apps/myaccount/src/components/authentication/sign-out.tsx b/apps/myaccount/src/components/authentication/sign-out.tsx
@@ -26,6 +26,7 @@ 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 @@ const SignOut: FunctionComponent<Record<string, unknown>> = (): ReactElement =>
 
             signOut()
                 .catch(() => {
-                    history.push(window[ "AppUtils" ].getConfig().routes.home);
+                    globalNavigate(window[ "AppUtils" ].getConfig().routes.home);
                 });
         }
     }, [ logoutInit ]);

diff --git a/apps/myaccount/src/components/overview/widgets/account-security-widget.tsx b/apps/myaccount/src/components/overview/widgets/account-security-widget.tsx
@@ -19,6 +19,7 @@
 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";
@@ -39,10 +40,7 @@ export const AccountSecurityWidget: FunctionComponent<AccountSecurityWidgetProps
 
     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 @@ export const AccountSecurityWidget: FunctionComponent<AccountSecurityWidgetProps
                 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"

diff --git a/apps/myaccount/src/components/overview/widgets/consent-management-widget.tsx b/apps/myaccount/src/components/overview/widgets/consent-management-widget.tsx
@@ -19,6 +19,7 @@
 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 @@ export const ConsentManagementWidget: FunctionComponent<ConsentManagementWidgetP
 
     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 @@ export const ConsentManagementWidget: FunctionComponent<ConsentManagementWidgetP
                 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"

diff --git a/apps/myaccount/src/components/overview/widgets/profile-widget.tsx b/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"

diff --git a/apps/myaccount/src/components/overview/widgets/user-sessions-widget.tsx b/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

diff --git a/apps/myaccount/src/components/shared/global-history.tsx b/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;
+};
diff --git a/apps/myaccount/src/components/shared/header.tsx b/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(
@@ -388,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
             } }
@@ -466,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"

diff --git a/apps/myaccount/src/components/user-sessions/user-sessions-terminate-modal.tsx b/apps/myaccount/src/components/user-sessions/user-sessions-terminate-modal.tsx
@@ -23,6 +23,7 @@ import { IdentityAppsApiException } from "modules/core/dist/types/exceptions";
 import React, { FunctionComponent, ReactElement } from "react";
 import { useTranslation } from "react-i18next";
 import { useDispatch } from "react-redux";
+import { useNavigate } from "react-router-dom";
 import { Dispatch } from "redux";
 import { Button, Modal } from "semantic-ui-react";
 import { terminateAllUserSessions } from "../../api";
@@ -60,12 +61,13 @@ export const UserSessionTerminationModal: FunctionComponent<UserSessionTerminati
 
     const { t } = useTranslation();
     const dispatch: Dispatch<any> = useDispatch();
+    const navigate = useNavigate();
 
     /**
      * The following function handles redirecting the user to the active session list.
      */
     const handleNavigatingToSessionList = () => {
-        history.push(AppConstants.getPaths().get("SECURITY") + "#" + CommonConstants.ACCOUNT_ACTIVITY);
+        navigate(AppConstants.getPaths().get("SECURITY") + "#" + CommonConstants.ACCOUNT_ACTIVITY);
         handleModalClose();
     };
 
@@ -75,7 +77,7 @@ export const UserSessionTerminationModal: FunctionComponent<UserSessionTerminati
     const handleTerminateAllUserSessions = () => {
         terminateAllUserSessions()
             .then(() => {
-                history.push(AppConstants.getPaths().get("LOGOUT"));
+                navigate(AppConstants.getPaths().get("LOGOUT"));
                 dispatch(addAlert({
                     description: t(
                         "myAccount:components.userSessions.notifications.terminateAllUserSessions.success.description"