-
Notifications
You must be signed in to change notification settings - Fork 59
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
add project and pipelines card, add svgr (#3780)
- Loading branch information
1 parent
e826594
commit f744ece
Showing
15 changed files
with
315 additions
and
91 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
2 changes: 2 additions & 0 deletions
2
portals-ui/sites/ngs-portal/src/pages/home/components/index.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| export { PipelinesList } from './pipelines-list'; | ||
| export { ProjectsList } from './projects-list'; |
55 changes: 55 additions & 0 deletions
55
portals-ui/sites/ngs-portal/src/pages/home/components/pipeline-card.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,55 @@ | ||
| import { Tag, Badge, FlexRow, RichTextView } from '@epam/uui'; | ||
| import ContentPersonFillIcon from '@epam/assets/icons/content-person-fill.svg?react'; | ||
| import cn from 'classnames'; | ||
| import { Link } from 'react-router-dom'; | ||
| import type { ReactNode } from 'react'; | ||
|
|
||
| type Props = { | ||
| id: number; | ||
| name: ReactNode; | ||
| owner: string; | ||
| hasDivider?: boolean; | ||
| description?: string; | ||
| tags?: string[]; | ||
| }; | ||
|
|
||
| export const PipelineCard = ({ | ||
| id, | ||
| name, | ||
| owner, | ||
| description, | ||
| tags, | ||
| hasDivider = false, | ||
| }: Props) => { | ||
| return ( | ||
| <div | ||
| className={cn('px-4 py-4 bg-white w-full space-y-2', { | ||
| 'border-t-2 border-[var(--uui-neutral-30)]': hasDivider, | ||
| })}> | ||
| {tags?.length && ( | ||
| <FlexRow columnGap="6" size="24"> | ||
| {tags.map((tag) => ( | ||
| <Tag caption={tag} size="24" /> | ||
| ))} | ||
| </FlexRow> | ||
| )} | ||
|
|
||
| <FlexRow columnGap="12" size="24"> | ||
| <Link | ||
| className="text-lg text-[var(--uui-link)] hover:text-[var(--uui-link-hover)] no-underline" | ||
| to={`/pipeline/${id}`}> | ||
| {name} | ||
| </Link> | ||
| <Badge | ||
| icon={ContentPersonFillIcon} | ||
| caption={owner} | ||
| color="neutral" | ||
| size="18" | ||
| cx="shrink-0" | ||
| /> | ||
| </FlexRow> | ||
|
|
||
| {description && <RichTextView>{description}</RichTextView>} | ||
| </div> | ||
| ); | ||
| }; |
38 changes: 38 additions & 0 deletions
38
portals-ui/sites/ngs-portal/src/pages/home/components/pipelines-list.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,38 @@ | ||
| import type { Pipeline } from '@cloud-pipeline/core'; | ||
| import HighlightedText from '../../../shared/highlight-text'; | ||
| import { ItemsPanel } from '../../../widgets/items-panel/items-panel'; | ||
| import { PipelineCard } from './pipeline-card'; | ||
|
|
||
| type Props = { | ||
| pipelines: Pipeline[]; | ||
| }; | ||
|
|
||
| export const PipelinesList = ({ pipelines }: Props) => { | ||
| const renderItem = (item: Pipeline, search: string, i: number) => { | ||
| const { id, name, owner, description } = item; | ||
|
|
||
| return ( | ||
| <PipelineCard | ||
| key={id} | ||
| id={id} | ||
| name={<HighlightedText search={search}>{name}</HighlightedText>} | ||
| owner={owner} | ||
| hasDivider={i !== 0} | ||
| description={description} | ||
| /> | ||
| ); | ||
| }; | ||
|
|
||
| return ( | ||
| <ItemsPanel | ||
| className="max-h-full list-container overflow-auto" | ||
| title="Pipelines" | ||
| items={pipelines} | ||
| renderItem={renderItem} | ||
| sliced | ||
| search | ||
| itemKey="id" | ||
| viewAll={{ title: 'View all pipelines', link: '/pipelines' }} | ||
| /> | ||
| ); | ||
| }; |
78 changes: 78 additions & 0 deletions
78
portals-ui/sites/ngs-portal/src/pages/home/components/project-card.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,78 @@ | ||
| import { Tag, Badge, FlexRow, RichTextView } from '@epam/uui'; | ||
| import ContentPersonFillIcon from '@epam/assets/icons/content-person-fill.svg?react'; | ||
| import cn from 'classnames'; | ||
| import { Link } from 'react-router-dom'; | ||
| import type { ReactNode } from 'react'; | ||
|
|
||
| type Props = { | ||
| id: number; | ||
| name: ReactNode; | ||
| owner: string; | ||
| accessRights: { | ||
| read: boolean; | ||
| write: boolean; | ||
| execute: boolean; | ||
| }; | ||
| hasDivider?: boolean; | ||
| description?: string; | ||
| tags?: string[]; | ||
| }; | ||
|
|
||
| export const ProjectCard = ({ | ||
| id, | ||
| name, | ||
| owner, | ||
| description, | ||
| accessRights, | ||
| tags, | ||
| hasDivider = false, | ||
| }: Props) => { | ||
| const hasSomeRights = | ||
| accessRights && Object.values(accessRights).some((right) => Boolean(right)); | ||
|
|
||
| return ( | ||
| <div | ||
| className={cn('px-4 py-4 bg-white w-full space-y-2', { | ||
| 'border-t-2 border-[var(--uui-neutral-30)]': hasDivider, | ||
| })}> | ||
| {tags?.length && ( | ||
| <FlexRow columnGap="6" size="24"> | ||
| {tags.map((tag) => ( | ||
| <Tag caption={tag} size="24" /> | ||
| ))} | ||
| </FlexRow> | ||
| )} | ||
|
|
||
| <FlexRow columnGap="12" size="24"> | ||
| <Link | ||
| className="text-lg text-[var(--uui-link)] hover:text-[var(--uui-link-hover)] no-underline" | ||
| to={`/project/${id}`}> | ||
| {name} | ||
| </Link> | ||
| <Badge | ||
| icon={ContentPersonFillIcon} | ||
| caption={owner} | ||
| color="neutral" | ||
| size="18" | ||
| cx="shrink-0" | ||
| /> | ||
| </FlexRow> | ||
|
|
||
| {hasSomeRights && ( | ||
| <FlexRow columnGap="6" size="30"> | ||
| {accessRights.read && ( | ||
| <Badge size="24" fill="outline" caption="Read" color="info" /> | ||
| )} | ||
| {accessRights.write && ( | ||
| <Badge size="24" fill="outline" caption="Write" color="warning" /> | ||
| )} | ||
| {accessRights.execute && ( | ||
| <Badge size="24" fill="outline" caption="Execute" color="success" /> | ||
| )} | ||
| </FlexRow> | ||
| )} | ||
|
|
||
| {description && <RichTextView>{description}</RichTextView>} | ||
| </div> | ||
| ); | ||
| }; |
53 changes: 53 additions & 0 deletions
53
portals-ui/sites/ngs-portal/src/pages/home/components/projects-list.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,53 @@ | ||
| import { | ||
| executeAllowed, | ||
| readAllowed, | ||
| writeAllowed, | ||
| type Project, | ||
| } from '@cloud-pipeline/core'; | ||
| import { Button } from '@epam/uui'; | ||
| import { ProjectCard } from './project-card'; | ||
| import HighlightedText from '../../../shared/highlight-text'; | ||
| import { ItemsPanel } from '../../../widgets/items-panel/items-panel'; | ||
|
|
||
| type Props = { | ||
| projects: Project[]; | ||
| }; | ||
|
|
||
| export const ProjectsList = ({ projects }: Props) => { | ||
| const renderItem = (item: Project, search: string, i: number) => { | ||
| const { mask, id, name, owner } = item; | ||
|
|
||
| const accessRights = { | ||
| read: readAllowed(mask), | ||
| write: writeAllowed(mask), | ||
| execute: executeAllowed(mask), | ||
| }; | ||
|
|
||
| return ( | ||
| <ProjectCard | ||
| key={id} | ||
| id={id} | ||
| name={<HighlightedText search={search}>{name}</HighlightedText>} | ||
| owner={owner} | ||
| hasDivider={i !== 0} | ||
| accessRights={accessRights} | ||
| /> | ||
| ); | ||
| }; | ||
|
|
||
| return ( | ||
| <ItemsPanel | ||
| className="max-h-full list-container overflow-auto" | ||
| title="Projects" | ||
| actions={ | ||
| <Button caption="Create project" size="24" onClick={() => null} /> | ||
| } | ||
| items={projects} | ||
| renderItem={renderItem} | ||
| sliced | ||
| search | ||
| itemKey="id" | ||
| viewAll={{ title: 'View all projects', link: '/projects' }} | ||
| /> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,47 +1 @@ | ||
| import { useEffect } from 'react'; | ||
| import { Spinner } from '@epam/uui'; | ||
| import { loadProjects } from '../../state/projects/load-projects'; | ||
| import { useProjectsState } from '../../state/projects/hooks'; | ||
| import { List, ListHeader } from '@cloud-pipeline/components'; | ||
| import { useSearch } from '../../shared/hooks/use-search.ts'; | ||
| import HighlightedText from '../../shared/highlight-text'; | ||
|
|
||
| export default function Projects() { | ||
| useEffect(() => { | ||
| loadProjects() | ||
| .then(() => {}) | ||
| .catch(() => {}); | ||
| }, []); | ||
| const { projects, error, pending } = useProjectsState(); | ||
| const { search, onSearchChange, filtered } = useSearch({ | ||
| items: projects ?? [], | ||
| }); | ||
| if (error) { | ||
| return <div>{error}</div>; | ||
| } | ||
| if (pending) { | ||
| return <Spinner />; | ||
| } | ||
| if (!projects) { | ||
| return <div>No data</div>; | ||
| } | ||
| return ( | ||
| <div className="flex flex-col overflow-auto"> | ||
| <ListHeader | ||
| title="Projects" | ||
| className="shrink-0 border" | ||
| search={search} | ||
| onSearch={onSearchChange} | ||
| /> | ||
| <List | ||
| className="overflow-auto border-b border-l border-r" | ||
| data={filtered} | ||
| renderItem={(project) => ( | ||
| <HighlightedText search={search}>{project.name}</HighlightedText> | ||
| )} | ||
| itemKey="id" | ||
| sliced={20} | ||
| /> | ||
| </div> | ||
| ); | ||
| } | ||
| export { ProjectsPage } from './projects'; |
Oops, something went wrong.