From 6c6bb57d5feb0edca7860e5c53e45cf8c71f9bda Mon Sep 17 00:00:00 2001
From: Beatrice Guerra <beatrice.guerra@zextras.com>
Date: Tue, 12 Nov 2024 09:59:30 +0100
Subject: [PATCH] fix: use react-router-dom-v5-compat for compatibility with
 react 18

This package allows to run both v6 and v5 together. Through this
package, we are now able to migrate to v6 incrementally.
Once everything has been migrated, the package can be removed and
react-router-dom can be upgraded to v6.

Refs: SHELL-258 (#541)
---
 package-lock.json         | 41 +++++++++++++++++++++++++++++++++++++++
 package.json              |  1 +
 src/boot/bootstrapper.tsx | 37 +++++++++++++++++++----------------
 3 files changed, 62 insertions(+), 17 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 74b43b77..8cc1ad7b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -25,6 +25,7 @@
 				"react-dom": "^18.3.1",
 				"react-i18next": "^12.3.1",
 				"react-router-dom": "^5.3.4",
+				"react-router-dom-v5-compat": "^6.28.0",
 				"styled-components": "^5.3.11",
 				"tinymce": "^6.8.4",
 				"ua-parser-js": "^1.0.37",
@@ -3783,6 +3784,14 @@
 				"url": "https://opencollective.com/popperjs"
 			}
 		},
+		"node_modules/@remix-run/router": {
+			"version": "1.21.0",
+			"resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.21.0.tgz",
+			"integrity": "sha512-xfSkCAchbdG5PnbrKqFWwia4Bi61nH+wm8wLEqfHDyp7Y3dZzgqS2itV8i4gAq9pC2HsTpwyBC6Ds8VHZ96JlA==",
+			"engines": {
+				"node": ">=14.0.0"
+			}
+		},
 		"node_modules/@rushstack/node-core-library": {
 			"version": "4.1.0",
 			"resolved": "https://registry.npmjs.org/@rushstack/node-core-library/-/node-core-library-4.1.0.tgz",
@@ -16693,6 +16702,38 @@
 				"react": ">=15"
 			}
 		},
+		"node_modules/react-router-dom-v5-compat": {
+			"version": "6.28.0",
+			"resolved": "https://registry.npmjs.org/react-router-dom-v5-compat/-/react-router-dom-v5-compat-6.28.0.tgz",
+			"integrity": "sha512-KrTxsn2vibvoTeGstcBMEuchuT+BxXGftfa7njf1vNSlzO8t+4Y5oN2h3WeAq2rK7MyA5mFUXrE/+lMOR0ay9Q==",
+			"dependencies": {
+				"@remix-run/router": "1.21.0",
+				"history": "^5.3.0",
+				"react-router": "6.28.0"
+			},
+			"engines": {
+				"node": ">=14.0.0"
+			},
+			"peerDependencies": {
+				"react": ">=16.8",
+				"react-dom": ">=16.8",
+				"react-router-dom": "4 || 5"
+			}
+		},
+		"node_modules/react-router-dom-v5-compat/node_modules/react-router": {
+			"version": "6.28.0",
+			"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.28.0.tgz",
+			"integrity": "sha512-HrYdIFqdrnhDw0PqG/AKjAqEqM7AvxCz0DQ4h2W8k6nqmc5uRBYDag0SBxx9iYz5G8gnuNVLzUe13wl9eAsXXg==",
+			"dependencies": {
+				"@remix-run/router": "1.21.0"
+			},
+			"engines": {
+				"node": ">=14.0.0"
+			},
+			"peerDependencies": {
+				"react": ">=16.8"
+			}
+		},
 		"node_modules/react-router-dom/node_modules/history": {
 			"version": "4.10.1",
 			"resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz",
diff --git a/package.json b/package.json
index 62db4d48..bce3de44 100644
--- a/package.json
+++ b/package.json
@@ -119,6 +119,7 @@
 		"react-dom": "^18.3.1",
 		"react-i18next": "^12.3.1",
 		"react-router-dom": "^5.3.4",
+		"react-router-dom-v5-compat": "^6.28.0",
 		"styled-components": "^5.3.11",
 		"tinymce": "^6.8.4",
 		"ua-parser-js": "^1.0.37",
diff --git a/src/boot/bootstrapper.tsx b/src/boot/bootstrapper.tsx
index 70e75e9e..7c86b8c8 100644
--- a/src/boot/bootstrapper.tsx
+++ b/src/boot/bootstrapper.tsx
@@ -8,6 +8,7 @@ import React, { useEffect } from 'react';
 
 import { SnackbarManager } from '@zextras/carbonio-design-system';
 import { BrowserRouter, Route, Switch, useParams } from 'react-router-dom';
+import { CompatRouter } from 'react-router-dom-v5-compat';
 
 import AppLoaderMounter from './app/app-loader-mounter';
 import { DefaultViewsRegister } from './app/default-views';
@@ -33,23 +34,25 @@ const Bootstrapper = (): React.JSX.Element => (
 	<ThemeProvider>
 		<ShellI18nextProvider>
 			<BrowserRouter basename={BASENAME}>
-				<TrackerProvider>
-					<SnackbarManager>
-						<Loader />
-						{IS_FOCUS_MODE && (
-							<Switch>
-								<Route path={'/:route'}>
-									<FocusModeListener />
-								</Route>
-							</Switch>
-						)}
-						<DefaultViewsRegister />
-						<NotificationPermissionChecker />
-						<ContextBridge />
-						<AppLoaderMounter />
-						<ShellView />
-					</SnackbarManager>
-				</TrackerProvider>
+				<CompatRouter>
+					<TrackerProvider>
+						<SnackbarManager>
+							<Loader />
+							{IS_FOCUS_MODE && (
+								<Switch>
+									<Route path={'/:route'}>
+										<FocusModeListener />
+									</Route>
+								</Switch>
+							)}
+							<DefaultViewsRegister />
+							<NotificationPermissionChecker />
+							<ContextBridge />
+							<AppLoaderMounter />
+							<ShellView />
+						</SnackbarManager>
+					</TrackerProvider>
+				</CompatRouter>
 			</BrowserRouter>
 		</ShellI18nextProvider>
 	</ThemeProvider>