Skip to content

Commit 101ee84

Browse files
ilan7empestilan7empest
committed
Fix [Quick actions] Add breadcrumbs to Quick actions page (#2077)
1 parent d087844 commit 101ee84

File tree

6 files changed

+85
-80
lines changed

6 files changed

+85
-80
lines changed

‎src/common/Breadcrumbs/breadcrumbs.util.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ export const generateProjectScreens = params => [
4141
label: 'Quick actions',
4242
id: PROJECT_QUICK_ACTIONS_PAGE
4343
},
44-
{ label: 'Feature Store', id: 'feature-store' },
44+
{ label: 'Feature store', id: 'feature-store' },
4545
{ label: 'Datasets', id: 'datasets' },
4646
{ label: 'Artifacts', id: 'files' },
4747
{ label: 'Models', id: 'models' },

‎src/common/ProjectDetailsHeader/ProjectDetailsHeader.js

Lines changed: 39 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -35,38 +35,46 @@ const ProjectDetailsHeader = ({ projectData, projectName }) => {
3535
<div className="project-details__header">
3636
<span className="project-details__title">{projectName}</span>
3737
</div>
38-
<p className="project-details__description">{projectData.spec.description ?? ''}</p>
38+
39+
<p className="project-details__description">
40+
{projectData && projectData.spec.description}
41+
</p>
3942
</div>
40-
<ul className="project-details__details">
41-
<li>
42-
<span className="project-details__details-label">Created:</span>
43-
<span>
44-
{getDateAndTimeByFormat(projectData.metadata.created, 'MM/DD/YYYY, HH:mm:ss A')}
45-
</span>
46-
</li>
47-
<li>
48-
<span className="project-details__details-label">Owner:</span>
49-
<span>{projectData.spec.owner}</span>
50-
</li>
51-
<li>
52-
<span className="project-details__details-label">Status:</span>
53-
<div>
54-
<i className={`state-${projectData.status.state}`} />
55-
<span>{projectData.status.state}</span>
56-
</div>
57-
</li>
58-
<li>
59-
{location.pathname.includes(PROJECT_MONITOR) ? (
60-
<Link to={`/projects/${projectName}/${PROJECT_QUICK_ACTIONS_PAGE}`} className="link">
61-
Project quick actions
62-
</Link>
63-
) : (
64-
<Link to={`/projects/${projectName}/${PROJECT_MONITOR}`} className="link">
65-
Project monitoring
66-
</Link>
67-
)}
68-
</li>
69-
</ul>
43+
{projectData && (
44+
<ul className="project-details__details">
45+
<li>
46+
<span className="project-details__details-label">Created:</span>
47+
<span>
48+
{getDateAndTimeByFormat(projectData.metadata.created, 'MM/DD/YYYY, HH:mm:ss A')}
49+
</span>
50+
</li>
51+
<li>
52+
<span className="project-details__details-label">Owner:</span>
53+
<span>{projectData.spec.owner}</span>
54+
</li>
55+
<li>
56+
<span className="project-details__details-label">Status:</span>
57+
<div>
58+
<i className={`state-${projectData.status.state}`} />
59+
<span>{projectData.status.state}</span>
60+
</div>
61+
</li>
62+
<li>
63+
{location.pathname.includes(PROJECT_MONITOR) ? (
64+
<Link
65+
to={`/projects/${projectName}/${PROJECT_QUICK_ACTIONS_PAGE}`}
66+
className="link"
67+
>
68+
Project quick actions
69+
</Link>
70+
) : (
71+
<Link to={`/projects/${projectName}/${PROJECT_MONITOR}`} className="link">
72+
Project monitoring
73+
</Link>
74+
)}
75+
</li>
76+
</ul>
77+
)}
7078
</div>
7179
</div>
7280
)

‎src/common/ProjectDetailsHeader/ProjectDetailsHeader.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,9 @@
2828
}
2929

3030
&__description {
31-
max-width: 75%;
31+
max-width: 90%;
3232
margin: 0;
33+
word-break: break-word;
3334
}
3435

3536
&__details {

‎src/components/Project/ProjectOverview/ProjectOverview.js

Lines changed: 42 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ import { connect } from 'react-redux'
2222
import { isEmpty } from 'lodash'
2323
import { useNavigate, useParams } from 'react-router-dom'
2424

25+
import Breadcrumbs from '../../../common/Breadcrumbs/Breadcrumbs'
2526
import Loader from '../../../common/Loader/Loader'
2627
import NoData from '../../../common/NoData/NoData'
2728
import ProjectAction from '../ProjectAction/ProjectAction'
@@ -56,10 +57,6 @@ const ProjectOverview = ({ fetchProject, project }) => {
5657
)
5758
}, [fetchProject, navigate, params.projectName])
5859

59-
if (project.loading) {
60-
return <Loader />
61-
}
62-
6360
if (project.error) {
6461
return (
6562
<div className="project__error-container">
@@ -82,54 +79,57 @@ const ProjectOverview = ({ fetchProject, project }) => {
8279
)
8380
}
8481

85-
if (isEmpty(project.data)) {
86-
return <NoData />
87-
}
88-
8982
return (
9083
<div className="project-overview">
84+
<div className="content__header">
85+
<Breadcrumbs />
86+
</div>
9187
<div className="project-overview__header">
9288
<ProjectDetailsHeader projectData={project.data} projectName={params.projectName} />
9389
</div>
94-
95-
<div className="project-overview__content">
96-
{/* move to card */}
97-
{Object.keys(cards).map(card => {
98-
const { additionalLinks, actions, subTitle, title } = cards[card]
99-
return (
100-
<div className="project-overview-card" key={card}>
101-
<div className="project-overview-card__top">
102-
<div className="project-overview-card__header">
103-
<h3 className="project-overview-card__header-title">{title}</h3>
104-
<p className="project-overview-card__header-subtitle">{subTitle ?? ''}</p>
90+
{project.loading && <Loader />}
91+
{isEmpty(project.data) && !project.loading ? (
92+
<NoData />
93+
) : (
94+
<div className="project-overview__content">
95+
{/* move to card */}
96+
{Object.keys(cards).map(card => {
97+
const { additionalLinks, actions, subTitle, title } = cards[card]
98+
return (
99+
<div className="project-overview-card" key={card}>
100+
<div className="project-overview-card__top">
101+
<div className="project-overview-card__header">
102+
<h3 className="project-overview-card__header-title">{title}</h3>
103+
<p className="project-overview-card__header-subtitle">{subTitle ?? ''}</p>
104+
</div>
105+
<div className="project-overview-card__actions">
106+
<ProjectAction actions={actions} onClick={handlePathExecution} />
107+
</div>
105108
</div>
106-
<div className="project-overview-card__actions">
107-
<ProjectAction actions={actions} onClick={handlePathExecution} />
109+
<div className="project-overview-card__center">
110+
<ProjectOverviewTableRow />
108111
</div>
109-
</div>
110-
<div className="project-overview-card__center">
111-
<ProjectOverviewTableRow />
112-
</div>
113112

114-
<div className="project-overview-card__bottom">
115-
<p className="label">Resources</p>
116-
<div className="additional-links">
117-
{additionalLinks &&
118-
additionalLinks.map(({ id, label, handleClick }) => (
119-
<span
120-
key={id}
121-
className="link"
122-
onClick={() => handlePathExecution(handleClick)}
123-
>
124-
{label}
125-
</span>
126-
))}
113+
<div className="project-overview-card__bottom">
114+
<p className="label">Resources</p>
115+
<div className="additional-links">
116+
{additionalLinks &&
117+
additionalLinks.map(({ id, label, handleClick }) => (
118+
<span
119+
key={id}
120+
className="link"
121+
onClick={() => handlePathExecution(handleClick)}
122+
>
123+
{label}
124+
</span>
125+
))}
126+
</div>
127127
</div>
128128
</div>
129-
</div>
130-
)
131-
})}
132-
</div>
129+
)
130+
})}
131+
</div>
132+
)}
133133
</div>
134134
)
135135
}

‎src/components/ProjectsPage/ProjectsView.js

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,6 @@ import React from 'react'
2121
import PropTypes from 'prop-types'
2222
import classnames from 'classnames'
2323

24-
import Breadcrumbs from '../../common/Breadcrumbs/Breadcrumbs'
2524
import ContentMenu from '../../elements/ContentMenu/ContentMenu'
2625
import CreateProjectDialog from './CreateProjectDialog/CreateProjectDialog'
2726
import Loader from '../../common/Loader/Loader'
@@ -99,9 +98,6 @@ const ProjectsView = ({
9998
message={confirmData.message}
10099
/>
101100
)}
102-
<div className="projects__header">
103-
<Breadcrumbs />
104-
</div>
105101
<div className="projects__wrapper">
106102
<div className="projects-content-header">
107103
<div className="projects-content-header__col">

‎src/components/ProjectsPage/projects.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
display: flex;
2626
flex-flow: column nowrap;
2727
height: 100%;
28-
padding: 0 12px 15px;
28+
padding: 50px 12px 0;
2929

3030
.projects-content-header {
3131
display: flex;

0 commit comments

Comments
 (0)