{courseBestPracticesChecklist}
@@ -92,19 +90,7 @@ export default class CourseChecklistPage extends React.Component {
}
CourseChecklistPage.propTypes = {
- courseBestPracticesData: PropTypes.shape({
- sections: PropTypes.shape({
- number_with_highlights: PropTypes.number,
- total_visible: PropTypes.number,
- total_number: PropTypes.number,
- highlights_enabled: PropTypes.bool,
- highlights_active_for_course: PropTypes.bool,
- }),
- subsections: PropTypes.object,
- units: PropTypes.object,
- videos: PropTypes.object,
- is_self_paced: PropTypes.bool,
- }).isRequired,
+ courseBestPracticesData: PropTypes.shape(COURSE_BEST_PRACTICES_DATA_SHAPE).isRequired,
courseLaunchData: PropTypes.shape({
assignments: PropTypes.shape({
total_number: PropTypes.number,
@@ -141,7 +127,7 @@ CourseChecklistPage.propTypes = {
display_course_number: PropTypes.string,
enable_quality: PropTypes.bool,
id: PropTypes.string,
- is_course_self_paced: PropTypes.boolean,
+ is_course_self_paced: PropTypes.bool,
lang: PropTypes.string,
name: PropTypes.string,
num: PropTypes.string,
@@ -149,7 +135,7 @@ CourseChecklistPage.propTypes = {
revision: PropTypes.string,
url_name: PropTypes.string,
}),
- enable_quality: PropTypes.boolean,
+ enable_quality: PropTypes.bool,
help_tokens: PropTypes.objectOf(PropTypes.string),
lang: PropTypes.string,
}).isRequired,
diff --git a/src/components/CourseOutlineStatus/CourseOutlineStatus.test.jsx b/src/components/CourseOutlineStatus/CourseOutlineStatus.test.jsx
index 9b073ee0..4fc7a514 100644
--- a/src/components/CourseOutlineStatus/CourseOutlineStatus.test.jsx
+++ b/src/components/CourseOutlineStatus/CourseOutlineStatus.test.jsx
@@ -4,7 +4,7 @@ import React from 'react';
import { checklistLoading } from '../../data/constants/loadingTypes';
import { courseDetails } from '../../utils/testConstants';
-import CourseOutlineStatus from './';
+import CourseOutlineStatus from '.';
import CourseOutlineStatusLabel from '../CourseOutlineStatusLabel';
import CourseOutlineStatusValue from '../CourseOutlineStatusValue';
import getFilteredChecklist from '../../utils/CourseChecklist/getFilteredChecklist';
diff --git a/src/components/CourseOutlineStatus/container.jsx b/src/components/CourseOutlineStatus/container.jsx
index b6aae516..c06c6dcc 100644
--- a/src/components/CourseOutlineStatus/container.jsx
+++ b/src/components/CourseOutlineStatus/container.jsx
@@ -11,10 +11,8 @@ const mapStateToProps = state => ({
});
const mapDispatchToProps = dispatch => ({
- getCourseBestPractices: (parameters, courseDetails) =>
- dispatch(getCourseBestPractices(parameters, courseDetails)),
- getCourseLaunch: (parameters, courseDetails) =>
- dispatch(getCourseLaunch(parameters, courseDetails)),
+ getCourseBestPractices: (parameters, courseDetails) => dispatch(getCourseBestPractices(parameters, courseDetails)),
+ getCourseLaunch: (parameters, courseDetails) => dispatch(getCourseLaunch(parameters, courseDetails)),
});
const WrappedCourseOutlineStatus = connect(
diff --git a/src/components/CourseOutlineStatus/index.jsx b/src/components/CourseOutlineStatus/index.jsx
index efa3dac8..efa384da 100644
--- a/src/components/CourseOutlineStatus/index.jsx
+++ b/src/components/CourseOutlineStatus/index.jsx
@@ -10,6 +10,7 @@ import CourseOutlineStatusValue from '../CourseOutlineStatusValue';
import getFilteredChecklist from '../../utils/CourseChecklist/getFilteredChecklist';
import getValidatedValue from '../../utils/CourseChecklist/getValidatedValue';
import { launchChecklist, bestPracticesChecklist } from '../../utils/CourseChecklist/courseChecklistData';
+import { COURSE_BEST_PRACTICES_DATA_SHAPE } from '../../utils/constants';
import messages from './displayMessages';
import styles from './CourseOutlineStatus.scss';
import { trackEvent } from '../../utils/analytics';
@@ -35,10 +36,18 @@ export default class CourseOutlineStatus extends React.Component {
const hasCertificatesEnabled = false;
const hasHighlightsEnabled = false;
this.setState({
- totalCourseBestPracticesChecks: getFilteredChecklist(bestPracticesChecklist.data,
- isSelfPaceCourse, hasCertificatesEnabled, hasHighlightsEnabled).length,
- totalCourseLaunchChecks: getFilteredChecklist(launchChecklist.data,
- isSelfPaceCourse, hasCertificatesEnabled, hasHighlightsEnabled).length,
+ totalCourseBestPracticesChecks: getFilteredChecklist(
+ bestPracticesChecklist.data,
+ isSelfPaceCourse,
+ hasCertificatesEnabled,
+ hasHighlightsEnabled,
+ ).length,
+ totalCourseLaunchChecks: getFilteredChecklist(
+ launchChecklist.data,
+ isSelfPaceCourse,
+ hasCertificatesEnabled,
+ hasHighlightsEnabled,
+ ).length,
});
}
@@ -61,8 +70,12 @@ export default class CourseOutlineStatus extends React.Component {
if (Object.keys(nextProps.courseLaunchData).length > 0) {
courseData.isSelfPaced = nextProps.courseLaunchData.is_self_paced;
courseData.hasCertificatesEnabled = nextProps.courseLaunchData.certificates.is_enabled;
- const filteredCourseLaunchChecks = getFilteredChecklist(launchChecklist.data,
- courseData.isSelfPaced, courseData.hasCertificatesEnabled, courseData.hasHighlightsEnabled);
+ const filteredCourseLaunchChecks = getFilteredChecklist(
+ launchChecklist.data,
+ courseData.isSelfPaced,
+ courseData.hasCertificatesEnabled,
+ courseData.hasHighlightsEnabled,
+ );
let completedCourseLaunchChecks = 0;
@@ -86,10 +99,13 @@ export default class CourseOutlineStatus extends React.Component {
if (Object.keys(nextProps.courseBestPracticesData).length > 0
&& nextProps.studioDetails.enable_quality) {
- courseData.hasHighlightsEnabled =
- nextProps.courseBestPracticesData.sections.highlights_enabled;
- const filteredCourseBestPracticesChecks = getFilteredChecklist(bestPracticesChecklist.data,
- courseData.isSelfPaced, courseData.hasCertificatesEnabled, courseData.hasHighlightsEnabled);
+ courseData.hasHighlightsEnabled = nextProps.courseBestPracticesData.sections.highlights_enabled;
+ const filteredCourseBestPracticesChecks = getFilteredChecklist(
+ bestPracticesChecklist.data,
+ courseData.isSelfPaced,
+ courseData.hasCertificatesEnabled,
+ courseData.hasHighlightsEnabled,
+ );
let completedCourseBestPracticesChecks = 0;
@@ -113,42 +129,42 @@ export default class CourseOutlineStatus extends React.Component {
}
onCourseChecklistHyperlinkClick = () => {
- trackEvent(
- 'edx.bi.studio.course.checklist.accessed', {
- category: 'click',
- event_type: 'outline-access',
- label: this.props.studioDetails.course.id,
- },
- );
+ trackEvent('edx.bi.studio.course.checklist.accessed', {
+ category: 'click',
+ event_type: 'outline-access',
+ label: this.props.studioDetails.course.id,
+ });
};
getCourseStartDateStatus = () => {
const columnClassName = this.doesCourseHaveReleaseDate() ? 'col-5' : 'col';
- return (
-
-
-
-
-
-
-
-
+ return (
+
-
);
+ );
};
getCoursePacingTypeValue = () => (
- this.props.studioDetails.course.is_course_self_paced ?
-
:
-
+ this.props.studioDetails.course.is_course_self_paced
+ ?
+ :
);
getCoursePacingTypeStatus = () => (
@@ -175,21 +191,21 @@ export default class CourseOutlineStatus extends React.Component {
);
getCourseChecklistValue = () => (
- this.isLoading() ?
- this.getLoadingIcon() :
- this.getCourseChecklistHyperlink()
+ this.isLoading()
+ ? this.getLoadingIcon()
+ : this.getCourseChecklistHyperlink()
);
getLoadingIcon = () => (
- {displayText =>
- (
+ {displayText => (
+
-
)
- }
+
+ )}
);
@@ -201,29 +217,29 @@ export default class CourseOutlineStatus extends React.Component {
totalCourseLaunchChecks,
} = this.state;
- const totalCompletedChecks = this.props.studioDetails.enable_quality ?
- completedCourseBestPracticesChecks + completedCourseLaunchChecks :
- completedCourseLaunchChecks;
+ const totalCompletedChecks = this.props.studioDetails.enable_quality
+ ? completedCourseBestPracticesChecks + completedCourseLaunchChecks
+ : completedCourseLaunchChecks;
- const totalChecks = this.props.studioDetails.enable_quality ?
- totalCourseBestPracticesChecks + totalCourseLaunchChecks :
- totalCourseLaunchChecks;
+ const totalChecks = this.props.studioDetails.enable_quality
+ ? totalCourseBestPracticesChecks + totalCourseLaunchChecks
+ : totalCourseLaunchChecks;
return (
- {displayText =>
- (
+ {displayText => (
+
{displayText}
- )
- }
+
+ )}
- }
+ )}
destination={`/checklists/${this.props.studioDetails.course.id}`}
onClick={this.onCourseChecklistHyperlinkClick}
/>
@@ -231,52 +247,40 @@ export default class CourseOutlineStatus extends React.Component {
};
getAriaLiveRegion = () => {
- const message =
- this.isLoading() ?
- :
- ;
+ const message = this.isLoading()
+ ?
+ : ;
return (
{message}
);
- }
+ };
isLoading = () => (
- this.props.loadingChecklists.includes(checklistLoading.COURSE_BEST_PRACTICES) ||
- this.props.loadingChecklists.includes(checklistLoading.COURSE_LAUNCH)
+ this.props.loadingChecklists.includes(checklistLoading.COURSE_BEST_PRACTICES)
+ || this.props.loadingChecklists.includes(checklistLoading.COURSE_LAUNCH)
);
+
doesCourseHaveReleaseDate = () => (this.props.studioDetails.course.course_release_date !== 'Set Date');
render() {
return (
-
+ <>
{this.getAriaLiveRegion()}
{this.getCourseStartDateStatus()}
{this.getCoursePacingTypeStatus()}
{this.getCourseChecklistStatus()}
-
+ >
);
}
}
CourseOutlineStatus.propTypes = {
- courseBestPracticesData: PropTypes.shape({
- sections: PropTypes.shape({
- number_with_highlights: PropTypes.number,
- total_visible: PropTypes.number,
- total_number: PropTypes.number,
- highlights_enabled: PropTypes.bool,
- highlights_active_for_course: PropTypes.bool,
- }),
- subsections: PropTypes.object,
- units: PropTypes.object,
- videos: PropTypes.object,
- is_self_paced: PropTypes.bool,
- }).isRequired,
+ courseBestPracticesData: PropTypes.shape(COURSE_BEST_PRACTICES_DATA_SHAPE).isRequired,
courseLaunchData: PropTypes.shape({
assignments: PropTypes.shape({
total_number: PropTypes.number,
@@ -312,7 +316,7 @@ CourseOutlineStatus.propTypes = {
course_release_date: PropTypes.string,
display_course_number: PropTypes.string,
id: PropTypes.string,
- is_course_self_paced: PropTypes.boolean,
+ is_course_self_paced: PropTypes.bool,
lang: PropTypes.string,
name: PropTypes.string,
num: PropTypes.string,
@@ -320,7 +324,7 @@ CourseOutlineStatus.propTypes = {
revision: PropTypes.string,
url_name: PropTypes.string,
}),
- enable_quality: PropTypes.boolean,
+ enable_quality: PropTypes.bool,
help_tokens: PropTypes.objectOf(PropTypes.string),
lang: PropTypes.string,
links: PropTypes.objectOf(PropTypes.string).isRequired,
diff --git a/src/components/CourseOutlineStatusLabel/CourseOutlineStatusLabel.test.jsx b/src/components/CourseOutlineStatusLabel/CourseOutlineStatusLabel.test.jsx
index ca652dfa..774e21d6 100644
--- a/src/components/CourseOutlineStatusLabel/CourseOutlineStatusLabel.test.jsx
+++ b/src/components/CourseOutlineStatusLabel/CourseOutlineStatusLabel.test.jsx
@@ -1,6 +1,6 @@
import React from 'react';
-import CourseOutlineStatusLabel from './';
+import CourseOutlineStatusLabel from '.';
import { shallowWithIntl } from '../../utils/i18n/enzymeHelper';
let wrapper;
diff --git a/src/components/CourseOutlineStatusLabel/index.jsx b/src/components/CourseOutlineStatusLabel/index.jsx
index 5ae36fc3..62be893d 100644
--- a/src/components/CourseOutlineStatusLabel/index.jsx
+++ b/src/components/CourseOutlineStatusLabel/index.jsx
@@ -1,4 +1,3 @@
-
import classNames from 'classnames';
import React from 'react';
import PropTypes from 'prop-types';
@@ -7,11 +6,9 @@ import styles from './CourseOutlineStatusLabel.scss';
function CourseOutlineStatusLabel(props) {
return (
-
-
- {props.children}
-
-
+
+ {props.children}
+
);
}
diff --git a/src/components/CourseOutlineStatusValue/CourseOutlineStatusValue.test.jsx b/src/components/CourseOutlineStatusValue/CourseOutlineStatusValue.test.jsx
index 0fdbefcc..ed80654e 100644
--- a/src/components/CourseOutlineStatusValue/CourseOutlineStatusValue.test.jsx
+++ b/src/components/CourseOutlineStatusValue/CourseOutlineStatusValue.test.jsx
@@ -1,6 +1,6 @@
import React from 'react';
-import CourseOutlineStatusValue from './';
+import CourseOutlineStatusValue from '.';
import { shallowWithIntl } from '../../utils/i18n/enzymeHelper';
let wrapper;
diff --git a/src/components/CourseOutlineStatusValue/index.jsx b/src/components/CourseOutlineStatusValue/index.jsx
index 21ffa2d7..feefc18b 100644
--- a/src/components/CourseOutlineStatusValue/index.jsx
+++ b/src/components/CourseOutlineStatusValue/index.jsx
@@ -1,4 +1,3 @@
-
import classNames from 'classnames';
import React from 'react';
import PropTypes from 'prop-types';
@@ -7,11 +6,9 @@ import styles from './CourseOutlineStatusValue.scss';
function CourseOutlineStatusValue(props) {
return (
-
-
- {props.children}
-
-
+
+ {props.children}
+
);
}
diff --git a/src/components/EditImageModal/EditImageModal.test.jsx b/src/components/EditImageModal/EditImageModal.test.jsx
index d79170c1..f736986f 100644
--- a/src/components/EditImageModal/EditImageModal.test.jsx
+++ b/src/components/EditImageModal/EditImageModal.test.jsx
@@ -1,4 +1,6 @@
-import { Button, CheckBox, Fieldset, Modal, InputText, StatusAlert, Variant } from '@edx/paragon';
+import {
+ Button, CheckBox, Fieldset, Modal, InputText, StatusAlert, Variant,
+} from '@edx/paragon';
import { IntlProvider, FormattedMessage } from 'react-intl';
import { Provider } from 'react-redux';
import React from 'react';
@@ -15,7 +17,8 @@ import { shallowWithIntl } from '../../utils/i18n/enzymeHelper';
import WrappedEditImageModal from './container';
import WrappedMessage from '../../utils/i18n/formattedMessageWrapper';
-const learnMoreLink = 'http://edx.readthedocs.io/projects/edx-partner-course-staff/en/latest/accessibility/best_practices_course_content_dev.html#use-best-practices-for-describing-images';
+const learnMoreLink = 'http://edx.readthedocs.io/projects/edx-partner-course-staff/en/latest/accessibility/best_'
+ + 'practices_course_content_dev.html#use-best-practices-for-describing-images';
const store = getMockStore({
help_tokens: {
@@ -26,41 +29,32 @@ const store = getMockStore({
const intlProvider = new IntlProvider({ locale: 'en', messages: {} }, {});
const { intl } = intlProvider.getChildContext();
-const getEditImageModal = wrapper =>
- (wrapper.find('Connect(EditImageModal)').dive({ context: { store, intl } }).find(EditImageModal).dive({ context: { store, intl } }));
+const getEditImageModal = wrapper => (wrapper.find('Connect(EditImageModal)').dive({ context: { store, intl } })
+ .find(EditImageModal).dive({ context: { store, intl } }));
const getModal = editImageModal => (editImageModal.find(Modal));
-const getModalContent = editImageModal =>
- (getModal(editImageModal).dive({ context: { store, intl } }));
+const getModalContent = editImageModal => (getModal(editImageModal).dive({ context: { store, intl } }));
const getModalBody = editImageModal => (getModalContent(editImageModal).find('.modal-body'));
const getModalFooter = editImageModal => (getModalContent(editImageModal).find('.modal-footer'));
const getFormContainer = editImageModal => (getModalBody(editImageModal).find('div.col form'));
const getStatusAlert = editImageModal => (getModalBody(editImageModal).find(StatusAlert));
-const getCloseStatusAlertButton = editImageModal =>
- (getStatusAlert(editImageModal).dive({ context: { store, intl } }).find(Button));
-const getInsertImageButton = editImageModal =>
- (getModalFooter(editImageModal).find(Button).first());
-const getNextButton = editImageModal =>
- (getModalFooter(editImageModal).find(Button).first());
+const getCloseStatusAlertButton = editImageModal => (getStatusAlert(editImageModal)
+ .dive({ context: { store, intl } }).find(Button));
+const getInsertImageButton = editImageModal => (getModalFooter(editImageModal).find(Button).first());
+const getNextButton = editImageModal => (getModalFooter(editImageModal).find(Button).first());
const getPreviousButton = editImageModal => (getModalBody(editImageModal).find(Button));
-const getImageDescriptionFieldset = editImageModal =>
- (getFormContainer(editImageModal).find(Fieldset).at(0));
-const getImageDescriptionInput = editImageModal =>
- (getImageDescriptionFieldset(editImageModal).find(InputText));
-const getImageDescriptionInputCheckBox = editImageModal =>
- (getImageDescriptionFieldset(editImageModal).find(CheckBox));
-
-const getImageDimensionsFieldset = editImageModal =>
- (getFormContainer(editImageModal).find(Fieldset).at(1));
-const getImageDimensionsWidthInput = editImageModal =>
- (getImageDimensionsFieldset(editImageModal)
- .dive({ context: { store, intl } }).find(InputText).at(0));
-
-const getImageDimensionsHeightInput = editImageModal =>
- (getImageDimensionsFieldset(editImageModal)
- .dive({ context: { store, intl } }).find(InputText).at(1));
-const getImageDimensionsCheckBox = editImageModal =>
- (getImageDimensionsFieldset(editImageModal).dive({ context: { store, intl } }).find(CheckBox));
+const getImageDescriptionFieldset = editImageModal => (getFormContainer(editImageModal).find(Fieldset).at(0));
+const getImageDescriptionInput = editImageModal => (getImageDescriptionFieldset(editImageModal).find(InputText));
+const getImageDescriptionInputCheckBox = editImageModal => (getImageDescriptionFieldset(editImageModal).find(CheckBox));
+
+const getImageDimensionsFieldset = editImageModal => (getFormContainer(editImageModal).find(Fieldset).at(1));
+const getImageDimensionsWidthInput = editImageModal => (getImageDimensionsFieldset(editImageModal)
+ .dive({ context: { store, intl } }).find(InputText).at(0));
+
+const getImageDimensionsHeightInput = editImageModal => (getImageDimensionsFieldset(editImageModal)
+ .dive({ context: { store, intl } }).find(InputText).at(1));
+const getImageDimensionsCheckBox = editImageModal => (getImageDimensionsFieldset(editImageModal)
+ .dive({ context: { store, intl } }).find(CheckBox));
const getNextPageButton = editImageModal => (getModalFooter(editImageModal).find(Button).first());
@@ -196,7 +190,6 @@ describe('EditImageModal', () => {
expect(getModalBody(editImageModal).find('Connect(AssetsResultsCount)')).toHaveLength(0);
});
-
it('no Pagination component', () => {
expect(getModalBody(editImageModal).find('Pagination')).toHaveLength(0);
});
@@ -494,8 +487,7 @@ describe('EditImageModal', () => {
});
it('correct initial props', () => {
- const imageDescriptionInputCheckbox =
- getImageDescriptionInputCheckBox(editImageModal);
+ const imageDescriptionInputCheckbox = getImageDescriptionInputCheckBox(editImageModal);
expect(imageDescriptionInputCheckbox.prop('id')).toEqual('isDecorative');
expect(imageDescriptionInputCheckbox.prop('id')).toEqual('isDecorative');
@@ -615,7 +607,6 @@ describe('EditImageModal', () => {
expect(editImageModal.state('assetsPageType')).toEqual(pageTypes.NORMAL);
expect(editImageModal.state('baseAssetURL')).toEqual('');
expect(editImageModal.state('currentValidationMessages')).toEqual({});
- expect(editImageModal.state('displayLoadingSpinner')).toEqual(false);
expect(editImageModal.state('imageDescription')).toEqual('');
expect(editImageModal.state('imageDimensions')).toEqual({});
expect(editImageModal.state('imageSource')).toEqual('');
@@ -623,7 +614,6 @@ describe('EditImageModal', () => {
expect(editImageModal.state('isImageDecorative')).toEqual(false);
expect(editImageModal.state('isImageDescriptionValid')).toEqual(true);
expect(editImageModal.state('isImageLoaded')).toEqual(false);
- expect(editImageModal.state('isImageLoading')).toEqual(false);
expect(editImageModal.state('isStatusAlertOpen')).toEqual(false);
expect(editImageModal.state('isModalOpen')).toEqual(false);
expect(editImageModal.state('pageNumber')).toEqual(1);
@@ -643,7 +633,6 @@ describe('EditImageModal', () => {
expect(editImageModal.state('baseAssetURL')).toEqual('');
expect(editImageModal.state('currentUploadErrorMessage')).toBe(null);
expect(editImageModal.state('currentValidationMessages')).toEqual({});
- expect(editImageModal.state('displayLoadingSpinner')).toEqual(false);
expect(editImageModal.state('imageDescription')).toEqual('');
expect(editImageModal.state('imageDimensions')).toEqual({});
expect(editImageModal.state('imageSource')).toEqual('');
@@ -651,7 +640,6 @@ describe('EditImageModal', () => {
expect(editImageModal.state('isImageDecorative')).toEqual(false);
expect(editImageModal.state('isImageDescriptionValid')).toEqual(true);
expect(editImageModal.state('isImageLoaded')).toEqual(false);
- expect(editImageModal.state('isImageLoading')).toEqual(false);
expect(editImageModal.state('isStatusAlertOpen')).toEqual(false);
expect(editImageModal.state('isModalOpen')).toEqual(true);
expect(editImageModal.state('pageNumber')).toEqual(1);
@@ -667,7 +655,6 @@ describe('EditImageModal', () => {
expect(editImageModal.state('baseAssetURL')).toEqual('');
expect(editImageModal.state('currentUploadErrorMessage')).toBe(null);
expect(editImageModal.state('currentValidationMessages')).toEqual({});
- expect(editImageModal.state('displayLoadingSpinner')).toEqual(false);
expect(editImageModal.state('imageDescription')).toEqual('');
expect(editImageModal.state('imageDimensions')).toEqual({});
expect(editImageModal.state('imageSource')).toEqual('');
@@ -675,7 +662,6 @@ describe('EditImageModal', () => {
expect(editImageModal.state('isImageDecorative')).toEqual(false);
expect(editImageModal.state('isImageDescriptionValid')).toEqual(true);
expect(editImageModal.state('isImageLoaded')).toEqual(false);
- expect(editImageModal.state('isImageLoading')).toEqual(false);
expect(editImageModal.state('isStatusAlertOpen')).toEqual(false);
expect(editImageModal.state('isModalOpen')).toEqual(true);
expect(editImageModal.state('pageNumber')).toEqual(1);
@@ -703,7 +689,6 @@ describe('EditImageModal', () => {
expect(editImageModal.state('baseAssetURL')).toEqual(sampleText);
expect(editImageModal.state('currentUploadErrorMessage')).toBe(null);
expect(editImageModal.state('currentValidationMessages')).toEqual({});
- expect(editImageModal.state('displayLoadingSpinner')).toEqual(false);
expect(editImageModal.state('imageDescription')).toEqual(sampleText);
expect(editImageModal.state('imageDimensions')).toEqual({
width: sampleImgData.naturalWidth,
@@ -715,7 +700,6 @@ describe('EditImageModal', () => {
expect(editImageModal.state('isImageDecorative')).toEqual(false);
expect(editImageModal.state('isImageDescriptionValid')).toEqual(true);
expect(editImageModal.state('isImageLoaded')).toEqual(true);
- expect(editImageModal.state('isImageLoading')).toEqual(false);
expect(editImageModal.state('isStatusAlertOpen')).toEqual(false);
expect(editImageModal.state('isModalOpen')).toEqual(true);
expect(editImageModal.state('pageNumber')).toEqual(2);
@@ -869,8 +853,7 @@ describe('EditImageModal', () => {
to succesfully shallow them. Once Enzyme introduces support for React Fragments,
we can remove the extraneous div.
*/
- const statusAlertDialog =
- shallowWithIntl({statusAlert.prop('dialog')}
).find(WrappedMessage);
+ const statusAlertDialog = shallowWithIntl({statusAlert.prop('dialog')}
).find(WrappedMessage);
expect(statusAlertDialog.prop('message')).toEqual(messages.editImageModalTooManyFiles);
});
@@ -888,8 +871,7 @@ describe('EditImageModal', () => {
to succesfully shallow them. Once Enzyme introduces support for React Fragments,
we can remove the extraneous div.
*/
- const statusAlertDialog =
- shallowWithIntl({statusAlert.prop('dialog')}
).find(WrappedMessage);
+ const statusAlertDialog = shallowWithIntl({statusAlert.prop('dialog')}
).find(WrappedMessage);
expect(statusAlertDialog.prop('message')).toEqual(messages.editImageModalInvalidFileType);
});
@@ -1236,14 +1218,12 @@ describe('EditImageModal', () => {
getModalBody(editImageModal).find('img').simulate('load', { target: { ...sampleImgData } });
- expect(editImageModal.state('displayLoadingSpinner')).toEqual(false);
expect(editImageModal.state('imageDimensions')).toEqual({
width: sampleImgData.naturalWidth,
height: sampleImgData.naturalHeight,
aspectRatio: sampleImgData.naturalWidth / sampleImgData.naturalHeight,
});
expect(editImageModal.state('isImageLoaded')).toEqual(true);
- expect(editImageModal.state('isImageLoading')).toEqual(false);
});
it('correct state is set on image error', () => {
@@ -1253,10 +1233,8 @@ describe('EditImageModal', () => {
getModalBody(editImageModal).find('img').simulate('error');
- expect(editImageModal.state('displayLoadingSpinner')).toEqual(false);
expect(editImageModal.state('imageDimensions')).toEqual({});
expect(editImageModal.state('isImageLoaded')).toEqual(false);
- expect(editImageModal.state('isImageLoading')).toEqual(false);
});
it('with visible image preview image when this.state.isImageLoaded is false (default)', () => {
@@ -1452,7 +1430,6 @@ describe('EditImageModal', () => {
expect(() => editImageModal.instance().onImageDimensionBlur(sampleText)).toThrow(`Unknown dimension type ${sampleText}.`);
});
-
it('returns correct feedback for invalid dimensions (negative numbers)', () => {
editImageModal.setState({
imageDimensions: {
@@ -1690,7 +1667,6 @@ describe('EditImageModal', () => {
editImageModal.instance().validateImageDescription = validationMock;
});
-
it('sends bubbles as true', () => {
getInsertImageButton(editImageModal).simulate('click');
expect(dispatchEventSpy.mock.calls[0][0].bubbles).toEqual(true);
diff --git a/src/components/EditImageModal/container.jsx b/src/components/EditImageModal/container.jsx
index 97b011a1..b1c9667e 100644
--- a/src/components/EditImageModal/container.jsx
+++ b/src/components/EditImageModal/container.jsx
@@ -1,6 +1,6 @@
import { connect } from 'react-redux';
-import EditImageModal from '.';
+import EditImageModal from './index';
import {
clearAssetsStatus,
clearSelectedAsset,
@@ -10,7 +10,6 @@ import {
selectAsset,
} from '../../data/actions/assets';
-
// Create an EditImageModal that is not aware of the Images filter.
// This is so that the page will display a "noAssets" list instead of a "noResults" list when the
// course has no images.
diff --git a/src/components/EditImageModal/index.jsx b/src/components/EditImageModal/index.jsx
index 613ac000..639331ab 100644
--- a/src/components/EditImageModal/index.jsx
+++ b/src/components/EditImageModal/index.jsx
@@ -1,4 +1,6 @@
-import { Button, CheckBox, Fieldset, Icon, InputText, Modal, StatusAlert, Variant } from '@edx/paragon';
+import {
+ Button, CheckBox, Fieldset, Icon, InputText, Modal, StatusAlert, Variant,
+} from '@edx/paragon';
import classNames from 'classnames';
import { connect } from 'react-redux';
import FontAwesomeStyles from 'font-awesome/css/font-awesome.min.css';
@@ -10,6 +12,7 @@ import AssetsResultsCount from '../AssetsResultsCount/index';
import { getPageType, pageTypes } from '../../utils/getAssetsPageType';
import messages from './displayMessages';
import rewriteStaticLinks from '../../utils/rewriteStaticLinks';
+import { ASSET_STATUS_SHAPE, ASSET_SHAPE } from '../../utils/constants';
import styles from './EditImageModal.scss';
import WrappedAssetsClearSearchButton from '../AssetsClearSearchButton/container';
import WrappedAssetsDropZone from '../AssetsDropZone/container';
@@ -18,7 +21,6 @@ import WrappedAssetsSearch from '../AssetsSearch/container';
import WrappedMessage from '../../utils/i18n/formattedMessageWrapper';
import WrappedPagination from '../Pagination/container';
-
// Create an AssetsResultsCount that is not aware of the Images filter.
// This is so that the message will initially say "out of N total files" instead of "out of N
// possible matches".
@@ -46,7 +48,6 @@ const initialEditImageModalState = {
baseAssetURL: '',
currentUploadErrorMessage: null,
currentValidationMessages: {},
- displayLoadingSpinner: false,
imageDescription: '',
imageDimensions: {},
imageSource: '',
@@ -54,40 +55,18 @@ const initialEditImageModalState = {
isImageDecorative: false,
isImageDescriptionValid: true,
isImageLoaded: false,
- isImageLoading: false,
- isImageDimensionsValid: true,
isModalOpen: false,
isStatusAlertOpen: false,
pageNumber: 1,
shouldShowPreviousButton: false,
};
-export default class EditImageModal extends React.Component {
+class EditImageModal extends React.Component {
constructor(props) {
super(props);
this.state = { ...initialEditImageModalState };
- this.handleOpenModal = this.handleOpenModal.bind(this);
- this.onConstrainProportionsClick = this.onConstrainProportionsClick.bind(this);
- this.onEditImageModalClose = this.onEditImageModalClose.bind(this);
- this.onImageDescriptionBlur = this.onImageDescriptionBlur.bind(this);
- this.onImageDimensionBlur = this.onImageDimensionBlur.bind(this);
- this.onInsertImageButtonClick = this.onInsertImageButtonClick.bind(this);
- this.onImageIsDecorativeClick = this.onImageIsDecorativeClick.bind(this);
- this.onImageLoad = this.onImageLoad.bind(this);
- this.onNextPageButtonClick = this.onNextPageButtonClick.bind(this);
- this.onPreviousPageButtonClick = this.onPreviousPageButtonClick.bind(this);
- this.onStatusAlertClose = this.onStatusAlertClose.bind(this);
- // Create ref setters to minimize anonymous inline functions
- this.setDropZoneButtonRef = this.setDropZoneButtonRef.bind(this);
- this.setImageDescriptionInputRef = this.setImageDescriptionInputRef.bind(this);
- this.setImageFormRef = this.setImageFormRef.bind(this);
- this.setImageRef = this.setImageRef.bind(this);
- this.setModalWrapperRef = this.setModalWrapperRef.bind(this);
- this.setPreviousButtonRef = this.setPreviousButtonRef.bind(this);
- this.setStatusAlertRef = this.setStatusAlertRef.bind(this);
-
this.dropZoneButtonRef = null;
this.imageDescriptionInputRef = null;
this.imageFormRef = null;
@@ -150,7 +129,7 @@ export default class EditImageModal extends React.Component {
this.setState({
areProportionsLocked: checked,
});
- }
+ };
onEditImageModalClose = () => {
this.setState({
@@ -159,48 +138,45 @@ export default class EditImageModal extends React.Component {
this.props.clearSearch(this.props.courseDetails);
this.resetImageSelection();
- this.modalWrapperRef.dispatchEvent(new CustomEvent('closeModal',
+ this.modalWrapperRef.dispatchEvent(new CustomEvent(
+ 'closeModal',
{
bubbles: true,
},
));
- }
+ };
onImageIsDecorativeClick = (checked) => {
this.setState({
isImageDecorative: checked,
});
- }
+ };
onImageLoad = (event) => {
const img = event.target;
this.setState({
- displayLoadingSpinner: false,
imageDimensions: {
width: img.naturalWidth,
height: img.naturalHeight,
aspectRatio: img.naturalWidth / img.naturalHeight,
},
isImageLoaded: true,
- isImageLoading: false,
});
- }
+ };
onImageError = () => {
this.setState({
- displayLoadingSpinner: false,
imageDimensions: {},
- isImageLoading: false,
isImageLoaded: false,
});
- }
+ };
onImageDescriptionBlur = (imageDescription) => {
this.setState({
imageDescription,
});
- }
+ };
onImageDimensionBlur = (dimensionType) => {
let aspectRatio;
@@ -217,18 +193,19 @@ export default class EditImageModal extends React.Component {
}
return (dimensionValue) => {
- const newImageDimensions = { ...this.state.imageDimensions };
+ const prevState = { ...this.state };
+ const newImageDimensions = prevState.imageDimensions;
const parsedDimensionValue = parseInt(dimensionValue, 10);
- newImageDimensions[dimensionType] = isNaN(parsedDimensionValue) ? '' : parsedDimensionValue;
+ newImageDimensions[dimensionType] = Number.isNaN(parsedDimensionValue) ? '' : parsedDimensionValue;
if (this.state.areProportionsLocked) {
const newDimensionValue = Math.round(parsedDimensionValue * aspectRatio);
- newImageDimensions[newDimensionType] = isNaN(newDimensionValue) ? '' : newDimensionValue;
+ newImageDimensions[newDimensionType] = Number.isNaN(newDimensionValue) ? '' : newDimensionValue;
}
this.setState({ imageDimensions: newImageDimensions });
};
- }
+ };
onNextPageButtonClick = () => {
if (this.isAssetSelected()) {
@@ -239,17 +216,16 @@ export default class EditImageModal extends React.Component {
});
this.props.clearAssetsStatus();
}
- }
+ };
onPreviousPageButtonClick = () => {
this.setState({
currentValidationMessages: {},
isImageDescriptionValid: true,
- isImageDimensionsValid: true,
isStatusAlertOpen: false,
pageNumber: 1,
});
- }
+ };
onInsertImageButtonClick = () => {
const isValidImageDescription = this.validateImageDescription();
@@ -274,7 +250,8 @@ export default class EditImageModal extends React.Component {
});
if (isValidFormContent) {
- this.imageFormRef.dispatchEvent(new CustomEvent('submitForm',
+ this.imageFormRef.dispatchEvent(new CustomEvent(
+ 'submitForm',
{
bubbles: true,
detail: {
@@ -295,7 +272,7 @@ export default class EditImageModal extends React.Component {
} else {
this.statusAlertRef.focus();
}
- }
+ };
onStatusAlertClose = () => {
if (this.state.pageNumber === 1) {
@@ -312,35 +289,35 @@ export default class EditImageModal extends React.Component {
this.setState({
isStatusAlertOpen: false,
});
- }
+ };
- setDropZoneButtonRef(ref) {
+ setDropZoneButtonRef = (ref) => {
this.dropZoneButtonRef = ref;
- }
+ };
- setImageDescriptionInputRef(ref) {
+ setImageDescriptionInputRef = (ref) => {
this.imageDescriptionInputRef = ref;
- }
+ };
- setImageFormRef(ref) {
+ setImageFormRef = (ref) => {
this.imageFormRef = ref;
- }
+ };
- setImageRef(ref) {
+ setImageRef = (ref) => {
this.imageRef = ref;
- }
+ };
- setModalWrapperRef(ref) {
+ setModalWrapperRef = (ref) => {
this.modalWrapperRef = ref;
- }
+ };
- setPreviousButtonRef(ref) {
+ setPreviousButtonRef = (ref) => {
this.previousPageButtonRef = ref;
- }
+ };
- setStatusAlertRef(ref) {
+ setStatusAlertRef = (ref) => {
this.statusAlertRef = ref;
- }
+ };
getNaturalDimension = (dimensionType) => {
if (this.imageRef) {
@@ -352,14 +329,14 @@ export default class EditImageModal extends React.Component {
return naturalDimensions[dimensionType];
}
return null;
- }
+ };
getDimensionStateOrNatural = (dimensionType) => {
if (!this.state.imageDimensions[dimensionType]) {
return this.getNaturalDimension(dimensionType);
}
return this.state.imageDimensions[dimensionType];
- }
+ };
getImageDescriptionInput = () => (