From aef231ee32067d6e4b77f354e60842fb6f777418 Mon Sep 17 00:00:00 2001
From: "Taras.Hlukhovetskyi" <taras.hlukhovetskyi@globallogic.com>
Date: Thu, 20 Jun 2024 14:27:25 +0300
Subject: [PATCH] Fix [UI] The application crashes when opening a preview of
 the 105 MB artifact.

---
 .../ArtifactsPreview/ArtifactsPreviewView.js  |  2 +-
 .../ArtifactsPreview/artifactsPreview.scss    |  6 ++
 src/utils/getArtifactPreview.js               | 85 +++++++++++++------
 3 files changed, 68 insertions(+), 25 deletions(-)

diff --git a/src/components/ArtifactsPreview/ArtifactsPreviewView.js b/src/components/ArtifactsPreview/ArtifactsPreviewView.js
index 78e550e6a..9a0cacccf 100644
--- a/src/components/ArtifactsPreview/ArtifactsPreviewView.js
+++ b/src/components/ArtifactsPreview/ArtifactsPreviewView.js
@@ -104,7 +104,7 @@ const ArtifactsPreviewView = ({ className, preview, setShowErrorBody, showErrorB
                 </tbody>
               </table>
             )}
-            {preview?.type === 'text' && <div>{preview?.data.content}</div>}
+            {preview?.type === 'text' && <div className='artifact-preview__text'>{preview?.data.content}</div>}
             {preview?.type === 'html' && (
               <iframe srcDoc={preview?.data.content} frameBorder="0" title="Preview" />
             )}
diff --git a/src/components/ArtifactsPreview/artifactsPreview.scss b/src/components/ArtifactsPreview/artifactsPreview.scss
index b62f05739..815524628 100644
--- a/src/components/ArtifactsPreview/artifactsPreview.scss
+++ b/src/components/ArtifactsPreview/artifactsPreview.scss
@@ -35,6 +35,12 @@
       overflow: auto;
     }
 
+    &__text {
+      width: fit-content;
+      max-width: 10000px;
+      overflow-wrap: break-word;
+    }
+
     .json-content {
       white-space: pre-wrap;
     }
diff --git a/src/utils/getArtifactPreview.js b/src/utils/getArtifactPreview.js
index 777c9d6c6..746b3b006 100644
--- a/src/utils/getArtifactPreview.js
+++ b/src/utils/getArtifactPreview.js
@@ -24,6 +24,23 @@ import Download from '../common/Download/Download'
 import api from '../api/artifacts-api'
 import { createArtifactPreviewContent } from './createArtifactPreviewContent'
 
+const fileSizes = {
+  '1MB': 1048576,
+  '10MB': 10485760,
+  '20BM': 20971520,
+  '50MB': 52428800
+}
+const limitsByFormat = {
+  json: fileSizes['1MB'],
+  yaml: fileSizes['1MB'],
+  yml: fileSizes['1MB'],
+  txt: fileSizes['10MB'],
+  html: fileSizes['20MB'],
+  png: fileSizes['50MB'],
+  jpg: fileSizes['50MB'],
+  jpeg: fileSizes['50MB']
+}
+
 export const setArtifactPreviewFromSchema = (artifact, noData, setNoData, setPreview) => {
   if (noData) {
     setNoData(false)
@@ -146,32 +163,52 @@ export const fetchArtifactPreviewFromTargetPath = (
   setNoData,
   setPreview
 ) => {
-  fetchArtifactPreview(
-    projectName,
-    artifact.target_path,
-    artifact.target_path.startsWith('/User') && (artifact.user || artifact.producer?.owner),
-    artifact.target_path.replace(/.*\./g, ''),
-    artifact.db_key
-  )
-    .then(content => {
-      setPreview([content])
-
-      if (noData) {
-        setNoData(false)
+  const fileFormat = artifact.target_path.replace(/.*\./g, '')
+
+  if (
+    fileFormat &&
+    fileFormat !== artifact.target_path &&
+    ((limitsByFormat[fileFormat] && artifact.size > limitsByFormat[fileFormat]) ||
+      (!limitsByFormat[fileFormat] && artifact.size > fileSizes['10MB']))
+  ) {
+    setPreview([
+      {
+        error: {
+          text: 'The artifact is too large to preview, use the download option instead',
+          body: ''
+        },
+        content: [],
+        type: 'error'
       }
-    })
-    .catch(err => {
-      setPreview([
-        {
-          error: {
-            text: `${err.response.status} ${err.response.statusText}`,
-            body: JSON.stringify(err.response, null, 2)
-          },
-          content: [],
-          type: 'error'
+    ])
+  } else {
+    fetchArtifactPreview(
+      projectName,
+      artifact.target_path,
+      artifact.target_path.startsWith('/User') && (artifact.user || artifact.producer?.owner),
+      fileFormat,
+      artifact.db_key
+    )
+      .then(content => {
+        setPreview([content])
+
+        if (noData) {
+          setNoData(false)
         }
-      ])
-    })
+      })
+      .catch(err => {
+        setPreview([
+          {
+            error: {
+              text: `${err.response.status} ${err.response.statusText}`,
+              body: JSON.stringify(err.response, null, 2)
+            },
+            content: [],
+            type: 'error'
+          }
+        ])
+      })
+  }
 }
 
 export const fetchArtifactPreview = (