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

client/src/App.jsx

@@ -161,7 +161,7 @@ function CentralContentContainer(props) {
               model={props.model}
             />
           </Route>
-          <Route path="/datasets/:identifier">
+          <CompatRoute path="/datasets/:identifier">
             <LazyShowDataset
               insideProject={false}
               client={props.client}
@@ -175,7 +175,7 @@ function CentralContentContainer(props) {
               logged={props.user.logged}
               model={props.model}
             />
-          </Route>
+          </CompatRoute>
           <CompatRoute path="/datasets">
             <Redirect to="/search?type=dataset" />
           </CompatRoute>

client/src/dataset/Dataset.container.jsx

@@ -17,15 +17,14 @@
  */
 
 import { useEffect, useState } from "react";
-import { useHistory, useParams } from "react-router";
+import { useLocation, useParams } from "react-router-dom-v5-compat";
 
 import { useCoreSupport } from "../features/project/useProjectCoreSupport";
 import useLegacySelector from "../utils/customHooks/useLegacySelector.hook";
 import DatasetView from "./Dataset.present";
 
 export default function ShowDataset(props) {
-  const history = useHistory();
-  const location = history.location;
+  const location = useLocation();
 
   const { identifier: identifier_ } = useParams();
   const identifier = identifier_?.replaceAll("-", "");
@@ -160,7 +159,6 @@ export default function ShowDataset(props) {
       fetchError={dataset?.fetchError}
       fetchedKg={dataset?.fetched}
       fileContentUrl={props.fileContentUrl}
-      history={history}
       identifier={identifier}
       insideProject={props.insideProject}
       lineagesUrl={props.lineagesUrl}

client/src/dataset/Dataset.present.jsx

@@ -18,10 +18,10 @@
 
 import { faPen, faPlus } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { isEmpty, groupBy } from "lodash-es";
+import { groupBy, isEmpty } from "lodash-es";
 import { useState } from "react";
 import { Helmet } from "react-helmet";
-import { Link, useHistory } from "react-router-dom";
+import { Link, useLocation, useNavigate } from "react-router-dom-v5-compat";
 import {
   Button,
   Card,
@@ -42,16 +42,16 @@ import { CoreErrorAlert } from "../components/errors/CoreErrorAlert";
 import { CoreError } from "../components/errors/CoreErrorHelpers";
 import LazyRenkuMarkdown from "../components/markdown/LazyRenkuMarkdown";
 import DeleteDataset from "../project/datasets/delete";
+import useLegacySelector from "../utils/customHooks/useLegacySelector.hook";
 import { toHumanDateTime } from "../utils/helpers/DateTimeUtils";
+import { getEntityImageUrl } from "../utils/helpers/HelperFunctions";
 import { Url } from "../utils/helpers/url";
 import { DatasetError } from "./DatasetError";
 import {
   cleanModifyLocation,
   getDatasetAuthors,
   getUpdatedDatasetImage,
 } from "./DatasetFunctions";
-import { getEntityImageUrl } from "../utils/helpers/HelperFunctions";
-import useLegacySelector from "../utils/customHooks/useLegacySelector.hook";
 
 function DisplayFiles(props) {
   if (!props.files || !props.files?.hasPart) return null;
@@ -271,21 +271,22 @@ function DisplayInfoTable(props) {
 }
 
 function ErrorAfterCreation(props) {
+  const location = useLocation();
+
   const editButton = (
     <Link
       className="float-right me-1 mb-1"
       id="editDatasetTooltip"
-      to={(location) =>
-        cleanModifyLocation(location, { dataset: props.dataset })
-      }
+      to={cleanModifyLocation(location)}
+      state={{ dataset: props.dataset }}
     >
       <Button size="sm" color="danger" className="btn-icon-text">
         <FontAwesomeIcon icon={faPen} color="dark" /> Edit
       </Button>
     </Link>
   );
 
-  return props.location.state && props.location.state.errorOnCreation ? (
+  return location.state && location.state.errorOnCreation ? (
     <ErrorAlert>
       <strong>Error on creation</strong>
       <br />
@@ -297,10 +298,11 @@ function ErrorAfterCreation(props) {
 }
 
 function AddToProjectButton({ insideKg, locked, logged, identifier }) {
-  const history = useHistory();
+  const navigate = useNavigate();
+
   const addDatasetUrl = `/datasets/${identifier}/add`;
   const goToAddToProject = () => {
-    if (history) history.push(addDatasetUrl);
+    navigate(addDatasetUrl);
   };
 
   const tooltip =
@@ -344,6 +346,8 @@ function EditDatasetButton({
   locked,
   maintainer,
 }) {
+  const location = useLocation();
+
   if (!insideProject || !maintainer) return null;
   if (locked) {
     return (
@@ -367,14 +371,8 @@ function EditDatasetButton({
       className="float-right mb-1"
       id="editDatasetTooltip"
       data-cy="edit-dataset-button"
-      to={(location) =>
-        cleanModifyLocation(location, {
-          dataset,
-          files,
-          isFilesFetching,
-          filesFetchError,
-        })
-      }
+      to={cleanModifyLocation(location)}
+      state={{ dataset, files, isFilesFetching, filesFetchError }}
     >
       <Button
         className="btn-outline-rk-pink icon-button"
@@ -499,7 +497,7 @@ export default function DatasetView(props) {
       }
     >
       <Col>
-        <ErrorAfterCreation location={props.location} dataset={dataset} />
+        <ErrorAfterCreation dataset={dataset} />
         {props.insideProject ? null : (
           <Helmet>
             <title>{pageTitle}</title>
@@ -591,7 +589,6 @@ export default function DatasetView(props) {
             client={props.client}
             dataset={dataset}
             externalUrl={props.externalUrl}
-            history={props.history}
             metadataVersion={props.metadataVersion}
             modalOpen={deleteDatasetModalOpen}
             projectPathWithNamespace={props.projectPathWithNamespace}

client/src/dataset/DatasetFunctions.js

@@ -70,14 +70,12 @@ export { mapDataset, getDatasetAuthors, getUpdatedDatasetImage };
  * Prevents issues with the leading slash  on the dataset modify link.
  *
  * @param {*} location - current location object
- * @param {*} newState - any new state to set
  */
-export function cleanModifyLocation(location, newState) {
+export function cleanModifyLocation(location) {
   return {
     ...location,
     pathname: location.pathname.endsWith("/")
       ? location.pathname + "modify"
       : location.pathname + "/modify",
-    state: newState,
   };
 }

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

@@ -20,7 +20,11 @@ import cx from "classnames";
 import React from "react";
 import type { FieldErrors } from "react-hook-form";
 import { SubmitHandler, useForm } from "react-hook-form";
-import { useHistory } from "react-router-dom";
+import {
+  type NavigateFunction,
+  useLocation,
+  useNavigate,
+} from "react-router-dom-v5-compat";
 import { Button, FormGroup, UncontrolledAlert } from "reactstrap";
 
 import { ExternalLink } from "../../../components/ExternalLinks";
@@ -70,7 +74,7 @@ export type PostSubmitProps = {
   datasetId: string;
   dispatch: AppDispatch;
   fetchDatasets: (forceRefetch: boolean, versionUrl: string) => Promise<void>;
-  history: DatasetModifyProps["history"];
+  navigate: NavigateFunction;
   projectPathWithNamespace: string;
   state?: unknown;
   versionUrl: string;
@@ -79,15 +83,14 @@ async function redirectAfterSubmit({
   datasetId,
   dispatch,
   fetchDatasets,
-  history,
+  navigate,
   projectPathWithNamespace,
   state,
   versionUrl,
 }: PostSubmitProps) {
   dispatch(reset());
   await fetchDatasets(true, versionUrl);
-  history.push({
-    pathname: `/projects/${projectPathWithNamespace}/datasets/${datasetId}`,
+  navigate(`/projects/${projectPathWithNamespace}/datasets/${datasetId}`, {
     state,
   });
 }
@@ -359,9 +362,7 @@ export interface DatasetModifyProps extends DatasetModifyDisplayProps {
   existingFiles: DatasetModifyFormProps["existingFiles"];
   externalUrl: string;
   fetchDatasets: PostSubmitProps["fetchDatasets"];
-  history: ReturnType<typeof useHistory>;
   initialized: boolean;
-  location: { pathname: string };
   metadataVersion: number | undefined;
   notifications: unknown;
   onCancel: () => void;
@@ -380,15 +381,16 @@ export default function DatasetModify(props: DatasetModifyProps) {
     defaultBranch,
     externalUrl,
     fetchDatasets,
-    history,
-    location,
     metadataVersion,
     overviewCommitsUrl,
     projectPathWithNamespace,
     setSubmitting,
     versionUrl,
   } = props;
 
+  const location = useLocation();
+  const navigate = useNavigate();
+
   const edit = dataset != null;
   const slug = dataset?.slug;
 
@@ -487,7 +489,7 @@ export default function DatasetModify(props: DatasetModifyProps) {
                 await redirectAfterSubmit({
                   datasetId: dataset?.slug ?? response.data.slug,
                   fetchDatasets,
-                  history,
+                  navigate,
                   projectPathWithNamespace,
                   state: undefined,
                   dispatch,
@@ -524,7 +526,7 @@ export default function DatasetModify(props: DatasetModifyProps) {
                     await redirectAfterSubmit({
                       datasetId: response.data.slug,
                       fetchDatasets,
-                      history,
+                      navigate,
                       projectPathWithNamespace,
                       state: { errorOnCreation: true },
                       dispatch,
@@ -541,7 +543,7 @@ export default function DatasetModify(props: DatasetModifyProps) {
                   await redirectAfterSubmit({
                     datasetId: dataset?.slug ?? response.data.slug,
                     fetchDatasets,
-                    history,
+                    navigate,
                     projectPathWithNamespace,
                     state: undefined,
                     dispatch,
@@ -599,7 +601,7 @@ export default function DatasetModify(props: DatasetModifyProps) {
       edit,
       externalUrl,
       fetchDatasets,
-      history,
+      navigate,
       metadataVersion,
       slug,
       postDatasetMutation,

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

@@ -6,8 +6,6 @@ import type { StateModelProject } from "../project.types";
 type ProjectDatasetImportProps = {
   client: DatasetImportProps["client"];
   fetchDatasets: DatasetImportProps["fetchDatasets"];
-  history: DatasetImportProps["history"];
-  location: DatasetImportProps["location"];
   model: unknown;
   notifications: unknown;
   params: unknown;
@@ -33,8 +31,6 @@ function ProjectDatasetImport(props: ProjectDatasetImportProps) {
       client={props.client}
       externalUrl={externalUrl}
       fetchDatasets={props.fetchDatasets}
-      history={props.history}
-      location={props.location}
       projectPathWithNamespace={projectPathWithNamespace}
       toggleNewDataset={props.toggleNewDataset}
     />

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

@@ -21,7 +21,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { SerializedError } from "@reduxjs/toolkit";
 import { FetchBaseQueryError } from "@reduxjs/toolkit/dist/query";
 import React from "react";
-import { useHistory } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router-dom-v5-compat";
 import { Alert, Button, Col } from "reactstrap";
 
 import { ACCESS_LEVELS } from "../../../api-client";
@@ -49,8 +49,6 @@ type ChangeDatasetProps = {
   apiVersion: string | undefined;
   client: DatasetPostClient;
   fetchDatasets: PostSubmitProps["fetchDatasets"];
-  history: ReturnType<typeof useHistory>;
-  location: { pathname: string };
   model: unknown;
   notifications: unknown;
   metadataVersion: number | undefined;
@@ -113,7 +111,9 @@ function ProjectDatasetNewEdit(props: ProjectDatasetNewEditProps) {
     projectUrlProps
   );
 
-  const { dataset, history, submitting, setSubmitting } = props;
+  const { dataset, submitting, setSubmitting } = props;
+
+  const navigate = useNavigate();
 
   const onCancel = React.useCallback(() => {
     const targetPath = { path: projectPathWithNamespace };
@@ -123,8 +123,8 @@ function ProjectDatasetNewEdit(props: ProjectDatasetNewEditProps) {
           dataset: dataset.slug,
         })
       : Url.get(Url.pages.project.datasets.base, { ...targetPath });
-    history.push({ pathname });
-  }, [dataset, history, projectPathWithNamespace]);
+    navigate(pathname);
+  }, [dataset, navigate, projectPathWithNamespace]);
 
   if (accessLevel < ACCESS_LEVELS.MAINTAINER) {
     return (
@@ -178,8 +178,6 @@ function ProjectDatasetNewEdit(props: ProjectDatasetNewEditProps) {
       externalUrl={projectMetadata.externalUrl}
       fetchDatasets={props.fetchDatasets}
       initialized={true}
-      history={props.history}
-      location={props.location}
       metadataVersion={props.metadataVersion}
       notifications={props.notifications}
       onCancel={onCancel}
@@ -198,7 +196,8 @@ function ProjectDatasetNew(
   props: Omit<ChangeDatasetProps, "submitting" | "setSubmitting"> &
     ProjectDatasetNewOnlyProps
 ) {
-  const location = props.location;
+  const location = useLocation();
+
   const project = useLegacySelector<StateModelProject>(
     (state) => state.stateModel.project
   );
@@ -230,8 +229,6 @@ function ProjectDatasetNew(
           apiVersion={props.apiVersion}
           client={props.client}
           fetchDatasets={props.fetchDatasets}
-          history={props.history}
-          location={props.location}
           metadataVersion={props.metadataVersion}
           model={props.model}
           notifications={props.notifications}
@@ -253,7 +250,7 @@ function ProjectDatasetEditForm(
     DatasetModifyDisplayProps &
     ProjectDatasetEditOnlyProps
 ) {
-  const location = props.location;
+  const location = useLocation();
   const project = useLegacySelector<StateModelProject>(
     (state) => state.stateModel.project
   );
@@ -279,8 +276,6 @@ function ProjectDatasetEditForm(
       datasetId={props.datasetId}
       fetchDatasets={props.fetchDatasets}
       files={files}
-      history={props.history}
-      location={props.location}
       metadataVersion={props.metadataVersion}
       model={props.model}
       notifications={props.notifications}
@@ -341,8 +336,6 @@ function ProjectDatasetEdit(props: ProjectDatasetEditProps) {
         datasetId={datasetId}
         fetchDatasets={props.fetchDatasets}
         files={props.files}
-        history={props.history}
-        location={props.location}
         metadataVersion={props.metadataVersion}
         model={props.model}
         notifications={props.notifications}