Skip to content

Commit dd9b957

Browse files
hentrymartinhentrymartin
committed
feat: added download artifacts modal to my submissions tab
1 parent 4ee6b79 commit dd9b957

File tree

7 files changed

+218
-53
lines changed

7 files changed

+218
-53
lines changed

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

+31-12
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@ import _ from 'lodash';
55
import PT from 'prop-types';
66
import React, { useEffect, useState } from 'react';
77

8-
import { Modal } from 'topcoder-react-ui-kit';
8+
import { Modal, PrimaryButton } from 'topcoder-react-ui-kit';
9+
import tc from 'components/buttons/themed/tc.scss';
910

1011
import LoadingIndicator from 'components/LoadingIndicator';
1112
import IconClose from 'assets/images/icon-close-green.svg';
@@ -17,6 +18,10 @@ const theme = {
1718
overlay: style.modalOverlay,
1819
};
1920

21+
const buttonThemes = {
22+
tc,
23+
};
24+
2025
export default function DownloadArtifactsModal({
2126
submissionId,
2227
onCancel,
@@ -38,28 +43,32 @@ export default function DownloadArtifactsModal({
3843
}, [submissionId]);
3944

4045
return (
41-
<div styleName="container">
46+
<div className={style.container}>
4247
<Modal
4348
onCancel={() => onCancel()}
4449
theme={theme}
4550
>
46-
<div styleName="content-wrapper">
47-
<div styleName="icon" role="presentation" onClick={() => onCancel()}>
48-
<IconClose />
51+
<div className={style["content-wrapper"]}>
52+
<div className={style["modal-header"]}>
53+
<h2 className={style["modal-title"]}>Artifacts</h2>
54+
<div className={style["icon"]}role="presentation" onClick={() => onCancel()}>
55+
<IconClose />
56+
</div>
4957
</div>
50-
<div styleName="artifacts-list">
51-
<div styleName="header">
52-
<div styleName="header-title">Artifact ID</div>
58+
<hr className={style["hr"]} />
59+
<div className={style["artifacts-list"]}>
60+
<div className={style["header"]}>
61+
<div className={style["header-title"]}>Artifact ID</div>
5362
<div>Action</div>
5463
</div>
5564
{
5665
!loading && artifacts.map(item => (
57-
<div styleName="list-item">
58-
<div styleName="artifact-name">{item}</div>
66+
<div className={style["list-item"]}>
67+
<div className={style["artifact-name"]}>{item}</div>
5968
<button
6069
onClick={() => onDownloadArtifacts(item, submissionId)}
6170
type="button"
62-
styleName="icon-download"
71+
className={style["icon-download"]}
6372
>
6473
<DownloadIcon />
6574
</button>
@@ -68,11 +77,21 @@ export default function DownloadArtifactsModal({
6877
}
6978

7079
{
71-
!loading && artifacts.length === 0 && <div styleName="no-artifacts">No artifacts found</div>
80+
!loading && artifacts.length === 0 && <div className={style["no-artifacts"]}>No artifacts found</div>
7281
}
7382
</div>
7483
{loading && <LoadingIndicator />}
7584
</div>
85+
<div className={style["buttons-container"]}>
86+
<PrimaryButton
87+
onClick={() => onCancel()}
88+
theme={{
89+
button: buttonThemes.tc['primary-green-md'],
90+
}}
91+
>
92+
Close
93+
</PrimaryButton>
94+
</div>
7695
</Modal>
7796
</div>
7897
);

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

+41-16
Original file line numberDiff line numberDiff line change
@@ -9,28 +9,41 @@
99

1010
.content-wrapper {
1111
min-height: 350px;
12-
13-
.icon {
14-
cursor: pointer;
15-
margin-top: 5px;
16-
margin-right: 30px;
12+
.modal-header {
1713
display: flex;
18-
align-items: flex-end;
19-
justify-content: flex-end;
20-
flex-grow: 1;
14+
justify-content: space-between;
15+
padding-bottom: 25px;
16+
padding-left: 25px;
17+
padding-right: 25px;
18+
19+
.modal-title {
20+
@include barlow-medium;
21+
22+
font-weight: 600;
23+
color: #2a2a2a;
24+
font-size: 18px;
25+
line-height: 22px;
26+
text-transform: uppercase;
27+
}
28+
29+
.icon {
30+
cursor: pointer;
31+
margin-top: 5px;
32+
}
2133
}
2234
}
2335

2436
.artifacts-list {
2537
margin-top: 30px;
2638

2739
.header {
28-
border-bottom: 1px solid $tc-gray-60;
40+
border-bottom: 1px solid #ededf2;
2941
padding-bottom: 10px;
3042
display: flex;
31-
padding-left: 40px;
32-
padding-right: 40px;
33-
color: $tc-gray-70;
43+
padding-left: 25px;
44+
padding-right: 25px;
45+
color: $color-black-60;
46+
font-size: 11px;
3447

3548
@include roboto-medium;
3649

@@ -49,13 +62,14 @@
4962
}
5063

5164
.list-item {
52-
border-bottom: 1px solid $tc-gray-60;
65+
border-bottom: 1px solid #ededf2;
5366
padding-bottom: 10px;
5467
padding-top: 10px;
5568
display: flex;
56-
padding-left: 40px;
57-
padding-right: 40px;
58-
color: $tc-gray-70;
69+
padding-left: 25px;
70+
padding-right: 25px;
71+
color: $color-tc-black;
72+
font-size: 14px;
5973

6074
@include roboto-regular;
6175

@@ -88,8 +102,19 @@
88102
padding-bottom: 36px;
89103
padding-left: 0;
90104
padding-right: 0;
105+
border-radius: 8px;
106+
.hr {
107+
width: 100%;
108+
margin: 0;
109+
}
91110
}
92111

93112
.modalOverlay {
94113
pointer-events: bounding-box;
95114
}
115+
116+
.buttons-container {
117+
display: flex;
118+
justify-content: flex-end;
119+
padding-right: 25px;
120+
}

‎src/shared/components/challenge-detail/MySubmissions/SubmissionsList/index.jsx

+46-23
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import Tooltip from 'components/Tooltip';
1818
import IconFail from '../../icons/failed.svg';
1919
import DownloadIcon from '../../../SubmissionManagement/Icons/IconSquareDownload.svg';
2020
import ZoomIcon from '../../../SubmissionManagement/Icons/IconZoom.svg';
21+
import ArtifactsDownloadIcon from '../../../SubmissionManagement/Icons/IconDownloadArtifacts.svg';
2122

2223
// import SearchIcon from '../../../SubmissionManagement/Icons/IconSearch.svg';
2324
import style from './styles.scss';
@@ -147,9 +148,12 @@ class SubmissionsListView extends React.Component {
147148
this.setState({ openModal: !openModal, selectedSubmission });
148149
}
149150

151+
showDetailsModal(submission) {
152+
this.props.onShowDetailsModal(submission);
153+
}
154+
150155
render() {
151156
const {
152-
selectSubmission,
153157
challengesUrl,
154158
challenge,
155159
hasRegistered,
@@ -443,31 +447,48 @@ class SubmissionsListView extends React.Component {
443447
<div styleName="submission-table-column column-2-4">
444448
{ !isTopCrowdChallenge
445449
? (
446-
<button
447-
onClick={() => {
448-
// download submission
449-
const submissionsService = getService(auth.tokenV3);
450-
submissionsService.downloadSubmission(mySubmission.submissionId)
451-
.then((blob) => {
452-
const url = window.URL.createObjectURL(new Blob([blob]));
453-
const link = document.createElement('a');
454-
link.href = url;
455-
link.setAttribute('download', `submission-${mySubmission.submissionId}.zip`);
456-
document.body.appendChild(link);
457-
link.click();
458-
link.parentNode.removeChild(link);
459-
});
460-
}}
461-
type="button"
462-
>
463-
<DownloadIcon />
464-
</button>
450+
<Tooltip content={() => <div styleName="tooltip-content">Download Submission</div>}>
451+
<button
452+
onClick={() => {
453+
// download submission
454+
const submissionsService = getService(auth.tokenV3);
455+
submissionsService.downloadSubmission(mySubmission.submissionId)
456+
.then((blob) => {
457+
const url = window.URL.createObjectURL(new Blob([blob]));
458+
const link = document.createElement('a');
459+
link.href = url;
460+
link.setAttribute('download', `submission-${mySubmission.submissionId}.zip`);
461+
document.body.appendChild(link);
462+
link.click();
463+
link.parentNode.removeChild(link);
464+
});
465+
}}
466+
type="button"
467+
>
468+
<DownloadIcon />
469+
</button>
470+
</Tooltip>
471+
)
472+
: <span /> }
473+
{ !isTopCrowdChallenge
474+
? (
475+
<Tooltip content={() => <div styleName="tooltip-content">Download Submission Artifacts</div>}>
476+
<button
477+
onClick={() => this.props.onShowDownloadArtifactsModal(mySubmission)}
478+
type="button"
479+
styleName="download-artifacts-button"
480+
>
481+
<ArtifactsDownloadIcon />
482+
</button>
483+
</Tooltip>
465484
)
466485
: <span /> }
467486

468-
<button onClick={() => selectSubmission(mySubmission)} type="button">
469-
<ZoomIcon styleName="icon-zoom" />
470-
</button>
487+
<Tooltip content={() => <div styleName="tooltip-content">Show Submission Details</div>}>
488+
<button onClick={() => this.showDetailsModal(mySubmission)} type="button">
489+
<ZoomIcon styleName="icon-zoom" />
490+
</button>
491+
</Tooltip>
471492

472493
{/* <button onClick={() => this.toggleModal(mySubmission)} type="button">
473494
<SearchIcon styleName="icon-search" />
@@ -531,6 +552,7 @@ class SubmissionsListView extends React.Component {
531552
SubmissionsListView.defaultProps = {
532553
selectSubmission: () => {},
533554
onSortChange: () => {},
555+
onShowDownloadArtifactsModal: () => {},
534556
};
535557

536558
SubmissionsListView.propTypes = {
@@ -548,6 +570,7 @@ SubmissionsListView.propTypes = {
548570
sort: PT.string,
549571
}).isRequired,
550572
onSortChange: PT.func,
573+
onShowDownloadArtifactsModal: PT.func,
551574
};
552575

553576
export default SubmissionsListView;

‎src/shared/components/challenge-detail/MySubmissions/SubmissionsList/styles.scss

+30
Original file line numberDiff line numberDiff line change
@@ -167,6 +167,13 @@ button.column-1-1,
167167
align-items: center;
168168
height: 56px;
169169

170+
.download-artifacts-button {
171+
svg {
172+
width: 24px;
173+
margin-left: 20px;
174+
}
175+
}
176+
170177
@include xs-to-sm {
171178
display: flex;
172179
flex-direction: column;
@@ -494,3 +501,26 @@ button.is-highlight {
494501
}
495502
}
496503
}
504+
505+
506+
.tooltip-content {
507+
background: $tc-black;
508+
color: $tc-white;
509+
border-radius: 8px;
510+
padding: 10px;
511+
512+
&::after {
513+
content: '';
514+
position: absolute;
515+
width: 0;
516+
height: 0;
517+
border-color: transparent;
518+
border-style: solid;
519+
bottom: 4px;
520+
margin-left: -5px;
521+
border-width: 5px 5px 0;
522+
left: 50%;
523+
border-top-color: $tc-black;
524+
z-index: 1000;
525+
}
526+
}

0 commit comments

Comments
 (0)