Merge pull request #1618 from topcoder-platform/pm-810_1

fix(PM-810): tooltip and added empty content text

Author: hentrymartin

src/components/ChallengeEditor/ArtifactsListModal/ArtifactsListModal.module.scss

@@ -43,5 +43,11 @@
         cursor: pointer;
       }
     }
+    .no-artifacts {
+      @include roboto;
+
+      margin-top: 40px;
+      text-align: center;
+    }
   }
 }

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 />
           }

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={() => {

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