Multi-round UAT fixes

#1414

Author: jmgasper

src/components/ChallengeEditor/CheckpointPrizes-Field/CheckpointPrizes-Field.module.scss

@@ -50,7 +50,7 @@
         width: 271px;
       }
       input:last-of-type {
-        width: 187px;
+        width: 70px;
         margin-right: 10px;
       }
     }
@@ -63,13 +63,12 @@
 }
 
 .dollarIcon {
-  margin-left: 10px;
   color: $tc-black;
   cursor: pointer;
 }
 
 .checkpointPrizeContainer {
-  margin: 30px 0 0 60px;
+  margin: 0 0 0 60px;
 }
 
 .checkpointLabel {
@@ -100,3 +99,7 @@
   width: 50px;
   border-right-width: 0;
 }
+
+.checkpointSelect {
+  max-width: 85px;
+}

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

@@ -9,7 +9,8 @@ import {
   PRIZE_SETS_TYPE,
   CHALLENGE_PRIZE_TYPE,
   MAX_CHECKPOINT_PRIZE_COUNT,
-  DEFAULT_CHECKPOINT_PRIZE
+  DEFAULT_CHECKPOINT_PRIZE,
+  DEFAULT_CHECKPOINT_PRIZE_COUNT
 } from '../../../config/constants'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faDollarSign } from '@fortawesome/free-solid-svg-icons'
@@ -19,7 +20,7 @@ const CheckpointPrizesField = ({ challenge, onUpdateOthers, readOnly }) => {
   const type = PRIZE_SETS_TYPE.CHECKPOINT_PRIZES
   const prizeSets = _.get(challenge, 'prizeSets') || []
   const checkpointPrize = prizeSets.find(p => p.type === type) || { type: PRIZE_SETS_TYPE.CHECKPOINT_PRIZES, prizes: [], 'description': 'Checkpoint Prizes' }
-  const number = _.get(checkpointPrize, 'prizes.length') || MAX_CHECKPOINT_PRIZE_COUNT
+  const number = _.get(checkpointPrize, 'prizes.length') || DEFAULT_CHECKPOINT_PRIZE_COUNT
   const amount = _.get(checkpointPrize, 'prizes.length') ? checkpointPrize.prizes[0].value : DEFAULT_CHECKPOINT_PRIZE
 
   // update the check point prize with default values if it's not already defined
@@ -39,42 +40,41 @@ const CheckpointPrizesField = ({ challenge, onUpdateOthers, readOnly }) => {
         <div className={cn(styles.field, styles.col1)}>
           <label htmlFor={`checkpointPrizes`} className={styles.checkpointLabel}>Checkpoint Prizes :</label>
         </div>
-      </div>
-      {
-        readOnly ? (
-          <div className={styles.checkpointPrizeContainer}>
+        {
+          readOnly ? (
+            <div className={cn(styles.field, styles.col2)}>
             ${amount} for each submission up to {number} submissions
-          </div>
-        ) : (
-          <div className={styles.checkpointPrizeContainer}>
-            <div>
-              Pay
             </div>
-            <div>
-              <div className={styles.checkpointPrizeInputContainer}>
-                <div className={styles.checkpointPrizeAmountContainer}>
-                  <FontAwesomeIcon className={styles.dollarIcon} icon={faDollarSign} />
+          ) : (
+            <div className={cn(styles.field, styles.col2)}>
+              <div>
+                Pay&nbsp;&nbsp;
+              </div>
+              <div>
+                <div className={styles.checkpointPrizeInputContainer}>
+                  <div className={styles.checkpointPrizeAmountContainer}>
+                    <FontAwesomeIcon className={styles.dollarIcon} icon={faDollarSign} />
+                  </div>
+                  <input id='checkpointPrize' name='checkpointPrize' type='text' placeholder='' value={amount} maxLength='7' required onChange={(e) => onChange(number, e.target.value)} />
                 </div>
-                <input id='checkpointPrize' name='checkpointPrize' type='text' placeholder='' value={amount} maxLength='7' required onChange={(e) => onChange(number, e.target.value)} />
+              </div>
+              <div>
+                for each submission up to&nbsp;&nbsp;
+              </div>
+              <div className={styles.checkpointSelect}>
+                <Select
+                  name='submissions'
+                  options={_.range(1, MAX_CHECKPOINT_PRIZE_COUNT + 1).map((v) => ({ label: v, value: v }))}
+                  value={{ label: number, value: number }}
+                  isClearable={false}
+                  onChange={e => onChange(e.value, amount)}
+                  isDisabled={false}
+                />
               </div>
             </div>
-            <div>
-              for each submission up to
-            </div>
-            <div>
-              <Select
-                name='submissions'
-                options={_.range(1, MAX_CHECKPOINT_PRIZE_COUNT + 1).map((v) => ({ label: v, value: v }))}
-                value={{ label: number, value: number }}
-                isClearable={false}
-                onChange={e => onChange(e.value, amount)}
-                isDisabled={false}
-              />
-            </div>
-
-          </div>
-        )
-      }
+          )
+        }
+      </div>
     </>
   )
 }

src/components/ChallengeEditor/index.js

@@ -949,17 +949,9 @@ class ChallengeEditor extends Component {
   async createNewChallenge () {
     if (!this.props.isNew) return
     const { metadata, createChallenge, projectDetail } = this.props
-    const { showDesignChallengeWarningModel, challenge: { name, trackId, typeId, milestoneId, roundType, challengeType } } = this.state
+    const { challenge: { name, trackId, typeId, milestoneId, roundType, challengeType } } = this.state
     const { timelineTemplates } = metadata
     const isDesignChallenge = trackId === DES_TRACK_ID
-    const isChallengeType = typeId === CHALLENGE_TYPE_ID
-
-    if (!showDesignChallengeWarningModel && isDesignChallenge && isChallengeType) {
-      this.setState({
-        showDesignChallengeWarningModel: true
-      })
-      return
-    }
 
     // indicate that creating process has started
     this.setState({ isSaving: true })

src/components/Select/styles.js

@@ -55,7 +55,7 @@ export default {
     paddingLeft: '10px',
     border: 'none',
     input: {
-      width: 'auto !important',
+      width: '100% !important',
       height: 'auto !important',
       lineHeight: 'normal !important'
     }

src/config/constants.js

@@ -297,5 +297,6 @@ export const MULTI_ROUND_CHALLENGE_DESC_TEMPLATE = '## Challenge Introduction\n'
   '\n' +
   '## Challenge Description'
 
-export const MAX_CHECKPOINT_PRIZE_COUNT = 5
+export const MAX_CHECKPOINT_PRIZE_COUNT = 8
 export const DEFAULT_CHECKPOINT_PRIZE = 50
+export const DEFAULT_CHECKPOINT_PRIZE_COUNT = 5