feat: disable Direct/OnlineReview when not available

package.json

@@ -7,6 +7,7 @@
     "@fortawesome/fontawesome-svg-core": "^1.2.14",
     "@fortawesome/free-solid-svg-icons": "^5.7.1",
     "@fortawesome/react-fontawesome": "^0.1.4",
+    "@popperjs/core": "^2.5.4",
     "@svgr/webpack": "2.4.1",
     "axios": "^0.19.0",
     "babel-core": "7.0.0-bridge.0",
@@ -74,6 +75,7 @@
     "react-google-charts": "^3.0.13",
     "react-helmet": "^5.2.0",
     "react-js-pagination": "^3.0.3",
+    "react-popper": "^2.2.4",
     "react-redux": "^6.0.0",
     "react-redux-toastr": "^7.5.1",
     "react-router-dom": "^4.3.1",

src/components/Buttons/PrimaryButton/PrimaryButton.module.scss

@@ -44,4 +44,16 @@
       background-color: $inactive;
     }
   }
+
+  /* this style just visually simulates the disable status of the button */
+  &.disabled {
+    cursor: default;
+    background-color: $inactive;
+
+    // override possible styles for
+    &:not(:disabled),
+    &:disabled {
+      cursor: default;
+    }
+  }
 }

src/components/Buttons/PrimaryButton/index.js

@@ -6,28 +6,50 @@ import cn from 'classnames'
 
 import styles from './PrimaryButton.module.scss'
 
-const PrimaryButton = ({ type, text, link, onClick, submit, disabled }) => {
-  if (_.isEmpty(link)) {
+const PrimaryButton = React.forwardRef(
+  (
+    { type, text, link, onClick, submit, disabled, onMouseEnter, onMouseLeave },
+    ref
+  ) => {
+    if (_.isEmpty(link)) {
+      return (
+        <button
+          type={submit ? 'submit' : 'button'}
+          className={cn(styles.container, styles[type])}
+          onClick={submit ? null : onClick}
+          disabled={disabled}
+          onMouseEnter={onMouseEnter}
+          onMouseLeave={onMouseLeave}
+          ref={ref}
+        >
+          <span>{text}</span>
+        </button>
+      )
+    }
     return (
-      <button type={submit ? 'submit' : 'button'} className={cn(styles.container, styles[type])} onClick={submit ? null : onClick} disabled={disabled}>
+      <Link
+        className={cn(styles.container, styles[type])}
+        to={`${link}`}
+        ref={ref}
+        onMouseEnter={onMouseEnter}
+        onMouseLeave={onMouseLeave}
+      >
         <span>{text}</span>
-      </button>
+      </Link>
     )
   }
-  return (
-    <Link className={cn(styles.container, styles[type])} to={`${link}`}>
-      <span>{text}</span>
-    </Link>
-  )
-}
+)
 
 PrimaryButton.propTypes = {
   type: PropTypes.string.isRequired,
   text: PropTypes.string.isRequired,
   link: PropTypes.string,
   onClick: PropTypes.func,
   submit: PropTypes.bool,
-  disabled: PropTypes.bool
+  disabled: PropTypes.bool,
+  onMouseEnter: PropTypes.func,
+  onMouseLeave: PropTypes.func,
+  innerRef: PropTypes.any
 }
 
 export default PrimaryButton

src/components/LegacyLinks/LegacyLinks.module.scss

@@ -8,8 +8,13 @@
     margin-left: 20px;
   }
 
-  a {
+  button {
     height: 40px;
+    outline: none;
+    white-space: nowrap;
+  }
+
+  a {
     &:hover {
       text-decoration: none;
     }

src/components/LegacyLinks/index.js

@@ -1,31 +1,43 @@
 /**
  * Component to render LegacyLinks of the app
  */
-import React from 'react'
+import React, { useCallback } from 'react'
 import PropTypes from 'prop-types'
 import styles from './LegacyLinks.module.scss'
 import { DIRECT_PROJECT_URL, ONLINE_REVIEW_URL } from '../../config/constants'
 import PrimaryButton from '../Buttons/PrimaryButton'
+import Tooltip from '../Tooltip'
 
 const LegacyLinks = ({ challenge }) => {
+  const onClick = useCallback((e) => {
+    e.stopPropagation()
+  }, [])
+
   const directUrl = `${DIRECT_PROJECT_URL}/contest/detail?projectId=${challenge.legacyId}`
   const orUrl = `${ONLINE_REVIEW_URL}/review/actions/ViewProjectDetails?pid=${challenge.legacyId}`
   return (
     <div className={styles.container}>
-      <a
-        href={directUrl}
-        target={'_blank'}
-        onClick={(e) => e.stopPropagation()}
-      >
-        <PrimaryButton text={'Direct'} type={'info'} />
-      </a>
-      <a
-        href={orUrl}
-        target={'_blank'}
-        onClick={(e) => e.stopPropagation()}
-      >
-        <PrimaryButton text={'Online Review'} type={'info'} />
-      </a>
+      {challenge.legacyId ? (
+        <>
+          <a href={directUrl} target={'_blank'} onClick={onClick}>
+            <PrimaryButton text={'Direct'} type={'info'} />
+          </a>
+          <a href={orUrl} target={'_blank'} onClick={onClick}>
+            <PrimaryButton text={'Online Review'} type={'info'} />
+          </a>
+        </>
+      ) : (
+        <>
+          <Tooltip content='Legacy project is not yet created'>
+            {/* Don't disable button for real inside tooltip, otherwise mouseEnter/Leave events work not good */}
+            <PrimaryButton text={'Direct'} type={'disabled'} />
+          </Tooltip>
+          <Tooltip content='Legacy project is not yet created'>
+            {/* Don't disable button for real inside tooltip, otherwise mouseEnter/Leave events work not good */}
+            <PrimaryButton text={'Online Review'} type={'disabled'} />
+          </Tooltip>
+        </>
+      )}
     </div>
   )
 }

src/components/Tooltip/Tooltip.module.scss

@@ -0,0 +1,22 @@
+@import "../../styles/includes";
+
+.popover {
+  background-color: $darker-gray;
+  border-radius: 7px;
+  z-index: 1000;
+}
+
+.popoverArrow {
+  border-style: solid;
+  border-width: 7px 7px 0 7px;
+  border-color: $darker-gray transparent transparent transparent;
+  height: 0;
+  bottom: -6px;
+  width: 0;
+}
+
+.content {
+  color: #fff;
+  font-size: 12px;
+  padding: 10px;
+}

src/components/Tooltip/index.js

@@ -0,0 +1,107 @@
+/**
+ * Tooltip component
+ *
+ * This component can be wrapped around any child component like this:
+ * ```
+ *   <Tooltip content="Tooltip content">
+ *     <AnyComponent />
+ *   </Tooltip>
+ * ```
+ * and tooltip would be shown when we put mouse on <AnyComponent />.
+ *
+ * <AnyComponent /> component should support the next props:
+ * - `onMouseEnter`
+ * - `onMouseLeave`
+ * - `ref` to pass reference to its DOM element
+ *
+ * All the basic DOM components like <div>, <span> and so on are supported by default.
+ */
+import React, { useState, useCallback } from 'react'
+import PropTypes from 'prop-types'
+import styles from './Tooltip.module.scss'
+import { usePopper } from 'react-popper'
+
+const Tooltip = ({ content, children }) => {
+  const [isOpen, setIsOpen] = useState(false)
+  const [referenceElement, setReferenceElement] = useState(null)
+  const [popperElement, setPopperElement] = useState(null)
+  const [arrowElement, setArrowElement] = useState(null)
+  const { styles: popperStyles, attributes } = usePopper(
+    referenceElement,
+    popperElement,
+    {
+      placement: 'top',
+      modifiers: [
+        {
+          name: 'flip',
+          options: {
+            fallbackPlacements: ['top']
+          }
+        },
+        {
+          name: 'offset',
+          options: {
+            // Y-offset should be equal to the height of the arrow
+            offset: [0, 6]
+          }
+        },
+        {
+          name: 'arrow',
+          // padding should be equal to border-radius of the tooltip
+          options: { element: arrowElement, padding: 7 }
+        },
+        {
+          name: 'preventOverflow',
+          options: {
+            // padding from browser edges
+            padding: 16
+          }
+        }
+      ]
+    }
+  )
+
+  const close = useCallback(() => {
+    setIsOpen(false)
+  }, [setIsOpen])
+
+  const open = useCallback(() => {
+    setIsOpen(true)
+  }, [setIsOpen])
+
+  return (
+    <>
+      {React.Children.map(children, (child) =>
+        React.cloneElement(child, {
+          onMouseEnter: open,
+          onMouseLeave: close,
+          innerRef: setReferenceElement,
+          ref: setReferenceElement
+        })
+      )}
+
+      {isOpen && (
+        <div
+          className={styles.popover}
+          ref={setPopperElement}
+          style={popperStyles.popper}
+          {...attributes.popper}
+        >
+          <div className={styles.content}>{content}</div>
+          <div
+            ref={setArrowElement}
+            style={popperStyles.arrow}
+            className={styles.popoverArrow}
+          />
+        </div>
+      )}
+    </>
+  )
+}
+
+Tooltip.propTypes = {
+  content: PropTypes.node,
+  children: PropTypes.node
+}
+
+export default Tooltip