feat: list artifacts and allow them to be donwload

Author: hentrymartin

package-lock.json

@@ -164,7 +164,7 @@
     "supertest": "^3.1.0",
     "tc-core-library-js": "github:appirio-tech/tc-core-library-js#v2.6.3.1",
     "tc-ui": "^1.0.12",
-    "topcoder-react-lib": "1.2.14",
+    "topcoder-react-lib": "github:topcoder-platform/topcoder-react-lib#1.2.18",
     "topcoder-react-ui-kit": "2.0.1",
     "topcoder-react-utils": "github:topcoder-platform/topcoder-react-utils#v0.9.5",
     "turndown": "^4.0.2",

package.json

@@ -0,0 +1,88 @@
+/**
+ * Modal Component for Image Decorators
+ */
+import _ from 'lodash';
+import PT from 'prop-types';
+import React, { useEffect, useState } from 'react';
+
+import { Modal } from 'topcoder-react-ui-kit';
+
+import style from './style.scss';
+import LoadingIndicator from 'components/LoadingIndicator';
+
+import DownloadIcon from '../Icons/IconSquareDownload.svg';
+
+const theme = {
+  container: style.modalContainer,
+  overlay: style.modalOverlay,
+};
+
+export const DownloadArtifactsModal = ({submissionId, onCancel, getSubmissionArtifacts, onDownloadArtifacts}) => {
+  const [artifacts, setArtifacts] = useState([]);
+  const [loading, setLoading] = useState(false);
+
+  const getArtifacts = async () => {
+    const { artifacts: resp } = await getSubmissionArtifacts(submissionId);
+    setArtifacts(resp);
+    setLoading(false);
+  };
+
+  useEffect(() => {
+    setLoading(true);
+    getArtifacts();
+  }, [submissionId]);
+
+  console.log(artifacts, 'artifacts');
+  return (
+    <div styleName="container">
+      <Modal
+        onCancel={() => onCancel()}
+        theme={theme}
+      >
+        <div styleName="content-wrapper">
+          <div styleName="artifacts-list">
+            <div styleName="header">
+              <div styleName="header-title">Artifact ID</div>
+              <div>Action</div>
+            </div>
+            {
+              !loading && artifacts.map((item) => {
+                return (
+                  <div styleName="list-item">
+                    <div styleName="artifact-name">{item}</div>
+                    <button
+                      onClick={() => onDownloadArtifacts(item, submissionId)}
+                      type="button"
+                      styleName="icon-download"
+                    >
+                      <DownloadIcon />
+                    </button>
+                  </div>
+                )
+              })
+            }
+
+            {
+              !loading && artifacts.length === 0 && <div styleName="no-artifacts">No artifacts found</div>
+            }
+          </div>
+          {loading && <LoadingIndicator />}
+        </div>
+      </Modal>
+    </div>
+  )
+}
+
+DownloadArtifactsModal.defaultProps = {
+  onCancel: _.noop,
+  submissionId: '',
+  getSubmissionArtifacts: _.noop,
+  onDownloadArtifacts: _.noop,
+};
+
+DownloadArtifactsModal.propTypes = {
+  onCancel: PT.func,
+  submissionId: PT.string,
+  getSubmissionArtifacts: PT.func,
+  onDownloadArtifacts: PT.func,
+};

src/shared/components/SubmissionManagement/DownloadArtifactsModal/index.jsx

@@ -0,0 +1,77 @@
+@import "~styles/mixins";
+
+// Competing against some globals
+.container {
+  @include tc-body-md;
+
+  z-index: 1000;
+}
+
+.content-wrapper {
+  min-height: 350px;
+}
+
+.artifacts-list {
+  .header {
+    border-bottom: 1px solid $tc-gray-60;
+    padding-bottom: 10px;
+    display: flex;
+    padding-left: 40px;
+    padding-right: 40px;
+    color: $tc-gray-70;
+    @include roboto-medium;
+    font-weight: 500;
+
+    .header-title {
+      flex: 1;
+    }
+  }
+
+  .no-artifacts {
+    @include roboto-regular;
+    margin-top: 40px;
+    text-align: center;
+  }
+
+  .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;
+    @include roboto-regular;
+    .artifact-name {
+      display: flex;
+      flex: 1;
+    }
+    .icon-download {
+      cursor: pointer;
+      margin-left: 15px;
+      margin-top: 3px;
+      background: none;
+      border: 0;
+      font-size: 0;
+      padding: 0;
+      line-height: 0;
+      display: inline-block;
+    }
+  }
+}
+
+.modalContainer {
+  top: 30%;
+  left: 50%;
+  transform: translate(-50%);
+  height: auto;
+  width: 720px;
+  padding-top: 36px;
+  padding-bottom: 36px;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.modalOverlay {
+  pointer-events: bounding-box;
+}

src/shared/components/SubmissionManagement/DownloadArtifactsModal/style.scss

@@ -4,6 +4,12 @@ $submission-space-20: $base-unit * 4;
 $submission-space-25: $base-unit * 5;
 $submission-space-50: $base-unit * 10;
 
+@mixin button {
+  margin: 0 1px;
+  padding: 0 10px;
+}
+
+
 .submission-row {
   width: 100%;
   font-size: 15px;
@@ -141,6 +147,13 @@ $submission-space-50: $base-unit * 10;
     text-align: center;
     min-width: 120px;
 
+    .download-button {
+      @include button;
+    
+      font-weight: bold;
+      background-color: #767676;
+      min-width: 120px;
+    }
     @include xs-to-sm {
       position: absolute;
       right: 0;

src/shared/components/SubmissionManagement/Submission/styles.scss

@@ -39,6 +39,8 @@ export default function SubmissionManagement(props) {
     challengeUrl,
     onlineReviewUrl,
     submissionPhaseStartDate,
+    onDownloadArtifacts,
+    getSubmissionArtifacts,
   } = props;
 
   const { track } = challenge;
@@ -70,6 +72,8 @@ export default function SubmissionManagement(props) {
     onDownload: onDownload.bind(0, challengeType),
     onlineReviewUrl,
     onShowDetails,
+    onDownloadArtifacts,
+    getSubmissionArtifacts,
   };
   return (
     <div styleName="submission-management">

src/shared/components/SubmissionManagement/SubmissionManagement/index.jsx

@@ -15,16 +15,19 @@
  */
 
 import _ from 'lodash';
-import React from 'react';
+import React, { useState } from 'react';
 import PT from 'prop-types';
 import shortid from 'shortid';
 import moment from 'moment';
 import { COMPETITION_TRACKS } from 'utils/tc';
 import Submission from '../Submission';
 import ScreeningDetails from '../ScreeningDetails';
-import './styles.scss';
+import { PrimaryButton } from 'topcoder-react-ui-kit';
+import style from './styles.scss';
+import { DownloadArtifactsModal } from '../DownloadArtifactsModal';
 
 export default function SubmissionsTable(props) {
+  const [submissionId, setSubmissionId] = useState('');
   const {
     challenge,
     submissionObjects,
@@ -37,6 +40,8 @@ export default function SubmissionsTable(props) {
     onShowDetails,
     status,
     submissionPhaseStartDate,
+    onDownloadArtifacts,
+    getSubmissionArtifacts,
   } = props;
 
   const submissionsWithDetails = [];
@@ -76,6 +81,7 @@ export default function SubmissionsTable(props) {
           {showDetails[subObject.id]
             && (
             <td colSpan="6" styleName="dev-details">
+              <PrimaryButton theme={{button: style['upload-artifact-btn']}} onClick={() => onOpenDownloadArtifactsModal(subObject.id)}>Download Artifacts</PrimaryButton>
               <ScreeningDetails
                 screeningObject={subObject.screening}
                 helpPageUrl={helpPageUrl}
@@ -90,6 +96,10 @@ export default function SubmissionsTable(props) {
     });
   }
 
+  const onOpenDownloadArtifactsModal = (submissionId) => {
+    setSubmissionId(submissionId);
+  };
+
   return (
     <div styleName="submissions-table">
       <table>
@@ -118,6 +128,7 @@ export default function SubmissionsTable(props) {
           {submissionsWithDetails}
         </tbody>
       </table>
+      {submissionId && <DownloadArtifactsModal onCancel={() => setSubmissionId('')} getSubmissionArtifacts={getSubmissionArtifacts} submissionId={submissionId} onDownloadArtifacts={onDownloadArtifacts} />}
     </div>
   );
 }

src/shared/components/SubmissionManagement/SubmissionsTable/index.jsx

@@ -90,6 +90,25 @@ $submission-space-50: $base-unit * 10;
       padding-right: 60px;
       border-top: 0;
       padding-top: 0;
+      .upload-artifact-btn {
+        @include roboto-medium; 
+        line-height: 24px;
+        border-radius: 50px;
+        border-color: #137d60;
+        background-color: transparent;
+        color: #137d60;
+        text-transform: uppercase;
+        &:hover {
+          background-color: #137d60;
+          color: #fff;
+          background-image: none;
+        }
+      
+        @include xs-to-md {
+          font-size: 14px;
+          line-height: 20px;
+        }
+      }
     }
   }
 

src/shared/components/SubmissionManagement/SubmissionsTable/styles.scss

@@ -127,6 +127,17 @@ class SubmissionManagementPageContainer extends React.Component {
 
     if (!challenge.isRegistered) return <AccessDenied redirectLink={`${challengesUrl}/${challenge.id}`} cause={ACCESS_DENIED_REASON.HAVE_NOT_SUBMITTED_TO_THE_CHALLENGE} />;
 
+    const getExtensionFromMime = (mimeType) => {
+      const mimeMap = {
+        'application/zip': 'zip',
+        'application/pdf': 'pdf',
+        'image/jpeg': 'jpg',
+        'image/png': 'png',
+        'text/plain': 'txt'
+      };
+      return mimeMap[mimeType] || 'zip';
+    };
+
     const isEmpty = _.isEmpty(challenge);
     const smConfig = {
       onShowDetails,
@@ -144,6 +155,26 @@ class SubmissionManagementPageContainer extends React.Component {
             link.parentNode.removeChild(link);
           });
       },
+      onDownloadArtifacts: (artifactId, submissionId) => {
+        const submissionsService = getService(authTokens.tokenV3);
+        submissionsService.downloadSubmissionArtifact(submissionId, artifactId)
+          .then((blob) => {
+            const fileBlob = new Blob([blob]);
+            const url = window.URL.createObjectURL(fileBlob);
+            const link = document.createElement('a');
+            link.href = url;
+            const extension = getExtensionFromMime(fileBlob);
+            link.setAttribute('download', `submission-artifact-${submissionId}.${extension}`);
+            document.body.appendChild(link);
+            link.click();
+            link.parentNode.removeChild(link);
+          });
+      },
+      getSubmissionArtifacts: (submissionId) => {
+        console.log(authTokens, 'authTokens');
+        const submissionsService = getService(authTokens.tokenV3);
+        return submissionsService.getSubmissionArtifacts(submissionId);
+      },
       onlineReviewUrl: `${config.URL.ONLINE_REVIEW}/review/actions/ViewProjectDetails?pid=${challengeId}`,
       challengeUrl: `${challengesUrl}/${challengeId}`,
       addSumissionUrl: `${config.URL.BASE}/challenges/${challengeId}/submit`,