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

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

@@ -27,7 +27,6 @@ type ProjectFileLineageProps = {
   client: unknown;
   fetchBranches: unknown;
   filePath: string;
-  history: unknown;
   location: {
     pathname: string;
   };
@@ -91,7 +90,6 @@ function ProjectFileLineage(props: ProjectFileLineageProps) {
       forked={forked}
       gitFilePath={gitFilePath}
       hashElement={filesTree ? filesTree.hash[props.filePath] : undefined}
-      history={props.history}
       httpProjectUrl={httpProjectUrl}
       insideProject={true}
       launchNotebookUrl={sessionNewUrl}
@@ -170,7 +168,6 @@ function ProjectFileView(props: ProjectFileViewProps) {
       filesTree={filesTree}
       forked={forked}
       hashElement={filesTree ? filesTree.hash[props.filePath] : undefined}
-      history={props.history}
       httpProjectUrl={httpProjectUrl}
       insideProject={true}
       lineagesPath={lineagesUrl}

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

@@ -19,7 +19,7 @@
 import { SerializedError } from "@reduxjs/toolkit";
 import { FetchBaseQueryError } from "@reduxjs/toolkit/query/react";
 import { ChangeEvent, useCallback, useEffect, useState } from "react";
-import { useHistory } from "react-router";
+import { useNavigate } from "react-router-dom-v5-compat";
 import {
   Button,
   Card,
@@ -31,6 +31,7 @@ import {
   Modal,
   ModalBody,
 } from "reactstrap";
+
 import { ErrorAlert } from "../../../components/Alert";
 import { Loader } from "../../../components/Loader";
 import { NOTIFICATION_TOPICS } from "../../../notifications/Notifications.constants";
@@ -78,13 +79,13 @@ export const ProjectSettingsGeneralDeleteProject = ({
     setShowModal((showModal) => !showModal);
   }, []);
 
-  const history = useHistory();
+  const navigate = useNavigate();
   useEffect(() => {
     if (result.isSuccess) {
       addNotification({ notifications, projectPathWithNamespace });
-      history.push("/");
+      navigate("/");
     }
-  }, [history, notifications, projectPathWithNamespace, result.isSuccess]);
+  }, [navigate, notifications, projectPathWithNamespace, result.isSuccess]);
   useEffect(() => {
     if (result.isError) {
       setConfirmText("");

client/src/file/File.container.jsx

@@ -173,7 +173,6 @@ class ShowFile extends React.Component {
         projectPathWithNamespace={this.props.projectPathWithNamespace}
         hashElement={this.props.hashElement}
         fileSize={fileSize}
-        history={this.props.history}
         previewThreshold={previewThreshold}
         fileInfo={this.state.fileInfo}
         branch={this.props.branch}

client/src/file/File.present.jsx

@@ -158,7 +158,6 @@ class ShowFile extends React.Component {
       this.props.lineagesPath !== undefined ? (
         <FileAndLineageSwitch
           insideFile={true}
-          history={this.props.history}
           switchToPath={`${this.props.lineagesPath}/${gitLabFilePath}`}
         />
       ) : null;

client/src/file/FileAndLineageComponents.tsx

@@ -17,11 +17,11 @@
  */
 
 import { useRef } from "react";
+import { Diagram2, FileEarmarkFill } from "react-bootstrap-icons";
+import { useNavigate } from "react-router-dom-v5-compat";
 import { Button, ButtonGroup, UncontrolledTooltip } from "reactstrap";
-import { FileEarmarkFill, Diagram2 } from "react-bootstrap-icons";
 
 import "../../node_modules/highlight.js/styles/atom-one-light.css";
-import { useHistory } from "react-router-dom";
 
 interface FileAndLineageSwitchProps {
   switchToPath: string;
@@ -33,10 +33,10 @@ export default function FileAndLineageSwitch({
 }: FileAndLineageSwitchProps) {
   const fileIconRef = useRef(null);
   const lineageIconRef = useRef(null);
-  const history = useHistory();
+  const navigate = useNavigate();
 
   const performSwitch = () => {
-    history.push(switchToPath);
+    navigate(switchToPath);
   };
 
   return (

client/src/file/Lineage.present.jsx

@@ -16,19 +16,20 @@
  * limitations under the License.
  */
 
-import { Component } from "react";
-import { Badge, CardBody, Card, CardHeader } from "reactstrap";
-import * as dagreD3 from "dagre-d3-es";
 import * as d3 from "d3";
+import * as dagreD3 from "dagre-d3-es";
+import { Component } from "react";
 import { Download } from "react-bootstrap-icons";
+import { useNavigate } from "react-router-dom-v5-compat";
+import { Badge, Card, CardBody, CardHeader } from "reactstrap";
 
-import BootstrapGitLabIcon from "../components/icons/BootstrapGitLabIcon";
-import { formatBytes } from "../utils/helpers/HelperFunctions";
-import FileAndLineageSwitch from "./FileAndLineageComponents";
 import { ExternalIconLink } from "../components/ExternalLinks";
 import { Clipboard } from "../components/clipboard/Clipboard";
+import BootstrapGitLabIcon from "../components/icons/BootstrapGitLabIcon";
 import { KgStatusWrapper } from "../components/kgStatus/KgStatus";
 import SessionFileButton from "../features/session/components/SessionFileButton";
+import { formatBytes } from "../utils/helpers/HelperFunctions";
+import FileAndLineageSwitch from "./FileAndLineageComponents";
 
 import "./Lineage.css";
 
@@ -195,7 +196,7 @@ class FileLineageGraph extends Component {
       svgGroup = svg.select("g");
     }
 
-    const history = this.props.history;
+    const navigate = this.props.navigate;
 
     render(svgGroup, g);
 
@@ -220,7 +221,7 @@ class FileLineageGraph extends Component {
         d3.select(this).attr("r", 25).style("text-decoration-line", "unset");
       })
       .on("click", function () {
-        history.push(d3.select(this).attr("data-href"));
+        navigate(d3.select(this).attr("data-href"));
       });
 
     // Center the graph
@@ -262,13 +263,15 @@ class FileLineageGraph extends Component {
 }
 
 function FileLineageWrapped(props) {
+  const navigate = useNavigate();
+
   return (
     <KgStatusWrapper
       maintainer={props.maintainer}
       projectId={props.projectId}
       projectName={props.projectPath}
     >
-      <FileLineage {...props} />
+      <FileLineage {...props} navigate={navigate} />
     </KgStatusWrapper>
   );
 }
@@ -282,7 +285,7 @@ class FileLineage extends Component {
         graph={graph}
         currentNode={currentNode}
         lineagesUrl={this.props.lineagesUrl}
-        history={this.props.history}
+        navigate={this.props.navigate}
       />
     ) : this.props.error ? (
       <p>{this.props.error}</p>
@@ -302,7 +305,7 @@ class FileLineage extends Component {
       filePath !== undefined && currentNode.type !== "Directory" ? (
         <FileAndLineageSwitch
           insideFile={false}
-          history={this.props.history}
+          navigate={this.props.navigate}
           switchToPath={filePath}
         />
       ) : null;

client/src/project/Project.jsx

@@ -23,15 +23,15 @@
  *  Container components for project.
  */
 
+import { groupBy } from "lodash-es";
+import qs from "query-string";
 import { Component } from "react";
 import { connect } from "react-redux";
-import { groupBy } from "lodash-es";
 
-import Present from "./Project.present";
-import { ProjectCoordinator, MigrationStatus } from "./Project.state";
 import { ACCESS_LEVELS, API_ERRORS } from "../api-client";
-import qs from "query-string";
 import { DatasetCoordinator } from "../dataset/Dataset.state";
+import Present from "./Project.present";
+import { MigrationStatus, ProjectCoordinator } from "./Project.state";
 
 const subRoutes = {
   overview: "overview",
@@ -167,12 +167,12 @@ function refreshTrigger(thing) {
 
 function mapProjectStateToProps(state, ownProps) {
   const projectCoordinator = ownProps.projectCoordinator;
-  const pathComponents = splitProjectSubRoute(ownProps.match.url);
+  const pathComponents = splitProjectSubRoute(ownProps.location.pathname);
   const accessLevel = projectCoordinator.get("metadata.accessLevel");
   const settingsReadOnly = accessLevel < ACCESS_LEVELS.MAINTAINER;
   const externalUrl = projectCoordinator.get("metadata.externalUrl");
   const canCreateMR = accessLevel >= ACCESS_LEVELS.DEVELOPER;
-  const pathname = ownProps.history.location.pathname;
+  const pathname = ownProps.location.pathname;
   const isOnDatasetEditPage =
     pathname.endsWith("datasets/new") || pathname.endsWith("modify");
 
@@ -211,7 +211,7 @@ class View extends Component {
   }
 
   componentDidMount() {
-    const pathComponents = splitProjectSubRoute(this.props.match.url);
+    const pathComponents = splitProjectSubRoute(this.props.location.pathname);
     if (
       pathComponents.projectPathWithNamespace == null &&
       pathComponents.projectId != null
@@ -255,8 +255,8 @@ class View extends Component {
   }
 
   componentDidUpdate(prevProps) {
-    const prevPathComps = splitProjectSubRoute(prevProps.match.url);
-    const pathComps = splitProjectSubRoute(this.props.match.url);
+    const prevPathComps = splitProjectSubRoute(prevProps.location.pathname);
+    const pathComps = splitProjectSubRoute(this.props.location.pathname);
     if (
       prevPathComps.projectPathWithNamespace !==
       pathComps.projectPathWithNamespace
@@ -270,7 +270,7 @@ class View extends Component {
 
   async fetchProject() {
     // fetch the main project data, fetch branches and commits (exception for auto-starting links)
-    const pathComponents = splitProjectSubRoute(this.props.match.url);
+    const pathComponents = splitProjectSubRoute(this.props.location.pathname);
     const projectData = await this.projectCoordinator.fetchProject(
       this.props.client,
       pathComponents.projectPathWithNamespace
@@ -329,7 +329,7 @@ class View extends Component {
 
   async fetchAll() {
     // Get the project main data
-    const pathComponents = splitProjectSubRoute(this.props.match.url);
+    const pathComponents = splitProjectSubRoute(this.props.location.pathname);
     let projectData = null;
     if (pathComponents.projectPathWithNamespace)
       projectData = await this.fetchProject();
@@ -344,7 +344,7 @@ class View extends Component {
     this.props.client
       .getProjectById(projectId)
       .then((project) => {
-        this.props.history.push(
+        this.props.navigate(
           "/projects/" + project.data.metadata.core.path_with_namespace
         );
       })
@@ -361,7 +361,7 @@ class View extends Component {
     this.props.client
       .getProjectById(projectPathWithNamespace.split("/")[0])
       .then((project) => {
-        this.props.history.push(
+        this.props.navigate(
           "/projects/" +
             project.data.metadata.core.path_with_namespace +
             urlInsideProject
@@ -377,14 +377,12 @@ class View extends Component {
     )
       return "";
     return this.props.location.pathname
-      .replace(this.props.match.projectPath, "")
       .replace(subUrls.lineagesUrl, "")
       .replace(subUrls.fileContentUrl, "");
   }
 
   getSubUrls() {
-    const match = this.props.match;
-    const pathComponents = splitProjectSubRoute(match.url);
+    const pathComponents = splitProjectSubRoute(this.props.location.pathname);
     const baseUrl = pathComponents.baseUrl;
     const filesUrl = `${baseUrl}/files`;
     const fileContentUrl = `${filesUrl}/blob`;
@@ -538,8 +536,8 @@ function withProjectMapped(MappingComponent, features = [], passProps = true) {
 
 export default { View };
 export {
-  MigrationStatus,
   mapProjectFeatures,
+  MigrationStatus,
   splitProjectSubRoute,
   withProjectMapped,
 };