Skip to content

Commit

Permalink
Fix [Quick actions] Add breadcrumbs to Quick actions page (#2077)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ilan7empest
ilan7empest authored Nov 18, 2023
1 parent 464b92e commit 4dabcd2
Show file tree
Hide file tree
Showing 6 changed files with 85 additions and 80 deletions.
2 changes: 1 addition & 1 deletion src/common/Breadcrumbs/breadcrumbs.util.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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' },
Expand Down
70 changes: 39 additions & 31 deletions src/common/ProjectDetailsHeader/ProjectDetailsHeader.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,38 +35,46 @@ 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>

<p className="project-details__description">
{projectData && 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>
)
Expand Down
3 changes: 2 additions & 1 deletion src/common/ProjectDetailsHeader/ProjectDetailsHeader.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,8 +28,9 @@
}

&__description {
max-width: 75%;
max-width: 90%;
margin: 0;
word-break: break-word;
}

&__details {
Expand Down
84 changes: 42 additions & 42 deletions src/components/Project/ProjectOverview/ProjectOverview.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -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">
Expand All @@ -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>
)
}
Expand Down
4 changes: 0 additions & 4 deletions src/components/ProjectsPage/ProjectsView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -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">
Expand Down
2 changes: 1 addition & 1 deletion src/components/ProjectsPage/projects.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down

0 comments on commit 4dabcd2

Please sign in to comment.