Merge pull request #1536 from topcoder-platform/develop

v0.20.8
topcoder-platform · May 26, 2023 · 5e12890 · 5e12890
2 parents afa9d19 + 75c7bdd
commit 5e12890
Show file tree

Hide file tree

Showing 10 changed files with 222 additions and 35 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -36,7 +36,7 @@ install_test_dependency: &install_test_dependency
 install_deploysuite: &install_deploysuite
   name: Installation of install_deploysuite.
   command: |
-    git clone --branch v1.4 https://github.com/topcoder-platform/tc-deploy-scripts ../buildscript
+    git clone --branch v1.4.15 https://github.com/topcoder-platform/tc-deploy-scripts ../buildscript
     cp ./../buildscript/master_deploy.sh .
     cp ./../buildscript/buildenv.sh .
     cp ./../buildscript/awsconfiguration.sh .

diff --git a/src/assets/images/IconSquareDownload.svg b/src/assets/images/IconSquareDownload.svg
diff --git a/src/components/ChallengeEditor/ChallengeView/index.js b/src/components/ChallengeEditor/ChallengeView/index.js
@@ -49,6 +49,7 @@ const ChallengeView = ({
   showRejectChallengeModal,
   loggedInUser
 }) => {
+  const challengeBillingAccount = _.get(challenge, 'billing.billingAccountId')
   const selectedType = _.find(metadata.challengeTypes, { id: challenge.typeId })
   const challengeTrack = _.find(metadata.challengeTracks, { id: challenge.trackId })
   const selectedMilestone = challenge.milestoneId
@@ -196,7 +197,7 @@ const ChallengeView = ({
                   <div className={styles.col}>
                     <span>
                       <span className={styles.fieldTitle}>Billing Account Id:</span>
-                      {projectDetail.billingAccountId}
+                      {challengeBillingAccount}
                     </span>
                     {isBillingAccountExpired && <span className={styles.expiredMessage}>Expired</span>}
                   </div>

diff --git a/src/components/ChallengeEditor/Submissions/Submissions.module.scss b/src/components/ChallengeEditor/Submissions/Submissions.module.scss
@@ -287,6 +287,7 @@ $base-unit: 5px;
       display: flex;
       border-bottom: 1px solid $tc-gray-10;
       background: transparent;
+      gap: 20px;
 
       @include xs-to-sm {
         display: none;
@@ -298,6 +299,7 @@ $base-unit: 5px;
       display: flex;
       border-bottom: 1px solid $tc-gray-10;
       font-size: 15px;
+      gap: 20px;
     }
 
     .col-1 {
@@ -317,28 +319,54 @@ $base-unit: 5px;
     .col-2 {
       // width: 10%;
       display: flex;
-      width: 150px;
+      width: 50px;
       margin-left: 20px;
       justify-content: flex-start;
       display: flex;
+      flex-shrink: 0;
     }
 
     .col-3 {
-      width: 298px;
       display: flex;
-      // width: 26.6%;
+      width: 100px;
+      flex-shrink: 0;
     }
 
     .col-4 {
       display: flex;
-      // width: 26.6%;
-      width: 317px;
+      width: 150px;
+      flex-shrink: 0;
     }
 
     .col-5 {
       display: flex;
-      width: 351px;
-      // width: 26.6%;
+      width: 150px;
+      flex-shrink: 0;
+    }
+
+    .col-6 {
+      display: flex;
+      width: 280px;
+      flex-shrink: 0;
+    }
+
+    .col-7 {
+      display: flex;
+      width: 150px;
+      flex-shrink: 0;
+    }
+
+    .col-8 {
+      display: flex;
+      width: 50px;
+      flex-shrink: 0;
+
+      button {
+        padding: 0;
+        border: none;
+        background-color: transparent;
+        outline: none;
+      }
     }
 
     .handle {
@@ -350,7 +378,9 @@ $base-unit: 5px;
 .submissionsContainer {
   display: flex;
   flex-direction: column;
-  max-width: 966px;
+  max-width: 1100px;
+  width: 100%;
+  overflow: auto;
 }
 
 .tooltip {

diff --git a/src/components/ChallengeEditor/Submissions/index.js b/src/components/ChallengeEditor/Submissions/index.js
@@ -15,7 +15,8 @@ import {
   getRatingLevel,
   sortList,
   getProvisionalScore,
-  getFinalScore
+  getFinalScore,
+  checkManageRoles
 } from '../../../util/tc'
 import {
   getTopcoderReactLib
@@ -27,6 +28,7 @@ import styles from './Submissions.module.scss'
 const assets = require.context('../../../assets/images', false, /svg/)
 const ArrowDown = './arrow-down.svg'
 const Lock = './lock.svg'
+const Download = './IconSquareDownload.svg'
 
 class SubmissionsComponent extends React.Component {
   constructor (props) {
@@ -206,6 +208,7 @@ class SubmissionsComponent extends React.Component {
   render () {
     const { challenge, token } = this.props
     const { checkpoints, track, type, tags } = challenge
+    const haveManagePermission = checkManageRoles(token)
 
     const { field, sort } = this.getSubmissionsSortParam()
     const revertSort = sort === 'desc' ? 'asc' : 'desc'
@@ -306,7 +309,7 @@ class SubmissionsComponent extends React.Component {
 
     return (
       <div className={cn(styles.container, styles.dev, styles['non-mm'])}>
-        <div className={styles['empty-left']} />
+        {haveManagePermission ? (<div className={styles['empty-left']} />) : null}
         <div className={styles.submissionsContainer}>
           <div className={styles.head}>
             {!isF2F && !isBugHunt && (
@@ -393,6 +396,21 @@ class SubmissionsComponent extends React.Component {
                 <ReactSVG path={assets(`${ArrowDown}`)} />
               </div>
             </button>
+            <div
+              className={cn(styles['col-6'])}
+            >
+              <span>Submission ID (UUID)</span>
+            </div>
+            <div
+              className={cn(styles['col-7'])}
+            >
+              <span>Legacy submission ID</span>
+            </div>
+            {haveManagePermission ? (<div
+              className={cn(styles['col-8'])}
+            >
+              <span>Actions</span>
+            </div>) : null}
           </div>
           {sortedSubmissions.map(s => (
             <div
@@ -441,19 +459,40 @@ class SubmissionsComponent extends React.Component {
                     : 'N/A'}
                 </a>
               </div>
+              <div className={styles['col-6']}>
+                {s.id}
+              </div>
+              <div className={styles['col-7']}>
+                {s.legacySubmissionId}
+              </div>
+              {haveManagePermission ? (<div className={styles['col-8']}>
+                <button
+                  onClick={() => {
+                    // download submission
+                    const reactLib = getTopcoderReactLib()
+                    const { getService } = reactLib.services.submissions
+                    const submissionsService = getService(token)
+                    submissionsService.downloadSubmission(s.id)
+                      .then((blob) => {
+                        // eslint-disable-next-line no-undef
+                        const url = window.URL.createObjectURL(new Blob([blob]))
+                        const link = document.createElement('a')
+                        link.href = url
+                        link.setAttribute('download', `${s.legacySubmissionId}.zip`)
+                        document.body.appendChild(link)
+                        link.click()
+                        link.parentNode.removeChild(link)
+                      })
+                  }}
+                >
+                  <ReactSVG path={assets(`${Download}`)} />
+                </button>
+              </div>) : null}
             </div>
           ))}
         </div>
 
-        <div className={styles['top-title']} >
-          <div className={styles.btnManageSubmissions} >
-            <PrimaryButton
-              text='Manage Submissions'
-              type='info'
-              href={`${SUBMISSION_REVIEW_APP_URL}/${challenge.legacyId}`}
-            />
-          </div>
-
+        {haveManagePermission ? (<div className={styles['top-title']} >
           <div className={styles.btnManageSubmissions} >
             <PrimaryButton
               text='Download All'
@@ -486,10 +525,9 @@ class SubmissionsComponent extends React.Component {
                 }
                 checkToCompressFiles()
                 _.forEach(sortedSubmissions, (submission) => {
-                  const mmSubmissionId = submission.id
-                  submissionsService.downloadSubmission(mmSubmissionId)
+                  submissionsService.downloadSubmission(submission.id)
                     .then((blob) => {
-                      const file = new window.File([blob], `submission-${mmSubmissionId}.zip`)
+                      const file = new window.File([blob], `${submission.legacySubmissionId}.zip`)
                       allFiles.push(file)
                       downloadedFile += 1
                       checkToCompressFiles()
@@ -501,7 +539,7 @@ class SubmissionsComponent extends React.Component {
               }}
             />
           </div>
-        </div>
+        </div>) : null}
       </div>
     )
   }

diff --git a/src/components/DateInput/index.js b/src/components/DateInput/index.js
@@ -0,0 +1,59 @@
+import React, { useEffect, useState, useImperativeHandle, forwardRef } from 'react'
+import PropTypes from 'prop-types'
+import 'react-day-picker/lib/style.css'
+import 'rc-time-picker/assets/index.css'
+import DateTime from '@nateradebaugh/react-datetime'
+import '@nateradebaugh/react-datetime/scss/styles.scss'
+
+const DateInput = forwardRef(({
+  onChange,
+  value,
+  isValidDate,
+  dateFormat,
+  timeFormat,
+  className
+}, ref) => {
+  const [localValue, setLocalValue] = useState(value)
+  useEffect(() => {
+    setLocalValue(value)
+  }, [value])
+
+  useImperativeHandle(ref, () => ({
+    forceReset: () => {
+      setLocalValue(value)
+    }
+  }))
+
+  return (
+    <DateTime
+      className={className}
+      value={localValue}
+      onChange={newValue => {
+        setLocalValue(newValue)
+      }}
+      onBlur={onChange}
+      isValidDate={isValidDate}
+      dateFormat={dateFormat}
+      timeFormat={timeFormat}
+    />
+  )
+})
+
+DateInput.defaultProps = {
+  onChange: () => {},
+  isValidDate: () => true,
+  value: null,
+  dateFormat: null,
+  timeFormat: null,
+  className: null
+}
+
+DateInput.propTypes = {
+  onChange: PropTypes.func,
+  isValidDate: PropTypes.func,
+  value: PropTypes.any,
+  dateFormat: PropTypes.string,
+  timeFormat: PropTypes.string,
+  className: PropTypes.string
+}
+export default DateInput
diff --git a/src/components/PhaseInput/index.js b/src/components/PhaseInput/index.js
@@ -1,16 +1,13 @@
 import moment from 'moment'
-import React, { useEffect, useMemo } from 'react'
+import React, { useEffect, useMemo, useRef } from 'react'
 import PropTypes from 'prop-types'
 import styles from './PhaseInput.module.scss'
 import cn from 'classnames'
-import 'react-day-picker/lib/style.css'
-import 'rc-time-picker/assets/index.css'
-import DateTime from '@nateradebaugh/react-datetime'
 import isAfter from 'date-fns/isAfter'
 import subDays from 'date-fns/subDays'
-import '@nateradebaugh/react-datetime/scss/styles.scss'
 import DurationInput from '../DurationInput'
-import { getPhaseHoursMinutes, getPhaseEndDate } from '../../util/date'
+import { getPhaseHoursMinutes, getPhaseEndDate, getPhaseDuration } from '../../util/date'
+import DateInput from '../DateInput'
 
 const dateFormat = 'MM/DD/YYYY HH:mm'
 const inputDateFormat = 'MM/dd/yyyy'
@@ -21,6 +18,7 @@ const PhaseInput = ({ onUpdatePhase, phase, readOnly, phaseIndex }) => {
   const { scheduledStartDate: startDate, scheduledEndDate: endDate, duration, isStartTimeActive, isDurationActive } = phase
 
   const durationHoursMinutes = useMemo(() => getPhaseHoursMinutes(duration), [duration])
+  const endDateInputRef = useRef()
 
   const onStartDateChange = (e) => {
     let startDate = moment(e).format(dateFormat)
@@ -32,6 +30,20 @@ const PhaseInput = ({ onUpdatePhase, phase, readOnly, phaseIndex }) => {
     })
   }
 
+  const onEndDateChange = (e) => {
+    let endDate = moment(e).format(dateFormat)
+    let duration = getPhaseDuration(startDate, endDate)
+    if (duration > 0) {
+      onUpdatePhase({
+        startDate,
+        endDate,
+        duration
+      })
+    } else {
+      endDateInputRef.current.forceReset()
+    }
+  }
+
   useEffect(() => {
     if (!startDate && onUpdatePhase) {
       let startDate = moment().format(dateFormat)
@@ -71,9 +83,9 @@ const PhaseInput = ({ onUpdatePhase, phase, readOnly, phaseIndex }) => {
                 <span className={styles.readOnlyValue}>{moment(startDate).format(dateFormat)}</span>
               )
                 : (
-                  <DateTime
+                  <DateInput
                     className={styles.dateTimeInput}
-                    value={moment(startDate).format(dateFormat)}
+                    value={moment(startDate).toDate()}
                     onChange={onStartDateChange}
                     isValidDate={(current) => {
                       const yesterday = subDays(new Date(), 1)
@@ -87,7 +99,21 @@ const PhaseInput = ({ onUpdatePhase, phase, readOnly, phaseIndex }) => {
         <div className={cn(styles.field, styles.col2)}>
           <span className={styles.title}>End Date:</span>
           <div className={styles.dayPicker}>
-            <span className={styles.readOnlyValue}>{moment(endDate).format(dateFormat)}</span>
+            {(readOnly || !isDurationActive) ? (
+              <span className={styles.readOnlyValue}>{moment(endDate).format(dateFormat)}</span>
+            ) : (
+              <DateInput
+                ref={endDateInputRef}
+                className={styles.dateTimeInput}
+                value={moment(endDate).toDate()}
+                onChange={onEndDateChange}
+                isValidDate={(current) => {
+                  return isAfter(current, moment(startDate).toDate())
+                }}
+                dateFormat={inputDateFormat}
+                timeFormat={inputTimeFormat}
+              />
+            )}
           </div>
         </div>
         <div className={cn(styles.field, styles.col2)}>