chore: Configuring E.S.G. to use the live BFF instead of the mock

.env

@@ -30,5 +30,3 @@ ENTERPRISE_MARKETING_URL=''
 ENTERPRISE_MARKETING_UTM_SOURCE=''
 ENTERPRISE_MARKETING_UTM_CAMPAIGN=''
 ENTERPRISE_MARKETING_FOOTER_UTM_MEDIUM=''
-APP_ID=''
-MFE_CONFIG_API_URL=''

.env.development

@@ -36,5 +36,3 @@ ENTERPRISE_MARKETING_URL='http://example.com'
 ENTERPRISE_MARKETING_UTM_SOURCE='example.com'
 ENTERPRISE_MARKETING_UTM_CAMPAIGN='example.com Referral'
 ENTERPRISE_MARKETING_FOOTER_UTM_MEDIUM='Footer'
-APP_ID=''
-MFE_CONFIG_API_URL=''

.eslintrc.js

@@ -4,13 +4,8 @@ const config = createConfig('eslint', {
   rules: {
     'import/no-named-as-default': 'off',
     'import/no-named-as-default-member': 'off',
-    'import/no-import-module-exports': 'off',
     'import/no-self-import': 'off',
     'spaced-comment': ['error', 'always', { 'block': { 'exceptions': ['*'] } }],
-    'react-hooks/rules-of-hooks': 'off',
-    "react/forbid-prop-types": ["error", { "forbid": ["any", "array"] }], // arguable object proptype is use when I do not care about the shape of the object
-    'no-import-assign': 'off',
-    'no-promise-executor-return': 'off',
   },
 });
 

.github/CODEOWNERS

@@ -1,6 +0,0 @@
-# Code owners for frontend-app-ora-grading
-
-# These owners will be the default owners for everything in
-# the repo. Unless a later match takes precedence, they will
-# be requested for review when someone opens a pull request.
-*       @edx/content-aurora

.github/workflows/add-depr-ticket-to-depr-board.yml

@@ -1,19 +0,0 @@
-# Run the workflow that adds new tickets that are either:
-# - labelled "DEPR"
-# - title starts with "[DEPR]"
-# - body starts with "Proposal Date" (this is the first template field)
-# to the org-wide DEPR project board
-
-name: Add newly created DEPR issues to the DEPR project board
-
-on:
-  issues:
-    types: [opened]
-
-jobs:
-  routeissue:
-    uses: openedx/.github/.github/workflows/add-depr-ticket-to-depr-board.yml@master
-    secrets:
-      GITHUB_APP_ID: ${{ secrets.GRAPHQL_AUTH_APP_ID }}
-      GITHUB_APP_PRIVATE_KEY: ${{ secrets.GRAPHQL_AUTH_APP_PEM }}
-      SLACK_BOT_TOKEN: ${{ secrets.SLACK_ISSUE_BOT_TOKEN }}

.github/workflows/add-remove-label-on-comment.yml

@@ -1,20 +0,0 @@
-# This workflow runs when a comment is made on the ticket
-# If the comment starts with "label: " it tries to apply
-# the label indicated in rest of comment.
-# If the comment starts with "remove label: ", it tries
-# to remove the indicated label.
-# Note: Labels are allowed to have spaces and this script does
-# not parse spaces (as often a space is legitimate), so the command
-# "label: really long lots of words label" will apply the
-# label "really long lots of words label"
-
-name: Allows for the adding and removing of labels via comment
-
-on:
-  issue_comment:
-    types: [created]
-
-jobs:
-  add_remove_labels:
-    uses: openedx/.github/.github/workflows/add-remove-label-on-comment.yml@master
-

.github/workflows/ci.yml

@@ -3,54 +3,50 @@ name: Node CI
 on:
   push:
     branches:
-    - master
+      - master
   pull_request:
     branches:
-    - '**'
+      - "**"
 
 jobs:
-  tests:
+  build:
     runs-on: ubuntu-20.04
     steps:
-    - name: Checkout
-      uses: actions/checkout@v3
-    - name: Setup Nodejs Env
-      run: echo "NODE_VER=`cat .nvmrc`" >> $GITHUB_ENV
-    - name: Setup Nodejs
-      uses: actions/setup-node@v3
-# Because of node 18 bug (https://github.com/nodejs/node/issues/47563), Pinning node version 18.15 until the next release of node
-      with:
-        node-version: 18.15
+      - name: Checkout
+        uses: actions/checkout@v2
 
-    - name: Install dependencies
-      run: npm ci
+      - name: Setup Nodejs
+        uses: actions/setup-node@v2
+        with:
+          node-version: 12
 
-    - name: Verify No Uncommitted Changes
-      run: make validate-no-uncommitted-package-lock-changes
+      - name: Install dependencies
+        run: npm ci
 
-    - name: Lint
-      run: npm run lint
+      - name: Verify No Uncommitted Changes
+        run: make validate-no-uncommitted-package-lock-changes
 
-    - name: Test
-      run: npm run test
+      - name: Lint
+        run: npm run lint
 
-    - name: Build
-      run: npm run build
+      - name: Test
+        run: npm run test
 
-    - name: Run Coverage
-      uses: codecov/codecov-action@v3
+      - name: Build
+        run: npm run build
 
-    - name: Send failure notification
-      if: ${{ failure() }}
-      uses: dawidd6/action-send-mail@v3
-      with:
-        server_address: email-smtp.us-east-1.amazonaws.com
-        server_port: 465
-        username: ${{ secrets.EDX_SMTP_USERNAME }}
-        password: ${{ secrets.EDX_SMTP_PASSWORD }}
-        subject: Upgrade python requirements workflow failed in ${{github.repository}}
-        to: masters-grades@edx.org
-        from: github-actions <github-actions@edx.org>
-        body: Upgrade python requirements workflow in ${{github.repository}} failed!
-          For details see "github.com/${{ github.repository }}/actions/runs/${{ github.run_id
-          }}"
+      - name: Run Coverage
+        uses: codecov/codecov-action@v2
+
+      - name: Send failure notification
+        if: ${{ failure() }}
+        uses: dawidd6/action-send-mail@v3
+        with:
+          server_address: email-smtp.us-east-1.amazonaws.com
+          server_port: 465
+          username: ${{ secrets.EDX_SMTP_USERNAME }}
+          password: ${{ secrets.EDX_SMTP_PASSWORD }}
+          subject: Upgrade python requirements workflow failed in ${{github.repository}}
+          to: masters-grades@edx.org
+          from: github-actions <github-actions@edx.org>
+          body: Upgrade python requirements workflow in ${{github.repository}} failed! For details see "github.com/${{ github.repository }}/actions/runs/${{ github.run_id }}"

.github/workflows/commitlint.yml

@@ -7,4 +7,4 @@ on:
 
 jobs:
   commitlint:
-    uses: openedx/.github/.github/workflows/commitlint.yml@master
+    uses: edx/.github/.github/workflows/commitlint.yml@master

.github/workflows/lockfileversion-check.yml

@@ -1,13 +0,0 @@
-#check package-lock file version
-
-name: Lockfile Version check
-
-on:
-  push:
-    branches:
-    - master
-  pull_request:
-
-jobs:
-  version-check:
-    uses: openedx/.github/.github/workflows/lockfileversion-check.yml@master

.github/workflows/self-assign-issue.yml

@@ -1,12 +0,0 @@
-# This workflow runs when a comment is made on the ticket
-# If the comment starts with "assign me" it assigns the author to the
-# ticket (case insensitive)
-
-name: Assign comment author to ticket if they say "assign me"
-on:
-  issue_comment:
-    types: [created]
-
-jobs:
-  self_assign_by_comment:
-    uses: openedx/.github/.github/workflows/self-assign-issue.yml@master

.gitignore

@@ -19,9 +19,6 @@ public/samples/
 .idea
 .vscode
 
-# Local package dependencies
-module.config.js
-
 ### transifex ###
 src/i18n/transifex_input.json
 temp

.nvmrc

@@ -1 +0,0 @@
-18.15

.tx/config

@@ -1,9 +1,8 @@
 [main]
 host = https://www.transifex.com
 
-[o:open-edx:p:edx-platform:r:frontend-app-ora-grading]
+[edx-platform.frontend-app-gradebook]
 file_filter = src/i18n/messages/<lang>.json
 source_file = src/i18n/transifex_input.json
 source_lang = en
-type        = KEYVALUEJSON
-
+type = KEYVALUEJSON

Makefile

@@ -2,17 +2,19 @@ npm-install-%: ## install specified % npm package
 	npm install $* --save-dev
 	git add package.json
 
-transifex_resource = frontend-app-ora-grading
-transifex_langs = "ar,fr,es_419,zh_CN,fr_CA,it_IT,pt_PT,de_DE,uk,ru,hi"
+transifex_resource = ora-enhanced-staff-grader
+transifex_langs = "ar,fr,es_419,zh_CN"
 
 transifex_utils = ./node_modules/.bin/transifex-utils.js
 i18n = ./src/i18n
 transifex_input = $(i18n)/transifex_input.json
+tx_url1 = https://www.transifex.com/api/2/project/edx-platform/resource/$(transifex_resource)/translation/en/strings/
+tx_url2 = https://www.transifex.com/api/2/project/edx-platform/resource/$(transifex_resource)/source/
 
 # This directory must match .babelrc .
 transifex_temp = ./temp/babel-plugin-react-intl
 
-NPM_TESTS=build i18n_extract lint test
+NPM_TESTS=build i18n_extract lint test is-es5
 
 .PHONY: test
 test: $(addprefix test.npm.,$(NPM_TESTS))  ## validate ci suite
@@ -47,15 +49,15 @@ push_translations:
 	# Pushing strings to Transifex...
 	tx push -s
 	# Fetching hashes from Transifex...
-	./node_modules/@edx/reactifex/bash_scripts/get_hashed_strings_v3.sh
+	./node_modules/reactifex/bash_scripts/get_hashed_strings.sh $(tx_url1)
 	# Writing out comments to file...
-	$(transifex_utils) $(transifex_temp) --comments --v3-scripts-path
+	$(transifex_utils) $(transifex_temp) --comments
 	# Pushing comments to Transifex...
-	./node_modules/@edx/reactifex/bash_scripts/put_comments_v3.sh
+	./node_modules/reactifex/bash_scripts/put_comments.sh $(tx_url2)
 
 # Pulls translations from Transifex.
 pull_translations:
-	tx pull -t -f --mode reviewed --languages=$(transifex_langs)
+	tx pull -f --mode reviewed --language=$(transifex_langs)
 
 # This target is used by CI.
 validate-no-uncommitted-package-lock-changes:

README.md

@@ -1,21 +0,0 @@
-# frontend-app-ora-grading
-
-The ORA Staff Grading App is a microfrontend (MFE) staff grading experience for Open Response Assessments (ORAs). This experience was designed to streamline the grading process and enable richer previews of submission content. 
-
-When enabled, ORAs with a staff grading step will link to this new MFE when clicking "Grade Available Responses" from the ORA or link in the instructor dashboard.
-
-## Quickstart
-
-To start the MFE and enable the feature in LMS:
-
-1. Start the MFE with `npm run start`. Take a note of the path/port (defaults to `http://localhost:1993`).
-
-2. Add the route root to `edx-platform` settings: In `edx-platform/lms/envs/private.py` or similar, add `ORA_GRADING_MICROFRONTEND_URL = 'http://localhost:1993'`
-
-3. Enable the feature: In Django Admin go to django-waffle > Flags and add/enable a new flag called `openresponseassessment.enhanced_staff_grader`.
-
-From there, visit the new experience by going to the Instructor Dashboard > Open Responses or an ORA with a Staff Graded Step and click a link to begin grading.
-
-## Resources
-
-See the [ORA Staff Grading](https://edx.readthedocs.io/projects/edx-partner-course-staff/en/latest/exercises_tools/open_response_assessments/ORA_Staff_Grading.html#ora-staff-grading) section on ReadTheDocs for usage information.

babel.config.js

@@ -0,0 +1,3 @@
+const { createConfig } = require('@edx/frontend-build');
+
+module.exports = createConfig('babel');

jest.config.js

@@ -2,7 +2,6 @@ const { createConfig } = require('@edx/frontend-build');
 
 module.exports = createConfig('jest', {
   setupFilesAfterEnv: [
-    'jest-expect-message',
     '<rootDir>/src/setupTest.js',
   ],
   modulePaths: ['<rootDir>/src/'],
@@ -12,10 +11,5 @@ module.exports = createConfig('jest', {
   coveragePathIgnorePatterns: [
     'src/segment.js',
     'src/postcss.config.js',
-    'testUtils', // don't unit test jest mocking tools
-    'src/data/services/lms/fakeData', // don't unit test mock data
-    'src/test', // don't unit test integration test utils
   ],
-  testTimeout: 120000,
-  testEnvironment: 'jsdom',
 });

package.json

@@ -8,6 +8,8 @@
   },
   "scripts": {
     "build": "fedx-scripts webpack",
+    "coveralls": "cat ./coverage/lcov.info | coveralls",
+    "is-es5": "es-check es5 ./dist/*.js",
     "i18n_extract": "BABEL_ENV=i18n fedx-scripts babel src --quiet > /dev/null",
     "lint": "fedx-scripts eslint --ext .jsx,.js src/",
     "lint-fix": "fedx-scripts eslint --fix --ext .jsx,.js src/",
@@ -25,10 +27,9 @@
   },
   "dependencies": {
     "@edx/brand": "npm:@edx/brand-edx.org@^2.0.3",
-    "@edx/frontend-component-footer": "^11.1.1",
-    "@edx/frontend-component-header": "^3.1.1",
-    "@edx/frontend-platform": "^2.5.1",
-    "@edx/paragon": "^19.9.0",
+    "@edx/frontend-component-footer": "10.1.6",
+    "@edx/frontend-platform": "1.12.4",
+    "@edx/paragon": "16.14.4",
     "@fortawesome/fontawesome-svg-core": "^1.2.36",
     "@fortawesome/free-brands-svg-icons": "^5.15.4",
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
@@ -36,26 +37,21 @@
     "@redux-beacon/segment": "^1.1.0",
     "@reduxjs/toolkit": "^1.6.1",
     "@testing-library/user-event": "^13.5.0",
-    "@zip.js/zip.js": "^2.4.6",
-    "axios": "^0.21.4",
     "classnames": "^2.3.1",
     "core-js": "3.16.2",
     "dompurify": "^2.3.1",
     "email-prop-type": "^3.0.1",
     "enzyme": "^3.11.0",
     "enzyme-to-json": "^3.6.2",
-    "file-saver": "^2.0.5",
-    "filesize": "^8.0.6",
     "font-awesome": "4.7.0",
     "history": "5.0.1",
     "html-react-parser": "^1.3.0",
     "lodash": "^4.17.21",
-    "moment": "^2.29.3",
+    "node-sass": "^6.0.1",
     "prop-types": "15.7.2",
     "query-string": "7.0.1",
-    "react": "^16.14.0",
-    "react-dom": "^16.14.0",
-    "react-helmet": "^6.1.0",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
     "react-intl": "^5.20.9",
     "react-pdf": "^5.5.0",
     "react-redux": "^7.2.4",
@@ -73,21 +69,22 @@
     "whatwg-fetch": "^3.6.2"
   },
   "devDependencies": {
-    "@edx/frontend-build": "12.4",
-    "@edx/reactifex": "^2.1.1",
+    "@edx/frontend-build": "8.0.4",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^12.1.0",
+    "axios": "0.21.1",
     "axios-mock-adapter": "^1.20.0",
+    "codecov": "^3.8.3",
     "enzyme-adapter-react-16": "^1.15.6",
+    "es-check": "^6.0.0",
     "fetch-mock": "^9.11.0",
     "husky": "^7.0.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "27.0.6",
-    "jest-expect-message": "^1.0.2",
-    "react-dev-utils": "^12.0.1",
-    "react-test-renderer": "^16.14.0",
+    "react-dev-utils": "^11.0.4",
+    "react-test-renderer": "^17.0.2",
     "reactifex": "1.1.1",
     "redux-mock-store": "^1.5.4",
-    "semantic-release": "^19.0.3"
+    "semantic-release": "^17.4.5"
   }
 }

public/index.html

@@ -1,7 +1,7 @@
 <!doctype html>
 <html lang="en-us" dir="ltr">
   <head>
-      <title>ORA staff grading | <%= process.env.SITE_NAME %></title>
+      <title>ORA Enhanced Staff Grader | <%= process.env.SITE_NAME %></title>
       <meta charset="utf-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <link rel="shortcut icon" href="<%=htmlWebpackPlugin.options.FAVICON_URL%>" type="image/x-icon" />

src/App.jsx

@@ -4,28 +4,22 @@ import { connect } from 'react-redux';
 import { BrowserRouter as Router } from 'react-router-dom';
 
 import Footer from '@edx/frontend-component-footer';
-import { LearningHeader as Header } from '@edx/frontend-component-header';
 
 import { selectors } from 'data/redux';
 
-import DemoWarning from 'containers/DemoWarning';
-import CTA from 'containers/CTA';
 import ListView from 'containers/ListView';
-
 import './App.scss';
-import Head from './components/Head';
 
-export const App = ({ courseMetadata, isEnabled }) => (
+import Header from 'containers/CourseHeader';
+
+export const App = ({ courseMetadata }) => (
   <Router>
     <div>
-      <Head />
       <Header
         courseTitle={courseMetadata.title}
         courseNumber={courseMetadata.number}
         courseOrg={courseMetadata.org}
       />
-      {!isEnabled && <DemoWarning />}
-      <CTA />
       <main>
         <ListView />
       </main>
@@ -46,12 +40,10 @@ App.propTypes = {
     number: PropTypes.string,
     org: PropTypes.string,
   }),
-  isEnabled: PropTypes.bool.isRequired,
 };
 
 export const mapStateToProps = (state) => ({
   courseMetadata: selectors.app.courseMetadata(state),
-  isEnabled: selectors.app.isEnabled(state),
 });
 
 export default connect(mapStateToProps)(App);

src/App.scss

@@ -42,6 +42,32 @@ $input-focus-box-shadow: $input-box-shadow; // hack to get upgrade to paragon 4.
   }
 }
 
+.course-header {
+  min-width: 0;
+  border-bottom: 1px solid black;
+
+  .course-title-lockup {
+    min-width: 0;
+
+    span {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      padding-bottom: 0.1rem;
+    }
+  }
+
+  .user-dropdown {
+    .btn {
+      height: 3rem;
+      @media (max-width: -1 + map-get($grid-breakpoints, "sm")) {
+        padding: 0 0.5rem;
+      }
+    }
+  }
+}
+
+
 #paragon-portal-root {
   .pgn__modal-layer {
     .pgn__modal-close-container {

src/App.test.jsx

@@ -2,30 +2,14 @@ import React from 'react';
 import { shallow } from 'enzyme';
 
 import Footer from '@edx/frontend-component-footer';
-import { LearningHeader as Header } from '@edx/frontend-component-header';
 
 import ListView from 'containers/ListView';
 
 import { App } from './App';
 
-jest.mock('data/redux', () => ({
-  app: {
-    selectors: {
-      courseMetadata: (state) => ({ courseMetadata: state }),
-      isEnabled: (state) => ({ isEnabled: state }),
-    },
-  },
-}));
-
-jest.mock('@edx/frontend-component-header', () => ({
-  LearningHeader: 'Header',
-}));
 jest.mock('@edx/frontend-component-footer', () => 'Footer');
-
-jest.mock('containers/DemoWarning', () => 'DemoWarning');
-jest.mock('containers/CTA', () => 'CTA');
 jest.mock('containers/ListView', () => 'ListView');
-jest.mock('components/Head', () => 'Head');
+jest.mock('containers/CourseHeader', () => 'CourseHeader');
 
 const logo = 'fakeLogo.png';
 let el;
@@ -38,14 +22,10 @@ describe('App router component', () => {
       number: 'course-number',
       title: 'course-title',
     },
-    isEnabled: true,
   };
-  test('snapshot: enabled', () => {
+  test('snapshot', () => {
     expect(shallow(<App {...props} />)).toMatchSnapshot();
   });
-  test('snapshot: disabled (show demo warning)', () => {
-    expect(shallow(<App {...props} isEnabled={false} />)).toMatchSnapshot();
-  });
   describe('component', () => {
     beforeEach(() => {
       process.env.LOGO_POWERED_BY_OPEN_EDX_URL_SVG = logo;
@@ -62,16 +42,5 @@ describe('App router component', () => {
     test('Footer logo drawn from env variable', () => {
       expect(router.find(Footer).props().logo).toEqual(logo);
     });
-
-    test('Header to use courseMetadata props', () => {
-      const {
-        courseTitle,
-        courseNumber,
-        courseOrg,
-      } = router.find(Header).props();
-      expect(courseTitle).toEqual(props.courseMetadata.title);
-      expect(courseNumber).toEqual(props.courseMetadata.number);
-      expect(courseOrg).toEqual(props.courseMetadata.org);
-    });
   });
 });

src/__snapshots__/App.test.jsx.snap

@@ -1,36 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`App router component snapshot: disabled (show demo warning) 1`] = `
+exports[`App router component snapshot 1`] = `
 <BrowserRouter>
   <div>
-    <Head />
-    <Header
+    <CourseHeader
       courseNumber="course-number"
       courseOrg="course-org"
       courseTitle="course-title"
     />
-    <DemoWarning />
-    <CTA />
-    <main>
-      <ListView />
-    </main>
-    <Footer
-      logo="https://edx-cdn.org/v3/stage/open-edx-tag.svg"
-    />
-  </div>
-</BrowserRouter>
-`;
-
-exports[`App router component snapshot: enabled 1`] = `
-<BrowserRouter>
-  <div>
-    <Head />
-    <Header
-      courseNumber="course-number"
-      courseOrg="course-org"
-      courseTitle="course-title"
-    />
-    <CTA />
     <main>
       <ListView />
     </main>

src/__snapshots__/index.test.jsx.snap

@@ -1,35 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`app registry subscribe: APP_INIT_ERROR.  snapshot: displays an ErrorPage to root element 1`] = `
-<ErrorPage
-  message="test-error-message"
-/>
-`;
-
-exports[`app registry subscribe: APP_READY.  links App to root element 1`] = `
-<IntlProvider
-  defaultFormats={Object {}}
-  defaultLocale="en"
-  fallbackOnEmptyString={true}
-  formats={Object {}}
-  locale="en"
-  messages={Object {}}
-  onError={[Function]}
-  onWarn={[Function]}
-  textComponent={Symbol(react.fragment)}
->
-  <AppProvider
-    store={
-      Object {
-        "dispatch": [Function],
-        "getState": [Function],
-        "replaceReducer": [Function],
-        "subscribe": [Function],
-        Symbol(Symbol.observable): [Function],
-      }
-    }
-  >
-    <App />
-  </AppProvider>
-</IntlProvider>
-`;

src/components/ConfirmModal.jsx

@@ -2,7 +2,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import { AlertModal, ActionRow, Button } from '@edx/paragon';
-import { nullMethod } from 'hooks';
 
 export const ConfirmModal = ({
   title,
@@ -16,7 +15,7 @@ export const ConfirmModal = ({
   <AlertModal
     className="confirm-modal"
     title={title}
-    onClose={nullMethod}
+    onClose={() => ({})}
     isOpen={isOpen}
     footerNode={(
       <ActionRow>

src/components/DemoAlert/__snapshots__/index.test.jsx.snap

@@ -1,23 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`DemoAlert component snapshot 1`] = `
-<AlertModal
-  footerNode={
-    <ActionRow>
-      <Button
-        onClick={[MockFunction props.onClose]}
-        variant="primary"
-      >
-        Confirm
-      </Button>
-    </ActionRow>
-  }
-  isOpen={true}
-  onClose={[MockFunction props.onClose]}
-  title="Demo submit prevented"
->
-  <p>
-    Grade submission is disabled in the Demo mode of the new ORA Staff Grader.
-  </p>
-</AlertModal>
-`;

src/components/DemoAlert/index.jsx

@@ -1,39 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import {
-  ActionRow,
-  AlertModal,
-  Button,
-} from '@edx/paragon';
-
-import messages from './messages';
-
-export const DemoAlert = ({
-  intl: { formatMessage },
-  isOpen,
-  onClose,
-}) => (
-  <AlertModal
-    title={formatMessage(messages.title)}
-    isOpen={isOpen}
-    onClose={onClose}
-    footerNode={(
-      <ActionRow>
-        <Button variant="primary" onClick={onClose}>
-          {formatMessage(messages.confirm)}
-        </Button>
-      </ActionRow>
-    )}
-  >
-    <p>{formatMessage(messages.warningMessage)}</p>
-  </AlertModal>
-);
-DemoAlert.propTypes = {
-  intl: intlShape.isRequired,
-  isOpen: PropTypes.bool.isRequired,
-  onClose: PropTypes.func.isRequired,
-};
-
-export default injectIntl(DemoAlert);

src/components/DemoAlert/index.test.jsx

@@ -1,16 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-
-import { formatMessage } from 'testUtils';
-import { DemoAlert } from '.';
-
-describe('DemoAlert component', () => {
-  test('snapshot', () => {
-    const props = {
-      intl: { formatMessage },
-      isOpen: true,
-      onClose: jest.fn().mockName('props.onClose'),
-    };
-    expect(shallow(<DemoAlert {...props} />)).toMatchSnapshot();
-  });
-});

src/components/DemoAlert/messages.js

@@ -1,21 +0,0 @@
-import { defineMessages } from '@edx/frontend-platform/i18n';
-
-const messages = defineMessages({
-  warningMessage: {
-    id: 'ora-grading.demoAlert.warningMessage',
-    defaultMessage: 'Grade submission is disabled in the Demo mode of the new ORA Staff Grader.',
-    description: 'Submit Grade button text after successful submission',
-  },
-  confirm: {
-    id: 'ora-grading.demoAlert.confirm',
-    defaultMessage: 'Confirm',
-    description: 'Confirm button text',
-  },
-  title: {
-    id: 'ora-grading.demoAlert.title',
-    defaultMessage: 'Demo submit prevented',
-    description: 'Title of alert modal after submit was prevented because in demo mode',
-  },
-});
-
-export default messages;

src/components/FilePopoverContent/__snapshots__/index.test.jsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`FilePopoverContent component snapshot default 1`] = `
+exports[`FilePopoverContent component snapshot 1`] = `
 <Fragment>
   <div
     className="help-popover-option"
@@ -28,62 +28,5 @@ exports[`FilePopoverContent component snapshot default 1`] = `
     <br />
     long descriptive text...
   </div>
-  <div
-    className="help-popover-option"
-  >
-    <strong>
-      <FormattedMessage
-        defaultMessage="File Size"
-        description="Popover title for file size"
-        id="ora-grading.FilePopoverCellContent.fileSizeTitle"
-      />
-    </strong>
-    <br />
-    filesize(6000)
-  </div>
-</Fragment>
-`;
-
-exports[`FilePopoverContent component snapshot invalid size 1`] = `
-<Fragment>
-  <div
-    className="help-popover-option"
-  >
-    <strong>
-      <FormattedMessage
-        defaultMessage="File Name"
-        description="Popover title for file name"
-        id="ora-grading.FilePopoverContent.filePopoverNameTitle"
-      />
-    </strong>
-    <br />
-    some file name
-  </div>
-  <div
-    className="help-popover-option"
-  >
-    <strong>
-      <FormattedMessage
-        defaultMessage="File Description"
-        description="Popover title for file description"
-        id="ora-grading.FilePopoverCellContent.filePopoverDescriptionTitle"
-      />
-    </strong>
-    <br />
-    long descriptive text...
-  </div>
-  <div
-    className="help-popover-option"
-  >
-    <strong>
-      <FormattedMessage
-        defaultMessage="File Size"
-        description="Popover title for file size"
-        id="ora-grading.FilePopoverCellContent.fileSizeTitle"
-      />
-    </strong>
-    <br />
-    Unknown
-  </div>
 </Fragment>
 `;

src/components/FilePopoverContent/index.jsx

@@ -2,39 +2,33 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
-import filesize from 'filesize';
 
 import messages from './messages';
 
-export const FilePopoverContent = ({ name, description, size }) => (
+export const FilePopoverContent = ({ file }) => (
   <>
     <div className="help-popover-option">
       <strong><FormattedMessage {...messages.filePopoverNameTitle} /></strong>
       <br />
-      {name}
+      {file.name}
     </div>
     <div className="help-popover-option">
       <strong><FormattedMessage {...messages.filePopoverDescriptionTitle} /></strong>
       <br />
-      {description}
-    </div>
-    <div className="help-popover-option">
-      <strong><FormattedMessage {...messages.fileSizeTitle} /></strong>
-      <br />
-      {typeof (size) === 'number' ? filesize(size) : 'Unknown'}
+      {file.description}
     </div>
   </>
 );
 
 FilePopoverContent.defaultProps = {
-  description: '',
-  size: null,
 };
 
 FilePopoverContent.propTypes = {
-  name: PropTypes.string.isRequired,
-  description: PropTypes.string,
-  size: PropTypes.number,
+  file: PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    description: PropTypes.string,
+    downloadURL: PropTypes.string,
+  }).isRequired,
 };
 
 export default FilePopoverContent;

src/components/FilePopoverContent/index.test.jsx

@@ -1,38 +1,29 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 
-import filesize from 'filesize';
 import FilePopoverContent from '.';
 
-jest.mock('filesize', () => (size) => `filesize(${size})`);
-
 describe('FilePopoverContent', () => {
   describe('component', () => {
     const props = {
-      name: 'some file name',
-      description: 'long descriptive text...',
-      downloadURL: 'this-url-is.working',
-      size: 6000,
+      file: {
+        name: 'some file name',
+        description: 'long descriptive text...',
+        downloadURL: 'this-url-is.working',
+      },
     };
     let el;
     beforeEach(() => {
       el = shallow(<FilePopoverContent {...props} />);
     });
-    describe('snapshot', () => {
-      test('default', () => expect(el).toMatchSnapshot());
-      test('invalid size', () => {
-        el.setProps({
-          size: null,
-        });
-        expect(el).toMatchSnapshot();
-      });
+    test('snapshot', () => {
+      expect(el).toMatchSnapshot();
     });
 
     describe('behavior', () => {
       test('content', () => {
-        expect(el.text()).toContain(props.name);
-        expect(el.text()).toContain(props.description);
-        expect(el.text()).toContain(filesize(props.size));
+        expect(el.text()).toContain(props.file.name);
+        expect(el.text()).toContain(props.file.description);
       });
     });
   });

src/components/FilePopoverContent/messages.js

@@ -11,11 +11,6 @@ const messages = defineMessages({
     defaultMessage: 'File Description',
     description: 'Popover title for file description',
   },
-  fileSizeTitle: {
-    id: 'ora-grading.FilePopoverCellContent.fileSizeTitle',
-    defaultMessage: 'File Size',
-    description: 'Popover title for file size',
-  },
 });
 
 export default messages;

src/components/FilePreview/Banners/ErrorBanner.jsx

@@ -1,44 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import { Alert, Button } from '@edx/paragon';
-import { Info } from '@edx/paragon/icons';
-import { FormattedMessage } from '@edx/frontend-platform/i18n';
-
-const messageShape = PropTypes.shape({
-  id: PropTypes.string,
-  defaultMessage: PropTypes.string,
-});
-
-export const ErrorBanner = ({ actions, headingMessage, children }) => {
-  const actionButtons = actions.map(action => (
-    <Button key={action.id} onClick={action.onClick} variant="outline-primary">
-      <FormattedMessage {...action.message} />
-    </Button>
-  ));
-  return (
-    <Alert variant="danger" icon={Info} actions={actionButtons}>
-      <Alert.Heading>
-        <FormattedMessage {...headingMessage} />
-      </Alert.Heading>
-      {children}
-    </Alert>
-  );
-};
-ErrorBanner.defaultProps = {
-  actions: [],
-  children: null,
-};
-ErrorBanner.propTypes = {
-  actions: PropTypes.arrayOf(
-    PropTypes.shape({
-      id: PropTypes.string,
-      onClick: PropTypes.func,
-      message: messageShape,
-    }),
-  ),
-  headingMessage: messageShape.isRequired,
-  children: PropTypes.node,
-};
-
-export default ErrorBanner;

src/components/FilePreview/Banners/ErrorBanner.test.jsx

@@ -1,59 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-
-import ErrorBanner from './ErrorBanner';
-
-import messages from '../messages';
-
-describe('Error Banner component', () => {
-  const children = <p>Abitary Child</p>;
-
-  const props = {
-    actions: [
-      {
-        id: 'action1',
-        onClick: jest.fn().mockName('action1.onClick'),
-        message: messages.retryButton,
-      },
-      {
-        id: 'action2',
-        onClick: jest.fn().mockName('action2.onClick'),
-        message: messages.retryButton,
-      },
-    ],
-    headingMessage: messages.unknownError,
-    children,
-  };
-
-  let el;
-  beforeEach(() => {
-    el = shallow(<ErrorBanner {...props} />);
-  });
-
-  test('snapshot', () => {
-    expect(el).toMatchSnapshot();
-  });
-
-  describe('component', () => {
-    test('children node', () => {
-      expect(el.containsMatchingElement(children)).toEqual(true);
-    });
-
-    test('verify actions', () => {
-      const actions = el.find('Alert').prop('actions');
-      expect(actions).toHaveLength(props.actions.length);
-
-      actions.forEach((action, index) => {
-        expect(action.type).toEqual('Button');
-        expect(action.props.onClick).toEqual(props.actions[index].onClick);
-        // action message
-        expect(action.props.children.props).toEqual(props.actions[index].message);
-      });
-    });
-
-    test('verify heading', () => {
-      const heading = el.find('FormattedMessage');
-      expect(heading.props()).toEqual(props.headingMessage);
-    });
-  });
-});

src/components/FilePreview/Banners/LoadingBanner.jsx

@@ -1,14 +0,0 @@
-import React from 'react';
-
-import { Alert, Spinner } from '@edx/paragon';
-
-export const LoadingBanner = () => (
-  <Alert variant="info">
-    <Spinner animation="border" className="d-flex m-auto" />
-  </Alert>
-);
-
-LoadingBanner.defaultProps = {};
-LoadingBanner.propTypes = {};
-
-export default LoadingBanner;

src/components/FilePreview/Banners/LoadingBanner.test.jsx

@@ -1,11 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-
-import LoadingBanner from './LoadingBanner';
-
-describe('Loading Banner component', () => {
-  test('snapshot', () => {
-    const el = shallow(<LoadingBanner />);
-    expect(el).toMatchSnapshot();
-  });
-});

src/components/FilePreview/Banners/__snapshots__/ErrorBanner.test.jsx.snap

@@ -1,42 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Error Banner component snapshot 1`] = `
-<Alert
-  actions={
-    Array [
-      <Button
-        onClick={[MockFunction action1.onClick]}
-        variant="outline-primary"
-      >
-        <FormattedMessage
-          defaultMessage="Retry"
-          description="Retry button for error in file renderer"
-          id="ora-grading.ResponseDisplay.FileRenderer.retryButton"
-        />
-      </Button>,
-      <Button
-        onClick={[MockFunction action2.onClick]}
-        variant="outline-primary"
-      >
-        <FormattedMessage
-          defaultMessage="Retry"
-          description="Retry button for error in file renderer"
-          id="ora-grading.ResponseDisplay.FileRenderer.retryButton"
-        />
-      </Button>,
-    ]
-  }
-  variant="danger"
->
-  <Alert.Heading>
-    <FormattedMessage
-      defaultMessage="Unknown errors"
-      description="Unknown errors message"
-      id="ora-grading.ResponseDisplay.FileRenderer.unknownError"
-    />
-  </Alert.Heading>
-  <p>
-    Abitary Child
-  </p>
-</Alert>
-`;

src/components/FilePreview/Banners/__snapshots__/LoadingBanner.test.jsx.snap

@@ -1,12 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Loading Banner component snapshot 1`] = `
-<Alert
-  variant="info"
->
-  <Spinner
-    animation="border"
-    className="d-flex m-auto"
-  />
-</Alert>
-`;

src/components/FilePreview/Banners/index.jsx

@@ -1,2 +0,0 @@
-export { default as ErrorBanner } from './ErrorBanner';
-export { default as LoadingBanner } from './LoadingBanner';

src/components/FilePreview/BaseRenderers/ImageRenderer.jsx

@@ -1,27 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-const ImageRenderer = ({
-  url, fileName, onError, onSuccess,
-}) => (
-  <img
-    alt={fileName}
-    className="image-renderer"
-    src={url}
-    onError={onError}
-    onLoad={onSuccess}
-  />
-);
-
-ImageRenderer.defaultProps = {
-  fileName: '',
-};
-
-ImageRenderer.propTypes = {
-  url: PropTypes.string.isRequired,
-  fileName: PropTypes.string,
-  onError: PropTypes.func.isRequired,
-  onSuccess: PropTypes.func.isRequired,
-};
-
-export default ImageRenderer;

src/components/FilePreview/BaseRenderers/PDFRenderer.jsx

@@ -1,92 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import { pdfjs, Document, Page } from 'react-pdf';
-import {
-  Icon, Form, ActionRow, IconButton,
-} from '@edx/paragon';
-import { ChevronLeft, ChevronRight } from '@edx/paragon/icons';
-import pdfjsWorker from 'react-pdf/dist/esm/pdf.worker.entry';
-
-import 'react-pdf/dist/esm/Page/AnnotationLayer.css';
-import { rendererHooks } from './pdfHooks';
-
-pdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorker;
-
-/**
- * <PDFRenderer />
- */
-export const PDFRenderer = ({
-  onError,
-  onSuccess,
-  url,
-}) => {
-  const {
-    pageNumber,
-    numPages,
-    relativeHeight,
-    wrapperRef,
-    onDocumentLoadSuccess,
-    onLoadPageSuccess,
-    onDocumentLoadError,
-    onInputPageChange,
-    onNextPageButtonClick,
-    onPrevPageButtonClick,
-    hasNext,
-    hasPrev,
-  } = rendererHooks({ onError, onSuccess });
-
-  return (
-    <div ref={wrapperRef} className="pdf-renderer">
-      <Document
-        file={url}
-        onLoadSuccess={onDocumentLoadSuccess}
-        onLoadError={onDocumentLoadError}
-      >
-        {/* <Outline /> */}
-        <div className="page-wrapper" style={{ height: relativeHeight }}>
-          <Page pageNumber={pageNumber} onLoadSuccess={onLoadPageSuccess} />
-        </div>
-      </Document>
-      <ActionRow className="d-flex justify-content-center m-0">
-        <IconButton
-          size="inline"
-          alt="previous pdf page"
-          iconAs={Icon}
-          src={ChevronLeft}
-          disabled={!hasPrev}
-          onClick={onPrevPageButtonClick}
-        />
-        <Form.Group className="d-flex align-items-center m-0">
-          <Form.Label isInline>Page </Form.Label>
-          <Form.Control
-            type="number"
-            min={0}
-            max={numPages}
-            value={pageNumber}
-            onChange={onInputPageChange}
-          />
-          <Form.Label isInline> of {numPages}</Form.Label>
-        </Form.Group>
-        <IconButton
-          size="inline"
-          alt="next pdf page"
-          iconAs={Icon}
-          src={ChevronRight}
-          disabled={!hasNext}
-          onClick={onNextPageButtonClick}
-        />
-      </ActionRow>
-    </div>
-  );
-};
-
-PDFRenderer.defaultProps = {};
-
-PDFRenderer.propTypes = {
-  url: PropTypes.string.isRequired,
-  onError: PropTypes.func.isRequired,
-  onSuccess: PropTypes.func.isRequired,
-};
-
-export default PDFRenderer;

src/components/FilePreview/BaseRenderers/PDFRenderer.test.jsx

@@ -1,57 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-
-import PDFRenderer from './PDFRenderer';
-
-import * as hooks from './pdfHooks';
-
-jest.mock('react-pdf', () => ({
-  pdfjs: { GlobalWorkerOptions: {} },
-  Document: () => 'Document',
-  Page: () => 'Page',
-}));
-
-jest.mock('./pdfHooks', () => ({
-  rendererHooks: jest.fn(),
-}));
-
-describe('PDF Renderer Component', () => {
-  const props = {
-    url: 'some_url.pdf',
-    onError: jest.fn().mockName('this.props.onError'),
-    onSuccess: jest.fn().mockName('this.props.onSuccess'),
-  };
-  const hookProps = {
-    pageNumber: 1,
-    numPages: 10,
-    relativeHeight: 200,
-    wrapperRef: { current: 'hooks.wrapperRef' },
-    onDocumentLoadSuccess: jest.fn().mockName('hooks.onDocumentLoadSuccess'),
-    onLoadPageSuccess: jest.fn().mockName('hooks.onLoadPageSuccess'),
-    onDocumentLoadError: jest.fn().mockName('hooks.onDocumentLoadError'),
-    onInputPageChange: jest.fn().mockName('hooks.onInputPageChange'),
-    onNextPageButtonClick: jest.fn().mockName('hooks.onNextPageButtonClick'),
-    onPrevPageButtonClick: jest.fn().mockName('hooks.onPrevPageButtonClick'),
-    hasNext: true,
-    hasPref: false,
-  };
-
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-  describe('snapshots', () => {
-    test('first page, prev is disabled', () => {
-      hooks.rendererHooks.mockReturnValue(hookProps);
-      expect(shallow(<PDFRenderer {...props} />)).toMatchSnapshot();
-    });
-    test('on last page, next is disabled', () => {
-      hooks.rendererHooks.mockReturnValue({
-        ...hookProps,
-        pageNumber: hookProps.numPages,
-        hasNext: false,
-        hasPrev: true,
-      });
-      expect(shallow(<PDFRenderer {...props} />)).toMatchSnapshot();
-    });
-  });
-});

src/components/FilePreview/BaseRenderers/TXTRenderer.jsx

@@ -1,22 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { rendererHooks } from './textHooks';
-
-const TXTRenderer = ({ url, onError, onSuccess }) => {
-  const { content } = rendererHooks({ url, onError, onSuccess });
-  return (
-    <pre className="txt-renderer">
-      {content}
-    </pre>
-  );
-};
-
-TXTRenderer.defaultProps = {};
-
-TXTRenderer.propTypes = {
-  url: PropTypes.string.isRequired,
-  onError: PropTypes.func.isRequired,
-  onSuccess: PropTypes.func.isRequired,
-};
-
-export default TXTRenderer;

src/components/FilePreview/BaseRenderers/TXTRenderer.test.jsx

@@ -1,23 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-
-import TXTRenderer from './TXTRenderer';
-
-jest.mock('./textHooks', () => {
-  const content = 'test-content';
-  return {
-    content,
-    rendererHooks: (args) => ({ content, rendererHooks: args }),
-  };
-});
-
-describe('TXT Renderer Component', () => {
-  const props = {
-    url: 'some_url.txt',
-    onError: jest.fn().mockName('this.props.onError'),
-    onSuccess: jest.fn().mockName('this.props.onSuccess'),
-  };
-  test('snapshot', () => {
-    expect(shallow(<TXTRenderer {...props} />)).toMatchSnapshot();
-  });
-});

src/components/FilePreview/BaseRenderers/__snapshots__/PDFRenderer.test.jsx.snap

@@ -1,137 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`PDF Renderer Component snapshots first page, prev is disabled 1`] = `
-<div
-  className="pdf-renderer"
->
-  <Document
-    file="some_url.pdf"
-    onLoadError={[MockFunction hooks.onDocumentLoadError]}
-    onLoadSuccess={[MockFunction hooks.onDocumentLoadSuccess]}
-  >
-    <div
-      className="page-wrapper"
-      style={
-        Object {
-          "height": 200,
-        }
-      }
-    >
-      <Page
-        onLoadSuccess={[MockFunction hooks.onLoadPageSuccess]}
-        pageNumber={1}
-      />
-    </div>
-  </Document>
-  <ActionRow
-    className="d-flex justify-content-center m-0"
-  >
-    <IconButton
-      alt="previous pdf page"
-      disabled={true}
-      iconAs="Icon"
-      onClick={[MockFunction hooks.onPrevPageButtonClick]}
-      size="inline"
-      src={[MockFunction icons.ChevronLeft]}
-    />
-    <Form.Group
-      className="d-flex align-items-center m-0"
-    >
-      <Form.Label
-        isInline={true}
-      >
-        Page 
-      </Form.Label>
-      <Form.Control
-        max={10}
-        min={0}
-        onChange={[MockFunction hooks.onInputPageChange]}
-        type="number"
-        value={1}
-      />
-      <Form.Label
-        isInline={true}
-      >
-         of 
-        10
-      </Form.Label>
-    </Form.Group>
-    <IconButton
-      alt="next pdf page"
-      disabled={false}
-      iconAs="Icon"
-      onClick={[MockFunction hooks.onNextPageButtonClick]}
-      size="inline"
-      src={[MockFunction icons.ChevronRight]}
-    />
-  </ActionRow>
-</div>
-`;
-
-exports[`PDF Renderer Component snapshots on last page, next is disabled 1`] = `
-<div
-  className="pdf-renderer"
->
-  <Document
-    file="some_url.pdf"
-    onLoadError={[MockFunction hooks.onDocumentLoadError]}
-    onLoadSuccess={[MockFunction hooks.onDocumentLoadSuccess]}
-  >
-    <div
-      className="page-wrapper"
-      style={
-        Object {
-          "height": 200,
-        }
-      }
-    >
-      <Page
-        onLoadSuccess={[MockFunction hooks.onLoadPageSuccess]}
-        pageNumber={10}
-      />
-    </div>
-  </Document>
-  <ActionRow
-    className="d-flex justify-content-center m-0"
-  >
-    <IconButton
-      alt="previous pdf page"
-      disabled={false}
-      iconAs="Icon"
-      onClick={[MockFunction hooks.onPrevPageButtonClick]}
-      size="inline"
-      src={[MockFunction icons.ChevronLeft]}
-    />
-    <Form.Group
-      className="d-flex align-items-center m-0"
-    >
-      <Form.Label
-        isInline={true}
-      >
-        Page 
-      </Form.Label>
-      <Form.Control
-        max={10}
-        min={0}
-        onChange={[MockFunction hooks.onInputPageChange]}
-        type="number"
-        value={10}
-      />
-      <Form.Label
-        isInline={true}
-      >
-         of 
-        10
-      </Form.Label>
-    </Form.Group>
-    <IconButton
-      alt="next pdf page"
-      disabled={true}
-      iconAs="Icon"
-      onClick={[MockFunction hooks.onNextPageButtonClick]}
-      size="inline"
-      src={[MockFunction icons.ChevronRight]}
-    />
-  </ActionRow>
-</div>
-`;

src/components/FilePreview/BaseRenderers/index.jsx

@@ -1,3 +0,0 @@
-export { default as ImageRenderer } from './ImageRenderer';
-export { default as PDFRenderer } from './PDFRenderer';
-export { default as TXTRenderer } from './TXTRenderer';

src/components/FilePreview/BaseRenderers/pdfHooks.jsx

@@ -1,81 +0,0 @@
-import { useState, useRef } from 'react';
-
-import { pdfjs } from 'react-pdf';
-import pdfjsWorker from 'react-pdf/dist/esm/pdf.worker.entry';
-
-import 'react-pdf/dist/esm/Page/AnnotationLayer.css';
-
-import { ErrorStatuses } from 'data/constants/requests';
-import { StrictDict } from 'utils';
-import * as module from './pdfHooks';
-
-pdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorker;
-
-export const errors = StrictDict({
-  missingPDF: 'MissingPDFException',
-});
-
-export const state = StrictDict({
-  pageNumber: (val) => useState(val),
-  numPages: (val) => useState(val),
-  relativeHeight: (val) => useState(val),
-});
-
-export const initialState = {
-  pageNumber: 1,
-  numPages: 1,
-  relativeHeight: 1,
-};
-
-export const safeSetPageNumber = ({ numPages, rawSetPageNumber }) => (pageNumber) => {
-  if (pageNumber > 0 && pageNumber <= numPages) {
-    rawSetPageNumber(pageNumber);
-  }
-};
-
-export const rendererHooks = ({
-  onError,
-  onSuccess,
-}) => {
-  const [pageNumber, rawSetPageNumber] = module.state.pageNumber(initialState.pageNumber);
-  const [numPages, setNumPages] = module.state.numPages(initialState.numPages);
-  const [relativeHeight, setRelativeHeight] = module.state.relativeHeight(
-    initialState.relativeHeight,
-  );
-
-  const setPageNumber = module.safeSetPageNumber({ numPages, rawSetPageNumber });
-
-  const wrapperRef = useRef();
-
-  return {
-    pageNumber,
-    numPages,
-    relativeHeight,
-    wrapperRef,
-    onDocumentLoadSuccess: (args) => {
-      onSuccess();
-      setNumPages(args.numPages);
-    },
-    onLoadPageSuccess: (page) => {
-      const pageWidth = page.view[2];
-      const pageHeight = page.view[3];
-      const wrapperHeight = wrapperRef.current.getBoundingClientRect().width;
-      const newHeight = (wrapperHeight * pageHeight) / pageWidth;
-      setRelativeHeight(newHeight);
-    },
-    onDocumentLoadError: (error) => {
-      let status;
-      if (error.name === errors.missingPDF) {
-        status = ErrorStatuses.notFound;
-      } else {
-        status = ErrorStatuses.serverError;
-      }
-      onError(status);
-    },
-    onInputPageChange: ({ target: { value } }) => setPageNumber(parseInt(value, 10)),
-    onPrevPageButtonClick: () => setPageNumber(pageNumber - 1),
-    onNextPageButtonClick: () => setPageNumber(pageNumber + 1),
-    hasNext: pageNumber < numPages,
-    hasPrev: pageNumber > 1,
-  };
-};

src/components/FilePreview/BaseRenderers/pdfHooks.test.js

@@ -1,148 +0,0 @@
-import React from 'react';
-
-import { MockUseState } from 'testUtils';
-import { keyStore } from 'utils';
-import { ErrorStatuses } from 'data/constants/requests';
-
-import * as hooks from './pdfHooks';
-
-jest.mock('react-pdf', () => ({
-  pdfjs: { GlobalWorkerOptions: {} },
-  Document: () => 'Document',
-  Page: () => 'Page',
-}));
-
-const state = new MockUseState(hooks);
-const hookKeys = keyStore(hooks);
-
-const testValue = 'my-test-value';
-
-describe('PDF Renderer hooks', () => {
-  beforeAll(() => {
-    jest.clearAllMocks();
-  });
-  describe('state hooks', () => {
-    state.testGetter(state.keys.pageNumber);
-    state.testGetter(state.keys.numPages);
-    state.testGetter(state.keys.relativeHeight);
-  });
-  describe('non-state hooks', () => {
-    beforeEach(() => state.mock());
-    afterEach(() => state.restore());
-    describe('safeSetPageNumber', () => {
-      it('returns value handler that sets page number if valid', () => {
-        const rawSetPageNumber = jest.fn();
-        const numPages = 10;
-        hooks.safeSetPageNumber({ numPages, rawSetPageNumber })(0);
-        expect(rawSetPageNumber).not.toHaveBeenCalled();
-        hooks.safeSetPageNumber({ numPages, rawSetPageNumber })(numPages + 1);
-        expect(rawSetPageNumber).not.toHaveBeenCalled();
-        hooks.safeSetPageNumber({ numPages, rawSetPageNumber })(numPages - 1);
-        expect(rawSetPageNumber).toHaveBeenCalledWith(numPages - 1);
-      });
-    });
-    describe('rendererHooks', () => {
-      const props = {
-        url: 'some_url.pdf',
-        onError: jest.fn().mockName('this.props.onError'),
-        onSuccess: jest.fn().mockName('this.props.onSuccess'),
-      };
-      let setPageNumber;
-      let hook;
-      let mockSetPageNumber;
-      let mockSafeSetPageNumber;
-      beforeEach(() => {
-        mockSetPageNumber = jest.fn(val => ({ setPageNumber: { val } }));
-        mockSafeSetPageNumber = jest.fn(() => mockSetPageNumber);
-        setPageNumber = jest.spyOn(hooks, hookKeys.safeSetPageNumber)
-          .mockImplementation(mockSafeSetPageNumber);
-        hook = hooks.rendererHooks(props);
-      });
-      afterAll(() => {
-        setPageNumber.mockRestore();
-      });
-      describe('returned object', () => {
-        Object.keys(state.keys).forEach(key => {
-          test(`${key} tied to store and initialized from initialState`, () => {
-            expect(hook[key]).toEqual(hooks.initialState[key]);
-            expect(hook[key]).toEqual(state.stateVals[key]);
-          });
-        });
-      });
-      test('wrapperRef passed as react ref', () => {
-        expect(hook.wrapperRef.useRef).toEqual(true);
-      });
-      describe('onDocumentLoadSuccess', () => {
-        it('calls onSuccess and sets numPages based on args', () => {
-          hook.onDocumentLoadSuccess({ numPages: testValue });
-          expect(props.onSuccess).toHaveBeenCalled();
-          expect(state.setState.numPages).toHaveBeenCalledWith(testValue);
-        });
-      });
-      describe('onLoadPageSuccess', () => {
-        it('sets relative height based on page size', () => {
-          const width = 23;
-          React.useRef.mockReturnValueOnce({
-            current: {
-              getBoundingClientRect: () => ({ width }),
-            },
-          });
-          const [pageWidth, pageHeight] = [20, 30];
-          const page = { view: [0, 0, pageWidth, pageHeight] };
-          hook = hooks.rendererHooks(props);
-          const height = (width * pageHeight) / pageWidth;
-          hook.onLoadPageSuccess(page);
-          expect(state.setState.relativeHeight).toHaveBeenCalledWith(height);
-        });
-      });
-      describe('onDocumentLoadError', () => {
-        it('calls onError with notFound error if error is missingPDF error', () => {
-          hook.onDocumentLoadError({ name: hooks.errors.missingPDF });
-          expect(props.onError).toHaveBeenCalledWith(ErrorStatuses.notFound);
-        });
-        it('calls onError with serverError by default', () => {
-          hook.onDocumentLoadError({ name: testValue });
-          expect(props.onError).toHaveBeenCalledWith(ErrorStatuses.serverError);
-        });
-      });
-      describe('onInputPageChange', () => {
-        it('calls setPageNumber with int event target value', () => {
-          hook.onInputPageChange({ target: { value: '2.3' } });
-          expect(mockSetPageNumber).toHaveBeenCalledWith(2);
-        });
-      });
-      describe('onPrevPageButtonClick', () => {
-        it('calls setPageNumber with current page number - 1', () => {
-          hook.onPrevPageButtonClick();
-          expect(mockSetPageNumber).toHaveBeenCalledWith(hook.pageNumber - 1);
-        });
-      });
-      describe('onNextPageButtonClick', () => {
-        it('calls setPageNumber with current page number + 1', () => {
-          hook.onNextPageButtonClick();
-          expect(mockSetPageNumber).toHaveBeenCalledWith(hook.pageNumber + 1);
-        });
-      });
-      test('hasNext returns true iff pageNumber is less than total number of pages', () => {
-        state.mockVal(state.keys.numPages, 10);
-        state.mockVal(state.keys.pageNumber, 9);
-        hook = hooks.rendererHooks(props);
-        expect(hook.hasNext).toEqual(true);
-        state.mockVal(state.keys.pageNumber, 10);
-        hook = hooks.rendererHooks(props);
-        expect(hook.hasNext).toEqual(false);
-      });
-      test('hasPrev returns true iff pageNumber is greater than 1', () => {
-        state.mockVal(state.keys.pageNumber, 1);
-        hook = hooks.rendererHooks(props);
-        expect(hook.hasPrev).toEqual(false);
-        state.mockVal(state.keys.pageNumber, 0);
-        hook = hooks.rendererHooks(props);
-        expect(hook.hasPrev).toEqual(false);
-        state.mockVal(state.keys.pageNumber, 2);
-        hook = hooks.rendererHooks(props);
-        expect(hook.hasPrev).toEqual(true);
-      });
-    });
-  });
-});

src/components/FilePreview/BaseRenderers/textHooks.js

@@ -1,34 +0,0 @@
-import { useEffect, useState } from 'react';
-import { get } from 'axios';
-
-import { StrictDict } from 'utils';
-import * as module from './textHooks';
-
-export const state = StrictDict({
-  content: (val) => useState(val),
-});
-
-export const fetchFile = async ({
-  setContent,
-  url,
-  onError,
-  onSuccess,
-}) => get(url)
-  .then(({ data }) => {
-    onSuccess();
-    setContent(data);
-  })
-  .catch((e) => onError(e.response.status));
-
-export const rendererHooks = ({ url, onError, onSuccess }) => {
-  const [content, setContent] = module.state.content('');
-  useEffect(() => {
-    module.fetchFile({
-      setContent,
-      url,
-      onError,
-      onSuccess,
-    });
-  }, [onError, onSuccess, setContent, url]);
-  return { content };
-};

src/components/FilePreview/BaseRenderers/textHooks.test.js

@@ -1,95 +0,0 @@
-/* eslint-disable prefer-promise-reject-errors */
-import { useEffect } from 'react';
-import * as axios from 'axios';
-
-import { keyStore } from 'utils';
-import { MockUseState } from 'testUtils';
-import * as hooks from './textHooks';
-
-jest.mock('axios', () => ({
-  get: jest.fn(),
-}));
-
-const hookKeys = keyStore(hooks);
-const state = new MockUseState(hooks);
-
-let hook;
-
-const testValue = 'test-value';
-
-const props = {
-  url: 'test-url',
-  onError: jest.fn(),
-  onSuccess: jest.fn(),
-};
-describe('Text file preview hooks', () => {
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-  describe('state hooks', () => {
-    state.testGetter(state.keys.content);
-  });
-  describe('non-state hooks', () => {
-    beforeEach(() => {
-      state.mock();
-    });
-    afterEach(() => {
-      state.restore();
-    });
-    describe('rendererHooks', () => {
-      it('returns content tied to hook state', () => {
-        hook = hooks.rendererHooks(props);
-        expect(hook.content).toEqual(state.stateVals.content);
-        expect(hook.content).toEqual('');
-      });
-      describe('initialization behavior', () => {
-        let cb;
-        let prereqs;
-        const loadHook = () => {
-          hook = hooks.rendererHooks(props);
-          [[cb, prereqs]] = useEffect.mock.calls;
-        };
-        it('calls fetchFile method, predicated on setContent, url, and callbacks', () => {
-          jest.spyOn(hooks, hookKeys.fetchFile).mockImplementationOnce(() => {});
-          loadHook();
-          expect(useEffect).toHaveBeenCalled();
-          expect(prereqs).toEqual([
-            props.onError,
-            props.onSuccess,
-            state.setState.content,
-            props.url,
-          ]);
-          expect(hooks.fetchFile).not.toHaveBeenCalled();
-          cb();
-          expect(hooks.fetchFile).toHaveBeenCalledWith({
-            onError: props.onError,
-            onSuccess: props.onSuccess,
-            setContent: state.setState.content,
-            url: props.url,
-          });
-        });
-      });
-    });
-    describe('fetchFile', () => {
-      describe('onSuccess', () => {
-        it('calls get', async () => {
-          const testData = 'test-data';
-          axios.get.mockReturnValueOnce(Promise.resolve({ data: testData }));
-          await hooks.fetchFile({ ...props, setContent: state.setState.content });
-          expect(props.onSuccess).toHaveBeenCalled();
-          expect(state.setState[state.keys.content]).toHaveBeenCalledWith(testData);
-        });
-      });
-      describe('onError', () => {
-        it('calls get on the passed url when it changes', async (done) => {
-          axios.get.mockReturnValueOnce(Promise.reject(
-            { response: { status: testValue } },
-          ));
-          await hooks.fetchFile({ ...props, setContent: state.setState.content });
-          expect(props.onError).toHaveBeenCalledWith(testValue);
-          done();
-        });
-      });
-    });
-  });
-});

src/components/FilePreview/FileCard.jsx

@@ -12,13 +12,9 @@ import './FileCard.scss';
  */
 export const FileCard = ({ file, children }) => (
   <Card className="file-card" key={file.name}>
-    <Collapsible
-      className="file-collapsible"
-      defaultOpen
-      title={<h3 className="file-card-title">{file.name}</h3>}
-    >
+    <Collapsible className="file-collapsible" defaultOpen title={<h3>{file.name}</h3>}>
       <div className="preview-panel">
-        <FileInfo><FilePopoverContent {...file} /></FileInfo>
+        <FileInfo><FilePopoverContent file={file} /></FileInfo>
         {children}
       </div>
     </Collapsible>

src/components/FilePreview/FileCard.scss

@@ -2,12 +2,6 @@
 
 .file-card {
   margin: map-get($spacers, 1) 0;
-
-  .file-card-title {
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-  }
 }
 
 .image-renderer {
@@ -24,10 +18,4 @@
 
 .txt-renderer {
   white-space: pre-wrap;
-}
-
-@include media-breakpoint-down(sm) {
-  .file-card-title {
-    width: map-get($container-max-widths, "sm")/2;
-  }
 }

src/components/FilePreview/FileCard.test.jsx

@@ -29,7 +29,7 @@ describe('File Preview Card component', () => {
   describe('Component', () => {
     test('collapsible title is name header', () => {
       const title = el.find(Collapsible).prop('title');
-      expect(title).toEqual(<h3 className="file-card-title">{props.file.name}</h3>);
+      expect(title).toEqual(<h3>{props.file.name}</h3>);
     });
     test('forwards children into preview-panel', () => {
       const previewPanelChildren = el.find('.preview-panel').children();

src/components/FilePreview/FileInfo.jsx

@@ -8,7 +8,6 @@ import {
 } from '@edx/paragon';
 import { InfoOutline } from '@edx/paragon/icons';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
-import { nullMethod } from 'hooks';
 import messages from './messages';
 
 /**
@@ -20,7 +19,7 @@ export const FileInfo = ({ onClick, children }) => (
     placement="right-end"
     flip
     overlay={(
-      <Popover id="file-popover" className="overlay-help-popover">
+      <Popover className="overlay-help-popover">
         <Popover.Content>{children}</Popover.Content>
       </Popover>
     )}
@@ -37,7 +36,7 @@ export const FileInfo = ({ onClick, children }) => (
 );
 
 FileInfo.defaultProps = {
-  onClick: nullMethod,
+  onClick: () => {},
 };
 FileInfo.propTypes = {
   onClick: PropTypes.func,

src/components/FilePreview/FileRenderer.jsx

@@ -1,46 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-
-import FileCard from './FileCard';
-import { ErrorBanner, LoadingBanner } from './Banners';
-import { renderHooks } from './hooks';
-
-/**
- * <FileRenderer />
- */
-export const FileRenderer = ({
-  file,
-  intl,
-}) => {
-  const {
-    Renderer,
-    isLoading,
-    errorStatus,
-    error,
-    rendererProps,
-  } = renderHooks({ file, intl });
-  return (
-    <FileCard key={file.downloadUrl} file={file}>
-      {isLoading && <LoadingBanner />}
-      {errorStatus ? (
-        <ErrorBanner {...error} />
-      ) : (
-        <Renderer {...rendererProps} />
-      )}
-    </FileCard>
-  );
-};
-
-FileRenderer.defaultProps = {};
-FileRenderer.propTypes = {
-  file: PropTypes.shape({
-    name: PropTypes.string,
-    downloadUrl: PropTypes.string,
-  }).isRequired,
-  // injected
-  intl: intlShape.isRequired,
-};
-
-export default injectIntl(FileRenderer);

src/components/FilePreview/FileRenderer.test.jsx

@@ -1,53 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-
-import { formatMessage } from 'testUtils';
-import { keyStore } from 'utils';
-import { ErrorStatuses } from 'data/constants/requests';
-
-import { FileRenderer } from './FileRenderer';
-import * as hooks from './hooks';
-
-jest.mock('./FileCard', () => 'FileCard');
-jest.mock('./Banners', () => ({
-  ErrorBanner: () => 'ErrorBanner',
-  LoadingBanner: () => 'LoadingBanner',
-}));
-
-const hookKeys = keyStore(hooks);
-
-const props = {
-  file: {
-    downloadUrl: 'file download url',
-    name: 'filename.txt',
-  },
-  intl: { formatMessage },
-};
-describe('FileRenderer', () => {
-  describe('component', () => {
-    describe('snapshot', () => {
-      test('isLoading, no Error', () => {
-        const hookProps = {
-          Renderer: () => 'Renderer',
-          isloading: true,
-          errorStatus: null,
-          error: null,
-          rendererProps: { prop: 'hooks.rendererProps' },
-        };
-        jest.spyOn(hooks, hookKeys.renderHooks).mockReturnValueOnce(hookProps);
-        expect(shallow(<FileRenderer {...props} />)).toMatchSnapshot();
-      });
-      test('is not loading, with error', () => {
-        const hookProps = {
-          Renderer: () => 'Renderer',
-          isloading: false,
-          errorStatus: ErrorStatuses.serverError,
-          error: { prop: 'hooks.errorProps' },
-          rendererProps: { prop: 'hooks.rendererProps' },
-        };
-        jest.spyOn(hooks, hookKeys.renderHooks).mockReturnValueOnce(hookProps);
-        expect(shallow(<FileRenderer {...props} />)).toMatchSnapshot();
-      });
-    });
-  });
-});

src/components/FilePreview/ImageRenderer.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const ImageRenderer = ({ url, fileName }) => (<img alt={fileName} className="image-renderer" src={url} />);
+
+ImageRenderer.defaultProps = {
+  fileName: '',
+};
+
+ImageRenderer.propTypes = {
+  url: PropTypes.string.isRequired,
+  fileName: PropTypes.string,
+};
+
+export default ImageRenderer;

src/components/FilePreview/ImageRenderer.test.jsx

@@ -8,9 +8,6 @@ describe('Image Renderer Component', () => {
     url: 'some_url.jpg',
   };
 
-  props.onError = jest.fn().mockName('this.props.onError');
-  props.onSuccess = jest.fn().mockName('this.props.onSuccess');
-
   let el;
   beforeEach(() => {
     el = shallow(<ImageRenderer {...props} />);

src/components/FilePreview/PDFRenderer.jsx

@@ -0,0 +1,145 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { pdfjs, Document, Page } from 'react-pdf';
+import {
+  Icon, Form, ActionRow, IconButton,
+} from '@edx/paragon';
+import { ChevronLeft, ChevronRight } from '@edx/paragon/icons';
+import pdfjsWorker from 'react-pdf/node_modules/pdfjs-dist/build/pdf.worker.entry';
+
+import 'react-pdf/dist/esm/Page/AnnotationLayer.css';
+
+pdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorker;
+
+/**
+ * <PDFRenderer />
+ */
+export class PDFRenderer extends React.Component {
+  static INITIAL_STATE = {
+    pageNumber: 1,
+    numPages: 1,
+    relativeHeight: 0,
+  };
+
+  constructor(props) {
+    super(props);
+
+    this.state = { ...PDFRenderer.INITIAL_STATE };
+
+    this.wrapperRef = React.createRef();
+    this.onDocumentLoadSuccess = this.onDocumentLoadSuccess.bind(this);
+    this.onDocumentLoadError = this.onDocumentLoadError.bind(this);
+    this.onLoadPageSuccess = this.onLoadPageSuccess.bind(this);
+    this.onPrevPageButtonClick = this.onPrevPageButtonClick.bind(this);
+    this.onNextPageButtonClick = this.onNextPageButtonClick.bind(this);
+    this.onInputPageChange = this.onInputPageChange.bind(this);
+  }
+
+  onDocumentLoadSuccess = ({ numPages }) => {
+    this.setState({ numPages });
+  };
+
+  onLoadPageSuccess = (page) => {
+    const pageWidth = page.view[2];
+    const pageHeight = page.view[3];
+    const wrapperHeight = this.wrapperRef.current.getBoundingClientRect().width;
+    const relativeHeight = (wrapperHeight * pageHeight) / pageWidth;
+    if (relativeHeight !== this.state.relativeHeight) {
+      this.setState({ relativeHeight });
+    }
+  };
+
+  onDocumentLoadError = (error) => {
+    // eslint-disable-next-line no-console
+    console.error(error);
+  };
+
+  onInputPageChange = ({ target: { value } }) => {
+    this.setPageNumber(parseInt(value, 10));
+  }
+
+  onPrevPageButtonClick = () => {
+    this.setPageNumber(this.state.pageNumber - 1);
+  }
+
+  onNextPageButtonClick = () => {
+    this.setPageNumber(this.state.pageNumber + 1);
+  }
+
+  setPageNumber(pageNumber) {
+    if (pageNumber > 0 && pageNumber <= this.state.numPages) {
+      this.setState({ pageNumber });
+    }
+  }
+
+  get hasNext() {
+    return this.state.pageNumber < this.state.numPages;
+  }
+
+  get hasPrev() {
+    return this.state.pageNumber > 1;
+  }
+
+  render() {
+    return (
+      <div ref={this.wrapperRef} className="pdf-renderer">
+        <Document
+          file={this.props.url}
+          onLoadSuccess={this.onDocumentLoadSuccess}
+          onLoadError={this.onDocumentLoadError}
+        >
+          {/* <Outline /> */}
+          <div
+            className="page-wrapper"
+            style={{
+              height: this.state.relativeHeight,
+            }}
+          >
+            <Page
+              pageNumber={this.state.pageNumber}
+              onLoadSuccess={this.onLoadPageSuccess}
+            />
+          </div>
+        </Document>
+        <ActionRow className="d-flex justify-content-center m-0">
+          <IconButton
+            size="inline"
+            alt="previous pdf page"
+            iconAs={Icon}
+            src={ChevronLeft}
+            disabled={!this.hasPrev}
+            onClick={this.onPrevPageButtonClick}
+          />
+          <Form.Group className="d-flex align-items-center m-0">
+            <Form.Label isInline>Page </Form.Label>
+            <Form.Control
+              type="number"
+              min={0}
+              max={this.state.numPages}
+              value={this.state.pageNumber}
+              onChange={this.onInputPageChange}
+            />
+            <Form.Label isInline> of {this.state.numPages}</Form.Label>
+          </Form.Group>
+          <IconButton
+            size="inline"
+            alt="next pdf page"
+            iconAs={Icon}
+            src={ChevronRight}
+            disabled={!this.hasNext}
+            onClick={this.onNextPageButtonClick}
+          />
+        </ActionRow>
+      </div>
+    );
+  }
+}
+
+PDFRenderer.defaultProps = {};
+
+PDFRenderer.propTypes = {
+  url: PropTypes.string.isRequired,
+};
+
+export default PDFRenderer;

src/components/FilePreview/PDFRenderer.test.jsx

@@ -0,0 +1,218 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import { Document, Page } from 'react-pdf';
+import { Form, IconButton } from '@edx/paragon';
+
+import PDFRenderer from './PDFRenderer';
+
+jest.mock('react-pdf', () => ({
+  pdfjs: { GlobalWorkerOptions: {} },
+  Document: () => 'Document',
+  Page: () => 'Page',
+}));
+
+describe('PDF Renderer Component', () => {
+  const props = {
+    url: 'some_url.pdf',
+  };
+
+  let el;
+  describe('snapshots', () => {
+    beforeEach(() => {
+      el = shallow(<PDFRenderer {...props} />);
+      el.instance().onDocumentLoadSuccess = jest
+        .fn()
+        .mockName('onDocumentLoadSuccess');
+      el.instance().onDocumentLoadError = jest
+        .fn()
+        .mockName('onDocumentLoadError');
+      el.instance().onLoadPageSuccess = jest.fn().mockName('onLoadPageSuccess');
+    });
+    test('snapshot', () => {
+      el.instance().onPrevPageButtonClick = jest
+        .fn()
+        .mockName('onPrevPageButtonClick');
+      el.instance().onNextPageButtonClick = jest
+        .fn()
+        .mockName('onNextPageButtonClick');
+      el.instance().onInputPageChange = jest.fn().mockName('onInputPageChange');
+      expect(el.instance().render()).toMatchSnapshot();
+    });
+  });
+
+  describe('Component', () => {
+    const numPages = 99;
+    const pageNumber = 234;
+    beforeEach(() => {
+      el = shallow(<PDFRenderer {...props} />);
+    });
+    describe('render', () => {
+      describe('Top-level document', () => {
+        let documentEl;
+        beforeEach(() => { documentEl = el.find(Document); });
+        it('displays file from props.url', () => {
+          expect(documentEl.props().file).toEqual(props.url);
+        });
+        it('calls this.onDocumentLoadSuccess onLoadSuccess', () => {
+          expect(documentEl.props().onLoadSuccess).toEqual(el.instance().onDocumentLoadSuccess);
+        });
+        it('calls this.onDocumentLoadError onLoadError', () => {
+          expect(documentEl.props().onLoadError).toEqual(el.instance().onDocumentLoadError);
+        });
+      });
+      describe('Page', () => {
+        let pageProps;
+        beforeEach(() => {
+          el.instance().setState({ pageNumber });
+          pageProps = el.find(Page).props();
+        });
+        it('loads pageNumber from state', () => {
+          expect(pageProps.pageNumber).toEqual(pageNumber);
+        });
+        it('calls onLoadPageSuccess onLoadSuccess', () => {
+          expect(pageProps.onLoadSuccess).toEqual(el.instance().onLoadPageSuccess);
+        });
+      });
+      describe('pagination ActionRow', () => {
+        describe('Previous page button', () => {
+          let hasPrev;
+          beforeEach(() => {
+            hasPrev = jest.spyOn(el.instance(), 'hasPrev', 'get').mockReturnValue(false);
+          });
+          const btn = () => shallow(el.instance().render()).find(IconButton).at(0).props();
+          test('disabled iff not this.hasPrev', () => {
+            expect(btn().disabled).toEqual(true);
+            hasPrev.mockReturnValue(true);
+            expect(btn().disabled).toEqual(false);
+          });
+          it('calls onPrevPageButtonClick onClick', () => {
+            expect(btn().onClick).toEqual(el.instance().onPrevPageButtonClick);
+          });
+        });
+        describe('page indicator', () => {
+          const control = () => el.find(Form.Control).at(0).props();
+          const labels = () => {
+            const flat = el.find({ isInline: true });
+            return [0, 1].map(i => flat.at(i).text());
+          };
+          beforeEach(() => { el.instance().setState({ numPages, pageNumber }); });
+          test('labels: Page <state.pageNumber> of <state.numPages>', () => {
+            expect(`${labels()[0]}${control().value}${labels()[1]}`).toEqual(
+              `Page ${pageNumber} of ${numPages}`,
+            );
+          });
+          it('loads max from state.numPages', () => expect(control().max).toEqual(numPages));
+          it('loads value from state.pageNumber', () => {
+            expect(control().value).toEqual(pageNumber);
+          });
+          it('calls onInputPageChange onChange', () => {
+            expect(control().onChange).toEqual(el.instance().onInputPageChange);
+          });
+        });
+        describe('Next page button', () => {
+          let hasNext;
+          beforeEach(() => {
+            hasNext = jest.spyOn(el.instance(), 'hasNext', 'get').mockReturnValue(false);
+          });
+          const btn = () => shallow(el.instance().render()).find(IconButton).at(1).props();
+          test('disabled iff not this.hasNext', () => {
+            expect(btn().disabled).toEqual(true);
+            hasNext.mockReturnValue(true);
+            expect(btn().disabled).toEqual(false);
+          });
+          it('calls onNextPageButtonClick onClick', () => {
+            expect(btn().onClick).toEqual(el.instance().onNextPageButtonClick);
+          });
+        });
+      });
+    });
+
+    describe('behavior', () => {
+      test('initial state', () => {
+        expect(el.instance().state).toEqual(PDFRenderer.INITIAL_STATE);
+      });
+      describe('onDocumentLoadSuccess', () => {
+        test('loads numPages into state', () => {
+          el.instance().onDocumentLoadSuccess({ numPages });
+          expect(el.instance().state.numPages).toEqual(numPages);
+        });
+      });
+      describe('onLoadPageSuccess', () => {
+        const [pageHeight, pageWidth] = [23, 34];
+        const page = { view: [1, 2, pageWidth, pageHeight] };
+        const wrapperWidth = 20;
+        const expected = (wrapperWidth * pageHeight) / pageWidth;
+        beforeEach(() => {
+          el.instance().wrapperRef = {
+            current: {
+              getBoundingClientRect: () => ({ width: wrapperWidth }),
+            },
+          };
+        });
+        it('sets relative height if it has changes', () => {
+          el.instance().onLoadPageSuccess(page);
+          expect(el.instance().state.relativeHeight).toEqual(expected);
+        });
+        it('does not try to set height if has not changes', () => {
+          el.instance().setState({ relativeHeight: expected });
+          el.instance().setState = jest.fn();
+          el.instance().onLoadPageSuccess(page);
+          expect(el.instance().setState).not.toHaveBeenCalled();
+        });
+      });
+      describe('setPageNumber inheritors', () => {
+        beforeEach(() => {
+          el.instance().setPageNumber = jest.fn();
+          el.instance().setState({ pageNumber });
+        });
+        describe('onInputChange', () => {
+          it('calls setPageNumber with int value of event target value', () => {
+            el.instance().onInputPageChange({ target: { value: '23' } });
+            expect(el.instance().setPageNumber).toHaveBeenCalledWith(23);
+          });
+        });
+        describe('onPrevPageButtonClick', () => {
+          it('calls setPageNumber with state.pageNumber - 1', () => {
+            el.instance().onPrevPageButtonClick();
+            expect(el.instance().setPageNumber).toHaveBeenCalledWith(pageNumber - 1);
+          });
+        });
+        describe('onNextPageButtonClick', () => {
+          it('calls setPageNumber with state.pageNumber + 1', () => {
+            el.instance().onNextPageButtonClick();
+            expect(el.instance().setPageNumber).toHaveBeenCalledWith(pageNumber + 1);
+          });
+        });
+      });
+      describe('setPageNumber', () => {
+        it('calls setState with pageNumber iff valid', () => {
+          el.instance().setState({ numPages });
+          const setState = jest.spyOn(el.instance(), 'setState');
+          el.instance().setPageNumber(0);
+          expect(setState).not.toHaveBeenCalled();
+          el.instance().setPageNumber(numPages + 1);
+          expect(setState).not.toHaveBeenCalled();
+          el.instance().setPageNumber(2);
+          expect(setState).toHaveBeenCalledWith({ pageNumber: 2 });
+        });
+      });
+      describe('hasNext getter', () => {
+        it('returns true iff state.pageNumber < state.numPages', () => {
+          el.instance().setState({ pageNumber: 1, numPages: 1 });
+          expect(el.instance().hasNext).toEqual(false);
+          el.instance().setState({ pageNumber: 1, numPages: 2 });
+          expect(el.instance().hasNext).toEqual(true);
+        });
+      });
+      describe('hasPrev getter', () => {
+        it('returns true iff state.pageNumber > 1', () => {
+          el.instance().setState({ pageNumber: 1 });
+          expect(el.instance().hasPrev).toEqual(false);
+          el.instance().setState({ pageNumber: 2 });
+          expect(el.instance().hasPrev).toEqual(true);
+        });
+      });
+    });
+  });
+});

src/components/FilePreview/TXTRenderer.jsx

@@ -0,0 +1,24 @@
+import React, { useMemo, useState } from 'react';
+import PropTypes from 'prop-types';
+import { get } from 'data/services/lms/utils';
+
+const TXTRenderer = ({ url }) => {
+  const [content, setContent] = useState('');
+  useMemo(() => {
+    get(url).then(({ data }) => setContent(data));
+  }, [url]);
+
+  return (
+    <pre className="txt-renderer">
+      {content}
+    </pre>
+  );
+};
+
+TXTRenderer.defaultProps = {};
+
+TXTRenderer.propTypes = {
+  url: PropTypes.string.isRequired,
+};
+
+export default TXTRenderer;

src/components/FilePreview/TXTRenderer.test.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import TXTRenderer from './TXTRenderer';
+
+jest.mock('data/services/lms/utils', () => ({
+  get: jest.fn((...args) => Promise.resolve({ data: `Content of ${args}` })),
+}));
+
+describe('Image Renderer Component', () => {
+  const props = {
+    url: 'some_url.txt',
+  };
+
+  let el;
+  beforeEach(() => {
+    el = shallow(<TXTRenderer {...props} />);
+  });
+  test('snapshot', () => {
+    expect(el).toMatchSnapshot();
+  });
+});

src/components/FilePreview/__snapshots__/FileCard.test.jsx.snap

@@ -9,9 +9,7 @@ exports[`File Preview Card component snapshot 1`] = `
     className="file-collapsible"
     defaultOpen={true}
     title={
-      <h3
-        className="file-card-title"
-      >
+      <h3>
         test-file-name.pdf
       </h3>
     }
@@ -21,9 +19,13 @@ exports[`File Preview Card component snapshot 1`] = `
     >
       <FileInfo>
         <FilePopoverContent
-          description="test-file description"
-          downloadUrl="destination/test-file-name.pdf"
-          name="test-file-name.pdf"
+          file={
+            Object {
+              "description": "test-file description",
+              "downloadUrl": "destination/test-file-name.pdf",
+              "name": "test-file-name.pdf",
+            }
+          }
         />
       </FileInfo>
       <h1>

src/components/FilePreview/__snapshots__/FileInfo.test.jsx.snap

@@ -6,7 +6,6 @@ exports[`File Preview Card component snapshot 1`] = `
   overlay={
     <Popover
       className="overlay-help-popover"
-      id="file-popover"
     >
       <Popover.Content>
         <h1>

src/components/FilePreview/__snapshots__/FileRenderer.test.jsx.snap

@@ -1,33 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`FileRenderer component snapshot is not loading, with error 1`] = `
-<FileCard
-  file={
-    Object {
-      "downloadUrl": "file download url",
-      "name": "filename.txt",
-    }
-  }
-  key="file download url"
->
-  <ErrorBanner
-    prop="hooks.errorProps"
-  />
-</FileCard>
-`;
-
-exports[`FileRenderer component snapshot isLoading, no Error 1`] = `
-<FileCard
-  file={
-    Object {
-      "downloadUrl": "file download url",
-      "name": "filename.txt",
-    }
-  }
-  key="file download url"
->
-  <Renderer
-    prop="hooks.rendererProps"
-  />
-</FileCard>
-`;

src/components/FilePreview/__snapshots__/ImageRenderer.test.jsx.snap

@@ -4,8 +4,6 @@ exports[`Image Renderer Component snapshot 1`] = `
 <img
   alt=""
   className="image-renderer"
-  onError={[MockFunction this.props.onError]}
-  onLoad={[MockFunction this.props.onSuccess]}
   src="some_url.jpg"
 />
 `;

src/components/FilePreview/__snapshots__/PDFRenderer.test.jsx.snap

@@ -0,0 +1,69 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PDF Renderer Component snapshots snapshot 1`] = `
+<div
+  className="pdf-renderer"
+>
+  <Document
+    file="some_url.pdf"
+    onLoadError={[MockFunction onDocumentLoadError]}
+    onLoadSuccess={[MockFunction onDocumentLoadSuccess]}
+  >
+    <div
+      className="page-wrapper"
+      style={
+        Object {
+          "height": 0,
+        }
+      }
+    >
+      <Page
+        onLoadSuccess={[MockFunction onLoadPageSuccess]}
+        pageNumber={1}
+      />
+    </div>
+  </Document>
+  <ActionRow
+    className="d-flex justify-content-center m-0"
+  >
+    <IconButton
+      alt="previous pdf page"
+      disabled={true}
+      iconAs="Icon"
+      onClick={[MockFunction onPrevPageButtonClick]}
+      size="inline"
+      src={[MockFunction icons.ChevronLeft]}
+    />
+    <Form.Group
+      className="d-flex align-items-center m-0"
+    >
+      <Form.Label
+        isInline={true}
+      >
+        Page 
+      </Form.Label>
+      <Form.Control
+        max={1}
+        min={0}
+        onChange={[MockFunction onInputPageChange]}
+        type="number"
+        value={1}
+      />
+      <Form.Label
+        isInline={true}
+      >
+         of 
+        1
+      </Form.Label>
+    </Form.Group>
+    <IconButton
+      alt="next pdf page"
+      disabled={true}
+      iconAs="Icon"
+      onClick={[MockFunction onNextPageButtonClick]}
+      size="inline"
+      src={[MockFunction icons.ChevronRight]}
+    />
+  </ActionRow>
+</div>
+`;

src/components/FilePreview/__snapshots__/TXTRenderer.test.jsx.snap

@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`TXT Renderer Component snapshot 1`] = `
+exports[`Image Renderer Component snapshot 1`] = `
 <pre
   className="txt-renderer"
 >
-  test-content
+  Content of some_url.txt
 </pre>
 `;

src/components/FilePreview/hooks.js

@@ -1,102 +0,0 @@
-import React from 'react';
-
-import { StrictDict } from 'utils';
-import { ErrorStatuses } from 'data/constants/requests';
-import { FileTypes } from 'data/constants/files';
-
-import {
-  PDFRenderer,
-  ImageRenderer,
-  TXTRenderer,
-} from 'components/FilePreview/BaseRenderers';
-
-import * as module from './hooks';
-import messages from './messages';
-
-/**
- * Config data
- */
-export const RENDERERS = StrictDict({
-  [FileTypes.pdf]: PDFRenderer,
-  [FileTypes.jpg]: ImageRenderer,
-  [FileTypes.jpeg]: ImageRenderer,
-  [FileTypes.bmp]: ImageRenderer,
-  [FileTypes.png]: ImageRenderer,
-  [FileTypes.txt]: TXTRenderer,
-  [FileTypes.gif]: ImageRenderer,
-  [FileTypes.jfif]: ImageRenderer,
-  [FileTypes.pjpeg]: ImageRenderer,
-  [FileTypes.pjp]: ImageRenderer,
-  [FileTypes.svg]: ImageRenderer,
-});
-
-export const SUPPORTED_TYPES = Object.keys(RENDERERS);
-
-export const ERROR_STATUSES = {
-  [ErrorStatuses.notFound]: messages.fileNotFoundError,
-  [ErrorStatuses.serverError]: messages.unknownError,
-};
-
-/**
- * State hooks
- */
-export const state = StrictDict({
-  errorStatus: (val) => React.useState(val),
-  isLoading: (val) => React.useState(val),
-});
-
-/**
- * Util methods and transforms
- */
-export const getFileType = (fileName) => fileName.split('.').pop()?.toLowerCase();
-export const isSupported = (file) => module.SUPPORTED_TYPES.includes(
-  module.getFileType(file.name),
-);
-
-/**
- * component hooks
- */
-export const renderHooks = ({
-  file,
-  intl,
-}) => {
-  const [errorStatus, setErrorStatus] = module.state.errorStatus(null);
-  const [isLoading, setIsLoading] = module.state.isLoading(true);
-
-  const setState = (newState) => {
-    setErrorStatus(newState.errorStatus);
-    setIsLoading(newState.isLoading);
-  };
-
-  const stopLoading = (status = null) => setState({ isLoading: false, errorStatus: status });
-
-  const errorMessage = (
-    module.ERROR_STATUSES[errorStatus] || module.ERROR_STATUSES[ErrorStatuses.serverError]
-  );
-  const errorAction = {
-    id: 'retry',
-    onClick: () => setState({ errorStatus: null, isLoading: true }),
-    message: messages.retryButton,
-  };
-  const error = {
-    headerMessage: errorMessage,
-    children: intl.formatMessage(errorMessage),
-    actions: [errorAction],
-  };
-
-  const Renderer = module.RENDERERS[module.getFileType(file.name)];
-  const rendererProps = {
-    fileName: file.name,
-    url: file.downloadUrl,
-    onError: stopLoading,
-    onSuccess: () => stopLoading(),
-  };
-
-  return {
-    errorStatus,
-    isLoading,
-    error,
-    Renderer,
-    rendererProps,
-  };
-};

src/components/FilePreview/hooks.test.js

@@ -1,117 +0,0 @@
-import { MockUseState, formatMessage } from 'testUtils';
-import { keyStore } from 'utils';
-
-import { ErrorStatuses } from 'data/constants/requests';
-
-import * as hooks from './hooks';
-
-const testValue = 'Test-Value';
-const state = new MockUseState(hooks);
-const hookKeys = keyStore(hooks);
-
-let hook;
-describe('FilePreview hooks', () => {
-  describe('state hooks', () => {
-  });
-  describe('non-state hooks', () => {
-    beforeEach(() => {
-      state.mock();
-    });
-    afterEach(() => {
-      state.restore();
-    });
-    describe('utility methods', () => {
-      describe('getFileType', () => {
-        it('returns file extension if available, in lowercase', () => {
-          expect(hooks.getFileType('thing.TXT')).toEqual('txt');
-          expect(hooks.getFileType(testValue)).toEqual(testValue.toLowerCase());
-        });
-      });
-      describe('isSupported', () => {
-        it('returns true iff the filetype is included in SUPPORTED_TYPES', () => {
-          let spy = jest.spyOn(hooks, hookKeys.getFileType).mockImplementationOnce(v => v);
-          expect(hooks.isSupported({ name: hooks.SUPPORTED_TYPES[0] })).toEqual(true);
-          spy = jest.spyOn(hooks, hookKeys.getFileType).mockImplementationOnce(v => v);
-          expect(hooks.isSupported({ name: testValue })).toEqual(false);
-          spy.mockRestore();
-        });
-      });
-    });
-    describe('component hooks', () => {
-      describe('renderHooks', () => {
-        const file = {
-          name: 'test-file-name.txt',
-          downloadUrl: 'my-test-download-url.jpg',
-        };
-        beforeEach(() => {
-          hook = hooks.renderHooks({ intl: { formatMessage }, file });
-        });
-        describe('returned object', () => {
-          test('errorStatus and isLoading tied to state, initialized to null and true', () => {
-            expect(hook.errorStatus).toEqual(state.stateVals.errorStatus);
-            expect(hook.errorStatus).toEqual(null);
-            expect(hook.isLoading).toEqual(state.stateVals.isLoading);
-            expect(hook.isLoading).toEqual(true);
-          });
-          describe('error', () => {
-            it('loads message from current error status, if valid, else from serverError', () => {
-              expect(hook.error.headerMessage).toEqual(
-                hooks.ERROR_STATUSES[ErrorStatuses.serverError],
-              );
-              expect(hook.error.children).toEqual(
-                formatMessage(hooks.ERROR_STATUSES[ErrorStatuses.serverError]),
-              );
-              state.mockVal(state.keys.errorStatus, ErrorStatuses.notFound);
-              hook = hooks.renderHooks({ intl: { formatMessage }, file });
-              expect(hook.error.headerMessage).toEqual(
-                hooks.ERROR_STATUSES[ErrorStatuses.notFound],
-              );
-              expect(hook.error.children).toEqual(
-                formatMessage(hooks.ERROR_STATUSES[ErrorStatuses.notFound]),
-              );
-            });
-            it('provides a single action', () => {
-              expect(hook.error.actions.length).toEqual(1);
-            });
-            describe('action', () => {
-              it('sets errorState to null and isLoading to true on click', () => {
-                hook.error.actions[0].onClick();
-                expect(state.setState.isLoading).toHaveBeenCalledWith(true);
-                expect(state.setState.errorStatus).toHaveBeenCalledWith(null);
-              });
-            });
-          });
-          describe('Renderer', () => {
-            it('returns configured renderer based on filetype', () => {
-              hooks.SUPPORTED_TYPES.forEach(type => {
-                jest.spyOn(hooks, hookKeys.getFileType).mockReturnValueOnce(type);
-                hook = hooks.renderHooks({ intl: { formatMessage }, file });
-                expect(hook.Renderer).toEqual(hooks.RENDERERS[type]);
-              });
-            });
-          });
-          describe('rendererProps', () => {
-            it('forwards url and fileName from file', () => {
-              expect(hook.rendererProps.fileName).toEqual(file.name);
-              expect(hook.rendererProps.url).toEqual(file.downloadUrl);
-            });
-            describe('onError', () => {
-              it('it sets isLoading to false and loads errorStatus', () => {
-                hook.rendererProps.onError(testValue);
-                expect(state.setState.isLoading).toHaveBeenCalledWith(false);
-                expect(state.setState.errorStatus).toHaveBeenCalledWith(testValue);
-              });
-            });
-            describe('onSuccess', () => {
-              it('it sets isLoading to false and errorStatus to null', () => {
-                hook.rendererProps.onSuccess(testValue);
-                expect(state.setState.isLoading).toHaveBeenCalledWith(false);
-                expect(state.setState.errorStatus).toHaveBeenCalledWith(null);
-              });
-            });
-          });
-        });
-      });
-    });
-  });
-});

src/components/FilePreview/index.jsx

@@ -1,2 +1,4 @@
-export { default as FileRenderer } from './FileRenderer';
-export { isSupported } from './hooks';
+export { default as FileCard } from './FileCard';
+export { default as ImageRenderer } from './ImageRenderer';
+export { default as PDFRenderer } from './PDFRenderer';
+export { default as TXTRenderer } from './TXTRenderer';

src/components/FilePreview/messages.js

@@ -6,21 +6,6 @@ const messages = defineMessages({
     defaultMessage: 'File info',
     description: 'Popover trigger button text for file preview card',
   },
-  retryButton: {
-    id: 'ora-grading.ResponseDisplay.FileRenderer.retryButton',
-    defaultMessage: 'Retry',
-    description: 'Retry button for error in file renderer',
-  },
-  fileNotFoundError: {
-    id: 'ora-grading.ResponseDisplay.FileRenderer.fileNotFound',
-    defaultMessage: 'File not found',
-    description: 'File not found error message',
-  },
-  unknownError: {
-    id: 'ora-grading.ResponseDisplay.FileRenderer.unknownError',
-    defaultMessage: 'Unknown errors',
-    description: 'Unknown errors message',
-  },
 });
 
 export default messages;

src/components/Head/__snapshots__/index.test.jsx.snap

@@ -1,14 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Head snapshot 1`] = `
-<Helmet>
-  <title>
-    ORA staff grading | site-name
-  </title>
-  <link
-    href="favicon-url"
-    rel="shortcut icon"
-    type="image/x-icon"
-  />
-</Helmet>
-`;

src/components/Head/index.jsx

@@ -1,20 +0,0 @@
-import React from 'react';
-import { Helmet } from 'react-helmet';
-import { useIntl } from '@edx/frontend-platform/i18n';
-import { getConfig } from '@edx/frontend-platform';
-
-import messages from './messages';
-
-const Head = () => {
-  const { formatMessage } = useIntl();
-  return (
-    <Helmet>
-      <title>
-        {formatMessage(messages.PageTitle, { siteName: getConfig().SITE_NAME })}
-      </title>
-      <link rel="shortcut icon" href={getConfig().FAVICON_URL} type="image/x-icon" />
-    </Helmet>
-  );
-};
-
-export default Head;

src/components/Head/index.test.jsx

@@ -1,25 +0,0 @@
-import React from 'react';
-import { getConfig } from '@edx/frontend-platform';
-import { shallow } from 'enzyme';
-import Head from '.';
-
-jest.mock('react-helmet', () => ({
-  Helmet: 'Helmet',
-}));
-
-jest.mock('@edx/frontend-platform', () => ({
-  getConfig: () => ({
-    SITE_NAME: 'site-name',
-    FAVICON_URL: 'favicon-url',
-  }),
-}));
-
-describe('Head', () => {
-  it('snapshot', () => {
-    const el = shallow(<Head />);
-    expect(el).toMatchSnapshot();
-
-    expect(el.find('title').text()).toContain(getConfig().SITE_NAME);
-    expect(el.find('link').prop('href')).toEqual(getConfig().FAVICON_URL);
-  });
-});

src/components/Head/messages.js

@@ -1,11 +0,0 @@
-import { defineMessages } from '@edx/frontend-platform/i18n';
-
-const messages = defineMessages({
-  PageTitle: {
-    id: 'PageTitle',
-    defaultMessage: 'ORA staff grading | {siteName}',
-    description: 'Title tag',
-  },
-});
-
-export default messages;

src/components/InfoPopover/__snapshots__/index.test.jsx.snap

@@ -6,7 +6,6 @@ exports[`Info Popover Component snapshot 1`] = `
   overlay={
     <Popover
       className="overlay-help-popover"
-      id="info-popover"
     >
       <Popover.Content>
         <div>

src/components/InfoPopover/index.jsx

@@ -10,8 +10,6 @@ import {
 import { InfoOutline } from '@edx/paragon/icons';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 
-import { nullMethod } from 'hooks';
-
 import messages from './messages';
 
 /**
@@ -23,7 +21,7 @@ export const InfoPopover = ({ onClick, children, intl }) => (
     placement="right-end"
     flip
     overlay={(
-      <Popover id="info-popover" className="overlay-help-popover">
+      <Popover className="overlay-help-popover">
         <Popover.Content>{children}</Popover.Content>
       </Popover>
     )}
@@ -39,7 +37,7 @@ export const InfoPopover = ({ onClick, children, intl }) => (
 );
 
 InfoPopover.defaultProps = {
-  onClick: nullMethod,
+  onClick: () => {},
 };
 InfoPopover.propTypes = {
   onClick: PropTypes.func,

src/components/StatusBadge.jsx

@@ -4,29 +4,21 @@ import PropTypes from 'prop-types';
 import { Badge } from '@edx/paragon';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 
-import { StrictDict } from 'utils';
 import { gradingStatuses as statuses } from 'data/services/lms/constants';
 import messages from 'data/services/lms/messages';
 
-export const buttonVariants = StrictDict({
-  primary: 'primary',
-  light: 'light',
-  success: 'success',
-  warning: 'warning',
-});
-
-export const statusVariants = StrictDict({
-  [statuses.ungraded]: buttonVariants.primary,
-  [statuses.locked]: buttonVariants.light,
-  [statuses.graded]: buttonVariants.success,
-  [statuses.inProgress]: buttonVariants.warning,
-});
+export const statusVariants = {
+  [statuses.ungraded]: 'primary',
+  [statuses.locked]: 'light',
+  [statuses.graded]: 'success',
+  [statuses.inProgress]: 'warning',
+};
 
 /**
  * <StatusBadge />
  */
 export const StatusBadge = ({ className, status }) => {
-  if (!Object.keys(statusVariants).includes(status)) {
+  if (statusVariants[status] === undefined) {
     return null;
   }
   return (

src/components/StatusBadge.test.jsx

@@ -1,35 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-
-import { gradingStatuses } from 'data/services/lms/constants';
-import { StatusBadge } from './StatusBadge';
-
-const className = 'test-className';
-describe('StatusBadge component', () => {
-  const render = (status) => shallow(<StatusBadge className={className} status={status} />);
-  describe('behavior', () => {
-    it('does not render if status does not have configured variant', () => {
-      const el = render('arbitrary');
-      expect(el).toMatchSnapshot();
-      expect(el.isEmptyRender()).toEqual(true);
-    });
-    describe('status snapshots: loads badge with configured variant and message.', () => {
-      test('`ungraded` shows primary button variant and message', () => {
-        const el = render(gradingStatuses.ungraded);
-        expect(el).toMatchSnapshot();
-      });
-      test('`locked` shows light button variant and message', () => {
-        const el = render(gradingStatuses.locked);
-        expect(el).toMatchSnapshot();
-      });
-      test('`graded` shows success button variant and message', () => {
-        const el = render(gradingStatuses.graded);
-        expect(el).toMatchSnapshot();
-      });
-      test('`inProgress` shows warning button variant and message', () => {
-        const el = render(gradingStatuses.inProgress);
-        expect(el).toMatchSnapshot();
-      });
-    });
-  });
-});

src/components/__snapshots__/ConfirmModal.test.jsx.snap

@@ -20,7 +20,7 @@ exports[`ConfirmModal snapshot: closed 1`] = `
     </ActionRow>
   }
   isOpen={false}
-  onClose={[MockFunction hooks.nullMethod]}
+  onClose={[Function]}
   title="test-title"
 >
   <p>
@@ -49,7 +49,7 @@ exports[`ConfirmModal snapshot: open 1`] = `
     </ActionRow>
   }
   isOpen={true}
-  onClose={[MockFunction hooks.nullMethod]}
+  onClose={[Function]}
   title="test-title"
 >
   <p>

src/components/__snapshots__/StatusBadge.test.jsx.snap

@@ -1,55 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`StatusBadge component behavior does not render if status does not have configured variant 1`] = `""`;
-
-exports[`StatusBadge component behavior status snapshots: loads badge with configured variant and message. \`graded\` shows success button variant and message 1`] = `
-<Badge
-  className="test-className"
-  variant="success"
->
-  <FormattedMessage
-    defaultMessage="Grading Completed"
-    description="Grading status label for graded submission"
-    id="ora-grading.lms-api.gradingStatusDisplay.graded"
-  />
-</Badge>
-`;
-
-exports[`StatusBadge component behavior status snapshots: loads badge with configured variant and message. \`inProgress\` shows warning button variant and message 1`] = `
-<Badge
-  className="test-className"
-  variant="warning"
->
-  <FormattedMessage
-    defaultMessage="You are currently grading this response"
-    description="Grading status label for in-progress submission"
-    id="ora-grading.lms-api.gradingStatusDisplay.inProgress"
-  />
-</Badge>
-`;
-
-exports[`StatusBadge component behavior status snapshots: loads badge with configured variant and message. \`locked\` shows light button variant and message 1`] = `
-<Badge
-  className="test-className"
-  variant="light"
->
-  <FormattedMessage
-    defaultMessage="Currently being graded by someone else"
-    description="Grading status label for locked submission"
-    id="ora-grading.lms-api.gradingStatusDisplay.locked"
-  />
-</Badge>
-`;
-
-exports[`StatusBadge component behavior status snapshots: loads badge with configured variant and message. \`ungraded\` shows primary button variant and message 1`] = `
-<Badge
-  className="test-className"
-  variant="primary"
->
-  <FormattedMessage
-    defaultMessage="Ungraded"
-    description="Grading status label for ungraded submission"
-    id="ora-grading.lms-api.gradingStatusDisplay.ungraded"
-  />
-</Badge>
-`;

src/config/index.js

@@ -0,0 +1,16 @@
+const configuration = {
+  // BASE_URL: process.env.BASE_URL,
+  LMS_BASE_URL: process.env.LMS_BASE_URL,
+  // LOGIN_URL: process.env.LOGIN_URL,
+  // LOGOUT_URL: process.env.LOGOUT_URL,
+  // CSRF_TOKEN_API_PATH: process.env.CSRF_TOKEN_API_PATH,
+  // REFRESH_ACCESS_TOKEN_ENDPOINT: process.env.REFRESH_ACCESS_TOKEN_ENDPOINT,
+  // DATA_API_BASE_URL: process.env.DATA_API_BASE_URL,
+  // SECURE_COOKIES: process.env.NODE_ENV !== 'development',
+  // SEGMENT_KEY: process.env.SEGMENT_KEY,
+  // ACCESS_TOKEN_COOKIE_NAME: process.env.ACCESS_TOKEN_COOKIE_NAME,
+};
+
+const features = {};
+
+export { configuration, features };

src/containers/CTA/CTA.test.jsx

@@ -1,11 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-
-import { CTA } from '.';
-
-describe('CTA component', () => {
-  test('snapshots', () => {
-    const el = shallow(<CTA hide />);
-    expect(el).toMatchSnapshot();
-  });
-});

src/containers/CTA/__snapshots__/CTA.test.jsx.snap

@@ -1,31 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CTA component snapshots 1`] = `
-<PageBanner>
-  <span>
-    <FormattedMessage
-      defaultMessage="Thanks for using the new ORA staff grading experience. "
-      description="Thank user for using ora and ask for feed back"
-      id="ora-grading.CTA.feedbackMessage"
-    />
-    <Hyperlink
-      destination="https://docs.google.com/forms/d/1Hu1rgJcCHl5_EtDb5Up3hiZ40sSUtkZQfRHJ3fWOvfQ/edit"
-      isInline={true}
-      showLaunchIcon={false}
-      target="_blank"
-      variant="muted"
-    >
-      <FormattedMessage
-        defaultMessage="Provide some feedback"
-        description="placeholder for the feedback anchor link"
-        id="ora-grading.CTA.linkMessage"
-      />
-    </Hyperlink>
-    <FormattedMessage
-      defaultMessage=" and let us know what you think!"
-      description="inform user to provide feedback"
-      id="ora-grading.CTA.letUsKnowMessage"
-    />
-  </span>
-</PageBanner>
-`;

src/containers/CTA/index.jsx

@@ -1,29 +0,0 @@
-import React from 'react';
-
-import { FormattedMessage } from '@edx/frontend-platform/i18n';
-import { PageBanner, Hyperlink } from '@edx/paragon';
-
-import messages from './messages';
-
-/**
- * <CTA />
- */
-export const CTA = () => (
-  <PageBanner>
-    <span>
-      <FormattedMessage {...messages.ctaFeedbackMessage} />
-      <Hyperlink
-        isInline
-        variant="muted"
-        destination="https://docs.google.com/forms/d/1Hu1rgJcCHl5_EtDb5Up3hiZ40sSUtkZQfRHJ3fWOvfQ/edit"
-        target="_blank"
-        showLaunchIcon={false}
-      >
-        <FormattedMessage {...messages.ctaLinkMessage} />
-      </Hyperlink>
-      <FormattedMessage {...messages.ctaLetUsKnowMessage} />
-    </span>
-  </PageBanner>
-);
-
-export default CTA;

src/containers/CTA/messages.js

@@ -1,23 +0,0 @@
-/* eslint-disable quotes */
-import { defineMessages } from '@edx/frontend-platform/i18n';
-import { StrictDict } from 'utils';
-
-const messages = defineMessages({
-  ctaFeedbackMessage: {
-    id: 'ora-grading.CTA.feedbackMessage',
-    defaultMessage: 'Thanks for using the new ORA staff grading experience. ',
-    description: 'Thank user for using ora and ask for feed back',
-  },
-  ctaLinkMessage: {
-    id: 'ora-grading.CTA.linkMessage',
-    defaultMessage: 'Provide some feedback',
-    description: 'placeholder for the feedback anchor link',
-  },
-  ctaLetUsKnowMessage: {
-    id: 'ora-grading.CTA.letUsKnowMessage',
-    defaultMessage: ' and let us know what you think!',
-    description: 'inform user to provide feedback',
-  },
-});
-
-export default StrictDict(messages);

src/containers/CourseHeader/AnonymousUserMenu.jsx

@@ -0,0 +1,38 @@
+import React from 'react';
+
+import { getConfig } from '@edx/frontend-platform';
+import { getLoginRedirectUrl } from '@edx/frontend-platform/auth';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { Button } from '@edx/paragon';
+
+import message from './messages';
+
+export const getRegisterUrl = () => {
+  const { LMS_BASE_URL } = getConfig();
+  const locationHref = encodeURIComponent(global.location.href);
+  return `${LMS_BASE_URL}/register?next=${locationHref}`;
+};
+
+export const AnonymousUserMenu = ({ intl }) => (
+  <div>
+    <Button
+      className="mr-3"
+      variant="outline-primary"
+      href={getRegisterUrl()}
+    >
+      {intl.formatMessage(message.registerSentenceCase)}
+    </Button>
+    <Button
+      variant="primary"
+      href={`${getLoginRedirectUrl(global.location.href)}`}
+    >
+      {intl.formatMessage(message.signInSentenceCase)}
+    </Button>
+  </div>
+);
+
+AnonymousUserMenu.propTypes = {
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(AnonymousUserMenu);

src/containers/CourseHeader/AnonymousUserMenu.test.jsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import { AnonymousUserMenu } from './AnonymousUserMenu';
+
+jest.mock('@edx/frontend-platform', () => ({
+  getConfig: () => ({
+    LMS_BASE_URL: '<LMS_BASE_URL>',
+  }),
+}));
+jest.mock('@edx/frontend-platform/auth', () => ({
+  getLoginRedirectUrl: (url) => `redirect:${url}`,
+}));
+
+describe('Header AnonymousUserMenu component', () => {
+  const props = {
+    intl: { formatMessage: (msg) => msg.defaultMessage },
+  };
+  test('snapshot', () => {
+    expect(
+      shallow(<AnonymousUserMenu {...props} />),
+    ).toMatchSnapshot();
+  });
+});

src/containers/CourseHeader/AuthenticatedUserDropdown/UserAvatar.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faUserCircle } from '@fortawesome/free-solid-svg-icons';
+
+import { Dropdown } from '@edx/paragon';
+
+export const UserAvatar = ({ username }) => (
+  <Dropdown.Toggle variant="outline-primary">
+    <FontAwesomeIcon
+      icon={faUserCircle}
+      className="d-md-none"
+      size="lg"
+    />
+    <span data-hj-suppress className="d-none d-md-inline">
+      {username}
+    </span>
+  </Dropdown.Toggle>
+);
+UserAvatar.propTypes = {
+  username: PropTypes.string.isRequired,
+};
+
+UserAvatar.defaultProps = {};
+
+export default UserAvatar;

src/containers/CourseHeader/AuthenticatedUserDropdown/UserAvatar.test.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import UserAvatar from './UserAvatar';
+
+jest.mock('@edx/frontend-platform', () => ({
+  getConfig: () => ({
+    LMS_BASE_URL: '<LMS_BASE_URL>',
+    LOGOUT_URL: '<LOGOUT_URL>',
+    SUPPORT_URL: '<SUPPORT_URL>',
+  }),
+}));
+
+describe('Header AuthenticatedUserDropdown UserAvatar component', () => {
+  const props = {
+    username: 'test-username',
+  };
+  test('snapshot', () => {
+    expect(
+      shallow(<UserAvatar {...props} />),
+    ).toMatchSnapshot();
+  });
+});

src/containers/CourseHeader/AuthenticatedUserDropdown/UserMenu.jsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { getConfig } from '@edx/frontend-platform';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { Dropdown } from '@edx/paragon';
+
+import messages from '../messages';
+
+export class UserMenu extends React.Component {
+  menuItem(href, message) {
+    return (
+      <Dropdown.Item href={href}>
+        {this.props.intl.formatMessage(message)}
+      </Dropdown.Item>
+    );
+  }
+
+  render() {
+    const { username } = this.props;
+    const { LMS_BASE_URL, LOGOUT_URL } = getConfig();
+    return (
+      <Dropdown.Menu className="dropdown-menu-right">
+        {this.menuItem(`${LMS_BASE_URL}/dashboard`, messages.dashboard)}
+        {this.menuItem(`${LMS_BASE_URL}/u/${username}`, messages.profile)}
+        {this.menuItem(`${LMS_BASE_URL}/account/settings`, messages.account)}
+        {this.menuItem(LOGOUT_URL, messages.signOut)}
+      </Dropdown.Menu>
+    );
+  }
+}
+
+UserMenu.propTypes = {
+  intl: intlShape.isRequired,
+  username: PropTypes.string.isRequired,
+};
+
+UserMenu.defaultProps = {};
+
+export default injectIntl(UserMenu);

src/containers/CourseHeader/AuthenticatedUserDropdown/UserMenu.test.jsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import { UserMenu } from './UserMenu';
+
+jest.mock('@edx/frontend-platform', () => ({
+  getConfig: () => ({
+    LMS_BASE_URL: '<LMS_BASE_URL>',
+    LOGOUT_URL: '<LOGOUT_URL>',
+    SUPPORT_URL: '<SUPPORT_URL>',
+  }),
+}));
+
+describe('Header AuthenticatedUserDropdown UserMenu component', () => {
+  const props = {
+    intl: { formatMessage: (msg) => msg.defaultMessage },
+    username: 'test-username',
+  };
+  test('snapshot', () => {
+    expect(
+      shallow(<UserMenu {...props} />),
+    ).toMatchSnapshot();
+  });
+});

src/containers/CourseHeader/AuthenticatedUserDropdown/__snapshots__/UserAvatar.test.jsx.snap

@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Header AuthenticatedUserDropdown UserAvatar component snapshot 1`] = `
+<Dropdown.Toggle
+  variant="outline-primary"
+>
+  <FontAwesomeIcon
+    className="d-md-none"
+    icon={
+      Object {
+        "icon": Array [
+          496,
+          512,
+          Array [],
+          "f2bd",
+          "M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 96c48.6 0 88 39.4 88 88s-39.4 88-88 88-88-39.4-88-88 39.4-88 88-88zm0 344c-58.7 0-111.3-26.6-146.5-68.2 18.8-35.4 55.6-59.8 98.5-59.8 2.4 0 4.8.4 7.1 1.1 13 4.2 26.6 6.9 40.9 6.9 14.3 0 28-2.7 40.9-6.9 2.3-.7 4.7-1.1 7.1-1.1 42.9 0 79.7 24.4 98.5 59.8C359.3 421.4 306.7 448 248 448z",
+        ],
+        "iconName": "user-circle",
+        "prefix": "fas",
+      }
+    }
+    size="lg"
+  />
+  <span
+    className="d-none d-md-inline"
+    data-hj-suppress={true}
+  >
+    test-username
+  </span>
+</Dropdown.Toggle>
+`;

src/containers/CourseHeader/AuthenticatedUserDropdown/__snapshots__/UserMenu.test.jsx.snap

@@ -0,0 +1,28 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Header AuthenticatedUserDropdown UserMenu component snapshot 1`] = `
+<Dropdown.Menu
+  className="dropdown-menu-right"
+>
+  <Dropdown.Item
+    href="<LMS_BASE_URL>/dashboard"
+  >
+    Dashboard
+  </Dropdown.Item>
+  <Dropdown.Item
+    href="<LMS_BASE_URL>/u/test-username"
+  >
+    Profile
+  </Dropdown.Item>
+  <Dropdown.Item
+    href="<LMS_BASE_URL>/account/settings"
+  >
+    Account
+  </Dropdown.Item>
+  <Dropdown.Item
+    href="<LOGOUT_URL>"
+  >
+    Sign Out
+  </Dropdown.Item>
+</Dropdown.Menu>
+`;

src/containers/CourseHeader/AuthenticatedUserDropdown/__snapshots__/index.test.jsx.snap

@@ -0,0 +1,22 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Header AuthenticatedUserDropdown component snapshot 1`] = `
+<Fragment>
+  <a
+    className="text-gray-700 mr-3"
+    href="<SUPPORT_URL>"
+  >
+    Help
+  </a>
+  <Dropdown
+    className="user-dropdown"
+  >
+    <UserAvatar
+      username="test-username"
+    />
+    <UserMenu
+      username="test-username"
+    />
+  </Dropdown>
+</Fragment>
+`;

src/containers/CourseHeader/AuthenticatedUserDropdown/index.jsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { getConfig } from '@edx/frontend-platform';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { Dropdown } from '@edx/paragon';
+
+import UserMenu from './UserMenu';
+import UserAvatar from './UserAvatar';
+
+import messages from '../messages';
+
+export const AuthenticatedUserDropdown = ({
+  intl,
+  username,
+}) => (
+  <>
+    <a className="text-gray-700 mr-3" href={`${getConfig().SUPPORT_URL}`}>
+      {intl.formatMessage(messages.help)}
+    </a>
+    <Dropdown className="user-dropdown">
+      <UserAvatar username={username} />
+      <UserMenu username={username} />
+    </Dropdown>
+  </>
+);
+
+AuthenticatedUserDropdown.propTypes = {
+  intl: intlShape.isRequired,
+  username: PropTypes.string.isRequired,
+};
+
+AuthenticatedUserDropdown.defaultProps = {};
+
+export default injectIntl(AuthenticatedUserDropdown);

src/containers/CourseHeader/AuthenticatedUserDropdown/index.test.jsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import { AuthenticatedUserDropdown } from '.';
+
+jest.mock('@edx/frontend-platform', () => ({
+  getConfig: () => ({
+    SUPPORT_URL: '<SUPPORT_URL>',
+  }),
+}));
+jest.mock('./UserAvatar', () => 'UserAvatar');
+jest.mock('./UserMenu', () => 'UserMenu');
+
+describe('Header AuthenticatedUserDropdown component', () => {
+  const props = {
+    intl: { formatMessage: (msg) => msg.defaultMessage },
+    username: 'test-username',
+  };
+  test('snapshot', () => {
+    expect(
+      shallow(<AuthenticatedUserDropdown {...props} />),
+    ).toMatchSnapshot();
+  });
+});