Fix [Functions, Artifacts, Jobs] Unexpected redirection (#3003)

mlrun · Jan 11, 2025 · 852c80d · 852c80d
1 parent 9bed296
commit 852c80d
Show file tree

Hide file tree

Showing 11 changed files with 30 additions and 51 deletions.
diff --git a/src/common/Pagination/Pagination.js b/src/common/Pagination/Pagination.js
@@ -20,7 +20,7 @@ such restriction.
 import React, { useCallback, useMemo, useRef } from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
-import { useLocation, useNavigate, useSearchParams } from 'react-router-dom'
+import { useNavigate, useSearchParams } from 'react-router-dom'
 import { max, min } from 'lodash'
 
 import { RoundedIcon } from 'igz-controls/components'
@@ -56,7 +56,6 @@ const Pagination = ({
   const paginationPagesRef = useRef()
   const leftSideRef = useRef(0)
   const rightSideRef = useRef(0)
-  const location = useLocation()
 
   // Total pages are now calculated based on start and end pages
   const totalPagesCount = useMemo(
@@ -85,9 +84,9 @@ const Pagination = ({
 
   const handlePageChange = useCallback(() => {
     if (closeParamName) {
-      navigate(getCloseDetailsLink(closeParamName, location, true), { replace: true })
+      navigate(getCloseDetailsLink(closeParamName, true), { replace: true })
     }
-  }, [closeParamName, navigate, location])
+  }, [closeParamName, navigate])
 
   const paginationItems = useMemo(() => {
     if (!paginationConfig[FE_PAGE]) return []

diff --git a/src/components/Datasets/DatasetsView.js b/src/components/Datasets/DatasetsView.js
@@ -20,7 +20,6 @@ such restriction.
 import React from 'react'
 import PropTypes from 'prop-types'
 import { isEmpty } from 'lodash'
-import { useLocation } from 'react-router-dom'
 
 import ActionBar from '../ActionBar/ActionBar'
 import ArtifactsFilters from '../ArtifactsActionBar/ArtifactsFilters'
@@ -74,8 +73,6 @@ const DatasetsView = React.forwardRef(
     },
     { datasetsRef }
   ) => {
-    const location = useLocation()
-
     return (
       <>
         <div className="content-wrapper" ref={datasetsRef}>
@@ -133,10 +130,7 @@ const DatasetsView = React.forwardRef(
                     applyDetailsChangesCallback={applyDetailsChangesCallback}
                     detailsFormInitialValues={detailsFormInitialValues}
                     getCloseDetailsLink={() =>
-                      getCloseDetailsLink(
-                        isAllVersions ? ALL_VERSIONS_PATH : DATASETS_TAB,
-                        location
-                      )
+                      getCloseDetailsLink(isAllVersions ? ALL_VERSIONS_PATH : DATASETS_TAB)
                     }
                     handleCancel={() => setSelectedDatasetMin({})}
                     pageData={pageData}

diff --git a/src/components/Details/DetailsHeader/DetailsHeader.js b/src/components/Details/DetailsHeader/DetailsHeader.js
@@ -142,7 +142,7 @@ const DetailsHeader = ({
               className="item-header__back-btn"
               to={
                 getCloseDetailsLink
-                  ? getCloseDetailsLink(selectedItem.name, location)
+                  ? getCloseDetailsLink(selectedItem.name)
                   : generateUrlFromRouterPath(
                       window.location.pathname.split('/').slice(0, -2).join('/') +
                         window.location.search
@@ -334,7 +334,7 @@ const DetailsHeader = ({
                 data-testid="details-close-btn"
                 to={
                   getCloseDetailsLink
-                    ? getCloseDetailsLink(selectedItem.name, location)
+                    ? getCloseDetailsLink(selectedItem.name)
                     : getDefaultCloseDetailsLink(params, pageData.page, tab)
                 }
                 onClick={handleCancelClick}

diff --git a/src/components/Documents/DocumentsView.js b/src/components/Documents/DocumentsView.js
@@ -20,7 +20,6 @@ such restriction.
 import React from 'react'
 import PropTypes from 'prop-types'
 import { isEmpty } from 'lodash'
-import { useLocation } from 'react-router-dom'
 
 import Breadcrumbs from '../../common/Breadcrumbs/Breadcrumbs'
 import Loader from '../../common/Loader/Loader'
@@ -69,8 +68,6 @@ const DocumentsView = React.forwardRef(
     },
     { documentsRef }
   ) => {
-    const location = useLocation()
-
     return (
       <>
         <div className="content-wrapper" ref={documentsRef}>
@@ -120,10 +117,7 @@ const DocumentsView = React.forwardRef(
                     applyDetailsChangesCallback={applyDetailsChangesCallback}
                     detailsFormInitialValues={detailsFormInitialValues}
                     getCloseDetailsLink={() =>
-                      getCloseDetailsLink(
-                        isAllVersions ? ALL_VERSIONS_PATH : DOCUMENTS_TAB,
-                        location
-                      )
+                      getCloseDetailsLink(isAllVersions ? ALL_VERSIONS_PATH : DOCUMENTS_TAB)
                     }
                     handleCancel={() => setSelectedDocumentMin({})}
                     pageData={pageData}

diff --git a/src/components/Files/FilesView.js b/src/components/Files/FilesView.js
@@ -20,7 +20,6 @@ such restriction.
 import React from 'react'
 import PropTypes from 'prop-types'
 import { isEmpty } from 'lodash'
-import { useLocation } from 'react-router-dom'
 
 import ActionBar from '../ActionBar/ActionBar'
 import ArtifactsFilters from '../ArtifactsActionBar/ArtifactsFilters'
@@ -73,8 +72,6 @@ const FilesView = React.forwardRef(
     },
     { filesRef }
   ) => {
-    const location = useLocation()
-
     return (
       <>
         <div className="content-wrapper" ref={filesRef}>
@@ -132,7 +129,7 @@ const FilesView = React.forwardRef(
                     applyDetailsChangesCallback={applyDetailsChangesCallback}
                     detailsFormInitialValues={detailsFormInitialValues}
                     getCloseDetailsLink={() =>
-                      getCloseDetailsLink(isAllVersions ? ALL_VERSIONS_PATH : FILES_TAB, location)
+                      getCloseDetailsLink(isAllVersions ? ALL_VERSIONS_PATH : FILES_TAB)
                     }
                     handleCancel={() => setSelectedFileMin({})}
                     pageData={pageData}

diff --git a/src/components/FunctionsPage/FunctionsView.js b/src/components/FunctionsPage/FunctionsView.js
@@ -18,7 +18,7 @@ under the Apache 2.0 license is conditioned upon your compliance with
 such restriction.
 */
 import React from 'react'
-import { useLocation, useParams } from 'react-router-dom'
+import { useParams } from 'react-router-dom'
 import PropTypes from 'prop-types'
 
 import ActionBar from '../ActionBar/ActionBar'
@@ -74,7 +74,6 @@ const FunctionsView = ({
   tableContent
 }) => {
   const params = useParams()
-  const location = useLocation()
 
   return (
     <>
@@ -132,10 +131,7 @@ const FunctionsView = ({
                 <Table
                   actionsMenu={actionsMenu}
                   getCloseDetailsLink={() =>
-                    getCloseDetailsLink(
-                      isAllVersions ? ALL_VERSIONS_PATH : FUNCTIONS_PAGE_PATH,
-                      location
-                    )
+                    getCloseDetailsLink(isAllVersions ? ALL_VERSIONS_PATH : FUNCTIONS_PAGE_PATH)
                   }
                   handleCancel={handleCancel}
                   pageData={pageData}

diff --git a/src/components/ModelsPage/Models/ModelsView.js b/src/components/ModelsPage/Models/ModelsView.js
@@ -20,7 +20,6 @@ such restriction.
 import React from 'react'
 import PropTypes from 'prop-types'
 import { isEmpty } from 'lodash'
-import { useLocation } from 'react-router-dom'
 
 import ActionBar from '../../ActionBar/ActionBar'
 import ArtifactsFilters from '../../ArtifactsActionBar/ArtifactsFilters'
@@ -73,8 +72,6 @@ const ModelsView = React.forwardRef(
     },
     { modelsRef }
   ) => {
-    const location = useLocation()
-
     return (
       <>
         <div className="models" ref={modelsRef}>
@@ -141,7 +138,7 @@ const ModelsView = React.forwardRef(
                   applyDetailsChangesCallback={applyDetailsChangesCallback}
                   detailsFormInitialValues={detailsFormInitialValues}
                   getCloseDetailsLink={() =>
-                    getCloseDetailsLink(isAllVersions ? ALL_VERSIONS_PATH : MODELS_TAB, location)
+                    getCloseDetailsLink(isAllVersions ? ALL_VERSIONS_PATH : MODELS_TAB)
                   }
                   handleCancel={() => setSelectedModelMin({})}
                   pageData={pageData}

diff --git a/src/components/Workflow/Workflow.js b/src/components/Workflow/Workflow.js
@@ -22,7 +22,7 @@ import { connect } from 'react-redux'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
 import { forEach, isEmpty } from 'lodash'
-import { useLocation, useNavigate, useParams } from 'react-router-dom'
+import { useNavigate, useParams } from 'react-router-dom'
 
 import Details from '../Details/Details'
 import MlReactFlow from '../../common/ReactFlow/MlReactFlow'
@@ -88,7 +88,6 @@ const Workflow = ({
   const params = useParams()
   const navigate = useNavigate()
   const { isStagingMode } = useMode()
-  const location = useLocation()
 
   const graphViewClassNames = classnames(
     'graph-view',
@@ -264,7 +263,7 @@ const Workflow = ({
               <Details
                 actionsMenu={actionsMenu}
                 detailsMenu={pageData.details.menu}
-                getCloseDetailsLink={() => getCloseDetailsLink(params.workflowId, location)}
+                getCloseDetailsLink={() => getCloseDetailsLink(params.workflowId)}
                 handleCancel={handleCancel}
                 pageData={pageData}
                 retryRequest={refreshJobs}
@@ -276,7 +275,7 @@ const Workflow = ({
         ) : (
           <Table
             actionsMenu={actionsMenu}
-            getCloseDetailsLink={() => getCloseDetailsLink(params.workflowId, location)}
+            getCloseDetailsLink={() => getCloseDetailsLink(params.workflowId)}
             handleCancel={handleCancel}
             hideActionsMenu
             pageData={pageData}

diff --git a/src/elements/JobsTable/JobsTable.js b/src/elements/JobsTable/JobsTable.js
@@ -219,11 +219,11 @@ const JobsTable = React.forwardRef(
       (job, isDeleteAll) => {
         handleDeleteJob(isDeleteAll, job, refreshJobs, filters, dispatch).then(() => {
           if (params.jobName) {
-            navigate(getCloseDetailsLink(params.jobName, location, true))
+            navigate(getCloseDetailsLink(params.jobName, true))
           }
         })
       },
-      [refreshJobs, filters, dispatch, params.jobName, navigate, location]
+      [refreshJobs, filters, dispatch, params.jobName, navigate]
     )
 
     const handleConfirmDeleteJob = useCallback(
@@ -320,8 +320,7 @@ const JobsTable = React.forwardRef(
         setSelectedJob,
         modifyAndSelectRun,
         searchParams,
-        paginationConfigJobsRef,
-        location
+        paginationConfigJobsRef
       )
     }, [
       searchParams,
@@ -332,8 +331,7 @@ const JobsTable = React.forwardRef(
       params.jobName,
       params.projectName,
       setSelectedJob,
-      modifyAndSelectRun,
-      location
+      modifyAndSelectRun
     ])
 
     return (
@@ -355,7 +353,7 @@ const JobsTable = React.forwardRef(
             <>
               <Table
                 actionsMenu={actionsMenu}
-                getCloseDetailsLink={() => getCloseDetailsLink(params.jobName, location)}
+                getCloseDetailsLink={() => getCloseDetailsLink(params.jobName)}
                 handleCancel={() => setSelectedJob({})}
                 pageData={pageData}
                 retryRequest={handleRefreshWithFilters}

diff --git a/src/utils/jobs.util.js b/src/utils/jobs.util.js
@@ -55,8 +55,7 @@ export const checkForSelectedJob = debounce(
     setSelectedJob,
     modifyAndSelectRun,
     searchParams,
-    paginationConfigJobsRef,
-    location
+    paginationConfigJobsRef
   ) => {
     if (jobId) {
       const searchBePage = parseInt(searchParams.get(BE_PAGE))
@@ -68,7 +67,7 @@ export const checkForSelectedJob = debounce(
         })
 
         if (!selectedPaginatedJob) {
-          navigate(getCloseDetailsLink(jobName, location, true), { replace: true })
+          navigate(getCloseDetailsLink(jobName, true), { replace: true })
         } else if (selectedPaginatedJob) {
           modifyAndSelectRun(cloneDeep(selectedPaginatedJob))
         }

diff --git a/src/utils/link-helper.util.js b/src/utils/link-helper.util.js
@@ -41,11 +41,17 @@ export const generateUrlFromRouterPath = link => {
   return new URL(link, window.location.origin).toString()
 }
 
-export const getCloseDetailsLink = (paramName, location, ignoreOrigin) => {
+export const getCloseDetailsLink = (paramName, ignoreOrigin) => {
+  let pathname = window.location.pathname
+
+  if (ignoreOrigin && pathname.startsWith(process.env.PUBLIC_URL)) {
+    pathname = pathname.slice(process.env.PUBLIC_URL.length)
+  }
+
   const link =
-    location.pathname
+    pathname
       .split('/')
-      .splice(0, location.pathname.split('/').lastIndexOf(paramName) + 1)
+      .splice(0, pathname.split('/').lastIndexOf(paramName) + 1)
       .join('/') + window.location.search
 
   return ignoreOrigin ? link : generateUrlFromRouterPath(link)