remove artifact preview

[RHOAIENG-8124]: show pipeline group label on hover at low scale fix(pipelineDefaultTaskGroup): format fix(pipelineDefaultTaskGroup): remove unused declarations
jenny-s51 · Jun 20, 2024 · 3dc20c1 · 3dc20c1
1 parent a1c9c39
commit 3dc20c1
Show file tree

Hide file tree

Showing 7 changed files with 40 additions and 138 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -66,7 +66,7 @@
     "@patternfly/react-styles": "^5.2.1",
     "@patternfly/react-table": "^5.2.1",
     "@patternfly/react-tokens": "^5.2.1",
-    "@patternfly/react-topology": "^5.4.0-prerelease.6",
+    "@patternfly/react-topology": "^5.4.0-prerelease.9",
     "@patternfly/react-virtualized-extension": "^5.0.0",
     "@types/classnames": "^2.3.1",
     "axios": "^1.6.4",

diff --git a/...concepts/pipelines/content/pipelinesDetails/pipelineRun/artifacts/ArtifactNodeDetails.tsx b/...concepts/pipelines/content/pipelinesDetails/pipelineRun/artifacts/ArtifactNodeDetails.tsx
@@ -10,7 +10,6 @@ import {
   DescriptionListGroup,
   DescriptionListTerm,
   DescriptionListDescription,
-  StackItem,
 } from '@patternfly/react-core';
 
 import { Artifact } from '~/third_party/mlmd';
@@ -21,7 +20,6 @@ import PipelinesTableRowTime from '~/concepts/pipelines/content/tables/Pipelines
 import PipelineRunDrawerRightContent from '~/concepts/pipelines/content/pipelinesDetails/pipelineRun/PipelineRunDrawerRightContent';
 import { SupportedArea, useIsAreaAvailable } from '~/concepts/areas';
 import { ArtifactUriLink } from '~/concepts/pipelines/content/artifacts/ArtifactUriLink';
-import ArtifactPreview from '~/concepts/pipelines/content/pipelinesDetails/taskDetails/ArtifactPreview';
 
 type ArtifactNodeDetailsProps = Pick<
   React.ComponentProps<typeof PipelineRunDrawerRightContent>,
@@ -90,14 +88,7 @@ export const ArtifactNodeDetails: React.FC<ArtifactNodeDetailsProps> = ({
             <DescriptionListGroup>
               <DescriptionListTerm>{artifactName}</DescriptionListTerm>
               <DescriptionListDescription>
-                <Stack hasGutter>
-                  <StackItem>
-                    <ArtifactUriLink uri={artifact.getUri()} />
-                  </StackItem>
-                  <StackItem>
-                    <ArtifactPreview artifact={artifact} />
-                  </StackItem>
-                </Stack>
+                <ArtifactUriLink uri={artifact.getUri()} />
               </DescriptionListDescription>
             </DescriptionListGroup>
           </DescriptionList>

diff --git a/frontend/src/concepts/pipelines/content/pipelinesDetails/taskDetails/ArtifactPreview.tsx b/frontend/src/concepts/pipelines/content/pipelinesDetails/taskDetails/ArtifactPreview.tsx
diff --git a/...nd/src/concepts/pipelines/content/pipelinesDetails/taskDetails/TaskDetailsInputOutput.tsx b/...nd/src/concepts/pipelines/content/pipelinesDetails/taskDetails/TaskDetailsInputOutput.tsx
@@ -4,7 +4,6 @@ import TaskDetailsSection from '~/concepts/pipelines/content/pipelinesDetails/ta
 import TaskDetailsPrintKeyValues from '~/concepts/pipelines/content/pipelinesDetails/taskDetails/TaskDetailsPrintKeyValues';
 import { PipelineTaskArtifact } from '~/concepts/pipelines/topology';
 import { ArtifactUriLink } from '~/concepts/pipelines/content/artifacts/ArtifactUriLink';
-import ArtifactPreview from './ArtifactPreview';
 
 type TaskDetailsInputOutputProps = {
   type: 'Input' | 'Output';
@@ -29,7 +28,6 @@ const TaskDetailsInputOutput: React.FC<TaskDetailsInputOutputProps> = ({
         return {
           label: artifactInputOutput.label,
           value: <ArtifactUriLink uri={artifact.getUri()} />,
-          preview: <ArtifactPreview artifact={artifact} />,
         };
       }
 

diff --git a/...src/concepts/pipelines/content/pipelinesDetails/taskDetails/TaskDetailsPrintKeyValues.tsx b/...src/concepts/pipelines/content/pipelinesDetails/taskDetails/TaskDetailsPrintKeyValues.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Grid, GridItem, Truncate } from '@patternfly/react-core';
 
 type TaskDetailsPrintKeyValuesProps = {
-  items: { label: string; value: React.ReactNode; preview?: React.ReactNode }[];
+  items: { label: string; value: React.ReactNode }[];
 };
 
 const TaskDetailsPrintKeyValues: React.FC<TaskDetailsPrintKeyValuesProps> = ({ items }) => (
@@ -15,7 +15,6 @@ const TaskDetailsPrintKeyValues: React.FC<TaskDetailsPrintKeyValuesProps> = ({ i
           </b>
         </GridItem>
         <GridItem span={6}>{result.value}</GridItem>
-        {result.preview && <GridItem span={12}>{result.preview}</GridItem>}
       </React.Fragment>
     ))}
   </Grid>

diff --git a/frontend/src/concepts/topology/PipelineDefaultTaskGroup.tsx b/frontend/src/concepts/topology/PipelineDefaultTaskGroup.tsx
@@ -8,10 +8,7 @@ import {
   Node,
   GraphElement,
   RunStatus,
-  DEFAULT_LAYER,
-  Layer,
   ScaleDetailsLevel,
-  TOP_LAYER,
   NodeModel,
   useHover,
   PipelineNodeModel,
@@ -65,7 +62,7 @@ const DefaultTaskGroupInner: React.FunctionComponent<PipelinesDefaultGroupInnerP
         hideDetailsAtMedium
         showStatusState
         scaleNode={hover && detailsLevel !== ScaleDetailsLevel.high}
-        showLabel={detailsLevel === ScaleDetailsLevel.high}
+        showLabelOnHover
         status={element.getData()?.runStatus}
         hiddenDetailsShownStatuses={[
           RunStatus.Succeeded,
@@ -79,23 +76,21 @@ const DefaultTaskGroupInner: React.FunctionComponent<PipelinesDefaultGroupInnerP
     );
 
     return (
-      <Layer id={detailsLevel !== ScaleDetailsLevel.high && hover ? TOP_LAYER : DEFAULT_LAYER}>
-        <g ref={hoverRef as React.LegacyRef<SVGGElement>}>
-          {element.isCollapsed() ? (
-            <Popover
-              triggerRef={popoverRef}
-              triggerAction="hover"
-              aria-label="Hoverable popover"
-              headerContent={element.getLabel()}
-              bodyContent={getPopoverTasksList(element.getAllNodeChildren())}
-            >
-              <g ref={popoverRef}>{groupNode}</g>
-            </Popover>
-          ) : (
-            groupNode
-          )}
-        </g>
-      </Layer>
+      <g ref={hoverRef as React.LegacyRef<SVGGElement>}>
+        {element.isCollapsed() ? (
+          <Popover
+            triggerRef={popoverRef}
+            triggerAction="hover"
+            aria-label="Hoverable popover"
+            headerContent={element.getLabel()}
+            bodyContent={getPopoverTasksList(element.getAllNodeChildren())}
+          >
+            <g ref={popoverRef}>{groupNode}</g>
+          </Popover>
+        ) : (
+          groupNode
+        )}
+      </g>
     );
   },
 );