Show the data dashboard switch

#1418

Author: jmgasper

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

@@ -0,0 +1,67 @@
+@import "../../../styles/includes";
+
+.row {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: row;
+  margin: 30px 30px 0 30px;
+  align-content: space-between;
+  justify-content: flex-start;
+
+  .field {
+    @include upto-sm {
+      display: block;
+      padding-bottom: 10px;
+    }
+
+    label {
+      @include roboto-bold();
+
+      font-size: 16px;
+      line-height: 19px;
+      font-weight: 500;
+      color: $tc-gray-80;
+    }
+
+    &.col1 {
+      max-width: 185px;
+      min-width: 185px;
+      margin-right: 14px;
+      white-space: nowrap;
+      display: flex;
+      align-items: center;
+
+      span {
+        color: $tc-red;
+      }
+    }
+
+    &.col2.error {
+      color: $tc-red;
+      margin-top: -25px;
+    }
+    &.col2 {
+      align-self: flex-end;
+      margin-bottom: auto;
+      margin-top: auto;
+      display: flex;
+      flex-direction: row;
+      max-width: 600px;
+      min-width: 600px;
+    }
+  }
+}
+
+@-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/ShowDataDashboard-Field/index.js

@@ -0,0 +1,32 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import styles from './ShowDataDashboard-Field.module.scss'
+import cn from 'classnames'
+
+const ShowDataDashboardField = ({ onUpdateInput, value }) => {
+  return (
+    <>
+      <div className={styles.row}>
+        <div className={cn(styles.field, styles.col1)}>
+          <label htmlFor='challengeName'>Show Data Dashboard :</label>
+        </div>
+        <div className={cn(styles.field, styles.col2)}>
+          <input
+            type='checkbox'
+            label='Show data dashboard'
+            onChange={(e) => onUpdateInput('show_data_dashboard', e.target.checked)}
+            checked={value === 'true' || value === true}
+            readOnly={false}
+          />
+        </div>
+      </div>
+    </>
+  )
+}
+
+ShowDataDashboardField.propTypes = {
+  onUpdateInput: PropTypes.func.isRequired,
+  value: PropTypes.any.isRequired
+}
+
+export default ShowDataDashboardField

src/components/ChallengeEditor/index.js

@@ -20,6 +20,7 @@ import {
   MESSAGE,
   COMMUNITY_APP_URL,
   DES_TRACK_ID,
+  DS_TRACK_ID,
   CHALLENGE_TYPE_ID,
   REVIEW_TYPES,
   MILESTONE_STATUS,
@@ -33,6 +34,7 @@ import TypeField from './Type-Field'
 import RoundTypeField from './RoundType-Field'
 import ChallengeTypeField from './ChallengeType-Field'
 import ChallengeNameField from './ChallengeName-Field'
+import ShowDataDashboardField from './ShowDataDashboard-Field'
 import CopilotField from './Copilot-Field'
 import ReviewTypeField from './ReviewType-Field'
 import TermsField from './Terms-Field'
@@ -91,7 +93,13 @@ class ChallengeEditor extends Component {
       showDesignChallengeWarningModel: false,
       hasValidationErrors: false,
       challenge: {
-        ...dropdowns['newChallenge']
+        ...dropdowns['newChallenge'],
+        metadata: [
+          {
+            'name': 'show_data_dashboard',
+            'value': true
+          }
+        ]
       },
       draftChallenge: { data: { id: null } },
       currentTemplate: null,
@@ -949,9 +957,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, challengeMetadata } } = this.state
     const { timelineTemplates } = metadata
     const isDesignChallenge = trackId === DES_TRACK_ID
+    const isDataScienceChallenge = trackId === DS_TRACK_ID
 
     // indicate that creating process has started
     this.setState({ isSaving: true })
@@ -1009,6 +1018,9 @@ class ChallengeEditor extends Component {
         newChallenge.discussions = discussions
       }
     }
+    if (isDataScienceChallenge) {
+      newChallenge.metadata = challengeMetadata
+    }
     try {
       const action = await createChallenge(newChallenge, projectDetail.id)
       if (isTask) {
@@ -1548,6 +1560,9 @@ class ChallengeEditor extends Component {
     const showTimeline = false // disables the timeline for time being https://github.com/topcoder-platform/challenge-engine-ui/issues/706
     const copilotResources = metadata.members || challengeResources
     const isDesignChallenge = challenge.trackId === DES_TRACK_ID
+    const isDataScienceChallenge = challenge.trackId === DS_TRACK_ID
+    console.log(_.find(challenge.metadata, { name: 'show_data_dashboard' }))
+    const showDataDashboard = _.find(challenge.metadata, { name: 'show_data_dashboard' })
     const isChallengeType = challenge.typeId === CHALLENGE_TYPE_ID
     const showRoundType = isDesignChallenge && isChallengeType
     const showCheckpointPrizes = challenge.timelineTemplateId === MULTI_ROUND_CHALLENGE_TEMPLATE_ID
@@ -1567,6 +1582,7 @@ class ChallengeEditor extends Component {
               )
             }
             <ChallengeNameField challenge={challenge} onUpdateInput={this.onUpdateInput} />
+            {isDataScienceChallenge && <ShowDataDashboardField value={showDataDashboard.value} onUpdateInput={this.onUpdateMetadata} />}
             {projectDetail.version === 'v4' && <MilestoneField milestones={activeProjectMilestones} onUpdateSelect={this.onUpdateSelect} projectId={projectDetail.id} selectedMilestoneId={selectedMilestoneId} />}
             {useTask && (<DiscussionField hasForum={hasForum} toggleForum={this.toggleForumOnCreate} />)}
           </div>