fix: ErrorPage rewritten as functional component with injected i18n. TNL-10535

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 (
-      <Container fluid className="py-5 justify-content-center align-items-start text-center">
-        <Row>
-          <Col>
-            <p className="text-muted">
-              <FormattedMessage
-                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"
-              />
-            </p>
-            {message && (
-              <div role="alert" className="my-4">
-                <p>{message}</p>
-              </div>
-            )}
-            <Button onClick={this.reload}>
-              <FormattedMessage
-                id="unexpected.error.button.text"
-                defaultMessage="Try again"
-                description="text for button that tries to reload the app by refreshing the page"
-              />
-            </Button>
-          </Col>
-        </Row>
-      </Container>
-    );
-  }
-}
+export const ErrorPage = ({
+  message,
+  // injected
+  intl,
+}) => (
+  <Container fluid className="py-5 justify-content-center align-items-start text-center">
+    <Row>
+      <Col>
+        <p className="text-muted">
+          {intl.formatMessage(messages.unexpectedError)}
+        </p>
+        {message && (
+          <div role="alert" className="my-4">
+            <p>{message}</p>
+          </div>
+        )}
+        <Button onClick={global.location.reload()}>
+          {intl.formatMessage(messages.unexpectedErrorButtonLabel)}
+        </Button>
+      </Col>
+    </Row>
+  </Container>
+);
 
 ErrorPage.propTypes = {
   message: PropTypes.string,
+  // injected
+  intl: intlShape.isRequired,
 };
 
 ErrorPage.defaultProps = {
   message: null,
 };
 
-export default ErrorPage;
+export default injectIntl(ErrorPage);

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', () => () => <div />);
+
 describe('ErrorBoundary', () => {
   it('should render children if no error', () => {
     const component = (

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;