Merge pull request #1247 from topcoder-platform/develop

Prod release - Forum config during challenge creation

Author: vikasrohit

.circleci/config.yml

@@ -150,7 +150,7 @@ workflows:
           context : org-global
           filters: &filters-dev
             branches:
-              only: ['develop', 'feature/linking-challenge-milestone']
+              only: ['develop', 'feature/forum-for-task']
 
       # Production builds are exectuted only on tagged commits to the
       # master branch.

config/constants/development.js

@@ -35,7 +35,7 @@ module.exports = {
   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'],
+  CREATE_FORUM_TYPE_IDS: ['927abff4-7af9-4145-8ba1-577c16e64e2e', 'dc876fa4-ef2d-4eee-b701-b555fcc6544c', 'ecd58c69-238f-43a4-a4bb-d172719b9f31'],
   FILE_PICKER_API_KEY: process.env.FILE_PICKER_API_KEY,
   FILE_PICKER_CONTAINER_NAME: 'tc-challenge-v5-dev',
   FILE_PICKER_REGION: 'us-east-1',

config/constants/production.js

@@ -35,7 +35,7 @@ module.exports = {
   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'],
+  CREATE_FORUM_TYPE_IDS: ['927abff4-7af9-4145-8ba1-577c16e64e2e', 'dc876fa4-ef2d-4eee-b701-b555fcc6544c', 'ecd58c69-238f-43a4-a4bb-d172719b9f31'],
   FILE_PICKER_API_KEY: process.env.FILE_PICKER_API_KEY,
   FILE_PICKER_CONTAINER_NAME: 'tc-challenge-v5-prod',
   FILE_PICKER_REGION: 'us-east-1',

src/components/ChallengeEditor/ChallengeViewTabs/index.js

@@ -10,6 +10,7 @@ import _ from 'lodash'
 import ChallengeViewComponent from '../ChallengeView'
 import { PrimaryButton } from '../../Buttons'
 import LegacyLinks from '../../LegacyLinks'
+import ForumLink from '../../ForumLink'
 import Registrants from '../Registrants'
 import Submissions from '../Submissions'
 import { getResourceRoleByName } from '../../../util/tc'
@@ -85,17 +86,19 @@ const ChallengeViewTabs = ({
       <div className={styles.topContainer}>
         <div className={styles.leftContainer}>
           <div className={styles.title}>{challenge.name}</div>
-          {!isTask && (
-            <div
-              className={cn(
-                styles.actionButtons,
-                styles.button,
-                styles.actionButtonsLeft
-              )}
-            >
-              <LegacyLinks challenge={challenge} challengeView />
-            </div>
-          )}
+
+          <div
+            className={cn(
+              styles.actionButtons,
+              styles.button,
+              styles.actionButtonsLeft
+            )}
+          >
+            { isTask ? (<ForumLink challenge={challenge} />)
+              : (<LegacyLinks challenge={challenge} challengeView />)
+            }
+          </div>
+
         </div>
         <div
           className={cn(

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

@@ -0,0 +1,178 @@
+@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;
+
+  .fieldTitle {
+    @include roboto-bold();
+    font-size: 16px;
+    line-height: 19px;
+    font-weight: 500;
+    color: $tc-gray-80;
+    margin-right: 10px;
+  }
+
+  .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;
+      margin-bottom: auto;
+      margin-top: auto;
+      padding-top: 10px;
+      white-space: nowrap;
+      display: flex;
+      align-items: center;
+
+      span {
+        color: $tc-red;
+      }
+    }
+
+    &.col2 {
+      align-self: flex-end;
+      width: 80%;
+      margin-bottom: auto;
+      margin-top: auto;
+      display: flex;
+      flex-direction: row;
+      max-width: 600px;
+      min-width: 600px;
+    }
+  }
+
+  .col1 {
+    display: flex;
+    flex-grow: 1;
+    align-items: center;
+    max-width: 0;
+    min-width: 0;
+    margin-right: 0;
+    width: auto;
+    margin-top: 0 !important;
+    margin-bottom: 0 !important;
+    padding-top: 0 !important;
+  }
+
+  .col2 {
+    width: auto;
+
+    .subGroup {
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+
+      .subRow {
+        display: flex;
+        align-items: center;
+        margin-bottom: 18px;
+      }
+
+      .subRow:last-of-type {
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  .tcRadioButton {
+    .tc-radioButton-label {
+      @include roboto-light();
+
+      line-height: 17px;
+      font-weight: 300;
+      margin-left: 21px;
+      user-select: none;
+      cursor: pointer;
+      width: 195px;
+      font-size: 14px;
+      color: #3d3d3d;
+    }
+
+    height: 18px;
+    width: 80px;
+    margin: 0;
+    padding: 0;
+    vertical-align: bottom;
+    position: relative;
+    display: inline-block;
+
+    input[type=radio] {
+      display: none;
+    }
+
+    label {
+      @include roboto-light();
+
+      line-height: 17px;
+      font-weight: 300;
+      cursor: pointer;
+      position: absolute;
+      display: inline-block;
+      width: 16px;
+      height: 16px;
+      border-radius: 8px;
+      top: 0;
+      left: 0;
+      border: none;
+      box-shadow: none;
+      background: $tc-gray-30;
+      transition: all 0.15s ease-in-out;
+
+      &::after {
+        opacity: 0;
+        content: '';
+        position: absolute;
+        width: 8px;
+        height: 8px;
+        background: transparent;
+        top: 4px;
+        left: 4px;
+        border: 4px solid $tc-blue-20;
+        border-radius: 4px;
+        transition: all 0.15s ease-in-out;
+      }
+
+      &:hover::after {
+        opacity: 0.3;
+      }
+
+      div {
+        margin-left: 24px;
+        width: 300px;
+      }
+    }
+
+    input[type=radio]:checked ~ label {
+      background: $tc-blue-20;
+    }
+
+    input[type=radio]:checked + label::after {
+      opacity: 1;
+      border-color: $white;
+    }
+  }
+
+  &.error {
+    color: $tc-red;
+    margin-top: -25px;
+  }
+}

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

@@ -0,0 +1,62 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import cn from 'classnames'
+import styles from './Discussion-Field.module.scss'
+
+const DiscussionField = ({ hasForum, toggleForum, readOnly }) => {
+  console.log('hasForummm ' + hasForum)
+  if (readOnly) {
+    return (
+      <div className={styles.row}>
+        <div className={cn(styles.field, styles.col1, styles.fieldTitle)}>Forum Discussion :</div>
+        <div className={cn(styles.field, styles.col2)}>
+          { hasForum ? 'On' : 'Off' }
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className={styles.row}>
+      <div className={cn(styles.field, styles.col1, styles.fieldTitle)}>Forum Discussion :</div>
+      <div className={cn(styles.field, styles.col2)}>
+        <div className={styles.tcRadioButton}>
+          <input
+            name='forum'
+            type='radio'
+            id='forum-on'
+            checked={hasForum}
+            onChange={toggleForum}
+          />
+          <label className={styles['tc-RadioButton-label']} htmlFor='forum-on'>
+            <div>On</div>
+          </label>
+        </div>
+        <div className={styles.tcRadioButton}>
+          <input
+            name='forum'
+            type='radio'
+            id='forum-off'
+            checked={!hasForum}
+            onChange={toggleForum}
+          />
+          <label className={styles['tc-RadioButton-label']} htmlFor='forum-off'>
+            <div>Off</div>
+          </label>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+DiscussionField.defaultProps = {
+  readOnly: false
+}
+
+DiscussionField.propTypes = {
+  hasForum: PropTypes.bool,
+  toggleForum: PropTypes.func,
+  readOnly: PropTypes.bool
+}
+
+export default DiscussionField

src/components/ChallengeEditor/index.js

@@ -57,6 +57,7 @@ import UseSchedulingAPIField from './UseSchedulingAPIField'
 import { getResourceRoleByName } from '../../util/tc'
 import { isBetaMode } from '../../util/cookie'
 import MilestoneField from './Milestone-Field'
+import DiscussionField from './Discussion-Field'
 
 const theme = {
   container: styles.modalContainer
@@ -78,6 +79,7 @@ class ChallengeEditor extends Component {
       isDeleteLaunch: false,
       isConfirm: false,
       isClose: false,
+      hasForum: false,
       isOpenAdvanceSettings: false,
       isLoading: false,
       isSaving: false,
@@ -135,6 +137,7 @@ class ChallengeEditor extends Component {
     this.updateResource = this.updateResource.bind(this)
     this.onDeleteChallenge = this.onDeleteChallenge.bind(this)
     this.deleteModalLaunch = this.deleteModalLaunch.bind(this)
+    this.toggleForumOnCreate = this.toggleForumOnCreate.bind(this)
   }
 
   componentDidMount () {
@@ -583,6 +586,11 @@ class ChallengeEditor extends Component {
     this.setState({ challenge: newChallenge })
   }
 
+  toggleForumOnCreate () {
+    const { hasForum } = this.state
+    this.setState({ hasForum: !hasForum })
+  }
+
   toggleAdvanceSettings () {
     const { isOpenAdvanceSettings } = this.state
     this.setState({ isOpenAdvanceSettings: !isOpenAdvanceSettings })
@@ -817,7 +825,9 @@ class ChallengeEditor extends Component {
       'terms',
       'prizeSets',
       'winners',
-      'milestoneId'
+      'milestoneId',
+      'discussions',
+      'task'
     ], this.state.challenge)
     const isTask = _.find(metadata.challengeTypes, { id: challenge.typeId, isTask: true })
     challenge.legacy = _.assign(this.state.challenge.legacy, {
@@ -913,9 +923,11 @@ class ChallengeEditor extends Component {
     if (projectDetail.groups) {
       newChallenge.groups.push(...projectDetail.groups)
     }
-    const discussions = this.getDiscussionsConfig(newChallenge)
-    if (discussions) {
-      newChallenge.discussions = discussions
+    if (!isTask || this.state.hasForum) {
+      const discussions = this.getDiscussionsConfig(newChallenge)
+      if (discussions) {
+        newChallenge.discussions = discussions
+      }
     }
     try {
       const action = await createChallenge(newChallenge, projectDetail.id)
@@ -1197,6 +1209,7 @@ class ChallengeEditor extends Component {
       showDesignChallengeWarningModel,
       challenge,
       draftChallenge,
+      hasForum,
       isOpenAdvanceSettings,
       isSaving,
       isCloseTask
@@ -1435,6 +1448,7 @@ class ChallengeEditor extends Component {
         )
       }
     </React.Fragment>
+    const useTask = _.find(metadata.challengeTypes, { id: challenge.typeId, isTask: true })
     const selectedType = _.find(metadata.challengeTypes, { id: challenge.typeId })
     const challengeTrack = _.find(metadata.challengeTracks, { id: challenge.trackId })
     const selectedMilestone = _.find(projectPhases,
@@ -1454,6 +1468,7 @@ class ChallengeEditor extends Component {
             <TypeField types={metadata.challengeTypes} onUpdateSelect={this.onUpdateSelect} challenge={challenge} />
             <ChallengeNameField challenge={challenge} onUpdateInput={this.onUpdateInput} />
             {projectDetail.version === 'v4' && <MilestoneField milestones={activeProjectMilestones} onUpdateSelect={this.onUpdateSelect} projectId={projectDetail.id} selectedMilestoneId={selectedMilestoneId} />}
+            { useTask && (<DiscussionField hasForum={hasForum} toggleForum={this.toggleForumOnCreate} />) }
           </div>
           {showDesignChallengeWarningModel && designChallengeModal}
           { errorContainer }