Merge pull request #1395 from acelaya-forks/feature/react-router-7

Update to react-router 7

CHANGELOG.md

@@ -4,6 +4,25 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org).
 
+## [Unreleased]
+### Added
+* *Nothing*
+
+### Changed
+* Update to `react-router` 7.0
+* Update to `@shlinkio/shlink-frontend-kit` 0.7.0
+* Update to `@shlinkio/shlink-web-component` 0.12.0
+
+### Deprecated
+* *Nothing*
+
+### Removed
+* *Nothing*
+
+### Fixed
+* *Nothing*
+
+
 ## [4.3.0] - 2024-11-30
 ### Added
 * [#1360](https://github.com/shlinkio/shlink-web-client/issues/1360) Added ability for server IDs to be generated based on the server name and URL, instead of generating a random UUID.

package.json

@@ -33,9 +33,9 @@
     "@json2csv/plainjs": "^7.0.6",
     "@reduxjs/toolkit": "^2.4.0",
     "@shlinkio/data-manipulation": "^1.0.3",
-    "@shlinkio/shlink-frontend-kit": "^0.6.0",
+    "@shlinkio/shlink-frontend-kit": "^0.7.0",
     "@shlinkio/shlink-js-sdk": "^1.3.0",
-    "@shlinkio/shlink-web-component": "^0.11.0",
+    "@shlinkio/shlink-web-component": "^0.12.0",
     "bootstrap": "5.2.3",
     "bottlejs": "^2.0.1",
     "clsx": "^2.1.1",
@@ -46,7 +46,7 @@
     "react-dom": "^18.3.1",
     "react-external-link": "^2.4.0",
     "react-redux": "^9.1.2",
-    "react-router-dom": "^6.28.0",
+    "react-router": "^7.0.2",
     "reactstrap": "^9.2.3",
     "redux-localstorage-simple": "^2.5.1",
     "workbox-core": "^7.3.0",

src/app/App.tsx

@@ -3,7 +3,7 @@ import type { Settings } from '@shlinkio/shlink-web-component/settings';
 import { clsx } from 'clsx';
 import type { FC } from 'react';
 import { useEffect, useRef } from 'react';
-import { Route, Routes, useLocation } from 'react-router-dom';
+import { Route, Routes, useLocation } from 'react-router';
 import { AppUpdateBanner } from '../common/AppUpdateBanner';
 import { NotFound } from '../common/NotFound';
 import type { FCWithDeps } from '../container/utils';
@@ -69,11 +69,15 @@ const App: FCWithDeps<AppProps, AppDeps> = (
         <div className={clsx('shlink-wrapper', { 'd-flex align-items-center pt-3': isHome })}>
           <Routes>
             <Route index element={<Home />} />
-            <Route path="/settings/*" element={<Settings />} />
+            <Route path="/settings">
+              {['', '*'].map((path) => <Route key={path} path={path} element={<Settings />} />)}
+            </Route>
             <Route path="/manage-servers" element={<ManageServers />} />
             <Route path="/server/create" element={<CreateServer />} />
             <Route path="/server/:serverId/edit" element={<EditServer />} />
-            <Route path="/server/:serverId/*" element={<ShlinkWebComponentContainer />} />
+            <Route path="/server/:serverId">
+              {['', '*'].map((path) => <Route key={path} path={path} element={<ShlinkWebComponentContainer />} />)}
+            </Route>
             <Route path="*" element={<NotFound />} />
           </Routes>
         </div>

src/common/Home.tsx

@@ -3,7 +3,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { clsx } from 'clsx';
 import { useEffect } from 'react';
 import { ExternalLink } from 'react-external-link';
-import { Link, useNavigate } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router';
 import { Card } from 'reactstrap';
 import type { ServersMap } from '../servers/data';
 import { ServersListGroup } from '../servers/ServersListGroup';

src/common/MainHeader.tsx

@@ -4,7 +4,7 @@ import { useToggle } from '@shlinkio/shlink-frontend-kit';
 import { clsx } from 'clsx';
 import type { FC } from 'react';
 import { useEffect } from 'react';
-import { Link, useLocation } from 'react-router-dom';
+import { Link, useLocation } from 'react-router';
 import { Collapse, Nav, Navbar, NavbarBrand, NavbarToggler, NavItem, NavLink } from 'reactstrap';
 import type { FCWithDeps } from '../container/utils';
 import { componentFactory, useDependencies } from '../container/utils';

src/common/NotFound.tsx

@@ -1,6 +1,6 @@
 import { SimpleCard } from '@shlinkio/shlink-frontend-kit';
 import type { FC, PropsWithChildren } from 'react';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 
 type NotFoundProps = PropsWithChildren<{ to?: string }>;
 

src/common/ScrollToTop.tsx

@@ -1,6 +1,6 @@
 import type { FC, PropsWithChildren } from 'react';
 import { useEffect } from 'react';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 
 export const ScrollToTop: FC<PropsWithChildren> = ({ children }) => {
   const location = useLocation();

src/index.tsx

@@ -1,6 +1,6 @@
 import { createRoot } from 'react-dom/client';
 import { Provider } from 'react-redux';
-import { BrowserRouter } from 'react-router-dom';
+import { BrowserRouter } from 'react-router';
 import pack from '../package.json';
 import { container } from './container';
 import { setUpStore } from './container/store';

src/servers/CreateServer.tsx

@@ -2,7 +2,7 @@ import type { TimeoutToggle } from '@shlinkio/shlink-frontend-kit';
 import { Result, useToggle } from '@shlinkio/shlink-frontend-kit';
 import type { FC } from 'react';
 import { useCallback, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router';
 import { Button } from 'reactstrap';
 import { NoMenuLayout } from '../common/NoMenuLayout';
 import type { FCWithDeps } from '../container/utils';

src/servers/DeleteServerModal.tsx

@@ -1,6 +1,6 @@
 import type { FC } from 'react';
 import { useRef } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router';
 import { Button, Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
 import type { ServerWithId } from './data';
 

src/servers/ManageServers.tsx

@@ -4,7 +4,7 @@ import type { TimeoutToggle } from '@shlinkio/shlink-frontend-kit';
 import { Result, SearchField, SimpleCard } from '@shlinkio/shlink-frontend-kit';
 import type { FC } from 'react';
 import { useMemo, useState } from 'react';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 import { Button } from 'reactstrap';
 import { NoMenuLayout } from '../common/NoMenuLayout';
 import type { FCWithDeps } from '../container/utils';

src/servers/ManageServersRow.tsx

@@ -1,7 +1,7 @@
 import { faCheck as checkIcon } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import type { FC } from 'react';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 import { UncontrolledTooltip } from 'reactstrap';
 import type { FCWithDeps } from '../container/utils';
 import { componentFactory, useDependencies } from '../container/utils';

src/servers/ManageServersRowDropdown.tsx

@@ -8,7 +8,7 @@ import {
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { RowDropdownBtn, useToggle } from '@shlinkio/shlink-frontend-kit';
 import type { FC } from 'react';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 import { DropdownItem } from 'reactstrap';
 import type { FCWithDeps } from '../container/utils';
 import { componentFactory, useDependencies } from '../container/utils';

src/servers/ServersDropdown.tsx

@@ -1,6 +1,6 @@
 import { faPlus as plusIcon, faServer as serverIcon } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 import { DropdownItem, DropdownMenu, DropdownToggle, UncontrolledDropdown } from 'reactstrap';
 import type { SelectedServer, ServersMap } from './data';
 import { getServerId } from './data';

src/servers/ServersListGroup.tsx

@@ -2,7 +2,7 @@ import { faChevronRight as chevronIcon } from '@fortawesome/free-solid-svg-icons
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { clsx } from 'clsx';
 import type { FC, PropsWithChildren } from 'react';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 import { ListGroup, ListGroupItem } from 'reactstrap';
 import type { ServerWithId } from './data';
 import './ServersListGroup.scss';

src/servers/helpers/ServerError.tsx

@@ -1,6 +1,6 @@
 import { Message } from '@shlinkio/shlink-frontend-kit';
 import type { FC } from 'react';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 import { NoMenuLayout } from '../../common/NoMenuLayout';
 import type { FCWithDeps } from '../../container/utils';
 import { componentFactory, useDependencies } from '../../container/utils';

src/servers/helpers/withSelectedServer.tsx

@@ -1,7 +1,7 @@
 import { Message } from '@shlinkio/shlink-frontend-kit';
 import type { FC } from 'react';
 import { useEffect } from 'react';
-import { useParams } from 'react-router-dom';
+import { useParams } from 'react-router';
 import { NoMenuLayout } from '../../common/NoMenuLayout';
 import type { FCWithDeps } from '../../container/utils';
 import { useDependencies } from '../../container/utils';

src/utils/helpers/hooks.ts

@@ -1,5 +1,5 @@
 import { useCallback } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router';
 
 export const useGoBack = () => {
   const navigate = useNavigate();

test/__helpers__/MemoryRouterWithParams.tsx

@@ -1,6 +1,6 @@
 import type { FC, PropsWithChildren } from 'react';
 import { useMemo } from 'react';
-import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import { MemoryRouter, Route, Routes } from 'react-router';
 
 export type MemoryRouterWithParamsProps = PropsWithChildren<{
   params: Record<string, string>;

test/app/App.test.tsx

@@ -1,6 +1,6 @@
 import { act, render, screen } from '@testing-library/react';
 import { fromPartial } from '@total-typescript/shoehorn';
-import { MemoryRouter } from 'react-router-dom';
+import { MemoryRouter } from 'react-router';
 import { AppFactory } from '../../src/app/App';
 import { checkAccessibility } from '../__helpers__/accessibility';
 

test/common/MainHeader.test.tsx

@@ -1,7 +1,7 @@
 import { screen, waitFor } from '@testing-library/react';
 import { fromPartial } from '@total-typescript/shoehorn';
 import { createMemoryHistory } from 'history';
-import { Router } from 'react-router-dom';
+import { Router } from 'react-router';
 import { MainHeaderFactory } from '../../src/common/MainHeader';
 import { checkAccessibility } from '../__helpers__/accessibility';
 import { renderWithEvents } from '../__helpers__/setUpTest';

test/servers/CreateServer.test.tsx

@@ -1,7 +1,7 @@
 import { fireEvent, screen, waitFor } from '@testing-library/react';
 import { fromPartial } from '@total-typescript/shoehorn';
 import { createMemoryHistory } from 'history';
-import { Router } from 'react-router-dom';
+import { Router } from 'react-router';
 import { CreateServerFactory } from '../../src/servers/CreateServer';
 import type { ServersMap } from '../../src/servers/data';
 import { checkAccessibility } from '../__helpers__/accessibility';

test/servers/DeleteServerModal.test.tsx

@@ -1,7 +1,7 @@
 import { act, screen, waitFor } from '@testing-library/react';
 import { fromPartial } from '@total-typescript/shoehorn';
 import { createMemoryHistory } from 'history';
-import { Router } from 'react-router-dom';
+import { Router } from 'react-router';
 import { DeleteServerModal } from '../../src/servers/DeleteServerModal';
 import { checkAccessibility } from '../__helpers__/accessibility';
 import { renderWithEvents } from '../__helpers__/setUpTest';

test/servers/EditServer.test.tsx

@@ -1,7 +1,7 @@
 import { fireEvent, screen } from '@testing-library/react';
 import { fromPartial } from '@total-typescript/shoehorn';
 import { createMemoryHistory } from 'history';
-import { Router } from 'react-router-dom';
+import { Router } from 'react-router';
 import type { ReachableServer, SelectedServer } from '../../src/servers/data';
 import { EditServerFactory } from '../../src/servers/EditServer';
 import { checkAccessibility } from '../__helpers__/accessibility';

test/servers/ManageServers.test.tsx

@@ -1,6 +1,6 @@
 import { screen, waitFor } from '@testing-library/react';
 import { fromPartial } from '@total-typescript/shoehorn';
-import { MemoryRouter } from 'react-router-dom';
+import { MemoryRouter } from 'react-router';
 import type { ServersMap, ServerWithId } from '../../src/servers/data';
 import { ManageServersFactory } from '../../src/servers/ManageServers';
 import type { ServersExporter } from '../../src/servers/services/ServersExporter';

test/servers/ManageServersRow.test.tsx

@@ -1,6 +1,6 @@
 import { render, screen } from '@testing-library/react';
 import { fromPartial } from '@total-typescript/shoehorn';
-import { MemoryRouter } from 'react-router-dom';
+import { MemoryRouter } from 'react-router';
 import type { ServerWithId } from '../../src/servers/data';
 import { ManageServersRowFactory } from '../../src/servers/ManageServersRow';
 import { checkAccessibility } from '../__helpers__/accessibility';

test/servers/ManageServersRowDropdown.test.tsx

@@ -1,7 +1,7 @@
 import { screen } from '@testing-library/react';
 import type { UserEvent } from '@testing-library/user-event';
 import { fromPartial } from '@total-typescript/shoehorn';
-import { MemoryRouter } from 'react-router-dom';
+import { MemoryRouter } from 'react-router';
 import type { ServerWithId } from '../../src/servers/data';
 import { ManageServersRowDropdownFactory } from '../../src/servers/ManageServersRowDropdown';
 import { checkAccessibility } from '../__helpers__/accessibility';

test/servers/ServersDropdown.test.tsx

@@ -1,6 +1,6 @@
 import { screen } from '@testing-library/react';
 import { fromPartial } from '@total-typescript/shoehorn';
-import { MemoryRouter } from 'react-router-dom';
+import { MemoryRouter } from 'react-router';
 import type { ServersMap } from '../../src/servers/data';
 import { ServersDropdown } from '../../src/servers/ServersDropdown';
 import { checkAccessibility } from '../__helpers__/accessibility';

test/servers/ServersListGroup.test.tsx

@@ -1,6 +1,6 @@
 import { render, screen } from '@testing-library/react';
 import { fromPartial } from '@total-typescript/shoehorn';
-import { MemoryRouter } from 'react-router-dom';
+import { MemoryRouter } from 'react-router';
 import type { ServerWithId } from '../../src/servers/data';
 import { ServersListGroup } from '../../src/servers/ServersListGroup';
 import { checkAccessibility } from '../__helpers__/accessibility';

test/servers/__snapshots__/ManageServersRow.test.tsx.snap

@@ -33,6 +33,7 @@ exports[`<ManageServersRow /> > renders auto-connect icon only if server is auto
           data-th="Name"
         >
           <a
+            data-discover="true"
             href="/server/abc"
           >
             My server
@@ -73,6 +74,7 @@ exports[`<ManageServersRow /> > renders auto-connect icon only if server is auto
           data-th="Name"
         >
           <a
+            data-discover="true"
             href="/server/abc"
           >
             My server

test/servers/__snapshots__/ManageServersRowDropdown.test.tsx.snap

@@ -38,6 +38,7 @@ exports[`<ManageServersRowDropdown /> > renders expected size and icon 1`] = `
     >
       <a
         class="dropdown-item"
+        data-discover="true"
         href="/server/abc123"
         role="menuitem"
         tabindex="0"
@@ -61,6 +62,7 @@ exports[`<ManageServersRowDropdown /> > renders expected size and icon 1`] = `
       </a>
       <a
         class="dropdown-item"
+        data-discover="true"
         href="/server/abc123/edit"
         role="menuitem"
         tabindex="0"
@@ -181,6 +183,7 @@ exports[`<ManageServersRowDropdown /> > renders expected size and icon 2`] = `
     >
       <a
         class="dropdown-item"
+        data-discover="true"
         href="/server/abc123"
         role="menuitem"
         tabindex="0"
@@ -204,6 +207,7 @@ exports[`<ManageServersRowDropdown /> > renders expected size and icon 2`] = `
       </a>
       <a
         class="dropdown-item"
+        data-discover="true"
         href="/server/abc123/edit"
         role="menuitem"
         tabindex="0"

test/servers/helpers/ServerError.test.tsx

@@ -1,6 +1,6 @@
 import { render, screen } from '@testing-library/react';
 import { fromPartial } from '@total-typescript/shoehorn';
-import { MemoryRouter } from 'react-router-dom';
+import { MemoryRouter } from 'react-router';
 import type { NonReachableServer, NotFoundServer, SelectedServer } from '../../../src/servers/data';
 import { ServerErrorFactory } from '../../../src/servers/helpers/ServerError';
 import { checkAccessibility } from '../../__helpers__/accessibility';

test/settings/Settings.test.tsx

@@ -1,5 +1,5 @@
 import { render } from '@testing-library/react';
-import { MemoryRouter } from 'react-router-dom';
+import { MemoryRouter } from 'react-router';
 import { Settings } from '../../src/settings/Settings';
 import { checkAccessibility } from '../__helpers__/accessibility';