Add data dashboard flag to display when creating a DS challenge

#1418

Author: jmgasper

src/components/ChallengeEditor/ChallengeView/index.js

@@ -24,7 +24,8 @@ import {
   REVIEW_TYPES,
   CONNECT_APP_URL,
   PHASE_PRODUCT_CHALLENGE_ID_FIELD,
-  MULTI_ROUND_CHALLENGE_TEMPLATE_ID
+  MULTI_ROUND_CHALLENGE_TEMPLATE_ID,
+  DS_TRACK_ID
 } from '../../../config/constants'
 import PhaseInput from '../../PhaseInput'
 import CheckpointPrizesField from '../CheckpointPrizes-Field'
@@ -98,6 +99,9 @@ const ChallengeView = ({
   const isTask = _.get(challenge, 'task.isTask', false)
   const phases = _.get(challenge, 'phases', [])
   const showCheckpointPrizes = _.get(challenge, 'timelineTemplateId') === MULTI_ROUND_CHALLENGE_TEMPLATE_ID
+  const isDataScience = challenge.trackId === DS_TRACK_ID
+  const useDashboardData = _.find(challenge.metadata, { name: 'show_data_dashboard' })
+  const useDashboard = useDashboardData ? useDashboardData.value : true
 
   return (
     <div className={styles.wrapper}>
@@ -140,6 +144,13 @@ const ChallengeView = ({
                 <span><span className={styles.fieldTitle}>Challenge Name:</span> {challenge.name}</span>
               </div>
             </div>
+            {isDataScience && (
+              <div className={cn(styles.row, styles.topRow)}>
+                <div className={styles.col}>
+                  <span><span className={styles.fieldTitle}>Show data dashboard:</span> {useDashboard ? 'Yes' : 'No'}</span>
+                </div>
+              </div>
+            )}
             {isTask &&
               <AssignedMemberField challenge={challenge} assignedMemberDetails={assignedMemberDetails} readOnly />}
             <CopilotField challenge={{

src/components/ChallengeEditor/index.js

@@ -25,7 +25,7 @@ import {
   MILESTONE_STATUS,
   PHASE_PRODUCT_CHALLENGE_ID_FIELD,
   QA_TRACK_ID, DESIGN_CHALLENGE_TYPES, ROUND_TYPES,
-  MULTI_ROUND_CHALLENGE_TEMPLATE_ID
+  MULTI_ROUND_CHALLENGE_TEMPLATE_ID, DS_TRACK_ID
 } from '../../config/constants'
 import { PrimaryButton, OutlineButton } from '../Buttons'
 import TrackField from './Track-Field'
@@ -598,6 +598,8 @@ class ChallengeEditor extends Component {
         submissionLimit.count = ''
       }
       existingMetadata.value = JSON.stringify(submissionLimit)
+    } else if (existingMetadata.name === 'show_data_dashboard') {
+      existingMetadata.value = Boolean(value)
     } else {
       existingMetadata.value = `${value}`
     }
@@ -949,9 +951,10 @@ class ChallengeEditor extends Component {
   async createNewChallenge () {
     if (!this.props.isNew) return
     const { metadata, createChallenge, projectDetail } = this.props
-    const { challenge: { name, trackId, typeId, milestoneId, roundType, challengeType } } = this.state
+    const { challenge: { name, trackId, typeId, milestoneId, roundType, challengeType, metadata: challengeMetadata } } = this.state
     const { timelineTemplates } = metadata
     const isDesignChallenge = trackId === DES_TRACK_ID
+    const isDataScience = trackId === DS_TRACK_ID
 
     // indicate that creating process has started
     this.setState({ isSaving: true })
@@ -1009,6 +1012,16 @@ class ChallengeEditor extends Component {
         newChallenge.discussions = discussions
       }
     }
+    if (isDataScience) {
+      if (!newChallenge.metadata) {
+        newChallenge.metadata = []
+      }
+      let useDashboard = _.find(challengeMetadata, { name: 'show_data_dashboard' })
+      if (useDashboard === undefined) {
+        useDashboard = { name: 'show_data_dashboard', value: true }
+      }
+      newChallenge.metadata.push(useDashboard)
+    }
     try {
       const action = await createChallenge(newChallenge, projectDetail.id)
       if (isTask) {
@@ -1551,6 +1564,9 @@ class ChallengeEditor extends Component {
     const isChallengeType = challenge.typeId === CHALLENGE_TYPE_ID
     const showRoundType = isDesignChallenge && isChallengeType
     const showCheckpointPrizes = challenge.timelineTemplateId === MULTI_ROUND_CHALLENGE_TEMPLATE_ID
+    const isDataScience = challenge.trackId === DS_TRACK_ID
+    const useDashboardData = _.find(challenge.metadata, { name: 'show_data_dashboard' })
+    const useDashboard = useDashboardData ? useDashboardData.value : true
 
     const challengeForm = isNew
       ? (
@@ -1567,6 +1583,24 @@ class ChallengeEditor extends Component {
               )
             }
             <ChallengeNameField challenge={challenge} onUpdateInput={this.onUpdateInput} />
+            {
+              isDataScience && (
+                <div className={styles.row}>
+                  <div className={cn(styles.field, styles.col1)}>
+                    <label htmlFor='isDashboardEnabled'>Use data dashboard :</label>
+                  </div>
+                  <div className={cn(styles.field, styles.col2)}>
+                    <input
+                      name='isDashboardEnabled'
+                      type='checkbox'
+                      id='isDashboardEnabled'
+                      checked={useDashboard}
+                      onChange={(e) => this.onUpdateMetadata('show_data_dashboard', e.target.checked)}
+                    />
+                  </div>
+                </div>
+              )
+            }
             {projectDetail.version === 'v4' && <MilestoneField milestones={activeProjectMilestones} onUpdateSelect={this.onUpdateSelect} projectId={projectDetail.id} selectedMilestoneId={selectedMilestoneId} />}
             {useTask && (<DiscussionField hasForum={hasForum} toggleForum={this.toggleForumOnCreate} />)}
           </div>
@@ -1600,6 +1634,24 @@ class ChallengeEditor extends Component {
             </div>
 
             <ChallengeNameField challenge={challenge} onUpdateInput={this.onUpdateInput} />
+            {
+              isDataScience && (
+                <div className={styles.row}>
+                  <div className={cn(styles.field, styles.col1)}>
+                    <label htmlFor='isDashboardEnabled'>Use data dashboard :</label>
+                  </div>
+                  <div className={cn(styles.field, styles.col2)}>
+                    <input
+                      name='isDashboardEnabled'
+                      type='checkbox'
+                      id='isDashboardEnabled'
+                      checked={useDashboard}
+                      onChange={(e) => this.onUpdateMetadata('show_data_dashboard', e.target.checked)}
+                    />
+                  </div>
+                </div>
+              )
+            }
             {isTask && (
               <AssignedMemberField
                 challenge={challenge}