Fix by code review

Author: ilan7empest

src/common/Breadcrumbs/Breadcrumbs.jsx

@@ -21,18 +21,20 @@ import React, { useMemo, useRef, useState } from 'react'
 import PropTypes from 'prop-types'
 import { useLocation, useParams } from 'react-router-dom'
 import { useSelector } from 'react-redux'
-import { startCase } from 'lodash'
+import { capitalize } from 'lodash'
 
 import BreadcrumbsStep from './BreadcrumbsStep/BreadcrumbsStep'
 
-import { generateMlrunScreens, generateTabsList } from './breadcrumbs.util'
-import { MONITORING_APP_PAGE, PROJECTS_PAGE_PATH } from '../../constants'
+import { generateMlrunScreens } from './breadcrumbs.util'
+import { PROJECTS_PAGE_PATH } from '../../constants'
 import { generateProjectsList } from '../../utils/projects'
 import { useMode } from '../../hooks/mode.hook'
 
+import { BREADCRUMBS_STEP_ITEM_TYPE, BREADCRUMBS_STEP_PROJECT_TYPE, BREADCRUMBS_STEP_SCREEN_TYPE } from '../../constants'
+
 import './breadcrumbs.scss'
 
-const Breadcrumbs = ({ onClick = () => { } }) => {
+const Breadcrumbs = ({ itemName = '', onClick = () => { } }) => {
   const [searchValue, setSearchValue] = useState('')
   const [showScreensList, setShowScreensList] = useState(false)
   const [showProjectsList, setShowProjectsList] = useState(false)
@@ -44,47 +46,45 @@ const Breadcrumbs = ({ onClick = () => { } }) => {
   const projectStore = useSelector(state => state.projectStore)
 
   const projectsList = useMemo(() => {
-    return generateProjectsList(projectStore.projectsNames.data)
-  }, [projectStore.projectsNames.data])
+    const projectsList = generateProjectsList(projectStore.projectsNames.data, params.projectName,)
+    return projectsList.map(project => ({
+      ...project,
+      link: location.pathname.replace(params.projectName, project.id)
+    }))
+  }, [projectStore.projectsNames.data, location.pathname, params.projectName])
 
   const mlrunScreens = useMemo(() => {
     return generateMlrunScreens(params?.projectName ?? '', isDemoMode).filter(screen => !screen.hidden)
   }, [isDemoMode, params?.projectName])
-  const projectTabs = useMemo(() => {
-    return generateTabsList()
-  }, [])
+
+
   const urlParts = useMemo(() => {
-    if (params.projectName) {
-      const [projects, projectName, screenName, innerScreenName] = location.pathname.split('/').slice(1, 5)
-      const screen = mlrunScreens.find(screen => screen.id === (innerScreenName)) ?? mlrunScreens.find(screen => screen.id === (screenName))
-      let tab = projectTabs.find(tab =>
-        location.pathname
-          .split('/')
-          .slice(3)
-          .find(pathItem => pathItem === tab.id)
-      )
-
-      if (screen?.id === MONITORING_APP_PAGE) {
-        tab = {}
-      }
+    const [projects, projectName, page, innerScreenName] = location.pathname.split('/').slice(1, 5)
+    const screen = mlrunScreens.find(screen => screen.id === (page)) || mlrunScreens.find(screen => screen.id === (innerScreenName))
+
+    const pathItems = [
+      { id: projects, label: capitalize(projects), link: `/${PROJECTS_PAGE_PATH}` },
+      { id: projectName, label: projectName, link: `/projects/${projectName}`, type: BREADCRUMBS_STEP_PROJECT_TYPE },
+      { id: screen?.id, label: screen?.label, link: screen?.link, type: BREADCRUMBS_STEP_SCREEN_TYPE }
+    ]
 
+    itemName && pathItems.push({ id: itemName, label: itemName, type: BREADCRUMBS_STEP_ITEM_TYPE })
+
+
+    if (params.projectName) {
       return {
-        pathItems: [projects, projectName, screen?.label],
+        pathItems,
         screen,
-        tab: { ...tab, label: startCase(tab?.label?.replace('-', ' ')) || '' },
-        itemName: params.artifactName || params.funcName || params.jobName || params.workflowProjectName || params.appName || params.name || params.alertName || null,
       }
     } else {
-      const [page] = location.pathname.split('/').slice(3, 4)
-      const screen = mlrunScreens.find(screen => screen.id === page)
-
       return {
-        pathItems: [PROJECTS_PAGE_PATH, screen?.label || page],
+        pathItems: pathItems.filter(item => item.type !== BREADCRUMBS_STEP_PROJECT_TYPE),
         screen,
-        itemName: params.artifactName || params.name || params.jobName || params.workflowProjectName || params.alertName || null,
       }
     }
-  }, [location.pathname, params, mlrunScreens, projectTabs])
+
+
+  }, [itemName, location.pathname, params, mlrunScreens])
 
   return (
     <nav data-testid="breadcrumbs" className="breadcrumbs" ref={breadcrumbsRef}>
@@ -94,6 +94,7 @@ const Breadcrumbs = ({ onClick = () => { } }) => {
             <BreadcrumbsStep
               key={index}
               index={index}
+              itemName={itemName}
               mlrunScreens={mlrunScreens}
               onClick={onClick}
               params={params}
@@ -105,7 +106,7 @@ const Breadcrumbs = ({ onClick = () => { } }) => {
               setShowScreensList={setShowScreensList}
               showProjectsList={showProjectsList}
               showScreensList={showScreensList}
-              urlPart={urlPart}
+              pathItem={urlPart}
               urlParts={urlParts}
             />
           )
@@ -116,6 +117,7 @@ const Breadcrumbs = ({ onClick = () => { } }) => {
 }
 
 Breadcrumbs.propTypes = {
+  itemName: PropTypes.string,
   onClick: PropTypes.func
 }
 

src/common/Breadcrumbs/BreadcrumbsStep/BreadcrumbsStep.jsx

@@ -25,6 +25,7 @@ import classnames from 'classnames'
 import BreadcrumbsDropdown from '../../../elements/BreadcrumbsDropdown/BreadcrumbsDropdown'
 import { RoundedIcon } from 'igz-controls/components'
 
+import { BREADCRUMBS_STEP_ITEM_TYPE, BREADCRUMBS_STEP_PROJECT_TYPE, BREADCRUMBS_STEP_SCREEN_TYPE } from '../../../constants'
 import { scrollToElement } from '../../../utils/scroll.util'
 
 import ArrowIcon from 'igz-controls/images/arrow.svg?react'
@@ -45,7 +46,7 @@ const BreadcrumbsStep = React.forwardRef(
       setShowScreensList,
       showProjectsList,
       showScreensList,
-      urlPart,
+      pathItem,
       urlParts
     },
     ref
@@ -54,28 +55,11 @@ const BreadcrumbsStep = React.forwardRef(
     const screenListRef = useRef()
     const separatorRef = useRef()
 
-    const isParam = useMemo(() => Object.values(params ?? {}).includes(urlPart), [urlPart, params])
-    const label = useMemo(
-      () => (isParam ? urlPart : urlPart.charAt(0).toUpperCase() + urlPart.slice(1)),
-      [urlPart, isParam]
-    )
-
-    const to = useMemo(
-      () => `/${urlParts.pathItems.slice(0, index + 1).join('/')}`,
-      [index, urlParts.pathItems]
-    )
     const isLastStep = useMemo(
       () => index === urlParts.pathItems.length - 1,
       [index, urlParts.pathItems.length]
     )
 
-    const separatorClassNames = classnames(
-      'breadcrumbs__separator',
-      ((urlParts.pathItems[index + 1] === urlParts.screen?.id && !isParam) ||
-        urlParts.pathItems[index + 1] === params.projectName) &&
-      'breadcrumbs__separator_tumbler'
-    )
-
     const handleSelectDropdownItem = separatorRef => {
       if (showProjectsList) setShowProjectsList(false)
 
@@ -136,117 +120,94 @@ const BreadcrumbsStep = React.forwardRef(
     }, [handleCloseDropdown])
 
     const handleSeparatorClick = (nextItem, separatorRef) => {
-      const nextItemIsScreen = Boolean(mlrunScreens.find(screen => screen.label === nextItem))
+      if (nextItem.type === 'screen' || nextItem.type === 'project') {
 
-      if (nextItemIsScreen || nextItem === params.projectName) {
         const [activeSeparator] = document.getElementsByClassName('breadcrumbs__separator_active')
 
-        if (
-          activeSeparator &&
-          !separatorRef.current.classList.contains('breadcrumbs__separator_active')
-        ) {
-          activeSeparator.classList.remove('breadcrumbs__separator_active')
+        if (nextItem.type === BREADCRUMBS_STEP_PROJECT_TYPE) {
+          setShowProjectsList(state => !state)
+
+          if (showScreensList) {
+            setShowScreensList(false)
+          }
         }
 
-        if (nextItemIsScreen) {
+        if (nextItem.type === BREADCRUMBS_STEP_SCREEN_TYPE) {
           setShowScreensList(state => !state)
 
           if (showProjectsList) {
             setShowProjectsList(false)
           }
         }
 
-        if (nextItem === params.projectName) {
-          setShowProjectsList(state => !state)
-
-          if (showScreensList) {
-            setShowScreensList(false)
-          }
+        if (
+          activeSeparator &&
+          !separatorRef.current.classList.contains('breadcrumbs__separator_active')
+        ) {
+          activeSeparator.classList.remove('breadcrumbs__separator_active')
         }
 
         separatorRef.current.classList.toggle('breadcrumbs__separator_active')
       }
     }
 
     return isLastStep ? (
-      <>
-        {urlParts.itemName ? (
-          <>
-            <li
-              data-testid="breadcrumbs-last-item"
-              className="breadcrumbs__item"
-              key={`${index}${urlPart}`}
+      <li
+        data-testid="breadcrumbs-last-item"
+        className="breadcrumbs__item"
+        key={pathItem.id}
+      >
+        {pathItem.label}
+      </li>
+    )
+      : (
+        <>
+          <li key={pathItem.id} className="breadcrumbs__item">
+            <Link to={pathItem.link} onClick={onClick}>
+              {pathItem.label}
+            </Link>
+          </li>
+          <li key={index} className="breadcrumbs__item">
+            {urlParts.pathItems[index + 1]?.type === BREADCRUMBS_STEP_ITEM_TYPE ? (<div className='breadcrumbs__separator'><ArrowIcon /></div >) : <RoundedIcon
+              className='breadcrumbs__separator'
+              id={`separator-${index}`}
+              ref={separatorRef}
+              onClick={() => handleSeparatorClick(urlParts.pathItems[index + 1], separatorRef)}
             >
-              <Link to={urlParts.screen?.link} onClick={onClick}>
-                {urlParts.screen?.label || label}
-              </Link>
-
-            </li>
-            <li className="breadcrumbs__separator">
               <ArrowIcon />
-            </li>
-            <li data-testid="breadcrumbs-tab" className="breadcrumbs__item">
-              {urlParts.itemName}
-            </li>
-          </>
-        ) : (
-          <li
-            data-testid="breadcrumbs-last-item"
-            className="breadcrumbs__item"
-            key={`${index}${urlPart}`}
-          >
-            {urlParts.screen?.label || label}
-          </li>
-        )}
-      </>
-    ) : (
-      <>
-        <li key={`${index}${urlPart}`} className="breadcrumbs__item">
-          <Link to={to} onClick={onClick}>
-            {label}
-          </Link>
-        </li>
-        <li key={index} className="breadcrumbs__item">
-          <RoundedIcon
-            className={separatorClassNames}
-            id={`separator-${index}`}
-            ref={separatorRef}
-            onClick={() => handleSeparatorClick(urlParts.pathItems[index + 1], separatorRef)}
-          >
-            <ArrowIcon />
-          </RoundedIcon>
-          {showScreensList && urlParts.pathItems[index + 1] === urlParts.screen?.label && (
-            <BreadcrumbsDropdown
-              id="breadcrumbs-screens-dropdown"
-              link={to}
-              list={mlrunScreens}
-              onClick={() => handleSelectDropdownItem(separatorRef)}
-              ref={screenListRef}
-              selectedItem={urlParts.screen?.id}
-              searchValue={searchValue}
-              setSearchValue={setSearchValue}
-            />
-          )}
-          {showProjectsList && urlParts.pathItems[index + 1] === params.projectName && (
-            <>
+            </RoundedIcon>}
+            {showScreensList && urlParts.pathItems[index + 1].type === BREADCRUMBS_STEP_SCREEN_TYPE && (
               <BreadcrumbsDropdown
-                id="breadcrumbs-projects-dropdown"
-                link={to}
-                list={projectsList}
+                id="breadcrumbs-screens-dropdown"
+                link={pathItem.link}
+                list={mlrunScreens}
                 onClick={() => handleSelectDropdownItem(separatorRef)}
-                ref={projectListRef}
-                selectedItem={params.projectName}
+                ref={screenListRef}
+                selectedItem={urlParts.screen?.id}
                 searchValue={searchValue}
                 setSearchValue={setSearchValue}
-                urlParts={urlParts}
-                withSearch
-                withAllProjects
               />
-            </>
-          )}
-        </li>
-      </>
-    )
+            )}
+            {showProjectsList && urlParts.pathItems[index + 1].type === BREADCRUMBS_STEP_PROJECT_TYPE && (
+              <>
+                <BreadcrumbsDropdown
+                  id="breadcrumbs-projects-dropdown"
+                  link={pathItem.link}
+                  list={projectsList}
+                  onClick={() => handleSelectDropdownItem(separatorRef)}
+                  ref={projectListRef}
+                  selectedItem={params.projectName}
+                  searchValue={searchValue}
+                  setSearchValue={setSearchValue}
+                  urlParts={urlParts}
+                  withSearch
+                  withAllProjects
+                />
+              </>
+            )}
+          </li>
+        </>
+      )
   }
 )
 
@@ -257,27 +218,21 @@ BreadcrumbsStep.propTypes = {
   mlrunScreens: PropTypes.arrayOf(PropTypes.object).isRequired,
   onClick: PropTypes.func,
   params: PropTypes.object.isRequired,
+  pathItem: PropTypes.object.isRequired,
   projectsList: PropTypes.arrayOf(PropTypes.object).isRequired,
   searchValue: PropTypes.string.isRequired,
   setSearchValue: PropTypes.func.isRequired,
   setShowProjectsList: PropTypes.func.isRequired,
   setShowScreensList: PropTypes.func.isRequired,
   showProjectsList: PropTypes.bool.isRequired,
   showScreensList: PropTypes.bool.isRequired,
-  urlPart: PropTypes.string.isRequired,
   urlParts: PropTypes.shape({
-    pathItems: PropTypes.arrayOf(PropTypes.string).isRequired,
+    pathItems: PropTypes.arrayOf(PropTypes.object).isRequired,
     screen: PropTypes.shape({
       id: PropTypes.string,
       label: PropTypes.string,
       link: PropTypes.string
     }),
-    tab: PropTypes.shape({
-      id: PropTypes.string,
-      label: PropTypes.string
-
-    }),
-    itemName: PropTypes.string
   }).isRequired
 }
 

src/common/Breadcrumbs/BreadcrumbsStep/breadcrumbsStep.scss

@@ -20,10 +20,6 @@
   transition: transform 0.2s linear;
   user-select: none;
 
-  &_tumbler {
-    cursor: pointer;
-  }
-
   &_active {
     transform: rotate(90deg);
   }

src/common/Breadcrumbs/breadcrumbs.scss

@@ -1,5 +1,4 @@
 @use 'igz-controls/scss/mixins';
-@use 'igz-controls/scss/colors';
 
 .breadcrumbs {
   @include mixins.resetSpaces;