https://topcoder.atlassian.net/browse/PROD-4266

Author: jmgasper

src/assets/images/IconSquareDownload.svg

@@ -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 {

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

@@ -27,6 +27,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) {
@@ -211,6 +212,7 @@ class SubmissionsComponent extends React.Component {
     const revertSort = sort === 'desc' ? 'asc' : 'desc'
 
     const { sortedSubmissions, downloadingAll } = this.state
+    console.log('totest sortedSubmissions', sortedSubmissions)
 
     const renderSubmission = s => (
       <div className={styles.submission} key={s.id}>
@@ -393,6 +395,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>
+            <div
+              className={cn(styles['col-8'])}
+            >
+              <span>Actions</span>
+            </div>
           </div>
           {sortedSubmissions.map(s => (
             <div
@@ -441,19 +458,41 @@ 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>
+              <div className={styles['col-8']}>
+                <button
+                  onClick={() => {
+                    // download submission
+                    console.log('totest 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', `submission-${s.id}.zip`)
+                        document.body.appendChild(link)
+                        link.click()
+                        link.parentNode.removeChild(link)
+                      })
+                  }}
+                >
+                  <ReactSVG path={assets(`${Download}`)} />
+                </button>
+              </div>
             </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>
-
           <div className={styles.btnManageSubmissions} >
             <PrimaryButton
               text='Download All'