Add a field to set the legacy.useSchedulingAPI property on a challenge

Author: ThomasKranitsas

src/components/ChallengeEditor/ChallengeView/index.js

@@ -9,6 +9,7 @@ import xss from 'xss'
 import { PrimaryButton } from '../../Buttons'
 import Track from '../../Track'
 import NDAField from '../NDAField'
+import UseSchedulingAPIField from '../UseSchedulingAPIField'
 import CopilotField from '../Copilot-Field'
 import ChallengeScheduleField from '../ChallengeSchedule-Field'
 import TextEditorField from '../TextEditor-Field'
@@ -184,6 +185,7 @@ const ChallengeView = ({
                 <span><span className={styles.fieldTitle}>Groups:</span> {groups}</span>
               </div>
             </div>)}
+            {openAdvanceSettings && <UseSchedulingAPIField challenge={challenge} readOnly />}
             {
               <div className={styles.PhaseRow}>
                 <PhaseInput

src/components/ChallengeEditor/UseSchedulingAPIField/UseSchedulingAPIField.module.scss

@@ -0,0 +1,84 @@
+@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;
+
+  .tcCheckbox {
+    @include tc-checkbox;
+
+    height: 18px;
+    width: 210px;
+    margin: 0;
+    padding: 0;
+    vertical-align: bottom;
+    position: relative;
+    display: inline-block;
+
+    input[type='checkbox'] {
+      display: none;
+    }
+
+    label {
+      @include roboto-light();
+
+      line-height: 17px;
+      font-weight: 300;
+      cursor: pointer;
+      position: absolute;
+      display: inline-block;
+      width: 14px;
+      height: 14px;
+      top: 0;
+      left: 0;
+      border: none;
+      box-shadow: none;
+      background: $tc-gray-30;
+      transition: all 0.15s ease-in-out;
+
+
+      &.readOnly {
+        cursor: auto;
+      }
+
+      &::after {
+        opacity: 0;
+        content: '';
+        position: absolute;
+        width: 9px;
+        height: 5px;
+        background: transparent;
+        top: 2px;
+        left: 2px;
+        border-top: none;
+        border-right: none;
+        transform: rotate(-45deg);
+        transition: all 0.15s ease-in-out;
+      }
+
+      &:hover::after {
+        opacity: 0.3;
+      }
+      &:hover:read-only::after {
+        opacity: 0;
+      }
+
+      div {
+        margin-left: 24px;
+        width: 300px;
+      }
+    }
+
+    input[type='checkbox']:checked ~ label {
+      background: $tc-blue-20;
+    }
+
+    input[type='checkbox']:checked + label::after {
+      border-color: $white;
+    }
+  }
+}

src/components/ChallengeEditor/UseSchedulingAPIField/index.js

@@ -0,0 +1,39 @@
+import _ from 'lodash'
+import React from 'react'
+import PropTypes from 'prop-types'
+import styles from './UseSchedulingAPIField.module.scss'
+
+const UseSchedulingAPIField = ({ challenge, toggleUseSchedulingAPI, readOnly }) => {
+  const useSchedulingAPI = _.get(challenge, 'legacy.useSchedulingAPI', false)
+  return (
+    <div className={styles.row}>
+      <div className={styles.tcCheckbox}>
+        <input
+          name='useSchedulingAPI'
+          type='checkbox'
+          id='useSchedulingAPI'
+          checked={useSchedulingAPI}
+          onChange={toggleUseSchedulingAPI}
+          readOnly={readOnly}
+        />
+        <label htmlFor='useSchedulingAPI' className={readOnly ? styles.readOnly : ''}>
+          <div>Use Scheduling API</div>
+          <input type='hidden' />
+        </label>
+      </div>
+    </div>
+  )
+}
+
+UseSchedulingAPIField.defaultProps = {
+  toggleUseSchedulingAPI: () => {},
+  readOnly: false
+}
+
+UseSchedulingAPIField.propTypes = {
+  challenge: PropTypes.shape().isRequired,
+  toggleUseSchedulingAPI: PropTypes.func,
+  readOnly: PropTypes.bool
+}
+
+export default UseSchedulingAPIField

src/components/ChallengeEditor/index.js

@@ -49,6 +49,7 @@ import PhaseInput from '../PhaseInput'
 import LegacyLinks from '../LegacyLinks'
 import AssignedMemberField from './AssignedMember-Field'
 import Tooltip from '../Tooltip'
+import UseSchedulingAPIField from './UseSchedulingAPIField'
 import { getResourceRoleByName } from '../../util/tc'
 
 const theme = {
@@ -97,6 +98,7 @@ class ChallengeEditor extends Component {
     this.updateFileTypesMetadata = this.updateFileTypesMetadata.bind(this)
     this.toggleAdvanceSettings = this.toggleAdvanceSettings.bind(this)
     this.toggleNdaRequire = this.toggleNdaRequire.bind(this)
+    this.toggleUseSchedulingAPI = this.toggleUseSchedulingAPI.bind(this)
     this.removePhase = this.removePhase.bind(this)
     this.resetPhase = this.resetPhase.bind(this)
     this.savePhases = this.savePhases.bind(this)
@@ -593,6 +595,14 @@ class ChallengeEditor extends Component {
     this.setState({ challenge: newChallenge })
   }
 
+  toggleUseSchedulingAPI () {
+    const { challenge } = this.state
+    const newChallenge = { ...challenge }
+    const useSchedulingApi = !_.get(newChallenge, 'legacy.useSchedulingAPI', false)
+    _.set(newChallenge, 'legacy.useSchedulingAPI', useSchedulingApi)
+    this.setState({ challenge: newChallenge })
+  }
+
   /**
    * Remove Phase from challenge Phases list
    * @param index
@@ -1395,6 +1405,7 @@ class ChallengeEditor extends Component {
                 {/* remove terms field and use default term */}
                 {false && (<TermsField terms={metadata.challengeTerms} challenge={challenge} onUpdateMultiSelect={this.onUpdateMultiSelect} />)}
                 <GroupsField onUpdateMultiSelect={this.onUpdateMultiSelect} challenge={challenge} />
+                <UseSchedulingAPIField challenge={challenge} toggleUseSchedulingAPI={this.toggleUseSchedulingAPI} />
               </React.Fragment>
             )}
             {!isTask && (