topcoder-platform · vikasrohit · Oct 6, 2021 · Sep 21, 2021 · Sep 23, 2021 · Sep 24, 2021
diff --git a/config/constants/development.js b/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',

diff --git a/config/constants/production.js b/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',

diff --git a/src/components/ChallengeEditor/ChallengeViewTabs/index.js b/src/components/ChallengeEditor/ChallengeViewTabs/index.js
@@ -85,17 +85,17 @@ 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
+            )}
+          >
+            <LegacyLinks challenge={challenge} challengeView />
+          </div>
+
         </div>
         <div
           className={cn(

diff --git a/src/components/ChallengeEditor/Discussion-Field/Discussion-Field.module.scss b/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;
+  }
+}
diff --git a/src/components/ChallengeEditor/Discussion-Field/index.js b/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
diff --git a/src/components/ChallengeEditor/Forum-Field/Forum-Field.module.scss b/src/components/ChallengeEditor/Forum-Field/Forum-Field.module.scss
@@ -0,0 +1,55 @@
+@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;
+      flex-grow: 1;
+
+      span {
+        color: $tc-red;
+      }
+    }
+
+    &.col2.error {
+      color: $tc-red;
+      margin-top: -25px;
+    }
+    &.col2 {
+      align-self: flex-end;
+      width: 80%;
+      margin-bottom: auto;
+      margin-top: auto;
+      display: flex;
+      flex-direction: row;
+      max-width: 600px;
+      min-width: 600px;
+    }
+  }
+}
diff --git a/src/components/ChallengeEditor/Forum-Field/index.js b/src/components/ChallengeEditor/Forum-Field/index.js
@@ -0,0 +1,48 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import Select from '../../Select'
+import cn from 'classnames'
+import styles from './Forum-Field.module.scss'
+
+const ForumField = ({ types, onSelectForum, challenge, hasForum, disabled }) => {
+  disabled = true
+  if (challenge.name && challenge.typeId) {
+    disabled = false
+  }
+  return (
+    <>
+      <div className={styles.row}>
+        <div className={cn(styles.field, styles.col1)}>
+          <label htmlFor='type'>Forum Dicussion :</label>
+        </div>
+        <div className={cn(styles.field, styles.col2, { [styles.disabled]: disabled })}>
+          <Select
+            name='forum'
+            options={types.map(type => ({ label: type.name, value: type.id }))}
+            isClearable={false}
+            onChange={(e) => onSelectForum(e.value)}
+            isDisabled={disabled}
+            value={hasForum ? { label: 'On', value: true } : { label: 'Off', value: false }}
+          />
+        </div>
+      </div>
+    </>
+  )
+}
+
+ForumField.defaultProps = {
+  types: [{ name: 'On', id: true }, { name: 'Off', id: false }],
+  hasForum: false,
+  disabled: false
+}
+
+ForumField.propTypes = {
+  // currentType: PropTypes.string.isRequired,
+  types: PropTypes.arrayOf(PropTypes.shape()),
+  challenge: PropTypes.shape().isRequired,
+  onSelectForum: PropTypes.func.isRequired,
+  hasForum: PropTypes.bool,
+  disabled: PropTypes.bool
+}
+
+export default ForumField