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 1/4] 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 63bca4622..4dec376b4 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 9782b85ee..29a0e91de 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>
   )
 }

From c6a2300f014757e96651590c155ab5a69c27227c Mon Sep 17 00:00:00 2001
From: ilan7empest <therecanbeonly1.1984@gmail.com>
Date: Thu, 16 Nov 2023 17:59:23 +0800
Subject: [PATCH 2/4] Fix breadcrumb uppercase

---
 src/common/Breadcrumbs/breadcrumbs.util.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/common/Breadcrumbs/breadcrumbs.util.js b/src/common/Breadcrumbs/breadcrumbs.util.js
index 90c8f9fd1..b8f9339c5 100644
--- a/src/common/Breadcrumbs/breadcrumbs.util.js
+++ b/src/common/Breadcrumbs/breadcrumbs.util.js
@@ -41,7 +41,7 @@ export const generateProjectScreens = params => [
     label: 'Quick actions',
     id: PROJECT_QUICK_ACTIONS_PAGE
   },
-  { label: 'Feature Store', id: 'feature-store' },
+  { label: 'Feature store', id: 'feature-store' },
   { label: 'Datasets', id: 'datasets' },
   { label: 'Artifacts', id: 'files' },
   { label: 'Models', id: 'models' },

From 2d423b7099fa3f159018b5b8dfc3bf51357e306a Mon Sep 17 00:00:00 2001
From: ilan7empest <therecanbeonly1.1984@gmail.com>
Date: Thu, 16 Nov 2023 19:37:46 +0800
Subject: [PATCH 3/4] Fix by code review

---
 src/common/ProjectDetailsHeader/ProjectDetailsHeader.js   | 7 ++++---
 src/common/ProjectDetailsHeader/ProjectDetailsHeader.scss | 1 +
 src/components/ProjectsPage/ProjectsView.js               | 4 ----
 src/components/ProjectsPage/projects.scss                 | 2 +-
 4 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/src/common/ProjectDetailsHeader/ProjectDetailsHeader.js b/src/common/ProjectDetailsHeader/ProjectDetailsHeader.js
index 4dec376b4..cf4634eae 100644
--- a/src/common/ProjectDetailsHeader/ProjectDetailsHeader.js
+++ b/src/common/ProjectDetailsHeader/ProjectDetailsHeader.js
@@ -35,9 +35,10 @@ const ProjectDetailsHeader = ({ projectData, projectName }) => {
           <div className="project-details__header">
             <span className="project-details__title">{projectName}</span>
           </div>
-          {projectData && (
-            <p className="project-details__description">{projectData.spec.description}</p>
-          )}
+
+          <p className="project-details__description">
+            {projectData && projectData.spec.description}
+          </p>
         </div>
         {projectData && (
           <ul className="project-details__details">
diff --git a/src/common/ProjectDetailsHeader/ProjectDetailsHeader.scss b/src/common/ProjectDetailsHeader/ProjectDetailsHeader.scss
index 3390a7713..6a2ab650f 100644
--- a/src/common/ProjectDetailsHeader/ProjectDetailsHeader.scss
+++ b/src/common/ProjectDetailsHeader/ProjectDetailsHeader.scss
@@ -30,6 +30,7 @@
   &__description {
     max-width: 75%;
     margin: 0;
+    word-break: break-word;
   }
 
   &__details {
diff --git a/src/components/ProjectsPage/ProjectsView.js b/src/components/ProjectsPage/ProjectsView.js
index 9732e20ca..2cde2c3ab 100644
--- a/src/components/ProjectsPage/ProjectsView.js
+++ b/src/components/ProjectsPage/ProjectsView.js
@@ -21,7 +21,6 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
 
-import Breadcrumbs from '../../common/Breadcrumbs/Breadcrumbs'
 import ContentMenu from '../../elements/ContentMenu/ContentMenu'
 import CreateProjectDialog from './CreateProjectDialog/CreateProjectDialog'
 import Loader from '../../common/Loader/Loader'
@@ -99,9 +98,6 @@ const ProjectsView = ({
           message={confirmData.message}
         />
       )}
-      <div className="projects__header">
-        <Breadcrumbs />
-      </div>
       <div className="projects__wrapper">
         <div className="projects-content-header">
           <div className="projects-content-header__col">
diff --git a/src/components/ProjectsPage/projects.scss b/src/components/ProjectsPage/projects.scss
index e5d815a70..4b31679b0 100644
--- a/src/components/ProjectsPage/projects.scss
+++ b/src/components/ProjectsPage/projects.scss
@@ -25,7 +25,7 @@
     display: flex;
     flex-flow: column nowrap;
     height: 100%;
-    padding: 0 12px 15px;
+    padding: 50px 12px 0;
 
     .projects-content-header {
       display: flex;

From b305aafa686b95d659da06ea764012db4b44ca3e Mon Sep 17 00:00:00 2001
From: ilan7empest <therecanbeonly1.1984@gmail.com>
Date: Fri, 17 Nov 2023 02:40:39 +0800
Subject: [PATCH 4/4] fix by code review

---
 src/common/ProjectDetailsHeader/ProjectDetailsHeader.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/common/ProjectDetailsHeader/ProjectDetailsHeader.scss b/src/common/ProjectDetailsHeader/ProjectDetailsHeader.scss
index 6a2ab650f..755d3715b 100644
--- a/src/common/ProjectDetailsHeader/ProjectDetailsHeader.scss
+++ b/src/common/ProjectDetailsHeader/ProjectDetailsHeader.scss
@@ -28,7 +28,7 @@
   }
 
   &__description {
-    max-width: 75%;
+    max-width: 90%;
     margin: 0;
     word-break: break-word;
   }