Merge branch 'cf-jan-2021' into issue-1007

Author: dashu-baba

README.md

@@ -39,8 +39,6 @@ npm install
 
 1. copy the environment file in docs/dev.env to /.env
 
-1. add `127.0.0.1 local.topcoder-dev.com` to your /etc/hosts file
-
 1. If you are using local instances of the API's, change the DEV_API_HOSTNAME in configs/constants/development.js to match your local api endpoint.
     - For example change it to 'http://localhost:3000/',
 
@@ -50,7 +48,7 @@ npm install
 npm run dev
 ```
 
-You can access the app from [http://local.topcoder-dev.com:3001/](http://local.topcoder-dev.com:3001/)
+You can access the app from [http://localhost:3000/](http://localhost:3000/)
 
 The page will reload if you make edits.
 

config/constants/development.js

@@ -7,7 +7,6 @@ module.exports = {
   COMMUNITY_APP_URL: `https://www.${DOMAIN}`,
   MEMBER_API_URL: `${DEV_API_HOSTNAME}/v4/members`,
   MEMBER_API_V3_URL: `${DEV_API_HOSTNAME}/v3/members`,
-  DEV_APP_URL: `http://local.${DOMAIN}`,
   CHALLENGE_API_URL: `${DEV_API_HOSTNAME}/v5/challenges`,
   CHALLENGE_TIMELINE_TEMPLATES_URL: `${DEV_API_HOSTNAME}/v5/timeline-templates`,
   CHALLENGE_TYPES_URL: `${DEV_API_HOSTNAME}/v5/challenge-types`,

config/constants/production.js

@@ -7,7 +7,6 @@ module.exports = {
   COMMUNITY_APP_URL: `https://www.${DOMAIN}`,
   MEMBER_API_URL: `${PROD_API_HOSTNAME}/v4/members`,
   MEMBER_API_V3_URL: `${PROD_API_HOSTNAME}/v3/members`,
-  DEV_APP_URL: `https://submission-review.${DOMAIN}`,
   CHALLENGE_API_URL: `${PROD_API_HOSTNAME}/v5/challenges`,
   CHALLENGE_TIMELINE_TEMPLATES_URL: `${PROD_API_HOSTNAME}/v5/timeline-templates`,
   CHALLENGE_TYPES_URL: `${PROD_API_HOSTNAME}/v5/challenge-types`,

public/favicon.ico

@@ -99,7 +99,7 @@ checkBrowsers(paths.appPath, isInteractive)
         clearConsole()
       }
       console.log(chalk.cyan('Starting the development server...\n'))
-      openBrowser(constants.DEV_APP_URL ? `${constants.DEV_APP_URL}:${process.env.PORT || 3000}` : urls.localUrlForBrowser)
+      openBrowser(urls.localUrlForBrowser)
     })
 
     const SIGNALS = ['SIGINT', 'SIGTERM']

scripts/start.js

@@ -13,8 +13,10 @@ import {
   fetchResourceRoles,
   fetchChallengeTimelines,
   fetchChallengeTracks,
+  fetchGroupDetail,
   updateChallenge,
   patchChallenge,
+  deleteChallenge as deleteChallengeAPI,
   createChallenge as createChallengeAPI,
   createResource as createResourceAPI,
   deleteResource as deleteResourceAPI
@@ -38,6 +40,9 @@ import {
   CREATE_CHALLENGE_PENDING,
   CREATE_CHALLENGE_SUCCESS,
   CREATE_CHALLENGE_FAILURE,
+  DELETE_CHALLENGE_PENDING,
+  DELETE_CHALLENGE_SUCCESS,
+  DELETE_CHALLENGE_FAILURE,
   LOAD_CHALLENGE_RESOURCES
 } from '../config/constants'
 import { loadProject } from './projects'
@@ -182,6 +187,14 @@ export function loadChallengeDetails (projectId, challengeId) {
   }
 }
 
+/**
+ * Loads group details
+ */
+export function loadGroupDetails (groupIds) {
+  const promiseAll = groupIds.map(id => fetchGroupDetail(id))
+  return Promise.all(promiseAll)
+}
+
 /**
  * Update challenge details
  *
@@ -267,6 +280,26 @@ export function partiallyUpdateChallengeDetails (challengeId, partialChallengeDe
   }
 }
 
+export function deleteChallenge (challengeId) {
+  return async (dispatch) => {
+    dispatch({
+      type: DELETE_CHALLENGE_PENDING
+    })
+
+    return deleteChallengeAPI(challengeId).then((challenge) => {
+      return dispatch({
+        type: DELETE_CHALLENGE_SUCCESS,
+        challengeDetails: challenge
+      })
+    }).catch((error) => {
+      dispatch({
+        type: DELETE_CHALLENGE_FAILURE
+      })
+      throw error
+    })
+  }
+}
+
 export function loadTimelineTemplates () {
   return async (dispatch) => {
     const timelineTemplates = await fetchTimelineTemplates()

src/actions/challenges.js

@@ -45,5 +45,10 @@
   .readOnlyValue {
     margin-bottom: 0.5rem; // the same like `label` to be aligned
   }
+
+  .assignSelfField {
+    margin-left: 20px;
+    padding-top: 6px;
+  }
 }
 

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

@@ -7,12 +7,13 @@ import cn from 'classnames'
 import styles from './AssignedMember-Field.module.scss'
 import SelectUserAutocomplete from '../../SelectUserAutocomplete'
 
-const AssignedMemberField = ({ challenge, onChange, assignedMemberDetails, readOnly }) => {
+const AssignedMemberField = ({ challenge, onAssignSelf, onChange, assignedMemberDetails, readOnly }) => {
   const value = assignedMemberDetails ? {
     // if we know assigned member details, then show user `handle`, otherwise fallback to `userId`
     label: assignedMemberDetails.handle,
     value: assignedMemberDetails.userId + ''
   } : null
+
   return (
     <div className={styles.row}>
       <div className={cn(styles.field, styles.col1)}>
@@ -28,6 +29,15 @@ const AssignedMemberField = ({ challenge, onChange, assignedMemberDetails, readO
           />
         )}
       </div>
+      {
+        !readOnly &&
+          <div className={styles.assignSelfField}>
+            <a href='#' onClick={(e) => {
+              e.preventDefault()
+              onAssignSelf()
+            }}>Assign to me</a>
+          </div>
+      }
     </div>
   )
 }
@@ -41,7 +51,8 @@ AssignedMemberField.propTypes = {
   challenge: PropTypes.shape().isRequired,
   onChange: PropTypes.func,
   assignedMemberDetails: PropTypes.shape(),
-  readOnly: PropTypes.bool
+  readOnly: PropTypes.bool,
+  onAssignSelf: PropTypes.func
 }
 
 export default AssignedMemberField

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

@@ -241,7 +241,7 @@
 .actionButtons {
   position: absolute;
   top: 30px;
-  a {
+  a,button {
     height: 40px;
   }
 }
@@ -251,7 +251,13 @@
 }
 
 .actionButtonsRight {
+  display: flex;
+  align-items: center;
   right: 20px;
+
+  button {
+    margin-right: 20px;
+  }
 }
 
 .buttonContainer {

src/components/ChallengeEditor/ChallengeEditor.module.scss

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import _ from 'lodash'
 import { Helmet } from 'react-helmet'
 import PropTypes from 'prop-types'
@@ -21,6 +21,7 @@ import PhaseInput from '../../PhaseInput'
 import LegacyLinks from '../../LegacyLinks'
 import AssignedMemberField from '../AssignedMember-Field'
 import { getResourceRoleByName } from '../../../util/tc'
+import { loadGroupDetails } from '../../../actions/challenges'
 import Tooltip from '../../Tooltip'
 import { MESSAGE, REVIEW_TYPES } from '../../../config/constants'
 
@@ -40,6 +41,18 @@ const ChallengeView = ({
   const challengeTrack = _.find(metadata.challengeTracks, { id: challenge.trackId })
 
   const [openAdvanceSettings, setOpenAdvanceSettings] = useState(false)
+  const [groups, setGroups] = useState('')
+
+  useEffect(() => {
+    if (challenge.groups && challenge.groups.length > 0) {
+      loadGroupDetails(challenge.groups).then(res => {
+        const groups = _.map(res, 'name').join(', ')
+        setGroups(groups)
+      })
+    } else {
+      setGroups('')
+    }
+  }, [challenge.groups])
 
   const getResourceFromProps = (name) => {
     const { resourceRoles } = metadata
@@ -167,7 +180,7 @@ const ChallengeView = ({
             </div>
             {openAdvanceSettings && (<div className={cn(styles.row, styles.topRow)}>
               <div className={styles.col}>
-                <span><span className={styles.fieldTitle}>Groups:</span> {challenge.groups ? challenge.groups.join(', ') : ''}</span>
+                <span><span className={styles.fieldTitle}>Groups:</span> {groups}</span>
               </div>
             </div>)}
             {

src/components/ChallengeEditor/ChallengeView/index.js

@@ -68,6 +68,7 @@ class ChallengeEditor extends Component {
     super(props)
     this.state = {
       isLaunch: false,
+      isDeleteLaunch: false,
       isConfirm: false,
       isClose: false,
       isOpenAdvanceSettings: false,
@@ -90,6 +91,7 @@ class ChallengeEditor extends Component {
     this.onUpdateOthers = this.onUpdateOthers.bind(this)
     this.onUpdateCheckbox = this.onUpdateCheckbox.bind(this)
     this.onUpdateAssignedMember = this.onUpdateAssignedMember.bind(this)
+    this.onAssignSelf = this.onAssignSelf.bind(this)
     this.addFileType = this.addFileType.bind(this)
     this.removeFileType = this.removeFileType.bind(this)
     this.updateFileTypesMetadata = this.updateFileTypesMetadata.bind(this)
@@ -121,6 +123,8 @@ class ChallengeEditor extends Component {
     this.getAvailableTimelineTemplates = this.getAvailableTimelineTemplates.bind(this)
     this.autoUpdateChallengeThrottled = _.throttle(this.validateAndAutoUpdateChallenge.bind(this), 3000) // 3s
     this.updateResource = this.updateResource.bind(this)
+    this.onDeleteChallenge = this.onDeleteChallenge.bind(this)
+    this.deleteModalLaunch = this.deleteModalLaunch.bind(this)
   }
 
   componentDidMount () {
@@ -131,6 +135,27 @@ class ChallengeEditor extends Component {
     this.resetChallengeData(this.setState.bind(this))
   }
 
+  deleteModalLaunch () {
+    if (!this.state.isDeleteLaunch) {
+      this.setState({ isDeleteLaunch: true })
+    }
+  }
+
+  async onDeleteChallenge () {
+    const { deleteChallenge, challengeDetails, history } = this.props
+    try {
+      this.setState({ isSaving: true })
+      // Call action to delete the challenge
+      await deleteChallenge(challengeDetails.id)
+      this.setState({ isSaving: false })
+      this.resetModal()
+      history.push(`/projects/${challengeDetails.projectId}/challenges`)
+    } catch (e) {
+      const error = _.get(e, 'response.data.message', 'Unable to Delete the challenge')
+      this.setState({ isSaving: false, error })
+    }
+  }
+
   /**
    * Validates challenge and if its valid calling an autosave method
    *
@@ -206,7 +231,7 @@ class ChallengeEditor extends Component {
   }
 
   resetModal () {
-    this.setState({ isLoading: false, isConfirm: false, isLaunch: false, error: null, isCloseTask: false })
+    this.setState({ isLoading: false, isConfirm: false, isLaunch: false, error: null, isCloseTask: false, isDeleteLaunch: false })
   }
 
   /**
@@ -335,6 +360,22 @@ class ChallengeEditor extends Component {
     })
   }
 
+  /**
+   * Update Assigned Member to Current User
+   */
+  onAssignSelf () {
+    const { loggedInUser } = this.props
+
+    const assignedMemberDetails = {
+      handle: loggedInUser.handle,
+      userId: loggedInUser.userId
+    }
+
+    this.setState({
+      assignedMemberDetails
+    })
+  }
+
   /**
    * Update Single Select
    * @param option The select option
@@ -1336,6 +1377,7 @@ class ChallengeEditor extends Component {
                 challenge={challenge}
                 onChange={this.onUpdateAssignedMember}
                 assignedMemberDetails={assignedMemberDetails}
+                onAssignSelf={this.onAssignSelf}
               />
             )}
             <CopilotField challenge={challenge} copilots={metadata.members} onUpdateOthers={this.onUpdateOthers} />
@@ -1383,6 +1425,19 @@ class ChallengeEditor extends Component {
                 />
               </div>
             )}
+            {
+              this.state.isDeleteLaunch && !this.state.isConfirm && (
+                <ConfirmationModal
+                  title='Confirm Delete'
+                  message={`Do you want to delete "${challenge.name}"?`}
+                  theme={theme}
+                  isProcessing={isSaving}
+                  errorMessage={this.state.error}
+                  onCancel={this.resetModal}
+                  onConfirm={this.onDeleteChallenge}
+                />
+              )
+            }
             { showTimeline && (
               <ChallengeScheduleField
                 templates={this.getAvailableTimelineTemplates()}
@@ -1436,6 +1491,7 @@ class ChallengeEditor extends Component {
         </div>
         <div className={styles.title}>{getTitle(isNew)}</div>
         <div className={cn(styles.actionButtons, styles.actionButtonsRight)}>
+          {this.props.challengeDetails.status === 'New' && <PrimaryButton text={'Delete'} type={'danger'} onClick={this.deleteModalLaunch} />}
           <PrimaryButton text={'Back'} type={'info'} submit link={`/projects/${projectDetail.id}/challenges`} />
         </div>
         <div className={styles.textRequired}>* Required</div>
@@ -1479,7 +1535,9 @@ ChallengeEditor.propTypes = {
   updateChallengeDetails: PropTypes.func.isRequired,
   createChallenge: PropTypes.func,
   replaceResourceInRole: PropTypes.func,
-  partiallyUpdateChallengeDetails: PropTypes.func.isRequired
+  partiallyUpdateChallengeDetails: PropTypes.func.isRequired,
+  deleteChallenge: PropTypes.func.isRequired,
+  loggedInUser: PropTypes.shape().isRequired
 }
 
 export default withRouter(ChallengeEditor)

src/components/ChallengeEditor/index.js

@@ -257,6 +257,31 @@
   }
 }
 
+.deleteButton {
+  height: 22px;
+  width: 86px;
+  border-radius: 11.5px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: $tc-red;
+  border-color: $tc-red;
+  cursor: pointer;
+
+  span {
+    @include roboto;
+
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 17px;
+    color: $white;
+    text-transform: capitalize;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}
+
 .icon {
   vertical-align: bottom;
 }