Skip to content

Commit

Permalink
Fix [Quick actions] Add breadcrumbs to Quick actions page
Browse files Browse the repository at this point in the history
  • Loading branch information
@ilan7empest
ilan7empest committed Nov 16, 2023
1 parent 2f6fc03 commit b498092
Show file tree
Hide file tree
Showing 2 changed files with 80 additions and 73 deletions.
69 changes: 38 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,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>
)
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

0 comments on commit b498092

Please sign in to comment.