Merge pull request #5129 from topcoder-platform/issue-4212-gets0ul

fix: allow member to download own submission for design challenge

Author: luizrrodrigues

__tests__/shared/components/SubmissionManagement/Submission.jsx

@@ -4,6 +4,7 @@ import Submission from 'components/SubmissionManagement/Submission';
 import TU from 'react-dom/test-utils';
 
 const mockOnDelete = jest.fn();
+const mockOnDownload = jest.fn();
 const mockOnShowDetails = jest.fn();
 
 const rnd = new Rnd();
@@ -12,6 +13,7 @@ test('Snapshot match', () => {
   rnd.render((
     <Submission
       onDelete={mockOnDelete}
+      onDownload={mockOnDownload}
       onShowDetails={mockOnShowDetails}
       showScreeningDetails
       type="develop"
@@ -21,6 +23,7 @@ test('Snapshot match', () => {
   rnd.render((
     <Submission
       onDelete={mockOnDelete}
+      onDownload={mockOnDownload}
       onShowDetails={mockOnShowDetails}
       submissionObject={{
         id: '12345',
@@ -49,6 +52,7 @@ class Wrapper extends React.Component {
 const page = TU.renderIntoDocument((
   <Wrapper
     onDelete={mockOnDelete}
+    onDownload={mockOnDownload}
     onShowDetails={mockOnShowDetails}
     submissionObject={{
       id: '12345',

__tests__/shared/components/SubmissionManagement/__snapshots__/Submission.jsx.snap

@@ -21,14 +21,17 @@ exports[`Snapshot match 1`] = `
     className="src-shared-components-SubmissionManagement-Submission-___styles__action-col___2M1RY"
   >
     <div>
-      <a>
+      <button
+        onClick={[Function]}
+        type="button"
+      >
         <DownloadIcon
           height="16"
           viewBox="0 0 16 16"
           width="16"
           xmlns="http://www.w3.org/2000/svg"
         />
-      </a>
+      </button>
       <button
         className="src-shared-components-SubmissionManagement-Submission-___styles__delete-icon___2M67z"
         disabled={true}
@@ -81,14 +84,17 @@ exports[`Snapshot match 2`] = `
     className="src-shared-components-SubmissionManagement-Submission-___styles__action-col___2M1RY"
   >
     <div>
-      <a>
+      <button
+        onClick={[Function]}
+        type="button"
+      >
         <DownloadIcon
           height="16"
           viewBox="0 0 16 16"
           width="16"
           xmlns="http://www.w3.org/2000/svg"
         />
-      </a>
+      </button>
       <button
         className="src-shared-components-SubmissionManagement-Submission-___styles__delete-icon___2M67z"
         disabled={true}

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

@@ -14,7 +14,6 @@
 import _ from 'lodash';
 import moment from 'moment';
 import React from 'react';
-import { config } from 'topcoder-react-utils';
 import { COMPETITION_TRACKS, CHALLENGE_STATUS } from 'utils/tc';
 
 import PT from 'prop-types';
@@ -31,12 +30,14 @@ export default function Submission(props) {
     submissionObject,
     showScreeningDetails,
     track,
+    onDownload,
     onDelete,
     onShowDetails,
     status,
     allowDelete,
   } = props;
   const formatDate = date => moment(+new Date(date)).format('MMM DD, YYYY hh:mm A');
+  const onDownloadSubmission = onDownload.bind(1, submissionObject.id);
 
   return (
     <tr styleName="submission-row">
@@ -66,15 +67,12 @@ export default function Submission(props) {
       }
       <td styleName="action-col">
         <div>
-          <a
-            href={
-              track === COMPETITION_TRACKS.DES
-                ? `${config.URL.ONLINE_REVIEW}/review/actions/DownloadContestSubmission?uid=${submissionObject.id}`
-                : submissionObject.download
-            }
+          <button
+            onClick={() => onDownloadSubmission(submissionObject.id)}
+            type="button"
           >
             <DownloadIcon />
-          </a>
+          </button>
           { /*
             TODO: At the moment we just fetch downloads from the legacy
               Topcoder Studio API, and we don't need any JS code to this.
@@ -132,6 +130,7 @@ Submission.propTypes = {
   }),
   showScreeningDetails: PT.bool,
   track: PT.string.isRequired,
+  onDownload: PT.func.isRequired,
   onDelete: PT.func.isRequired,
   onShowDetails: PT.func,
   status: PT.string.isRequired,

src/shared/containers/SubmissionManagement/index.jsx

@@ -15,11 +15,13 @@ import PT from 'prop-types';
 import { connect } from 'react-redux';
 import { Modal } from 'topcoder-react-ui-kit';
 import { config } from 'topcoder-react-utils';
-import { actions } from 'topcoder-react-lib';
+import { actions, services } from 'topcoder-react-lib';
 
 import './styles.scss';
 import smpActions from '../../actions/page/submission_management';
 
+const { getService } = services.submissions;
+
 // The container component
 class SubmissionManagementPageContainer extends React.Component {
   componentDidMount() {
@@ -54,7 +56,6 @@ class SubmissionManagementPageContainer extends React.Component {
       isLoadingChallenge,
       mySubmissions,
       onCancelSubmissionDelete,
-      onDownloadSubmission,
       onShowDetails,
       onSubmissionDelete,
       onSubmissionDeleteConfirmed,
@@ -68,7 +69,19 @@ class SubmissionManagementPageContainer extends React.Component {
     const smConfig = {
       onShowDetails,
       onDelete: onSubmissionDelete,
-      onDownload: () => onDownloadSubmission(0, authTokens),
+      onDownload: (challengeType, submissionId) => {
+        const submissionsService = getService(authTokens.tokenV3);
+        submissionsService.downloadSubmission(submissionId)
+          .then((blob) => {
+            const url = window.URL.createObjectURL(new Blob([blob]));
+            const link = document.createElement('a');
+            link.href = url;
+            link.setAttribute('download', `submission-${challengeType}-${submissionId}.zip`);
+            document.body.appendChild(link);
+            link.click();
+            link.parentNode.removeChild(link);
+          });
+      },
       onlineReviewUrl: `${config.URL.ONLINE_REVIEW}/review/actions/ViewProjectDetails?pid=${challengeId}`,
       challengeUrl: `${challengesUrl}/${challengeId}`,
       addSumissionUrl: `${config.URL.BASE}/challenges/${challengeId}/submit`,