-
Notifications
You must be signed in to change notification settings - Fork 34
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: Add check to see if assets pre-exist when uploading (#384)
* chore: rename studio-* commands to cms-* in README * feat: Add check to see if assets pre-exist when uploading * chore: update endpoint used to confirm filename conflicts
- Loading branch information
Showing
17 changed files
with
422 additions
and
12 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
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
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
100 changes: 100 additions & 0 deletions
100
src/components/AssetsUploadConfirm/AssetsUploadConfirm.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,100 @@ | ||
| import React from 'react'; | ||
| import { Button, Modal } from '@edx/paragon'; | ||
|
|
||
| import AssetsUploadConfirm from './index'; | ||
| import { mountWithIntl } from '../../utils/i18n/enzymeHelper'; | ||
| import mockQuerySelector from '../../utils/mockQuerySelector'; | ||
|
|
||
| const defaultProps = { | ||
| filesToUpload: [], | ||
| uploadAssets: () => { }, | ||
| clearUploadConfirmProps: () => {}, | ||
| courseDetails: {}, | ||
| filenameConflicts: [], | ||
| }; | ||
|
|
||
| const modalIsClosed = (wrapper) => { | ||
| expect(wrapper.prop('filenameConflicts')).toEqual([]); | ||
| expect(wrapper.state('modalOpen')).toEqual(false); | ||
| expect(wrapper.find(Modal).prop('open')).toEqual(false); | ||
| }; | ||
|
|
||
| const modalIsOpen = (wrapper) => { | ||
| expect(wrapper.prop('filenameConflicts')).toBeTruthy(); | ||
| expect(wrapper.state('modalOpen')).toEqual(true); | ||
| expect(wrapper.find(Modal).prop('open')).toEqual(true); | ||
| }; | ||
|
|
||
| const errorMessageHasCorrectFiles = (wrapper, files) => { | ||
| const filenameConflicts = wrapper.prop('filenameConflicts'); | ||
| files.forEach((file) => { | ||
| expect(filenameConflicts).toContain(file); | ||
| }); | ||
| }; | ||
|
|
||
| let wrapper; | ||
|
|
||
| describe('AssetsUploadConfirm', () => { | ||
| beforeEach(() => { | ||
| mockQuerySelector.init(); | ||
| }); | ||
| afterEach(() => { | ||
| mockQuerySelector.reset(); | ||
| }); | ||
|
|
||
| describe('renders', () => { | ||
| beforeEach(() => { | ||
| wrapper = mountWithIntl( | ||
| <AssetsUploadConfirm | ||
| {...defaultProps} | ||
| />, | ||
| ); | ||
| }); | ||
|
|
||
| it('closed by default', () => { | ||
| modalIsClosed(wrapper); | ||
| }); | ||
|
|
||
| it('open if there is an error message', () => { | ||
| wrapper.setProps({ | ||
| filenameConflicts: ['asset.jpg'], | ||
| }); | ||
|
|
||
| modalIsOpen(wrapper); | ||
| errorMessageHasCorrectFiles(wrapper, ['asset.jpg']); | ||
| }); | ||
| }); | ||
| describe('behaves', () => { | ||
| it('Overwrite calls uploadAssets', () => { | ||
| const mockUploadAssets = jest.fn(); | ||
| const filesToUpload = [new File([''], 'file1')]; | ||
| const courseDetails = { | ||
| id: 'course-v1:edX+DemoX+Demo_Course', | ||
| }; | ||
| wrapper.setProps({ | ||
| filesToUpload, | ||
| courseDetails, | ||
| uploadAssets: mockUploadAssets, | ||
| }); | ||
|
|
||
| wrapper.find(Button).filterWhere(button => button.text() === 'Overwrite').simulate('click'); | ||
| expect(mockUploadAssets).toBeCalledWith(filesToUpload, courseDetails); | ||
| }); | ||
|
|
||
| it('clicking cancel button closes the status alert', () => { | ||
| wrapper.setProps({ | ||
| filenameConflicts: ['asset.jpg'], | ||
| clearUploadConfirmProps: () => { | ||
| wrapper.setProps({ | ||
| ...defaultProps, | ||
| }); | ||
| }, | ||
| }); | ||
|
|
||
| const modal = wrapper.find(Modal); | ||
| const cancelModalButton = modal.find('button').filterWhere(button => button.text() === 'Cancel'); | ||
| cancelModalButton.simulate('click'); | ||
| modalIsClosed(wrapper); | ||
| }); | ||
| }); | ||
| }); |
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,22 @@ | ||
| import { connect } from 'react-redux'; | ||
|
|
||
| import { uploadAssets, clearUploadConfirmProps } from '../../data/actions/assets'; | ||
| import AssetsUploadConfirm from '.'; | ||
|
|
||
| const mapStateToProps = state => ({ | ||
| filesToUpload: state.metadata.filesToUpload, | ||
| filenameConflicts: state.metadata.filenameConflicts, | ||
| courseDetails: state.studioDetails.course, | ||
| }); | ||
|
|
||
| const mapDispatchToProps = dispatch => ({ | ||
| uploadAssets: (assets, courseDetails) => dispatch(uploadAssets(assets, courseDetails)), | ||
| clearUploadConfirmProps: () => dispatch(clearUploadConfirmProps()), | ||
| }); | ||
|
|
||
| const WrappedAssetsUploadConfirm = connect( | ||
| mapStateToProps, | ||
| mapDispatchToProps, | ||
| )(AssetsUploadConfirm); | ||
|
|
||
| export default WrappedAssetsUploadConfirm; |
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,26 @@ | ||
| import { defineMessages } from 'react-intl'; | ||
|
|
||
| const messages = defineMessages({ | ||
| assetsUploadConfirmMessage: { | ||
| id: 'assetsUploadConfirmMessage', | ||
| defaultMessage: 'The following files will be overwritten: {listOfFiles}', | ||
| description: 'The message displayed in the modal shown when uploading files with pre-existing names', | ||
| }, | ||
| assetsUploadConfirmTitle: { | ||
| id: 'assetsUploadConfirmTitle', | ||
| defaultMessage: 'Overwrite Files', | ||
| description: 'The title of the modal to confirm overwriting the files', | ||
| }, | ||
| assetsUploadConfirmOverwrite: { | ||
| id: 'assetsUploadConfirmOverwrite', | ||
| defaultMessage: 'Overwrite', | ||
| description: 'The message displayed in the button to confirm overwriting the files', | ||
| }, | ||
| assetsUploadConfirmCancel: { | ||
| id: 'assetsUploadConfirmCancel', | ||
| defaultMessage: 'Cancel', | ||
| description: 'The message displayed in the button to confirm cancelling the upload', | ||
| }, | ||
| }); | ||
|
|
||
| export default messages; |
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,103 @@ | ||
| import React from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
| import { Button, Modal, Variant } from '@edx/paragon'; | ||
|
|
||
| import WrappedMessage from '../../utils/i18n/formattedMessageWrapper'; | ||
| import messages from './displayMessages'; | ||
|
|
||
| const defaultState = { | ||
| modalOpen: false, | ||
| }; | ||
| const modalWrapperID = 'modalWrapper'; | ||
|
|
||
| export default class AssetsUploadConfirm extends React.Component { | ||
| constructor(props) { | ||
| super(props); | ||
| this.state = defaultState; | ||
| } | ||
|
|
||
| componentWillReceiveProps(nextProps) { | ||
| const { filenameConflicts } = nextProps; | ||
| this.updateAlertOpenState(filenameConflicts); | ||
| } | ||
|
|
||
| updateAlertOpenState = (filenameConflicts) => { | ||
| this.setState({ | ||
| modalOpen: filenameConflicts.length !== 0, | ||
| }); | ||
| }; | ||
|
|
||
| uploadFiles = () => { | ||
| this.props.uploadAssets(this.props.filesToUpload, this.props.courseDetails); | ||
| }; | ||
|
|
||
| onClose = () => { | ||
| this.setState(defaultState); | ||
| this.props.clearUploadConfirmProps(); | ||
| }; | ||
|
|
||
| render() { | ||
| const { uploadFiles } = this; | ||
| const { modalOpen } = this.state; | ||
| const { filenameConflicts } = this.props; | ||
| const listOfFiles = ( | ||
| <ul> | ||
| { filenameConflicts.sort().map(item => <li key={item}>{item}</li>) } | ||
| </ul> | ||
| ); | ||
| const content = ( | ||
| <WrappedMessage | ||
| message={messages.assetsUploadConfirmMessage} | ||
| values={{ listOfFiles }} | ||
| /> | ||
| ); | ||
| const closeText = ( | ||
| <WrappedMessage message={messages.assetsUploadConfirmCancel} /> | ||
| ); | ||
| const button = ( | ||
| <Button | ||
| buttonType="primary" | ||
| label={<WrappedMessage message={messages.assetsUploadConfirmOverwrite} />} | ||
| onClick={uploadFiles} | ||
| /> | ||
| ); | ||
|
|
||
| return ( | ||
| <div id={modalWrapperID}> | ||
| <Modal | ||
| title={<WrappedMessage message={messages.assetsUploadConfirmTitle} />} | ||
| open={modalOpen} | ||
| body={content} | ||
| buttons={[button]} | ||
| onClose={this.onClose} | ||
| closeText={closeText} | ||
| variant={{ status: Variant.status.WARNING }} | ||
| parentSelector={`#${modalWrapperID}`} | ||
| /> | ||
| </div> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| AssetsUploadConfirm.propTypes = { | ||
| // eslint-disable-next-line react/forbid-prop-types | ||
| filesToUpload: PropTypes.arrayOf(PropTypes.object), | ||
| uploadAssets: PropTypes.func.isRequired, | ||
| clearUploadConfirmProps: PropTypes.func.isRequired, | ||
| courseDetails: PropTypes.shape({ | ||
| lang: PropTypes.string, | ||
| url_name: PropTypes.string, | ||
| name: PropTypes.string, | ||
| display_course_number: PropTypes.string, | ||
| num: PropTypes.string, | ||
| org: PropTypes.string, | ||
| id: PropTypes.string, | ||
| revision: PropTypes.string, | ||
| }).isRequired, | ||
| filenameConflicts: PropTypes.arrayOf(PropTypes.string), | ||
| }; | ||
|
|
||
| AssetsUploadConfirm.defaultProps = { | ||
| filesToUpload: [], | ||
| filenameConflicts: [], | ||
| }; |
Oops, something went wrong.