feat(PM-810) List and download artifacts in WM

config/constants/development.js

@@ -25,6 +25,7 @@ module.exports = {
   RESOURCES_API_URL: `${DEV_API_HOSTNAME}/v5/resources`,
   RESOURCE_ROLES_API_URL: `${DEV_API_HOSTNAME}/v5/resource-roles`,
   SUBMISSIONS_API_URL: `${DEV_API_HOSTNAME}/v5/submissions`,
+  REVIEW_TYPE_API_URL: `${DEV_API_HOSTNAME}/v5/reviewTypes`,
   SUBMISSION_REVIEW_APP_URL: `https://submission-review.${DOMAIN}/challenges`,
   STUDIO_URL: `https://studio.${DOMAIN}`,
   CONNECT_APP_URL: `https://connect.${DOMAIN}`,

config/constants/production.js

@@ -24,6 +24,7 @@ module.exports = {
   RESOURCES_API_URL: `${PROD_API_HOSTNAME}/v5/resources`,
   RESOURCE_ROLES_API_URL: `${PROD_API_HOSTNAME}/v5/resource-roles`,
   SUBMISSIONS_API_URL: `${PROD_API_HOSTNAME}/v5/submissions`,
+  REVIEW_TYPE_API_URL: `${PROD_API_HOSTNAME}/v5/reviewTypes`,
   SUBMISSION_REVIEW_APP_URL: `https://submission-review.${DOMAIN}/challenges`,
   STUDIO_URL: `https://studio.${DOMAIN}`,
   CONNECT_APP_URL: `https://connect.${DOMAIN}`,

package.json

@@ -115,7 +115,7 @@
     "terser": "^3.16.1",
     "terser-webpack-plugin": "1.1.0",
     "topcoder-healthcheck-dropin": "^1.0.3",
-    "topcoder-react-lib": "^1.2.10",
+    "topcoder-react-lib": "github:topcoder-platform/topcoder-react-lib#1.2.18",
     "url-loader": "1.1.1",
     "webpack": "^4.43.0",
     "webpack-dev-server": "^3.11.0",

src/components/ChallengeEditor/ArtifactsListModal/ArtifactsListModal.module.scss

@@ -0,0 +1,47 @@
+@import "../../../styles/includes";
+
+.container {
+  box-sizing: border-box;
+  background: $white;
+  opacity: 1;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  border-radius: 6px;
+  margin: 0 auto;
+  width: 800px;
+  min-height: 350px;
+  padding-top: 60px;
+  .list {
+    .header {
+      border-bottom: 1px solid $tc-gray-60;
+      padding-bottom: 10px;
+      display: flex;
+      padding-left: 40px;
+      padding-right: 40px;
+      color: $tc-gray-70;
+      font-weight: 500;
+
+      .header-title {
+        flex: 1;
+      }
+    }
+    .list-item {
+      border-bottom: 1px solid $tc-gray-60;
+      padding-bottom: 10px;
+      padding-top: 10px;
+      display: flex;
+      padding-left: 40px;
+      padding-right: 40px;
+      color: $tc-gray-70;
+      .artifact-name {
+        display: flex;
+        flex: 1;
+      }
+      .icon-download {
+        cursor: pointer;
+      }
+    }
+  }
+}

src/components/ChallengeEditor/ArtifactsListModal/index.js

@@ -0,0 +1,111 @@
+import React, { useCallback, useEffect, useState } from 'react'
+import Modal from '../../Modal'
+
+import styles from './ArtifactsListModal.module.scss'
+import PropTypes from 'prop-types'
+import ReactSVG from 'react-svg'
+import { getTopcoderReactLib, isValidDownloadFile } from '../../../util/topcoder-react-lib'
+import Loader from '../../Loader'
+const assets = require.context('../../../assets/images', false, /svg/)
+
+export const ArtifactsListModal = ({ onClose, submissionId, token, theme }) => {
+  const [artifacts, setArtifacts] = useState([])
+  const [loading, setLoading] = useState(false)
+
+  const getArtifacts = useCallback(async () => {
+    const reactLib = getTopcoderReactLib()
+    const { getService } = reactLib.services.submissions
+    const submissionsService = getService(token)
+    const { artifacts: resp } = await submissionsService.getSubmissionArtifacts(submissionId)
+    setArtifacts(resp)
+    setLoading(false)
+  }, [submissionId, token])
+
+  const getExtensionFromMime = useCallback((mimeType) => {
+    const mimeMap = {
+      'application/zip': 'zip',
+      'application/pdf': 'pdf',
+      'image/jpeg': 'jpg',
+      'image/png': 'png',
+      'text/plain': 'txt'
+    }
+    return mimeMap[mimeType] || 'zip'
+  }, [])
+
+  useEffect(() => {
+    setLoading(true)
+    getArtifacts()
+  }, [submissionId])
+
+  const onDownloadArtifact = useCallback((item) => {
+    // download submission
+    const reactLib = getTopcoderReactLib()
+    const { getService } = reactLib.services.submissions
+    const submissionsService = getService(token)
+    submissionsService.downloadSubmissionArtifact(submissionId, item)
+      .then((blob) => {
+        isValidDownloadFile(blob).then((isValidFile) => {
+          if (isValidFile.success) {
+            // eslint-disable-next-line no-undef
+            const blobFile = new Blob([blob])
+            const url = window.URL.createObjectURL(blobFile)
+            const link = document.createElement('a')
+            link.href = url
+            const extension = getExtensionFromMime(blob.type)
+            const fileName = `${submissionId}.${extension}`
+            link.setAttribute('download', `${fileName}`)
+            document.body.appendChild(link)
+            link.click()
+            link.parentNode.removeChild(link)
+          } else {
+            console.log('failed to download artifact')
+          }
+        })
+      })
+  }, [submissionId, token])
+
+  return (
+    <Modal theme={theme} onCancel={onClose}>
+      <div className={styles['container']}>
+        <div className={styles['list']}>
+          <div className={styles['header']}>
+            <div className={styles['header-title']}>Artifact ID</div>
+            <div className={styles['header-action']}>Action</div>
+          </div>
+          {
+            !loading && artifacts.map((item) => {
+              return (
+                <div className={styles['list-item']}>
+                  <div className={styles['artifact-name']}>{item}</div>
+                  <ReactSVG
+                    className={styles['icon-download']}
+                    path={assets('./IconSquareDownload.svg')}
+                    onClick={() => onDownloadArtifact(item)}
+                  />
+                </div>
+              )
+            })
+          }
+
+          {
+            loading && <Loader />
+          }
+        </div>
+      </div>
+    </Modal>
+  )
+}
+
+ArtifactsListModal.defaultProps = {
+  onClose: () => {},
+  submissionId: '',
+  token: '',
+  theme: ''
+}
+
+ArtifactsListModal.propTypes = {
+  onClose: PropTypes.func,
+  submissionId: PropTypes.string,
+  token: PropTypes.string,
+  theme: PropTypes.shape()
+}

src/components/ChallengeEditor/RatingsListModal/RatingsListModal.module.scss

@@ -0,0 +1,44 @@
+@import "../../../styles/includes";
+
+.container {
+  box-sizing: border-box;
+  background: $white;
+  opacity: 1;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  border-radius: 6px;
+  margin: 0 auto;
+  width: 800px;
+  min-height: 350px;
+  padding-top: 60px;
+  .list {
+    .header {
+      border-bottom: 1px solid $tc-gray-60;
+      padding-bottom: 10px;
+      display: flex;
+      padding-left: 40px;
+      padding-right: 40px;
+      color: $tc-gray-70;
+      font-weight: 500;
+
+      .header-item {
+        flex: 1;
+      }
+    }
+    .list-item {
+      border-bottom: 1px solid $tc-gray-60;
+      padding-bottom: 10px;
+      padding-top: 10px;
+      display: flex;
+      padding-left: 40px;
+      padding-right: 40px;
+      color: $tc-gray-70;
+      .list-col-item {
+        display: flex;
+        flex: 1;
+      }
+    }
+  }
+}

src/components/ChallengeEditor/RatingsListModal/index.js

@@ -0,0 +1,112 @@
+import React, { useCallback, useEffect, useState } from 'react'
+import Modal from '../../Modal'
+
+import styles from './RatingsListModal.module.scss'
+import PropTypes from 'prop-types'
+import { getTopcoderReactLib } from '../../../util/topcoder-react-lib'
+import Loader from '../../Loader'
+import { getReviewTypes } from '../../../services/challenges'
+import { SystemReviewers } from '../../../config/constants'
+
+export const RatingsListModal = ({ onClose, theme, token, submissionId, challengeId }) => {
+  const [reviews, setReviews] = useState([])
+  const [loading, setLoading] = useState(false)
+
+  const enrichSources = useCallback(async (submissionReviews, reviewSummation) => {
+    const reactLib = getTopcoderReactLib()
+    const { getService } = reactLib.services.members
+    const membersService = getService(token)
+    const resources = await membersService.getChallengeResources(challengeId)
+    const reviewTypes = await getReviewTypes()
+
+    const finalReview = {
+      reviewType: 'Final score',
+      reviewer: '',
+      score: reviewSummation ? reviewSummation.aggregateScore : 'N/A',
+      isPassing: reviewSummation ? reviewSummation.isPassing : undefined
+    }
+
+    return [...submissionReviews.map(review => {
+      const reviewType = reviewTypes.find(rt => rt.id === review.typeId)
+      const reviewer = resources.find(resource => resource.memberHandle === review.reviewerId) || SystemReviewers.Default
+      return {
+        ...review,
+        reviewType: reviewType ? reviewType.name : '',
+        reviewer
+      }
+    }), finalReview]
+  }, [token])
+
+  const getSubmission = useCallback(async () => {
+    const reactLib = getTopcoderReactLib()
+    const { getService } = reactLib.services.submissions
+    const submissionsService = getService(token)
+    const submissionInfo = await submissionsService.getSubmissionInformation(submissionId)
+    setReviews(await enrichSources(submissionInfo.review, submissionInfo.reviewSummation[0]))
+    setLoading(false)
+  }, [submissionId, token])
+
+  useEffect(() => {
+    setLoading(true)
+    getSubmission()
+  }, [submissionId])
+
+  return (
+    <Modal theme={theme} onCancel={onClose}>
+      <div className={styles['container']}>
+        <div className={styles['list']}>
+          <div className={styles['header']}>
+            <div className={styles['header-item']}>Review Type</div>
+            <div className={styles['header-item']}>Reviewer</div>
+            <div className={styles['header-item']}>Score</div>
+            <div className={styles['header-item']}>Status</div>
+          </div>
+          {reviews.map(review => {
+            const { isPassing } = review
+            const isFailed = isPassing === false
+            const isPassed = isPassing === true
+            const statusIsDefined = isPassed || isFailed
+            const status = isPassing ? 'Passed' : 'Failed'
+
+            return (
+              <div className={styles['list-item']}>
+                <div className={styles['list-col-item']}>
+                  {review.reviewType}
+                </div>
+                <div className={styles['list-col-item']}>
+                  <strong>{review.reviewer}</strong>
+                </div>
+                <div className={styles['list-col-item']}>
+                  {review.score}
+                </div>
+                <div className={styles['list-col-item']}>
+                  {statusIsDefined ? status : 'N/A'}
+                </div>
+              </div>
+            )
+          })}
+        </div>
+
+        {
+          loading && <Loader />
+        }
+      </div>
+    </Modal>
+  )
+}
+
+RatingsListModal.defaultProps = {
+  onClose: () => {},
+  theme: '',
+  token: '',
+  submissionId: '',
+  challengeId: ''
+}
+
+RatingsListModal.propTypes = {
+  onClose: PropTypes.func,
+  theme: PropTypes.shape(),
+  token: PropTypes.string,
+  submissionId: PropTypes.string,
+  challengeId: PropTypes.string
+}

src/components/ChallengeEditor/Submissions/Submissions.module.scss

@@ -239,11 +239,24 @@ $base-unit: 5px;
     }
 
     .col-8Table {
-      button {
+      .button-wrapper {
+        display: flex;
+        align-items: center;
+      }
+      .download-submission-button {
         padding: 0;
         border: none;
         background-color: transparent;
         outline: none;
+        margin-right: 14px;
+        width: 24px;
+        svg {
+          width: 24px;
+        }
+      }
+
+      .download-artifacts-button {
+        height: 40px;
       }
     }