From b49809203dca9831e0e6f6f9ba1a1d7f1832e1ea Mon Sep 17 00:00:00 2001
From: ilan7empest <therecanbeonly1.1984@gmail.com>
Date: Thu, 16 Nov 2023 17:57:03 +0800
Subject: [PATCH] Fix [Quick actions] Add breadcrumbs to Quick actions page

---
 .../ProjectDetailsHeader.js                   | 69 ++++++++-------
 .../ProjectOverview/ProjectOverview.js        | 84 +++++++++----------
 2 files changed, 80 insertions(+), 73 deletions(-)

diff --git a/src/common/ProjectDetailsHeader/ProjectDetailsHeader.js b/src/common/ProjectDetailsHeader/ProjectDetailsHeader.js
index 63bca4622c..4dec376b47 100644
--- a/src/common/ProjectDetailsHeader/ProjectDetailsHeader.js
+++ b/src/common/ProjectDetailsHeader/ProjectDetailsHeader.js
@@ -35,38 +35,45 @@ const ProjectDetailsHeader = ({ projectData, projectName }) => {
           <div className="project-details__header">
             <span className="project-details__title">{projectName}</span>
           </div>
-          <p className="project-details__description">{projectData.spec.description ?? ''}</p>
+          {projectData && (
+            <p className="project-details__description">{projectData.spec.description}</p>
+          )}
         </div>
-        <ul className="project-details__details">
-          <li>
-            <span className="project-details__details-label">Created:</span>
-            <span>
-              {getDateAndTimeByFormat(projectData.metadata.created, 'MM/DD/YYYY, HH:mm:ss A')}
-            </span>
-          </li>
-          <li>
-            <span className="project-details__details-label">Owner:</span>
-            <span>{projectData.spec.owner}</span>
-          </li>
-          <li>
-            <span className="project-details__details-label">Status:</span>
-            <div>
-              <i className={`state-${projectData.status.state}`} />
-              <span>{projectData.status.state}</span>
-            </div>
-          </li>
-          <li>
-            {location.pathname.includes(PROJECT_MONITOR) ? (
-              <Link to={`/projects/${projectName}/${PROJECT_QUICK_ACTIONS_PAGE}`} className="link">
-                Project quick actions
-              </Link>
-            ) : (
-              <Link to={`/projects/${projectName}/${PROJECT_MONITOR}`} className="link">
-                Project monitoring
-              </Link>
-            )}
-          </li>
-        </ul>
+        {projectData && (
+          <ul className="project-details__details">
+            <li>
+              <span className="project-details__details-label">Created:</span>
+              <span>
+                {getDateAndTimeByFormat(projectData.metadata.created, 'MM/DD/YYYY, HH:mm:ss A')}
+              </span>
+            </li>
+            <li>
+              <span className="project-details__details-label">Owner:</span>
+              <span>{projectData.spec.owner}</span>
+            </li>
+            <li>
+              <span className="project-details__details-label">Status:</span>
+              <div>
+                <i className={`state-${projectData.status.state}`} />
+                <span>{projectData.status.state}</span>
+              </div>
+            </li>
+            <li>
+              {location.pathname.includes(PROJECT_MONITOR) ? (
+                <Link
+                  to={`/projects/${projectName}/${PROJECT_QUICK_ACTIONS_PAGE}`}
+                  className="link"
+                >
+                  Project quick actions
+                </Link>
+              ) : (
+                <Link to={`/projects/${projectName}/${PROJECT_MONITOR}`} className="link">
+                  Project monitoring
+                </Link>
+              )}
+            </li>
+          </ul>
+        )}
       </div>
     </div>
   )
diff --git a/src/components/Project/ProjectOverview/ProjectOverview.js b/src/components/Project/ProjectOverview/ProjectOverview.js
index 9782b85ee3..29a0e91ded 100644
--- a/src/components/Project/ProjectOverview/ProjectOverview.js
+++ b/src/components/Project/ProjectOverview/ProjectOverview.js
@@ -22,6 +22,7 @@ import { connect } from 'react-redux'
 import { isEmpty } from 'lodash'
 import { useNavigate, useParams } from 'react-router-dom'
 
+import Breadcrumbs from '../../../common/Breadcrumbs/Breadcrumbs'
 import Loader from '../../../common/Loader/Loader'
 import NoData from '../../../common/NoData/NoData'
 import ProjectAction from '../ProjectAction/ProjectAction'
@@ -56,10 +57,6 @@ const ProjectOverview = ({ fetchProject, project }) => {
     )
   }, [fetchProject, navigate, params.projectName])
 
-  if (project.loading) {
-    return <Loader />
-  }
-
   if (project.error) {
     return (
       <div className="project__error-container">
@@ -82,54 +79,57 @@ const ProjectOverview = ({ fetchProject, project }) => {
     )
   }
 
-  if (isEmpty(project.data)) {
-    return <NoData />
-  }
-
   return (
     <div className="project-overview">
+      <div className="content__header">
+        <Breadcrumbs />
+      </div>
       <div className="project-overview__header">
         <ProjectDetailsHeader projectData={project.data} projectName={params.projectName} />
       </div>
-
-      <div className="project-overview__content">
-        {/* move to card */}
-        {Object.keys(cards).map(card => {
-          const { additionalLinks, actions, subTitle, title } = cards[card]
-          return (
-            <div className="project-overview-card" key={card}>
-              <div className="project-overview-card__top">
-                <div className="project-overview-card__header">
-                  <h3 className="project-overview-card__header-title">{title}</h3>
-                  <p className="project-overview-card__header-subtitle">{subTitle ?? ''}</p>
+      {project.loading && <Loader />}
+      {isEmpty(project.data) && !project.loading ? (
+        <NoData />
+      ) : (
+        <div className="project-overview__content">
+          {/* move to card */}
+          {Object.keys(cards).map(card => {
+            const { additionalLinks, actions, subTitle, title } = cards[card]
+            return (
+              <div className="project-overview-card" key={card}>
+                <div className="project-overview-card__top">
+                  <div className="project-overview-card__header">
+                    <h3 className="project-overview-card__header-title">{title}</h3>
+                    <p className="project-overview-card__header-subtitle">{subTitle ?? ''}</p>
+                  </div>
+                  <div className="project-overview-card__actions">
+                    <ProjectAction actions={actions} onClick={handlePathExecution} />
+                  </div>
                 </div>
-                <div className="project-overview-card__actions">
-                  <ProjectAction actions={actions} onClick={handlePathExecution} />
+                <div className="project-overview-card__center">
+                  <ProjectOverviewTableRow />
                 </div>
-              </div>
-              <div className="project-overview-card__center">
-                <ProjectOverviewTableRow />
-              </div>
 
-              <div className="project-overview-card__bottom">
-                <p className="label">Resources</p>
-                <div className="additional-links">
-                  {additionalLinks &&
-                    additionalLinks.map(({ id, label, handleClick }) => (
-                      <span
-                        key={id}
-                        className="link"
-                        onClick={() => handlePathExecution(handleClick)}
-                      >
-                        {label}
-                      </span>
-                    ))}
+                <div className="project-overview-card__bottom">
+                  <p className="label">Resources</p>
+                  <div className="additional-links">
+                    {additionalLinks &&
+                      additionalLinks.map(({ id, label, handleClick }) => (
+                        <span
+                          key={id}
+                          className="link"
+                          onClick={() => handlePathExecution(handleClick)}
+                        >
+                          {label}
+                        </span>
+                      ))}
+                  </div>
                 </div>
               </div>
-            </div>
-          )
-        })}
-      </div>
+            )
+          })}
+        </div>
+      )}
     </div>
   )
 }