Impl [Redirection] Wrong link redirection with invalid project name (#2209)

Author: Taras-Hlukhovetskyi

src/components/ConsumerGroupsWrapper/ConsumerGroupsWrapper.js

@@ -28,14 +28,12 @@ import Loader from '../../common/Loader/Loader'
 import nuclioActions from '../../actions/nuclio'
 import { GROUP_BY_NONE } from '../../constants'
 import { areNuclioStreamsEnabled } from '../../utils/helper'
-import { isProjectValid } from '../../utils/handleRedirect'
 import { setFilters } from '../../reducers/filtersReducer'
 import { showErrorNotification } from '../../utils/notifications.util'
 
 const ConsumerGroupsWrapper = ({
   fetchNuclioV3ioStreams,
   frontendSpec,
-  projectsNames,
   resetV3ioStreamsError,
   v3ioStreams
 }) => {
@@ -48,10 +46,6 @@ const ConsumerGroupsWrapper = ({
     [frontendSpec]
   )
 
-  useEffect(() => {
-    isProjectValid(navigate, projectsNames.data, params.projectName)
-  }, [navigate, params.projectName, projectsNames.data])
-
   useEffect(() => {
     dispatch(setFilters({ groupBy: GROUP_BY_NONE }))
   }, [dispatch])
@@ -99,10 +93,9 @@ const ConsumerGroupsWrapper = ({
 }
 
 export default connect(
-  ({ appStore, nuclioStore, projectStore }) => ({
+  ({ appStore, nuclioStore }) => ({
     frontendSpec: appStore.frontendSpec,
-    v3ioStreams: nuclioStore.v3ioStreams,
-    projectsNames: projectStore.projectsNames
+    v3ioStreams: nuclioStore.v3ioStreams
   }),
   {
     ...nuclioActions

src/components/CreateJobPage/CreateJobPage.js

@@ -18,7 +18,7 @@ under the Apache 2.0 license is conditioned upon your compliance with
 such restriction.
 */
 import React, { useState, useEffect } from 'react'
-import { useNavigate, useParams } from 'react-router-dom'
+import { useParams } from 'react-router-dom'
 import { connect } from 'react-redux'
 import { includes, isEmpty } from 'lodash'
 
@@ -30,7 +30,6 @@ import jobsActions from '../../actions/jobs'
 import projectsAction from '../../actions/projects'
 import { PANEL_CREATE_MODE } from '../../constants'
 import { generateProjectsList } from '../../utils/projects'
-import { isProjectValid } from '../../utils/handleRedirect'
 import { functionRunKinds } from '../Jobs/jobs.util'
 
 const CreateJobPage = ({
@@ -42,7 +41,6 @@ const CreateJobPage = ({
   removeNewJob
 }) => {
   const params = useParams()
-  const navigate = useNavigate()
   const [filterByName, setFilterByName] = useState('')
   const [filterMatches, setFilterMatches] = useState([])
   const [filteredFunctions, setFilteredFunctions] = useState([])
@@ -57,10 +55,6 @@ const CreateJobPage = ({
   const [templates, setTemplates] = useState([])
   const [showPanel, setShowPanel] = useState(false)
 
-  useEffect(() => {
-    isProjectValid(navigate, projectStore.projectsNames.data, params.projectName)
-  }, [navigate, params.projectName, projectStore.projectsNames.data])
-
   useEffect(() => {
     if (!selectedProject) {
       setSelectedProject(params.projectName)

src/components/Jobs/Jobs.js

@@ -39,7 +39,7 @@ import {
 } from '../../constants'
 import { TERTIARY_BUTTON } from 'igz-controls/constants'
 import { actionCreator, actionsMenuHeader, monitorJob, rerunJob, tabs } from './jobs.util'
-import { isPageTabValid, isProjectValid } from '../../utils/handleRedirect'
+import { isPageTabValid } from '../../utils/handleRedirect'
 
 export const JobsContext = React.createContext({})
 
@@ -53,7 +53,6 @@ const Jobs = ({ fetchJobFunction }) => {
   const location = useLocation()
   const dispatch = useDispatch()
   const functionsStore = useSelector(store => store.functionsStore)
-  const projectStore = useSelector(store => store.projectStore)
   const jobsStore = useSelector(store => store.jobsStore)
   const workflowsStore = useSelector(store => store.workflowsStore)
   const appStore = useSelector(store => store.appStore)
@@ -99,10 +98,6 @@ const Jobs = ({ fetchJobFunction }) => {
     }
   }, [navigate, params.pageTab, location])
 
-  useEffect(() => {
-    isProjectValid(navigate, projectStore.projectsNames.data, params.projectName)
-  }, [navigate, params.projectName, projectStore.projectsNames.data])
-
   return (
     <>
       <div className="content-wrapper">

src/components/Project/ProjectMonitor.js

@@ -115,28 +115,27 @@ const ProjectMonitor = ({
     }
   }, [isDemoMode, navigate, params, openRegisterArtifactModal, openRegisterModelModal])
 
-  const fetchProjectData = useCallback(() => {
-    fetchProject(params.projectName).catch(error => {
+  const fetchProjectDataAndSummary = useCallback(() => {
+    Promise.all([fetchProject(params.projectName), fetchProjectSummary(params.projectName)]).catch(error => {
       handleFetchProjectError(error, navigate, setConfirmData)
     })
-  }, [fetchProject, navigate, params.projectName])
+  }, [fetchProject, fetchProjectSummary, navigate, params.projectName])
+
+
 
   const resetProjectData = useCallback(() => {
     removeProjectData()
   }, [removeProjectData])
 
   useEffect(() => {
-    fetchProjectData()
-    fetchProjectSummary(params.projectName)
+    fetchProjectDataAndSummary()
 
     return () => {
       resetProjectData()
       removeProjectSummary()
     }
   }, [
-    fetchProjectSummary,
-    fetchProjectData,
-    params.projectName,
+    fetchProjectDataAndSummary,
     removeProjectSummary,
     resetProjectData
   ])
@@ -260,8 +259,7 @@ const ProjectMonitor = ({
   const handleRefresh = () => {
     removeProjectData()
     removeProjectSummary()
-    fetchProjectData()
-    fetchProjectSummary(params.projectName)
+    fetchProjectDataAndSummary()
 
     if (nuclioStreamsAreEnabled && !isNuclioModeDisabled) {
       fetchNuclioV3ioStreams(params.projectName)

src/components/ProjectSettings/ProjectSettings.js

@@ -42,13 +42,12 @@ import {
 } from '../../elements/MembersPopUp/membersReducer'
 import projectsIguazioApi from '../../api/projects-iguazio-api'
 import { PROJECTS_SETTINGS_MEMBERS_TAB, PROJECTS_SETTINGS_SECRETS_TAB } from '../../constants'
-import { isProjectValid } from '../../utils/handleRedirect'
 import { setNotification } from '../../reducers/notificationReducer'
 import { showErrorNotification } from '../../utils/notifications.util'
 
 import './projectSettings.scss'
 
-const ProjectSettings = ({ frontendSpec, projectStore }) => {
+const ProjectSettings = ({ frontendSpec }) => {
   const [projectMembersIsShown, setProjectMembersIsShown] = useState(false)
   const [projectOwnerIsShown, setProjectOwnerIsShown] = useState(false)
   const [membersState, membersDispatch] = useReducer(membersReducer, initialMembersState)
@@ -211,10 +210,6 @@ const ProjectSettings = ({ frontendSpec, projectStore }) => {
     }
   }, [fetchProjectUsersData, resetProjectData])
 
-  useEffect(() => {
-    isProjectValid(navigate, projectStore.projectsNames.data, params.projectName)
-  }, [navigate, params.projectName, projectStore.projectsNames.data])
-
   useEffect(() => {
     if (!validTabs.includes(params.pageTab)) {
       navigate(`/projects/${params.projectName}/settings/general`)
@@ -258,8 +253,7 @@ const ProjectSettings = ({ frontendSpec, projectStore }) => {
 }
 
 export default connect(
-  ({ appStore, projectStore }) => ({
-    projectStore,
+  ({ appStore }) => ({
     frontendSpec: appStore.frontendSpec
   }),
   null

src/elements/ProjectSettingsGeneral/ProjectSettingsGeneral.js

@@ -279,13 +279,20 @@ const ProjectSettingsGeneral = ({
   }
 
   useEffect(() => {
-    fetchProject(params.projectName)
+    fetchProject(params.projectName).catch(error => {
+      const customErrorMsg =
+        error.response?.status === FORBIDDEN_ERROR_STATUS_CODE
+          ? 'Permission denied'
+          : getErrorMsg(error, 'Failed to fetch project data')
+
+      showErrorNotification(dispatch, error, '', customErrorMsg)
+    })
 
     return () => {
       removeProjectData()
       setEditProjectData(initialEditProjectData)
     }
-  }, [removeProjectData, params.pageTab, params.projectName, fetchProject])
+  }, [removeProjectData, params.pageTab, params.projectName, fetchProject, dispatch])
 
   return (
     <ProjectSettingsGeneralView

src/layout/Page/Page.js

@@ -19,7 +19,7 @@ such restriction.
 */
 import React, { useEffect, useMemo, useRef } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
-import { useParams, Outlet } from 'react-router-dom'
+import { useParams, Outlet, useNavigate } from 'react-router-dom'
 import classNames from 'classnames'
 import { isEmpty } from 'lodash'
 
@@ -29,13 +29,15 @@ import DownloadContainer from '../../common/Download/DownloadContainer'
 import { getTransitionEndEventName } from 'igz-controls/utils/common.util'
 import { fetchFrontendSpec } from '../../reducers/appReducer'
 import { NAVBAR_WIDTH_CLOSED, NAVBAR_WIDTH_OPENED } from '../../constants'
+import { isProjectValid } from '../../utils/handleRedirect'
 
 import './Page.scss'
 
 const Page = ({ isNavbarPinned, setProjectName }) => {
   const { projectName } = useParams()
   const mainRef = useRef()
   const dispatch = useDispatch()
+  const navigate = useNavigate()
   const transitionEndEventName = useMemo(() => getTransitionEndEventName(), [])
   const pinnedClasses = classNames(!(isNavbarPinned && projectName) && 'unpinned')
   const mainStyles = {
@@ -46,11 +48,16 @@ const Page = ({ isNavbarPinned, setProjectName }) => {
       : `${NAVBAR_WIDTH_CLOSED}px`
   }
   const { frontendSpec, frontendSpecPopupIsOpened } = useSelector(store => store.appStore)
+  const { projectsNames } = useSelector(store => store.projectStore)
 
   useEffect(() => {
     setProjectName(projectName)
   }, [projectName, setProjectName])
 
+  useEffect(() => {
+    isProjectValid(navigate, projectsNames.data, projectName)
+  }, [navigate, projectName, projectsNames.data])
+
   useEffect(() => {
     if (mainRef) {
       mainRef.current.addEventListener(transitionEndEventName, event => {