From ce462b5d5c157fdbacd153db3c57b20e3b6e85a5 Mon Sep 17 00:00:00 2001
From: Hentry Martin <hentrymartin.p@gmail.com>
Date: Fri, 14 Mar 2025 17:01:33 +0100
Subject: [PATCH] fix: tooltip and added empty content text

---
 .../ArtifactsListModal.module.scss            |  6 ++++
 .../ArtifactsListModal/index.js               |  4 +++
 .../ChallengeEditor/Submissions/index.js      |  4 +--
 src/components/Tooltip/index.js               | 29 ++++++++++++++-----
 4 files changed, 33 insertions(+), 10 deletions(-)

diff --git a/src/components/ChallengeEditor/ArtifactsListModal/ArtifactsListModal.module.scss b/src/components/ChallengeEditor/ArtifactsListModal/ArtifactsListModal.module.scss
index 92962bf2..912b3731 100644
--- a/src/components/ChallengeEditor/ArtifactsListModal/ArtifactsListModal.module.scss
+++ b/src/components/ChallengeEditor/ArtifactsListModal/ArtifactsListModal.module.scss
@@ -43,5 +43,11 @@
         cursor: pointer;
       }
     }
+    .no-artifacts {
+      @include roboto;
+
+      margin-top: 40px;
+      text-align: center;
+    }
   }
 }
\ No newline at end of file
diff --git a/src/components/ChallengeEditor/ArtifactsListModal/index.js b/src/components/ChallengeEditor/ArtifactsListModal/index.js
index 9f01ab15..2aa23b99 100644
--- a/src/components/ChallengeEditor/ArtifactsListModal/index.js
+++ b/src/components/ChallengeEditor/ArtifactsListModal/index.js
@@ -87,6 +87,10 @@ export const ArtifactsListModal = ({ onClose, submissionId, token, theme }) => {
             })
           }
 
+          {
+            !loading && artifacts.length === 0 && <div className={styles['no-artifacts']}>No artifacts found</div>
+          }
+
           {
             loading && <Loader />
           }
diff --git a/src/components/ChallengeEditor/Submissions/index.js b/src/components/ChallengeEditor/Submissions/index.js
index 9ab1724d..bfb29c91 100644
--- a/src/components/ChallengeEditor/Submissions/index.js
+++ b/src/components/ChallengeEditor/Submissions/index.js
@@ -601,7 +601,7 @@ class SubmissionsComponent extends React.Component {
                             </button>
                           </Tooltip>
 
-                          <Tooltip content='Download Submission Artifacts'>
+                          <Tooltip content='Download Submission Artifacts' closeOnClick>
                             <button
                               className={styles['download-submission-button']}
                               onClick={async () => {
@@ -612,7 +612,7 @@ class SubmissionsComponent extends React.Component {
                             </button>
                           </Tooltip>
 
-                          <Tooltip content='Ratings'>
+                          <Tooltip content='Ratings' closeOnClick>
                             <button
                               className={styles['download-submission-button']}
                               onClick={() => {
diff --git a/src/components/Tooltip/index.js b/src/components/Tooltip/index.js
index 21440a17..75728b99 100644
--- a/src/components/Tooltip/index.js
+++ b/src/components/Tooltip/index.js
@@ -21,7 +21,7 @@ import PropTypes from 'prop-types'
 import styles from './Tooltip.module.scss'
 import { usePopper } from 'react-popper'
 
-const Tooltip = ({ content, children }) => {
+const Tooltip = ({ content, children, closeOnClick }) => {
   const [isOpen, setIsOpen] = useState(false)
   const [referenceElement, setReferenceElement] = useState(null)
   const [popperElement, setPopperElement] = useState(null)
@@ -69,15 +69,27 @@ const Tooltip = ({ content, children }) => {
     setIsOpen(true)
   }, [setIsOpen])
 
+  const defaultContentProps = {
+    onMouseEnter: open,
+    onMouseLeave: close,
+    innerRef: setReferenceElement,
+    ref: setReferenceElement
+  }
+
+  const getContentElementProps = child => closeOnClick ? {
+    ...defaultContentProps,
+    onClick: (event) => {
+      if (typeof child.props.onClick === 'function') {
+        child.props.onClick(event)
+      }
+      close(event)
+    }
+  } : defaultContentProps
+
   return (
     <>
       {React.Children.map(children, (child) =>
-        React.cloneElement(child, {
-          onMouseEnter: open,
-          onMouseLeave: close,
-          innerRef: setReferenceElement,
-          ref: setReferenceElement
-        })
+        React.cloneElement(child, getContentElementProps(child))
       )}
 
       {isOpen && (
@@ -101,7 +113,8 @@ const Tooltip = ({ content, children }) => {
 
 Tooltip.propTypes = {
   content: PropTypes.node,
-  children: PropTypes.node
+  children: PropTypes.node,
+  closeOnClick: PropTypes.bool
 }
 
 export default Tooltip