Demo (#86)

* feat: demo mode

* chore: update i18n for demo mode

* chore: re-use demo design

* fix: update snapshots

* chore: add more testing of demo feature

src/containers/ReviewModal/__snapshots__/index.test.jsx.snap

@@ -108,3 +108,26 @@ exports[`ReviewModal component component snapshots success 1`] = `
   />
 </FullscreenModal>
 `;
+
+exports[`ReviewModal component component snapshots success, demo (title message) 1`] = `
+<FullscreenModal
+  beforeBodyNode={
+    <React.Fragment>
+      <ReviewActions />
+      <DemoErrors />
+    </React.Fragment>
+  }
+  className="review-modal"
+  isOpen={true}
+  modalBodyClassName="review-modal-body"
+  onClose={[MockFunction this.onClose]}
+  title="test-ora-name - Grading Demo"
+>
+  <ReviewContent />
+  <CloseReviewConfirmModal
+    isOpen={false}
+    onCancel={[MockFunction this.hideConfirmCloseReviewGrade]}
+    onConfirm={[MockFunction this.confirmCloseReviewGrade]}
+  />
+</FullscreenModal>
+`;

src/containers/ReviewModal/index.jsx

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 
 import { FullscreenModal } from '@edx/paragon';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 
 import { selectors, actions, thunkActions } from 'data/redux';
 import { RequestKeys } from 'data/constants/requests';
@@ -49,7 +50,7 @@ export class ReviewModal extends React.Component {
   get title() {
     let title = this.props.oraName;
     if (process.env.REACT_APP_NOT_ENABLED) {
-      title = `${title} - Grading Demo`;
+      title = `${title} - ${this.props.intl.formatMessage(messages.demoTitleMessage)}`;
     }
     return title;
   }
@@ -107,6 +108,9 @@ ReviewModal.defaultProps = {
   gradingStatus: null,
 };
 ReviewModal.propTypes = {
+  // injected
+  intl: intlShape.isRequired,
+  // redux
   oraName: PropTypes.string.isRequired,
   isOpen: PropTypes.bool.isRequired,
   response: PropTypes.shape({
@@ -135,4 +139,4 @@ export const mapDispatchToProps = {
   reloadSubmissions: thunkActions.app.initialize,
 };
 
-export default connect(mapStateToProps, mapDispatchToProps)(ReviewModal);
+export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(ReviewModal));

src/containers/ReviewModal/index.test.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 
+import { formatMessage } from 'testUtils';
 import { selectors, actions, thunkActions } from 'data/redux';
 import { RequestKeys } from 'data/constants/requests';
 import { gradingStatuses as statuses } from 'data/services/lms/constants';
@@ -62,6 +63,7 @@ describe('ReviewModal component', () => {
     isLoaded: false,
     errorStatus: null,
     gradingStatus: statuses.ungraded,
+    intl: { formatMessage },
   };
   beforeEach(() => {
     props.setShowReview = jest.fn();
@@ -95,6 +97,13 @@ describe('ReviewModal component', () => {
         el.setProps({ isOpen: true, isLoaded: true });
         expect(render()).toMatchSnapshot();
       });
+      test('success, demo (title message)', () => {
+        const oldEnv = process.env;
+        process.env.REACT_APP_NOT_ENABLED = true;
+        el.setProps({ isOpen: true, isLoaded: true });
+        expect(render()).toMatchSnapshot();
+        process.env = oldEnv;
+      });
     });
 
     describe('component', () => {

src/containers/ReviewModal/messages.js

@@ -7,6 +7,11 @@ const messages = defineMessages({
     defaultMessage: 'Loading response',
     description: 'loading text for submission response review screen',
   },
+  demoTitleMessage: {
+    id: 'ora-grading.ReviewModal.demoTitleMessage',
+    defaultMessage: 'Grading Demo',
+    description: 'message added to modal title, indicating grading demo',
+  },
 });
 
 export default StrictDict(messages);