Add current phase to the challenge table and other fixes

jmgasper · jmgasper · commit 8be49cf2dbb2 · 2023-02-21T07:19:07.000+11:00
#1502 #1496 #1495
diff --git a/src/components/Buttons/PrimaryButton/index.js b/src/components/Buttons/PrimaryButton/index.js
@@ -8,9 +8,26 @@ import styles from './PrimaryButton.module.scss'
 
 const PrimaryButton = React.forwardRef(
   (
-    { type, text, link, onClick, submit, disabled, onMouseEnter, onMouseLeave },
+    { type, text, link, onClick, submit, disabled, onMouseEnter, onMouseLeave, href },
     ref
   ) => {
+    if (!_.isEmpty(href)) {
+      return (
+        <a
+          type={submit ? 'submit' : 'button'}
+          className={cn(styles.container, styles[type])}
+          onClick={submit ? null : onClick}
+          disabled={disabled}
+          onMouseEnter={onMouseEnter}
+          onMouseLeave={onMouseLeave}
+          ref={ref}
+          href={href}
+          target='_blank'
+        >
+          <span>{text}</span>
+        </a>
+      )
+    }
     if (_.isEmpty(link)) {
       return (
         <button
@@ -44,6 +61,7 @@ PrimaryButton.propTypes = {
   type: PropTypes.string.isRequired,
   text: PropTypes.string.isRequired,
   link: PropTypes.string,
+  href: PropTypes.string,
   onClick: PropTypes.func,
   submit: PropTypes.bool,
   disabled: PropTypes.bool,
diff --git a/src/components/ChallengeEditor/Submissions/Submissions.module.scss b/src/components/ChallengeEditor/Submissions/Submissions.module.scss
@@ -23,11 +23,12 @@ $base-unit: 5px;
   margin-right: auto;
 
   .top-title {
-    margin-top: -50px;
+    margin-top: -30px;
+    margin-bottom: 20px;
     text-align: center;
     display: flex;
     justify-content: center;
-    gap: 20px;
+    gap: 40px;
   }
 
   div {
@@ -412,6 +413,10 @@ $base-unit: 5px;
   color: $member-red !important;
 }
 
+.btnManageSubmissions {
+  height: 40px;
+}
+
 .btnDownloadAll {
   text-decoration: none;
   background-color: transparent;
diff --git a/src/components/ChallengeEditor/Submissions/index.js b/src/components/ChallengeEditor/Submissions/index.js
@@ -8,6 +8,7 @@ import PT from 'prop-types'
 import moment from 'moment'
 import _ from 'lodash'
 import { STUDIO_URL, SUBMISSION_REVIEW_APP_URL, getTCMemberURL } from '../../../config/constants'
+import { PrimaryButton } from '../../Buttons'
 import cn from 'classnames'
 import ReactSVG from 'react-svg'
 import {
@@ -306,54 +307,62 @@ class SubmissionsComponent extends React.Component {
     return (
       <div className={cn(styles.container, styles.dev, styles['non-mm'])}>
         <div className={styles['top-title']} >
-          <a href={`${SUBMISSION_REVIEW_APP_URL}/${challenge.legacyId}`} target='_blank'>
-            Manage Submissions
-          </a>
-          <button
-            className={styles.btnDownloadAll}
-            disabled={downloadingAll}
-            onClick={async () => {
-              const reactLib = getTopcoderReactLib()
-              const { getService } = reactLib.services.submissions
-              // download submission
-              this.setState({
-                downloadingAll: true
-              })
-              const submissionsService = getService(token)
-              const allFiles = []
-              let downloadedFile = 0
-              const checkToCompressFiles = () => {
-                if (downloadedFile === sortedSubmissions.length) {
-                  if (downloadedFile > 0) {
-                    compressFiles(allFiles, 'all-submissions.zip', () => {
+
+          <div className={styles.btnManageSubmissions} >
+            <PrimaryButton
+              text='Manage Submissions'
+              type='info'
+              href={`${SUBMISSION_REVIEW_APP_URL}/${challenge.legacyId}`}
+            />
+          </div>
+
+          <div className={styles.btnManageSubmissions} >
+            <PrimaryButton
+              text='Download All'
+              type='info'
+              disabled={downloadingAll}
+              onClick={async () => {
+                const reactLib = getTopcoderReactLib()
+                const { getService } = reactLib.services.submissions
+                // download submission
+                this.setState({
+                  downloadingAll: true
+                })
+                const submissionsService = getService(token)
+                const allFiles = []
+                let downloadedFile = 0
+                const checkToCompressFiles = () => {
+                  if (downloadedFile === sortedSubmissions.length) {
+                    if (downloadedFile > 0) {
+                      compressFiles(allFiles, 'all-submissions.zip', () => {
+                        this.setState({
+                          downloadingAll: false
+                        })
+                      })
+                    } else {
                       this.setState({
                         downloadingAll: false
                       })
-                    })
-                  } else {
-                    this.setState({
-                      downloadingAll: false
-                    })
+                    }
                   }
                 }
-              }
-              checkToCompressFiles()
-              _.forEach(sortedSubmissions, (submission) => {
-                const mmSubmissionId = submission.id
-                submissionsService.downloadSubmission(mmSubmissionId)
-                  .then((blob) => {
-                    const file = new window.File([blob], `submission-${mmSubmissionId}.zip`)
-                    allFiles.push(file)
-                    downloadedFile += 1
-                    checkToCompressFiles()
-                  }).catch(() => {
-                    downloadedFile += 1
-                    checkToCompressFiles()
-                  })
-              })
-            }}>
-            Download All
-          </button>
+                checkToCompressFiles()
+                _.forEach(sortedSubmissions, (submission) => {
+                  const mmSubmissionId = submission.id
+                  submissionsService.downloadSubmission(mmSubmissionId)
+                    .then((blob) => {
+                      const file = new window.File([blob], `submission-${mmSubmissionId}.zip`)
+                      allFiles.push(file)
+                      downloadedFile += 1
+                      checkToCompressFiles()
+                    }).catch(() => {
+                      downloadedFile += 1
+                      checkToCompressFiles()
+                    })
+                })
+              }}
+            />
+          </div>
         </div>
         <div className={styles.head}>
           {!isF2F && !isBugHunt && (
diff --git a/src/components/ChallengeEditor/index.js b/src/components/ChallengeEditor/index.js
@@ -837,10 +837,15 @@ class ChallengeEditor extends Component {
     if (this.state && this.state) {
       const { phases } = this.state.challenge
       let newChallenge = _.cloneDeep(this.state.challenge)
+      const isDesignChallenge = newChallenge.trackId === DES_TRACK_ID
+      const is2RoundChallenge =
+        newChallenge.timelineTemplateId === MULTI_ROUND_CHALLENGE_TEMPLATE_ID
+      const is2RoundDesignChallenge = isDesignChallenge && is2RoundChallenge
+
       for (let index = 0; index < phases.length; ++index) {
         newChallenge.phases[index].isDurationActive =
           moment(newChallenge.phases[index]['scheduledEndDate']).isAfter()
-        if (newChallenge.phases[index].name === 'Submission' || newChallenge.phases[index].name === 'Checkpoint Submission') {
+        if ((newChallenge.phases[index].name === 'Submission' && !is2RoundDesignChallenge) || newChallenge.phases[index].name === 'Checkpoint Submission') {
           newChallenge.phases[index].isStartTimeActive = true
         } else {
           newChallenge.phases[index].isStartTimeActive = index <= 0
diff --git a/src/components/ChallengesComponent/ChallengeCard/index.js b/src/components/ChallengesComponent/ChallengeCard/index.js
@@ -120,7 +120,9 @@ class ChallengeCard extends React.Component {
       isSaving: false,
       isCheckChalengePermission: false,
       hasEditChallengePermission: false,
-      loginUserRoleInProject: ''
+      loginUserRoleInProject: '',
+      currentPhase: this.getCurrentPhase(props.challenge),
+      forumLink: this.getForumLink(props.challenge)
     }
     this.onUpdateConfirm = this.onUpdateConfirm.bind(this)
     this.onUpdateLaunch = this.onUpdateLaunch.bind(this)
@@ -130,6 +132,31 @@ class ChallengeCard extends React.Component {
     this.onLaunchChallenge = this.onLaunchChallenge.bind(this)
   }
 
+  getCurrentPhase (challenge) {
+    return challenge.phases.filter((p) => p.isOpen).map((p) => p.name).join(' / ') || '-'
+  }
+
+  getForumLink (challenge) {
+    const discussionsHaveUrls = (challenge.discussions || []).filter((p) => !!p.url)
+    return discussionsHaveUrls.length ? discussionsHaveUrls[0].url : ''
+  }
+
+  componentDidUpdate (prevProps) {
+    const { challenge } = this.props
+    if (!_.isEqual(challenge.phases, prevProps.challenge.phases)) {
+      // eslint-disable-next-line react/no-did-update-set-state
+      this.setState({
+        currentPhase: this.getCurrentPhase(challenge)
+      })
+    }
+    if (!_.isEqual(challenge.discussions, prevProps.challenge.discussions)) {
+      // eslint-disable-next-line react/no-did-update-set-state
+      this.setState({
+        forumLink: this.getForumLink(challenge)
+      })
+    }
+  }
+
   onUpdateConfirm (value) {
     this.setState({ isConfirm: value })
   }
@@ -202,7 +229,7 @@ class ChallengeCard extends React.Component {
   }
 
   render () {
-    const { isLaunch, isConfirm, isSaving, isDeleteLaunch, isCheckChalengePermission, hasEditChallengePermission } = this.state
+    const { isLaunch, isConfirm, isSaving, isDeleteLaunch, isCheckChalengePermission, hasEditChallengePermission, currentPhase, forumLink } = this.state
     const { setActiveProject, challenge, reloadChallengeList, isBillingAccountExpired, disableHover, getStatusText, challengeTypes, loginUserRoleInProject } = this.props
     const deleteMessage = isCheckChalengePermission
       ? 'Checking permissions...'
@@ -279,6 +306,9 @@ class ChallengeCard extends React.Component {
         <div className={styles.col3}>
           {renderStatus(challenge.status.toUpperCase(), getStatusText)}
         </div>
+        <div className={styles.col3}>
+          {currentPhase}
+        </div>
         {
           !isReadOnly && (
             <div className={styles.col6}>
@@ -292,6 +322,10 @@ class ChallengeCard extends React.Component {
         <div className={styles.col6}>
           <a className={styles.link} href={communityAppUrl} target='_blank'>CA</a>
         </div>
+        <div className={styles.col6}>
+          {forumLink ? (<a className={styles.link} href={forumLink} target='_blank'>CA</a>)
+            : (<a className={styles.link} href='javascript:void(0)'>Forum</a>)}
+        </div>
       </div>
     )
   }
diff --git a/src/components/ChallengesComponent/ChallengeList/index.js b/src/components/ChallengesComponent/ChallengeList/index.js
@@ -764,9 +764,17 @@ class ChallengeList extends Component {
               {this.renderSortIcon('status')}
             </span>
           </div>
+          <div
+            className={cn(styles.col3)}
+          >
+            <span className={styles.filterItem}>
+              Phase
+            </span>
+          </div>
           {!isReadOnly ? (<div className={styles.col6}>&nbsp;</div>) : null}
           <div className={styles.col6}>&nbsp;</div>
           <div className={styles.col6}>&nbsp;</div>
+          <div className={styles.col6}>&nbsp;</div>
         </div>
 
         {isLoading
