refactor: update history management and fix type errors across compon…

…ents

shell-ui/package.json

@@ -55,8 +55,8 @@
     "react-error-boundary": "^4.0.2",
     "react-intl": "^5.15.3",
     "react-query": "^3.34.0",
-    "react-router": "5.2.0",
-    "react-router-dom": "5.2.0",
+    "react-router": "^6.28.0",
+    "react-router-dom": "^6.28.0",
     "styled-components": "^5.3.11",
     "typescript": "^5.6.3"
   }

shell-ui/src/FederatedApp.tsx

@@ -12,7 +12,7 @@ import { createBrowserHistory } from 'history';
 import React, { useEffect, useMemo } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 import { QueryClient, QueryClientProvider } from 'react-query';
-import { Route, Router, Switch } from 'react-router-dom';
+import { BrowserRouter, Route, Router, Routes } from 'react-router-dom';
 
 import { loadShare } from '@module-federation/enhanced/runtime';
 import { useQuery } from 'react-query';
@@ -190,7 +190,7 @@ function InternalRouter() {
               [],
             );
             return (
-              <Router history={federatedAppHistory} key={app.name}>
+              <BrowserRouter key={app.name}>
                 <FederatedRoute
                   url={
                     app.url +
@@ -204,19 +204,19 @@ function InternalRouter() {
                   app={app}
                   groups={groups}
                 />
-              </Router>
+              </BrowserRouter>
             );
           },
         })),
     [JSON.stringify(discoveredViews)],
   );
   return (
     <>
-      <Switch>
+      <Routes>
         {routes.map((route) => (
           <Route key={route.path} {...route} />
         ))}
-      </Switch>
+      </Routes>
     </>
   );
 }
@@ -243,7 +243,7 @@ function InternalApp() {
   });
 
   return (
-    <Router history={history}>
+    <BrowserRouter>
       <ShellHistoryProvider>
         <FirstTimeLoginProvider>
           <NotificationCenterProvider>
@@ -259,7 +259,7 @@ function InternalApp() {
           </NotificationCenterProvider>
         </FirstTimeLoginProvider>
       </ShellHistoryProvider>
-    </Router>
+    </BrowserRouter>
   );
 }
 

shell-ui/src/alerts/Alerts.spec.tsx

@@ -135,7 +135,6 @@ describe('alerts', () => {
     );
 
     //E
-    // @ts-expect-error - FIXME when you are working on it
     const { result, waitForNextUpdate } = renderHook(() => useAlerts(), {
       wrapper,
     });

shell-ui/src/alerts/alertHooks.ts

@@ -97,9 +97,7 @@ export function useAlerts(filters?: FilterLabels) {
     throw new Error(
       'The useAlerts hook can only be used within AlertProvider.',
     );
-    // @ts-expect-error - FIXME when you are working on it
   } else if (query.status === 'success') {
-    // @ts-expect-error - FIXME when you are working on it
     const newQuery = { ...query, alerts: filterAlerts(query.data, filters) };
     delete newQuery.data;
     return newQuery;

shell-ui/src/initFederation/ConfigurationProviders.tsx

@@ -301,7 +301,7 @@ export function useDiscoveredViews(): ViewDefinition[] {
   return discoveredViews;
 }
 export const useLinkOpener = () => {
-  const history = useShellHistory();
+  const navigate = useShellHistory();
   return {
     openLink: (
       to:
@@ -325,7 +325,7 @@ export const useLinkOpener = () => {
           window.open(to.url, '_blank');
         }
       } else if (to.isFederated) {
-        history.push(to.app.appHistoryBasePath + to.view.path);
+        navigate(to.app.appHistoryBasePath + to.view.path);
       } else {
         // @ts-expect-error - FIXME when you are working on it
         window.location.href = to.url;

shell-ui/src/initFederation/ShellHistoryProvider.tsx

@@ -1,8 +1,8 @@
 import { createContext, useContext } from 'react';
-import { useHistory } from 'react-router';
+import { useNavigate } from 'react-router';
 
 const ShellHistoryContext = createContext<ReturnType<
-  typeof useHistory<unknown>
+  typeof useNavigate
 > | null>(null);
 
 export const useShellHistory = () => {
@@ -17,7 +17,7 @@ export const useShellHistory = () => {
   return contextValue;
 };
 export const ShellHistoryProvider = ({ children }) => {
-  const history = useHistory();
+  const history = useNavigate();
   return (
     <ShellHistoryContext.Provider value={history}>
       {children}

shell-ui/src/navbar/NavBar.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useMemo } from 'react';
-import { RouteProps, matchPath, useHistory } from 'react-router';
+import { RouteProps, matchPath, useNavigate } from 'react-router';
 import { useLocation } from 'react-router-dom';
 import styled, { createGlobalStyle } from 'styled-components';
 
@@ -155,7 +155,7 @@ export const useNavbarLinksToActions = (
   const location = useLocation();
   const doesRouteMatch = useCallback(
     (path: RouteProps) => {
-      return matchPath(location.pathname, path);
+      return matchPath(location.pathname, path.path);
     },
     [location],
   );
@@ -188,9 +188,6 @@ export const useNavbarLinksToActions = (
                   'i',
                 ).toString()
               : link.view.app.appHistoryBasePath + link.view.view.path,
-            exact: link.view.view.exact,
-            strict: link.view.view.strict,
-            sensitive: link.view.view.sensitive,
           })
         : normalizePath((link.view as NonFederatedView).url) ===
           window.location.origin + window.location.pathname,
@@ -261,7 +258,7 @@ export const Navbar = ({
   const { openLink } = useLinkOpener();
   const { logOut } = useLogOut();
   const { getLinks } = useNavbar();
-  const history = useHistory();
+  const navigate = useNavigate();
   const navbarLinks = useMemo(() => getLinks(), [getLinks]);
   const navbarMainActions = useNavbarLinksToActions(navbarLinks.main);
   const navbarSecondaryActions = useNavbarLinksToActions(navbarLinks.secondary);
@@ -303,7 +300,7 @@ export const Navbar = ({
       const url = link.view.isFederated
         ? link.view.app.appHistoryBasePath + link.view.view.path
         : (link.view as NonFederatedView).url;
-      history.replace(url);
+      navigate(url, { replace: true });
     }
   }, [navbarMainActions]);
 

shell-ui/src/navbar/NotificationCenter.spec.tsx

@@ -8,7 +8,7 @@ import NotificationCenter from './NotificationCenter';
 import userEvent from '@testing-library/user-event';
 import { QueryClient, QueryClientProvider } from 'react-query';
 import { prepareRenderMultipleHooks } from './__TESTS__/testMultipleHooks';
-import { MemoryRouter, Route, Switch } from 'react-router-dom';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
 import { ShellHistoryProvider } from '../initFederation/ShellHistoryProvider';
 import { useNotificationCenter } from '../useNotificationCenter';
 
@@ -33,14 +33,12 @@ describe('NotificationCenter', () => {
             <NotificationCenterProvider>
               <NotificationCenter />
               <div>{children}</div>
-              <Switch>
-                <Route path="/" exact>
-                  Home page
-                </Route>
+              <Routes>
+                <Route path="/">Home page</Route>
                 <Route path="/alerts">Alert page</Route>
                 <Route path="/license">License page</Route>
                 <Route path="/new-version">New version page</Route>
-              </Switch>
+              </Routes>
             </NotificationCenterProvider>
           </ShellHistoryProvider>
         </MemoryRouter>

shell-ui/src/navbar/NotificationCenter.tsx

@@ -103,14 +103,14 @@ const NotificationCenter = () => {
       if (!selectedItem) {
         return;
       }
-      history.push(selectedItem.redirectUrl);
+      navigate(selectedItem.redirectUrl);
       readAllNotifications();
     },
   });
   const isAtLeastOneNotificationUnread = notifications.some(
     (notification) => !notification.readOn,
   );
-  const history = useShellHistory();
+  const navigate = useShellHistory();
   return (
     <div
       style={{ position: 'relative' }}

shell-ui/src/navbar/navbarHooks.ts

@@ -27,6 +27,5 @@ export const useNavbar = (): Navbar => {
     throw new Error("Can't use useNavbar outside of NavbarConfigProvider");
   }
 
-  // @ts-expect-error - FIXME when you are working on it
   return navbar;
 };