-
Notifications
You must be signed in to change notification settings - Fork 32
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'master' into repo-tools/salman/add-dependabot-file-115c430
- Loading branch information
Showing
21 changed files
with
923 additions
and
223 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
101 changes: 101 additions & 0 deletions
101
src/components/AdvanceAnalyticsV2/DownloadCSVButton.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,101 @@ | ||
| import React, { useEffect, useState } from 'react'; | ||
| import { saveAs } from 'file-saver'; | ||
| import { useIntl } from '@edx/frontend-platform/i18n'; | ||
| import PropTypes from 'prop-types'; | ||
| import { | ||
| Toast, StatefulButton, Icon, Spinner, useToggle, | ||
| } from '@openedx/paragon'; | ||
| import { Download, Check, Close } from '@openedx/paragon/icons'; | ||
|
|
||
| const DownloadCSVButton = ({ | ||
| jsonData, csvFileName, | ||
| }) => { | ||
| const [buttonState, setButtonState] = useState('disabled'); | ||
| const [isToastShowing, showToast, hideToast] = useToggle(false); | ||
| const intl = useIntl(); | ||
|
|
||
| useEffect(() => { | ||
| if (jsonData.length > 0) { | ||
| setButtonState('default'); | ||
| } | ||
| }, [jsonData]); | ||
|
|
||
| const jsonToCSV = (json) => { | ||
| const fields = Object.keys(json[0]); | ||
| const replacer = (key, value) => (value === null ? '' : value); | ||
| const csv = json.map( | ||
| (row) => fields.map( | ||
| (fieldName) => JSON.stringify(row[fieldName], replacer), | ||
| ).join(','), | ||
| ); | ||
| csv.unshift(fields.join(',')); // add header column | ||
| return csv.join('\r\n'); | ||
| }; | ||
|
|
||
| const downloadCsv = () => { | ||
| setButtonState('pending'); | ||
| const csv = jsonToCSV(jsonData); | ||
| const blob = new Blob([csv], { type: 'text/csv' }); | ||
| saveAs(blob, csvFileName); | ||
| showToast(); | ||
| setButtonState('complete'); | ||
| }; | ||
|
|
||
| const toastText = intl.formatMessage({ | ||
| id: 'adminPortal.LPRV2.downloadCSV.toast', | ||
| defaultMessage: 'CSV Downloaded', | ||
| description: 'Toast message for the download button in the LPR V2 page.', | ||
| }); | ||
| return ( | ||
| <div className="d-flex justify-content-end"> | ||
| { isToastShowing | ||
| && ( | ||
| <Toast onClose={hideToast} show={showToast}> | ||
| {toastText} | ||
| </Toast> | ||
| )} | ||
| <StatefulButton | ||
| state={buttonState} | ||
| variant={buttonState === 'error' ? 'danger' : 'primary'} | ||
| data-testid="plotly-charts-download-csv-button" | ||
| disabledStates={['disabled', 'pending']} | ||
| labels={{ | ||
| default: intl.formatMessage({ | ||
| id: 'adminPortal.LPRV2.downloadCSV.button.default', | ||
| defaultMessage: 'Download CSV', | ||
| description: 'Label for the download button in the module activity report page.', | ||
| }), | ||
| pending: intl.formatMessage({ | ||
| id: 'adminPortal.LPRV2.downloadCSV.button.pending', | ||
| defaultMessage: 'Downloading CSV', | ||
| description: 'Label for the download button in the module activity report page when the download is in progress.', | ||
| }), | ||
| complete: intl.formatMessage({ | ||
| id: 'adminPortal.LPRV2.downloadCSV.button.complete', | ||
| defaultMessage: 'CSV Downloaded', | ||
| description: 'Label for the download button in the module activity report page when the download is complete.', | ||
| }), | ||
| error: intl.formatMessage({ | ||
| id: 'adminPortal.LPRV2.downloadCSV.button.error', | ||
| defaultMessage: 'Error', | ||
| description: 'Label for the download button in the module activity report page when the download fails.', | ||
| }), | ||
| }} | ||
| icons={{ | ||
| default: <Icon src={Download} />, | ||
| pending: <Spinner animation="border" variant="light" size="sm" />, | ||
| complete: <Icon src={Check} />, | ||
| error: <Icon src={Close} variant="light" size="sm" />, | ||
| }} | ||
| onClick={downloadCsv} | ||
| /> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| DownloadCSVButton.propTypes = { | ||
| jsonData: PropTypes.arrayOf(PropTypes.shape({})).isRequired, | ||
| csvFileName: PropTypes.string.isRequired, | ||
| }; | ||
|
|
||
| export default DownloadCSVButton; |
68 changes: 68 additions & 0 deletions
68
src/components/AdvanceAnalyticsV2/DownloadCSVButton.test.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,68 @@ | ||
| import React from 'react'; | ||
| import { IntlProvider } from '@edx/frontend-platform/i18n'; | ||
| import { render, screen } from '@testing-library/react'; | ||
| import userEvent from '@testing-library/user-event'; | ||
| import { saveAs } from 'file-saver'; | ||
| import DownloadCSVButton from './DownloadCSVButton'; | ||
| import '@testing-library/jest-dom/extend-expect'; | ||
|
|
||
| jest.mock('file-saver', () => ({ | ||
| ...jest.requireActual('file-saver'), | ||
| saveAs: jest.fn(), | ||
| })); | ||
|
|
||
| jest.mock('@edx/frontend-platform/logging', () => ({ | ||
| ...jest.requireActual('@edx/frontend-platform/logging'), | ||
| logError: jest.fn(), | ||
| })); | ||
| const mockJsonData = [ | ||
| { date: '2024-01-01', count: 10, enroll_type: 'verified' }, | ||
| { date: '2024-01-02', count: 20, enroll_type: 'certificate' }, | ||
| { date: '2024-01-03', count: 30, enroll_type: 'verified' }, | ||
| { date: '2024-01-04', count: 40, enroll_type: 'audit' }, | ||
| { date: '2024-01-05', count: 50, enroll_type: 'verified' }, | ||
| { date: '2024-01-06', count: 60, enroll_type: 'verified' }, | ||
| { date: '2024-01-07', count: 70, enroll_type: 'certificate' }, | ||
| { date: '2024-01-08', count: 80, enroll_type: 'verified' }, | ||
| { date: '2024-01-09', count: 90, enroll_type: 'certificate' }, | ||
| { date: '2024-01-10', count: 100, enroll_type: 'certificate' }, | ||
| ]; | ||
| let mockJsonAsCSV = 'date,count,enroll_type\n'; | ||
| for (let i = 0; i < mockJsonData.length; i++) { | ||
| mockJsonAsCSV += `${mockJsonData[i].date},${mockJsonData[i].count},${mockJsonData[i].enroll_type}\n`; | ||
| } | ||
|
|
||
| const DEFAULT_PROPS = { | ||
| jsonData: mockJsonData, | ||
| csvFileName: 'completions.csv', | ||
| }; | ||
| describe('DownloadCSVButton', () => { | ||
| const flushPromises = () => new Promise(setImmediate); | ||
|
|
||
| it('renders download csv button correctly', async () => { | ||
| render( | ||
| <IntlProvider locale="en"> | ||
| <DownloadCSVButton {...DEFAULT_PROPS} /> | ||
| </IntlProvider>, | ||
| ); | ||
|
|
||
| expect(screen.getByTestId('plotly-charts-download-csv-button')).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| it('handles successful CSV download', async () => { | ||
| render( | ||
| <IntlProvider locale="en"> | ||
| <DownloadCSVButton {...DEFAULT_PROPS} /> | ||
| </IntlProvider>, | ||
| ); | ||
|
|
||
| // Click the download button. | ||
| userEvent.click(screen.getByTestId('plotly-charts-download-csv-button')); | ||
| await flushPromises(); | ||
|
|
||
| expect(saveAs).toHaveBeenCalledWith( | ||
| new Blob([mockJsonAsCSV], { type: 'text/csv' }), | ||
| 'completions.csv', | ||
| ); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,50 +1,28 @@ | ||
| import React from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
| import DownloadCSV from './DownloadCSV'; | ||
|
|
||
| const Header = ({ | ||
| title, subtitle, startDate, endDate, isDownloadCSV, activeTab, granularity, calculation, chartType, enterpriseId, | ||
| title, subtitle, DownloadCSVComponent, | ||
| }) => ( | ||
| <div className="analytics-header d-flex justify-content-between row"> | ||
| <div className="col-8"> | ||
| <h2 className="analytics-header-title">{title}</h2> | ||
| {subtitle && <p className="analytics-header-subtitle">{subtitle}</p>} | ||
| </div> | ||
| {isDownloadCSV && ( | ||
| <div className="col-3 mr-0"> | ||
| <DownloadCSV | ||
| enterpriseId={enterpriseId} | ||
| startDate={startDate} | ||
| endDate={endDate} | ||
| activeTab={activeTab} | ||
| granularity={granularity} | ||
| calculation={calculation} | ||
| chartType={chartType} | ||
| /> | ||
| {DownloadCSVComponent} | ||
| </div> | ||
| )} | ||
| </div> | ||
| ); | ||
|
|
||
| Header.defaultProps = { | ||
| subtitle: undefined, | ||
| isDownloadCSV: false, | ||
| granularity: 'Daily', | ||
| calculation: 'Total', | ||
| chartType: '', | ||
| }; | ||
|
|
||
| Header.propTypes = { | ||
| title: PropTypes.string.isRequired, | ||
| subtitle: PropTypes.string, | ||
| isDownloadCSV: PropTypes.bool, | ||
| startDate: PropTypes.string.isRequired, | ||
| endDate: PropTypes.string.isRequired, | ||
| activeTab: PropTypes.string.isRequired, | ||
| enterpriseId: PropTypes.string.isRequired, | ||
| chartType: PropTypes.string, | ||
| granularity: PropTypes.string, | ||
| calculation: PropTypes.string, | ||
| DownloadCSVComponent: PropTypes.element.isRequired, | ||
| }; | ||
|
|
||
| export default Header; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.