Merge pull request #1123 from yoution/issue-1122

fix: issue #1122

Author: maxceem

.circleci/config.yml

@@ -83,7 +83,6 @@ workflows:
             branches:
               only:
                 - develop
-                - feature/timeline-template
 
       # Production builds are exectuted only on tagged commits to the
       # master branch.

config/constants/development.js

@@ -30,6 +30,7 @@ module.exports = {
   DES_TRACK_ID: '5fa04185-041f-49a6-bfd1-fe82533cd6c8',
   DS_TRACK_ID: 'c0f5d461-8219-4c14-878a-c3a3f356466d',
   QA_TRACK_ID: '36e6a8d0-7e1e-4608-a673-64279d99c115',
+  CHALLENGE_TYPE_ID: '927abff4-7af9-4145-8ba1-577c16e64e2e',
   SEGMENT_API_KEY: 'QBtLgV8vCiuRX1lDikbMjcoe9aCHkF6n',
   CREATE_FORUM_TYPE_IDS: ['927abff4-7af9-4145-8ba1-577c16e64e2e', 'dc876fa4-ef2d-4eee-b701-b555fcc6544c'],
   FILE_PICKER_API_KEY: process.env.FILE_PICKER_API_KEY,

config/constants/production.js

@@ -30,6 +30,7 @@ module.exports = {
   DES_TRACK_ID: '5fa04185-041f-49a6-bfd1-fe82533cd6c8',
   DS_TRACK_ID: 'c0f5d461-8219-4c14-878a-c3a3f356466d',
   QA_TRACK_ID: '36e6a8d0-7e1e-4608-a673-64279d99c115',
+  CHALLENGE_TYPE_ID: '927abff4-7af9-4145-8ba1-577c16e64e2e',
   SEGMENT_API_KEY: 'QSQAW5BWmZfLoKFNRgNKaqHvLDLJoGqF',
   CREATE_FORUM_TYPE_IDS: ['927abff4-7af9-4145-8ba1-577c16e64e2e', 'dc876fa4-ef2d-4eee-b701-b555fcc6544c'],
   FILE_PICKER_API_KEY: process.env.FILE_PICKER_API_KEY,

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

@@ -52,18 +52,16 @@
   }
 }
 
-.challengeName {
-  &::-moz-placeholder { /* Mozilla Firefox 19+ */
-    line-height: 38px;
-    color: $tc-gray-80;
-  }
-  &::-webkit-input-placeholder { /* Webkit */
-    line-height: 38px;
-    color: $tc-gray-80;
-  }
-  &:-ms-input-placeholder { /* IE */
-    line-height: 38px;
-    color: $tc-gray-80;
+@-moz-document url-prefix() {
+  .challengeName {
+    &::-moz-placeholder { /* Mozilla Firefox 19+ */
+      line-height: 38px;
+    }
+    &::-webkit-input-placeholder { /* Webkit */
+      line-height: 38px;
+    }
+    &:-ms-input-placeholder { /* IE */
+      line-height: 38px;
+    }
   }
 }
-

src/components/ChallengeEditor/ChallengeView/index.js

@@ -26,7 +26,6 @@ import { isBetaMode } from '../../../util/cookie'
 import { loadGroupDetails } from '../../../actions/challenges'
 import Tooltip from '../../Tooltip'
 import { MESSAGE, REVIEW_TYPES } from '../../../config/constants'
-import TimelineTemplateField from '../TimelineTemplate-Field'
 
 const ChallengeView = ({
   projectDetail,
@@ -201,13 +200,6 @@ const ChallengeView = ({
                 {isBetaMode() && (
                   <UseSchedulingAPIField challenge={challenge} readOnly />
                 )}
-                <TimelineTemplateField
-                  challengeTimelines={metadata.challengeTimelines}
-                  timelineTemplates={metadata.timelineTemplates}
-                  challenge={challenge}
-                  onUpdateSelect={() => {}}
-                  readOnly
-                />
               </>
             )}
             {

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

@@ -20,6 +20,7 @@ import {
   MESSAGE,
   COMMUNITY_APP_URL,
   DES_TRACK_ID,
+  CHALLENGE_TYPE_ID,
   REVIEW_TYPES
 } from '../../config/constants'
 import { PrimaryButton, OutlineButton } from '../Buttons'
@@ -52,7 +53,6 @@ import Tooltip from '../Tooltip'
 import UseSchedulingAPIField from './UseSchedulingAPIField'
 import { getResourceRoleByName } from '../../util/tc'
 import { isBetaMode } from '../../util/cookie'
-import TimelineTemplateField from './TimelineTemplate-Field'
 
 const theme = {
   container: styles.modalContainer
@@ -77,6 +77,7 @@ class ChallengeEditor extends Component {
       isOpenAdvanceSettings: false,
       isLoading: false,
       isSaving: false,
+      showDesignChallengeWarningModel: false,
       hasValidationErrors: false,
       challenge: {
         ...dropdowns['newChallenge']
@@ -111,9 +112,11 @@ class ChallengeEditor extends Component {
     this.onUpdateDescription = this.onUpdateDescription.bind(this)
     this.onActiveChallenge = this.onActiveChallenge.bind(this)
     this.resetModal = this.resetModal.bind(this)
+    this.resetDesignChallengeWarningModal = this.resetDesignChallengeWarningModal.bind(this)
     this.openCloseTaskConfirmation = this.openCloseTaskConfirmation.bind(this)
     this.onCloseTask = this.onCloseTask.bind(this)
     this.createNewChallenge = this.createNewChallenge.bind(this)
+    this.createNewDesignChallenge = this.createNewDesignChallenge.bind(this)
     this.getCurrentChallengeId = this.getCurrentChallengeId.bind(this)
     this.isValidChallengePrizes = this.isValidChallengePrizes.bind(this)
     this.isValidChallenge = this.isValidChallenge.bind(this)
@@ -236,6 +239,10 @@ class ChallengeEditor extends Component {
     }
   }
 
+  resetDesignChallengeWarningModal () {
+    this.setState({ showDesignChallengeWarningModel: false })
+  }
+
   resetModal () {
     this.setState({ isLoading: false, isConfirm: false, isLaunch: false, error: null, isCloseTask: false, isDeleteLaunch: false })
   }
@@ -825,12 +832,25 @@ class ChallengeEditor extends Component {
     history.push(newPath)
   };
 
+  createNewDesignChallenge () {
+    this.resetDesignChallengeWarningModal()
+    this.createNewChallenge()
+  }
+
   async createNewChallenge () {
     if (!this.props.isNew) return
     const { metadata, createChallenge, projectDetail } = this.props
-    const { name, trackId, typeId } = this.state.challenge
+    const { showDesignChallengeWarningModel, challenge: { name, trackId, typeId } } = 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 })
@@ -839,7 +859,7 @@ class ChallengeEditor extends Component {
     const STD_DEV_TIMELINE_TEMPLATE = _.find(timelineTemplates, { name: 'Standard Development' })
     const avlTemplates = this.getAvailableTimelineTemplates()
     // chooses first available timeline template or fallback template for the new challenge
-    const defaultTemplate = _.find(avlTemplates || [], t => t.isDefault) || STD_DEV_TIMELINE_TEMPLATE
+    const defaultTemplate = avlTemplates && avlTemplates.length > 0 ? avlTemplates[0] : STD_DEV_TIMELINE_TEMPLATE
     const isTask = _.find(metadata.challengeTypes, { id: typeId, isTask: true })
     const newChallenge = {
       status: 'New',
@@ -852,7 +872,7 @@ class ChallengeEditor extends Component {
         reviewType: isTask || isDesignChallenge ? REVIEW_TYPES.INTERNAL : REVIEW_TYPES.COMMUNITY
       },
       descriptionFormat: 'markdown',
-      timelineTemplateId: _.get(this.getCurrentTemplate(), 'id', defaultTemplate.id),
+      timelineTemplateId: defaultTemplate.id,
       terms: [{ id: DEFAULT_TERM_UUID, roleId: SUBMITTER_ROLE_UUID }],
       groups: []
       // prizeSets: this.getDefaultPrizeSets()
@@ -1141,16 +1161,15 @@ class ChallengeEditor extends Component {
 
     // all timeline template ids available for the challenge type
     const availableTemplateIds = _.filter(challengeTimelines, ct => ct.typeId === challenge.typeId && ct.trackId === challenge.trackId).map(tt => tt.timelineTemplateId)
-    const defaultChallengeTimeline = _.find(challengeTimelines, ct => ct.typeId === challenge.typeId && ct.trackId === challenge.trackId && ct.isDefault)
     // filter and return timeline templates that are available for this challenge type
-    const avlTemplates = _.filter(timelineTemplates, tt => availableTemplateIds.indexOf(tt.id) !== -1)
-    return _.map(avlTemplates, tt => tt.id === defaultChallengeTimeline.timelineTemplateId ? { ...tt, isDefault: true } : tt)
+    return _.filter(timelineTemplates, tt => availableTemplateIds.indexOf(tt.id) !== -1)
   }
 
   render () {
     const {
       isLaunch,
       isConfirm,
+      showDesignChallengeWarningModel,
       challenge,
       draftChallenge,
       isOpenAdvanceSettings,
@@ -1222,6 +1241,30 @@ class ChallengeEditor extends Component {
       }
     }
 
+    let designChallengeModal
+    if (showDesignChallengeWarningModel) {
+      const messageBody = (
+        <div>
+          <div>
+            At this time, Work Manager only supports single-round (no checkpoint) challenges for design. If you want to run a multi-round (has checkpoints) design challenge, please use Direct.
+          </div>
+          <div>
+            Do you want to proceed with set-up?
+          </div>
+        </div>
+      )
+      designChallengeModal = (
+        <ConfirmationModal
+          title='Reminder'
+          message={messageBody}
+          theme={theme}
+          cancelText='Cancel Set-Up'
+          confirmText='Continue Set-Up'
+          onCancel={this.resetDesignChallengeWarningModal}
+          onConfirm={this.createNewDesignChallenge}
+        />
+      )
+    }
     if (!isNew && isLaunch && !isConfirm) {
       activateModal = (
         <ConfirmationModal
@@ -1363,15 +1406,9 @@ class ChallengeEditor extends Component {
           <div className={styles.newFormContainer}>
             <TrackField tracks={metadata.challengeTracks} challenge={challenge} onUpdateOthers={this.onUpdateOthers} />
             <TypeField types={metadata.challengeTypes} onUpdateSelect={this.onUpdateSelect} challenge={challenge} />
-            <TimelineTemplateField
-              currentTemplate={this.state.currentTemplate}
-              challengeTimelines={metadata.challengeTimelines}
-              timelineTemplates={metadata.timelineTemplates}
-              challenge={challenge}
-              onUpdateSelect={this.resetPhase}
-            />
             <ChallengeNameField challenge={challenge} onUpdateInput={this.onUpdateInput} />
           </div>
+          {showDesignChallengeWarningModel && designChallengeModal}
           { errorContainer }
           { actionButtons }
         </form>
@@ -1399,6 +1436,7 @@ class ChallengeEditor extends Component {
                 <span><span className={styles.fieldTitle}>Status:</span> {challenge.status}</span>
               </div>
             </div>
+
             <ChallengeNameField challenge={challenge} onUpdateInput={this.onUpdateInput} />
             {isTask && (
               <AssignedMemberField
@@ -1447,13 +1485,6 @@ class ChallengeEditor extends Component {
                 {isBetaMode() && (
                   <UseSchedulingAPIField challenge={challenge} toggleUseSchedulingAPI={this.toggleUseSchedulingAPI} />
                 )}
-                <TimelineTemplateField
-                  challengeTimelines={metadata.challengeTimelines}
-                  timelineTemplates={metadata.timelineTemplates}
-                  challenge={challenge}
-                  currentTemplate={this.state.currentTemplate}
-                  onUpdateSelect={this.resetPhase}
-                />
               </React.Fragment>
             )}
             {!isTask && (

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

@@ -6,7 +6,7 @@ import styles from './ConfirmationModal.module.scss'
 import OutlineButton from '../Buttons/OutlineButton'
 import PrimaryButton from '../Buttons/PrimaryButton'
 
-const ConfirmationModal = ({ title, message, errorMessage, theme, isProcessing, onCancel, onConfirm, disableConfirmButton }) => (
+const ConfirmationModal = ({ title, message, errorMessage, theme, isProcessing, cancelText, confirmText, onCancel, onConfirm, disableConfirmButton }) => (
   <Modal theme={theme} onCancel={onCancel}>
     <div className={styles.contentContainer}>
       <div className={styles.title}>{title}</div>
@@ -15,14 +15,14 @@ const ConfirmationModal = ({ title, message, errorMessage, theme, isProcessing,
         <div className={styles.button}>
           <OutlineButton
             className={cn({ disabled: isProcessing })}
-            text={'Cancel'}
+            text={cancelText || 'Cancel'}
             type={'danger'}
             onClick={onCancel}
           />
         </div>
         <div className={styles.button}>
           <PrimaryButton
-            text={isProcessing ? 'Processing...' : 'Confirm'}
+            text={isProcessing ? 'Processing...' : confirmText || 'Confirm'}
             disabled={disableConfirmButton}
             type={'info'}
             onClick={onConfirm}
@@ -41,6 +41,8 @@ ConfirmationModal.propTypes = {
   theme: PropTypes.shape(),
   isProcessing: PropTypes.bool,
   disableConfirmButton: PropTypes.bool,
+  cancelText: PropTypes.string,
+  confirmText: PropTypes.string,
   onCancel: PropTypes.func,
   onConfirm: PropTypes.func
 }

src/components/ChallengeEditor/index.js

@@ -84,10 +84,13 @@
     margin-top: 30px;
 
     .button {
-      width: 135px;
       height: 40px;
       margin-right: 66px;
 
+      > button {
+        padding: 0 35px;
+      }
+
       span {
         font-size: 18px;
         font-weight: 500;
@@ -98,4 +101,4 @@
       margin-right: 0;
     }
   }
-}
+}

src/components/Modal/ConfirmationModal.js

@@ -14,6 +14,7 @@ export const {
   DES_TRACK_ID,
   DS_TRACK_ID,
   QA_TRACK_ID,
+  CHALLENGE_TYPE_ID,
   SEGMENT_API_KEY
 } = process.env
 export const CREATE_FORUM_TYPE_IDS = typeof process.env.CREATE_FORUM_TYPE_IDS === 'string' ? process.env.CREATE_FORUM_TYPE_IDS.split(',') : process.env.CREATE_FORUM_TYPE_IDS

src/components/Modal/ConfirmationModal.module.scss

@@ -91,7 +91,7 @@ export async function fetchTimelineTemplates () {
  * @returns {Promise<*>}
  */
 export async function fetchChallengeTimelines () {
-  const response = await axiosInstance.get(`${CHALLENGE_TIMELINES_URL}?page=1&perPage=100`)
+  const response = await axiosInstance.get(`${CHALLENGE_TIMELINES_URL}?isDefault=true&page=1&perPage=100`)
   return _.get(response, 'data', [])
 }