From b54c624fc6e1c28646e243c5298a28f90406407e Mon Sep 17 00:00:00 2001 From: Flora Thiebaut Date: Tue, 14 Jan 2025 14:46:03 +0100 Subject: [PATCH 01/10] refactor(client): some migration step for `react-router@v6` --- .../src/project/new/ProjectNew.container.jsx | 47 ++++++++++++------- 1 file changed, 30 insertions(+), 17 deletions(-) diff --git a/client/src/project/new/ProjectNew.container.jsx b/client/src/project/new/ProjectNew.container.jsx index 6680c5b15c..b2b13b78f5 100644 --- a/client/src/project/new/ProjectNew.container.jsx +++ b/client/src/project/new/ProjectNew.container.jsx @@ -31,8 +31,9 @@ import { useRef, useState, } from "react"; -import { useHistory } from "react-router"; +import { useNavigate } from "react-router-dom-v5-compat"; +import { useLoginUrl } from "../../authentication/useLoginUrl.hook"; import { Loader } from "../../components/Loader"; import { newProjectSchema } from "../../model/RenkuModels"; import AppContext from "../../utils/context/appContext"; @@ -57,7 +58,6 @@ import { checkTitleDuplicates, validateTitle, } from "./ProjectNew.state"; -import { useLoginUrl } from "../../authentication/useLoginUrl.hook"; const CUSTOM_REPO_NAME = "Custom"; @@ -90,18 +90,27 @@ function ForkProject(props) { const loginUrl = useLoginUrl(); - const history = useHistory(); + // const history = useHistory(); + + // const location = useLocation(); + const navigate = useNavigate(); + + // useEffect(() => { + // if ( + // !logged && + // typeof window === "object" && + // typeof window.location.assign === "function" + // ) { + // window.location.assign(loginUrl); + // } + // // This only needs to run once + // }, []); // eslint-disable-line react-hooks/exhaustive-deps useEffect(() => { - if ( - !logged && - typeof window === "object" && - typeof window.location.assign === "function" - ) { - window.location.assign(loginUrl); + if (!logged) { + navigate(loginUrl); } - // This only needs to run once - }, []); // eslint-disable-line react-hooks/exhaustive-deps + }, [logged, loginUrl, navigate]); // Monitor changes to projects list useEffect(() => { @@ -253,7 +262,8 @@ function ForkProject(props) { if (mounted.current && !visibilityError) { // addForkNotification(notifications, newUrl, newProjectData, startingLocation, true, false); - history.push(newUrl); + // history.push(newUrl); + navigate(newUrl); } else if (mounted.current && visibilityError) { setForking(false); // finish forking setForkUrl(newUrl); // allow display the button to go to the forked project @@ -379,7 +389,9 @@ function NewProjectWrapper(props) { function NewProject(props) { const { model, importingDataset, startImportDataset, coordinator } = props; const { params } = useContext(AppContext); - const history = useHistory(); + // const history = useHistory(); + // const location = useLocation(); + const navigate = useNavigate(); const user = useLegacySelector((state) => state.stateModel.user); const newProject = useLegacySelector((state) => state.stateModel.newProject); const [namespace, setNamespace] = useState(null); @@ -450,14 +462,14 @@ function NewProject(props) { setAutomatedData(data); if (!importingDataset) { const newUrl = Url.get(Url.pages.project.new); - history.push(newUrl); + navigate(newUrl); } } } catch (e) { // This usually happens when the link is wrong and the base64 string is broken coordinator.setAutomated(null, e); } - }, [coordinator, importingDataset, history]); + }, [coordinator, importingDataset, navigate]); const removeAutomated = useCallback( (manuallyReset = true) => { @@ -614,7 +626,8 @@ function NewProject(props) { const goToProject = () => { const slug = coordinator?.getSlugAndReset(); - history.push(`/projects/${slug}`); + // history.push(`/projects/${slug}`); + navigate(`/projects/${slug}`); }; const sendProjectToAddDataset = (projectPath) => { @@ -641,7 +654,7 @@ function NewProject(props) { if (!creation.kgError && !creation.projectError) { const slug = `${creation.newNamespace}/${creation.newNameSlug}`; if (importingDataset) sendProjectToAddDataset(slug); - else history.push(`/projects/${slug}`); + else navigate(`/projects/${slug}`); resetCreationResult(); } } From e0c332d67db40771851744256f49a8db63dbb349 Mon Sep 17 00:00:00 2001 From: Flora Thiebaut Date: Tue, 14 Jan 2025 14:52:07 +0100 Subject: [PATCH 02/10] cleanup --- .../src/project/new/ProjectNew.container.jsx | 18 ------------------ 1 file changed, 18 deletions(-) diff --git a/client/src/project/new/ProjectNew.container.jsx b/client/src/project/new/ProjectNew.container.jsx index b2b13b78f5..642f80b964 100644 --- a/client/src/project/new/ProjectNew.container.jsx +++ b/client/src/project/new/ProjectNew.container.jsx @@ -90,22 +90,8 @@ function ForkProject(props) { const loginUrl = useLoginUrl(); - // const history = useHistory(); - - // const location = useLocation(); const navigate = useNavigate(); - // useEffect(() => { - // if ( - // !logged && - // typeof window === "object" && - // typeof window.location.assign === "function" - // ) { - // window.location.assign(loginUrl); - // } - // // This only needs to run once - // }, []); // eslint-disable-line react-hooks/exhaustive-deps - useEffect(() => { if (!logged) { navigate(loginUrl); @@ -262,7 +248,6 @@ function ForkProject(props) { if (mounted.current && !visibilityError) { // addForkNotification(notifications, newUrl, newProjectData, startingLocation, true, false); - // history.push(newUrl); navigate(newUrl); } else if (mounted.current && visibilityError) { setForking(false); // finish forking @@ -389,8 +374,6 @@ function NewProjectWrapper(props) { function NewProject(props) { const { model, importingDataset, startImportDataset, coordinator } = props; const { params } = useContext(AppContext); - // const history = useHistory(); - // const location = useLocation(); const navigate = useNavigate(); const user = useLegacySelector((state) => state.stateModel.user); const newProject = useLegacySelector((state) => state.stateModel.newProject); @@ -626,7 +609,6 @@ function NewProject(props) { const goToProject = () => { const slug = coordinator?.getSlugAndReset(); - // history.push(`/projects/${slug}`); navigate(`/projects/${slug}`); }; From fe60f6522b9a00145ebc04b3a7366d0ca900ffd4 Mon Sep 17 00:00:00 2001 From: Flora Thiebaut Date: Wed, 15 Jan 2025 09:52:25 +0100 Subject: [PATCH 03/10] more work --- .../project/list/ProjectList.container.jsx | 33 +++++++++---------- .../src/project/new/ProjectNew.container.jsx | 4 +-- 2 files changed, 17 insertions(+), 20 deletions(-) diff --git a/client/src/project/list/ProjectList.container.jsx b/client/src/project/list/ProjectList.container.jsx index 7026fe6533..ed4e2f9593 100644 --- a/client/src/project/list/ProjectList.container.jsx +++ b/client/src/project/list/ProjectList.container.jsx @@ -18,7 +18,10 @@ import { isEqual } from "lodash-es"; import { useContext, useEffect, useState } from "react"; -import { useHistory } from "react-router"; +import { + useNavigate, + useLocation as useRouterLocation, +} from "react-router-dom-v5-compat"; import AppContext from "../../utils/context/appContext"; import useLegacySelector from "../../utils/customHooks/useLegacySelector.hook"; @@ -338,7 +341,7 @@ function useUserProjectSearch( * Check ProjectListRedirected for the functional component logic. */ function ProjectList() { - const history = useHistory(); + const navigate = useNavigate(); const { client } = useContext(AppContext); @@ -352,7 +355,7 @@ function ProjectList() { // Searching in own or starred projects if (section !== SECTION_MAP.all) { const newUrl = Url.get(Url.pages.projects.all, searchParams); - history.replace(newUrl); + navigate(newUrl, { replace: true }); return; } // filtering per user or group @@ -362,43 +365,37 @@ function ProjectList() { searchIn: SEARCH_IN_MAP.projects.value, }; const newUrl = Url.get(Url.pages.projects.all, newParams); - history.replace(newUrl); + navigate(newUrl, { replace: true }); return; } } - }, [history, user.logged]); + }, [navigate, user.logged]); - return ( - - ); + return ; } /** * Show list of projects, allowing advanced search. * - * @param {object} props.location - React location object. - * @param {object} props.history - React history object. * @param {object} props.client - client object. * @param {object} props.user - user object. */ function ProjectListRedirected(props) { + const location = useRouterLocation(); + const navigate = useNavigate(); + // *** Setup *** const [projects, setProjects] = useState(DEFAULT_PROJECTS); const [users, setUsers] = useState(DEFAULT_USERS_GROUPS); const [targetUser, setTargetUser] = useState(null); const [params, setParams] = useState({ ...getSearchParams(DEFAULT_PARAMS, CONVERSIONS), - section: getSection(props.location), + section: getSection(location), }); // *** Hooks *** // Monitor location changes and set params - useLocation(props.location, params, setParams, setTargetUser); + useLocation(location, params, setParams, setTargetUser); // Get new projects when params change (ONLY when searching in projects) useProjectSearchParams(props.client, params, setParams, setProjects); @@ -445,7 +442,7 @@ function ProjectListRedirected(props) { let addedParams = { ...modifiedParams, ...(newParams || {}) }; const finalParams = removeDefaultParams(addedParams, true); const url = Url.get(target, finalParams); - props.history.push(url); + navigate(url); }; // Get the url for other sections, params included diff --git a/client/src/project/new/ProjectNew.container.jsx b/client/src/project/new/ProjectNew.container.jsx index 642f80b964..53dcf83b07 100644 --- a/client/src/project/new/ProjectNew.container.jsx +++ b/client/src/project/new/ProjectNew.container.jsx @@ -94,9 +94,9 @@ function ForkProject(props) { useEffect(() => { if (!logged) { - navigate(loginUrl); + window.location.assign(loginUrl); } - }, [logged, loginUrl, navigate]); + }, [logged, loginUrl]); // Monitor changes to projects list useEffect(() => { From c15ec9c0a4c6f2e12aeaf8701e1d5e43c02afa69 Mon Sep 17 00:00:00 2001 From: Flora Thiebaut Date: Wed, 15 Jan 2025 10:37:06 +0100 Subject: [PATCH 04/10] more work --- .../ProjectSettingsGeneralDeleteProject.tsx | 10 ++++--- client/src/project/Project.jsx | 28 +++++++++---------- client/src/project/Project.present.jsx | 4 +-- client/src/project/ProjectV2.tsx | 11 ++++---- .../project/filestreeview/FilesTreeView.jsx | 28 ++++++++++--------- .../overview/ProjectOverview.container.jsx | 4 +-- .../overview/ProjectOverview.present.jsx | 2 +- 7 files changed, 43 insertions(+), 44 deletions(-) diff --git a/client/src/features/project/components/ProjectSettingsGeneralDeleteProject.tsx b/client/src/features/project/components/ProjectSettingsGeneralDeleteProject.tsx index 75ebcc5209..b0186649a9 100644 --- a/client/src/features/project/components/ProjectSettingsGeneralDeleteProject.tsx +++ b/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 { useHistory } from "react-router"; import { Button, Card, @@ -31,11 +31,13 @@ import { Modal, ModalBody, } from "reactstrap"; + import { ErrorAlert } from "../../../components/Alert"; import { Loader } from "../../../components/Loader"; import { NOTIFICATION_TOPICS } from "../../../notifications/Notifications.constants"; import { NotificationsManager } from "../../../notifications/notifications.types"; import { useDeleteProjectMutation } from "../projectKg.api"; +import { useNavigate } from "react-router-dom-v5-compat"; interface ProjectSettingsGeneralDeleteProjectProps { isMaintainer: boolean; @@ -78,13 +80,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(""); diff --git a/client/src/project/Project.jsx b/client/src/project/Project.jsx index f7d165d6e9..a5ef2bd634 100644 --- a/client/src/project/Project.jsx +++ b/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(); @@ -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, }; diff --git a/client/src/project/Project.present.jsx b/client/src/project/Project.present.jsx index 0110cfed44..3cee7fad99 100644 --- a/client/src/project/Project.present.jsx +++ b/client/src/project/Project.present.jsx @@ -448,7 +448,6 @@ class ProjectViewHeaderOverview extends Component {
); @@ -708,8 +706,8 @@ class ProjectViewOverview extends Component { diff --git a/client/src/project/ProjectV2.tsx b/client/src/project/ProjectV2.tsx index baa0997708..362be1710c 100644 --- a/client/src/project/ProjectV2.tsx +++ b/client/src/project/ProjectV2.tsx @@ -3,7 +3,7 @@ * New implementation of the Project component in TypeScript. */ -import { useHistory, useRouteMatch } from "react-router"; +import { useLocation, useNavigate } from "react-router-dom-v5-compat"; import ProjectV1 from "./Project"; @@ -18,8 +18,8 @@ interface ProjectViewProps { } function ProjectView(props: ProjectViewProps) { - const history = useHistory(); - const match = useRouteMatch(); + const location = useLocation(); + const navigate = useNavigate(); return ( ); } diff --git a/client/src/project/filestreeview/FilesTreeView.jsx b/client/src/project/filestreeview/FilesTreeView.jsx index 29dbfbb462..3e1c397ba5 100644 --- a/client/src/project/filestreeview/FilesTreeView.jsx +++ b/client/src/project/filestreeview/FilesTreeView.jsx @@ -1,11 +1,11 @@ import cx from "classnames"; import { Component } from "react"; -import { Link } from "react-router-dom"; import { FileEarmarkFill, - FolderFill, Folder2Open, + FolderFill, } from "react-bootstrap-icons"; +import { Link, useNavigate } from "react-router-dom-v5-compat"; import { Button, ButtonGroup } from "reactstrap"; import "./treeviewstyle.css"; @@ -59,7 +59,6 @@ class TreeNode extends Component { nodeInsideIsSelected={this.props.currentUrl.endsWith(node.path)} currentUrl={this.props.currentUrl} savePosition={this.props.savePosition} - history={this.props.history} /> ); }) @@ -112,11 +111,19 @@ class TreeNode extends Component { } function TreeContainer(props) { - const { style, fileView, toLineage, toFile, tree } = props; + const navigate = useNavigate(); + return ; +} + +function TreeContainerInner(props) { + const { style, fileView, toLineage, toFile, tree, navigate } = props; const togglePage = () => { - if (fileView) props.history.push(toLineage); - else props.history.push(toFile); + if (fileView) { + navigate(toLineage); + } else { + navigate(toFile); + } }; return ( @@ -179,7 +186,6 @@ class FilesTreeView extends Component { nodeInsideIsSelected={this.props.currentUrl.endsWith(node.path)} currentUrl={this.props.currentUrl} savePosition={this.savePosition.bind(this)} - history={this.props.history} /> ); }) @@ -189,17 +195,13 @@ class FilesTreeView extends Component { const treeProps = { fileView, toLineage, toFile, tree }; // return the plain component if there is no need to limit the height - if (!limitHeight) - return ( - - ); + if (!limitHeight) return ; // on small devices, the file tree is positioned on top, therefore it's better to limit // the height based on the display size if (window.innerWidth <= 768) { return ( @@ -208,7 +210,7 @@ class FilesTreeView extends Component { return (
- +
); } diff --git a/client/src/project/overview/ProjectOverview.container.jsx b/client/src/project/overview/ProjectOverview.container.jsx index 4845b8aae7..1c23b974f2 100644 --- a/client/src/project/overview/ProjectOverview.container.jsx +++ b/client/src/project/overview/ProjectOverview.container.jsx @@ -82,7 +82,7 @@ class OverviewStats extends Component { * Create a visualization of the project commits. * * @param {Object} props.location - react location object - * @param {Object} props.history - react history object + * @param {Object} props.navigate - react navigate function * @param {Object} props.projectCoordinator - project coordinator */ class OverviewCommits extends Component { @@ -120,7 +120,7 @@ class OverviewCommits extends Component { ); } diff --git a/client/src/project/overview/ProjectOverview.present.jsx b/client/src/project/overview/ProjectOverview.present.jsx index 2174bac418..40bbfac9d2 100644 --- a/client/src/project/overview/ProjectOverview.present.jsx +++ b/client/src/project/overview/ProjectOverview.present.jsx @@ -296,7 +296,7 @@ class OverviewCommitsBody extends Component { this.setState({ currentPage: newPage }); const currentSearch = qs.parse(this.props.location.search); const newSearch = qs.stringify({ ...currentSearch, page: newPage }); - this.props.history.push({ + this.props.navigate({ pathname: this.props.location.pathname, search: newSearch, }); From 12c42db89313d202751ff76bb99afdcc1dbd5c02 Mon Sep 17 00:00:00 2001 From: Flora Thiebaut Date: Wed, 15 Jan 2025 12:03:39 +0100 Subject: [PATCH 05/10] more work --- .../src/features/project/components/File.tsx | 3 - .../ProjectSettingsGeneralDeleteProject.tsx | 3 +- client/src/file/File.container.jsx | 1 - client/src/file/File.present.jsx | 1 - client/src/file/FileAndLineageComponents.tsx | 8 +- client/src/file/Lineage.present.jsx | 25 +++--- client/src/project/Project.present.jsx | 86 +++++++++++-------- 7 files changed, 71 insertions(+), 56 deletions(-) diff --git a/client/src/features/project/components/File.tsx b/client/src/features/project/components/File.tsx index 19f7a5fa01..303581ab85 100644 --- a/client/src/features/project/components/File.tsx +++ b/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} diff --git a/client/src/features/project/components/ProjectSettingsGeneralDeleteProject.tsx b/client/src/features/project/components/ProjectSettingsGeneralDeleteProject.tsx index b0186649a9..ff2c4388c8 100644 --- a/client/src/features/project/components/ProjectSettingsGeneralDeleteProject.tsx +++ b/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, @@ -37,7 +37,6 @@ import { Loader } from "../../../components/Loader"; import { NOTIFICATION_TOPICS } from "../../../notifications/Notifications.constants"; import { NotificationsManager } from "../../../notifications/notifications.types"; import { useDeleteProjectMutation } from "../projectKg.api"; -import { useNavigate } from "react-router-dom-v5-compat"; interface ProjectSettingsGeneralDeleteProjectProps { isMaintainer: boolean; diff --git a/client/src/file/File.container.jsx b/client/src/file/File.container.jsx index cd1aef4cd0..3dac3c7863 100644 --- a/client/src/file/File.container.jsx +++ b/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} diff --git a/client/src/file/File.present.jsx b/client/src/file/File.present.jsx index dc0b8be3f2..d41dd2f957 100644 --- a/client/src/file/File.present.jsx +++ b/client/src/file/File.present.jsx @@ -158,7 +158,6 @@ class ShowFile extends React.Component { this.props.lineagesPath !== undefined ? ( ) : null; diff --git a/client/src/file/FileAndLineageComponents.tsx b/client/src/file/FileAndLineageComponents.tsx index 8f0a59ad9f..60993a7d07 100644 --- a/client/src/file/FileAndLineageComponents.tsx +++ b/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 ( diff --git a/client/src/file/Lineage.present.jsx b/client/src/file/Lineage.present.jsx index 55ef3baa61..775b505265 100644 --- a/client/src/file/Lineage.present.jsx +++ b/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 ( - + ); } @@ -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 ? (

{this.props.error}

@@ -302,7 +305,7 @@ class FileLineage extends Component { filePath !== undefined && currentNode.type !== "Directory" ? ( ) : null; diff --git a/client/src/project/Project.present.jsx b/client/src/project/Project.present.jsx index 3cee7fad99..17319f4f84 100644 --- a/client/src/project/Project.present.jsx +++ b/client/src/project/Project.present.jsx @@ -27,8 +27,15 @@ import { faCodeBranch } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import cx from "classnames"; import { Component, Fragment, useEffect } from "react"; -import { Link, Route, Switch, useHistory, useParams } from "react-router-dom"; -import { CompatRoute } from "react-router-dom-v5-compat"; +import { Route, Switch } from "react-router-dom"; +import { + CompatRoute, + Link, + Route as NewRoute, + Routes, + useLocation, + useParams, +} from "react-router-dom-v5-compat"; import { Alert, Button, @@ -738,50 +745,62 @@ class ProjectViewFiles extends Component { } render() { + const filesUrl = this.props.filesUrl; + const lineageUrl = this.props.lineageUrl + .slice(filesUrl.length) + .replace(":filePath+", "*"); + const fileContentUrl = + this.props.fileContentUrl.slice(filesUrl.length) + "/*"; + return [
,
- - - - this.props.projectCoordinator.fetchBranches() - } - model={this.props.model} - projectId={this.props.metadata?.id ?? undefined} - /> - - - - this.props.projectCoordinator.fetchBranches() - } - model={this.props.model} - params={this.props.params} - /> - - + + + this.props.projectCoordinator.fetchBranches() + } + model={this.props.model} + projectId={this.props.metadata?.id ?? undefined} + /> + } + /> + + this.props.projectCoordinator.fetchBranches() + } + model={this.props.model} + params={this.props.params} + /> + } + /> +
, ]; } } function ProjectFileLineageRoute({ client, fetchBranches, model, projectId }) { - const history = useHistory(); - const location = history.location; + const location = useLocation(); - const { filePath } = useParams(); + const params = useParams(); + const filePath = params["*"]; return ( - + - + From 06417c4b51033cfd7b360f11bea81900de26435c Mon Sep 17 00:00:00 2001 From: Flora Thiebaut Date: Wed, 15 Jan 2025 13:23:56 +0100 Subject: [PATCH 06/10] fix redirect --- client/src/project/Project.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/client/src/project/Project.jsx b/client/src/project/Project.jsx index a5ef2bd634..b3812a9281 100644 --- a/client/src/project/Project.jsx +++ b/client/src/project/Project.jsx @@ -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 From 89fa3a77bf594c8bc47d05bed1d0344ffa9f1b0e Mon Sep 17 00:00:00 2001 From: Flora Thiebaut Date: Wed, 15 Jan 2025 13:49:40 +0100 Subject: [PATCH 07/10] refactor(client): some migration step for `react-router@v6` --- client/src/privacy/RoutedContent.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/client/src/privacy/RoutedContent.tsx b/client/src/privacy/RoutedContent.tsx index 512cd88b95..35bd923a6a 100644 --- a/client/src/privacy/RoutedContent.tsx +++ b/client/src/privacy/RoutedContent.tsx @@ -17,7 +17,7 @@ */ import { MouseEvent, useCallback } from "react"; -import { useHistory } from "react-router"; +import { useNavigate } from "react-router-dom-v5-compat"; interface RoutedContentProps { htmlContent: string; @@ -25,7 +25,7 @@ interface RoutedContentProps { /** /!\ Never render user-provided content inside this component /!\ */ export default function RoutedContent({ htmlContent }: RoutedContentProps) { - const history = useHistory(); + const navigate = useNavigate(); const onClick = useCallback( (event: MouseEvent) => { @@ -38,7 +38,7 @@ export default function RoutedContent({ htmlContent }: RoutedContentProps) { // Remove the origin for local links const toUrl = targetLink.href.replace(window.location.origin, ""); - history.push(toUrl); + navigate(toUrl); }, [history] ); From 7f6039ffbd851611e8aa12f68aec9ee311b19c87 Mon Sep 17 00:00:00 2001 From: Flora Thiebaut Date: Wed, 15 Jan 2025 14:13:47 +0100 Subject: [PATCH 08/10] some work --- client/src/components/FileExplorer.tsx | 7 ++++--- client/src/components/Tree.tsx | 2 +- client/src/components/buttons/Button.tsx | 2 +- .../earlyAccessBanner/EarlyAccessBanner.tsx | 3 +-- client/src/components/entities/Buttons.tsx | 2 +- client/src/components/entities/Description.tsx | 2 +- .../entities/LinkedEntitiesByItemType.tsx | 2 +- .../form-field/DropzoneFileUploader.jsx | 2 +- client/src/components/kgStatus/KgStatus.tsx | 2 +- client/src/components/list/ListBar.tsx | 2 +- client/src/components/list/ListBarSessions.tsx | 2 +- client/src/components/list/ListCard.tsx | 2 +- .../src/components/navbar/AnonymousNavBar.tsx | 2 +- .../src/components/navbar/LoggedInNavBar.tsx | 2 +- client/src/components/navbar/NavBarItems.tsx | 2 +- .../shareLinkSession/ShareLinkSession.tsx | 18 +++++++++++------- client/src/components/ssh/ssh.tsx | 2 +- .../addtoproject/DatasetAddToNewProject.tsx | 2 +- .../addtoproject/DatasetAddToProjectStatus.tsx | 2 +- .../dashboard/components/DatasetsDashboard.tsx | 2 +- .../components/InactiveKgProjects.tsx | 2 +- .../dashboard/components/ProjectsDashboard.tsx | 2 +- .../components/ProjectSettingsSessions.tsx | 2 +- .../components/migrations/ProjectKgStatus.tsx | 2 +- .../dataset/ProjectDatasetsListView.tsx | 2 +- .../components/PauseOrDeleteSessionModal.tsx | 8 ++++---- .../session/components/SessionButton.tsx | 8 ++++---- .../session/components/SessionJupyter.tsx | 5 +++-- .../session/components/SessionUnavailable.tsx | 2 +- .../session/components/SessionsList.tsx | 2 +- .../session/components/ShowSession.tsx | 15 ++++++++++----- .../session/components/SimpleSessionButton.tsx | 12 +++++++----- .../session/components/StartNewSession.tsx | 14 +++++++++----- .../components/options/SessionBranchOption.tsx | 2 +- .../options/SessionCloudStorageOption.tsx | 2 +- .../components/options/SessionUserSecrets.tsx | 2 +- .../options/StartNotebookServerOptions.tsx | 2 +- .../options/useDefaultBranchOption.hook.ts | 2 +- .../options/useDefaultCommitOption.hook.ts | 2 +- .../SessionShowPage/SessionUnavailable.tsx | 2 +- client/src/landing/AdminDropdownItem.tsx | 2 +- client/src/landing/AnonymousHome.tsx | 13 ++++++------- client/src/landing/SectionShowcase.tsx | 2 +- client/src/landing/WhatIsRenku/WhatIsRenku.tsx | 2 +- client/src/landing/anonymousHomeNav.tsx | 2 +- client/src/namespace/Namespace.present.jsx | 2 +- client/src/not-found/NotFound.tsx | 2 +- .../notebooks/components/SessionButtons.tsx | 2 +- .../notifications/Notifications.present.jsx | 2 +- client/src/privacy/RoutedContent.tsx | 2 +- .../src/project/list/ProjectList.present.jsx | 2 +- client/src/project/new/ProjectNew.present.jsx | 2 +- .../src/project/new/components/Automated.tsx | 2 +- client/src/statuspage/Statuspage.present.jsx | 2 +- client/src/styleguide/ListsGuide.jsx | 2 +- client/src/workflows/Workflows.present.tsx | 2 +- 56 files changed, 105 insertions(+), 90 deletions(-) diff --git a/client/src/components/FileExplorer.tsx b/client/src/components/FileExplorer.tsx index dd43947b3b..9cd12bc197 100644 --- a/client/src/components/FileExplorer.tsx +++ b/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 = { diff --git a/client/src/components/Tree.tsx b/client/src/components/Tree.tsx index 4671624f77..ecfaeb2d0d 100644 --- a/client/src/components/Tree.tsx +++ b/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"; diff --git a/client/src/components/buttons/Button.tsx b/client/src/components/buttons/Button.tsx index 7818b7b2dc..ce8ce96532 100644 --- a/client/src/components/buttons/Button.tsx +++ b/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, diff --git a/client/src/components/earlyAccessBanner/EarlyAccessBanner.tsx b/client/src/components/earlyAccessBanner/EarlyAccessBanner.tsx index 0e68d8693e..6dcf37ac08 100644 --- a/client/src/components/earlyAccessBanner/EarlyAccessBanner.tsx +++ b/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"; diff --git a/client/src/components/entities/Buttons.tsx b/client/src/components/entities/Buttons.tsx index 43adba4103..aec31182fa 100644 --- a/client/src/components/entities/Buttons.tsx +++ b/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"; diff --git a/client/src/components/entities/Description.tsx b/client/src/components/entities/Description.tsx index 7ced145089..2fb564d9ac 100644 --- a/client/src/components/entities/Description.tsx +++ b/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"; diff --git a/client/src/components/entities/LinkedEntitiesByItemType.tsx b/client/src/components/entities/LinkedEntitiesByItemType.tsx index 803b5fdf1b..566ac6176a 100644 --- a/client/src/components/entities/LinkedEntitiesByItemType.tsx +++ b/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"; diff --git a/client/src/components/form-field/DropzoneFileUploader.jsx b/client/src/components/form-field/DropzoneFileUploader.jsx index e9954f6e71..529b388588 100644 --- a/client/src/components/form-field/DropzoneFileUploader.jsx +++ b/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 { diff --git a/client/src/components/kgStatus/KgStatus.tsx b/client/src/components/kgStatus/KgStatus.tsx index e719df95ac..1857c75eff 100644 --- a/client/src/components/kgStatus/KgStatus.tsx +++ b/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"; diff --git a/client/src/components/list/ListBar.tsx b/client/src/components/list/ListBar.tsx index 5128f82e3c..193baa6d23 100644 --- a/client/src/components/list/ListBar.tsx +++ b/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"; diff --git a/client/src/components/list/ListBarSessions.tsx b/client/src/components/list/ListBarSessions.tsx index 87c81f8aa9..817095db9a 100644 --- a/client/src/components/list/ListBarSessions.tsx +++ b/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"; diff --git a/client/src/components/list/ListCard.tsx b/client/src/components/list/ListCard.tsx index 11458c17b8..267356e244 100644 --- a/client/src/components/list/ListCard.tsx +++ b/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"; diff --git a/client/src/components/navbar/AnonymousNavBar.tsx b/client/src/components/navbar/AnonymousNavBar.tsx index 7d7b1c6040..b99b32377f 100644 --- a/client/src/components/navbar/AnonymousNavBar.tsx +++ b/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"; diff --git a/client/src/components/navbar/LoggedInNavBar.tsx b/client/src/components/navbar/LoggedInNavBar.tsx index ea04bfa37f..718dd10d2d 100644 --- a/client/src/components/navbar/LoggedInNavBar.tsx +++ b/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"; diff --git a/client/src/components/navbar/NavBarItems.tsx b/client/src/components/navbar/NavBarItems.tsx index 4f84d21320..cda8e76e8a 100644 --- a/client/src/components/navbar/NavBarItems.tsx +++ b/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, diff --git a/client/src/components/shareLinkSession/ShareLinkSession.tsx b/client/src/components/shareLinkSession/ShareLinkSession.tsx index 341398f91f..e32250eb81 100644 --- a/client/src/components/shareLinkSession/ShareLinkSession.tsx +++ b/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( diff --git a/client/src/components/ssh/ssh.tsx b/client/src/components/ssh/ssh.tsx index 5c3f8c2ef8..847b386f48 100644 --- a/client/src/components/ssh/ssh.tsx +++ b/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 { diff --git a/client/src/dataset/addtoproject/DatasetAddToNewProject.tsx b/client/src/dataset/addtoproject/DatasetAddToNewProject.tsx index 178fa2f1cf..c79d1e3e1d 100644 --- a/client/src/dataset/addtoproject/DatasetAddToNewProject.tsx +++ b/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"; diff --git a/client/src/dataset/addtoproject/DatasetAddToProjectStatus.tsx b/client/src/dataset/addtoproject/DatasetAddToProjectStatus.tsx index 2283359d1e..765133411e 100644 --- a/client/src/dataset/addtoproject/DatasetAddToProjectStatus.tsx +++ b/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, diff --git a/client/src/features/dashboard/components/DatasetsDashboard.tsx b/client/src/features/dashboard/components/DatasetsDashboard.tsx index 4af608ae47..67bd996f50 100644 --- a/client/src/features/dashboard/components/DatasetsDashboard.tsx +++ b/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, diff --git a/client/src/features/dashboard/components/InactiveKgProjects.tsx b/client/src/features/dashboard/components/InactiveKgProjects.tsx index 855cbcbe36..58e4a25cde 100644 --- a/client/src/features/dashboard/components/InactiveKgProjects.tsx +++ b/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"; diff --git a/client/src/features/dashboard/components/ProjectsDashboard.tsx b/client/src/features/dashboard/components/ProjectsDashboard.tsx index 5f6c93c6ea..a43d2af51b 100644 --- a/client/src/features/dashboard/components/ProjectsDashboard.tsx +++ b/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"; diff --git a/client/src/features/project/components/ProjectSettingsSessions.tsx b/client/src/features/project/components/ProjectSettingsSessions.tsx index b27ca07321..0057f3d336 100644 --- a/client/src/features/project/components/ProjectSettingsSessions.tsx +++ b/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, diff --git a/client/src/features/project/components/migrations/ProjectKgStatus.tsx b/client/src/features/project/components/migrations/ProjectKgStatus.tsx index 7236f23c7c..9115c16d93 100644 --- a/client/src/features/project/components/migrations/ProjectKgStatus.tsx +++ b/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"; diff --git a/client/src/features/project/dataset/ProjectDatasetsListView.tsx b/client/src/features/project/dataset/ProjectDatasetsListView.tsx index 3a20d752ba..dcd9585ba5 100644 --- a/client/src/features/project/dataset/ProjectDatasetsListView.tsx +++ b/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"; diff --git a/client/src/features/session/components/PauseOrDeleteSessionModal.tsx b/client/src/features/session/components/PauseOrDeleteSessionModal.tsx index 4fc309d444..216aa35b4f 100644 --- a/client/src/features/session/components/PauseOrDeleteSessionModal.tsx +++ b/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 ; + return ; } return ( @@ -249,7 +249,7 @@ function PauseSessionModalBody({ }, [error, notifications]); if (isSuccess && !isWaiting) { - return ; + return ; } const annotations = session @@ -365,7 +365,7 @@ function DeleteSessionModalBody({ }, [error, notifications]); if (isSuccess && !isWaiting) { - return ; + return ; } const annotations = session diff --git a/client/src/features/session/components/SessionButton.tsx b/client/src/features/session/components/SessionButton.tsx index 1e82db90aa..14f576e694 100644 --- a/client/src/features/session/components/SessionButton.tsx +++ b/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(() => { diff --git a/client/src/features/session/components/SessionJupyter.tsx b/client/src/features/session/components/SessionJupyter.tsx index 4ea61cb580..565719f7a7 100644 --- a/client/src/features/session/components/SessionJupyter.tsx +++ b/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; diff --git a/client/src/features/session/components/SessionUnavailable.tsx b/client/src/features/session/components/SessionUnavailable.tsx index a23e1bcc3c..4d41256394 100644 --- a/client/src/features/session/components/SessionUnavailable.tsx +++ b/client/src/features/session/components/SessionUnavailable.tsx @@ -19,7 +19,7 @@ import { faQuestionCircle } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import cx from "classnames"; -import { Link } from "react-router-dom"; +import { Link } from "react-router-dom-v5-compat"; import { Alert } from "reactstrap"; import useLegacySelector from "../../../utils/customHooks/useLegacySelector.hook"; diff --git a/client/src/features/session/components/SessionsList.tsx b/client/src/features/session/components/SessionsList.tsx index 245426a67f..bed2dba901 100644 --- a/client/src/features/session/components/SessionsList.tsx +++ b/client/src/features/session/components/SessionsList.tsx @@ -21,7 +21,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import cx from "classnames"; import { ReactNode } from "react"; import Media from "react-media"; -import { Link } from "react-router-dom"; +import { Link } from "react-router-dom-v5-compat"; import { Col, Row } from "reactstrap"; import { ExternalLink } from "../../../components/ExternalLinks"; import { EnvironmentLogs } from "../../../components/Logs"; diff --git a/client/src/features/session/components/ShowSession.tsx b/client/src/features/session/components/ShowSession.tsx index 9ea644eadd..898e12d647 100644 --- a/client/src/features/session/components/ShowSession.tsx +++ b/client/src/features/session/components/ShowSession.tsx @@ -33,7 +33,12 @@ import { Journals, Save, } from "react-bootstrap-icons"; -import { Redirect, useLocation, useParams } from "react-router"; +import { + type Location, + Navigate, + useLocation, + useParams, +} from "react-router-dom-v5-compat"; import { Button, Row, UncontrolledTooltip } from "reactstrap"; import SessionPausedIcon from "../../../components/icons/SessionPausedIcon"; @@ -81,7 +86,7 @@ export default function ShowSession() { return ( - + ); } @@ -103,9 +108,9 @@ function ShowSessionFullscreen({ sessionName }: ShowSessionFullscreenProps) { path: pathWithNamespace, }); - const location = useLocation< + const location: Location< { redirectFromStartServer?: boolean; fromLanding?: boolean } | undefined - >(); + > = useLocation(); const { data: sessions, isLoading } = useGetSessionsQuery(); const thisSession = useMemo(() => { @@ -264,7 +269,7 @@ function ShowSessionFullscreen({ sessionName }: ShowSessionFullscreenProps) { // Redirect to the sessions list if the session has failed if (thisSession?.status.state === "failed") { - return ; + return ; } return ( diff --git a/client/src/features/session/components/SimpleSessionButton.tsx b/client/src/features/session/components/SimpleSessionButton.tsx index b6513152e1..37c1c62e1e 100644 --- a/client/src/features/session/components/SimpleSessionButton.tsx +++ b/client/src/features/session/components/SimpleSessionButton.tsx @@ -20,8 +20,9 @@ import { faPlay } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import cx from "classnames"; import { MouseEvent, useCallback, useEffect, useState } from "react"; -import { Link, useHistory } from "react-router-dom"; +import { Link, useNavigate } from "react-router-dom-v5-compat"; import { Button } from "reactstrap"; + import { Loader } from "../../../components/Loader"; import { NotebooksHelper } from "../../../notebooks"; import { Url } from "../../../utils/helpers/url"; @@ -115,7 +116,7 @@ function ResumeOrConnectButton({ runningSession, fromLanding = false, }: ResumeOrConnectButtonProps) { - const history = useHistory(); + const navigate = useNavigate(); const annotations = NotebooksHelper.cleanAnnotations( runningSession.annotations @@ -147,12 +148,12 @@ function ResumeOrConnectButton({ }); useEffect(() => { if (isSuccessResumeSession && !isWaitingForResumedSession) { - history.push({ pathname: showSessionUrl }); + navigate({ pathname: showSessionUrl }); } }, [ - history, isSuccessResumeSession, isWaitingForResumedSession, + navigate, showSessionUrl, ]); @@ -185,7 +186,8 @@ function ResumeOrConnectButton({ return (
Connect diff --git a/client/src/features/session/components/StartNewSession.tsx b/client/src/features/session/components/StartNewSession.tsx index 993e7d68d8..e73ea4ae7b 100644 --- a/client/src/features/session/components/StartNewSession.tsx +++ b/client/src/features/session/components/StartNewSession.tsx @@ -25,7 +25,11 @@ import { import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import cx from "classnames"; import { useCallback, useContext, useEffect, useMemo, useState } from "react"; -import { Redirect, useLocation } from "react-router"; +import { + Navigate, + useLocation, + type Location, +} from "react-router-dom-v5-compat"; import { Button, Col, DropdownItem, Form, Modal, Row } from "reactstrap"; import { ACCESS_LEVELS } from "../../../api-client"; @@ -159,7 +163,7 @@ function BackButton() { }; const projectUrl = Url.get(Url.pages.project, projectUrlData); - const location = useLocation(); + const location: Location = useLocation(); const { from, filePath } = location.state ?? {}; const searchParams = useMemo( @@ -195,7 +199,7 @@ function SessionStarting() { (state) => state.stateModel.project.metadata.path ); - const location = useLocation(); + const location: Location = useLocation(); const searchParams = useMemo( () => new URLSearchParams(location.search), [location.search] @@ -228,15 +232,15 @@ function SessionStarting() { if (session != null) { return ( - ); } diff --git a/client/src/features/session/components/options/SessionBranchOption.tsx b/client/src/features/session/components/options/SessionBranchOption.tsx index 4454374a36..08459efbef 100644 --- a/client/src/features/session/components/options/SessionBranchOption.tsx +++ b/client/src/features/session/components/options/SessionBranchOption.tsx @@ -22,7 +22,7 @@ import { skipToken } from "@reduxjs/toolkit/query"; import cx from "classnames"; import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import { ChevronDown, ThreeDots } from "react-bootstrap-icons"; -import { Link } from "react-router-dom"; +import { Link } from "react-router-dom-v5-compat"; import Select, { ClassNamesConfig, GroupBase, diff --git a/client/src/features/session/components/options/SessionCloudStorageOption.tsx b/client/src/features/session/components/options/SessionCloudStorageOption.tsx index 83871f009a..d6fc110d8a 100644 --- a/client/src/features/session/components/options/SessionCloudStorageOption.tsx +++ b/client/src/features/session/components/options/SessionCloudStorageOption.tsx @@ -20,7 +20,7 @@ import { skipToken } from "@reduxjs/toolkit/query"; import cx from "classnames"; import { useCallback, useEffect, useRef, useState } from "react"; import { EyeFill, EyeSlashFill, InfoCircleFill } from "react-bootstrap-icons"; -import { Link } from "react-router-dom"; +import { Link } from "react-router-dom-v5-compat"; import { Button, Container, diff --git a/client/src/features/session/components/options/SessionUserSecrets.tsx b/client/src/features/session/components/options/SessionUserSecrets.tsx index 11a7ba5f89..4987b288fe 100644 --- a/client/src/features/session/components/options/SessionUserSecrets.tsx +++ b/client/src/features/session/components/options/SessionUserSecrets.tsx @@ -18,7 +18,7 @@ import cx from "classnames"; import { useCallback, useEffect, useState } from "react"; -import { Link } from "react-router-dom"; +import { Link } from "react-router-dom-v5-compat"; import { Button, Card, CardBody, Collapse, Input, Label } from "reactstrap"; import { Loader } from "../../../../components/Loader"; diff --git a/client/src/features/session/components/options/StartNotebookServerOptions.tsx b/client/src/features/session/components/options/StartNotebookServerOptions.tsx index 78ae33a65d..f9ff8acb5a 100644 --- a/client/src/features/session/components/options/StartNotebookServerOptions.tsx +++ b/client/src/features/session/components/options/StartNotebookServerOptions.tsx @@ -19,7 +19,7 @@ import { skipToken } from "@reduxjs/toolkit/query"; import cx from "classnames"; import { useCallback } from "react"; -import { Link } from "react-router-dom"; +import { Link } from "react-router-dom-v5-compat"; import { Badge, Button, diff --git a/client/src/features/session/hooks/options/useDefaultBranchOption.hook.ts b/client/src/features/session/hooks/options/useDefaultBranchOption.hook.ts index 7a79bc601c..dfcd13465f 100644 --- a/client/src/features/session/hooks/options/useDefaultBranchOption.hook.ts +++ b/client/src/features/session/hooks/options/useDefaultBranchOption.hook.ts @@ -17,7 +17,7 @@ */ import { useEffect, useMemo } from "react"; -import { useLocation } from "react-router"; +import { useLocation } from "react-router-dom-v5-compat"; import useAppDispatch from "../../../../utils/customHooks/useAppDispatch.hook"; import { GitLabRepositoryBranch } from "../../../project/GitLab.types"; import { setError } from "../../startSession.slice"; diff --git a/client/src/features/session/hooks/options/useDefaultCommitOption.hook.ts b/client/src/features/session/hooks/options/useDefaultCommitOption.hook.ts index c2cfd24de8..aec2985a01 100644 --- a/client/src/features/session/hooks/options/useDefaultCommitOption.hook.ts +++ b/client/src/features/session/hooks/options/useDefaultCommitOption.hook.ts @@ -17,7 +17,7 @@ */ import { useEffect, useMemo } from "react"; -import { useLocation } from "react-router"; +import { useLocation } from "react-router-dom-v5-compat"; import useAppDispatch from "../../../../utils/customHooks/useAppDispatch.hook"; import { GitLabRepositoryCommit } from "../../../project/GitLab.types"; import { setError } from "../../startSession.slice"; diff --git a/client/src/features/sessionsV2/SessionShowPage/SessionUnavailable.tsx b/client/src/features/sessionsV2/SessionShowPage/SessionUnavailable.tsx index 51f4f0f821..6ba6f4858c 100644 --- a/client/src/features/sessionsV2/SessionShowPage/SessionUnavailable.tsx +++ b/client/src/features/sessionsV2/SessionShowPage/SessionUnavailable.tsx @@ -17,7 +17,7 @@ */ import cx from "classnames"; -import { Link } from "react-router-dom"; +import { Link } from "react-router-dom-v5-compat"; import { Alert } from "reactstrap"; import { QuestionCircle } from "react-bootstrap-icons"; import { generatePath, useParams } from "react-router-dom-v5-compat"; diff --git a/client/src/landing/AdminDropdownItem.tsx b/client/src/landing/AdminDropdownItem.tsx index ba22a33764..275cbf4e32 100644 --- a/client/src/landing/AdminDropdownItem.tsx +++ b/client/src/landing/AdminDropdownItem.tsx @@ -16,7 +16,7 @@ * limitations under the License. */ -import { Link } from "react-router-dom"; +import { Link } from "react-router-dom-v5-compat"; import { DropdownItem } from "reactstrap"; import { useGetUserQuery } from "../features/usersV2/api/users.api"; import useLegacySelector from "../utils/customHooks/useLegacySelector.hook"; diff --git a/client/src/landing/AnonymousHome.tsx b/client/src/landing/AnonymousHome.tsx index f116baa570..69a1ffc7ea 100644 --- a/client/src/landing/AnonymousHome.tsx +++ b/client/src/landing/AnonymousHome.tsx @@ -27,7 +27,6 @@ import { faSearch } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { Fragment, useContext, useRef } from "react"; import { useForm } from "react-hook-form"; -import { useHistory } from "react-router-dom"; import { Col, Row } from "reactstrap"; import LazyRenkuMarkdown from "../components/markdown/LazyRenkuMarkdown"; @@ -36,13 +35,10 @@ import AppContext from "../utils/context/appContext"; import { DEFAULT_APP_PARAMS } from "../utils/context/appParams.constants"; import { Url } from "../utils/helpers/url"; -import { NavBarWarnings } from "./NavBarWarnings"; - -import VisualHead from "./Graphics/Visual_Head.svg"; - import DividerLandingPage from "./Dividier/Divider"; import GetStarted from "./GetSarted/GetStarted"; import HeroLanding from "./HeroLanding/HeroLanding"; +import { NavBarWarnings } from "./NavBarWarnings"; import SectionShowcase, { validatedShowcaseConfig } from "./SectionShowcase"; import Teaching from "./Teaching/Teaching"; import WhatIsRenku from "./WhatIsRenku/WhatIsRenku"; @@ -50,10 +46,13 @@ import WhoWeAre from "./WhoWeAre/WhoWeAre"; import type { AnonymousHomeConfig } from "./anonymousHome.types"; import { BottomNav, TopNav } from "./anonymousHomeNav"; +import VisualHead from "./Graphics/Visual_Head.svg"; + // ? react-autosuggest styles are defined there q_q // ? also, the order of import matters here q_q import "../project/new/Project.style.css"; // ? the "quick-nav" class is used in this file +import { useNavigate } from "react-router-dom-v5-compat"; import "../components/quicknav/QuickNav.style.css"; export default function AnonymousHome() { @@ -96,12 +95,12 @@ export function SearchInput() { const { handleSubmit, register } = useForm({ defaultValues: { phrase: "" }, }); - const history = useHistory(); + const navigate = useNavigate(); const onSubmit = (inputs: SearchInputFormFields) => { const searchState = { phrase: inputs.phrase }; const searchString = stateToSearchString(searchState); const searchUrl = `${Url.get(Url.pages.search)}/?${searchString}`; - history.push(searchUrl); + navigate(searchUrl); }; return (
diff --git a/client/src/landing/SectionShowcase.tsx b/client/src/landing/SectionShowcase.tsx index 004855b2a8..e5c7a98b59 100644 --- a/client/src/landing/SectionShowcase.tsx +++ b/client/src/landing/SectionShowcase.tsx @@ -25,7 +25,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 { CardImg, Col, Row } from "reactstrap"; // @ts-expect-error ts(7016) import { Pagination } from "swiper"; diff --git a/client/src/landing/WhatIsRenku/WhatIsRenku.tsx b/client/src/landing/WhatIsRenku/WhatIsRenku.tsx index 95e0f5ba89..75f6ff48ce 100644 --- a/client/src/landing/WhatIsRenku/WhatIsRenku.tsx +++ b/client/src/landing/WhatIsRenku/WhatIsRenku.tsx @@ -19,7 +19,7 @@ import { skipToken } from "@reduxjs/toolkit/query"; import cx from "classnames"; import { BookmarksFill, Send, TerminalFill } from "react-bootstrap-icons"; -import { Link } from "react-router-dom"; +import { Link } from "react-router-dom-v5-compat"; import { ExternalLink } from "../../components/ExternalLinks"; import { CommandCopy } from "../../components/commandCopy/CommandCopy"; diff --git a/client/src/landing/anonymousHomeNav.tsx b/client/src/landing/anonymousHomeNav.tsx index 61cc61fc17..1e31f01a53 100644 --- a/client/src/landing/anonymousHomeNav.tsx +++ b/client/src/landing/anonymousHomeNav.tsx @@ -19,7 +19,7 @@ import type { CSSProperties } from "react"; import React from "react"; import { List } from "react-bootstrap-icons"; -import { Link } from "react-router-dom"; +import { Link } from "react-router-dom-v5-compat"; import { Button, Col, Collapse, Nav, Navbar, NavItem, Row } from "reactstrap"; import { useLoginUrl } from "../authentication/useLoginUrl.hook"; diff --git a/client/src/namespace/Namespace.present.jsx b/client/src/namespace/Namespace.present.jsx index 602319fda5..636b48cf94 100644 --- a/client/src/namespace/Namespace.present.jsx +++ b/client/src/namespace/Namespace.present.jsx @@ -24,7 +24,7 @@ */ import { createMemoryHistory } from "history"; -import { Link } from "react-router-dom"; +import { Link } from "react-router-dom-v5-compat"; import { Col, Row } from "reactstrap"; import cx from "classnames"; diff --git a/client/src/not-found/NotFound.tsx b/client/src/not-found/NotFound.tsx index a55d38defd..6f6ce3e538 100644 --- a/client/src/not-found/NotFound.tsx +++ b/client/src/not-found/NotFound.tsx @@ -24,7 +24,7 @@ */ import cx from "classnames"; import { ReactNode } from "react"; -import { Link } from "react-router-dom"; +import { Link } from "react-router-dom-v5-compat"; import { ArrowLeft } from "react-bootstrap-icons"; import ContainerWrap from "../components/container/ContainerWrap"; diff --git a/client/src/notebooks/components/SessionButtons.tsx b/client/src/notebooks/components/SessionButtons.tsx index 52ceee7056..de009ec10c 100644 --- a/client/src/notebooks/components/SessionButtons.tsx +++ b/client/src/notebooks/components/SessionButtons.tsx @@ -24,7 +24,7 @@ */ import { ArrowLeft } from "react-bootstrap-icons"; -import { Link } from "react-router-dom"; +import { Link } from "react-router-dom-v5-compat"; interface GoBackProps { urlBack: string; diff --git a/client/src/notifications/Notifications.present.jsx b/client/src/notifications/Notifications.present.jsx index 1d13b462cf..88a2525d50 100644 --- a/client/src/notifications/Notifications.present.jsx +++ b/client/src/notifications/Notifications.present.jsx @@ -35,7 +35,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import cx from "classnames"; import { Component, Fragment, useState } from "react"; import { InboxFill } from "react-bootstrap-icons"; -import { Link } from "react-router-dom"; +import { Link } from "react-router-dom-v5-compat"; import { Badge, Button, diff --git a/client/src/privacy/RoutedContent.tsx b/client/src/privacy/RoutedContent.tsx index 35bd923a6a..e913047874 100644 --- a/client/src/privacy/RoutedContent.tsx +++ b/client/src/privacy/RoutedContent.tsx @@ -40,7 +40,7 @@ export default function RoutedContent({ htmlContent }: RoutedContentProps) { const toUrl = targetLink.href.replace(window.location.origin, ""); navigate(toUrl); }, - [history] + [navigate] ); return ( diff --git a/client/src/project/list/ProjectList.present.jsx b/client/src/project/list/ProjectList.present.jsx index 3cf4cb762b..5aa97f4b3a 100644 --- a/client/src/project/list/ProjectList.present.jsx +++ b/client/src/project/list/ProjectList.present.jsx @@ -17,7 +17,7 @@ */ import { Fragment, useEffect, useState } from "react"; -import { Link } from "react-router-dom"; +import { Link } from "react-router-dom-v5-compat"; import { Button, ButtonDropdown, diff --git a/client/src/project/new/ProjectNew.present.jsx b/client/src/project/new/ProjectNew.present.jsx index 1a545a192a..29bb5ce375 100644 --- a/client/src/project/new/ProjectNew.present.jsx +++ b/client/src/project/new/ProjectNew.present.jsx @@ -24,7 +24,7 @@ */ import { Component, Fragment } from "react"; -import { Link } from "react-router-dom"; +import { Link } from "react-router-dom-v5-compat"; import { Button, Form, diff --git a/client/src/project/new/components/Automated.tsx b/client/src/project/new/components/Automated.tsx index 97e1432e2c..8e9fb273cd 100644 --- a/client/src/project/new/components/Automated.tsx +++ b/client/src/project/new/components/Automated.tsx @@ -32,7 +32,7 @@ import { ModalHeader, Row, } from "reactstrap"; -import { Link } from "react-router-dom"; +import { Link } from "react-router-dom-v5-compat"; import { ErrorAlert, InfoAlert, WarnAlert } from "../../../components/Alert"; import { Url } from "../../../utils/helpers/url"; diff --git a/client/src/statuspage/Statuspage.present.jsx b/client/src/statuspage/Statuspage.present.jsx index 1184386df5..5d58f5023a 100644 --- a/client/src/statuspage/Statuspage.present.jsx +++ b/client/src/statuspage/Statuspage.present.jsx @@ -34,7 +34,7 @@ import { } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { DateTime } from "luxon"; -import { Link } from "react-router-dom"; +import { Link } from "react-router-dom-v5-compat"; import { Alert, Badge, Col, Row, Table } from "reactstrap"; import { WarnAlert } from "../components/Alert"; diff --git a/client/src/styleguide/ListsGuide.jsx b/client/src/styleguide/ListsGuide.jsx index 4dcaaff837..cc9b77afcf 100644 --- a/client/src/styleguide/ListsGuide.jsx +++ b/client/src/styleguide/ListsGuide.jsx @@ -18,7 +18,7 @@ import { Fragment } from "react"; -import { Link } from "react-router-dom"; +import { Link } from "react-router-dom-v5-compat"; import { Card, CardBody, CardHeader } from "reactstrap"; import { TimeCaption } from "../components/TimeCaption"; import Pagination from "../components/Pagination"; diff --git a/client/src/workflows/Workflows.present.tsx b/client/src/workflows/Workflows.present.tsx index e9a507aa45..73433c3368 100644 --- a/client/src/workflows/Workflows.present.tsx +++ b/client/src/workflows/Workflows.present.tsx @@ -44,7 +44,7 @@ import { People, XLg, } from "react-bootstrap-icons"; -import { Link } from "react-router-dom"; +import { Link } from "react-router-dom-v5-compat"; import { faArrowRight, faCheck, From 6d2621f95acf470525049d609b154c472c2c45fd Mon Sep 17 00:00:00 2001 From: Flora Thiebaut Date: Wed, 15 Jan 2025 16:06:50 +0100 Subject: [PATCH 09/10] fix session pages --- .../components/ProjectSessionsRouter.tsx | 27 +++++++++---------- .../SessionShowPage/ShowSessionPage.tsx | 1 + client/src/project/Project.present.jsx | 4 +-- 3 files changed, 16 insertions(+), 16 deletions(-) diff --git a/client/src/features/session/components/ProjectSessionsRouter.tsx b/client/src/features/session/components/ProjectSessionsRouter.tsx index 8d7f0342af..077a780fa1 100644 --- a/client/src/features/session/components/ProjectSessionsRouter.tsx +++ b/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 ( - - - - - - - - - - - + + + } + /> + } /> + } /> + ); } diff --git a/client/src/features/sessionsV2/SessionShowPage/ShowSessionPage.tsx b/client/src/features/sessionsV2/SessionShowPage/ShowSessionPage.tsx index 4d267c7ada..c48419d6b7 100644 --- a/client/src/features/sessionsV2/SessionShowPage/ShowSessionPage.tsx +++ b/client/src/features/sessionsV2/SessionShowPage/ShowSessionPage.tsx @@ -43,6 +43,7 @@ import { ModalHeader, UncontrolledTooltip, } from "reactstrap"; + import { Loader } from "../../../components/Loader"; import EnvironmentLogsV2 from "../../../components/LogsV2"; import { TimeCaption } from "../../../components/TimeCaption"; diff --git a/client/src/project/Project.present.jsx b/client/src/project/Project.present.jsx index 17319f4f84..fd09e66960 100644 --- a/client/src/project/Project.present.jsx +++ b/client/src/project/Project.present.jsx @@ -977,9 +977,9 @@ function ProjectView(props) { metadataVersion={metadataVersion} /> - + - + From 85a2091e5fd1af3220e79565e7a51ecf41b2b4ce Mon Sep 17 00:00:00 2001 From: Flora Thiebaut Date: Wed, 15 Jan 2025 16:13:14 +0100 Subject: [PATCH 10/10] fix Navigate --- client/src/features/session/components/ShowSession.tsx | 2 +- client/src/features/session/components/StartNewSession.tsx | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/client/src/features/session/components/ShowSession.tsx b/client/src/features/session/components/ShowSession.tsx index 898e12d647..fe96b475b1 100644 --- a/client/src/features/session/components/ShowSession.tsx +++ b/client/src/features/session/components/ShowSession.tsx @@ -269,7 +269,7 @@ function ShowSessionFullscreen({ sessionName }: ShowSessionFullscreenProps) { // Redirect to the sessions list if the session has failed if (thisSession?.status.state === "failed") { - return ; + return ; } return ( diff --git a/client/src/features/session/components/StartNewSession.tsx b/client/src/features/session/components/StartNewSession.tsx index e73ea4ae7b..ddc61ece82 100644 --- a/client/src/features/session/components/StartNewSession.tsx +++ b/client/src/features/session/components/StartNewSession.tsx @@ -241,6 +241,7 @@ function SessionStarting() { }), }} state={{ redirectFromStartServer: true, fromLanding: fromLanding }} + replace /> ); }