-
Notifications
You must be signed in to change notification settings - Fork 31
/
index.jsx
65 lines (58 loc) · 1.78 KB
/
index.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
import React from 'react';
import PropTypes from 'prop-types';
import { Button, Spinner } from '@edx/paragon';
import { FileDownload } from '@edx/paragon/icons';
import { sendEnterpriseTrackEvent } from '@edx/frontend-enterprise-utils';
import { FormattedMessage } from '@edx/frontend-platform/i18n';
export const CSV_CLICK_SEGMENT_EVENT_NAME = 'edx.ui.enterprise.admin_portal.download_csv.clicked';
class DownloadCsvButton extends React.Component {
componentWillUnmount() {
this.props.clearCsv();
}
render() {
const {
fetchMethod,
fetchCsv,
csvLoading,
disabled,
buttonLabel,
enterpriseId,
id,
} = this.props;
return (
<Button
variant="outline-primary"
className="download-btn d-sm-inline float-md-right"
disabled={disabled || csvLoading}
onClick={() => {
fetchCsv(fetchMethod);
sendEnterpriseTrackEvent(enterpriseId, CSV_CLICK_SEGMENT_EVENT_NAME, {
csvId: id,
});
}}
>
<>
{csvLoading ? <Spinner animation="border" variant="primary" className="mr-2" size="sm" /> : <FileDownload className="mr-2" />}
{buttonLabel || <FormattedMessage id="adminPortal.csv.download" defaultMessage="Download full report (CSV)" />}
</>
</Button>
);
}
}
DownloadCsvButton.defaultProps = {
csvLoading: false,
fetchMethod: () => {},
disabled: false,
buttonLabel: '',
};
DownloadCsvButton.propTypes = {
fetchCsv: PropTypes.func.isRequired,
fetchMethod: PropTypes.func,
csvLoading: PropTypes.bool,
clearCsv: PropTypes.func.isRequired,
disabled: PropTypes.bool,
buttonLabel: PropTypes.string,
enterpriseId: PropTypes.string.isRequired,
id: PropTypes.string.isRequired,
};
export default DownloadCsvButton;