@@ -193,6 +231,9 @@ AssetsPage.propTypes = {
id: PropTypes.string,
revision: PropTypes.string,
}).isRequired,
+ deletedAssetIndex: PropTypes.oneOfType([
+ PropTypes.number,
+ ]),
// eslint-disable-next-line react/no-unused-prop-types
filtersMetadata: PropTypes.shape({
assetTypes: PropTypes.object,
@@ -213,4 +254,9 @@ AssetsPage.propTypes = {
searchSettings: PropTypes.shape({
enabled: PropTypes.bool,
}).isRequired,
+ clearAssetDeletion: PropTypes.func.isRequired,
+};
+
+AssetsPage.defaultProps = {
+ deletedAssetIndex: null,
};
diff --git a/src/components/AssetsStatusAlert/AssetsStatusAlert.test.jsx b/src/components/AssetsStatusAlert/AssetsStatusAlert.test.jsx
new file mode 100644
index 00000000..2603e76c
--- /dev/null
+++ b/src/components/AssetsStatusAlert/AssetsStatusAlert.test.jsx
@@ -0,0 +1,355 @@
+import React from 'react';
+import { StatusAlert } from '@edx/paragon';
+
+import AssestStatusAlert from './index';
+import messages from './displayMessages';
+import WrappedMessage from '../../utils/i18n/formattedMessageWrapper';
+import { assetActions } from '../../data/constants/actionTypes';
+import { mountWithIntl } from '../../utils/i18n/enzymeHelper';
+import { testAssetsList } from '../../utils/testConstants';
+
+const statusAlertIsClosed = (wrapper) => {
+ expect(wrapper.state('statusAlertFields').alertDialog).toEqual('');
+ expect(wrapper.state('statusAlertFields').alertType).toEqual('info');
+ expect(wrapper.state('statusAlertOpen')).toEqual(false);
+ expect(wrapper.state('uploadSuccessCount')).toEqual(1);
+};
+
+const statusAlertIsOpen = (wrapper) => {
+ expect(wrapper.state('statusAlertOpen')).toEqual(true);
+ expect(wrapper.find(StatusAlert).exists()).toEqual(true);
+};
+
+const statusAlertIsCorrectType = (wrapper, alertType) => {
+ const statusAlert = wrapper.find(StatusAlert);
+ const statusAlertType = statusAlert.prop('alertType');
+
+ expect(statusAlertType).toEqual(alertType);
+ expect(statusAlert.find('div').first().hasClass(`alert-${alertType}`)).toEqual(true);
+};
+
+const statusAlertHasCorrectMessage = (wrapper, message) => {
+ const statusAlert = wrapper.find(StatusAlert);
+ const statusAlertMessage = statusAlert.find(WrappedMessage);
+
+ expect(statusAlertMessage.prop('message')).toEqual(message);
+};
+
+const triggerOpenStatusAlertWithType = (wrapper, type, extraProps = {}) => {
+ wrapper.setProps({
+ assetsStatus: {
+ type,
+ ...extraProps,
+ },
+ });
+};
+
+const assetName = testAssetsList[0].display_name;
+
+const testData = [
+ {
+ actionType: assetActions.delete.DELETE_ASSET_FAILURE,
+ alertType: 'danger',
+ message: messages.assetsStatusAlertCantDelete,
+ extraProps: {
+ assetName,
+ },
+ },
+ {
+ actionType: assetActions.delete.DELETE_ASSET_SUCCESS,
+ alertType: 'success',
+ message: messages.assetsStatusAlertDeleteSuccess,
+ extraProps: {
+ assetName,
+ },
+ },
+ {
+ actionType: assetActions.upload.UPLOAD_ASSET_SUCCESS,
+ alertType: 'success',
+ message: messages.assetsStatusAlertUploadSuccess,
+ extraProps: {},
+ },
+ {
+ actionType: assetActions.upload.UPLOADING_ASSETS,
+ alertType: 'info',
+ message: messages.assetsStatusAlertUploadInProgress,
+ extraProps: {
+ count: 1,
+ },
+ },
+ {
+ actionType: assetActions.upload.UPLOAD_EXCEED_MAX_COUNT_ERROR,
+ alertType: 'danger',
+ message: messages.assetsStatusAlertTooManyFiles,
+ extraProps: {
+ maxFileCount: 1,
+ },
+ },
+ {
+ actionType: assetActions.upload.UPLOAD_EXCEED_MAX_SIZE_ERROR,
+ alertType: 'danger',
+ message: messages.assetsStatusAlertTooMuchData,
+ extraProps: {
+ maxFileSizeMB: 1,
+ },
+ },
+ {
+ actionType: assetActions.upload.UPLOAD_ASSET_FAILURE,
+ alertType: 'danger',
+ message: messages.assetsStatusAlertGenericError,
+ extraProps: {
+ asset: { name: assetName },
+ },
+ },
+ {
+ actionType: assetActions.lock.TOGGLING_LOCK_ASSET_FAILURE,
+ alertType: 'danger',
+ message: messages.assetsStatusAlertFailedLock,
+ extraProps: {
+ asset: { name: assetName },
+ },
+ },
+ {
+ actionType: assetActions.clear.CLEAR_FILTERS_FAILURE,
+ alertType: 'danger',
+ message: messages.assetsStatusAlertGenericUpdateError,
+ extraProps: {},
+ },
+ {
+ actionType: assetActions.filter.FILTER_UPDATE_FAILURE,
+ alertType: 'danger',
+ message: messages.assetsStatusAlertGenericUpdateError,
+ extraProps: {},
+ },
+
+ {
+ actionType: assetActions.paginate.PAGE_UPDATE_FAILURE,
+ alertType: 'danger',
+ message: messages.assetsStatusAlertGenericUpdateError,
+ extraProps: {},
+ },
+
+ {
+ actionType: assetActions.sort.SORT_UPDATE_FAILURE,
+ alertType: 'danger',
+ message: messages.assetsStatusAlertGenericUpdateError,
+ extraProps: {},
+ },
+];
+
+const defaultProps = {
+ assetsStatus: {},
+ clearAssetsStatus: () => { },
+ deletedAsset: {},
+ onDeleteStatusAlertClose: () => { },
+};
+
+let wrapper;
+
+describe('AssetsStatusAlert', () => {
+ describe('renders', () => {
+ testData.forEach((test) => {
+ it(`on ${test.actionType}`, () => {
+ wrapper = mountWithIntl(
+
,
+ );
+
+ wrapper.setProps({
+ assetsStatus: {
+ type: test.actionType,
+ ...test.extraProps,
+ },
+ });
+
+ statusAlertIsOpen(wrapper);
+ statusAlertIsCorrectType(wrapper, test.alertType);
+ statusAlertHasCorrectMessage(wrapper, test.message);
+ });
+ });
+
+ it('closed by the default', () => {
+ wrapper = mountWithIntl(
+
,
+ );
+
+ statusAlertIsClosed(wrapper);
+ });
+
+ it('calls statusAlertRef prop', () => {
+ const statusAlertRefSpy = jest.fn();
+
+ wrapper = mountWithIntl(
+
,
+ );
+
+ expect(statusAlertRefSpy).toHaveBeenCalledTimes(1);
+ });
+ });
+ describe('behaves', () => {
+ it('opening status alert focuses on the close button', () => {
+ wrapper = mountWithIntl(
+
,
+ );
+
+ triggerOpenStatusAlertWithType(wrapper, assetActions.sort.SORT_UPDATE_FAILURE);
+
+ const statusAlert = wrapper.find(StatusAlert);
+ const closeStatusAlertButton = statusAlert.find('button').filterWhere(button => button.text() === '×');
+
+ expect(closeStatusAlertButton.html()).toEqual(document.activeElement.outerHTML);
+ });
+
+ it('clicking close button closes the status alert', () => {
+ wrapper = mountWithIntl(
+
,
+ );
+
+ triggerOpenStatusAlertWithType(wrapper, assetActions.sort.SORT_UPDATE_FAILURE);
+
+ const statusAlert = wrapper.find(StatusAlert);
+ const closeStatusAlertButton = statusAlert.find('button').filterWhere(button => button.text() === '×');
+
+ closeStatusAlertButton.simulate('click');
+ statusAlertIsClosed(wrapper);
+ });
+
+ it('clicking close button calls clearAssetsStatusProp', () => {
+ const clearAssetsStatusSpy = jest.fn();
+
+ wrapper = mountWithIntl(
+
,
+ );
+
+ triggerOpenStatusAlertWithType(wrapper, assetActions.sort.SORT_UPDATE_FAILURE);
+
+ const statusAlert = wrapper.find(StatusAlert);
+ const closeStatusAlertButton = statusAlert.find('button').filterWhere(button => button.text() === '×');
+
+ closeStatusAlertButton.simulate('click');
+ expect(clearAssetsStatusSpy).toHaveBeenCalledTimes(1);
+ });
+
+ it('clicking close button on delete status alert closes the status alert', () => {
+ wrapper = mountWithIntl(
+
,
+ );
+
+ const extraProps = {
+ asset: { name: assetName },
+ };
+
+ triggerOpenStatusAlertWithType(wrapper, assetActions.delete.DELETE_ASSET_SUCCESS, extraProps);
+
+ const statusAlert = wrapper.find(StatusAlert);
+ const closeStatusAlertButton = statusAlert.find('button').filterWhere(button => button.text() === '×');
+
+ closeStatusAlertButton.simulate('click');
+ statusAlertIsClosed(wrapper);
+ });
+
+ it('clicking close button calls clearAssetsStatusProp', () => {
+ const clearAssetsStatusSpy = jest.fn();
+
+ wrapper = mountWithIntl(
+
,
+ );
+
+ const extraProps = {
+ asset: { name: assetName },
+ };
+
+ triggerOpenStatusAlertWithType(wrapper, assetActions.delete.DELETE_ASSET_SUCCESS, extraProps);
+
+ const statusAlert = wrapper.find(StatusAlert);
+ const closeStatusAlertButton = statusAlert.find('button').filterWhere(button => button.text() === '×');
+
+ closeStatusAlertButton.simulate('click');
+ expect(clearAssetsStatusSpy).toHaveBeenCalledTimes(1);
+ });
+
+ it('clicking close button calls onDeleteStatusAlertClose', () => {
+ const onDeleteStatusAlertCloseSpy = jest.fn();
+
+ wrapper = mountWithIntl(
+
,
+ );
+
+ const extraProps = {
+ asset: { name: assetName },
+ };
+
+ triggerOpenStatusAlertWithType(wrapper, assetActions.delete.DELETE_ASSET_SUCCESS, extraProps);
+
+ const statusAlert = wrapper.find(StatusAlert);
+ const closeStatusAlertButton = statusAlert.find('button').filterWhere(button => button.text() === '×');
+
+ closeStatusAlertButton.simulate('click');
+ expect(onDeleteStatusAlertCloseSpy).toHaveBeenCalledTimes(1);
+ });
+
+ it('increments uploadSuccessCount on UPLOAD_ASSET_SUCCESS', () => {
+ wrapper = mountWithIntl(
+
,
+ );
+
+ const initialUploadSuccessCount = wrapper.state('uploadSuccessCount');
+
+ triggerOpenStatusAlertWithType(wrapper, assetActions.upload.UPLOAD_ASSET_SUCCESS);
+
+ expect(wrapper.state('uploadSuccessCount')).toEqual(initialUploadSuccessCount + 1);
+ });
+
+ it('default updateStatusAlertFields condition does not modify status alert from default status alert state', () => {
+ wrapper = mountWithIntl(
+
,
+ );
+
+ // SORT_UPDATE will hit the default case of the switch statement in updateStatusAlertFields
+ triggerOpenStatusAlertWithType(wrapper, assetActions.sort.SORT_UPDATE);
+
+ statusAlertIsClosed(wrapper);
+ });
+
+ it('default updateStatusAlertFields condition does not modify status alert from open status alert', () => {
+ wrapper = mountWithIntl(
+
,
+ );
+
+ triggerOpenStatusAlertWithType(wrapper, assetActions.sort.SORT_UPDATE_FAILURE);
+
+ const initialState = wrapper.state();
+
+ triggerOpenStatusAlertWithType(wrapper, assetActions.sort.SORT_UPDATE);
+
+ expect(initialState).toEqual(wrapper.state());
+ });
+ });
+});
diff --git a/src/components/AssetsStatusAlert/container.jsx b/src/components/AssetsStatusAlert/container.jsx
new file mode 100644
index 00000000..025ba749
--- /dev/null
+++ b/src/components/AssetsStatusAlert/container.jsx
@@ -0,0 +1,20 @@
+import { connect } from 'react-redux';
+
+import { clearAssetsStatus } from '../../data/actions/assets';
+import AssetsStatusAlert from '.';
+
+const mapStateToProps = state => ({
+ assetsStatus: state.metadata.status,
+ deletedAsset: state.metadata.deletion.deletedAsset,
+});
+
+const mapDispatchToProps = dispatch => ({
+ clearAssetsStatus: () => dispatch(clearAssetsStatus()),
+});
+
+const WrappedAssetsStatusAlert = connect(
+ mapStateToProps,
+ mapDispatchToProps,
+)(AssetsStatusAlert);
+
+export default WrappedAssetsStatusAlert;
diff --git a/src/components/AssetsStatusAlert/displayMessages.jsx b/src/components/AssetsStatusAlert/displayMessages.jsx
new file mode 100644
index 00000000..f468541b
--- /dev/null
+++ b/src/components/AssetsStatusAlert/displayMessages.jsx
@@ -0,0 +1,56 @@
+import { defineMessages } from 'react-intl';
+
+const messages = defineMessages({
+ assetsStatusAlertGenericUpdateError: {
+ id: 'assetsTableGenericUpdateError',
+ defaultMessage: 'The action could not be completed. Refresh the page, and then try the action again.',
+ description: 'States that the action could not be completed and asks the user to refresh the page and try the action again',
+ },
+ assetsStatusAlertCantDelete: {
+ id: 'assetsTableCantDelete',
+ defaultMessage: 'Unable to delete {assetName}.',
+ description: 'States that an item could not be deleted',
+ },
+ assetsStatusAlertDeleteSuccess: {
+ id: 'assetsTableDeleteSuccess',
+ defaultMessage: '{assetName} has been deleted.',
+ description: 'States that an item was successfully deleted',
+ },
+ assetsStatusAlertUploadSuccess: {
+ id: 'assetsTableUploadSuccess',
+ defaultMessage: '{uploaded_count} files successfully uploaded.',
+ description: 'States that files were successfully uploaded',
+ },
+ assetsStatusAlertUploadInProgress: {
+ id: 'assetsTableUploadInProgress',
+ defaultMessage: '{uploading_count} files uploading.',
+ description: 'States that the file upload operation is in progress',
+ },
+ assetsStatusAlertTooManyFiles: {
+ id: 'assetsTableTooManyFiles',
+ defaultMessage: 'The maximum number of files for an upload is {max_count}. No files were uploaded.',
+ description: 'Error message shown when too many files are selected for upload',
+ },
+ assetsStatusAlertTooMuchData: {
+ id: 'assetsTableTooMuchData',
+ defaultMessage: 'The maximum size for an upload is {max_size} MB. No files were uploaded.',
+ description: 'Error message shown when too much data is being uploaded',
+ },
+ assetsStatusAlertGenericError: {
+ id: 'assetsTableGenericError',
+ defaultMessage: 'Error uploading {assetName}. Try again.',
+ description: 'Generic error message while uploading files',
+ },
+ assetsStatusAlertFailedLock: {
+ id: 'assetsTableFailedLock',
+ defaultMessage: 'Failed to toggle lock for {assetName}.',
+ description: 'States that there was a failure toggling an item\'s lock status',
+ },
+ assetsStatusAlertLoadingStatus: {
+ id: 'assetsTableLoadingStatus',
+ defaultMessage: 'Loading',
+ description: 'Indicates something is loading',
+ },
+});
+
+export default messages;
diff --git a/src/components/AssetsStatusAlert/index.jsx b/src/components/AssetsStatusAlert/index.jsx
new file mode 100644
index 00000000..50421cb5
--- /dev/null
+++ b/src/components/AssetsStatusAlert/index.jsx
@@ -0,0 +1,211 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { StatusAlert } from '@edx/paragon';
+import { FormattedNumber } from 'react-intl';
+
+import { assetActions } from '../../data/constants/actionTypes';
+import WrappedMessage from '../../utils/i18n/formattedMessageWrapper';
+import messages from './displayMessages';
+
+const defaultState = {
+ statusAlertFields: {
+ alertDialog: '',
+ alertType: 'info',
+ },
+ statusAlertOpen: false,
+ uploadSuccessCount: 1,
+};
+
+export default class AssetsStatusAlert extends React.Component {
+ constructor(props) {
+ super(props);
+ this.state = defaultState;
+
+ this.statusAlertRef = {};
+
+ this.closeStatusAlert = this.closeStatusAlert.bind(this);
+ this.updateStatusAlertFields = this.updateStatusAlertFields.bind(this);
+ this.updateUploadSuccessCount = this.updateUploadSuccessCount.bind(this);
+
+ this.closeDeleteStatus = this.closeDeleteStatus.bind(this);
+ }
+
+ componentWillReceiveProps(nextProps) {
+ const { assetsStatus, deletedAsset } = nextProps;
+ this.updateStatusAlertFields(assetsStatus, deletedAsset);
+ }
+
+ updateStatusAlertFields(assetsStatus, deletedAsset) {
+ const assetName = deletedAsset.display_name;
+ let alertDialog;
+ let alertType;
+
+ const genericUpdateError = (
+
+ );
+
+ switch (assetsStatus.type) {
+ case assetActions.delete.DELETE_ASSET_FAILURE:
+ alertDialog = (
+
+ );
+ alertType = 'danger';
+ break;
+ case assetActions.delete.DELETE_ASSET_SUCCESS:
+ alertDialog = (
+
+ );
+ alertType = 'success';
+ break;
+ case assetActions.upload.UPLOAD_ASSET_SUCCESS:
+ this.updateUploadSuccessCount();
+ alertDialog = (
+
) }}
+ />
+ );
+ alertType = 'success';
+ break;
+ case assetActions.upload.UPLOADING_ASSETS:
+ this.closeStatusAlert();
+ alertDialog = (
+
) }}
+ />
+ );
+ alertType = 'info';
+ break;
+ case assetActions.upload.UPLOAD_EXCEED_MAX_COUNT_ERROR:
+ alertDialog = (
+
) }}
+ />
+ );
+ alertType = 'danger';
+ break;
+ case assetActions.upload.UPLOAD_EXCEED_MAX_SIZE_ERROR:
+ alertDialog = (
+
) }}
+ />
+ );
+ alertType = 'danger';
+ break;
+ case assetActions.upload.UPLOAD_ASSET_FAILURE:
+ alertDialog = (
+
+ );
+ alertType = 'danger';
+ break;
+ case assetActions.lock.TOGGLING_LOCK_ASSET_FAILURE:
+ alertDialog = (
+
+ );
+ alertType = 'danger';
+ break;
+ case assetActions.clear.CLEAR_FILTERS_FAILURE:
+ case assetActions.filter.FILTER_UPDATE_FAILURE:
+ case assetActions.paginate.PAGE_UPDATE_FAILURE:
+ case assetActions.sort.SORT_UPDATE_FAILURE:
+ alertDialog = genericUpdateError;
+ alertType = 'danger';
+ break;
+ default:
+ return;
+ }
+
+ this.setState({
+ statusAlertOpen: true,
+ statusAlertFields: {
+ alertDialog,
+ alertType,
+ },
+ });
+ this.statusAlertRef.focus();
+ }
+
+ closeDeleteStatus = () => {
+ this.closeStatusAlert();
+ this.props.onDeleteStatusAlertClose();
+ }
+
+ closeStatusAlert() {
+ this.props.clearAssetsStatus();
+
+ // clear out all status related state
+ this.setState(defaultState);
+ }
+
+ updateUploadSuccessCount() {
+ this.setState({
+ uploadSuccessCount: this.state.uploadSuccessCount + 1,
+ });
+ }
+
+ render() {
+ const { assetsStatus, statusAlertRef } = this.props;
+ const { statusAlertFields, statusAlertOpen } = this.state;
+
+ let onClose = this.closeStatusAlert;
+ if (Object.prototype.hasOwnProperty.call(assetActions.delete, assetsStatus.type)) {
+ onClose = this.closeDeleteStatus;
+ }
+
+ return (
+
{
+ this.statusAlertRef = input;
+ statusAlertRef(input);
+ }}
+ />
+ );
+ }
+}
+
+AssetsStatusAlert.propTypes = {
+ assetsStatus: PropTypes.shape({
+ response: PropTypes.object,
+ type: PropTypes.string,
+ }).isRequired,
+ clearAssetsStatus: PropTypes.func.isRequired,
+ deletedAsset: PropTypes.shape({
+ display_name: PropTypes.string,
+ content_type: PropTypes.string,
+ url: PropTypes.string,
+ date_added: PropTypes.string,
+ id: PropTypes.string,
+ portable_url: PropTypes.string,
+ thumbnail: PropTypes.string,
+ external_url: PropTypes.string,
+ }),
+ onDeleteStatusAlertClose: PropTypes.func.isRequired,
+ statusAlertRef: PropTypes.func,
+};
+
+AssetsStatusAlert.defaultProps = {
+ assetsStatus: {},
+ deletedAsset: {},
+ statusAlertRef: () => {},
+};
diff --git a/src/components/AssetsTable/AssetsTable.test.jsx b/src/components/AssetsTable/AssetsTable.test.jsx
index 79cfe913..66935168 100644
--- a/src/components/AssetsTable/AssetsTable.test.jsx
+++ b/src/components/AssetsTable/AssetsTable.test.jsx
@@ -1,59 +1,32 @@
import React from 'react';
-import { StatusAlert } from '@edx/paragon';
import AssetsTable from './index';
-
-import { mountWithIntl } from '../../utils/i18n/enzymeHelper';
+import courseDetails, { testAssetsList } from '../../utils/testConstants';
import { assetActions } from '../../data/constants/actionTypes';
import { assetLoading } from '../../data/constants/loadingTypes';
-import courseDetails from '../../utils/testConstants';
+import { mountWithIntl } from '../../utils/i18n/enzymeHelper';
+import AssetsStatusAlert from '../AssetsStatusAlert/index';
-const thumbnail = '/animal';
-const copyUrl = 'animal';
+const getStatusAlert = () => (
+ {}}
+ onDeleteStatusAlertClose={() => {}}
+ />);
const defaultProps = {
- assetsList: [
- {
- display_name: 'cat.jpg',
- id: 'cat.jpg',
- thumbnail,
- locked: false,
- portable_url: copyUrl,
- external_url: copyUrl,
- },
- {
- display_name: 'dog.png',
- id: 'dog.png',
- thumbnail,
- locked: true,
- portable_url: null,
- external_url: null,
- },
- {
- display_name: 'bird.json',
- id: 'bird.json',
- thumbnail: null,
- locked: false,
- portable_url: null,
- external_url: copyUrl,
- },
- {
- display_name: 'fish.doc',
- id: 'fish.doc',
- thumbnail: null,
- locked: false,
- portable_url: copyUrl,
- external_url: null,
- },
- ],
+ assetsList: testAssetsList,
assetsSortMetadata: {},
assetsStatus: {},
+ assetToDelete: {},
courseDetails,
courseFilesDocs: 'testUrl',
clearAssetsStatus: () => {},
deleteAsset: () => {},
- updateSort: () => {},
+ stageAssetDeletion: () => {},
+ statusAlertRef: getStatusAlert(),
toggleLockAsset: () => {},
+ unstageAssetDeletion: () => {},
+ updateSort: () => {},
};
const defaultColumns = [
@@ -90,19 +63,6 @@ const defaultColumns = [
},
];
-const clearStatus = (wrapper) => {
- wrapper.setProps({ assetsStatus: {} });
-};
-
-const getMockForDeleteAsset = (wrapper, assetToDeleteId) => (
- jest.fn(() => {
- wrapper.setProps({
- assetsList: defaultProps.assetsList.filter(asset => asset.id !== assetToDeleteId),
- assetsStatus: { type: assetActions.delete.DELETE_ASSET_SUCCESS },
- });
- })
-);
-
const getMockForTogglingLockAsset = (wrapper, assetToToggle) => (
jest.fn(() => {
wrapper.setProps({
@@ -353,6 +313,21 @@ describe('', () => {
expect(wrapper.state('modalOpen')).toEqual(false);
});
+ it('calls unstageAssetDeletion when Cancel button clicked', () => {
+ const unstageAssetDeletionSpy = jest.fn();
+
+ wrapper.setProps({
+ unstageAssetDeletion: unstageAssetDeletionSpy,
+ });
+
+ const trashButtons = wrapper.find('button').filterWhere(button => button.hasClass('fa-trash'));
+ trashButtons.at(0).simulate('click');
+
+ const closeButton = modal.find('button').filterWhere(button => button.text() === 'Cancel');
+ closeButton.simulate('click');
+
+ expect(unstageAssetDeletionSpy).toHaveBeenCalledTimes(1);
+ });
});
describe('deleteAsset', () => {
it('calls deleteAsset function prop correctly', () => {
@@ -362,6 +337,7 @@ describe('', () => {
,
);
@@ -373,11 +349,11 @@ describe('', () => {
expect(deleteAssetSpy).toHaveBeenCalledTimes(1);
expect(deleteAssetSpy).toHaveBeenCalledWith(
- defaultProps.assetsList[0].id,
+ defaultProps.assetsList[0],
defaultProps.courseDetails,
);
});
- it('closes on deleteAsset call', () => {
+ it('closes modal on deleteAsset call', () => {
wrapper = mountWithIntl(
', () => {
trashButtons.at(0).simulate('click');
expect(wrapper.state('modalOpen')).toEqual(true);
});
- it('sets assetToDelete correctly', () => {
- const trashButtonAriaLabel = `Delete ${defaultProps.assetsList[0].display_name}`;
- expect(trashButtons.at(0).prop('aria-label')).toEqual(trashButtonAriaLabel);
+ it('calls stageAssetDeletion prop', () => {
+ const stageAssetDeletionSpy = jest.fn();
+
+ wrapper.setProps({
+ stageAssetDeletion: stageAssetDeletionSpy,
+ });
trashButtons.at(0).simulate('click');
- expect(wrapper.state('assetToDelete')).toEqual(defaultProps.assetsList[0]);
+
+ expect(stageAssetDeletionSpy).toHaveBeenCalledTimes(1);
+ expect(stageAssetDeletionSpy).toHaveBeenCalledWith(defaultProps.assetsList[0], 0);
});
it('sets elementToFocusOnModalClose correctly', () => {
trashButtons.at(0).simulate('click');
@@ -427,7 +408,6 @@ describe('', () => {
let closeButton;
let modal;
let trashButtons;
- let mockDeleteAsset;
beforeEach(() => {
wrapper = mountWithIntl(
@@ -451,109 +431,14 @@ describe('', () => {
expect(trashButtons.at(0).html()).toEqual(document.activeElement.outerHTML);
});
-
- it('moves from modal to status alert on asset delete', () => {
- const deleteButton = wrapper.find('[role="dialog"] button').filterWhere(button => button.hasClass('btn-primary') && button.text() === 'Permanently delete');
- trashButtons.at(0).simulate('click');
- expect(closeButton.html()).toEqual(document.activeElement.outerHTML);
-
- mockDeleteAsset = getMockForDeleteAsset(wrapper, 0);
- wrapper.setProps({ deleteAsset: mockDeleteAsset });
- deleteButton.simulate('click');
- const statusAlert = wrapper.find(StatusAlert);
- const closeStatusAlertButton = statusAlert.find('button').filterWhere(button => button.text() === '×');
- expect(closeStatusAlertButton.html()).toEqual(document.activeElement.outerHTML);
- });
-
- const testData = [
- {
- assetToDeleteIndex: 0,
- trashButtonIndex: 0,
- newFocusIndex: 0,
- },
- {
- assetToDeleteIndex: 2,
- trashButtonIndex: 2,
- newFocusIndex: 1,
- },
- ];
-
- testData.forEach((test) => {
- it(`moves to correct asset trashcan icon after asset ${test.assetToDeleteIndex} deleted`, () => {
- const assetToDeleteId = defaultProps.assetsList[test.assetToDeleteIndex].id;
-
- mockDeleteAsset = getMockForDeleteAsset(wrapper, assetToDeleteId);
-
- wrapper.setProps({ deleteAsset: mockDeleteAsset });
-
- const deleteButton = wrapper.find('[role="dialog"] button').filterWhere(button => button.hasClass('btn-primary') && button.text() === 'Permanently delete');
-
- trashButtons.at(test.trashButtonIndex).simulate('click');
-
- deleteButton.simulate('click');
- expect(mockDeleteAsset).toHaveBeenCalledTimes(1);
-
- const statusAlert = wrapper.find(StatusAlert);
- const closeStatusAlertButton = statusAlert.find('button').filterWhere(button => button.text() === '×');
- wrapper.setProps({
- clearAssetsStatus: () => clearStatus(wrapper),
- });
- closeStatusAlertButton.simulate('click');
-
- expect(mockDeleteAsset).toHaveBeenCalledTimes(1);
- expect(mockDeleteAsset).toHaveBeenCalledWith(
- assetToDeleteId,
- defaultProps.courseDetails,
- );
-
- // This gets the new trashcans after the asset delete.
- trashButtons = wrapper.find('button').filterWhere(button => button.hasClass('fa-trash'));
-
- expect(trashButtons.at(test.newFocusIndex).html())
- .toEqual(document.activeElement.outerHTML);
- });
- });
- });
- describe('status alert', () => {
- describe('renders', () => {
- const assetsStatuses = [
- assetActions.clear.CLEAR_FILTERS_FAILURE,
- assetActions.filter.FILTER_UPDATE_FAILURE,
- assetActions.paginate.PAGE_UPDATE_FAILURE,
- assetActions.sort.SORT_UPDATE_FAILURE,
- ];
-
- beforeEach(() => {
- wrapper = mountWithIntl(
- ,
- );
- });
-
- assetsStatuses.forEach((statusType) => {
- it(`on ${statusType}`, () => {
- const assetsStatus = {
- type: statusType,
- };
-
- wrapper.setProps({
- assetsStatus,
- });
-
- const statusAlert = wrapper.find(StatusAlert);
- expect(statusAlert.prop('alertType')).toEqual('danger');
- expect(statusAlert.find('.alert-dialog').text()).toEqual('The action could not be completed. Refresh the page, and then try the action again.');
- });
- });
- });
});
});
-describe('Lock asset', () => {
+describe('Lock Asset', () => {
const getLockedButtons = () => wrapper.find('button .fa-lock');
const getUnlockedButtons = () => wrapper.find('button .fa-unlock');
const getLockingButtons = () => wrapper.find('button > .fa-spinner');
+
beforeEach(() => {
wrapper = mountWithIntl(
{
/>,
);
});
+
it('renders icons and buttons', () => {
const lockedButtons = getLockedButtons();
expect(lockedButtons).toHaveLength(1);
@@ -568,6 +454,7 @@ describe('Lock asset', () => {
const unlockedButtons = getUnlockedButtons();
expect(unlockedButtons).toHaveLength(3);
});
+
it('can toggle state', () => {
const assetToToggle = 'dog.png';
const mockToggle = getMockForTogglingLockAsset(wrapper, assetToToggle);
@@ -600,172 +487,4 @@ describe('Lock asset', () => {
expect(getUnlockedButtons()).toHaveLength(4);
expect(getLockedButtons()).toHaveLength(0);
});
- it('displays locking errors', () => {
- wrapper.setProps({
- assetsStatus: {
- response: {},
- type: assetActions.lock.TOGGLING_LOCK_ASSET_FAILURE,
- asset: { name: 'marmoset.png' },
- },
- });
- const statusAlert = wrapper.find(StatusAlert);
- expect(statusAlert.prop('alertType')).toEqual('danger');
- expect(statusAlert.find('.alert-dialog').text()).toEqual('Failed to toggle lock for marmoset.png.');
- });
-});
-
-describe('displays status alert properly', () => {
- it('renders success alert on success', () => {
- wrapper = mountWithIntl(
- ,
- );
-
- wrapper.setProps({
- assetsStatus: {
- response: {},
- type: assetActions.delete.DELETE_ASSET_SUCCESS,
- },
- });
- const statusAlert = wrapper.find(StatusAlert);
- const statusAlertType = statusAlert.prop('alertType');
-
- expect(statusAlertType).toEqual('success');
- expect(statusAlert.find('div').first().hasClass('alert-success')).toEqual(true);
- });
-
- it('renders danger alert on error', () => {
- wrapper = mountWithIntl(
- ,
- );
-
- wrapper.setProps({
- assetsStatus: {
- response: {},
- type: assetActions.delete.DELETE_ASSET_FAILURE,
- },
- });
- const statusAlert = wrapper.find(StatusAlert);
- const statusAlertType = statusAlert.prop('alertType');
-
- expect(statusAlertType).toEqual('danger');
- expect(statusAlert.find('div').first().hasClass('alert-danger')).toEqual(true);
- });
-
- it('hides the alert when state cleared', () => {
- wrapper = mountWithIntl(
- ,
- );
- let statusAlert = wrapper.find(StatusAlert);
-
- statusAlert = wrapper.find(StatusAlert);
- expect(statusAlert).toBeDefined();
-
- wrapper.setState({ assetsStatus: {} });
- statusAlert = wrapper.find(StatusAlert);
- expect(statusAlert.find('.alert-dialog').text()).toEqual('');
- });
-
- it('clears uploading assets on keyDown', () => {
- wrapper = mountWithIntl(
- ,
- );
- wrapper.setProps({
- clearAssetsStatus: () => clearStatus(wrapper),
- });
- wrapper.setProps({ assetsStatus: { type: assetActions.upload.UPLOADING_ASSETS, count: 77 } });
-
- let statusAlert = wrapper.find(StatusAlert);
- expect(statusAlert.find('.alert-dialog').text()).toEqual('77 files uploading.');
-
- statusAlert.find('button').at(0).simulate('keyDown', { key: 'Enter' });
- expect(wrapper.props().assetsStatus).toEqual({});
-
- statusAlert = wrapper.find(StatusAlert);
- expect(statusAlert.find('.alert-dialog').text()).toEqual('');
- });
-});
-
-describe('Upload statuses', () => {
- beforeEach(() => {
- wrapper = mountWithIntl(
- ,
- );
- });
-
- it('renders uploading', () => {
- wrapper.setProps({
- assetsStatus: {
- type: assetActions.upload.UPLOADING_ASSETS,
- count: 885,
- },
- });
- const statusAlert = wrapper.find(StatusAlert);
- expect(statusAlert.find('.alert-dialog').text()).toEqual('885 files uploading.');
- });
-
- it('renders upload success', () => {
- wrapper.setState({ uploadSuccessCount: 5 });
- wrapper.setProps({
- assetsStatus: {
- type: assetActions.upload.UPLOAD_ASSET_SUCCESS,
- },
- });
-
- const statusAlert = wrapper.find(StatusAlert);
- expect(statusAlert.find('.alert-dialog').text()).toEqual('5 files successfully uploaded.');
- });
-
- it('renders upload success', () => {
- wrapper.setProps({
- assetsStatus: {
- type: assetActions.upload.UPLOAD_EXCEED_MAX_COUNT_ERROR,
- maxFileCount: 110,
- },
- });
- const statusAlert = wrapper.find(StatusAlert);
- expect(statusAlert.find('.alert-dialog').text()).toEqual('The maximum number of files for an upload is 110. No files were uploaded.');
- });
-
- it('renders upload exceeds maximum file count', () => {
- wrapper.setProps({
- assetsStatus: {
- type: assetActions.upload.UPLOAD_EXCEED_MAX_COUNT_ERROR,
- maxFileCount: 110,
- },
- });
- const statusAlert = wrapper.find(StatusAlert);
- expect(statusAlert.find('.alert-dialog').text()).toEqual('The maximum number of files for an upload is 110. No files were uploaded.');
- });
-
- it('renders upload exceeds maximum file size', () => {
- wrapper.setProps({
- assetsStatus: {
- type: assetActions.upload.UPLOAD_EXCEED_MAX_SIZE_ERROR,
- maxFileSizeMB: 9,
- },
- });
- const statusAlert = wrapper.find(StatusAlert);
- expect(statusAlert.find('.alert-dialog').text()).toEqual('The maximum size for an upload is 9 MB. No files were uploaded.');
- });
-
- it('renders upload failed', () => {
- wrapper.setProps({
- assetsStatus: {
- type: assetActions.upload.UPLOAD_ASSET_FAILURE,
- file: { name: 'quail.png' },
- },
- });
- const statusAlert = wrapper.find(StatusAlert);
- expect(statusAlert.find('.alert-dialog').text()).toEqual('Error uploading quail.png. Try again.');
- });
});
diff --git a/src/components/AssetsTable/container.jsx b/src/components/AssetsTable/container.jsx
index 1f679f06..9b1a0d2c 100644
--- a/src/components/AssetsTable/container.jsx
+++ b/src/components/AssetsTable/container.jsx
@@ -1,10 +1,11 @@
import { connect } from 'react-redux';
import AssetsTable from '.';
-import { clearAssetsStatus, deleteAsset, sortUpdate, toggleLockAsset } from '../../data/actions/assets';
+import { clearAssetsStatus, deleteAsset, sortUpdate, stageAssetDeletion, toggleLockAsset, unstageAssetDeletion } from '../../data/actions/assets';
const mapStateToProps = state => ({
assetsList: state.assets,
+ assetToDelete: state.metadata.deletion.assetToDelete,
assetsSortMetadata: state.metadata.sort,
assetsStatus: state.metadata.status,
courseDetails: state.studioDetails.course,
@@ -14,10 +15,12 @@ const mapStateToProps = state => ({
const mapDispatchToProps = dispatch => ({
clearAssetsStatus: () => dispatch(clearAssetsStatus()),
- deleteAsset: (assetId, courseDetails) => dispatch(deleteAsset(assetId, courseDetails)),
+ deleteAsset: (asset, courseDetails) => dispatch(deleteAsset(asset, courseDetails)),
+ stageAssetDeletion: (asset, index) => dispatch(stageAssetDeletion(asset, index)),
+ toggleLockAsset: (asset, courseDetails) => dispatch(toggleLockAsset(asset, courseDetails)),
updateSort: (sortKey, sortDirection, courseDetails) =>
dispatch(sortUpdate(sortKey, sortDirection, courseDetails)),
- toggleLockAsset: (asset, courseDetails) => dispatch(toggleLockAsset(asset, courseDetails)),
+ unstageAssetDeletion: () => dispatch(unstageAssetDeletion()),
});
const WrappedAssetsTable = connect(
diff --git a/src/components/AssetsTable/displayMessages.jsx b/src/components/AssetsTable/displayMessages.jsx
index c0d5cbba..500b1ee7 100644
--- a/src/components/AssetsTable/displayMessages.jsx
+++ b/src/components/AssetsTable/displayMessages.jsx
@@ -61,51 +61,6 @@ const messages = defineMessages({
defaultMessage: 'Updating lock status for {assetName}.',
description: 'States that the lock status of an item is updating',
},
- assetsTableFailedLock: {
- id: 'assetsTableFailedLock',
- defaultMessage: 'Failed to toggle lock for {assetName}.',
- description: 'States that there was a failure toggling an item\'s lock status',
- },
- assetsTableCantDelete: {
- id: 'assetsTableCantDelete',
- defaultMessage: 'Unable to delete {assetName}.',
- description: 'States that an item could not be deleted',
- },
- assetsTableDeleteSuccess: {
- id: 'assetsTableDeleteSuccess',
- defaultMessage: '{assetName} has been deleted.',
- description: 'States that an item was successfully deleted',
- },
- assetsTableUploadSuccess: {
- id: 'assetsTableUploadSuccess',
- defaultMessage: '{uploaded_count} files successfully uploaded.',
- description: 'States that files were successfully uploaded',
- },
- assetsTableUploadInProgress: {
- id: 'assetsTableUploadInProgress',
- defaultMessage: '{uploading_count} files uploading.',
- description: 'States that the file upload operation is in progress',
- },
- assetsTableTooManyFiles: {
- id: 'assetsTableTooManyFiles',
- defaultMessage: 'The maximum number of files for an upload is {max_count}. No files were uploaded.',
- description: 'Error message shown when too many files are selected for upload',
- },
- assetsTableTooMuchData: {
- id: 'assetsTableTooMuchData',
- defaultMessage: 'The maximum size for an upload is {max_size} MB. No files were uploaded.',
- description: 'Error message shown when too much data is being uploaded',
- },
- assetsTableGenericError: {
- id: 'assetsTableGenericError',
- defaultMessage: 'Error uploading {assetName}. Try again.',
- description: 'Generic error message while uploading files',
- },
- assetsTableGenericUpdateError: {
- id: 'assetsTableGenericUpdateError',
- defaultMessage: 'The action could not be completed. Refresh the page, and then try the action again.',
- description: 'States that the action could not be completed and asks the user to refresh the page and try the action again',
- },
assetsTableStudioLink: {
id: 'assetsTableStudioLink',
defaultMessage: 'Studio',
@@ -156,11 +111,6 @@ const messages = defineMessages({
defaultMessage: 'Any links or references to this file will no longer work. {link}',
description: 'Warns of the consequences of deleting an item',
},
- assetsTableLoadingStatus: {
- id: 'assetsTableLoadingStatus',
- defaultMessage: 'Loading',
- description: 'Indicates something is loading',
- },
});
export default messages;
diff --git a/src/components/AssetsTable/index.jsx b/src/components/AssetsTable/index.jsx
index da44f64d..91d52fe6 100644
--- a/src/components/AssetsTable/index.jsx
+++ b/src/components/AssetsTable/index.jsx
@@ -1,12 +1,10 @@
import React from 'react';
import PropTypes from 'prop-types';
-import { Table, Button, Modal, StatusAlert, Variant } from '@edx/paragon';
+import { Table, Button, Modal, Variant } from '@edx/paragon';
import classNames from 'classnames';
-import { FormattedNumber } from 'react-intl';
import FontAwesomeStyles from 'font-awesome/css/font-awesome.min.css';
import styles from './AssetsTable.scss';
-import { assetActions } from '../../data/constants/actionTypes';
import { assetLoading } from '../../data/constants/loadingTypes';
import CopyButton from '../CopyButton';
import WrappedMessage from '../../utils/i18n/formattedMessageWrapper';
@@ -16,18 +14,9 @@ export default class AssetsTable extends React.Component {
constructor(props) {
super(props);
this.state = {
- assetToDelete: {},
copyButtonIsClicked: false,
- deletedAsset: {},
- deletedAssetIndex: null,
elementToFocusOnModalClose: {},
modalOpen: false,
- statusAlertFields: {
- alertDialog: '',
- alertType: 'info',
- },
- statusAlertOpen: false,
- uploadSuccessCount: 1,
};
this.columns = {
@@ -72,22 +61,13 @@ export default class AssetsTable extends React.Component {
};
this.trashcanRefs = {};
- this.statusAlertRef = {};
this.addSupplementalTableElements = this.addSupplementalTableElements.bind(this);
this.closeModal = this.closeModal.bind(this);
- this.closeStatusAlert = this.closeStatusAlert.bind(this);
this.deleteAsset = this.deleteAsset.bind(this);
+ this.getAssetDeleteButtonRef = this.getAssetDeleteButtonRef.bind(this);
this.onCopyButtonClick = this.onCopyButtonClick.bind(this);
this.onDeleteClick = this.onDeleteClick.bind(this);
- this.renderStatusAlert = this.renderStatusAlert.bind(this);
- this.updateUploadSuccessCount = this.updateUploadSuccessCount.bind(this);
- }
-
-
- componentWillReceiveProps(nextProps) {
- const { assetsStatus } = nextProps;
- this.updateStatusAlertFields(assetsStatus);
}
onSortClick(columnKey) {
@@ -106,9 +86,9 @@ export default class AssetsTable extends React.Component {
onDeleteClick(index) {
const assetToDelete = this.props.assetsList[index];
+ this.props.stageAssetDeletion(assetToDelete, index);
+
this.setState({
- assetToDelete,
- deletedAssetIndex: index,
elementToFocusOnModalClose: this.trashcanRefs[assetToDelete.id],
modalOpen: true,
});
@@ -168,26 +148,6 @@ export default class AssetsTable extends React.Component {
);
}
- getNextFocusElementOnDelete() {
- const { assetsStatus } = this.props;
-
- let deletedIndex = this.state.deletedAssetIndex;
- let focusAsset = this.state.deletedAsset;
-
- switch (assetsStatus.type) {
- case assetActions.delete.DELETE_ASSET_SUCCESS:
- if (deletedIndex > 0) {
- deletedIndex -= 1;
- }
- focusAsset = this.props.assetsList[deletedIndex];
- break;
- default:
- break;
- }
-
- return this.trashcanRefs[focusAsset.id];
- }
-
getLoadingLockButton(asset) {
// spinner classes are applied to the span to keep the whole button from spinning
const spinnerClasses = [FontAwesomeStyles.fa, FontAwesomeStyles['fa-spinner'], FontAwesomeStyles['fa-spin']];
@@ -266,127 +226,9 @@ export default class AssetsTable extends React.Component {
);
}
- updateStatusAlertFields(assetsStatus) {
- const assetName = this.state.deletedAsset.display_name;
- let alertDialog;
- let alertType;
-
- const genericUpdateError = (
-
- );
-
- switch (assetsStatus.type) {
- case assetActions.delete.DELETE_ASSET_FAILURE:
- alertDialog = (
-
- );
- alertType = 'danger';
- break;
- case assetActions.delete.DELETE_ASSET_SUCCESS:
- alertDialog = (
-
- );
- alertType = 'success';
- break;
- case assetActions.upload.UPLOAD_ASSET_SUCCESS:
- this.updateUploadSuccessCount();
- alertDialog = (
- ) }}
- />
- );
- alertType = 'success';
- break;
- case assetActions.upload.UPLOADING_ASSETS:
- this.closeStatusAlert();
- alertDialog = (
- ) }}
- />
- );
- alertType = 'info';
- break;
- case assetActions.upload.UPLOAD_EXCEED_MAX_COUNT_ERROR:
- alertDialog = (
- ) }}
- />
- );
- alertType = 'danger';
- break;
- case assetActions.upload.UPLOAD_EXCEED_MAX_SIZE_ERROR:
- alertDialog = (
- ) }}
- />
- );
- alertType = 'danger';
- break;
- case assetActions.upload.UPLOAD_ASSET_FAILURE:
- alertDialog = (
-
- );
- alertType = 'danger';
- break;
- case assetActions.lock.TOGGLING_LOCK_ASSET_FAILURE:
- alertDialog = (
-
- );
- alertType = 'danger';
- break;
- case assetActions.clear.CLEAR_FILTERS_FAILURE:
- alertDialog = genericUpdateError;
- alertType = 'danger';
- break;
- case assetActions.filter.FILTER_UPDATE_FAILURE:
- alertDialog = genericUpdateError;
- alertType = 'danger';
- break;
- case assetActions.paginate.PAGE_UPDATE_FAILURE:
- alertDialog = genericUpdateError;
- alertType = 'danger';
- break;
- case assetActions.sort.SORT_UPDATE_FAILURE:
- alertDialog = genericUpdateError;
- alertType = 'danger';
- break;
- default:
- return;
- }
-
- this.setState({
- statusAlertOpen: true,
- statusAlertFields: {
- alertDialog,
- alertType,
- },
- });
- this.statusAlertRef.focus();
- }
-
- updateUploadSuccessCount() {
- const uploadSuccessCount = this.state.uploadSuccessCount + 1;
- this.setState({
- uploadSuccessCount,
- });
+ getAssetDeleteButtonRef(ref, currentAsset) {
+ this.trashcanRefs[currentAsset.id] = ref;
+ this.props.deleteButtonRefs(ref, currentAsset);
}
addSupplementalTableElements() {
@@ -405,7 +247,7 @@ export default class AssetsTable extends React.Component {
label={''}
aria-label={displayText}
onClick={() => { this.onDeleteClick(index); }}
- inputRef={(ref) => { this.trashcanRefs[currentAsset.id] = ref; }}
+ inputRef={ref => this.getAssetDeleteButtonRef(ref, currentAsset)}
data-identifier="asset-delete-button"
/>)
}
@@ -453,45 +295,19 @@ export default class AssetsTable extends React.Component {
closeModal() {
this.state.elementToFocusOnModalClose.focus();
+ this.props.unstageAssetDeletion();
this.setState({
- assetToDelete: {},
- deletedAssetIndex: null,
elementToFocusOnModalClose: {},
modalOpen: false,
});
}
- closeDeleteStatus = () => {
- this.getNextFocusElementOnDelete().focus();
- this.closeStatusAlert();
- }
-
- closeStatusAlert() {
- this.props.clearAssetsStatus();
-
- // clear out all status related state
- this.setState({
- deletedAsset: {},
- deletedAssetIndex: null,
- statusAlertOpen: false,
- statusAlertFields: {
- alertDialog: '',
- alertType: 'info',
- },
- uploadSuccessCount: 1,
- });
- }
-
deleteAsset() {
- const deletedAsset = { ...this.state.assetToDelete };
-
- this.props.deleteAsset(this.state.assetToDelete.id, this.props.courseDetails);
+ this.props.deleteAsset(this.props.assetToDelete, this.props.courseDetails);
this.setState({
- assetToDelete: {},
- deletedAsset,
- elementToFocusOnModalClose: this.statusAlertRef,
+ elementToFocusOnModalClose: {},
modalOpen: false,
});
}
@@ -506,7 +322,7 @@ export default class AssetsTable extends React.Component {
title={()}
body={this.renderModalBody()}
@@ -551,7 +367,7 @@ export default class AssetsTable extends React.Component {
message={messages.assetsTableDeleteWarning}
tagName="p"
values={{
- displayName: {this.state.assetToDelete.display_name},
+ displayName: {this.props.assetToDelete.display_name},
}}
/>
{ this.statusAlertRef = input; }}
- />
- );
-
- return statusAlert;
- }
-
render() {
return (
- {this.renderStatusAlert()}
{},
};
diff --git a/src/data/actions/assets.js b/src/data/actions/assets.js
index 77bcfee7..4165cd75 100644
--- a/src/data/actions/assets.js
+++ b/src/data/actions/assets.js
@@ -57,7 +57,6 @@ export const getAssets = (parameters, courseDetails) =>
};
dispatch(updateRequest(requestParameters));
-
return clientApi.requestAssets(courseDetails.id, { ...requestParameters })
.then((response) => {
if (response.ok) {
@@ -198,28 +197,42 @@ export const pageUpdate = (page, courseDetails) =>
});
};
-export const deleteAssetSuccess = assetId => ({
+export const clearAssetDeletion = () => ({
+ type: assetActions.delete.CLEAR_DELETE,
+});
+
+export const deleteAssetSuccess = asset => ({
type: assetActions.delete.DELETE_ASSET_SUCCESS,
- assetId,
+ asset,
});
-export const deleteAssetFailure = assetId => ({
+export const deleteAssetFailure = asset => ({
type: assetActions.delete.DELETE_ASSET_FAILURE,
- assetId,
+ asset,
+});
+
+export const stageAssetDeletion = (asset, index) => ({
+ type: assetActions.delete.STAGE_ASSET_DELETION,
+ asset,
+ index,
+});
+
+export const unstageAssetDeletion = () => ({
+ type: assetActions.delete.UNSTAGE_ASSET_DELETION,
});
-export const deleteAsset = (assetId, courseDetails) =>
+export const deleteAsset = (asset, courseDetails) =>
dispatch =>
- clientApi.requestDeleteAsset(courseDetails.id, assetId)
+ clientApi.requestDeleteAsset(courseDetails.id, asset.id)
// since the API returns 204 on success and 404 on failure, neither of which have
// content, we don't json-ify the response
.then((response) => {
if (response.ok) {
return dispatch(getAssets({}, courseDetails)).then(() => (
- dispatch(deleteAssetSuccess(assetId))
+ dispatch(deleteAssetSuccess(asset))
));
}
- return dispatch(deleteAssetFailure(assetId));
+ return dispatch(deleteAssetFailure(asset));
});
export const togglingLockAsset = asset => ({
diff --git a/src/data/actions/assets.test.jsx b/src/data/actions/assets.test.jsx
index a93fb80c..2b8b032a 100644
--- a/src/data/actions/assets.test.jsx
+++ b/src/data/actions/assets.test.jsx
@@ -2,11 +2,13 @@ import configureStore from 'redux-mock-store';
import fetchMock from 'fetch-mock';
import thunk from 'redux-thunk';
+import deepCopy from './utils';
import endpoints from '../api/endpoints';
-import * as actionCreators from './assets';
-import { filtersInitial, paginationInitial, sortInitial, searchInitial, requestInitial } from '../reducers/assets';
import { assetActions } from '../../data/constants/actionTypes';
-import deepCopy from './utils';
+import { deletionInitial, filtersInitial, paginationInitial, sortInitial, searchInitial, requestInitial } from '../reducers/assets';
+import { testAssetsList } from '../../utils/testConstants';
+import * as actionCreators from './assets';
+
const initialState = {
assets: [],
@@ -16,6 +18,7 @@ const initialState = {
request: { ...requestInitial },
sort: { ...sortInitial },
search: { ...searchInitial },
+ deletion: { ...deletionInitial },
},
};
@@ -23,8 +26,6 @@ const courseDetails = {
id: 'edX',
};
-const assetId = 'asset';
-
const assetsEndpoint = endpoints.assets;
const middlewares = [thunk];
const mockStore = configureStore(middlewares);
@@ -70,8 +71,9 @@ describe('Assets Action Creators', () => {
expect(store.dispatch(actionCreators.requestAssetsSuccess('response'))).toEqual(expectedAction);
});
it('returns expected state from assetDeleteFailure', () => {
- const expectedAction = { assetId, type: assetActions.delete.DELETE_ASSET_FAILURE };
- expect(store.dispatch(actionCreators.deleteAssetFailure(assetId))).toEqual(expectedAction);
+ const asset = testAssetsList[0];
+ const expectedAction = { asset, type: assetActions.delete.DELETE_ASSET_FAILURE };
+ expect(store.dispatch(actionCreators.deleteAssetFailure(asset))).toEqual(expectedAction);
});
it('returns expected state from getAssets success', () => {
const requestParameters = {};
@@ -506,6 +508,8 @@ describe('Assets Action Creators', () => {
body: {},
};
+ const asset = testAssetsList[0];
+
fetchMock.deleteOnce(`begin:${assetsEndpoint}`, {});
fetchMock.getOnce(`begin:${assetsEndpoint}`, response);
@@ -513,10 +517,10 @@ describe('Assets Action Creators', () => {
{ type: assetActions.request.REQUESTING_ASSETS },
{ type: assetActions.request.UPDATE_REQUEST, newRequest: requestInitial },
{ type: assetActions.request.REQUEST_ASSETS_SUCCESS, response: response.body },
- { type: assetActions.delete.DELETE_ASSET_SUCCESS, assetId },
+ { type: assetActions.delete.DELETE_ASSET_SUCCESS, asset },
];
- return store.dispatch(actionCreators.deleteAsset(assetId, courseDetails)).then(() => {
+ return store.dispatch(actionCreators.deleteAsset(asset, courseDetails)).then(() => {
// return of async actions
expect(store.getActions()).toEqual(expectedActions);
});
@@ -526,17 +530,29 @@ describe('Assets Action Creators', () => {
status: 400,
};
+ const asset = testAssetsList[0];
+
fetchMock.once(`begin:${assetsEndpoint}`, response);
const expectedActions = [
- { type: assetActions.delete.DELETE_ASSET_FAILURE, assetId },
+ { type: assetActions.delete.DELETE_ASSET_FAILURE, asset },
];
- return store.dispatch(actionCreators.deleteAsset(assetId, courseDetails)).then(() => {
+ return store.dispatch(actionCreators.deleteAsset(asset, courseDetails)).then(() => {
// return of async actions
expect(store.getActions()).toEqual(expectedActions);
});
});
+ it('returns expected state from stageAssetDeletion', () => {
+ const index = 0;
+ const asset = testAssetsList[index];
+ const expectedAction = { type: assetActions.delete.STAGE_ASSET_DELETION, asset, index };
+ expect(store.dispatch(actionCreators.stageAssetDeletion(asset, index))).toEqual(expectedAction);
+ });
+ it('returns expected state from unstageAssetDeletion', () => {
+ const expectedAction = { type: assetActions.delete.UNSTAGE_ASSET_DELETION };
+ expect(store.dispatch(actionCreators.unstageAssetDeletion())).toEqual(expectedAction);
+ });
it('returns expected state from clearAssetsStatus', () => {
const expectedAction = { type: assetActions.clear.CLEAR_ASSETS_STATUS };
expect(store.dispatch(actionCreators.clearAssetsStatus())).toEqual(expectedAction);
@@ -546,14 +562,16 @@ describe('Assets Action Creators', () => {
status: 200,
};
+ const asset = testAssetsList[0];
+
fetchMock.once(`begin:${assetsEndpoint}`, response);
const expectedActions = [
- { type: assetActions.lock.TOGGLING_LOCK_ASSET_SUCCESS, asset: assetId },
- { type: assetActions.lock.TOGGLE_LOCK_ASSET_SUCCESS, asset: assetId },
+ { type: assetActions.lock.TOGGLING_LOCK_ASSET_SUCCESS, asset: asset.id },
+ { type: assetActions.lock.TOGGLE_LOCK_ASSET_SUCCESS, asset: asset.id },
];
- return store.dispatch(actionCreators.toggleLockAsset(assetId, courseDetails)).then(() => {
+ return store.dispatch(actionCreators.toggleLockAsset(asset.id, courseDetails)).then(() => {
// return of async actions
expect(store.getActions()).toEqual(expectedActions);
});
@@ -564,15 +582,16 @@ describe('Assets Action Creators', () => {
};
const error = new Error(response);
+ const asset = testAssetsList[0];
fetchMock.once(`begin:${assetsEndpoint}`, response);
const expectedActions = [
- { type: assetActions.lock.TOGGLING_LOCK_ASSET_SUCCESS, asset: assetId },
- { type: assetActions.lock.TOGGLING_LOCK_ASSET_FAILURE, asset: assetId, response: error },
+ { type: assetActions.lock.TOGGLING_LOCK_ASSET_SUCCESS, asset: asset.id },
+ { type: assetActions.lock.TOGGLING_LOCK_ASSET_FAILURE, asset: asset.id, response: error },
];
- return store.dispatch(actionCreators.toggleLockAsset(assetId, courseDetails)).then(() => {
+ return store.dispatch(actionCreators.toggleLockAsset(asset.id, courseDetails)).then(() => {
// return of async actions
expect(store.getActions()).toEqual(expectedActions);
});
diff --git a/src/data/constants/actionTypes.js b/src/data/constants/actionTypes.js
index 22632323..2a319228 100644
--- a/src/data/constants/actionTypes.js
+++ b/src/data/constants/actionTypes.js
@@ -6,8 +6,12 @@ export const assetActions = {
CLEAR_FILTERS_FAILURE: 'CLEAR_FILTERS_FAILURE',
},
delete: {
+ CLEAR_DELETE: 'CLEAR_DELETE',
DELETE_ASSET_SUCCESS: 'DELETE_ASSET_SUCCESS',
DELETE_ASSET_FAILURE: 'DELETE_ASSET_FAILURE',
+ DELETING_ASSET: 'DELETING_ASSET',
+ STAGE_ASSET_DELETION: 'STAGE_ASSET_DELETION',
+ UNSTAGE_ASSET_DELETION: 'UNSTAGE_ASSET_DELETION',
},
filter: {
FILTER_UPDATED: 'FILTER_UPDATED',
diff --git a/src/data/i18n/default/src/components/AssetsStatusAlert/displayMessages.json b/src/data/i18n/default/src/components/AssetsStatusAlert/displayMessages.json
new file mode 100644
index 00000000..04259f8f
--- /dev/null
+++ b/src/data/i18n/default/src/components/AssetsStatusAlert/displayMessages.json
@@ -0,0 +1,52 @@
+[
+ {
+ "id": "assetsTableGenericUpdateError",
+ "description": "States that the action could not be completed and asks the user to refresh the page and try the action again",
+ "defaultMessage": "The action could not be completed. Refresh the page, and then try the action again."
+ },
+ {
+ "id": "assetsTableCantDelete",
+ "description": "States that an item could not be deleted",
+ "defaultMessage": "Unable to delete {assetName}."
+ },
+ {
+ "id": "assetsTableDeleteSuccess",
+ "description": "States that an item was successfully deleted",
+ "defaultMessage": "{assetName} has been deleted."
+ },
+ {
+ "id": "assetsTableUploadSuccess",
+ "description": "States that files were successfully uploaded",
+ "defaultMessage": "{uploaded_count} files successfully uploaded."
+ },
+ {
+ "id": "assetsTableUploadInProgress",
+ "description": "States that the file upload operation is in progress",
+ "defaultMessage": "{uploading_count} files uploading."
+ },
+ {
+ "id": "assetsTableTooManyFiles",
+ "description": "Error message shown when too many files are selected for upload",
+ "defaultMessage": "The maximum number of files for an upload is {max_count}. No files were uploaded."
+ },
+ {
+ "id": "assetsTableTooMuchData",
+ "description": "Error message shown when too much data is being uploaded",
+ "defaultMessage": "The maximum size for an upload is {max_size} MB. No files were uploaded."
+ },
+ {
+ "id": "assetsTableGenericError",
+ "description": "Generic error message while uploading files",
+ "defaultMessage": "Error uploading {assetName}. Try again."
+ },
+ {
+ "id": "assetsTableFailedLock",
+ "description": "States that there was a failure toggling an item's lock status",
+ "defaultMessage": "Failed to toggle lock for {assetName}."
+ },
+ {
+ "id": "assetsTableLoadingStatus",
+ "description": "Indicates something is loading",
+ "defaultMessage": "Loading"
+ }
+]
\ No newline at end of file
diff --git a/src/data/i18n/default/transifex_input.json b/src/data/i18n/default/transifex_input.json
index e12d4a58..14352907 100644
--- a/src/data/i18n/default/transifex_input.json
+++ b/src/data/i18n/default/transifex_input.json
@@ -53,6 +53,16 @@
"assetsResultsCountTotal": "Showing {start}-{end} out of {total} total files.",
"assetsSearchInputLabel": "Search",
"assetsSearchSubmitLabel": "Submit search",
+ "assetsTableGenericUpdateError": "The action could not be completed. Refresh the page, and then try the action again.",
+ "assetsTableCantDelete": "Unable to delete {assetName}.",
+ "assetsTableDeleteSuccess": "{assetName} has been deleted.",
+ "assetsTableUploadSuccess": "{uploaded_count} files successfully uploaded.",
+ "assetsTableUploadInProgress": "{uploading_count} files uploading.",
+ "assetsTableTooManyFiles": "The maximum number of files for an upload is {max_count}. No files were uploaded.",
+ "assetsTableTooMuchData": "The maximum size for an upload is {max_size} MB. No files were uploaded.",
+ "assetsTableGenericError": "Error uploading {assetName}. Try again.",
+ "assetsTableFailedLock": "Failed to toggle lock for {assetName}.",
+ "assetsTableLoadingStatus": "Loading",
"assetsTablePreviewLabel": "Image Preview",
"assetsTableNameLabel": "Name",
"assetsTableTypeLable": "Type",
@@ -65,15 +75,6 @@
"assetsTableLockedObject": "Locked {object}",
"assetsTableUnlockedObject": "Unlocked {object}",
"assetsTableUpdateLock": "Updating lock status for {assetName}.",
- "assetsTableFailedLock": "Failed to toggle lock for {assetName}.",
- "assetsTableCantDelete": "Unable to delete {assetName}.",
- "assetsTableDeleteSuccess": "{assetName} has been deleted.",
- "assetsTableUploadSuccess": "{uploaded_count} files successfully uploaded.",
- "assetsTableUploadInProgress": "{uploading_count} files uploading.",
- "assetsTableTooManyFiles": "The maximum number of files for an upload is {max_count}. No files were uploaded.",
- "assetsTableTooMuchData": "The maximum size for an upload is {max_size} MB. No files were uploaded.",
- "assetsTableGenericError": "Error uploading {assetName}. Try again.",
- "assetsTableGenericUpdateError": "The action could not be completed. Refresh the page, and then try the action again.",
"assetsTableStudioLink": "Studio",
"assetsTableWebLink": "Web",
"assetsTableCopiedStatus": "Copied",
@@ -84,7 +85,6 @@
"assetsTableLearnMore": "Learn more.",
"assetsTableDeleteWarning": "Deleting {displayName} cannot be undone.",
"assetsTableDeleteConsequences": "Any links or references to this file will no longer work. {link}",
- "assetsTableLoadingStatus": "Loading",
"paginationButtonDisabled": "button is disabled",
"paginationNext": "next",
"paginationPrevious": "previous"
diff --git a/src/data/reducers/assets.js b/src/data/reducers/assets.js
index 12dd12b7..07128cdf 100644
--- a/src/data/reducers/assets.js
+++ b/src/data/reducers/assets.js
@@ -9,6 +9,12 @@ import { getAssetAPIAttributeFromDatabaseAttribute } from '../../utils/getAssets
const defaultAssetTypeFilters = getDefaultFilterState();
+export const deletionInitial = {
+ assetToDelete: {},
+ deletedAsset: {},
+ deletedAssetIndex: null,
+};
+
export const filtersInitial = {
assetTypes: { ...defaultAssetTypeFilters },
};
@@ -210,6 +216,31 @@ export const request = (state = requestInitial, action) => {
}
};
+export const deletion = (state = deletionInitial, action) => {
+ switch (action.type) {
+ case assetActions.delete.DELETE_ASSET_SUCCESS:
+ return {
+ ...state,
+ assetToDelete: {},
+ deletedAsset: action.asset,
+ };
+ case assetActions.delete.STAGE_ASSET_DELETION:
+ return {
+ ...state,
+ assetToDelete: action.asset,
+ deletedAssetIndex: action.index,
+ };
+ case assetActions.delete.UNSTAGE_ASSET_DELETION:
+ return {
+ ...state,
+ assetToDelete: {},
+ deletedAssetIndex: null,
+ };
+ default:
+ return state;
+ }
+};
+
export const metadata = combineReducers({
filters,
pagination,
@@ -217,4 +248,5 @@ export const metadata = combineReducers({
sort,
status,
search,
+ deletion,
});
diff --git a/src/data/reducers/assets.test.jsx b/src/data/reducers/assets.test.jsx
index a8b88c46..6e3e49b4 100644
--- a/src/data/reducers/assets.test.jsx
+++ b/src/data/reducers/assets.test.jsx
@@ -485,4 +485,68 @@ describe('Assets Reducers', () => {
});
});
});
+ describe('deletion reducer', () => {
+ const asset = { id: 'asset1' };
+ const index = 2;
+
+ beforeEach(() => {
+ defaultState = reducers.deletionInitial;
+ });
+ it('returns correct state on DELETE_ASSET_SUCCESS action', () => {
+ const defaultStateWithStagedAsset = { ...defaultState };
+ defaultStateWithStagedAsset.assetToDelete = asset;
+ defaultStateWithStagedAsset.deletedAssetIndex = index;
+
+ action = {
+ asset,
+ type: assetActions.delete.DELETE_ASSET_SUCCESS,
+ };
+
+ state = reducers.deletion(defaultStateWithStagedAsset, action);
+
+ expect(state).toEqual({
+ ...defaultState,
+ deletedAsset: action.asset,
+ assetToDelete: {},
+ deletedAssetIndex: defaultStateWithStagedAsset.deletedAssetIndex,
+ });
+ });
+ it('returns correct state on STAGE_ASSET_DELETION action', () => {
+ action = {
+ asset,
+ index,
+ type: assetActions.delete.STAGE_ASSET_DELETION,
+ };
+
+ state = reducers.deletion(defaultState, action);
+
+ expect(state).toEqual({
+ ...defaultState,
+ assetToDelete: asset,
+ deletedAssetIndex: index,
+ });
+ });
+ it('returns correct state on UNSTAGE_ASSET_DELETION action', () => {
+ const stageAssetDeletionAction = {
+ asset,
+ index,
+ type: assetActions.delete.STAGE_ASSET_DELETION,
+ };
+
+ action = {
+ type: assetActions.delete.UNSTAGE_ASSET_DELETION,
+ };
+
+ // stage an asset first
+ reducers.deletion(defaultState, stageAssetDeletionAction);
+
+ state = reducers.deletion(defaultState, action);
+
+ expect(state).toEqual({
+ ...defaultState,
+ assetToDelete: {},
+ deletedAssetIndex: null,
+ });
+ });
+ });
});
diff --git a/src/data/reducers/index.js b/src/data/reducers/index.js
index 0af67404..06d96092 100644
--- a/src/data/reducers/index.js
+++ b/src/data/reducers/index.js
@@ -16,3 +16,4 @@ const rootReducer = combineReducers({
});
export default rootReducer;
+
diff --git a/src/utils/testConstants.jsx b/src/utils/testConstants.jsx
index 61fd7c3a..b11e624f 100644
--- a/src/utils/testConstants.jsx
+++ b/src/utils/testConstants.jsx
@@ -11,3 +11,41 @@ const courseDetails = {
};
export default courseDetails;
+
+const thumbnail = '/animal';
+const copyUrl = 'animal';
+
+export const testAssetsList = [
+ {
+ display_name: 'cat.jpg',
+ id: 'cat.jpg',
+ thumbnail,
+ locked: false,
+ portable_url: copyUrl,
+ external_url: copyUrl,
+ },
+ {
+ display_name: 'dog.png',
+ id: 'dog.png',
+ thumbnail,
+ locked: true,
+ portable_url: null,
+ external_url: null,
+ },
+ {
+ display_name: 'bird.json',
+ id: 'bird.json',
+ thumbnail: null,
+ locked: false,
+ portable_url: null,
+ external_url: copyUrl,
+ },
+ {
+ display_name: 'fish.doc',
+ id: 'fish.doc',
+ thumbnail: null,
+ locked: false,
+ portable_url: copyUrl,
+ external_url: null,
+ },
+];