From 0404693deef35c380074680f85b0ba98a02f1ae4 Mon Sep 17 00:00:00 2001
From: mariana-furyk <58301139+mariana-furyk@users.noreply.github.com>
Date: Tue, 5 Dec 2023 17:52:59 +0200
Subject: [PATCH] Fix [Models] Wrong preview presentation Part 1 - fixed bugs
 with click on name (#2109)

---
 .../ArtifactsExtraData/ArtifactsExtraData.js    | 17 ++++++-----------
 1 file changed, 6 insertions(+), 11 deletions(-)

diff --git a/src/elements/ArtifactsExtraData/ArtifactsExtraData.js b/src/elements/ArtifactsExtraData/ArtifactsExtraData.js
index ef32c5d66..3eef267ac 100644
--- a/src/elements/ArtifactsExtraData/ArtifactsExtraData.js
+++ b/src/elements/ArtifactsExtraData/ArtifactsExtraData.js
@@ -17,9 +17,8 @@ illegal under applicable law, and the grant of the foregoing license
 under the Apache 2.0 license is conditioned upon your compliance with
 such restriction.
 */
-import React, { useEffect, useState, useCallback } from 'react'
+import React, { useEffect, useState, useCallback, useMemo } from 'react'
 import classnames from 'classnames'
-import { useParams } from 'react-router-dom'
 import PropTypes from 'prop-types'
 
 import { TextTooltipTemplate, Tooltip } from 'igz-controls/components'
@@ -31,9 +30,7 @@ import { generateArtifactIndexes } from '../../components/Details/details.util'
 import './artifactsExtraData.scss'
 
 const ArtifactsExtraData = ({ artifact }) => {
-  const [extraData, setExtraData] = useState([])
   const [artifactsIndexes, setArtifactsIndexes] = useState([])
-  const params = useParams()
 
   const showArtifactPreview = useCallback(
     index => {
@@ -42,17 +39,15 @@ const ArtifactsExtraData = ({ artifact }) => {
     [artifactsIndexes, setArtifactsIndexes]
   )
 
-  useEffect(() => {
-    if (artifact.extra_data && extraData.length === 0) {
-      setExtraData(generateExtraDataContent(artifact.extra_data, showArtifactPreview))
-    }
-  }, [artifact, extraData.length, params.projectName, showArtifactPreview])
+  const extraData = useMemo(() => {
+    return generateExtraDataContent(artifact.extra_data, showArtifactPreview)
+  }, [artifact.extra_data, showArtifactPreview])
 
   useEffect(() => {
     return () => {
-      setExtraData([])
+      setArtifactsIndexes([])
     }
-  }, [])
+  }, [artifact])
 
   return (
     <div className="artifact-extra-data">