diff --git a/portals-ui/sites/ngs-portal/src/pages/home/components/project-card.tsx b/portals-ui/sites/ngs-portal/src/pages/home/components/project-card.tsx index 29f1e671d1..c600463cdd 100644 --- a/portals-ui/sites/ngs-portal/src/pages/home/components/project-card.tsx +++ b/portals-ui/sites/ngs-portal/src/pages/home/components/project-card.tsx @@ -1,4 +1,4 @@ -import { useMemo } from 'react'; +import { useCallback, useMemo } from 'react'; import { Badge, FlexRow, RichTextView } from '@epam/uui'; import ContentPersonFillIcon from '@epam/assets/icons/content-person-fill.svg?react'; import ActionCalendarFillIcon from '@epam/assets/icons/action-calendar-fill.svg?react'; @@ -6,12 +6,7 @@ import cn from 'classnames'; import { Link } from 'react-router-dom'; import type { Pipeline, Project } from '@cloud-pipeline/core'; import { RunStatuses } from '@cloud-pipeline/core'; -import { - displayDate, - executeAllowed, - readAllowed, - writeAllowed, -} from '@cloud-pipeline/core'; +import { displayDate } from '@cloud-pipeline/core'; import { StatusIcon, type CommonProps } from '@cloud-pipeline/components'; import HighlightedText from '../../../shared/highlight-text'; import { NgsUserCard } from '../../../widgets/ngs-user-card'; @@ -25,6 +20,7 @@ type Props = CommonProps & { highlightedText?: string; mode?: 'standard' | 'extended'; lastRun?: Pipeline; + showDescription?: boolean; }; type MappedTag = { @@ -91,8 +87,9 @@ export const ProjectCard = ({ style, mode = 'standard', lastRun, + showDescription: showDescriptionProp = false, }: Props) => { - const { id, name, owner, mask, data } = project; + const { id, name, data, owner } = project; const randomRunningCount = getRandomInt(0, 4); const tags = useMemo( () => @@ -104,22 +101,48 @@ export const ProjectCard = ({ const filteredTag = useMemo(() => tags.filter(filterTag), [tags]); - const read = readAllowed(mask); - const write = writeAllowed(mask); - const execute = executeAllowed(mask); + const { showExtraInfo, showDescription, showStatusInfo } = useMemo( + () => ({ + showExtraInfo: mode === 'extended', + showDescription: showDescriptionProp && !!description, + showStatusInfo: mode === 'extended', + }), + [description, mode, showDescriptionProp], + ); - const hasSomeRights = read || write || execute; + const renderTags = useCallback( + () => + filteredTag.length > 0 && ( +
+ {filteredTag.map((tag) => ( + + ))} +
+ ), + [filteredTag], + ); - const { showPermissionTags, showExtraInfo, showDescription, showStatusInfo } = - useMemo( - () => ({ - showPermissionTags: mode === 'standard' && hasSomeRights, - showExtraInfo: mode === 'extended', - showDescription: !!description, - showStatusInfo: mode === 'extended', - }), - [description, hasSomeRights, mode], - ); + const renderExtraInfo = useCallback( + () => ( +
+
+ + {displayDate(project.createdDate)} +
+
+ + {Math.floor(Math.random() * 10 + 1)} users +
+
+ ), + [project.createdDate], + ); return (
-
- {filteredTag.length > 0 && ( -
- {filteredTag.map((tag) => ( - - ))} -
- )} +
{name} + +
} @@ -155,38 +167,10 @@ export const ProjectCard = ({ size="18" cx="shrink-0" /> - {showExtraInfo && ( -
-
- - {displayDate(project.createdDate)} -
-
- - {Math.floor(Math.random() * 10 + 1)} users -
-
- )} - - {showPermissionTags && ( - - {read && ( - - )} - {write && ( - - )} - {execute && ( - - )} - - )} + {showExtraInfo && renderExtraInfo()} +
{showDescription && {description}} + {renderTags()}
{showStatusInfo && (
diff --git a/portals-ui/sites/ngs-portal/src/pages/home/components/projects-list.tsx b/portals-ui/sites/ngs-portal/src/pages/home/components/projects-list.tsx index 1abfb0a3ae..4aed2949bd 100644 --- a/portals-ui/sites/ngs-portal/src/pages/home/components/projects-list.tsx +++ b/portals-ui/sites/ngs-portal/src/pages/home/components/projects-list.tsx @@ -16,10 +16,16 @@ type Props = { projects: Project[] | undefined; mode?: 'standard' | 'extended'; filters?: ReactNode; + showDescription?: boolean; }; export const ProjectsList = memo( - ({ projects, mode = 'standard', filters }: Props) => { + ({ + projects, + mode = 'standard', + filters, + showDescription = false, + }: Props) => { const { uuiModals } = useUuiContext(); const { pipelines } = usePipelinesState(); const getRandomPipeline = () => @@ -35,6 +41,7 @@ export const ProjectsList = memo( className={cn({ ['border-t']: i !== 0 })} mode={mode} lastRun={getRandomPipeline()} + showDescription={showDescription} /> ); const openCreateProjectModal = () => { diff --git a/portals-ui/sites/ngs-portal/src/pages/home/home.tsx b/portals-ui/sites/ngs-portal/src/pages/home/home.tsx index 2805cbf835..39327e5995 100644 --- a/portals-ui/sites/ngs-portal/src/pages/home/home.tsx +++ b/portals-ui/sites/ngs-portal/src/pages/home/home.tsx @@ -23,7 +23,7 @@ export const HomePage = () => { return (
- +
diff --git a/portals-ui/sites/ngs-portal/src/pages/projects/projects.tsx b/portals-ui/sites/ngs-portal/src/pages/projects/projects.tsx index a4ff3d05d8..e578e18694 100644 --- a/portals-ui/sites/ngs-portal/src/pages/projects/projects.tsx +++ b/portals-ui/sites/ngs-portal/src/pages/projects/projects.tsx @@ -65,17 +65,20 @@ export function ProjectsPage() { //todo: search refactoring needed (see search) return ( - - } - /> +
+ + } + /> +
); }