refactor(client): some migration step for react-router@v6

client/src/components/FileExplorer.tsx

@@ -1,11 +1,12 @@
 import cx from "classnames";
-import React, { Component, useState, useEffect } from "react";
-import { Link } from "react-router-dom";
+import React, { Component, useEffect, useState } from "react";
 import {
   FileEarmarkFill,
-  FolderFill,
   Folder2Open,
+  FolderFill,
 } from "react-bootstrap-icons";
+import { Link } from "react-router-dom-v5-compat";
+
 import { Loader } from "./Loader";
 
 type HashElt = {

client/src/components/Tree.tsx

@@ -23,7 +23,7 @@ import {
   Diagram2,
   Link45deg,
 } from "react-bootstrap-icons";
-import { Link } from "react-router-dom";
+import { Link } from "react-router-dom-v5-compat";
 import { Col } from "reactstrap";
 import { simpleHash } from "../utils/helpers/HelperFunctions";
 import LinkWithTooltip from "./LinkWithTooltip";

client/src/components/buttons/Button.tsx

@@ -34,7 +34,7 @@ import {
   PlusLg,
   ThreeDotsVertical,
 } from "react-bootstrap-icons";
-import { Link } from "react-router-dom";
+import { Link } from "react-router-dom-v5-compat";
 import {
   Button,
   ButtonDropdown,

client/src/components/earlyAccessBanner/EarlyAccessBanner.tsx

@@ -16,8 +16,7 @@
  * limitations under the License.
  */
 import cx from "classnames";
-import { useLocation } from "react-router-dom";
-import { Link } from "react-router-dom-v5-compat";
+import { Link, useLocation } from "react-router-dom-v5-compat";
 import { Alert, Container } from "reactstrap";
 import { Links } from "../../utils/constants/Docs.js";
 import { Url } from "../../utils/helpers/url";

client/src/components/entities/Buttons.tsx

@@ -26,7 +26,7 @@
 import { faCog, faPen, faTrash } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Funnel, FunnelFill } from "react-bootstrap-icons";
-import { Link } from "react-router-dom";
+import { Link } from "react-router-dom-v5-compat";
 import { Button, UncontrolledTooltip } from "reactstrap";
 import SimpleSessionButton from "../../features/session/components/SimpleSessionButton";
 import { stylesByItemType } from "../../utils/helpers/HelperFunctions";

client/src/components/entities/Description.tsx

@@ -17,7 +17,7 @@
  */
 
 import { CSSProperties, ReactNode } from "react";
-import { Link } from "react-router-dom";
+import { Link } from "react-router-dom-v5-compat";
 import cx from "classnames";
 
 import LazyRenkuMarkdown from "../markdown/LazyRenkuMarkdown";

client/src/components/entities/LinkedEntitiesByItemType.tsx

@@ -18,7 +18,7 @@
 
 import { ReactNode, useRef } from "react";
 import { Briefcase, HddStack } from "react-bootstrap-icons";
-import { Link } from "react-router-dom";
+import { Link } from "react-router-dom-v5-compat";
 import { UncontrolledTooltip } from "reactstrap";
 import { stylesByItemType } from "../../utils/helpers/HelperFunctions";
 import { LoadingLabel } from "../formlabels/FormLabels";

client/src/components/form-field/DropzoneFileUploader.jsx

@@ -30,7 +30,7 @@ import {
   UncontrolledCollapse,
   UncontrolledTooltip,
 } from "reactstrap";
-import { Link } from "react-router-dom";
+import { Link } from "react-router-dom-v5-compat";
 import Dropzone from "dropzone";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {

client/src/components/kgStatus/KgStatus.tsx

@@ -18,7 +18,7 @@
 
 import { skipToken } from "@reduxjs/toolkit/query";
 import { useEffect, useState } from "react";
-import { Link } from "react-router-dom";
+import { Link } from "react-router-dom-v5-compat";
 import { Progress } from "reactstrap";
 
 import { ProjectIndexingStatuses } from "../../features/project/projectEnums";

client/src/components/list/ListBar.tsx

@@ -17,7 +17,7 @@
  */
 
 import cx from "classnames";
-import { Link } from "react-router-dom";
+import { Link } from "react-router-dom-v5-compat";
 import { EntityType } from "../../features/kgSearch";
 import SessionButton from "../../features/session/components/SessionButton";
 import { stylesByItemType } from "../../utils/helpers/HelperFunctions";

client/src/components/list/ListBarSessions.tsx

@@ -20,7 +20,7 @@ import { faInfoCircle } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import cx from "classnames";
 import { Fragment, useContext, useEffect, useRef, useState } from "react";
-import { Link } from "react-router-dom";
+import { Link } from "react-router-dom-v5-compat";
 import { PopoverBody, PopoverHeader, UncontrolledPopover } from "reactstrap";
 import SessionButton from "../../features/session/components/SessionButton";
 import SessionStatusBadge from "../../features/session/components/status/SessionStatusBadge";

client/src/components/list/ListCard.tsx

@@ -18,7 +18,7 @@
 
 import cx from "classnames";
 import type { CSSProperties } from "react";
-import { Link } from "react-router-dom";
+import { Link } from "react-router-dom-v5-compat";
 
 import { stylesByItemType } from "../../utils/helpers/HelperFunctions";
 import { TimeCaption } from "../TimeCaption";

client/src/components/navbar/AnonymousNavBar.tsx

@@ -19,7 +19,7 @@
 import cx from "classnames";
 import { useCallback, useState } from "react";
 import { List, Search } from "react-bootstrap-icons";
-import { Link } from "react-router-dom";
+import { Link } from "react-router-dom-v5-compat";
 import { Collapse, Nav, NavItem, Navbar, NavbarToggler } from "reactstrap";
 
 import StatusBanner from "../../features/platform/components/StatusBanner";

client/src/components/navbar/LoggedInNavBar.tsx

@@ -19,7 +19,7 @@
 import cx from "classnames";
 import { useCallback, useState } from "react";
 import { List, Search } from "react-bootstrap-icons";
-import { Link } from "react-router-dom";
+import { Link } from "react-router-dom-v5-compat";
 import { Collapse, Nav, NavItem, Navbar, NavbarToggler } from "reactstrap";
 import StatusBanner from "../../features/platform/components/StatusBanner";
 import { NavBarWarnings } from "../../landing/NavBarWarnings";

client/src/components/navbar/NavBarItems.tsx

@@ -23,7 +23,7 @@ import {
   QuestionCircle,
 } from "react-bootstrap-icons";
 import { useLocation } from "react-router";
-import { Link } from "react-router-dom";
+import { Link } from "react-router-dom-v5-compat";
 import {
   DropdownItem,
   DropdownMenu,

client/src/components/shareLinkSession/ShareLinkSession.tsx

@@ -18,7 +18,7 @@
 import { faInfoCircle, faLink } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { ChangeEvent, useEffect, useState } from "react";
-import { useHistory, useLocation } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router-dom-v5-compat";
 import {
   Button,
   Col,
@@ -270,7 +270,7 @@ const ShareLinkSessionOpenFileModal = ({
 }: ShareLinkSessionOpenFileModalProps) => {
   const [url, setUrl] = useState("");
   const location = useLocation();
-  const history = useHistory();
+  const navigate = useNavigate();
 
   useEffect(() => {
     const data = {
@@ -289,11 +289,15 @@ const ShareLinkSessionOpenFileModal = ({
   const goToSpecifyCommit = () => {
     const search = new URLSearchParams({ filePath, showCreateLink: "1" });
     const state = { from: location.pathname };
-    history.push({
-      pathname: launchNotebookUrl,
-      search: search.toString(),
-      state,
-    });
+    navigate(
+      {
+        pathname: launchNotebookUrl,
+        search: search.toString(),
+      },
+      {
+        state,
+      }
+    );
   };
 
   const markdown = `[![launch - renku](${Url.get(

client/src/components/ssh/ssh.tsx

@@ -18,7 +18,7 @@
 
 import { skipToken } from "@reduxjs/toolkit/query";
 import { useContext } from "react";
-import { Link } from "react-router-dom";
+import { Link } from "react-router-dom-v5-compat";
 import { DropdownItem, Modal, ModalBody, ModalHeader } from "reactstrap";
 
 import {

client/src/dataset/addtoproject/DatasetAddToNewProject.tsx

@@ -17,7 +17,7 @@
  */
 
 import { useContext, useEffect, useState } from "react";
-import { Link } from "react-router-dom";
+import { Link } from "react-router-dom-v5-compat";
 
 import { WarnAlert } from "../../components/Alert";
 import { Loader } from "../../components/Loader";

client/src/dataset/addtoproject/DatasetAddToProjectStatus.tsx

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import { Link } from "react-router-dom";
+import { Link } from "react-router-dom-v5-compat";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
   faCheck,

client/src/features/dashboard/components/DatasetsDashboard.tsx

@@ -17,7 +17,7 @@
  */
 import { Fragment } from "react";
 import { Search } from "react-bootstrap-icons";
-import { Link } from "react-router-dom";
+import { Link } from "react-router-dom-v5-compat";
 import { SortingOptions } from "../../../components/sortingEntities/SortingEntities";
 import {
   SearchEntitiesQueryParams,

client/src/features/dashboard/components/InactiveKgProjects.tsx

@@ -15,7 +15,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { Link } from "react-router-dom";
+import { Link } from "react-router-dom-v5-compat";
 
 import { WarnAlert } from "../../../components/Alert";
 import useAppSelector from "../../../utils/customHooks/useAppSelector.hook";

client/src/features/dashboard/components/ProjectsDashboard.tsx

@@ -22,7 +22,7 @@ import { skipToken } from "@reduxjs/toolkit/query";
 import cx from "classnames";
 import { Fragment, useContext, useEffect, useMemo, useState } from "react";
 import { Search } from "react-bootstrap-icons";
-import { Link } from "react-router-dom";
+import { Link } from "react-router-dom-v5-compat";
 
 import { InfoAlert, WarnAlert } from "../../../components/Alert";
 import { ExternalLink } from "../../../components/ExternalLinks";

client/src/features/project/components/ProjectSettingsSessions.tsx

@@ -27,7 +27,7 @@ import { skipToken } from "@reduxjs/toolkit/query";
 import cx from "classnames";
 import { debounce } from "lodash-es";
 import { ReactNode, useCallback, useEffect, useMemo, useState } from "react";
-import { Link } from "react-router-dom";
+import { Link } from "react-router-dom-v5-compat";
 import {
   Badge,
   Button,

client/src/features/project/components/migrations/ProjectKgStatus.tsx

@@ -24,7 +24,7 @@ import {
   faTimesCircle,
 } from "@fortawesome/free-solid-svg-icons";
 import { useEffect, useState } from "react";
-import { Link } from "react-router-dom";
+import { Link } from "react-router-dom-v5-compat";
 import { Collapse } from "reactstrap";
 
 import { RtkErrorAlert } from "../../../../components/errors/RtkErrorAlert";

client/src/features/project/dataset/ProjectDatasetsListView.tsx

@@ -1,5 +1,5 @@
 import { Fragment, useMemo, useRef } from "react";
-import { Link } from "react-router-dom";
+import { Link } from "react-router-dom-v5-compat";
 import { Button, Col, Row, UncontrolledTooltip } from "reactstrap";
 
 import { ACCESS_LEVELS } from "../../../api-client";

client/src/features/session/components/PauseOrDeleteSessionModal.tsx

@@ -21,7 +21,7 @@ import { FetchBaseQueryError } from "@reduxjs/toolkit/query";
 import cx from "classnames";
 import { Duration } from "luxon";
 import { useCallback, useContext, useEffect, useState } from "react";
-import { Redirect } from "react-router";
+import { Navigate } from "react-router-dom-v5-compat";
 import { Button, Col, Modal, ModalBody, ModalHeader, Row } from "reactstrap";
 
 import { InfoAlert } from "../../../components/Alert";
@@ -132,7 +132,7 @@ function AnonymousDeleteSessionModal({
   }, [error, notifications]);
 
   if (isSuccess && !isWaiting) {
-    return <Redirect push to={sessionsListUrl} />;
+    return <Navigate to={sessionsListUrl} />;
   }
 
   return (
@@ -249,7 +249,7 @@ function PauseSessionModalBody({
   }, [error, notifications]);
 
   if (isSuccess && !isWaiting) {
-    return <Redirect push to={sessionsListUrl} />;
+    return <Navigate to={sessionsListUrl} />;
   }
 
   const annotations = session
@@ -365,7 +365,7 @@ function DeleteSessionModalBody({
   }, [error, notifications]);
 
   if (isSuccess && !isWaiting) {
-    return <Redirect push to={sessionsListUrl} />;
+    return <Navigate to={sessionsListUrl} />;
   }
 
   const annotations = session

client/src/features/session/components/ProjectSessionsRouter.tsx

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import { Route, Switch } from "react-router";
+import { Route, Routes } from "react-router-dom-v5-compat";
 import { Col } from "reactstrap";
 
 import useLegacySelector from "../../../utils/customHooks/useLegacySelector.hook";
@@ -44,26 +44,25 @@ export default function ProjectSessionsRouter() {
   const startSessionUrl = Url.get(
     Url.pages.project.session.new,
     projectUrlData
-  );
+  ).slice(sessionsListUrl.length);
   const sessionShowUrl = Url.get(Url.pages.project.session.show, {
     namespace,
     path,
     server: ":server",
-  });
+  }).slice(sessionsListUrl.length);
 
   return (
     <Col key="content" xs={12}>
-      <Switch>
-        <Route exact path={sessionsListUrl}>
-          <ProjectSessionsList projectPathWithNamespace={pathWithNamespace} />
-        </Route>
-        <Route path={startSessionUrl}>
-          <StartNewSession />
-        </Route>
-        <Route path={sessionShowUrl}>
-          <ShowSession />
-        </Route>
-      </Switch>
+      <Routes>
+        <Route
+          index
+          element={
+            <ProjectSessionsList projectPathWithNamespace={pathWithNamespace} />
+          }
+        />
+        <Route path={startSessionUrl} element={<StartNewSession />} />
+        <Route path={sessionShowUrl} element={<ShowSession />} />
+      </Routes>
     </Col>
   );
 }

client/src/features/session/components/SessionButton.tsx

@@ -29,7 +29,7 @@ import { FetchBaseQueryError, skipToken } from "@reduxjs/toolkit/query";
 import cx from "classnames";
 import { useCallback, useContext, useEffect, useMemo, useState } from "react";
 import { CheckLg, Tools, XLg } from "react-bootstrap-icons";
-import { Link, useHistory } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom-v5-compat";
 import { SingleValue } from "react-select";
 import {
   Button,
@@ -184,7 +184,7 @@ interface SessionActionsProps {
 }
 
 function SessionActions({ className, session }: SessionActionsProps) {
-  const history = useHistory();
+  const navigate = useNavigate();
 
   const { notifications } = useContext(AppContext);
 
@@ -227,12 +227,12 @@ function SessionActions({ className, session }: SessionActionsProps) {
   });
   useEffect(() => {
     if (isSuccessResumeSession && !isWaitingForResumedSession) {
-      history.push({ pathname: showSessionUrl });
+      navigate({ pathname: showSessionUrl });
     }
   }, [
-    history,
     isSuccessResumeSession,
     isWaitingForResumedSession,
+    navigate,
     showSessionUrl,
   ]);
   useEffect(() => {

client/src/features/session/components/SessionJupyter.tsx

@@ -17,7 +17,8 @@
  */
 
 import cx from "classnames";
-import { useLocation } from "react-router";
+import { type Location, useLocation } from "react-router-dom-v5-compat";
+
 import { appendCustomUrlPath } from "../../../utils/helpers/url";
 import { Session } from "../sessions.types";
 
@@ -32,7 +33,7 @@ export default function SessionJupyter({
   isSessionReady,
   session,
 }: SessionJupyterProps) {
-  const location = useLocation<{ filePath?: string } | undefined>();
+  const location: Location<{ filePath?: string } | undefined> = useLocation();
 
   if (session.status.state !== "running") {
     return null;