NEW-GUI Pipelines cards and pipelines page - reorganize and style adj…

…ustments (#3781) (#3818)
epam · Dec 10, 2024 · 774ce5e · 774ce5e
1 parent d975a49
commit 774ce5e
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 55 deletions.
diff --git a/portals-ui/sites/ngs-portal/src/pages/home/components/pipeline-card.tsx b/portals-ui/sites/ngs-portal/src/pages/home/components/pipeline-card.tsx
@@ -16,6 +16,7 @@ type Props = CommonProps & {
   pipeline: Pipeline;
   highlightedText?: string;
   mode?: 'standard' | 'extended';
+  showDescription?: boolean;
 };
 
 type MappedTag = {
@@ -79,6 +80,7 @@ export const PipelineCard = ({
   className,
   style,
   mode = 'standard',
+  showDescription = false,
 }: Props) => {
   const { uuiModals } = useUuiContext();
   const { id, name, owner, data = {}, description } = pipeline;
@@ -105,7 +107,22 @@ export const PipelineCard = ({
         className,
       )}
       style={style}>
-      <div className="flex flex-col">
+      <div className="flex flex-col gap-1">
+        <Link
+          className="text-[var(--uui-link)] hover:text-[var(--uui-link-hover)] no-underline"
+          to={`/pipeline/${id}`}>
+          <HighlightedText search={highlightedText}>{name}</HighlightedText>
+        </Link>
+        {showDescription && !!description && (
+          <RichTextView cx="leading-4 text-sm">{description}</RichTextView>
+        )}
+        <Badge
+          icon={ContentPersonFillIcon}
+          caption={<NgsUserCard userName={owner} showTooltip={false} />}
+          color="neutral"
+          size="18"
+          cx="w-fit"
+        />
         {filteredTag.length > 0 && (
           <div className="flex flex-wrap gap-1">
             {filteredTag.map((tag) => (
@@ -119,23 +136,6 @@ export const PipelineCard = ({
             ))}
           </div>
         )}
-        <FlexRow columnGap="12" size="24" alignItems="center">
-          <Link
-            className="text-[var(--uui-link)] hover:text-[var(--uui-link-hover)] no-underline"
-            to={`/pipeline/${id}`}>
-            <HighlightedText search={highlightedText}>{name}</HighlightedText>
-          </Link>
-          <Badge
-            icon={ContentPersonFillIcon}
-            caption={<NgsUserCard userName={owner} showTooltip={false} />}
-            color="neutral"
-            size="18"
-            cx="shrink-0"
-          />
-        </FlexRow>
-        {description && (
-          <RichTextView cx="leading-4 text-sm">{description}</RichTextView>
-        )}
       </div>
       {mode === 'extended' && (
         <div className="ml-auto flex items-center">

diff --git a/portals-ui/sites/ngs-portal/src/pages/home/components/pipelines-list.tsx b/portals-ui/sites/ngs-portal/src/pages/home/components/pipelines-list.tsx
@@ -8,43 +8,48 @@ import NavigationDependencyOutlineIcon from '@epam/assets/icons/navigation-depen
 type Props = {
   pipelines: Pipeline[] | undefined;
   mode?: 'standard' | 'extended';
+  showDescription?: boolean;
 };
 
-export const PipelinesList = memo(({ pipelines, mode = 'standard' }: Props) => {
-  const renderItem = (item: Pipeline, search: string, i: number) => {
+export const PipelinesList = memo(
+  ({ pipelines, mode = 'standard', showDescription }: Props) => {
+    const renderItem = (item: Pipeline, search: string, i: number) => {
+      return (
+        <PipelineCard
+          key={item.id}
+          pipeline={item}
+          highlightedText={search}
+          className={cn({ ['border-t']: i !== 0 })}
+          mode={mode}
+          showDescription={showDescription}
+        />
+      );
+    };
+
     return (
-      <PipelineCard
-        key={item.id}
-        pipeline={item}
-        highlightedText={search}
-        className={cn({ ['border-t']: i !== 0 })}
-        mode={mode}
+      <ItemsPanel
+        className="max-h-full list-container overflow-auto"
+        title={
+          <div className="fill-current flex flex-nowrap gap-1">
+            <span className="rotate-90">
+              <NavigationDependencyOutlineIcon />
+            </span>
+            <span>Pipelines</span>
+          </div>
+        }
+        items={pipelines}
+        renderItem={renderItem}
+        sliced
+        virtualized
+        search
+        itemKey="id"
+        searchClassName={mode === 'extended' ? 'py-1' : undefined}
+        viewAll={
+          mode === 'extended'
+            ? undefined
+            : { title: 'View all pipelines', link: '/pipelines' }
+        }
       />
     );
-  };
-
-  return (
-    <ItemsPanel
-      className="max-h-full list-container overflow-auto"
-      title={
-        <div className="fill-current flex flex-nowrap gap-1">
-          <span className="rotate-90">
-            <NavigationDependencyOutlineIcon />
-          </span>
-          <span>Pipelines</span>
-        </div>
-      }
-      items={pipelines}
-      renderItem={renderItem}
-      sliced
-      virtualized
-      search
-      itemKey="id"
-      viewAll={
-        mode === 'extended'
-          ? undefined
-          : { title: 'View all pipelines', link: '/pipelines' }
-      }
-    />
-  );
-});
+  },
+);
diff --git a/portals-ui/sites/ngs-portal/src/pages/home/home.tsx b/portals-ui/sites/ngs-portal/src/pages/home/home.tsx
@@ -27,7 +27,7 @@ export const HomePage = () => {
       </div>
 
       <div className="flex-1 h-full overflow-auto p-2">
-        <PipelinesList pipelines={pipelines} />
+        <PipelinesList showDescription pipelines={pipelines} />
       </div>
 
       <div className="flex-1 h-full overflow-auto p-2">

diff --git a/portals-ui/sites/ngs-portal/src/pages/pipelines/index.tsx b/portals-ui/sites/ngs-portal/src/pages/pipelines/index.tsx
@@ -20,5 +20,9 @@ export default function PipelinesPage() {
   if (!pipelines) {
     return <div>No data</div>;
   }
-  return <PipelinesList pipelines={pipelines} mode="extended" />;
+  return (
+    <div className="p-3 overflow-hidden h-full w-full">
+      <PipelinesList showDescription pipelines={pipelines} mode="extended" />
+    </div>
+  );
 }