From 855bcd15893b23c0aca3e8b9f561800cc7e04352 Mon Sep 17 00:00:00 2001
From: Gage Krumbach <gkrumbach@gmail.com>
Date: Tue, 18 Jun 2024 16:29:59 -0500
Subject: [PATCH] remove artifact preview

---
 .../artifacts/ArtifactNodeDetails.tsx         | 11 +--
 .../taskDetails/ArtifactPreview.tsx           | 74 -------------------
 .../taskDetails/TaskDetailsInputOutput.tsx    |  2 -
 .../taskDetails/TaskDetailsPrintKeyValues.tsx |  3 +-
 4 files changed, 2 insertions(+), 88 deletions(-)
 delete mode 100644 frontend/src/concepts/pipelines/content/pipelinesDetails/taskDetails/ArtifactPreview.tsx

diff --git a/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/artifacts/ArtifactNodeDetails.tsx b/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/artifacts/ArtifactNodeDetails.tsx
index cda7ec68e1..676b3733de 100644
--- a/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/artifacts/ArtifactNodeDetails.tsx
+++ b/frontend/src/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
deleted file mode 100644
index 2392ff8457..0000000000
--- a/frontend/src/concepts/pipelines/content/pipelinesDetails/taskDetails/ArtifactPreview.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import React from 'react';
-import { Bullseye, CodeBlock, CodeBlockCode, Spinner } from '@patternfly/react-core';
-import { useIsAreaAvailable, SupportedArea } from '~/concepts/areas';
-import { usePipelinesAPI } from '~/concepts/pipelines/context';
-import { Artifact } from '~/third_party/mlmd';
-import { extractS3UriComponents } from '~/concepts/pipelines/content/artifacts/utils';
-import { fetchStorageObject } from '~/services/storageService';
-
-type ArtifactPreviewProps = {
-  artifact: Artifact;
-  maxBytes?: number;
-  maxLines?: number;
-};
-
-const ArtifactPreview: React.FC<ArtifactPreviewProps> = ({
-  artifact,
-  maxBytes = 255,
-  maxLines = 4,
-}) => {
-  const isS3EndpointAvailable = useIsAreaAvailable(SupportedArea.S3_ENDPOINT).status;
-  const { namespace } = usePipelinesAPI();
-  const [preview, setPreview] = React.useState<string | null>(null);
-  const [isLoading, setIsLoading] = React.useState<boolean>(false);
-
-  React.useEffect(() => {
-    const uri = artifact.getUri();
-    if (!uri || !isS3EndpointAvailable) {
-      return;
-    }
-
-    setPreview(null);
-    const uriComponents = extractS3UriComponents(uri);
-    if (!uriComponents) {
-      return;
-    }
-    setIsLoading(true);
-    fetchStorageObject(namespace, uriComponents.path, maxBytes)
-      .catch(() => null)
-      .then((text) => setPreview(text))
-      .finally(() => setIsLoading(false));
-  }, [artifact, isS3EndpointAvailable, maxBytes, namespace]);
-
-  if (isLoading) {
-    return (
-      <Bullseye>
-        <Spinner size="lg" />
-      </Bullseye>
-    );
-  }
-
-  if (!preview) {
-    return null;
-  }
-
-  // Try to parse the preview as JSON
-  let code = preview;
-  try {
-    code = JSON.parse(preview);
-    code = JSON.stringify(code, null, 2);
-  } catch {
-    // ignore
-  }
-
-  code = code.split('\n').slice(0, maxLines).join('\n').trim();
-  code = `${code}...`;
-
-  return (
-    <CodeBlock>
-      <CodeBlockCode>{code}</CodeBlockCode>
-    </CodeBlock>
-  );
-};
-
-export default ArtifactPreview;
diff --git a/frontend/src/concepts/pipelines/content/pipelinesDetails/taskDetails/TaskDetailsInputOutput.tsx b/frontend/src/concepts/pipelines/content/pipelinesDetails/taskDetails/TaskDetailsInputOutput.tsx
index 911ae667aa..53b4890d44 100644
--- a/frontend/src/concepts/pipelines/content/pipelinesDetails/taskDetails/TaskDetailsInputOutput.tsx
+++ b/frontend/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/frontend/src/concepts/pipelines/content/pipelinesDetails/taskDetails/TaskDetailsPrintKeyValues.tsx b/frontend/src/concepts/pipelines/content/pipelinesDetails/taskDetails/TaskDetailsPrintKeyValues.tsx
index b5935bc144..5ecd331b4b 100644
--- a/frontend/src/concepts/pipelines/content/pipelinesDetails/taskDetails/TaskDetailsPrintKeyValues.tsx
+++ b/frontend/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>