Prod push

.nvmrc

@@ -0,0 +1 @@
+10.22.1

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/ChallengeEditor/ChallengePrizes-Field/index.js

@@ -8,7 +8,7 @@ import PrizeInput from '../../PrizeInput'
 import styles from './ChallengePrizes-Field.module.scss'
 import cn from 'classnames'
 import { PrimaryButton } from '../../Buttons'
-import { CHALLENGE_PRIZE_TYPE, VALIDATION_VALUE_TYPE, PRIZE_SETS_TYPE } from '../../../config/constants'
+import { CHALLENGE_PRIZE_TYPE, VALIDATION_VALUE_TYPE, PRIZE_SETS_TYPE, CHALLENGE_TYPES_WITH_MULTIPLE_PRIZES } from '../../../config/constants'
 import { validateValue } from '../../../util/input-check'
 
 class ChallengePrizesField extends Component {
@@ -61,12 +61,12 @@ class ChallengePrizesField extends Component {
   renderPrizes () {
     const { currentPrizeIndex } = this.state
     const { readOnly, challenge } = this.props
-    const isTask = _.get(challenge, 'task.isTask', false)
+    const allowMultiplePrizes = _.includes(CHALLENGE_TYPES_WITH_MULTIPLE_PRIZES, challenge.type)
     return _.map(this.getChallengePrize().prizes, (prize, index, { length }) => (
       <div key={`${index}-${prize.amount}-edit`}>
         <div className={styles.row}>
           <div className={cn(styles.field, styles.col1)}>
-            <label htmlFor={`${index}-prize`}>Prize {!isTask ? index + 1 : ''} {!readOnly && (<span>*</span>)}:</label>
+            <label htmlFor={`${index}-prize`}>Prize {allowMultiplePrizes ? index + 1 : ''} {!readOnly && (<span>*</span>)}:</label>
           </div>
           {readOnly ? (
             <span>${prize.value}</span>
@@ -101,7 +101,7 @@ class ChallengePrizesField extends Component {
 
   render () {
     const { readOnly, challenge } = this.props
-    const isTask = _.get(challenge, 'task.isTask', false)
+    const allowMultiplePrizes = _.includes(CHALLENGE_TYPES_WITH_MULTIPLE_PRIZES, challenge.type)
     return (
       <div className={styles.container}>
         <div className={styles.row}>
@@ -110,7 +110,7 @@ class ChallengePrizesField extends Component {
           </div>
         </div>
         { this.renderPrizes() }
-        {!readOnly && !isTask && (<div className={styles.button} onClick={this.addNewPrize}>
+        {!readOnly && allowMultiplePrizes && (<div className={styles.button} onClick={this.addNewPrize}>
           <PrimaryButton text={'Add New Prize'} type={'info'} />
         </div>)}
       </div>

src/components/ChallengeEditor/ChallengeView/ChallengeView.module.scss

@@ -244,6 +244,11 @@
 
 .actionButtonsRight {
   right: 20px;
+
+  button:not(:last-child),
+  a:not(:last-child) {
+    margin-right: 20px;
+  }
 }
 
 .button {

src/components/ChallengeEditor/MaximumSubmissions-Field/index.js

@@ -75,7 +75,7 @@ class MaximumSubmissionsField extends Component {
                 placeholder=''
                 value={count}
                 maxLength='200'
-                onChange={(e) => onUpdateMetadata('submissionLimit', e.target.value, 'count')}
+                onChange={(e) => onUpdateMetadata('submissionLimit', e.target.value.replace(/[^\d]+/g, ''), 'count')}
               />
             </div>
           </div>

src/components/ChallengeEditor/TextEditor-Field/index.js

@@ -115,8 +115,7 @@ class TextEditorField extends Component {
 
 TextEditorField.defaultProps = {
   challengeTags: [],
-  // TODO: For our first go-live, we're probably going to have this UI in production before the Community App work to display data from V5 is available. Only hide the UI elements for private description for now. Don't take out any code or functionality.
-  shouldShowPrivateDescription: false,
+  shouldShowPrivateDescription: true,
   onUpdateMetadata: () => {},
   onUpdateCheckbox: () => {},
   addFileType: () => {},

src/components/ChallengeEditor/index.js

@@ -1002,7 +1002,7 @@ class ChallengeEditor extends Component {
     const { challengeTimelines, timelineTemplates } = metadata
 
     // all timeline template ids available for the challenge type
-    const availableTemplateIds = _.filter(challengeTimelines, tt => tt.typeId === challenge.typeId).map(tt => tt.timelineTemplateId)
+    const availableTemplateIds = _.filter(challengeTimelines, ct => ct.typeId === challenge.typeId && ct.trackId === challenge.trackId).map(tt => tt.timelineTemplateId)
     // filter and return timeline templates that are available for this challenge type
     return _.filter(timelineTemplates, tt => availableTemplateIds.indexOf(tt.id) !== -1)
   }
@@ -1344,7 +1344,7 @@ class ChallengeEditor extends Component {
       <div className={styles.wrapper}>
         <Helmet title={getTitle(isNew)} />
         <div className={cn(styles.actionButtons, styles.actionButtonsLeft)}>
-          <LegacyLinks challenge={challenge} />
+          {!isNew && <LegacyLinks challenge={challenge} />}
         </div>
         <div className={styles.title}>{getTitle(isNew)}</div>
         <div className={cn(styles.actionButtons, styles.actionButtonsRight)}>

src/components/ChallengesComponent/ChallengesComponent.module.scss

@@ -24,6 +24,15 @@
   padding: 0 20px;
 }
 
+.titleLinks {
+  align-items: center;
+  display: flex;
+
+  > a + a {
+    margin-left: 20px;
+  }
+}
+
 .buttonLaunchNew {
   min-width: 135px;
   height: 40px;

src/components/ChallengesComponent/index.js

@@ -6,7 +6,7 @@ import PropTypes from 'prop-types'
 import Sticky from 'react-stickynode'
 import { Helmet } from 'react-helmet'
 import { Link } from 'react-router-dom'
-import { CONNECT_APP_URL } from '../../config/constants'
+import { CONNECT_APP_URL, DIRECT_PROJECT_URL } from '../../config/constants'
 
 import { PrimaryButton } from '../Buttons'
 import ChallengeList from './ChallengeList'
@@ -32,17 +32,26 @@ const ChallengesComponent = ({
       <div>
         <Helmet title={activeProject ? activeProject.name : ''} />
         <div className={styles.titleContainer}>
-          {(activeProject && activeProject.id) ? (
-            <a
-              className={styles.buttonLaunchNew}
-              href={`${CONNECT_APP_URL}/projects/${activeProject.id}`}
-              target={'_blank'}
-            >
-              <PrimaryButton text={'View Project in Connect'} type={'info'} />
-            </a>
-          ) : (
-            <span />
-          )}
+          <div className={styles.titleLinks}>
+            {activeProject && activeProject.id && (
+              <a
+                className={styles.buttonLaunchNew}
+                href={`${CONNECT_APP_URL}/projects/${activeProject.id}`}
+                target={'_blank'}
+              >
+                <PrimaryButton text={'View Project in Connect'} type={'info'} />
+              </a>
+            )}
+            {activeProject && activeProject.directProjectId && (
+              <a
+                className={styles.buttonLaunchNew}
+                href={`${DIRECT_PROJECT_URL}/projectOverview?formData.projectId=${activeProject.directProjectId}`}
+                target={'_blank'}
+              >
+                <PrimaryButton text={'View Project in Direct'} type={'info'} />
+              </a>
+            )}
+          </div>
           <div
             className={styles.title}
             dangerouslySetInnerHTML={{

src/components/LegacyLinks/LegacyLinks.module.scss

@@ -3,8 +3,18 @@
   display: flex;
   margin-top: auto;
 
-  a {
+  button:not(:first-child),
+  a:not(:first-child) {
+    margin-left: 20px;
+  }
+
+  button {
     height: 40px;
+    outline: none;
+    white-space: nowrap;
+  }
+
+  a {
     &:hover {
       text-decoration: none;
     }
@@ -18,4 +28,4 @@
       outline: 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;
+}