Merge pull request #941 from topcoder-platform/develop

Prod update - Activate button on View page

Author: vikasrohit

config/constants/development.js

@@ -25,7 +25,7 @@ module.exports = {
   DIRECT_PROJECT_URL: `https://www.${DOMAIN}/direct`,
   ONLINE_REVIEW_URL: `https://software.${DOMAIN}`,
   DEFAULT_TERM_UUID: '64d6e249-d7a5-4591-8ff5-e872f8a051f9', // Terms & Conditions of Use at TopCoder
-  DEFAULT_NDA_UUID: '77f558c1-56fb-427c-b974-61ea0a060ca7', // Appirio NDA v2.0
+  DEFAULT_NDA_UUID: 'e5811a7b-43d1-407a-a064-69e5015b4900', // NDA v3.0
   SUBMITTER_ROLE_UUID: '732339e7-8e30-49d7-9198-cccf9451e221',
   DEV_TRACK_ID: '9b6fc876-f4d9-4ccb-9dfd-419247628825',
   DES_TRACK_ID: '5fa04185-041f-49a6-bfd1-fe82533cd6c8',

src/components/ChallengeEditor/ChallengeView/ChallengeView.module.scss

@@ -245,7 +245,8 @@
 .actionButtonsRight {
   right: 20px;
 
-  button:not(:last-child),
+  
+  .button:not(:last-child),
   a:not(:last-child) {
     margin-right: 20px;
   }

src/components/ChallengeEditor/ChallengeView/index.js

@@ -21,6 +21,7 @@ import PhaseInput from '../../PhaseInput'
 import LegacyLinks from '../../LegacyLinks'
 import AssignedMemberField from '../AssignedMember-Field'
 import { getResourceRoleByName } from '../../../util/tc'
+import Tooltip from '../../Tooltip'
 
 const ChallengeView = ({
   projectDetail,
@@ -31,7 +32,8 @@ const ChallengeView = ({
   isLoading,
   challengeId,
   assignedMemberDetails,
-  enableEdit }) => {
+  enableEdit,
+  onLaunchChallenge }) => {
   const selectedType = _.find(metadata.challengeTypes, { id: challenge.typeId })
   const challengeTrack = _.find(metadata.challengeTracks, { id: challenge.trackId })
 
@@ -70,6 +72,20 @@ const ChallengeView = ({
       </div>
       <div className={styles.title}>View Details</div>
       <div className={cn(styles.actionButtons, styles.button, styles.actionButtonsRight)}>
+        {
+          challenge.status === 'Draft' && (
+            <div className={styles.button}>
+              {challenge.legacyId ? (
+                <PrimaryButton text={'Launch'} type={'info'} onClick={onLaunchChallenge} />
+              ) : (
+                <Tooltip content='Legacy project is not yet created'>
+                  {/* Don't disable button for real inside tooltip, otherwise mouseEnter/Leave events work not good */}
+                  <PrimaryButton text={'Launch'} type={'disabled'} />
+                </Tooltip>
+              )}
+            </div>
+          )
+        }
         { enableEdit && <PrimaryButton text={'Edit'} type={'info'} submit link={`./edit`} /> }
         <PrimaryButton text={'Back'} type={'info'} submit link={`..`} />
       </div>
@@ -218,7 +234,8 @@ ChallengeView.propTypes = {
   challengeId: PropTypes.string.isRequired,
   challengeResources: PropTypes.arrayOf(PropTypes.object),
   assignedMemberDetails: PropTypes.shape(),
-  enableEdit: PropTypes.bool
+  enableEdit: PropTypes.bool,
+  onLaunchChallenge: PropTypes.func
 }
 
 export default withRouter(ChallengeView)

src/containers/ChallengeEditor/ChallengeEditor.module.scss

@@ -4,4 +4,25 @@
 .errorContainer {
   color: $red;
   padding: 10px;
+}
+
+.modalContainer {
+  padding: 0;
+  position: fixed;
+  overflow: auto;
+  z-index: 10000;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  box-sizing: border-box;
+  width: auto;
+  max-width: none;
+  transform: none;
+  background: transparent;
+  color: $text-color;
+  opacity: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }

src/containers/ChallengeEditor/index.js

@@ -30,12 +30,24 @@ import {
 
 import { connect } from 'react-redux'
 import { SUBMITTER_ROLE_UUID } from '../../config/constants'
+import { patchChallenge } from '../../services/challenges'
+import ConfirmationModal from '../../components/Modal/ConfirmationModal'
+import AlertModal from '../../components/Modal/AlertModal'
+
+const theme = {
+  container: styles.modalContainer
+}
 
 class ChallengeEditor extends Component {
   constructor (props) {
     super(props)
     const mountedWithCreatePage = props.match.path.endsWith('/new')
-    this.state = { mountedWithCreatePage }
+    this.state = { mountedWithCreatePage, isLaunching: false, showSuccessModal: false, showLaunchModal: false }
+
+    this.onLaunchChallenge = this.onLaunchChallenge.bind(this)
+    this.activateChallenge = this.activateChallenge.bind(this)
+    this.closeLaunchModal = this.closeLaunchModal.bind(this)
+    this.closeSuccessModal = this.closeSuccessModal.bind(this)
   }
   componentDidMount () {
     const {
@@ -108,6 +120,31 @@ class ChallengeEditor extends Component {
     return _.some(userResourceRoles, urr => urr.fullWriteAccess && urr.isActive)
   }
 
+  onLaunchChallenge () {
+    this.setState({ showLaunchModal: true })
+  }
+
+  closeLaunchModal () {
+    this.setState({ showLaunchModal: false })
+  }
+
+  closeSuccessModal () {
+    this.setState({ showSuccessModal: false })
+  }
+
+  async activateChallenge () {
+    if (this.state.isLaunching) return
+    const { challengeDetails } = this.props
+    try {
+      this.setState({ isLaunching: true })
+      await patchChallenge(challengeDetails.id, { status: 'Active' })
+      this.setState({ isLaunching: false, showLaunchModal: false, showSuccessModal: true })
+    } catch (e) {
+      const error = _.get(e, 'response.data.message', 'Unable to activate the challenge')
+      this.setState({ isLaunching: false, showLaunchModal: false, launchError: error })
+    }
+  }
+
   render () {
     const {
       match,
@@ -128,7 +165,7 @@ class ChallengeEditor extends Component {
       replaceResourceInRole
       // members
     } = this.props
-    const { mountedWithCreatePage } = this.state
+    const { mountedWithCreatePage, isLaunching, showLaunchModal, showSuccessModal } = this.state
     if (isProjectLoading || isLoading) return <Loader />
     const challengeId = _.get(match.params, 'challengeId', null)
     if (challengeId && (!challengeDetails || !challengeDetails.id)) {
@@ -144,7 +181,26 @@ class ChallengeEditor extends Component {
     }
     const enableEdit = this.isEditable()
     const isCreatePage = this.props.match.path.endsWith('/new')
+
+    const activateModal = <ConfirmationModal
+      title='Confirm Launch'
+      message={`Do you want to launch "${challengeDetails.name}"?`}
+      theme={theme}
+      isProcessing={isLaunching}
+      errorMessage={this.state.launchError}
+      onCancel={this.closeLaunchModal}
+      onConfirm={this.activateChallenge}
+    />
+    const successModal = <AlertModal
+      title='Success'
+      message='Challenge is activated successfully'
+      theme={theme}
+      closeText='Ok'
+      onClose={this.closeSuccessModal}
+    />
     return <div>
+      { showLaunchModal && activateModal }
+      { showSuccessModal && successModal }
       <Route
         exact
         path={this.props.match.path}
@@ -212,6 +268,7 @@ class ChallengeEditor extends Component {
             challengeId={challengeId}
             assignedMemberDetails={assignedMemberDetails}
             enableEdit={enableEdit}
+            onLaunchChallenge={this.onLaunchChallenge}
           />
         ))
         } />