feat: ensure lms api synced with latest value in config

This change make it possible if LMS url to be changed, that the last value will be picked. This is simlair openedx/frontend-app-course-authoring/pull/389 which issue overhangio/tutor-mfe/issues/86, the fixes is needed so that dynamic config would work with tutor: overhangio/tutor-mfe/pull/69
fix: use getConfig in order to support runtime configuration (#286 ) (#287 )
2022-12-08 18:22:27 +00:00 · 2022-11-28 12:06:02 -05:00 · 2022-11-14 20:35:54 +00:00 · 2022-09-29 15:02:24 -04:00 · 2022-09-29 14:49:14 -04:00 · 2022-09-29 11:34:30 +01:00
244 changed files with 53192 additions and 18145 deletions
--- a/.env
+++ b/.env
@@ -30,4 +30,5 @@ ENTERPRISE_MARKETING_URL=''
 ENTERPRISE_MARKETING_UTM_SOURCE=''
 ENTERPRISE_MARKETING_UTM_CAMPAIGN=''
 ENTERPRISE_MARKETING_FOOTER_UTM_MEDIUM=''
-BULK_MANAGEMENT_SPECIAL_ACCESS_COURSE_IDS=''
+APP_ID=''
+MFE_CONFIG_API_URL=''
--- a/.env.development
+++ b/.env.development
@@ -23,6 +23,7 @@ MARKETING_SITE_BASE_URL='http://localhost:18000'
 SUPPORT_URL='http://localhost:18000/support'
 CONTACT_URL='http://localhost:18000/contact'
 OPEN_SOURCE_URL='http://localhost:18000/openedx'
+ORDER_HISTORY_URL='http://localhost:1996/orders'
 TERMS_OF_SERVICE_URL='http://localhost:18000/terms-of-service'
 PRIVACY_POLICY_URL='http://localhost:18000/privacy-policy'
 FACEBOOK_URL='https://www.facebook.com'
@@ -36,4 +37,5 @@ 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'
-BULK_MANAGEMENT_SPECIAL_ACCESS_COURSE_IDS=''
+APP_ID=''
+MFE_CONFIG_API_URL=''
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1,6 +1,13 @@
 const { createConfig } = require('@edx/frontend-build');

-const config = createConfig('eslint');
+const config = createConfig('eslint', {
+  rules: {
+    'import/no-named-as-default': 'off',
+    'import/no-named-as-default-member': 'off',
+    'import/no-self-import': 'off',
+    'spaced-comment': ['error', 'always', { 'block': { 'exceptions': ['*'] } }],
+  },
+});

 config.settings = {
  "import/resolver": {
--- a/.github/CODEOWNERS
+++ b/.github/CODEOWNERS
@@ -3,4 +3,4 @@
 # 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/masters-devs-gta
+*       @openedx/content-aurora
--- a/.github/pull_request_template.md
+++ b/.github/pull_request_template.md
@@ -26,4 +26,4 @@ Collectively, these should be completed by reviewers of this PR:
 - [ ] I've tested the new functionality


-FYI: @edx/masters-devs-gta
+FYI: @openedx/content-aurora
--- a/.github/workflows/add-depr-ticket-to-depr-board.yml
+++ b/.github/workflows/add-depr-ticket-to-depr-board.yml
@@ -0,0 +1,19 @@
+# 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 }}
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -0,0 +1,64 @@
+name: node_js CI
+
+on:
+  push:
+    branches:
+    - master
+  pull_request:
+    branches:
+    - '**'
+
+jobs:
+  test:
+    runs-on: ubuntu-20.04
+    strategy:
+      matrix:
+        node: [16]
+        npm: [8.5.x]
+
+    steps:
+    - name: Checkout
+      uses: actions/checkout@v2
+
+    - name: Setup Nodejs
+      uses: actions/setup-node@v1
+      with:
+        node-version: ${{ matrix.node }}
+
+    - name: Install npm 8.5.x
+      run: npm install -g npm@${{ matrix.npm }}
+
+    - name: Install dependencies
+      run: npm ci
+
+    - name: Unit Tests
+      run: npm run test
+
+    - name: Validate Package Lock
+      run: make validate-no-uncommitted-package-lock-changes
+
+    - name: Run Lint
+      run: npm run lint
+
+    - name: Run Test
+      run: npm run test
+
+    - name: Run Build
+      run: npm run build
+
+    - 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: CI workflow failed in ${{github.repository}}
+        to: masters-grades@edx.org
+        from: github-actions <github-actions@edx.org>
+        body: CI workflow in ${{github.repository}} failed! For details see "github.com/${{
+          github.repository }}/actions/runs/${{ github.run_id }}"
--- a/.github/workflows/commitlint.yml
+++ b/.github/workflows/commitlint.yml
@@ -0,0 +1,10 @@
+# Run commitlint on the commit messages in a pull request.
+
+name: Lint Commit Messages
+
+on:
+  - pull_request
+
+jobs:
+  commitlint:
+    uses: edx/.github/.github/workflows/commitlint.yml@master
--- a/.github/workflows/lockfileversion-check.yml
+++ b/.github/workflows/lockfileversion-check.yml
@@ -0,0 +1,13 @@
+#check package-lock file version
+
+name: Lockfile Version check
+
+on:
+  push:
+    branches:
+    - master
+  pull_request:
+
+jobs:
+  version-check:
+    uses: edx/.github/.github/workflows/lockfileversion-check.yml@master
--- a/.github/workflows/npm-publish.yml
+++ b/.github/workflows/npm-publish.yml
@@ -0,0 +1,33 @@
+name: Release CI
+on:
+  push:
+    tags:
+      - '*'
+
+jobs:
+  release:
+    name: Release
+    runs-on: ubuntu-20.04
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+        with:
+          fetch-depth: 0
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v1
+        with:
+          node-version: 12
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Create Build
+        run: npm run build
+
+      - name: Release Package
+        env:
+          GITHUB_TOKEN: ${{ secrets.SEMANTIC_RELEASE_GITHUB_TOKEN }}
+          NPM_TOKEN: ${{ secrets.SEMANTIC_RELEASE_NPM_TOKEN }}
+        run: npm semantic-release
--- a/.gitignore
+++ b/.gitignore
@@ -5,6 +5,8 @@ npm-debug.log
 coverage

 dist/
+src/i18n/transifex_input.json
+temp/babel-plugin-react-intl

 ### pyenv ###
 .python-version
@@ -17,3 +19,7 @@ dist/
 ### Development environments ###
 .idea
 .vscode
+
+### transifex ###
+src/i18n/transifex_input.json
+temp
--- a/.npmignore
+++ b/.npmignore
@@ -1,7 +1,6 @@
 .eslintignore
 .eslintrc.json
 .gitignore
-.travis.yml
 docker-compose.yml
 Dockerfile
 Makefile
--- a/.travis.yml
+++ b/.travis.yml
@@ -1,28 +0,0 @@
-language: node_js
-node_js: 12
-notifications:
-  email:
-    recipients:
-      - masters-grades@edx.org
-    on_success: never
-    on_failure: always
-  webhooks: https://www.travisbuddy.com/
-  on_success: never
-before_install:
-  - npm install -g greenkeeper-lockfile@1.14.0
-install:
-  - npm ci
-before_script: greenkeeper-lockfile-update
-after_script: greenkeeper-lockfile-upload
-script:
-  - make validate-no-uncommitted-package-lock-changes
-  - npm run lint
-  - npm run test
-  - npm run build
-after_success:
-  - npm run travis-deploy-once "npm run semantic-release"
-  - npm run coveralls
-env:
-  global:
-    - secure: bBLQZVw1aVUxB7GFNXGrdKeztyFrCCJusVgFcSuej9S4qmj9/jrVsEc9dEcH+BMS+b49+SvILoxzd6ZYLaRygQLzevnO1/dX596DeCKVK48PTTZRsNyafaSMCkxNKqEmRcA9hYL52xJJ5GpKo7ViWsFy8VFgUfZEJxQi8/lYbfQ1vlXRpo2LJfJh09v85roSXdQmajyGJ1Dz6elcwUX5B+BgXmIHizJXUMfFci61xTEZmgKtfeCiwFQA5pCvVMHBQhgySqT2N3eRESzRt2jAfAdcRKBYXS0rwKymdlL1ZF349Jm8xwtqm19Fwsut21181Lnn6FmccMWhQ7man3WH1xfT0ahmHNs1KJMyZcwRJd/gDfbd6iD3LB9Pt9hEQ00Qh/m7MYeahMxTEL9bp2TyILi8cTP91jeBUHCExCdv2jRrUQEnUS5vZUYRdM8CR2DLoLmNh3APndKzwgr5U8rh6RdhbQBJp97Hb/YYVrBiP2atLJAaYPY/xEQHK/YoXelQgiZ6wHBMV+tF/L0ZRn7KyVWdkbBKWfbEjRKbEJD9WD+V7HayMR81tm5CSqlrG8mTvSy2boIGiX14GV11ZEfMj5bjb6W41BW+QGqQerZvmwk/4ywe304X85PD0OBhIYPRzeLIi0Gt6lD1aOpVxgm4M03tdgYQzCPWRPq32CB+1IA=
-    - secure: w1d/E+cc4+Bf017Jpp9YsKBzLSZw9sqKZGeM2tNrO6eJZbMJqfKTmfUrRw8BoLh1Z8YRkHF7RADDy3ln7XEdeAX3j9OoC3Cz0zN6iDX6TPcI461NuOIscJYb4tyFcuWm6FhgVlBAlo/BI3q+zqKwjfWuDaORpk6+haacCmvTe5V0vWhY+MYT7M+LfnKeKVzhI4magGt8jPTE21oziIFwCqCCjJc4+AmsWoWTzU0Q7Db0DZiJnLXFfXybLbkedAgJmcSgEGZCSpaZIOkX0/Lbazsz1Ky4KASfkrYT1Z5iKQ8TE3skmx1IIu+1egN8iBbdrY+NhvV24RkT+rpUvD7TBIHTrjQ5JYLe0kGjN70vG7YlKgjNSyTjkrEd7fCKpuIol3DVjBRz3tV5aCl0t/A8mIPqKyNI94MamWsExpqsxgcb9vBVno5caZvD8ZXNrGNqanB3MSoLGxZTLKif9u+AZfLnB3xtjaiJg3/BNoWaOBPlp/M6BvGIGHElwvLrAhUvl8wzrwJcQQWpmRMh0b6enr6Y7ox/mGGs7NBCT+CNKEsWeCfY4thZzgi6/GocXyqdTpXMkNSI1PDoPmi+vKafBd+7aAYbcUlJBTU6TAxyncln0tF2JF+ghTZ0v8nNzEQ9VmV4ddyoOHx6YnHvEcenWZGMROQnMCVifyDbaHpPbPI=
--- a/.tx/config
+++ b/.tx/config
@@ -0,0 +1,9 @@
+[main]
+host = https://www.transifex.com
+
+[o:open-edx:p:edx-platform:r:frontend-app-gradebook]
+file_filter = src/i18n/messages/<lang>.json
+source_file = src/i18n/transifex_input.json
+source_lang = en
+type        = KEYVALUEJSON
+
--- a/64
+++ b/64
@@ -2,8 +2,64 @@ npm-install-%: ## install specified % npm package
 	npm install $* --save-dev
 	git add package.json

-validate-no-uncommitted-package-lock-changes:
-	git diff --exit-code package-lock.json
+transifex_resource = frontend-app-gradebook
+transifex_langs = "ar,fr,es_419,zh_CN"

-test:
-	npm run test 
+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 is-es5
+
+.PHONY: test
+test: $(addprefix test.npm.,$(NPM_TESTS))  ## validate ci suite
+
+.PHONY: test.npm.*
+test.npm.%: validate-no-uncommitted-package-lock-changes
+	test -d node_modules || $(MAKE) requirements
+	npm run $(*)
+
+.PHONY: requirements
+requirements:  ## install ci requirements
+	npm ci
+
+i18n.extract:
+	# Pulling display strings from .jsx files into .json files...
+	rm -rf $(transifex_temp)
+	npm run-script i18n_extract
+
+i18n.concat:
+	# Gathering JSON messages into one file...
+	$(transifex_utils) $(transifex_temp) $(transifex_input)
+
+extract_translations: | requirements i18n.extract i18n.concat
+
+# Despite the name, we actually need this target to detect changes in the incoming translated message files as well.
+detect_changed_source_translations:
+	# Checking for changed translations...
+	git diff --exit-code $(i18n)
+
+# Pushes translations to Transifex.  You must run make extract_translations first.
+push_translations:
+	# Pushing strings to Transifex...
+	tx push -s
+	# Fetching hashes from Transifex...
+	./node_modules/reactifex/bash_scripts/get_hashed_strings.sh $(tx_url1)
+	# Writing out comments to file...
+	$(transifex_utils) $(transifex_temp) --comments
+	# Pushing comments to Transifex...
+	./node_modules/reactifex/bash_scripts/put_comments.sh $(tx_url2)
+
+# Pulls translations from Transifex.
+pull_translations:
+	tx pull -f --mode reviewed --languages=$(transifex_langs)
+
+# This target is used by CI.
+validate-no-uncommitted-package-lock-changes:
+	# Checking for package-lock.json changes...
+	git diff --exit-code package-lock.json
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-[![Build Status](https://api.travis-ci.com/edx/frontend-app-gradebook.svg?branch=master)](https://travis-ci.com/edx/frontend-app-gradebook) [![Coveralls](https://img.shields.io/coveralls/edx/frontend-app-gradebook.svg?branch=master)](https://coveralls.io/github/edx/frontend-app-gradebook)
+[![Build Status](https://api.travis-ci.com/edx/frontend-app-gradebook.svg?branch=master)](https://travis-ci.com/edx/frontend-app-gradebook)
 [![npm_version](https://img.shields.io/npm/v/@edx/frontend-app-gradebook.svg)](@edx/frontend-app-gradebook)
 [![npm_downloads](https://img.shields.io/npm/dt/@edx/frontend-app-gradebook.svg)](@edx/frontend-app-gradebook)
 [![license](https://img.shields.io/npm/l/@edx/frontend-app-gradebook.svg)](@edx/frontend-app-gradebook)
@@ -22,19 +22,13 @@ For existing documentation see:

 ### What does this offer over the legacy gradebook?

-![A screenshot of the grade listings](documentation/screenshots/grade-listings.png)
-
 The micro-frontend offers a great deal more granularity when searching for problems, an easy interface for editing grades, an 
 audit trail for seeing who edited what grade and what reason they gave (if any) for doing so.

-![Screenshot of the grade editing interface](documentation/screenshots/grade-editing.png)
-
 UsageProblems can be filtered by student as in the traditional gradebook, but can also be filtered by scores to see who
 scored within a certain range, and by assignment types (note: Not problem types, but categories like ‘Exams’ or
 ‘Homework’).

-![Screenshot of the filtering options](documentation/screenshots/grade-filtering.png)
-
 ### What does the legacy gradebook offer that this project does not?

 This project does not (yet, at least) create any graphs, which the traditional gradebook does. It also does not give
--- a/documentation/.travis.yml.md
+++ b/documentation/.travis.yml.md
@@ -1,77 +0,0 @@
-# Travis Configuration
-
-Your project might have different build requirements - however, this project's `.travis.yml` configuration is supposed to represent a good starting point.
-
-## Node JS Version
-
-The minimum `Node` and `npm` versions that edX supports is `8.9.3` and `5.5.1`, respectively.
-
-## Caching node_modules
-
-While [the `Travis` blog](https://blog.travis-ci.com/2016-11-21-travis-ci-now-supports-yarn) recommends
-
-```yaml
-cache:
-  directories:
-    - node_modules
-```
-
-this causes issues when testing different versions of `Node` because [`node_modules` will store the compiled native modules](https://stackoverflow.com/a/42523517/5225575).
-
-Caching the `~/.npm` directory avoids storing these native modules.
-
-## Notifications
-
-This project uses a service called [`TravisBuddy`](https://www.travisbuddy.com/), which provides Travis build context within a PR via webhooks (configured only to add feedback for build failures).
-
-![travis-buddy](https://i.imgur.com/VsR2TTs.png)
-
-## Installing `greenkeeper-lockfile`
-
-As explained in [the `Greenkeeper` documentation](https://greenkeeper.io/docs.html#greenkeeper-step-by-step), `Greenkeeper` is a service that keeps track of your project's dependencies, and will, for example, automatically open PRs with an updated `package.json` file when the latest version of a dependency is a major version ahead of the existing dependency version in your `package.json` file.
-
-This automated updating is great, but `Greenkeeper` does not update your `package-lock.json` file, just your `package.json` file. This makes sense, as the only way to update the `package-lock.json` file would be to run `npm install` when building your project, using the latest `package.json`, and then committing the updated `package-lock.json` file.
-
-This is essentially what you have to do manually when `Greenkeeper` opens a PR - `git checkout` the branch, `npm install` locally, `git commit` the `package-lock.json` changes, and then `git push` those changes to the `Greenkeeper` branch on `origin`. It's fun probably only the first time, and even then it gets old, fast.
-
-What [`greenkeeper-lockfile`](https://github.com/greenkeeperio/greenkeeper-lockfile) does is that it automates the previous steps as part of the build process.
-
-It will
-  * Check that the branch is a `Greenkeeper` branch
-  * Update the lockfile
-  * Push a commit with the updated lockfile back to the Greenkeeper branch
-
-This is why it's important to install `greenkeeper-lockfile` in the `before_install` step, and since it's used exclusively only in the Travis Build, why it's not part of the package's dependencies.
-
-## Scripts
-
-Most of the `script`s are self-explanatory - you probably want to fail a build if there are linting violations, or if any tests don't pass, or if it cannot compile your files.
-
-However, there are a couple additional `script`s that might seem less self-explanatory.
-
-### What the heck is `make validate-no-uncommitted-package-lock-changes`?
-
-There are only two requirements for a good `make target` name
-
-1. Definitely make it really verbose so people can't remember what it's called
-2. Definitely don't not use a double-negative
-
-What `make validate-no-uncommitted-package-lock-changes` does is `git diff`s for any `package-lock.json` file changes in your project. It's important to remember that all build `script`s are executed in Travis *after* the `install` step (aka post-`npm install`).
-
-This is important because `npm` uses the pinned dependencies in your `package-lock.json` file to build the `node_modules` directory. However, the dependencies defined within the `package.json` file can be modified manually, for example, to become misaligned with the dependencies defined within the `package-lock.json`. So when `npm install` executes, the `package-lock.json` file will be updated to mirror the modified `package.json` changes.
-
-However, when these changes surface within a Travis build, this indicates differing dependency expectations between the committed `package.json` file and the `package-lock.json` file, which is a good reason to fail a build.
-
-### What is this `npm run is-es5` check?
-
-This project outputs production files to the `dist` folder. The `npm script`, `npm run is-es5`, checks the JavaScript files in the `dist` folder to make sure that they are `ES5`-compliant.
-
-This check is important because `ES5` JavaScript has [greater browser compatibility](http://kangax.github.io/compat-table/es5/) than [`ES2015+`](http://kangax.github.io/compat-table/es6/) - particularly for `IE11`.
-
-### `deploy` step
-
-How your project deploys will probably differ between the cookie cutter and your own application.
-
-For demonstrational purposes, the cookie cutter deploys to GitHub pages using [`Travis`'s GitHub pages configuration](https://docs.travis-ci.com/user/deployment/pages/).
-
-Your application might deploy to an `S3` bucket or to `npm`.
--- a/documentation/CI.md
+++ b/documentation/CI.md
@@ -0,0 +1,40 @@
+# CI Configuration
+
+Your project might have different build requirements - however, this project's `.github/ci.yml` configuration is supposed to represent a good starting point.
+
+## Node JS Version
+
+The minimum `Node` and `npm` versions that edX supports is `8.9.3` and `5.5.1`, respectively.
+
+## Scripts
+
+Most of the `script`s are self-explanatory - you probably want to fail a build if there are linting violations, or if any tests don't pass, or if it cannot compile your files.
+
+However, there are a couple additional `script`s that might seem less self-explanatory.
+
+### What the heck is `make validate-no-uncommitted-package-lock-changes`?
+
+There are only two requirements for a good `make target` name
+
+1. Definitely make it really verbose so people can't remember what it's called
+2. Definitely don't not use a double-negative
+
+What `make validate-no-uncommitted-package-lock-changes` does is `git diff`s for any `package-lock.json` file changes in your project. It's important to remember that all build `script`s are executed in CI *after* the `install` step (aka post-`npm install`).
+
+This is important because `npm` uses the pinned dependencies in your `package-lock.json` file to build the `node_modules` directory. However, the dependencies defined within the `package.json` file can be modified manually, for example, to become misaligned with the dependencies defined within the `package-lock.json`. So when `npm install` executes, the `package-lock.json` file will be updated to mirror the modified `package.json` changes.
+
+However, when these changes surface within a CI build, this indicates differing dependency expectations between the committed `package.json` file and the `package-lock.json` file, which is a good reason to fail a build.
+
+### What is this `npm run is-es5` check?
+
+This project outputs production files to the `dist` folder. The `npm script`, `npm run is-es5`, checks the JavaScript files in the `dist` folder to make sure that they are `ES5`-compliant.
+
+This check is important because `ES5` JavaScript has [greater browser compatibility](http://kangax.github.io/compat-table/es5/) than [`ES2015+`](http://kangax.github.io/compat-table/es6/) - particularly for `IE11`.
+
+### `deploy` step
+
+How your project deploys will probably differ between the cookie cutter and your own application.
+
+For demonstrational purposes, the cookie cutter deploys to GitHub pages using [ GitHUb CI ].
+
+Your application might deploy to an `S3` bucket or to `npm`.
--- a/documentation/screenshots/grade-editing.png
+++ b/documentation/screenshots/grade-editing.png
--- a/documentation/screenshots/grade-filtering.png
+++ b/documentation/screenshots/grade-filtering.png
--- a/documentation/screenshots/grade-listings.png
+++ b/documentation/screenshots/grade-listings.png
--- a/documentation/testing/test-plan.md
+++ b/documentation/testing/test-plan.md
@@ -68,33 +68,40 @@ Confirm the following workflows:
    - [ ] Clicking "Save Grade" applies the override, shows the successful "grade has been edited" banner and updates score in grades table (may take a few seconds).
    - [ ] Opening back up the "Edit Grades" modal shows the change as an entry in the override history table.

- [ ] *Masters only*: "Bulk Management" allows overriding grades in bulk.
+- [ ] *Master's (or selectively-enabled) only*: "Bulk Management" allows overriding grades in bulk.
    - Open a non-masters-track course.
-    - [ ] Verify that the "Bulk Management" tab does not appear.
    - [ ] Verify that the "Bulk Management" button does not appear.
+    - [ ] Verify that the "Download Interventions" interface does not appear.
    - Open a masters-track course.
-    - [ ] Verify that the "Bulk Management" tab appears to the right of the "Grades" tab.
-    - [ ] Verify that the "Bulk Management" button appears.
-    - Click the "Bulk Management" button. This downloads existing student/assignment info.
+    - [ ] Verify that the "Bulk Management History" button appears at the right of the header.
+    - [ ] Verify that the "Download Interventions" interface appears.
+    - [ ] Verify that the "Download Grades" button appears.
+    - [ ] Verify that the "Import Grades" button appears.
+    - Click the "Download Grades" button. This downloads existing student/assignment info.
    - [ ] Open the downloaded CSV and verify that students and assignments in the file match applied filters/searches.
-    - Add values in the "new_override-{subsection-short-id}" columns for student grades to be overridden and save the CSV file.
-    - [ ] Clicking the "Bulk Management" tab shows the Bulk Management page.
+    - Navigate to Bulk Management History tab.
+    - [ ] Clicking the "ViewBulk Management History" tab shows the Bulk Management History view.
    - [ ] The bulk management history table appears with columns: "Gradebook", "Download Summary", "Who", "When".
    - [ ] Previous bulk management imports (if applicable) appear in the table.
+    - Add values in the "new_override-{subsection-short-id}" columns for student grades to be overridden and save the CSV file.
+    - Navigate back to Gradebook view
    - Click the "Import Grades" button and select the modified CSV file.
    - [ ] Verify that the "CSV processing" banner appears.
    - Wait for processing to complete and reload the page. (Can take seconds to minutes depending on environment and size of the override.)
-    - Navigate back to the "Bulk Management" tab.
+    - [ ] Verify that Import Grades Success toast appears (and disappears after 5 seconds)
+    - Navigate back to the "Bulk Management History" view.
    - [ ] Verify that a new entry appears in the results table indicating how many students were affected by the bulk grade change.
    - Click the "Download Summary" link to see the summary of changes from the bulk grade changes.
    - [ ] Verify that students are shown with modified subsections and actions: "No Action" for unchanged users, "Success" for successful overrides.

 - [ ] *Masters only*: Interventions report shows student activity in the course.
    - Open a non-masters-track course.
-    - [ ] Verify that the "Interventions" tab does not appear.
-    - [ ] Verify that the "Interventions" button does not appear.
+    - [ ] Verify that the "View Bulk Management History" button does not appear.
+    - [ ] Verify that the "Interventions" interface does not appear.
+    - [ ] Verify that the "Download Grades" and "Import Grades" buttons do not appear.
    - Open a masters-track course.
-    - [ ] Verify that the "Interventions" tab appears to the right of the "Grades" tab.
-    - [ ] Verify that the "Interventions" button appears.
-    - Click on the "Interventions" button to generate a CSV students and activity info.
+    - [ ] Verify that the "View Bulk Management History" button appears at the right of the header.
+    - [ ] Verify that the "Interventions" interface appears.
+    - [ ] Verify that the "Download Grades" and "Import Grades" buttons appear.
+    - Click on the "Download Interventions" button to generate a CSV students and activity info.
    - Open the interventions report and verify student info and activity info appear.
--- a/documentation/testing/test-setup.md
+++ b/documentation/testing/test-setup.md
@@ -14,7 +14,7 @@ Suggested resources:
 - [Adding Exercises and Tools](https://edx.readthedocs.io/projects/edx-partner-course-staff/en/latest/grading/index.html)
 - [Set the Assignment Type and Due Date for a Subsection](https://edx.readthedocs.io/projects/edx-partner-course-staff/en/latest/developing_course/course_subsections.html#set-the-assignment-type-and-due-date-for-a-subsection)

-## Enable Gradebook and feature toggles for course
+## Enable Gradebook for course

 See README.md #Quickstart for more detailed instructions.

@@ -25,7 +25,13 @@ As an admin user, visit Django Admin (`{lms-url}/admin`) to modify features.
    - [ ] Set name to `grades.assume_zero_grade_if_absent`, select "Active", and click "Save"
 - In Waffle_Utils > Waffle flag course overrides:
    - [ ] Add a new flag called `grades.writeable_gradebook`, select "Force On", and enable it for your course
-    - [ ] Add a new flag called `grades.bulk_management`, select "Force On", and enable it for your course
+
+## Enable Bulk Management
+
+Bulk Management is an added feature to allow modifying grades in bulk via CSV upload. Bulk Management is default enabled for Master's track courses but can be selectively enabled for other courses with a waffle flag following the steps below.
+
+- In Waffle_Utils > Waffle flag course overrides:
+    - [ ] Add a new flag called `grades.bulk_management`, select "Force On", and enable it for your course.

 ## Create a Master's track for testing Master's-only features

--- a/jest.config.js
+++ b/jest.config.js
@@ -8,4 +8,9 @@ module.exports = createConfig('jest', {
  snapshotSerializers: [
    'enzyme-to-json/serializer',
  ],
+  coveragePathIgnorePatterns: [
+    'src/segment.js',
+    'src/postcss.config.js',
+    'testUtils', // don't unit test jest mocking tools
+  ],
 });
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@edx/frontend-app-gradebook",
-  "version": "1.4.39",
+  "version": "1.6.0",
  "description": "edx editable gradebook-ui to manipulate grade overrides on subsections",
  "repository": {
    "type": "git",
@@ -8,16 +8,15 @@
  },
  "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/",
    "prepush": "npm run lint",
    "semantic-release": "semantic-release",
    "start": "fedx-scripts webpack-dev-server --progress",
    "test": "TZ=GMT fedx-scripts jest --coverage --passWithNoTests",
-    "watch-tests": "jest --watch",
-    "travis-deploy-once": "travis-deploy-once"
+    "watch-tests": "jest --watch"
  },
  "author": "edX",
  "license": "AGPL-3.0",
@@ -25,11 +24,17 @@
  "publishConfig": {
    "access": "public"
  },
+  "browserslist": [
+    "last 2 versions",
+    "not ie > 0",
+    "not ie_mob > 0"
+  ],
  "dependencies": {
    "@edx/brand": "npm:@edx/brand-edx.org@^1.3.2",
-    "@edx/frontend-component-footer": "10.1.1",
-    "@edx/frontend-platform": "1.9.5",
-    "@edx/paragon": "14.16.4",
+    "@edx/frontend-component-footer": "^11.1.1",
+    "@edx/frontend-component-header": "^3.1.1",
+    "@edx/frontend-platform": "2.5.0",
+    "@edx/paragon": "19.6.0",
    "@fortawesome/fontawesome-svg-core": "^1.2.25",
    "@fortawesome/free-brands-svg-icons": "^5.11.2",
    "@fortawesome/free-solid-svg-icons": "^5.11.2",
@@ -43,13 +48,13 @@
    "enzyme-to-json": "^3.6.2",
    "font-awesome": "4.7.0",
    "history": "4.10.1",
-    "node-sass": "^4.14.1",
    "prop-types": "15.7.2",
    "query-string": "6.13.0",
-    "react": "16.13.1",
-    "react-dom": "16.13.1",
+    "react": "16.14.0",
+    "react-dom": "16.14.0",
+    "react-helmet": "^6.1.0",
    "react-intl": "^2.9.0",
-    "react-redux": "^5.1.1",
+    "react-redux": "^7.1.1",
    "react-router": "5.2.0",
    "react-router-dom": "5.2.0",
    "react-router-redux": "^5.0.0-alpha.9",
@@ -59,14 +64,14 @@
    "redux-logger": "3.0.6",
    "redux-thunk": "2.3.0",
    "regenerator-runtime": "^0.13.7",
+    "sass": "^1.49.0",
    "util": "^0.12.3",
    "whatwg-fetch": "^2.0.4"
  },
  "devDependencies": {
-    "@edx/frontend-build": "5.5.2",
+    "@edx/frontend-build": "9.1.1",
    "axios": "0.21.1",
    "axios-mock-adapter": "^1.17.0",
-    "codecov": "^3.6.1",
    "enzyme-adapter-react-16": "^1.14.0",
    "es-check": "^2.3.0",
    "fetch-mock": "^6.5.2",
@@ -75,8 +80,8 @@
    "jest": "24.9.0",
    "react-dev-utils": "^5.0.3",
    "react-test-renderer": "^16.10.1",
+    "reactifex": "1.1.1",
    "redux-mock-store": "^1.5.3",
-    "semantic-release": "^17.2.3",
-    "travis-deploy-once": "^5.0.11"
+    "semantic-release": "^17.2.3"
  }
 }
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
+
+import { AppProvider } from '@edx/frontend-platform/react';
+
+import Footer from '@edx/frontend-component-footer';
+import Header from '@edx/frontend-component-header';
+
+import { routePath } from 'data/constants/app';
+import store from 'data/store';
+import GradebookPage from 'containers/GradebookPage';
+import './App.scss';
+import Head from './head/Head';
+
+const App = () => (
+  <AppProvider store={store}>
+    <Head />
+    <Router>
+      <div>
+        <Header />
+        <main>
+          <Switch>
+            <Route
+              exact
+              path={routePath}
+              component={GradebookPage}
+            />
+          </Switch>
+        </main>
+        <Footer logo={process.env.LOGO_POWERED_BY_OPEN_EDX_URL_SVG} />
+      </div>
+    </Router>
+  </AppProvider>
+);
+
+export default App;
--- a/src/App.scss
+++ b/src/App.scss
@@ -9,8 +9,10 @@ $fa-font-path: "~font-awesome/fonts";

 $input-focus-box-shadow: $input-box-shadow; // hack to get upgrade to paragon 4.0.0 to work

+@import "~@edx/frontend-component-header/dist/index";
@import "~@edx/frontend-component-footer/dist/_footer";

-@import "./components/GradesTab/GradesTab";
+@import "./components/GradesView/GradesView";
+@import "./components/BulkManagementHistoryView/BulkManagementHistoryView";
@import "./components/WithSidebar/WithSidebar";
@import "./components/GradebookFilters/GradebookFilters";
--- a/src/App.test.jsx
+++ b/src/App.test.jsx
@@ -0,0 +1,80 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
+import { AppProvider } from '@edx/frontend-platform/react';
+
+import Footer from '@edx/frontend-component-footer';
+import Header from '@edx/frontend-component-header';
+
+import { routePath } from 'data/constants/app';
+import store from 'data/store';
+import GradebookPage from 'containers/GradebookPage';
+
+import App from './App';
+import Head from './head/Head';
+
+jest.mock('react-router-dom', () => ({
+  BrowserRouter: () => 'BrowserRouter',
+  Route: () => 'Route',
+  Switch: () => 'Switch',
+}));
+jest.mock('@edx/frontend-platform/react', () => ({
+  AppProvider: () => 'AppProvider',
+}));
+jest.mock('data/constants/app', () => ({
+  routePath: '/:courseId',
+}));
+jest.mock('@edx/frontend-component-footer', () => 'Footer');
+jest.mock('data/store', () => 'testStore');
+jest.mock('containers/GradebookPage', () => 'GradebookPage');
+jest.mock('@edx/frontend-component-header', () => 'Header');
+
+const logo = 'fakeLogo.png';
+let el;
+let router;
+
+describe('App router component', () => {
+  test('snapshot', () => {
+    expect(shallow(<App />)).toMatchSnapshot();
+  });
+  describe('component', () => {
+    beforeEach(() => {
+      process.env.LOGO_POWERED_BY_OPEN_EDX_URL_SVG = logo;
+      el = shallow(<App />);
+      router = el.childAt(1);
+    });
+    describe('AppProvider', () => {
+      test('AppProvider is the parent component, passed the redux store props', () => {
+        expect(el.type()).toBe(AppProvider);
+        expect(el.props().store).toEqual(store);
+      });
+    });
+    describe('Head', () => {
+      test('first child of AppProvider', () => {
+        expect(el.childAt(0).type()).toBe(Head);
+      });
+    });
+    describe('Router', () => {
+      test('second child of AppProvider', () => {
+        expect(router.type()).toBe(Router);
+      });
+      test('Header is above/outside-of the routing', () => {
+        expect(router.childAt(0).childAt(0).type()).toBe(Header);
+        expect(router.childAt(0).childAt(1).type()).toBe('main');
+      });
+      test('Routing - GradebookPage is only route', () => {
+        expect(router.find('main')).toEqual(shallow(
+          <main>
+            <Switch>
+              <Route exact path={routePath} component={GradebookPage} />
+            </Switch>
+          </main>,
+        ));
+      });
+    });
+    test('Footer logo drawn from env variable', () => {
+      expect(router.find(Footer).props().logo).toEqual(logo);
+    });
+  });
+});
--- a/src/snapshots/App.test.jsx.snap
+++ b/src/snapshots/App.test.jsx.snap
@@ -0,0 +1,24 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`App router component snapshot 1`] = `
+<AppProvider
+  store="testStore"
+>
+  <injectIntl(ShimmedIntlComponent) />
+  <BrowserRouter>
+    <div>
+      <Header />
+      <main>
+        <Switch>
+          <Route
+            component="GradebookPage"
+            exact={true}
+            path="/:courseId"
+          />
+        </Switch>
+      </main>
+      <Footer />
+    </div>
+  </BrowserRouter>
+</AppProvider>
+`;
--- a/src/components/BulkManagementHistoryView/BulkManagementAlerts.jsx
+++ b/src/components/BulkManagementHistoryView/BulkManagementAlerts.jsx
@@ -1,20 +1,22 @@
 /* eslint-disable react/sort-comp, react/button-has-type */
 import React from 'react';
 import PropTypes from 'prop-types';
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
 import { connect } from 'react-redux';

 import { Alert } from '@edx/paragon';

-import * as appConstants from 'data/constants/app';
 import selectors from 'data/selectors';
-
-const { messages: { BulkManagementTab: messages } } = appConstants;
+import messages from './messages';

 /**
 * <BulkManagementAlerts />
 * Alerts to display at the top of the BulkManagement tab
 */
-export const BulkManagementAlerts = ({ bulkImportError, uploadSuccess }) => (
+export const BulkManagementAlerts = ({
+  bulkImportError,
+  uploadSuccess,
+}) => (
  <>
    <Alert
      variant="danger"
@@ -28,7 +30,7 @@ export const BulkManagementAlerts = ({ bulkImportError, uploadSuccess }) => (
      show={uploadSuccess}
      dismissible={false}
    >
-      {messages.successDialog}
+      <FormattedMessage {...messages.successDialog} />
    </Alert>
  </>
 );
--- a/src/components/BulkManagementHistoryView/BulkManagementAlerts.test.jsx
+++ b/src/components/BulkManagementHistoryView/BulkManagementAlerts.test.jsx
@@ -1,12 +1,17 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import { Alert } from '@edx/paragon';
+import { FormattedMessage } from '@edx/frontend-platform/i18n';

 import selectors from 'data/selectors';
-import * as appConstants from 'data/constants/app';
+import messages from './messages';

 import { BulkManagementAlerts, mapStateToProps } from './BulkManagementAlerts';

+jest.mock('@edx/frontend-platform/i18n', () => ({
+  defineMessages: m => m,
+  FormattedMessage: () => 'FormattedMessage',
+}));
 jest.mock('@edx/paragon', () => ({
  Alert: () => 'Alert',
 }));
@@ -61,8 +66,8 @@ describe('BulkManagementAlerts', () => {
      });
      test('open success alert with messages.successDialog content', () => {
        expect(el.childAt(1).is(Alert)).toEqual(true);
-        expect(el.childAt(1).children().text()).toEqual(
-          appConstants.messages.BulkManagementTab.successDialog,
+        expect(el.childAt(1).children().getElement()).toEqual(
+          <FormattedMessage {...messages.successDialog} />,
        );
        expect(el.childAt(1).props().show).toEqual(true);
      });
--- a/src/components/BulkManagementHistoryView/BulkManagementHistoryView.scss
+++ b/src/components/BulkManagementHistoryView/BulkManagementHistoryView.scss
@@ -0,0 +1,6 @@
+.bulk-management-history-view {
+  .help-text {
+    margin-bottom: 40px;
+    max-width: 70%;
+  }
+}
--- a/src/components/BulkManagementHistoryView/HistoryTable.jsx
+++ b/src/components/BulkManagementHistoryView/HistoryTable.jsx
@@ -3,10 +3,11 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';

-import { Table } from '@edx/paragon';
+import { DataTable } from '@edx/paragon';

-import { bulkManagementColumns, messages } from 'data/constants/app';
+import { bulkManagementColumns } from 'data/constants/app';
 import selectors from 'data/selectors';
+
 import ResultsSummary from './ResultsSummary';

 export const mapHistoryRows = ({
@@ -21,28 +22,21 @@ export const mapHistoryRows = ({
  ...rest,
 });

-const { hints } = messages.BulkManagementTab;
-
 /**
 * <HistoryTable />
 * Table with history of bulk management uploads, including a results summary which
 * displays total, skipped, and failed uploads
 */
-export const HistoryTable = ({ bulkManagementHistory }) => (
-  <>
-    <p>
-      {hints[0]}
-      <br />
-      {hints[1]}
-    </p>
-
-    <Table
-      data={bulkManagementHistory.map(mapHistoryRows)}
-      hasFixedColumnWidths
-      columns={bulkManagementColumns}
-      className="table-striped"
-    />
-  </>
+export const HistoryTable = ({
+  bulkManagementHistory,
+}) => (
+  <DataTable
+    data={bulkManagementHistory.map(mapHistoryRows)}
+    hasFixedColumnWidths
+    columns={bulkManagementColumns}
+    className="table-striped"
+    itemCount={bulkManagementHistory.length}
+  />
 );
 HistoryTable.defaultProps = {
  bulkManagementHistory: [],
@@ -55,7 +49,6 @@ HistoryTable.propTypes = {
    timeUploaded: PropTypes.string.isRequired,
    resultsSummary: PropTypes.shape({
      rowId: PropTypes.number.isRequired,
-      courseId: PropTypes.string.isRequired,
      text: PropTypes.string.isRequired,
    }),
  })),
--- a/src/components/BulkManagementHistoryView/HistoryTable.test.jsx
+++ b/src/components/BulkManagementHistoryView/HistoryTable.test.jsx
@@ -1,16 +1,19 @@
 /* eslint-disable import/no-named-as-default */
 import React from 'react';
 import { shallow } from 'enzyme';
-import { Table } from '@edx/paragon';
+import { DataTable } from '@edx/paragon';

 import selectors from 'data/selectors';
-import { bulkManagementColumns, messages } from 'data/constants/app';
+import { bulkManagementColumns } from 'data/constants/app';

 import ResultsSummary from './ResultsSummary';
 import { HistoryTable, mapStateToProps } from './HistoryTable';

-jest.mock('@edx/paragon', () => ({
-  Table: () => 'Table',
+jest.mock('@edx/paragon', () => ({ DataTable: () => 'DataTable' }));
+
+jest.mock('@edx/frontend-platform/i18n', () => ({
+  defineMessages: m => m,
+  FormattedMessage: () => 'FormattedMessage',
 }));
 jest.mock('data/selectors', () => ({
  __esModule: true,
@@ -52,23 +55,13 @@ describe('HistoryTable', () => {
      beforeEach(() => {
        el = shallow(<HistoryTable {...props} />);
      });
-      const snapshotSegments = [
-        'hints display',
-        'formatted table',
-      ];
-      test(`snapshot - loads ${snapshotSegments.join(', ')}`, () => {
+      test('snapshot - loads formatted table', () => {
        expect(el).toMatchSnapshot();
      });
-      test('hints with break in between', () => {
-        const hints = el.find('p');
-        expect(hints.childAt(0).text()).toEqual(messages.BulkManagementTab.hints[0]);
-        expect(hints.childAt(1).is('br')).toEqual(true);
-        expect(hints.childAt(2).text()).toEqual(messages.BulkManagementTab.hints[1]);
-      });
      describe('history table', () => {
        let table;
        beforeEach(() => {
-          table = el.find(Table);
+          table = el.find(DataTable);
        });
        describe('data (from bulkManagementHistory.map(this.formatHistoryRow)', () => {
          const fieldAssertions = [
--- a/src/components/BulkManagementHistoryView/ResultsSummary.jsx
+++ b/src/components/BulkManagementHistoryView/ResultsSummary.jsx
@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import { Hyperlink, Icon } from '@edx/paragon';
 import { Download } from '@edx/paragon/icons';

-import { bulkGradesUrlByCourseAndRow } from 'data/constants/api';
+import lms from 'data/services/lms';

 /**
 * <ResultsSummary {...{ courseId, rowId, text }} />
@@ -15,12 +15,11 @@ import { bulkGradesUrlByCourseAndRow } from 'data/constants/api';
 * @param {string} text - summary string
 */
 const ResultsSummary = ({
-  courseId,
  rowId,
  text,
 }) => (
  <Hyperlink
-    href={bulkGradesUrlByCourseAndRow(courseId, rowId)}
+    href={lms.urls.bulkGradesUrlByRow(rowId)}
    destination="www.edx.org"
    target="_blank"
    rel="noopener noreferrer"
@@ -32,7 +31,6 @@ const ResultsSummary = ({
 );

 ResultsSummary.propTypes = {
-  courseId: PropTypes.string.isRequired,
  rowId: PropTypes.number.isRequired,
  text: PropTypes.string.isRequired,
 };
--- a/src/components/BulkManagementHistoryView/ResultsSummary.test.jsx
+++ b/src/components/BulkManagementHistoryView/ResultsSummary.test.jsx
@@ -4,7 +4,7 @@ import { shallow } from 'enzyme';
 import { Icon } from '@edx/paragon';
 import { Download } from '@edx/paragon/icons';

-import * as api from 'data/constants/api';
+import lms from 'data/services/lms';
 import ResultsSummary from './ResultsSummary';

 jest.mock('@edx/paragon', () => ({
@@ -14,13 +14,14 @@ jest.mock('@edx/paragon', () => ({
 jest.mock('@edx/paragon/icons', () => ({
  Download: 'DownloadIcon',
 }));
-jest.mock('data/constants/api', () => ({
-  bulkGradesUrlByCourseAndRow: jest.fn((courseId, rowId) => ({ url: { courseId, rowId } })),
+jest.mock('data/services/lms', () => ({
+  urls: {
+    bulkGradesUrlByRow: jest.fn((rowId) => ({ url: { rowId } })),
+  },
 }));

 describe('ResultsSummary component', () => {
  const props = {
-    courseId: 'classy',
    rowId: 42,
    text: 'texty',
  };
@@ -41,7 +42,7 @@ describe('ResultsSummary component', () => {
    expect(el.props().rel).toEqual('noopener noreferrer');
  });
  test('Hyperlink has href to bulkGradesUrl', () => {
-    expect(el.props().href).toEqual(api.bulkGradesUrlByCourseAndRow(props.courseId, props.rowId));
+    expect(el.props().href).toEqual(lms.urls.bulkGradesUrlByRow(props.rowId));
  });
  test('displays Download Icon and text', () => {
    const icon = el.childAt(0);
--- a/src/components/BulkManagementHistoryView/snapshots/BulkManagementAlerts.test.jsx.snap
+++ b/src/components/BulkManagementHistoryView/snapshots/BulkManagementAlerts.test.jsx.snap
@@ -12,7 +12,11 @@ exports[`BulkManagementAlerts component no errer, no upload success snapshot - b
    show={false}
    variant="success"
  >
-    CSV processing. File uploads may take several minutes to complete.
+    <FormattedMessage
+      defaultMessage="CSV processing. File uploads may take several minutes to complete."
+      description="Success Dialog message in BulkManagement Tab File Upload Form"
+      id="gradebook.BulkManagementHistoryView.successDialog"
+    />
  </Alert>
 </Fragment>
 `;
@@ -31,7 +35,11 @@ exports[`BulkManagementAlerts component no errer, no upload success snapshot - d
    show={true}
    variant="success"
  >
-    CSV processing. File uploads may take several minutes to complete.
+    <FormattedMessage
+      defaultMessage="CSV processing. File uploads may take several minutes to complete."
+      description="Success Dialog message in BulkManagement Tab File Upload Form"
+      id="gradebook.BulkManagementHistoryView.successDialog"
+    />
  </Alert>
 </Fragment>
 `;
--- a/src/components/BulkManagementHistoryView/snapshots/HistoryTable.test.jsx.snap
+++ b/src/components/BulkManagementHistoryView/snapshots/HistoryTable.test.jsx.snap
@@ -0,0 +1,118 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`HistoryTable component snapshot history table data (from bulkManagementHistory.map(this.formatHistoryRow) snapshot: maps resultsSummay to ResultsSummary, wraps filename and user, forwards the rest 1`] = `
+Array [
+  Object {
+    "filename": <span
+      className="wrap-text-in-cell"
+    >
+      blue.png
+    </span>,
+    "resultsSummary": <ResultsSummary
+      courseId="Da Bu Dee"
+      rowId={12}
+      text="Da ba daa"
+    />,
+    "timeUploaded": "65",
+    "user": <span
+      className="wrap-text-in-cell"
+    >
+      Eifel
+    </span>,
+  },
+  Object {
+    "filename": <span
+      className="wrap-text-in-cell"
+    >
+      allStar.jpg
+    </span>,
+    "resultsSummary": <ResultsSummary
+      courseId="rockstar"
+      rowId={2}
+      text="all that glitters is gold"
+    />,
+    "timeUploaded": "2000s?",
+    "user": <span
+      className="wrap-text-in-cell"
+    >
+      Smashmouth
+    </span>,
+  },
+]
+`;
+
+exports[`HistoryTable component snapshot snapshot - loads formatted table 1`] = `
+<DataTable
+  className="table-striped"
+  columns={
+    Array [
+      Object {
+        "Header": "Gradebook",
+        "accessor": "filename",
+        "columnSortable": false,
+        "width": "col-5",
+      },
+      Object {
+        "Header": "Download Summary",
+        "accessor": "resultsSummary",
+        "columnSortable": false,
+        "width": "col",
+      },
+      Object {
+        "Header": "Who",
+        "accessor": "user",
+        "columnSortable": false,
+        "width": "col-1",
+      },
+      Object {
+        "Header": "When",
+        "accessor": "timeUploaded",
+        "columnSortable": false,
+        "width": "col",
+      },
+    ]
+  }
+  data={
+    Array [
+      Object {
+        "filename": <span
+          className="wrap-text-in-cell"
+        >
+          blue.png
+        </span>,
+        "resultsSummary": <ResultsSummary
+          courseId="Da Bu Dee"
+          rowId={12}
+          text="Da ba daa"
+        />,
+        "timeUploaded": "65",
+        "user": <span
+          className="wrap-text-in-cell"
+        >
+          Eifel
+        </span>,
+      },
+      Object {
+        "filename": <span
+          className="wrap-text-in-cell"
+        >
+          allStar.jpg
+        </span>,
+        "resultsSummary": <ResultsSummary
+          courseId="rockstar"
+          rowId={2}
+          text="all that glitters is gold"
+        />,
+        "timeUploaded": "2000s?",
+        "user": <span
+          className="wrap-text-in-cell"
+        >
+          Smashmouth
+        </span>,
+      },
+    ]
+  }
+  hasFixedColumnWidths={true}
+  itemCount={2}
+/>
+`;
--- a/src/components/BulkManagementHistoryView/snapshots/ResultsSummary.test.jsx.snap
+++ b/src/components/BulkManagementHistoryView/snapshots/ResultsSummary.test.jsx.snap
@@ -6,7 +6,6 @@ exports[`ResultsSummary component snapshot - safe hyperlink with bulkGradesUrl w
  href={
    Object {
      "url": Object {
-        "courseId": "classy",
        "rowId": 42,
      },
    }
--- a/src/components/BulkManagementHistoryView/snapshots/index.test.jsx.snap
+++ b/src/components/BulkManagementHistoryView/snapshots/index.test.jsx.snap
@@ -0,0 +1,26 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`BulkManagementHistoryView component snapshot snapshot - loads heading from messages.BulkManagementHistoryView.heading, <BulkManagementAlerts />, <HistoryTable /> 1`] = `
+<div
+  className="bulk-management-history-view"
+>
+  <h4>
+    <FormattedMessage
+      defaultMessage="Bulk Management History"
+      description="Heading text for BulkManagement History Tab"
+      id="gradebook.BulkManagementHistoryView.heading"
+    />
+  </h4>
+  <p
+    className="help-text"
+  >
+    <FormattedMessage
+      defaultMessage="Below is a log of previous grade imports.  To download a CSV of your gradebook and import grades for override, return to the Gradebook.  Please note, after importing grades, it may take a few seconds to process the override."
+      description="Bulk Management History View help text"
+      id="gradebook.BulkManagementHistoryView"
+    />
+  </p>
+  <BulkManagementAlerts />
+  <HistoryTable />
+</div>
+`;
--- a/src/components/BulkManagementHistoryView/index.jsx
+++ b/src/components/BulkManagementHistoryView/index.jsx
@@ -0,0 +1,24 @@
+/* eslint-disable react/button-has-type, import/no-named-as-default */
+import React from 'react';
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
+
+import messages from './messages';
+import BulkManagementAlerts from './BulkManagementAlerts';
+import HistoryTable from './HistoryTable';
+
+/**
+ * <BulkManagementHistoryView />
+ * top-level view for managing uploads of bulk management override csvs.
+ */
+export const BulkManagementHistoryView = () => (
+  <div className="bulk-management-history-view">
+    <h4><FormattedMessage {...messages.heading} /></h4>
+    <p className="help-text">
+      <FormattedMessage {...messages.helpText} />
+    </p>
+    <BulkManagementAlerts />
+    <HistoryTable />
+  </div>
+);
+
+export default BulkManagementHistoryView;
--- a/src/components/BulkManagementHistoryView/index.test.jsx
+++ b/src/components/BulkManagementHistoryView/index.test.jsx
@@ -1,28 +1,26 @@
 /* eslint-disable import/no-named-as-default */
 import React from 'react';
 import { shallow } from 'enzyme';
+import { FormattedMessage } from '@edx/frontend-platform/i18n';

-import { messages } from 'data/constants/app';
-import { BulkManagementTab } from '.';
+import { BulkManagementHistoryView } from '.';
 import BulkManagementAlerts from './BulkManagementAlerts';
-import FileUploadForm from './FileUploadForm';
 import HistoryTable from './HistoryTable';
+import messages from './messages';

 jest.mock('./BulkManagementAlerts', () => 'BulkManagementAlerts');
-jest.mock('./FileUploadForm', () => 'FileUploadForm');
 jest.mock('./HistoryTable', () => 'HistoryTable');

-describe('BulkManagementTab', () => {
+describe('BulkManagementHistoryView', () => {
  describe('component', () => {
    let el;
    beforeEach(() => {
-      el = shallow(<BulkManagementTab />);
+      el = shallow(<BulkManagementHistoryView />);
    });
    describe('snapshot', () => {
      const snapshotSegments = [
-        'heading from messages.BulkManagementTab.heading',
+        'heading from messages.BulkManagementHistoryView.heading',
        '<BulkManagementAlerts />',
-        '<FileUploadForm />',
        '<HistoryTable />',
      ];
      test(`snapshot - loads ${snapshotSegments.join(', ')}`, () => {
@@ -30,12 +28,15 @@ describe('BulkManagementTab', () => {
      });
      test('heading - h4 loaded from messages', () => {
        const heading = el.find('h4');
-        expect(heading.text()).toEqual(messages.BulkManagementTab.heading);
+        expect(heading.getElement()).toEqual((
+          <h4>
+            <FormattedMessage {...messages.heading} />
+          </h4>
+        ));
      });
      test('heading, then alerts, then upload form, then table', () => {
        expect(el.childAt(0).is('h4')).toEqual(true);
-        expect(el.childAt(1).is(BulkManagementAlerts)).toEqual(true);
-        expect(el.childAt(2).is(FileUploadForm)).toEqual(true);
+        expect(el.childAt(2).is(BulkManagementAlerts)).toEqual(true);
        expect(el.childAt(3).is(HistoryTable)).toEqual(true);
      });
    });
--- a/src/components/BulkManagementHistoryView/messages.js
+++ b/src/components/BulkManagementHistoryView/messages.js
@@ -0,0 +1,21 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  heading: {
+    id: 'gradebook.BulkManagementHistoryView.heading',
+    defaultMessage: 'Bulk Management History',
+    description: 'Heading text for BulkManagement History Tab',
+  },
+  helpText: {
+    id: 'gradebook.BulkManagementHistoryView',
+    defaultMessage: 'Below is a log of previous grade imports.  To download a CSV of your gradebook and import grades for override, return to the Gradebook.  Please note, after importing grades, it may take a few seconds to process the override.',
+    description: 'Bulk Management History View help text',
+  },
+  successDialog: {
+    id: 'gradebook.BulkManagementHistoryView.successDialog',
+    defaultMessage: 'CSV processing. File uploads may take several minutes to complete.',
+    description: 'Success Dialog message in BulkManagement Tab File Upload Form',
+  },
+});
+
+export default messages;
--- a/src/components/BulkManagementTab/snapshots/FileUploadForm.test.jsx.snap
+++ b/src/components/BulkManagementTab/snapshots/FileUploadForm.test.jsx.snap
@@ -1,35 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`FileUploadForm component snapshot snapshot - loads export form w/ alerts and file input, import btn 1`] = `
-<React.Fragment>
-  <Form
-    action="fakeUrl"
-    inline={false}
-    method="post"
-  >
-    <FormGroup
-      as="div"
-      controlId="csv"
-      isInvalid={false}
-      isValid={false}
-    >
-      <ForwardRef
-        as="input"
-        className="d-none"
-        label="Upload Grade CSV"
-        onChange={[MockFunction this.handleFileInputChange]}
-        plaintext={false}
-        type="file"
-      />
-    </FormGroup>
-  </Form>
-  <ForwardRef
-    active={false}
-    disabled={false}
-    onClick={[MockFunction this.handleClickImportGrades]}
-    variant="primary"
-  >
-    Import Grades
-  </ForwardRef>
-</React.Fragment>
-`;
--- a/src/components/BulkManagementTab/snapshots/HistoryTable.test.jsx.snap
+++ b/src/components/BulkManagementTab/snapshots/HistoryTable.test.jsx.snap
@@ -1,124 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`HistoryTable component snapshot history table data (from bulkManagementHistory.map(this.formatHistoryRow) snapshot: maps resultsSummay to ResultsSummary, wraps filename and user, forwards the rest 1`] = `
-Array [
-  Object {
-    "filename": <span
-      className="wrap-text-in-cell"
-    >
-      blue.png
-    </span>,
-    "resultsSummary": <ResultsSummary
-      courseId="Da Bu Dee"
-      rowId={12}
-      text="Da ba daa"
-    />,
-    "timeUploaded": "65",
-    "user": <span
-      className="wrap-text-in-cell"
-    >
-      Eifel
-    </span>,
-  },
-  Object {
-    "filename": <span
-      className="wrap-text-in-cell"
-    >
-      allStar.jpg
-    </span>,
-    "resultsSummary": <ResultsSummary
-      courseId="rockstar"
-      rowId={2}
-      text="all that glitters is gold"
-    />,
-    "timeUploaded": "2000s?",
-    "user": <span
-      className="wrap-text-in-cell"
-    >
-      Smashmouth
-    </span>,
-  },
-]
-`;
-
-exports[`HistoryTable component snapshot snapshot - loads hints display, formatted table 1`] = `
-<Fragment>
-  <p>
-    Results appear in the table below.
-    <br />
-    Grade processing may take a few seconds.
-  </p>
-  <Table
-    className="table-striped"
-    columns={
-      Array [
-        Object {
-          "columnSortable": false,
-          "key": "filename",
-          "label": "Gradebook",
-          "width": "col-5",
-        },
-        Object {
-          "columnSortable": false,
-          "key": "resultsSummary",
-          "label": "Download Summary",
-          "width": "col",
-        },
-        Object {
-          "columnSortable": false,
-          "key": "user",
-          "label": "Who",
-          "width": "col-1",
-        },
-        Object {
-          "columnSortable": false,
-          "key": "timeUploaded",
-          "label": "When",
-          "width": "col",
-        },
-      ]
-    }
-    data={
-      Array [
-        Object {
-          "filename": <span
-            className="wrap-text-in-cell"
-          >
-            blue.png
-          </span>,
-          "resultsSummary": <ResultsSummary
-            courseId="Da Bu Dee"
-            rowId={12}
-            text="Da ba daa"
-          />,
-          "timeUploaded": "65",
-          "user": <span
-            className="wrap-text-in-cell"
-          >
-            Eifel
-          </span>,
-        },
-        Object {
-          "filename": <span
-            className="wrap-text-in-cell"
-          >
-            allStar.jpg
-          </span>,
-          "resultsSummary": <ResultsSummary
-            courseId="rockstar"
-            rowId={2}
-            text="all that glitters is gold"
-          />,
-          "timeUploaded": "2000s?",
-          "user": <span
-            className="wrap-text-in-cell"
-          >
-            Smashmouth
-          </span>,
-        },
-      ]
-    }
-    hasFixedColumnWidths={true}
-  />
-</Fragment>
-`;
--- a/src/components/BulkManagementTab/snapshots/test.jsx.snap
+++ b/src/components/BulkManagementTab/snapshots/test.jsx.snap
@@ -1,12 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`BulkManagementTab component snapshot snapshot - loads heading from messages.BulkManagementTab.heading, <BulkManagementAlerts />, <FileUploadForm />, <HistoryTable /> 1`] = `
-<div>
-  <h4>
-    Use this feature by downloading a CSV for bulk management, overriding grades locally, and coming back here to upload.
-  </h4>
-  <BulkManagementAlerts />
-  <FileUploadForm />
-  <HistoryTable />
-</div>
-`;
--- a/src/components/BulkManagementTab/index.jsx
+++ b/src/components/BulkManagementTab/index.jsx
@@ -1,22 +0,0 @@
-/* eslint-disable react/button-has-type, import/no-named-as-default */
-import React from 'react';
-
-import { messages } from 'data/constants/app';
-import BulkManagementAlerts from './BulkManagementAlerts';
-import FileUploadForm from './FileUploadForm';
-import HistoryTable from './HistoryTable';
-
-/**
- * <BulkManagementTab />
- * top-level view for managing uploads of bulk management override csvs.
- */
-export const BulkManagementTab = () => (
-  <div>
-    <h4>{messages.BulkManagementTab.heading}</h4>
-    <BulkManagementAlerts />
-    <FileUploadForm />
-    <HistoryTable />
-  </div>
-);
-
-export default BulkManagementTab;
--- a/src/components/GradebookFilters/AssignmentFilter/snapshots/test.jsx.snap
+++ b/src/components/GradebookFilters/AssignmentFilter/snapshots/test.jsx.snap
@@ -7,7 +7,13 @@ exports[`AssignmentFilter Component snapshots basic snapshot 1`] = `
  <SelectGroup
    disabled={false}
    id="assignment"
-    label="Assignment"
+    label={
+      <FormattedMessage
+        defaultMessage="Assignment"
+        description="Assignment filter select label in Gradebook Filters"
+        id="gradebook.GradebookFilters.assignmentFilterLabel"
+      />
+    }
    onChange={[MockFunction handleChange]}
    options={
      Array [
--- a/src/components/GradebookFilters/AssignmentFilter/index.jsx
+++ b/src/components/GradebookFilters/AssignmentFilter/index.jsx
@@ -3,10 +3,13 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';

+import { FormattedMessage } from '@edx/frontend-platform/i18n';
+
 import selectors from 'data/selectors';
 import actions from 'data/actions';
 import thunkActions from 'data/thunkActions';

+import messages from '../messages';
 import SelectGroup from '../SelectGroup';

 const { fetchGradesIfAssignmentGradeFiltersSet } = thunkActions.grades;
@@ -46,7 +49,7 @@ export class AssignmentFilter extends React.Component {
      <div className="student-filters">
        <SelectGroup
          id="assignment"
-          label="Assignment"
+          label={<FormattedMessage {...messages.assignment} />}
          value={this.props.selectedAssignment}
          onChange={this.handleChange}
          disabled={this.props.assignmentFilterOptions.length === 0}
@@ -64,7 +67,6 @@ AssignmentFilter.defaultProps = {

 AssignmentFilter.propTypes = {
  updateQueryParams: PropTypes.func.isRequired,
-
  // redux
  assignmentFilterOptions: PropTypes.arrayOf(PropTypes.shape({
    label: PropTypes.string,
--- a/src/components/GradebookFilters/AssignmentFilter/test.jsx
+++ b/src/components/GradebookFilters/AssignmentFilter/test.jsx
@@ -69,7 +69,6 @@ describe('AssignmentFilter', () => {
          el = mount(<AssignmentFilter {...props} />);
          el.instance().handleChange(event);
        });
-
        it('calls props.updateAssignmentFilter with selection', () => {
          expect(props.updateAssignmentFilter).toHaveBeenCalledWith({
            label: newAssgn,
@@ -87,6 +86,30 @@ describe('AssignmentFilter', () => {
          const method = props.fetchGradesIfAssignmentGradeFiltersSet;
          expect(method).toHaveBeenCalledWith();
        });
+        describe('no selected option', () => {
+          const value = 'fake';
+          beforeEach(() => {
+            el = mount(<AssignmentFilter {...props} />);
+            el.instance().handleChange({ target: { value } });
+          });
+          it('calls props.updateAssignmentFilter with selection', () => {
+            expect(props.updateAssignmentFilter).toHaveBeenCalledWith({
+              label: value,
+              type: undefined,
+              id: undefined,
+            });
+          });
+          it('calls props.updateQueryParams with selected assignment id',
+            () => {
+              expect(props.updateQueryParams).toHaveBeenCalledWith({
+                assignment: undefined,
+              });
+            });
+          it('calls props.fetchGradesIfAssignmentGradeFiltersSet', () => {
+            const method = props.fetchGradesIfAssignmentGradeFiltersSet;
+            expect(method).toHaveBeenCalledWith();
+          });
+        });
      });
    });
    describe('snapshots', () => {
--- a/src/components/GradebookFilters/AssignmentGradeFilter/snapshots/test.jsx.snap
+++ b/src/components/GradebookFilters/AssignmentGradeFilter/snapshots/test.jsx.snap
@@ -7,14 +7,26 @@ exports[`AssignmentGradeFilter Component snapshots buttons and groups disabled i
  <PercentGroup
    disabled={true}
    id="assignmentGradeMin"
-    label="Min Grade"
+    label={
+      <FormattedMessage
+        defaultMessage="Min Grade"
+        description="Min-grade filter select label in Gradebook Filters"
+        id="gradebook.GradebookFilters.minGradeFilterLabel"
+      />
+    }
    onChange={[MockFunction handleSetMin]}
    value="2"
  />
  <PercentGroup
    disabled={true}
    id="assignmentGradeMax"
-    label="Max Grade"
+    label={
+      <FormattedMessage
+        defaultMessage="Max Grade"
+        description="Max-grade filter select label in Gradebook Filters"
+        id="gradebook.GradebookFilters.maxGradeFilterLabel"
+      />
+    }
    onChange={[MockFunction handleSetMax]}
    value="98"
  />
@@ -42,14 +54,26 @@ exports[`AssignmentGradeFilter Component snapshots smoke test 1`] = `
  <PercentGroup
    disabled={false}
    id="assignmentGradeMin"
-    label="Min Grade"
+    label={
+      <FormattedMessage
+        defaultMessage="Min Grade"
+        description="Min-grade filter select label in Gradebook Filters"
+        id="gradebook.GradebookFilters.minGradeFilterLabel"
+      />
+    }
    onChange={[MockFunction handleSetMin]}
    value="2"
  />
  <PercentGroup
    disabled={false}
    id="assignmentGradeMax"
-    label="Max Grade"
+    label={
+      <FormattedMessage
+        defaultMessage="Max Grade"
+        description="Max-grade filter select label in Gradebook Filters"
+        id="gradebook.GradebookFilters.maxGradeFilterLabel"
+      />
+    }
    onChange={[MockFunction handleSetMax]}
    value="98"
  />
--- a/src/components/GradebookFilters/AssignmentGradeFilter/index.jsx
+++ b/src/components/GradebookFilters/AssignmentGradeFilter/index.jsx
@@ -3,12 +3,14 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';

+import { FormattedMessage } from '@edx/frontend-platform/i18n';
 import { Button } from '@edx/paragon';

 import selectors from 'data/selectors';
 import actions from 'data/actions';
 import thunkActions from 'data/thunkActions';

+import messages from '../messages';
 import PercentGroup from '../PercentGroup';

 export class AssignmentGradeFilter extends React.Component {
@@ -34,19 +36,21 @@ export class AssignmentGradeFilter extends React.Component {
  }

  render() {
-    const { assignmentGradeMin, assignmentGradeMax } = this.props.localAssignmentLimits;
+    const {
+      localAssignmentLimits: { assignmentGradeMax, assignmentGradeMin },
+    } = this.props;
    return (
      <div className="grade-filter-inputs">
        <PercentGroup
          id="assignmentGradeMin"
-          label="Min Grade"
+          label={<FormattedMessage {...messages.minGrade} />}
          value={assignmentGradeMin}
          disabled={!this.props.selectedAssignment}
          onChange={this.handleSetMin}
        />
        <PercentGroup
          id="assignmentGradeMax"
-          label="Max Grade"
+          label={<FormattedMessage {...messages.maxGrade} />}
          value={assignmentGradeMax}
          disabled={!this.props.selectedAssignment}
          onChange={this.handleSetMax}
--- a/src/components/GradebookFilters/AssignmentTypeFilter/snapshots/test.jsx.snap
+++ b/src/components/GradebookFilters/AssignmentTypeFilter/snapshots/test.jsx.snap
@@ -7,7 +7,13 @@ exports[`AssignmentTypeFilter Component snapshots SelectGroup disabled if no ass
  <SelectGroup
    disabled={true}
    id="assignment-types"
-    label="Assignment Types"
+    label={
+      <FormattedMessage
+        defaultMessage="Assignment Types"
+        description="Assignment Types filter select label in Gradebook Filters"
+        id="gradebook.GradebookFilters.assignmentTypesLabel"
+      />
+    }
    onChange={[MockFunction handleChange]}
    options={
      Array [
@@ -40,7 +46,13 @@ exports[`AssignmentTypeFilter Component snapshots smoke test 1`] = `
  <SelectGroup
    disabled={false}
    id="assignment-types"
-    label="Assignment Types"
+    label={
+      <FormattedMessage
+        defaultMessage="Assignment Types"
+        description="Assignment Types filter select label in Gradebook Filters"
+        id="gradebook.GradebookFilters.assignmentTypesLabel"
+      />
+    }
    onChange={[MockFunction handleChange]}
    options={
      Array [
--- a/src/components/GradebookFilters/AssignmentTypeFilter/index.jsx
+++ b/src/components/GradebookFilters/AssignmentTypeFilter/index.jsx
@@ -3,9 +3,13 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';

+import { FormattedMessage } from '@edx/frontend-platform/i18n';
+
 import selectors from 'data/selectors';
 import actions from 'data/actions';
+
 import SelectGroup from '../SelectGroup';
+import messages from '../messages';

 export class AssignmentTypeFilter extends React.Component {
  constructor(props) {
@@ -34,7 +38,7 @@ export class AssignmentTypeFilter extends React.Component {
      <div className="student-filters">
        <SelectGroup
          id="assignment-types"
-          label="Assignment Types"
+          label={<FormattedMessage {...messages.assignmentTypes} />}
          value={this.props.selectedAssignmentType}
          onChange={this.handleChange}
          disabled={this.props.assignmentFilterOptions.length === 0}
--- a/src/components/GradebookFilters/CourseGradeFilter/snapshots/test.jsx.snap
+++ b/src/components/GradebookFilters/CourseGradeFilter/snapshots/test.jsx.snap
@@ -7,13 +7,25 @@ exports[`CourseGradeFilter Component snapshots basic snapshot 1`] = `
  >
    <PercentGroup
      id="minimum-grade"
-      label="Min Grade"
+      label={
+        <FormattedMessage
+          defaultMessage="Min Grade"
+          description="Min-grade filter select label in Gradebook Filters"
+          id="gradebook.GradebookFilters.minGradeFilterLabel"
+        />
+      }
      onChange={[MockFunction handleUpdateMin]}
      value="5"
    />
    <PercentGroup
      id="maximum-grade"
-      label="Max Grade"
+      label={
+        <FormattedMessage
+          defaultMessage="Max Grade"
+          description="Max-grade filter select label in Gradebook Filters"
+          id="gradebook.GradebookFilters.maxGradeFilterLabel"
+        />
+      }
      onChange={[MockFunction handleUpdateMax]}
      value="92"
    />
--- a/src/components/GradebookFilters/CourseGradeFilter/index.jsx
+++ b/src/components/GradebookFilters/CourseGradeFilter/index.jsx
@@ -2,13 +2,15 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
-import {
-  Button,
-} from '@edx/paragon';
+
+import { Button } from '@edx/paragon';
+import { FormattedMessage } from '@edx/frontend-platform/i18n';

 import selectors from 'data/selectors';
 import actions from 'data/actions';
 import thunkActions from 'data/thunkActions';
+
+import messages from '../messages';
 import PercentGroup from '../PercentGroup';

 export class CourseGradeFilter extends React.Component {
@@ -41,19 +43,21 @@ export class CourseGradeFilter extends React.Component {
  }

  render() {
-    const { courseGradeMin, courseGradeMax } = this.props.localCourseLimits;
+    const {
+      localCourseLimits: { courseGradeMin, courseGradeMax },
+    } = this.props;
    return (
      <>
        <div className="grade-filter-inputs">
          <PercentGroup
            id="minimum-grade"
-            label="Min Grade"
+            label={<FormattedMessage {...messages.minGrade} />}
            value={courseGradeMin}
            onChange={this.handleUpdateMin}
          />
          <PercentGroup
            id="maximum-grade"
-            label="Max Grade"
+            label={<FormattedMessage {...messages.maxGrade} />}
            value={courseGradeMax}
            onChange={this.handleUpdateMax}
          />
--- a/src/components/GradebookFilters/PercentGroup.jsx
+++ b/src/components/GradebookFilters/PercentGroup.jsx
@@ -30,7 +30,7 @@ PercentGroup.defaultProps = {
 };
 PercentGroup.propTypes = {
  id: PropTypes.string.isRequired,
-  label: PropTypes.string.isRequired,
+  label: PropTypes.node.isRequired,
  value: PropTypes.string.isRequired,
  onChange: PropTypes.func.isRequired,
  disabled: PropTypes.bool,
--- a/src/components/GradebookFilters/SelectGroup.jsx
+++ b/src/components/GradebookFilters/SelectGroup.jsx
@@ -23,7 +23,7 @@ const SelectGroup = ({
 );
 SelectGroup.propTypes = {
  id: PropTypes.string.isRequired,
-  label: PropTypes.string.isRequired,
+  label: PropTypes.node.isRequired,
  value: PropTypes.string.isRequired,
  onChange: PropTypes.func.isRequired,
  disabled: PropTypes.bool,
--- a/src/components/GradebookFilters/StudentGroupsFilter/index.jsx
+++ b/src/components/GradebookFilters/StudentGroupsFilter/index.jsx
@@ -3,10 +3,13 @@ import React from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';

+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+
 import actions from 'data/actions';
 import selectors from 'data/selectors';
 import thunkActions from 'data/thunkActions';

+import messages from '../messages';
 import SelectGroup from '../SelectGroup';

 export const optionFactory = ({ data, defaultOption, key }) => [
@@ -28,7 +31,7 @@ export class StudentGroupsFilter extends React.Component {
  mapCohortsEntries() {
    return optionFactory({
      data: this.props.cohorts,
-      defaultOption: 'Cohort-All',
+      defaultOption: this.translate(messages.cohortAll),
      key: 'id',
    });
  }
@@ -36,7 +39,7 @@ export class StudentGroupsFilter extends React.Component {
  mapTracksEntries() {
    return optionFactory({
      data: this.props.tracks,
-      defaultOption: 'Track-All',
+      defaultOption: this.translate(messages.trackAll),
      key: 'slug',
    });
  }
@@ -65,19 +68,23 @@ export class StudentGroupsFilter extends React.Component {
    this.props.fetchGrades();
  }

+  translate(message) {
+    return this.props.intl.formatMessage(message);
+  }
+
  render() {
    return (
      <>
        <SelectGroup
          id="Tracks"
-          label="Tracks"
+          label={this.translate(messages.tracks)}
          value={this.props.selectedTrackEntry.name}
          onChange={this.updateTracks}
          options={this.mapTracksEntries()}
        />
        <SelectGroup
          id="Cohorts"
-          label="Cohorts"
+          label={this.translate(messages.cohorts)}
          value={this.props.selectedCohortEntry.name}
          disabled={this.props.cohorts.length === 0}
          onChange={this.updateCohorts}
@@ -100,6 +107,9 @@ StudentGroupsFilter.defaultProps = {
 StudentGroupsFilter.propTypes = {
  updateQueryParams: PropTypes.func.isRequired,

+  // injected
+  intl: intlShape.isRequired,
+
  // redux
  cohorts: PropTypes.arrayOf(PropTypes.shape({
    name: PropTypes.string,
@@ -139,4 +149,4 @@ export const mapDispatchToProps = {
  updateTrack: actions.filters.update.track,
 };

-export default connect(mapStateToProps, mapDispatchToProps)(StudentGroupsFilter);
+export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(StudentGroupsFilter));
--- a/src/components/GradebookFilters/StudentGroupsFilter/test.jsx
+++ b/src/components/GradebookFilters/StudentGroupsFilter/test.jsx
@@ -63,6 +63,7 @@ describe('StudentGroupsFilter', () => {
    beforeEach(() => {
      props = {
        ...props,
+        intl: { formatMessage: (msg) => msg.defaultMessage },
        cohortsByName: {
          [props.cohorts[0].name]: props.cohorts[0],
          [props.cohorts[1].name]: props.cohorts[1],
--- a/src/components/GradebookFilters/snapshots/test.jsx.snap
+++ b/src/components/GradebookFilters/snapshots/test.jsx.snap
@@ -22,48 +22,76 @@ exports[`GradebookFilters Component snapshots basic snapshot 1`] = `
  <Collapsible
    className="filter-group mb-3"
    defaultOpen={true}
-    title="Assignments"
+    title={
+      <FormattedMessage
+        defaultMessage="Assignments"
+        description="Assignment filter group label in Gradebook Filters"
+        id="gradebook.GradebookFilters.assignmentsFilterLabel"
+      />
+    }
  >
    <div>
-      <Connect(AssignmentTypeFilter)
-        updateQueryParams={[MockFunction]}
+      <AssignmentTypeFilter
+        updateQueryParams={[MockFunction this.props.updateQueryParams]}
      />
-      <Connect(AssignmentFilter)
-        updateQueryParams={[MockFunction]}
+      <AssignmentFilter
+        updateQueryParams={[MockFunction this.props.updateQueryParams]}
      />
-      <Connect(AssignmentGradeFilter)
-        updateQueryParams={[MockFunction]}
+      <AssignmentGradeFilter
+        updateQueryParams={[MockFunction this.props.updateQueryParams]}
      />
    </div>
  </Collapsible>
  <Collapsible
    className="filter-group mb-3"
    defaultOpen={true}
-    title="Overall Grade"
+    title={
+      <FormattedMessage
+        defaultMessage="Overall Grade"
+        description="Overall Grade filter group label in Gradebook Filters"
+        id="gradebook.GradebookFilters.overallGradeFilterLabel"
+      />
+    }
  >
-    <Connect(CourseGradeFilter)
-      updateQueryParams={[MockFunction]}
+    <CourseGradeFilter
+      updateQueryParams={[MockFunction this.props.updateQueryParams]}
    />
  </Collapsible>
  <Collapsible
    className="filter-group mb-3"
    defaultOpen={true}
-    title="Student Groups"
+    title={
+      <FormattedMessage
+        defaultMessage="Student Groups"
+        description="Student Groups filter group label in Gradebook Filters"
+        id="gradebook.GradebookFilters.studentGroupsFilterLabel"
+      />
+    }
  >
-    <Connect(StudentGroupsFilter)
-      updateQueryParams={[MockFunction]}
+    <StudentGroupsFilter
+      updateQueryParams={[MockFunction this.props.updateQueryParams]}
    />
  </Collapsible>
  <Collapsible
    className="filter-group mb-3"
    defaultOpen={true}
-    title="Include Course Team Members"
+    title={
+      <FormattedMessage
+        defaultMessage="Include Course Team Members"
+        description="Include Course Team Members filter label in Gradebook Filters"
+        id="gradebook.GradebookFilters.includeCourseTeamMembersFilterLabel"
+      />
+    }
  >
    <Checkbox
      checked={true}
      onChange={[MockFunction handleIncludeTeamMembersChange]}
    >
-      Include Course Team Members
+      <FormattedMessage
+        defaultMessage="Include Course Team Members"
+        description="Include Course Team Members filter label in Gradebook Filters"
+        id="gradebook.GradebookFilters.includeCourseTeamMembersFilterLabel"
+      />
    </Checkbox>
  </Collapsible>
 </React.Fragment>
--- a/src/components/GradebookFilters/index.jsx
+++ b/src/components/GradebookFilters/index.jsx
@@ -10,11 +10,13 @@ import {
  Form,
 } from '@edx/paragon';
 import { Close } from '@edx/paragon/icons';
+import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';

 import actions from 'data/actions';
 import selectors from 'data/selectors';
 import thunkActions from 'data/thunkActions';

+import messages from './messages';
 import AssignmentTypeFilter from './AssignmentTypeFilter';
 import AssignmentFilter from './AssignmentFilter';
 import AssignmentGradeFilter from './AssignmentGradeFilter';
@@ -39,13 +41,18 @@ export class GradebookFilters extends React.Component {
  }

  collapsibleGroup = (title, content) => (
-    <Collapsible title={title} defaultOpen className="filter-group mb-3">
+    <Collapsible
+      title={<FormattedMessage {...title} />}
+      defaultOpen
+      className="filter-group mb-3"
+    >
      {content}
    </Collapsible>
  );

  render() {
    const {
+      intl,
      updateQueryParams,
    } = this.props;
    return (
@@ -57,12 +64,12 @@ export class GradebookFilters extends React.Component {
            onClick={this.props.closeMenu}
            iconAs={Icon}
            src={Close}
-            alt="Close Filters"
-            aria-label="Close Filters"
+            alt={intl.formatMessage(messages.closeFilters)}
+            aria-label={intl.formatMessage(messages.closeFilters)}
          />
        </div>

-        {this.collapsibleGroup('Assignments', (
+        {this.collapsibleGroup(messages.assignments, (
          <div>
            <AssignmentTypeFilter updateQueryParams={updateQueryParams} />
            <AssignmentFilter updateQueryParams={updateQueryParams} />
@@ -70,20 +77,20 @@ export class GradebookFilters extends React.Component {
          </div>
        ))}

-        {this.collapsibleGroup('Overall Grade', (
+        {this.collapsibleGroup(messages.overallGrade, (
          <CourseGradeFilter updateQueryParams={updateQueryParams} />
        ))}

-        {this.collapsibleGroup('Student Groups', (
+        {this.collapsibleGroup(messages.studentGroups, (
          <StudentGroupsFilter updateQueryParams={updateQueryParams} />
        ))}

-        {this.collapsibleGroup('Include Course Team Members', (
+        {this.collapsibleGroup(messages.includeCourseTeamMembers, (
          <Form.Checkbox
            checked={this.state.includeCourseRoleMembers}
            onChange={this.handleIncludeTeamMembersChange}
          >
-            Include Course Team Members
+            <FormattedMessage {...messages.includeCourseTeamMembers} />
          </Form.Checkbox>
        ))}
      </>
@@ -95,6 +102,8 @@ GradebookFilters.defaultProps = {
 };
 GradebookFilters.propTypes = {
  updateQueryParams: PropTypes.func.isRequired,
+  // injected
+  intl: intlShape.isRequired,
  // redux
  closeMenu: PropTypes.func.isRequired,
  fetchGrades: PropTypes.func.isRequired,
@@ -112,4 +121,4 @@ export const mapDispatchToProps = {
  updateIncludeCourseRoleMembers: actions.filters.update.includeCourseRoleMembers,
 };

-export default connect(mapStateToProps, mapDispatchToProps)(GradebookFilters);
+export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(GradebookFilters));
--- a/src/components/GradebookFilters/messages.js
+++ b/src/components/GradebookFilters/messages.js
@@ -0,0 +1,71 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  assignments: {
+    id: 'gradebook.GradebookFilters.assignmentsFilterLabel',
+    defaultMessage: 'Assignments',
+    description: 'Assignment filter group label in Gradebook Filters',
+  },
+  overallGrade: {
+    id: 'gradebook.GradebookFilters.overallGradeFilterLabel',
+    defaultMessage: 'Overall Grade',
+    description: 'Overall Grade filter group label in Gradebook Filters',
+  },
+  studentGroups: {
+    id: 'gradebook.GradebookFilters.studentGroupsFilterLabel',
+    defaultMessage: 'Student Groups',
+    description: 'Student Groups filter group label in Gradebook Filters',
+  },
+  includeCourseTeamMembers: {
+    id: 'gradebook.GradebookFilters.includeCourseTeamMembersFilterLabel',
+    defaultMessage: 'Include Course Team Members',
+    description: 'Include Course Team Members filter label in Gradebook Filters',
+  },
+  assignment: {
+    id: 'gradebook.GradebookFilters.assignmentFilterLabel',
+    defaultMessage: 'Assignment',
+    description: 'Assignment filter select label in Gradebook Filters',
+  },
+  assignmentTypes: {
+    id: 'gradebook.GradebookFilters.assignmentTypesLabel',
+    defaultMessage: 'Assignment Types',
+    description: 'Assignment Types filter select label in Gradebook Filters',
+  },
+  maxGrade: {
+    id: 'gradebook.GradebookFilters.maxGradeFilterLabel',
+    defaultMessage: 'Max Grade',
+    description: 'Max-grade filter select label in Gradebook Filters',
+  },
+  minGrade: {
+    id: 'gradebook.GradebookFilters.minGradeFilterLabel',
+    defaultMessage: 'Min Grade',
+    description: 'Min-grade filter select label in Gradebook Filters',
+  },
+  cohorts: {
+    id: 'gradebook.GradebookFilters.cohorts',
+    defaultMessage: 'Cohorts',
+    description: 'Cohorts filter select label in Gradebook Filters',
+  },
+  cohortAll: {
+    id: 'gradebook.GradebookFilters.cohortsAll',
+    defaultMessage: 'Cohort-All',
+    description: 'Cohorts filter select default in Gradebook Filters',
+  },
+  tracks: {
+    id: 'gradebook.GradebookFilters.tracks',
+    defaultMessage: 'Tracks',
+    description: 'Tracks filter select label in Gradebook Filters',
+  },
+  trackAll: {
+    id: 'gradebook.GradebookFilters.trackAll',
+    defaultMessage: 'Track-All',
+    description: 'Tracks filter select default in Gradebook Filters',
+  },
+  closeFilters: {
+    id: 'gradebook.GradebookFilters.closeFilters',
+    defaultMessage: 'Close Filters',
+    description: 'Button label for Close button in Gradebook Filters',
+  },
+});
+
+export default messages;
--- a/src/components/GradebookFilters/test.jsx
+++ b/src/components/GradebookFilters/test.jsx
@@ -22,6 +22,11 @@ jest.mock('@edx/paragon', () => ({
 jest.mock('@edx/paragon/icons', () => ({
  Close: 'paragon.icons.Close',
 }));
+jest.mock('./AssignmentTypeFilter', () => 'AssignmentTypeFilter');
+jest.mock('./AssignmentFilter', () => 'AssignmentFilter');
+jest.mock('./AssignmentGradeFilter', () => 'AssignmentGradeFilter');
+jest.mock('./CourseGradeFilter', () => 'CourseGradeFilter');
+jest.mock('./StudentGroupsFilter', () => 'StudentGroupsFilter');
 jest.mock('data/selectors', () => ({
  __esModule: true,
  default: {
@@ -46,10 +51,11 @@ describe('GradebookFilters', () => {
  beforeEach(() => {
    props = {
      ...props,
+      intl: { formatMessage: (msg) => msg.defaultMessage },
      closeMenu: jest.fn().mockName('this.props.closeMenu'),
      fetchGrades: jest.fn(),
      updateIncludeCourseRoleMembers: jest.fn(),
-      updateQueryParams: jest.fn(),
+      updateQueryParams: jest.fn().mockName('this.props.updateQueryParams'),
    };
  });

--- a/src/components/GradebookHeader/snapshots/test.jsx.snap
+++ b/src/components/GradebookHeader/snapshots/test.jsx.snap
@@ -13,20 +13,35 @@ exports[`GradebookHeader component snapshots default values (grades frozen, cann
    >
      &lt;&lt; 
    </span>
-     Back to Dashboard
+    <FormattedMessage
+      defaultMessage="Back to Dashboard"
+      description="Button text to take user back to LMS dashboard in Gradebook Header"
+      id="gradebook.GradebookHeader.backButton"
+    />
  </a>
  <h1>
-    Gradebook
+    <FormattedMessage
+      defaultMessage="Gradebook"
+      description="Top-level app title in Gradebook Header component"
+      id="gradebook.GradebookHeader.appLabel"
+    />
  </h1>
-  <h3>
-     
-    fakeID
-  </h3>
+  <div
+    className="subtitle-row d-flex justify-content-between align-items-center"
+  >
+    <h3>
+      fakeID
+    </h3>
+  </div>
  <div
    className="alert alert-warning"
    role="alert"
  >
-    You are not authorized to view the gradebook for this course.
+    <FormattedMessage
+      defaultMessage="You are not authorized to view the gradebook for this course."
+      description="Warning message in Gradebook Header when user is not allowed to view the app"
+      id="gradebook.GradebookHeader.unauthorizedWarning"
+    />
  </div>
 </div>
 `;
@@ -44,20 +59,35 @@ exports[`GradebookHeader component snapshots grades frozen, can view. grades fro
    >
      &lt;&lt; 
    </span>
-     Back to Dashboard
+    <FormattedMessage
+      defaultMessage="Back to Dashboard"
+      description="Button text to take user back to LMS dashboard in Gradebook Header"
+      id="gradebook.GradebookHeader.backButton"
+    />
  </a>
  <h1>
-    Gradebook
+    <FormattedMessage
+      defaultMessage="Gradebook"
+      description="Top-level app title in Gradebook Header component"
+      id="gradebook.GradebookHeader.appLabel"
+    />
  </h1>
-  <h3>
-     
-    fakeID
-  </h3>
+  <div
+    className="subtitle-row d-flex justify-content-between align-items-center"
+  >
+    <h3>
+      fakeID
+    </h3>
+  </div>
  <div
    className="alert alert-warning"
    role="alert"
  >
-    The grades for this course are now frozen. Editing of grades is no longer allowed.
+    <FormattedMessage
+      defaultMessage="The grades for this course are now frozen. Editing of grades is no longer allowed."
+      description="Warning message in Gradebook Header for frozen messages"
+      id="gradebook.GradebookHeader.frozenWarning"
+    />
  </div>
 </div>
 `;
@@ -75,26 +105,157 @@ exports[`GradebookHeader component snapshots grades frozen, cannot view unauthor
    >
      &lt;&lt; 
    </span>
-     Back to Dashboard
+    <FormattedMessage
+      defaultMessage="Back to Dashboard"
+      description="Button text to take user back to LMS dashboard in Gradebook Header"
+      id="gradebook.GradebookHeader.backButton"
+    />
  </a>
  <h1>
-    Gradebook
+    <FormattedMessage
+      defaultMessage="Gradebook"
+      description="Top-level app title in Gradebook Header component"
+      id="gradebook.GradebookHeader.appLabel"
+    />
  </h1>
-  <h3>
-     
-    fakeID
-  </h3>
  <div
-    className="alert alert-warning"
-    role="alert"
+    className="subtitle-row d-flex justify-content-between align-items-center"
  >
-    The grades for this course are now frozen. Editing of grades is no longer allowed.
+    <h3>
+      fakeID
+    </h3>
  </div>
  <div
    className="alert alert-warning"
    role="alert"
  >
-    You are not authorized to view the gradebook for this course.
+    <FormattedMessage
+      defaultMessage="The grades for this course are now frozen. Editing of grades is no longer allowed."
+      description="Warning message in Gradebook Header for frozen messages"
+      id="gradebook.GradebookHeader.frozenWarning"
+    />
+  </div>
+  <div
+    className="alert alert-warning"
+    role="alert"
+  >
+    <FormattedMessage
+      defaultMessage="You are not authorized to view the gradebook for this course."
+      description="Warning message in Gradebook Header when user is not allowed to view the app"
+      id="gradebook.GradebookHeader.unauthorizedWarning"
+    />
+  </div>
+</div>
+`;
+
+exports[`GradebookHeader component snapshots show bulk management, active view is bulkManagementHistory view toggle view button to grades 1`] = `
+<div
+  className="gradebook-header"
+>
+  <a
+    className="mb-3"
+    href="http://localhost:18000/courses/fakeID/instructor"
+  >
+    <span
+      aria-hidden="true"
+    >
+      &lt;&lt; 
+    </span>
+    <FormattedMessage
+      defaultMessage="Back to Dashboard"
+      description="Button text to take user back to LMS dashboard in Gradebook Header"
+      id="gradebook.GradebookHeader.backButton"
+    />
+  </a>
+  <h1>
+    <FormattedMessage
+      defaultMessage="Gradebook"
+      description="Top-level app title in Gradebook Header component"
+      id="gradebook.GradebookHeader.appLabel"
+    />
+  </h1>
+  <div
+    className="subtitle-row d-flex justify-content-between align-items-center"
+  >
+    <h3>
+      fakeID
+    </h3>
+    <Button
+      onClick={[MockFunction this.handleToggleViewClick]}
+      variant="tertiary"
+    >
+      <FormattedMessage
+        defaultMessage="Return to Gradebook"
+        description="Button text for button navigating to Grades view."
+        id="gradebook.GradebookHeader.toGradesView"
+      />
+    </Button>
+  </div>
+  <div
+    className="alert alert-warning"
+    role="alert"
+  >
+    <FormattedMessage
+      defaultMessage="You are not authorized to view the gradebook for this course."
+      description="Warning message in Gradebook Header when user is not allowed to view the app"
+      id="gradebook.GradebookHeader.unauthorizedWarning"
+    />
+  </div>
+</div>
+`;
+
+exports[`GradebookHeader component snapshots show bulk management, active view is grades view toggle view button to activity log 1`] = `
+<div
+  className="gradebook-header"
+>
+  <a
+    className="mb-3"
+    href="http://localhost:18000/courses/fakeID/instructor"
+  >
+    <span
+      aria-hidden="true"
+    >
+      &lt;&lt; 
+    </span>
+    <FormattedMessage
+      defaultMessage="Back to Dashboard"
+      description="Button text to take user back to LMS dashboard in Gradebook Header"
+      id="gradebook.GradebookHeader.backButton"
+    />
+  </a>
+  <h1>
+    <FormattedMessage
+      defaultMessage="Gradebook"
+      description="Top-level app title in Gradebook Header component"
+      id="gradebook.GradebookHeader.appLabel"
+    />
+  </h1>
+  <div
+    className="subtitle-row d-flex justify-content-between align-items-center"
+  >
+    <h3>
+      fakeID
+    </h3>
+    <Button
+      onClick={[MockFunction this.handleToggleViewClick]}
+      variant="tertiary"
+    >
+      <FormattedMessage
+        defaultMessage="View Bulk Management History"
+        description="Button text for button navigating to Bulk Managment Activity Log"
+        id="gradebook.GradebookHeader.toActivityLogButton"
+      />
+    </Button>
+  </div>
+  <div
+    className="alert alert-warning"
+    role="alert"
+  >
+    <FormattedMessage
+      defaultMessage="You are not authorized to view the gradebook for this course."
+      description="Warning message in Gradebook Header when user is not allowed to view the app"
+      id="gradebook.GradebookHeader.unauthorizedWarning"
+    />
  </div>
 </div>
 `;
--- a/src/components/GradebookHeader/index.jsx
+++ b/src/components/GradebookHeader/index.jsx
@@ -2,14 +2,37 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';

-import { configuration } from 'config';
+import { getConfig } from '@edx/frontend-platform';
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
+import { Button } from '@edx/paragon';
+
+import { views } from 'data/constants/app';
+import actions from 'data/actions';
 import selectors from 'data/selectors';

+import messages from './messages';
+
 export class GradebookHeader extends React.Component {
+  constructor(props) {
+    super(props);
+    this.handleToggleViewClick = this.handleToggleViewClick.bind(this);
+  }
+
+  get toggleViewMessage() {
+    return this.props.activeView === views.grades
+      ? messages.toActivityLog
+      : messages.toGradesView;
+  }
+
  lmsInstructorDashboardUrl = courseId => (
-    `${configuration.LMS_BASE_URL}/courses/${courseId}/instructor`
+    `${getConfig().LMS_BASE_URL}/courses/${courseId}/instructor`
  );

+  handleToggleViewClick() {
+    const newView = this.props.activeView === views.grades ? views.bulkManagementHistory : views.grades;
+    this.props.setView(newView);
+  }
+
  render() {
    return (
      <div className="gradebook-header">
@@ -17,19 +40,32 @@ export class GradebookHeader extends React.Component {
          href={this.lmsInstructorDashboardUrl(this.props.courseId)}
          className="mb-3"
        >
-          <span aria-hidden="true">{'<< '}</span> Back to Dashboard
+          <span aria-hidden="true">{'<< '}</span>
+          <FormattedMessage {...messages.backToDashboard} />
        </a>
-        <h1>Gradebook</h1>
-        <h3> {this.props.courseId}</h3>
+        <h1>
+          <FormattedMessage {...messages.gradebook} />
+        </h1>
+        <div className="subtitle-row d-flex justify-content-between align-items-center">
+          <h3>{this.props.courseId}</h3>
+          { this.props.showBulkManagement && (
+            <Button
+              variant="tertiary"
+              onClick={this.handleToggleViewClick}
+            >
+              <FormattedMessage {...this.toggleViewMessage} />
+            </Button>
+          )}
+        </div>
        {this.props.areGradesFrozen
          && (
          <div className="alert alert-warning" role="alert">
-            The grades for this course are now frozen. Editing of grades is no longer allowed.
+            <FormattedMessage {...messages.frozenWarning} />
          </div>
          )}
        {(this.props.canUserViewGradebook === false) && (
          <div className="alert alert-warning" role="alert">
-            You are not authorized to view the gradebook for this course.
+            <FormattedMessage {...messages.unauthorizedWarning} />
          </div>
        )}
      </div>
@@ -42,19 +78,29 @@ GradebookHeader.defaultProps = {
  courseId: '',
  areGradesFrozen: false,
  canUserViewGradebook: false,
+  showBulkManagement: false,
 };

 GradebookHeader.propTypes = {
  // redux
+  activeView: PropTypes.string.isRequired,
  courseId: PropTypes.string,
  areGradesFrozen: PropTypes.bool,
  canUserViewGradebook: PropTypes.bool,
+  setView: PropTypes.func.isRequired,
+  showBulkManagement: PropTypes.bool,
 };

 export const mapStateToProps = (state) => ({
+  activeView: selectors.app.activeView(state),
  courseId: selectors.app.courseId(state),
  areGradesFrozen: selectors.assignmentTypes.areGradesFrozen(state),
  canUserViewGradebook: selectors.roles.canUserViewGradebook(state),
+  showBulkManagement: selectors.root.showBulkManagement(state),
 });

-export default connect(mapStateToProps)(GradebookHeader);
+export const mapDispatchToProps = {
+  setView: actions.app.setView,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(GradebookHeader);
--- a/src/components/GradebookHeader/messages.js
+++ b/src/components/GradebookHeader/messages.js
@@ -0,0 +1,36 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  backToDashboard: {
+    id: 'gradebook.GradebookHeader.backButton',
+    defaultMessage: 'Back to Dashboard',
+    description: 'Button text to take user back to LMS dashboard in Gradebook Header',
+  },
+  gradebook: {
+    id: 'gradebook.GradebookHeader.appLabel',
+    defaultMessage: 'Gradebook',
+    description: 'Top-level app title in Gradebook Header component',
+  },
+  frozenWarning: {
+    id: 'gradebook.GradebookHeader.frozenWarning',
+    defaultMessage: 'The grades for this course are now frozen. Editing of grades is no longer allowed.',
+    description: 'Warning message in Gradebook Header for frozen messages',
+  },
+  unauthorizedWarning: {
+    id: 'gradebook.GradebookHeader.unauthorizedWarning',
+    defaultMessage: 'You are not authorized to view the gradebook for this course.',
+    description: 'Warning message in Gradebook Header when user is not allowed to view the app',
+  },
+  toActivityLog: {
+    id: 'gradebook.GradebookHeader.toActivityLogButton',
+    defaultMessage: 'View Bulk Management History',
+    description: 'Button text for button navigating to Bulk Managment Activity Log',
+  },
+  toGradesView: {
+    id: 'gradebook.GradebookHeader.toGradesView',
+    defaultMessage: 'Return to Gradebook',
+    description: 'Button text for button navigating to Grades view.',
+  },
+});
+
+export default messages;
--- a/src/components/GradebookHeader/test.jsx
+++ b/src/components/GradebookHeader/test.jsx
@@ -1,37 +1,119 @@
 import React from 'react';
 import { shallow } from 'enzyme';

-import selectors from 'data/selectors';
-import { GradebookHeader, mapStateToProps } from '.';
+import { Button } from '@edx/paragon';
+import { FormattedMessage } from '@edx/frontend-platform/i18n';

+import actions from 'data/actions';
+import selectors from 'data/selectors';
+import { views } from 'data/constants/app';
+import messages from './messages';
+import { GradebookHeader, mapDispatchToProps, mapStateToProps } from '.';
+
+jest.mock('@edx/paragon', () => ({
+  Button: () => 'Button',
+}));
+jest.mock('@edx/frontend-platform/i18n', () => ({
+  defineMessages: m => m,
+  FormattedMessage: () => 'FormattedMessage',
+}));
+jest.mock('data/actions', () => ({
+  __esModule: true,
+  default: {
+    app: { setView: jest.fn() },
+  },
+}));
 jest.mock('data/selectors', () => ({
  __esModule: true,
  default: {
-    app: { courseId: jest.fn(state => ({ courseId: state })) },
+    app: {
+      activeView: jest.fn(state => ({ aciveView: state })),
+      courseId: jest.fn(state => ({ courseId: state })),
+    },
    assignmentTypes: { areGradesFrozen: jest.fn(state => ({ areGradesFrozen: state })) },
    roles: { canUserViewGradebook: jest.fn(state => ({ canUserViewGradebook: state })) },
+    root: { showBulkManagement: jest.fn(state => ({ showBulkManagement: state })) },
  },
 }));

 const courseId = 'fakeID';
 describe('GradebookHeader component', () => {
+  const props = {
+    activeView: views.grades,
+    areGradesFrozen: false,
+    canUserViewGradebook: false,
+    courseId,
+    showBulkManagement: false,
+  };
+  beforeEach(() => {
+    props.setView = jest.fn();
+  });
  describe('snapshots', () => {
+    let el;
+    beforeEach(() => {
+      el = shallow(<GradebookHeader {...props} />);
+      el.instance().handleToggleViewClick = jest.fn().mockName('this.handleToggleViewClick');
+    });
    describe('default values (grades frozen, cannot view).', () => {
      test('unauthorized warning, but no grades frozen warning', () => {
-        const props = { courseId, areGradesFrozen: false, canUserViewGradebook: false };
-        expect(shallow(<GradebookHeader {...props} />)).toMatchSnapshot();
+        expect(el.instance().render()).toMatchSnapshot();
      });
    });
    describe('grades frozen, cannot view', () => {
      test('unauthorized warning, and grades frozen warning.', () => {
-        const props = { courseId, areGradesFrozen: true, canUserViewGradebook: false };
-        expect(shallow(<GradebookHeader {...props} />)).toMatchSnapshot();
+        el.setProps({ areGradesFrozen: true });
+        expect(el.instance().render()).toMatchSnapshot();
      });
    });
    describe('grades frozen, can view.', () => {
      test('grades frozen warning but no unauthorized warning', () => {
-        const props = { courseId, areGradesFrozen: true, canUserViewGradebook: true };
-        expect(shallow(<GradebookHeader {...props} />)).toMatchSnapshot();
+        el.setProps({ areGradesFrozen: true, canUserViewGradebook: true });
+        expect(el.instance().render()).toMatchSnapshot();
+      });
+    });
+    describe('show bulk management, active view is grades view', () => {
+      test('toggle view button to activity log', () => {
+        el.setProps({ showBulkManagement: true });
+        expect(el.find(Button).getElement()).toEqual((
+          <Button
+            variant="tertiary"
+            onClick={el.instance().handleToggleViewClick}
+          >
+            <FormattedMessage {...messages.toActivityLog} />
+          </Button>
+        ));
+        expect(el.instance().render()).toMatchSnapshot();
+      });
+    });
+    describe('show bulk management, active view is bulkManagementHistory view', () => {
+      test('toggle view button to grades', () => {
+        el.setProps({ showBulkManagement: true, activeView: views.bulkManagementHistory });
+        expect(el.find(Button).getElement()).toEqual((
+          <Button
+            variant="tertiary"
+            onClick={el.instance().handleToggleViewClick}
+          >
+            <FormattedMessage {...messages.toGradesView} />
+          </Button>
+        ));
+        expect(el.instance().render()).toMatchSnapshot();
+      });
+    });
+  });
+  describe('behavior', () => {
+    let el;
+    beforeEach(() => {
+      el = shallow(<GradebookHeader {...props} />);
+    });
+    describe('handleToggleViewClick', () => {
+      test('calls setView with activity view if activeView is grades', () => {
+        el.instance().handleToggleViewClick();
+        expect(props.setView).toHaveBeenCalledWith(views.bulkManagementHistory);
+      });
+      test('calls setView with grades view if activeView is bulkManagementHistory', () => {
+        el.setProps({ activeView: views.bulkManagementHistory });
+        el.instance().handleToggleViewClick();
+        expect(props.setView).toHaveBeenCalledWith(views.grades);
      });
    });
  });
@@ -41,6 +123,9 @@ describe('GradebookHeader component', () => {
    beforeEach(() => {
      mapped = mapStateToProps(testState);
    });
+    test('activeView from app.activeView', () => {
+      expect(mapped.activeView).toEqual(selectors.app.activeView(testState));
+    });
    test('courseId from app.courseId', () => {
      expect(mapped.courseId).toEqual(selectors.app.courseId(testState));
    });
@@ -54,5 +139,14 @@ describe('GradebookHeader component', () => {
        mapped.canUserViewGradebook,
      ).toEqual(selectors.roles.canUserViewGradebook(testState));
    });
+    test('showBulkManagement from root showBulkManagement selector', () => {
+      expect(mapped.showBulkManagement).toEqual(selectors.root.showBulkManagement(testState));
+    });
+  });
+
+  describe('mapDispatchToProps', () => {
+    test('setView from actions.app.setView', () => {
+      expect(mapDispatchToProps.setView).toEqual(actions.app.setView);
+    });
  });
 });
--- a/src/components/GradesTab/BulkManagementControls.jsx
+++ b/src/components/GradesTab/BulkManagementControls.jsx
@@ -1,105 +0,0 @@
-/* eslint-disable react/sort-comp, react/button-has-type */
-import React from 'react';
-import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-
-import { StatefulButton, Icon } from '@edx/paragon';
-
-import { StrictDict } from 'utils';
-import actions from 'data/actions';
-import selectors from 'data/selectors';
-
-export const basicButtonProps = () => ({
-  variant: 'outline-primary',
-  icons: {
-    default: <Icon className="fa fa-download mr-2" />,
-    pending: <Icon className="fa fa-spinner fa-spin mr-2" />,
-  },
-  disabledStates: ['pending'],
-  className: 'ml-2',
-});
-
-export const buttonStates = StrictDict({
-  pending: 'pending',
-  default: 'default',
-});
-
-/**
- * <BulkManagementControls />
- * Provides download buttons for Bulk Management and Intervention reports, only if
- * showBulkManagement is set in redus.
- */
-export class BulkManagementControls extends React.Component {
-  constructor(props) {
-    super(props);
-    this.buttonProps = this.buttonProps.bind(this);
-    this.handleClickDownloadInterventions = this.handleClickDownloadInterventions.bind(this);
-    this.handleClickExportGrades = this.handleClickExportGrades.bind(this);
-  }
-
-  buttonProps(label) {
-    return {
-      labels: { default: label, pending: label },
-      state: this.props.showSpinner ? 'pending' : 'default',
-      ...basicButtonProps(),
-    };
-  }
-
-  handleClickDownloadInterventions() {
-    this.props.downloadInterventionReport();
-    window.location.assign(this.props.interventionExportUrl);
-  }
-
-  // At present, we don't store label and value in google analytics. By setting the label
-  // property of the below events, I want to verify that we can set the label of google anlatyics
-  // The following properties of a google analytics event are:
-  // category (used), name(used), label(not used), value(not used)
-  handleClickExportGrades() {
-    this.props.downloadBulkGradesReport();
-    window.location.assign(this.props.gradeExportUrl);
-  }
-
-  render() {
-    return this.props.showBulkManagement && (
-      <div>
-        <StatefulButton
-          {...this.buttonProps('Bulk Management')}
-          onClick={this.handleClickExportGrades}
-        />
-        <StatefulButton
-          {...this.buttonProps('Interventions')}
-          onClick={this.handleClickDownloadInterventions}
-        />
-      </div>
-    );
-  }
-}
-
-BulkManagementControls.defaultProps = {
-  showBulkManagement: false,
-  showSpinner: false,
-};
-
-BulkManagementControls.propTypes = {
-  // redux
-  downloadBulkGradesReport: PropTypes.func.isRequired,
-  downloadInterventionReport: PropTypes.func.isRequired,
-  gradeExportUrl: PropTypes.string.isRequired,
-  interventionExportUrl: PropTypes.string.isRequired,
-  showSpinner: PropTypes.bool,
-  showBulkManagement: PropTypes.bool,
-};
-
-export const mapStateToProps = (state) => ({
-  gradeExportUrl: selectors.root.gradeExportUrl(state),
-  interventionExportUrl: selectors.root.interventionExportUrl(state),
-  showBulkManagement: selectors.root.showBulkManagement(state),
-  showSpinner: selectors.root.shouldShowSpinner(state),
-});
-
-export const mapDispatchToProps = {
-  downloadBulkGradesReport: actions.grades.downloadReport.bulkGrades,
-  downloadInterventionReport: actions.grades.downloadReport.intervention,
-};
-
-export default connect(mapStateToProps, mapDispatchToProps)(BulkManagementControls);
--- a/src/components/GradesTab/EditModal/OverrideTable/snapshots/test.jsx.snap
+++ b/src/components/GradesTab/EditModal/OverrideTable/snapshots/test.jsx.snap
@@ -1,47 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`OverrideTable Component snapshots basic snapshot shows a row for each entry and one editable row 1`] = `
-<Table
-  columns={
-    Array [
-      Object {
-        "key": "date",
-        "label": "Date",
-      },
-      Object {
-        "key": "grader",
-        "label": "Grader",
-      },
-      Object {
-        "key": "reason",
-        "label": "Reason",
-      },
-      Object {
-        "key": "adjustedGrade",
-        "label": "Adjusted grade",
-      },
-    ]
-  }
-  data={
-    Array [
-      Object {
-        "adjustedGrade": 0,
-        "date": "yesterday",
-        "grader": "me",
-        "reason": "you ate my sandwich",
-      },
-      Object {
-        "adjustedGrade": 20,
-        "date": "today",
-        "grader": "me",
-        "reason": "you brought me a new sandwich",
-      },
-      Object {
-        "adjustedGrade": <AdjustedGradeInput />,
-        "date": "todaaaaaay",
-        "reason": <ReasonInput />,
-      },
-    ]
-  }
-/>
-`;
--- a/src/components/GradesTab/EditModal/snapshots/ModalHeaders.test.jsx.snap
+++ b/src/components/GradesTab/EditModal/snapshots/ModalHeaders.test.jsx.snap
@@ -1,51 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ModalHeaders Component snapshots gradeOverrideHistoryError is and empty and open is true modal open and StatusAlert showing 1`] = `
-<div>
-  <HistoryHeader
-    id="assignment"
-    label="Assignment"
-    value="Qwerty"
-  />
-  <HistoryHeader
-    id="student"
-    label="Student"
-    value="Uiop"
-  />
-  <HistoryHeader
-    id="original-grade"
-    label="Original Grade"
-    value={20}
-  />
-  <HistoryHeader
-    id="current-grade"
-    label="Current Grade"
-    value={2}
-  />
-</div>
-`;
-
-exports[`ModalHeaders Component snapshots gradeOverrideHistoryError is empty and open is false modal closed and StatusAlert closed 1`] = `
-<div>
-  <HistoryHeader
-    id="assignment"
-    label="Assignment"
-    value="Qwerty"
-  />
-  <HistoryHeader
-    id="student"
-    label="Student"
-    value="Uiop"
-  />
-  <HistoryHeader
-    id="original-grade"
-    label="Original Grade"
-    value={20}
-  />
-  <HistoryHeader
-    id="current-grade"
-    label="Current Grade"
-    value={2}
-  />
-</div>
-`;
--- a/src/components/GradesTab/EditModal/snapshots/test.jsx.snap
+++ b/src/components/GradesTab/EditModal/snapshots/test.jsx.snap
@@ -1,75 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`EditMoal Component snapshots gradeOverrideHistoryError is and empty and open is true modal open and StatusAlert showing 1`] = `
-<Modal
-  body={
-    <div>
-      <ModalHeaders />
-      <StatusAlert
-        alertType="danger"
-        dialog="Weve been trying to contact you regarding..."
-        dismissible={false}
-        open={true}
-      />
-      <OverrideTable />
-      <div>
-        Showing most recent actions (max 5). To see more, please contact support.
-      </div>
-      <div>
-        Note: Once you save, your changes will be visible to students.
-      </div>
-    </div>
-  }
-  buttons={
-    Array [
-      <Button
-        onClick={[MockFunction this.handleAdjustedGradeClick]}
-        variant="primary"
-      >
-        Save Grade
-      </Button>,
-    ]
-  }
-  closeText="Cancel"
-  onClose={[MockFunction this.closeAssignmentModal]}
-  open={true}
-  title="Edit Grades"
-/>
-`;
-
-exports[`EditMoal Component snapshots gradeOverrideHistoryError is empty and open is false modal closed and StatusAlert closed 1`] = `
-<Modal
-  body={
-    <div>
-      <ModalHeaders />
-      <StatusAlert
-        alertType="danger"
-        dialog=""
-        dismissible={false}
-        open={false}
-      />
-      <OverrideTable />
-      <div>
-        Showing most recent actions (max 5). To see more, please contact support.
-      </div>
-      <div>
-        Note: Once you save, your changes will be visible to students.
-      </div>
-    </div>
-  }
-  buttons={
-    Array [
-      <Button
-        onClick={[MockFunction this.handleAdjustedGradeClick]}
-        variant="primary"
-      >
-        Save Grade
-      </Button>,
-    ]
-  }
-  closeText="Cancel"
-  onClose={[MockFunction this.closeAssignmentModal]}
-  open={false}
-  title="Edit Grades"
-/>
-`;
--- a/src/components/GradesTab/GradebookTable/snapshots/LabelReplacements.test.jsx.snap
+++ b/src/components/GradesTab/GradebookTable/snapshots/LabelReplacements.test.jsx.snap
@@ -1,56 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`LabelReplacements TotalGradeLabelReplacement displays overlay tooltip 1`] = `
-<Tooltip
-  id="course-grade-tooltip"
->
-  Total Grade values are always displayed as a percentage.
-</Tooltip>
-`;
-
-exports[`LabelReplacements TotalGradeLabelReplacement snapshot 1`] = `
-<div>
-  <OverlayTrigger
-    key="left-basic"
-    overlay={
-      <Tooltip
-        id="course-grade-tooltip"
-      >
-        Total Grade values are always displayed as a percentage.
-      </Tooltip>
-    }
-    placement="left"
-    trigger={
-      Array [
-        "hover",
-        "focus",
-      ]
-    }
-  >
-    <div>
-      Total Grade (%)
-      <div
-        id="courseGradeTooltipIcon"
-      >
-        <Icon
-          className="fa fa-info-circle"
-          screenReaderText="Total Grade values are always displayed as a percentage."
-        />
-      </div>
-    </div>
-  </OverlayTrigger>
-</div>
-`;
-
-exports[`LabelReplacements UsernameLabelReplacement snapshot 1`] = `
-<div>
-  <div>
-    Username
-  </div>
-  <div
-    className="font-weight-normal student-key"
-  >
-    Student Key*
-  </div>
-</div>
-`;
--- a/src/components/GradesTab/GradebookTable/snapshots/test.jsx.snap
+++ b/src/components/GradesTab/GradebookTable/snapshots/test.jsx.snap
@@ -1,47 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`GradebookTable component snapshot - fields1 and 2 between email and totalGrade, mocked rows 1`] = `
-<div
-  className="gradebook-container"
->
-  <div
-    className="gbook"
-  >
-    <Table
-      columns={
-        Array [
-          Object {
-            "key": "Username",
-            "label": <UsernameLabelReplacement />,
-          },
-          Object {
-            "key": "Email",
-            "label": "Email",
-          },
-          Object {
-            "key": "field1",
-            "label": "field1",
-          },
-          Object {
-            "key": "field2",
-            "label": "field2",
-          },
-          Object {
-            "key": "Total Grade (%)",
-            "label": <TotalGradeLabelReplacement />,
-          },
-        ]
-      }
-      data={
-        Array [
-          "mappedRow: 1",
-          "mappedRow: 2",
-          "mappedRow: 3",
-        ]
-      }
-      hasFixedColumnWidths={true}
-      rowHeaderColumnKey="username"
-    />
-  </div>
-</div>
-`;
--- a/src/components/GradesTab/snapshots/SearchControls.test.jsx.snap
+++ b/src/components/GradesTab/snapshots/SearchControls.test.jsx.snap
@@ -1,37 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`SearchControls Component Snapshots basic snapshot 1`] = `
-<React.Fragment>
-  <h4>
-    Step 1: Filter the Grade Report
-  </h4>
-  <div
-    className="d-flex justify-content-between"
-  >
-    <Button
-      className="btn-primary align-self-start"
-      id="edit-filters-btn"
-      onClick={[MockFunction toggleFilterDrawer]}
-    >
-      <Icon
-        className="fa fa-filter"
-      />
-       Edit Filters
-    </Button>
-    <div>
-      <SearchField
-        inputLabel="Search for a learner"
-        onChange={[MockFunction onChange]}
-        onClear={[MockFunction onClear]}
-        onSubmit={[MockFunction fetchGrades]}
-        value="alice"
-      />
-      <small
-        className="form-text text-muted search-help-text"
-      >
-        Search by username, email, or student key
-      </small>
-    </div>
-  </div>
-</React.Fragment>
-`;
--- a/src/components/GradesTab/snapshots/StatusAlerts.test.jsx.snap
+++ b/src/components/GradesTab/snapshots/StatusAlerts.test.jsx.snap
@@ -1,18 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`StatusAlerts snapshots basic snapshot 1`] = `
-<React.Fragment>
-  <StatusAlert
-    alertType="success"
-    dialog="The grade has been successfully edited. You may see a slight delay before updates appear in the Gradebook."
-    onClose={[MockFunction handleCloseSuccessBanner]}
-    open={true}
-  />
-  <StatusAlert
-    alertType="danger"
-    dialog="the quiCk brown does somEthing or other"
-    dismissible={false}
-    open={false}
-  />
-</React.Fragment>
-`;
--- a/src/components/GradesTab/snapshots/UsersLabel.test.jsx.snap
+++ b/src/components/GradesTab/snapshots/UsersLabel.test.jsx.snap
@@ -1,19 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`UsersLabel component snapshot - displays label with number of filtered users out of total 1`] = `
-<Fragment>
-  Showing 
-  <span
-    className="font-weight-bold"
-  >
-    23
-  </span>
-   of 
-  <span
-    className="font-weight-bold"
-  >
-    140
-  </span>
-   total learners
-</Fragment>
-`;
--- a/src/components/GradesTab/snapshots/test.jsx.snap
+++ b/src/components/GradesTab/snapshots/test.jsx.snap
@@ -1,28 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`GradesTab Component snapshots basic snapshot 1`] = `
-<React.Fragment>
-  <SpinnerIcon />
-  <SearchControls />
-  <FilterBadges
-    handleClose={[MockFunction this.handleFilterBadgeClose]}
-  />
-  <StatusAlerts />
-  <h4>
-    Step 2: View or Modify Individual Grades
-  </h4>
-  <UsersLabel />
-  <div
-    className="d-flex justify-content-between align-items-center mb-2"
-  >
-    <ScoreViewInput />
-    <BulkManagementControls />
-  </div>
-  <GradebookTable />
-  <PageButtons />
-  <p>
-    * available for learners in the Master's track only
-  </p>
-  <EditModal />
-</React.Fragment>
-`;
--- a/src/components/GradesView/BulkManagementControls.jsx
+++ b/src/components/GradesView/BulkManagementControls.jsx
@@ -0,0 +1,71 @@
+/* eslint-disable react/sort-comp, react/button-has-type */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+
+import { views } from 'data/constants/app';
+import actions from 'data/actions';
+import selectors from 'data/selectors';
+
+import NetworkButton from 'components/NetworkButton';
+import ImportGradesButton from './ImportGradesButton';
+
+import messages from './BulkManagementControls.messages';
+
+/**
+ * <BulkManagementControls />
+ * Provides download buttons for Bulk Management and Intervention reports, only if
+ * showBulkManagement is set in redus.
+ */
+export class BulkManagementControls extends React.Component {
+  constructor(props) {
+    super(props);
+    this.handleClickExportGrades = this.handleClickExportGrades.bind(this);
+    this.handleViewActivityLog = this.handleViewActivityLog.bind(this);
+  }
+
+  handleClickExportGrades() {
+    this.props.downloadBulkGradesReport();
+    window.location.assign(this.props.gradeExportUrl);
+  }
+
+  handleViewActivityLog() {
+    this.props.setView(views.bulkManagementHistory);
+  }
+
+  render() {
+    return this.props.showBulkManagement && (
+      <div className="d-flex">
+        <NetworkButton
+          label={messages.downloadGradesBtn}
+          onClick={this.handleClickExportGrades}
+        />
+        <ImportGradesButton />
+      </div>
+    );
+  }
+}
+
+BulkManagementControls.defaultProps = {
+  showBulkManagement: false,
+};
+
+BulkManagementControls.propTypes = {
+  // redux
+  downloadBulkGradesReport: PropTypes.func.isRequired,
+  gradeExportUrl: PropTypes.string.isRequired,
+  showBulkManagement: PropTypes.bool,
+  setView: PropTypes.func.isRequired,
+};
+
+export const mapStateToProps = (state) => ({
+  gradeExportUrl: selectors.root.gradeExportUrl(state),
+  showBulkManagement: selectors.root.showBulkManagement(state),
+});
+
+export const mapDispatchToProps = {
+  downloadBulkGradesReport: actions.grades.downloadReport.bulkGrades,
+  setView: actions.app.setView,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(BulkManagementControls);
--- a/src/components/GradesView/BulkManagementControls.messages.js
+++ b/src/components/GradesView/BulkManagementControls.messages.js
@@ -0,0 +1,11 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  downloadGradesBtn: {
+    id: 'gradebook.GradesView.BulkManagementControls.bulkManagementLabel',
+    defaultMessage: 'Download Grades',
+    description: 'A labeled button that allows an admin user to download course grades all at once (in bulk).',
+  },
+});
+
+export default messages;
--- a/src/components/GradesView/BulkManagementControls.test.jsx
+++ b/src/components/GradesView/BulkManagementControls.test.jsx
@@ -3,15 +3,16 @@ import { shallow } from 'enzyme';

 import actions from 'data/actions';
 import selectors from 'data/selectors';
+import { views } from 'data/constants/app';

 import {
  BulkManagementControls,
-  basicButtonProps,
-  buttonStates,
  mapStateToProps,
  mapDispatchToProps,
 } from './BulkManagementControls';

+jest.mock('./ImportGradesButton', () => 'ImportGradesButton');
+jest.mock('components/NetworkButton', () => 'NetworkButton');
 jest.mock('data/selectors', () => ({
  __esModule: true,
  default: {
@@ -19,13 +20,13 @@ jest.mock('data/selectors', () => ({
      gradeExportUrl: (state) => ({ gradeExportUrl: state }),
      interventionExportUrl: (state) => ({ interventionExportUrl: state }),
      showBulkManagement: (state) => ({ showBulkManagement: state }),
-      shouldShowSpinner: (state) => ({ showSpinner: state }),
    },
  },
 }));
 jest.mock('data/actions', () => ({
  __esModule: true,
  default: {
+    app: { setView: jest.fn() },
    grades: {
      downloadReport: {
        bulkGrades: jest.fn(),
@@ -47,22 +48,12 @@ describe('BulkManagementControls', () => {
        ...props,
        downloadBulkGradesReport: jest.fn(),
        downloadInterventionReport: jest.fn(),
+        setView: jest.fn(),
      };
    });
    test('snapshot - empty if showBulkManagement is not truthy', () => {
      expect(shallow(<BulkManagementControls {...props} />)).toEqual({});
    });
-    test('snapshot - buttonProps for each button ("Bulk Management" and "Interventions")', () => {
-      el = shallow(<BulkManagementControls {...props} showBulkManagement />);
-      jest.spyOn(el.instance(), 'buttonProps').mockImplementation(
-        value => ({ buttonProps: value }),
-      );
-      jest.spyOn(el.instance(), 'handleClickExportGrades').mockName('this.handleClickExportGrades');
-      jest.spyOn(
-        el.instance(),
-        'handleClickDownloadInterventions',
-      ).mockName('this.handleClickDownloadInterventions');
-    });
    describe('behavior', () => {
      const oldWindowLocation = window.location;

@@ -87,37 +78,10 @@ describe('BulkManagementControls', () => {
        // restore `window.location` to the `jsdom` `Location` object
        window.location = oldWindowLocation;
      });
-
-      describe('buttonProps', () => {
-        test('loads default and pending labels based on passed string', () => {
-          const label = 'Fake Label';
-          const { labels, state, ...rest } = el.instance().buttonProps(label);
-          expect(rest).toEqual(basicButtonProps());
-          expect(labels).toEqual({ default: label, pending: label });
-        });
-        test('loads pending state if props.showSpinner', () => {
-          const label = 'Fake Label';
-          el.setProps({ showSpinner: true });
-          const { labels, state, ...rest } = el.instance().buttonProps(label);
-          expect(state).toEqual(buttonStates.pending);
-          expect(rest).toEqual(basicButtonProps());
-        });
-        test('loads default state if not props.showSpinner', () => {
-          const label = 'Fake Label';
-          const { labels, state, ...rest } = el.instance().buttonProps(label);
-          expect(state).toEqual(buttonStates.default);
-          expect(rest).toEqual(basicButtonProps());
-        });
-      });
-      describe('handleClickDownloadInterventions', () => {
-        const assertions = [
-          'calls props.downloadInterventionReport',
-          'sets location to props.interventionsExportUrl',
-        ];
-        it(assertions.join(' and '), () => {
-          el.instance().handleClickDownloadInterventions();
-          expect(props.downloadInterventionReport).toHaveBeenCalled();
-          expect(window.location.assign).toHaveBeenCalledWith(props.interventionExportUrl);
+      describe('handleViewActivityLog', () => {
+        it('calls props.setView(views.bulkManagementHistory)', () => {
+          el.instance().handleViewActivityLog();
+          expect(props.setView).toHaveBeenCalledWith(views.bulkManagementHistory);
        });
      });
      describe('handleClickExportGrades', () => {
@@ -143,15 +107,9 @@ describe('BulkManagementControls', () => {
    test('gradeExportUrl from root.gradeExportUrl', () => {
      expect(mapped.gradeExportUrl).toEqual(selectors.root.gradeExportUrl(testState));
    });
-    test('interventionExportUrl from root.interventionExportUrl', () => {
-      expect(mapped.interventionExportUrl).toEqual(selectors.root.interventionExportUrl(testState));
-    });
    test('showBulkManagement from root.showBulkManagement', () => {
      expect(mapped.showBulkManagement).toEqual(selectors.root.showBulkManagement(testState));
    });
-    test('showSpinner from root.shouldShowSpinner', () => {
-      expect(mapped.showSpinner).toEqual(selectors.root.shouldShowSpinner(testState));
-    });
  });
  describe('mapDispatchToProps', () => {
    test('downloadBulkGradesReport from actions.grades.downloadReport.bulkGrades', () => {
@@ -159,10 +117,8 @@ describe('BulkManagementControls', () => {
        mapDispatchToProps.downloadBulkGradesReport,
      ).toEqual(actions.grades.downloadReport.bulkGrades);
    });
-    test('downloadInterventionReport from actions.grades.downloadReport.invervention', () => {
-      expect(
-        mapDispatchToProps.downloadInterventionReport,
-      ).toEqual(actions.grades.downloadReport.intervention);
+    test('setView from actions.app.setView', () => {
+      expect(mapDispatchToProps.setView).toEqual(actions.app.setView);
    });
  });
 });
--- a/src/components/GradesView/EditModal/HistoryHeader.jsx
+++ b/src/components/GradesView/EditModal/HistoryHeader.jsx
@@ -19,7 +19,7 @@ HistoryHeader.defaultProps = {
 };
 HistoryHeader.propTypes = {
  id: PropTypes.string.isRequired,
-  label: PropTypes.string.isRequired,
+  label: PropTypes.node.isRequired,
  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 };

--- a/src/components/GradesView/EditModal/HistoryHeader.test.jsx
+++ b/src/components/GradesView/EditModal/HistoryHeader.test.jsx
--- a/src/components/GradesView/EditModal/ModalHeaders.jsx
+++ b/src/components/GradesView/EditModal/ModalHeaders.jsx
@@ -2,7 +2,11 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';

+import { FormattedMessage } from '@edx/frontend-platform/i18n';
+
 import selectors from 'data/selectors';
+
+import messages from './messages';
 import HistoryHeader from './HistoryHeader';

 /**
@@ -18,22 +22,22 @@ export const ModalHeaders = ({
  <div>
    <HistoryHeader
      id="assignment"
-      label="Assignment"
+      label={<FormattedMessage {...messages.assignmentHeader} />}
      value={modalState.assignmentName}
    />
    <HistoryHeader
      id="student"
-      label="Student"
+      label={<FormattedMessage {...messages.studentHeader} />}
      value={modalState.updateUserName}
    />
    <HistoryHeader
      id="original-grade"
-      label="Original Grade"
+      label={<FormattedMessage {...messages.originalGradeHeader} />}
      value={originalGrade}
    />
    <HistoryHeader
      id="current-grade"
-      label="Current Grade"
+      label={<FormattedMessage {...messages.currentGradeHeader} />}
      value={currentGrade}
    />
  </div>
--- a/src/components/GradesView/EditModal/ModalHeaders.test.jsx
+++ b/src/components/GradesView/EditModal/ModalHeaders.test.jsx
--- a/src/components/GradesView/EditModal/OverrideTable/AdjustedGradeInput.jsx
+++ b/src/components/GradesView/EditModal/OverrideTable/AdjustedGradeInput.jsx
@@ -7,6 +7,7 @@ import { Form } from '@edx/paragon';

 import selectors from 'data/selectors';
 import actions from 'data/actions';
+import { getLocale, isRtl } from '@edx/frontend-platform/i18n';

 /**
 * <AdjustedGradeInput />
@@ -32,7 +33,7 @@ export class AdjustedGradeInput extends React.Component {
          value={this.props.value}
          onChange={this.onChange}
        />
-        {this.props.possibleGrade && ` / ${this.props.possibleGrade}`}
+        {this.props.possibleGrade && ` ${isRtl(getLocale()) ? '\\' : '/'} ${this.props.possibleGrade}`}
      </span>
    );
  }
--- a/src/components/GradesView/EditModal/OverrideTable/AdjustedGradeInput.test.jsx
+++ b/src/components/GradesView/EditModal/OverrideTable/AdjustedGradeInput.test.jsx
--- a/src/components/GradesView/EditModal/OverrideTable/ReasonInput.jsx
+++ b/src/components/GradesView/EditModal/OverrideTable/ReasonInput.jsx
--- a/src/components/GradesView/EditModal/OverrideTable/ReasonInput.test.jsx
+++ b/src/components/GradesView/EditModal/OverrideTable/ReasonInput.test.jsx
--- a/src/components/GradesView/EditModal/OverrideTable/snapshots/AdjustedGradeInput.test.jsx.snap
+++ b/src/components/GradesView/EditModal/OverrideTable/snapshots/AdjustedGradeInput.test.jsx.snap
--- a/src/components/GradesView/EditModal/OverrideTable/snapshots/ReasonInput.test.jsx.snap
+++ b/src/components/GradesView/EditModal/OverrideTable/snapshots/ReasonInput.test.jsx.snap
--- a/src/components/GradesView/EditModal/OverrideTable/snapshots/test.jsx.snap
+++ b/src/components/GradesView/EditModal/OverrideTable/snapshots/test.jsx.snap
@@ -0,0 +1,64 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`OverrideTable Component snapshots basic snapshot shows a row for each entry and one editable row 1`] = `
+<DataTable
+  columns={
+    Array [
+      Object {
+        "Header": <FormattedMessage
+          defaultMessage="Date"
+          description="Edit Modal Override Table Date column header"
+          id="gradebook.GradesView.EditModal.Overrides.dateHeader"
+        />,
+        "accessor": "date",
+      },
+      Object {
+        "Header": <FormattedMessage
+          defaultMessage="Grader"
+          description="Edit Modal Override Table Grader column header"
+          id="gradebook.GradesView.EditModal.Overrides.graderHeader"
+        />,
+        "accessor": "grader",
+      },
+      Object {
+        "Header": <FormattedMessage
+          defaultMessage="Reason"
+          description="Edit Modal Override Table Reason column header"
+          id="gradebook.GradesView.EditModal.Overrides.reasonHeader"
+        />,
+        "accessor": "reason",
+      },
+      Object {
+        "Header": <FormattedMessage
+          defaultMessage="Adjusted grade"
+          description="Edit Modal Override Table Adjusted grade column header"
+          id="gradebook.GradesView.EditModal.Overrides.adjustedGradeHeader"
+        />,
+        "accessor": "adjustedGrade",
+      },
+    ]
+  }
+  data={
+    Array [
+      Object {
+        "adjustedGrade": 0,
+        "date": "yesterday",
+        "grader": "me",
+        "reason": "you ate my sandwich",
+      },
+      Object {
+        "adjustedGrade": 20,
+        "date": "today",
+        "grader": "me",
+        "reason": "you brought me a new sandwich",
+      },
+      Object {
+        "adjustedGrade": <AdjustedGradeInput />,
+        "date": "todaaaaaay",
+        "reason": <ReasonInput />,
+      },
+    ]
+  }
+  itemCount={2}
+/>
+`;
--- a/src/components/GradesView/EditModal/OverrideTable/index.jsx
+++ b/src/components/GradesView/EditModal/OverrideTable/index.jsx
@@ -3,19 +3,16 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';

-import { Table } from '@edx/paragon';
+import { DataTable } from '@edx/paragon';
+import { FormattedMessage } from '@edx/frontend-platform/i18n';

+import { gradeOverrideHistoryColumns as columns } from 'data/constants/app';
 import selectors from 'data/selectors';
+
+import messages from './messages';
 import ReasonInput from './ReasonInput';
 import AdjustedGradeInput from './AdjustedGradeInput';

-const GRADE_OVERRIDE_HISTORY_COLUMNS = [
-  { label: 'Date', key: 'date' },
-  { label: 'Grader', key: 'grader' },
-  { label: 'Reason', key: 'reason' },
-  { label: 'Adjusted grade', key: 'adjustedGrade' },
-];
-
 /**
 * <OverrideTable />
 * Table containing previous grade override entries, and an "edit" row
@@ -30,8 +27,16 @@ export const OverrideTable = ({
    return null;
  }
  return (
-    <Table
-      columns={GRADE_OVERRIDE_HISTORY_COLUMNS}
+    <DataTable
+      columns={[
+        { Header: <FormattedMessage {...messages.dateHeader} />, accessor: columns.date },
+        { Header: <FormattedMessage {...messages.graderHeader} />, accessor: columns.grader },
+        { Header: <FormattedMessage {...messages.reasonHeader} />, accessor: columns.reason },
+        {
+          Header: <FormattedMessage {...messages.adjustedGradeHeader} />,
+          accessor: columns.adjustedGrade,
+        },
+      ]}
      data={[
        ...gradeOverrides,
        {
@@ -40,6 +45,7 @@ export const OverrideTable = ({
          reason: <ReasonInput />,
        },
      ]}
+      itemCount={gradeOverrides.length}
    />
  );
 };
--- a/src/components/GradesView/EditModal/OverrideTable/messages.js
+++ b/src/components/GradesView/EditModal/OverrideTable/messages.js
@@ -0,0 +1,26 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  adjustedGradeHeader: {
+    id: 'gradebook.GradesView.EditModal.Overrides.adjustedGradeHeader',
+    defaultMessage: 'Adjusted grade',
+    description: 'Edit Modal Override Table Adjusted grade column header',
+  },
+  dateHeader: {
+    id: 'gradebook.GradesView.EditModal.Overrides.dateHeader',
+    defaultMessage: 'Date',
+    description: 'Edit Modal Override Table Date column header',
+  },
+  graderHeader: {
+    id: 'gradebook.GradesView.EditModal.Overrides.graderHeader',
+    defaultMessage: 'Grader',
+    description: 'Edit Modal Override Table Grader column header',
+  },
+  reasonHeader: {
+    id: 'gradebook.GradesView.EditModal.Overrides.reasonHeader',
+    defaultMessage: 'Reason',
+    description: 'Edit Modal Override Table Reason column header',
+  },
+});
+
+export default messages;
--- a/src/components/GradesView/EditModal/OverrideTable/test.jsx
+++ b/src/components/GradesView/EditModal/OverrideTable/test.jsx
@@ -8,7 +8,7 @@ import {
  mapStateToProps,
 } from '.';

-jest.mock('@edx/paragon', () => ({ Table: () => 'Table' }));
+jest.mock('@edx/paragon', () => ({ DataTable: () => 'DataTable' }));
 jest.mock('./ReasonInput', () => 'ReasonInput');
 jest.mock('./AdjustedGradeInput', () => 'AdjustedGradeInput');

--- a/src/components/GradesView/EditModal/snapshots/HistoryHeader.test.jsx.snap
+++ b/src/components/GradesView/EditModal/snapshots/HistoryHeader.test.jsx.snap
--- a/src/components/GradesView/EditModal/snapshots/ModalHeaders.test.jsx.snap
+++ b/src/components/GradesView/EditModal/snapshots/ModalHeaders.test.jsx.snap
@@ -0,0 +1,99 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ModalHeaders Component snapshots gradeOverrideHistoryError is and empty and open is true modal open and StatusAlert showing 1`] = `
+<div>
+  <HistoryHeader
+    id="assignment"
+    label={
+      <FormattedMessage
+        defaultMessage="Assignment"
+        description="Edit Modal Assignment header"
+        id="gradebook.GradesView.EditModal.headers.assignment"
+      />
+    }
+    value="Qwerty"
+  />
+  <HistoryHeader
+    id="student"
+    label={
+      <FormattedMessage
+        defaultMessage="Student"
+        description="Edit Modal Student header"
+        id="gradebook.GradesView.EditModal.headers.student"
+      />
+    }
+    value="Uiop"
+  />
+  <HistoryHeader
+    id="original-grade"
+    label={
+      <FormattedMessage
+        defaultMessage="Original Grade"
+        description="Edit Modal Original Grade header"
+        id="gradebook.GradesView.EditModal.headers.originalGrade"
+      />
+    }
+    value={20}
+  />
+  <HistoryHeader
+    id="current-grade"
+    label={
+      <FormattedMessage
+        defaultMessage="Current Grade"
+        description="Edit Modal Current Grade header"
+        id="gradebook.GradesView.EditModal.headers.currentGrade"
+      />
+    }
+    value={2}
+  />
+</div>
+`;
+
+exports[`ModalHeaders Component snapshots gradeOverrideHistoryError is empty and open is false modal closed and StatusAlert closed 1`] = `
+<div>
+  <HistoryHeader
+    id="assignment"
+    label={
+      <FormattedMessage
+        defaultMessage="Assignment"
+        description="Edit Modal Assignment header"
+        id="gradebook.GradesView.EditModal.headers.assignment"
+      />
+    }
+    value="Qwerty"
+  />
+  <HistoryHeader
+    id="student"
+    label={
+      <FormattedMessage
+        defaultMessage="Student"
+        description="Edit Modal Student header"
+        id="gradebook.GradesView.EditModal.headers.student"
+      />
+    }
+    value="Uiop"
+  />
+  <HistoryHeader
+    id="original-grade"
+    label={
+      <FormattedMessage
+        defaultMessage="Original Grade"
+        description="Edit Modal Original Grade header"
+        id="gradebook.GradesView.EditModal.headers.originalGrade"
+      />
+    }
+    value={20}
+  />
+  <HistoryHeader
+    id="current-grade"
+    label={
+      <FormattedMessage
+        defaultMessage="Current Grade"
+        description="Edit Modal Current Grade header"
+        id="gradebook.GradesView.EditModal.headers.currentGrade"
+      />
+    }
+    value={2}
+  />
+</div>
+`;
--- a/src/components/GradesView/EditModal/snapshots/test.jsx.snap
+++ b/src/components/GradesView/EditModal/snapshots/test.jsx.snap
@@ -0,0 +1,125 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EditMoal Component snapshots gradeOverrideHistoryError is and empty and open is true modal open and StatusAlert showing 1`] = `
+<Modal
+  body={
+    <div>
+      <ModalHeaders />
+      <Alert
+        dismissible={false}
+        show={true}
+        variant="danger"
+      >
+        Weve been trying to contact you regarding...
+      </Alert>
+      <OverrideTable />
+      <div>
+        <FormattedMessage
+          defaultMessage="Showing most recent actions (max 5). To see more, please contact support"
+          description="Edit Modal visibility hint message"
+          id="gradebook.GradesView.EditModal.contactSupport"
+        />
+      </div>
+      <div>
+        <FormattedMessage
+          defaultMessage="Note: Once you save, your changes will be visible to students."
+          description="Edit Modal saved changes effect hint"
+          id="gradebook.GradesView.EditModal.saveVisibility"
+        />
+      </div>
+    </div>
+  }
+  buttons={
+    Array [
+      <Button
+        onClick={[MockFunction this.handleAdjustedGradeClick]}
+        variant="primary"
+      >
+        <FormattedMessage
+          defaultMessage="Save Grades"
+          description="Edit Modal Save button label"
+          id="gradebook.GradesView.EditModal.saveGrade"
+        />
+      </Button>,
+    ]
+  }
+  closeText={
+    <FormattedMessage
+      defaultMessage="Cancel"
+      description="Edit Modal close button text"
+      id="gradebook.GradesView.EditModal.closeText"
+    />
+  }
+  onClose={[MockFunction this.closeAssignmentModal]}
+  open={true}
+  title={
+    <FormattedMessage
+      defaultMessage="Edit Grades"
+      description="Edit Modal title"
+      id="gradebook.GradesView.EditModal.title"
+    />
+  }
+/>
+`;
+
+exports[`EditMoal Component snapshots gradeOverrideHistoryError is empty and open is false modal closed and StatusAlert closed 1`] = `
+<Modal
+  body={
+    <div>
+      <ModalHeaders />
+      <Alert
+        dismissible={false}
+        show={false}
+        variant="danger"
+      >
+        
+      </Alert>
+      <OverrideTable />
+      <div>
+        <FormattedMessage
+          defaultMessage="Showing most recent actions (max 5). To see more, please contact support"
+          description="Edit Modal visibility hint message"
+          id="gradebook.GradesView.EditModal.contactSupport"
+        />
+      </div>
+      <div>
+        <FormattedMessage
+          defaultMessage="Note: Once you save, your changes will be visible to students."
+          description="Edit Modal saved changes effect hint"
+          id="gradebook.GradesView.EditModal.saveVisibility"
+        />
+      </div>
+    </div>
+  }
+  buttons={
+    Array [
+      <Button
+        onClick={[MockFunction this.handleAdjustedGradeClick]}
+        variant="primary"
+      >
+        <FormattedMessage
+          defaultMessage="Save Grades"
+          description="Edit Modal Save button label"
+          id="gradebook.GradesView.EditModal.saveGrade"
+        />
+      </Button>,
+    ]
+  }
+  closeText={
+    <FormattedMessage
+      defaultMessage="Cancel"
+      description="Edit Modal close button text"
+      id="gradebook.GradesView.EditModal.closeText"
+    />
+  }
+  onClose={[MockFunction this.closeAssignmentModal]}
+  open={false}
+  title={
+    <FormattedMessage
+      defaultMessage="Edit Grades"
+      description="Edit Modal title"
+      id="gradebook.GradesView.EditModal.title"
+    />
+  }
+/>
+`;
--- a/src/components/GradesView/EditModal/index.jsx
+++ b/src/components/GradesView/EditModal/index.jsx
@@ -6,13 +6,15 @@ import { connect } from 'react-redux';
 import {
  Button,
  Modal,
-  StatusAlert,
+  Alert,
 } from '@edx/paragon';
+import { FormattedMessage } from '@edx/frontend-platform/i18n';

 import selectors from 'data/selectors';
 import actions from 'data/actions';
 import thunkActions from 'data/thunkActions';

+import messages from './messages';
 import OverrideTable from './OverrideTable';
 import ModalHeaders from './ModalHeaders';

@@ -46,27 +48,26 @@ export class EditModal extends React.Component {
    return (
      <Modal
        open={this.props.open}
-        title="Edit Grades"
-        closeText="Cancel"
+        title={<FormattedMessage {...messages.title} />}
+        closeText={<FormattedMessage {...messages.closeText} />}
        body={(
          <div>
            <ModalHeaders />
-            <StatusAlert
-              alertType="danger"
-              dialog={this.props.gradeOverrideHistoryError}
-              open={!!this.props.gradeOverrideHistoryError}
+            <Alert
+              variant="danger"
+              show={!!this.props.gradeOverrideHistoryError}
              dismissible={false}
-            />
+            >
+              {this.props.gradeOverrideHistoryError}
+            </Alert>
            <OverrideTable />
-            <div>Showing most recent actions (max 5). To see more, please contact
-              support.
-            </div>
-            <div>Note: Once you save, your changes will be visible to students.</div>
+            <div><FormattedMessage {...messages.visibility} /></div>
+            <div><FormattedMessage {...messages.saveVisibility} /></div>
          </div>
        )}
        buttons={[
          <Button variant="primary" onClick={this.handleAdjustedGradeClick}>
-            Save Grade
+            <FormattedMessage {...messages.saveGrade} />
          </Button>,
        ]}
        onClose={this.closeAssignmentModal}
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Ghassan Maslamani	ff4d0c75dd	feat: ensure lms api synced with latest value in config This change make it possible if LMS url to be changed, that the last value will be picked. This is simlair openedx/frontend-app-course-authoring/pull/389 which issue overhangio/tutor-mfe/issues/86, the fixes is needed so that dynamic config would work with tutor: overhangio/tutor-mfe/pull/69	2022-12-08 18:22:27 +00:00
Kyle McCormick	c4846f9ebd	fix: use getConfig in order to support runtime configuration (#286 ) (#287 ) Before, gradebook was reading config from `process.env` directly, which locked the app into using only static (build-time) configuration. In order to enable dynamic (runtime) configuration, we update gradebook to use frontend-platform's standard configuration interface: `mergeConfig()` and `getConfig()`. Bumps version from 1.5.0 to 1.6.0. (I would normally just do a patch release for a fix, but the version was hasn't been bumped for a while, so adding in full runtime configuration support seemed like it warranted a proper minor version bump.) Co-authored-by: Ghassan Maslamani <ghassan.maslamani@gmail.com>	2022-11-28 12:06:02 -05:00
Diana Olarte	bccd87fd49	feat: allow runtime configuration (#253 ) Allows frontend-app-gradebook to be configured at runtime using the LMS's new MFE Configuration API. Part of https://github.com/openedx/frontend-wg/issues/103	2022-11-14 20:35:54 +00:00
Simon Chen	03fa143fc1	Merge pull request #266 from fennec-tech/rtl-use-backslash-to-write-fractions RTL: use backslash to write fractions (grades)	2022-09-29 15:02:24 -04:00
Simon Chen	075846f869	Merge pull request #265 from fennec-tech/rtl-fix-percentage-direction RTL: fix (%) symbol to follow text direction	2022-09-29 14:49:14 -04:00
Abderraouf Mehdi Bouhali	1208d27d92	fix(rtl): use backslash to write fractions (grades)	2022-09-29 11:34:30 +01:00
Abderraouf Mehdi Bouhali	e345716bd4	fix(rtl): force % symbol to follow text direction	2022-09-29 10:11:26 +01:00
Maman Khan	2121a63c83	Removing codecov and coveralls packages (#245 ) * fix: removed coveralls and codecov packages with update in ci uploader * fix: pinning npm to version 8.5.x Co-authored-by: Abdullah Waheed <abdullah.waheed@arbisoft.com>	2022-09-28 10:47:57 -04:00
Matt Hughes	47cab71b3c	fix: do not squish the table with word wrapping we should handle word wrapping down at the level of specific cells which we can opt-in to non-default word-wrapping	2022-07-12 10:54:00 -04:00
Leangseu Kim	2d8af2ec00	fix: update and resolve dependencies	2022-07-07 13:23:23 -04:00
Leangseu Kim	d55abbe91e	fix: search blur state for every single charater input	2022-07-07 10:05:35 -04:00
Abdullah Waheed	a75f365bdd	refactor: migrated StatusAlert to Alert in GradesBook component refactor: migrated StatusAlert to Alert in StatusAlerts component refactor: updated unit tests mocks to set snapshot issues	2022-06-30 21:35:01 -04:00
Muhammad Abdullah Waheed	bbb7e895a5	Paragon table deprecation updation (#246 ) * refactor: updated table deprecation of HistoryTable * refactor: updated table deprecation of OverrideTable * refactor: updated table deprecation of GradebookTable * refactor: updated unit tests of OverrideTable according to new changes * fix: error for css * fix: strict dictionary error for react component * chore: update css and handle syntax errors * chore: update unit test * fix: remove datatable row status and update tests * fix: test coverage Co-authored-by: Leangseu Kim <lkim@edx.org> Co-authored-by: Ben Warzeski <bwarzeski@edx.org>	2022-06-30 14:22:29 -04:00
Muhammad Abdullah Waheed	bf70fd1450	fix: added specific npm version to fix peerDependency issue (#247 )	2022-06-16 15:06:30 +05:00
Jawayria	af2ece8290	Merge pull request #242 from openedx/jenkins/version-check-c6a4685 feat: Add package-lock file version check	2022-05-06 15:56:23 +05:00
edX requirements bot	620827d772	feat: Add package-lock file version check	2022-04-29 08:48:48 -04:00
edX requirements bot	c6a4685bf5	chore!: Dropped support for Node 12 (#239 ) * chore!: Dropped support for Node 12 * fix: dropped Node 12 Co-authored-by: Jawayria <39649635+Jawayria@users.noreply.github.com>	2022-04-14 12:53:54 -04:00
Leangseu Kim	8dd2237f9c	chore: update package lock after update to node 16	2022-04-12 10:36:36 -04:00
Usama Sadiq	97c58157f8	Merge pull request #238 from openedx/jenkins/transifex-client-migration-f07a96c fix: transifex migration to new client	2022-04-06 12:42:11 +05:00
UsamaSadiq	ce093efba4	build: update transifex pull translations command	2022-04-05 15:26:42 +05:00
Jawayria	799ef5b8a1	Merge pull request #224 from openedx/jawayria/node-16 feat: added support for node 16	2022-03-31 12:13:11 +05:00
Jawayria	f956351cf7	feat: add support for node 16	2022-03-31 12:01:12 +05:00
edX requirements bot	7772e21c6a	fix: transifex migration to new client	2022-03-17 08:47:39 -04:00
Sarina Canelake	f07a96ce58	Merge DEPR automation workflow Add DEPR workflow automation	2022-02-24 15:21:36 -05:00
Sarina Canelake	f64bc8d4a6	build: add DEPR workflow automation	2022-02-23 14:36:18 -05:00
Michael Vlasov	134dabb710	fix: gradebook table rtl tooltip position (#225 ) * fix: gradebook table rtl tooltip position Co-authored-by: vlasovmichael <mykhailo.vlasov@raccoongang.com>	2022-02-10 10:36:46 -05:00
Matt Hughes	65c25f00b6	Merge pull request #227 from openedx/matthugs/rename-github-group-to-match-org-structure chore: rename github group to match org. structure	2022-02-09 10:10:49 -05:00
Matt Hughes	31748e246e	chore: rename github group to match org. structure	2022-02-09 10:06:03 -05:00
Michael Vlasov	650be29ef9	feat: gradebook main container classname (#226 ) * feat: gradebook main container classname * feat: gradebook main container classname / snapshot tests Co-authored-by: vlasovmichael <mykhailo.vlasov@raccoongang.com>	2022-02-07 15:22:26 -05:00
Jhony Avella	b713ab5748	feat: enabling header override (#220 ) feat: new versions of package.json and lock fix: tests after adding header component Fixing tests change package files Signed-off-by: Jhony Avella <jhony.avella@edunext.co>	2021-12-21 10:40:22 -05:00
Jhony Avella	5fe80b4a52	fix: build the course id properly when the MFE is deployed in a subdirectory (#213 )	2021-12-21 10:38:58 -05:00
Carlos Muniz	9e04813d06	Merge pull request #219 from edx/i18n-string-definitions docs: Describe messages descriptions better	2021-12-03 09:35:26 -05:00
Carlos Muniz	a0e1a60d23	docs: Describe messages descriptions better These messages have been updated to be more descriptive. The message descriptions need to be more descriptive in order to be easily translated (i18n) into other languages.	2021-12-03 09:23:17 -05:00
Sarina Canelake	68c7944dd5	Merge pull request #217 from regisb/regisb/transifex feat: add compatibility with transifex	2021-11-29 12:37:26 -05:00
Régis Behmo	f4f6e5551f	feat: add compatibility with transifex Now that the frontend-app-gradebook resource was added to Transifex, we can start pulling strings fromt there. For now, the project contains very few translated string. Strings were pulled by running: make pull_translations This is for https://github.com/openedx/build-test-release-wg/issues/107	2021-11-22 12:12:29 +01:00
Usama Sadiq	ee99bfdaa4	Merge pull request #212 from edx/usamasadiq/replace-travis-with-github-ci BOM-2928: Replace Travis with GitHub CI	2021-11-16 16:56:36 +05:00
Usama Sadiq	318ce349fc	build: Replace Travis with GitHub CI	2021-10-25 17:12:32 +05:00
Ned Batchelder	8f1c89a025	build: use the organization commitlint check	2021-10-07 13:55:57 -04:00
Ben Warzeski	a1de3a8612	feat: Bulk Management reorganization, phase 1 (#206 ) * move GradesTab and BulkHistoryTab to views and control from container through redux * add data logic for view control and import success toast * add NetworkButton component for download/upload buttons * remove download button from Bulk History view and update heading and help text * add View control button to GradebookHeader if bulk management available * remove FilterMenuToggle from SearchControls * update BulkManagementControls to now include upload/download grades buttons * add Import Success toast * rename UserLabel to FilteredUsersLabel for clarity * add InterventionsReport component * update GradesView top-level component * messageing update (separate messages into per-component files) * style updates * update test plan * clean up css and add docstrings * typo fix * fix typo in bulk management view header	2021-08-26 10:37:35 -04:00
Nathan Sprenkle	4e26247ac3	docs: remove outdated screenshots (#211 )	2021-08-19 13:49:29 -04:00
Ben Warzeski	f21e6da598	download bulk management history if showBulkManagement (#210 ) * download bulk management history if showBulkManagement * separate fetchBulkUpgrade call from fetchTracks * 1.4.47	2021-08-09 10:49:04 -04:00
Nathan Sprenkle	650e9321b1	Simplify Bulk Management Config (#200 ) * refactor: simplify bulk management enabling Formerly, a course had to have bulk management enabled and have a master's track. This painted us into a corner where we had to create a workaround for enabling bulk management on non-master's track courses. Instead, this relies only on an enabled flag from edx-platform (based on a course waffle flag) which simplifies the enabling code here. * feat: remove unneeded bulk management allow-list	2021-08-04 11:04:55 -04:00
Ben Warzeski	e8a8cca483	fix: add excludedCourseRoles to bulk-grades fetch (#209 )	2021-08-04 09:46:51 -04:00
Ben Warzeski	f5d2a34660	Fix cohort url (#208 ) * fix cohorts fetch url * v1.4.45	2021-08-03 15:37:12 -04:00
Ben Warzeski	97d3a29a7f	fix: add track back into lms api service calls. (#207 ) * fix: add track back into lms api service calls. * fix tests * v1.4.44	2021-07-30 11:59:01 -04:00
Leangseu Kim	5b8f67e8d2	fix: update csv import error messages update csv error according discussed Ticket[au-66] version bump	2021-07-26 12:59:42 -04:00
Ben Warzeski	c6e33307ba	refactor: add transifex support to user-facing messages (#203 ) * clean up and test segment integration * add transifex config * move user-facing messages into messages files and translate in usage * lint cleanup * fix introduced typos * remove dead code * remove should-be-ignored temp translation files * make HistoryHeader use node-type to support translations * fix apostrophe * fix snapshot * v1.4.42	2021-07-22 10:45:18 -04:00
Ben Warzeski	a4df8f7238	refactor: update test coverage (#202 ) * clean up and test segment integration * add tests for action utils * add tests for store aggregator and utils * clean up un-used paths in thunkAction testUtils * clean up filter reducer coverage * add filter reducer tests for filterMenu actions * clean up grades selectors coverage * separate App and add unit tests * ignore external files in coverage analysis * remove old/unused code from StrictDict and clean up tests * clean up FileUploadForm coverage * more cleanup for StrictDict tests * clean up GradesTab test coverage * clean up GradesTab coverage * ignore reducer-mapping for unit-test coverage * clean up AssignmentFilter test coverage * add index-level test coverage * temp remove snapshots * re-add App snapshot * v1.4.41	2021-07-02 12:32:18 -04:00
Ben Warzeski	15b76edb5d	refactor: lms service testing (#199 ) * v1.4.40 * ignore accepted import eslint errors * clean up LmsApiService into smaller, tested modules in lms service * set default format before initial fetches * fix bulk grades export and grade filtering * fix clearing assignment grade filter badge * re-connect grade format control	2021-06-30 11:50:07 -04:00