diff --git a/src/editors/sharedComponents/ErrorBoundary/ErrorPage.jsx b/src/editors/sharedComponents/ErrorBoundary/ErrorPage.jsx index c67e6fa56..49621fef9 100644 --- a/src/editors/sharedComponents/ErrorBoundary/ErrorPage.jsx +++ b/src/editors/sharedComponents/ErrorBoundary/ErrorPage.jsx @@ -1,62 +1,48 @@ -import React, { Component } from 'react'; +import React from 'react'; import PropTypes from 'prop-types'; import { Button, Container, Row, Col, } from '@edx/paragon'; -import { FormattedMessage } from '@edx/frontend-platform/i18n'; +import { injectIntl, intlShape } from '@edx/frontend-platform/i18n'; +import messages from './messages'; /** * An error page that displays a generic message for unexpected errors. Also contains a "Try * Again" button to refresh the page. - * - * @memberof module:React - * @extends {Component} */ -class ErrorPage extends Component { - /* istanbul ignore next */ - reload() { - global.location.reload(); - } - - render() { - const { message } = this.props; - return ( - - - -

- -

- {message && ( -
-

{message}

-
- )} - - -
-
- ); - } -} +export const ErrorPage = ({ + message, + // injected + intl, +}) => ( + + + +

+ {intl.formatMessage(messages.unexpectedError)} +

+ {message && ( +
+

{message}

+
+ )} + + +
+
+); ErrorPage.propTypes = { message: PropTypes.string, + // injected + intl: intlShape.isRequired, }; ErrorPage.defaultProps = { message: null, }; -export default ErrorPage; +export default injectIntl(ErrorPage); diff --git a/src/editors/sharedComponents/ErrorBoundary/index.test.jsx b/src/editors/sharedComponents/ErrorBoundary/index.test.jsx index ed4c8c674..5e4f10a64 100644 --- a/src/editors/sharedComponents/ErrorBoundary/index.test.jsx +++ b/src/editors/sharedComponents/ErrorBoundary/index.test.jsx @@ -10,6 +10,9 @@ jest.mock('@edx/frontend-platform/logging', () => ({ logError: jest.fn(), })); +// stubbing this to avoid needing to inject a stubbed intl into an internal component +jest.mock('./ErrorPage', () => () =>
); + describe('ErrorBoundary', () => { it('should render children if no error', () => { const component = ( diff --git a/src/editors/sharedComponents/ErrorBoundary/messages.js b/src/editors/sharedComponents/ErrorBoundary/messages.js new file mode 100644 index 000000000..f292b7408 --- /dev/null +++ b/src/editors/sharedComponents/ErrorBoundary/messages.js @@ -0,0 +1,13 @@ +export const messages = { + unexpectedError: { + id: 'unexpected.error.message.text', + defaultMessage: 'An unexpected error occurred. Please click the button below to refresh the page.', + description: 'error message when an unexpected error occurs', + }, + unexpectedErrorButtonLabel: { + id: 'unexpected.error.button.text', + defaultMessage: 'Try again', + description: 'text for button that tries to reload the app by refreshing the page', + }, +}; +export default messages;