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 (
-
- }
- />
+
);
}