fix: use SITE_NAME env var for index.html title (#178)

We currently have a hard-coded “edX” string in Gradebook’s index.html file.  This replaces that string with the value of the SITE_NAME environment variable, which is set at build time from .env.development for dev, and from the build process at production build-time.

.env

@@ -13,7 +13,7 @@ ACCESS_TOKEN_COOKIE_NAME=null,
 CSRF_COOKIE_NAME='csrftoken',
 NEW_RELIC_APP_ID=null,
 NEW_RELIC_LICENSE_KEY=null,
-SITE_NAME=null,
+SITE_NAME='',
 MARKETING_SITE_BASE_URL=null,
 SUPPORT_URL=null,
 CONTACT_URL=null,
@@ -31,3 +31,5 @@ ENTERPRISE_MARKETING_URL=null,
 ENTERPRISE_MARKETING_UTM_SOURCE=null,
 ENTERPRISE_MARKETING_UTM_CAMPAIGN=null,
 ENTERPRISE_MARKETING_FOOTER_UTM_MEDIUM=null,
+
+BULK_MANAGEMENT_SPECIAL_ACCESS_COURSE_IDS=null,

.env.development

@@ -13,7 +13,7 @@ CSRF_TOKEN_API_PATH='/csrf/api/v1/token'
 REFRESH_ACCESS_TOKEN_ENDPOINT='http://localhost:18000/login_refresh'
 ACCESS_TOKEN_COOKIE_NAME='edx-jwt-cookie-header-payload'
 USER_INFO_COOKIE_NAME='edx-user-info'
-SITE_NAME='edX'
+SITE_NAME=localhost
 
 DATA_API_BASE_URL='http://localhost:8000'
 // LMS_CLIENT_ID should match the lms DOT client application id your LMS containe
@@ -38,3 +38,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=null

.github/CODEOWNERS

@@ -0,0 +1,6 @@
+# Code owners for frontend-app-gradebook, editable gradebook micro-frontend (MFE)
+
+# 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

.github/pull_request_template.md

@@ -0,0 +1,28 @@
+**TL;DR -** [ A short summary of what this PR does and why ]
+
+JIRA: [JIRA-XXXX](https://openedx.atlassian.net/browse/JIRA-XXXX)
+
+**What changed?**
+
+- [ More in depth breakdown of changes ]
+- [ Peripheral things that got changed ]
+- [ etc... ]
+
+**Developer Checklist**
+- [ ] Test suites passing
+- [ ] Received code-owner approving review
+- [ ] Bumped version number [package.json](../package.json)
+
+**Testing Instructions**
+
+[ How should a reviewer test this PR? ]
+
+**Reviewer Checklist**
+
+Collectively, these should be completed by reviewers of this PR:
+
+- [ ] I've done a visual code review
+- [ ] I've tested the new functionality
+
+
+FYI: @edx/masters-devs-gta

.gitignore

@@ -1,6 +1,5 @@
 .DS_Store
 .eslintcache
-.idea
 node_modules
 npm-debug.log
 coverage
@@ -14,3 +13,7 @@ dist/
 *~
 *.swo
 *.swp
+
+### Development environments ###
+.idea
+.vscode

README.md

@@ -4,13 +4,21 @@
 [![license](https://img.shields.io/npm/l/@edx/frontend-app-gradebook.svg)](@edx/frontend-app-gradebook)
 [![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)
 
-# gradebook
+# Gradebook
 
-Please tag **@edx/educator-neem** on any PRs or issues.
+Gradebook allows course staff to view, filter, and override subsection grades for a course. Additionally for Masters courses, Gradebook enables bulk management of subsection grades.
 
-## Introduction
+Jump to:
 
-The front-end of our editable Gradebook feature.
+- [Should I use Gradebook in my course?](#should-i-use-gradebook-in-my-course)
+- [Quickstart](#quickstart)
+
+For existing documentation see:
+
+- Basic Usage: [Review Learner Grades (read-the-docs)](https://edx.readthedocs.io/projects/edx-partner-course-staff/en/latest/student_progress/course_grades.html#review-learner-grades-on-the-instructor-dashboard)
+- Bulk Grade Management: [Override Learner Subsection Scores in Bulk (read-the-docs)](https://edx.readthedocs.io/projects/edx-partner-course-staff/en/latest/student_progress/course_grades.html#review-learner-grades-on-the-instructor-dashboard)
+
+## Should I use Gradebook in my course?
 
 ### What does this offer over the legacy gradebook?
 
@@ -44,7 +52,9 @@ depending on their needs. Instructors that expect to review grades infrequently
 to the problem in question will have a worse UX than the legacy gradebook provides. Instructors that rely on the graphs
 generated by the current gradebook might find the lack of autogenerated graphs to be frustrating.
 
-## Installation
+## Quickstart
+
+### Installation
 
 To install gradebook into your project:
 ```
@@ -64,7 +74,7 @@ Note that starting the container executes the `npm run start` script which will
 ## Configuring for local use in edx-platform
 
 Assuming you've got the UI running at `http://localhost:1994`, you can configure the LMS in edx-platform
-to point to your local gradebook from the instructor dashboard by putting this settings in `lms/env/private.py`:
+to point to your local gradebook from the instructor dashboard by putting this setting in `lms/env/private.py`:
 ```
 WRITABLE_GRADEBOOK_URL = 'http://localhost:1994'
 ```
@@ -76,10 +86,11 @@ check the ``enabled`` and ``enabled for all courses`` boxes.
 
 2. Waffle > Switches.  Add the ``grades.assume_zero_grade_if_absent`` switch and make it active.
 
-3. Waffle_utils > Waffle flag course overrides.  You want to activate this flag for any course
-in which you'd like to enable the gradebook.  Add a course override flag using a course id and the flag name
-``grades.writable_gradebook``.  Make sure to check the ``enabled`` box.  Alternatively, you could add this as a
-regular waffle flag to enable the gradebook for all courses.
+3. Waffle_utils > Waffle flag course overrides.  Activate waffle flags for courses where you want to enable Gradebook functionality:
+    - Enable Gradebook by adding the ``grades.writable_gradebook`` add checking the ``enabled`` box.
+    - Enable Bulk Grade Management by adding the ``grades.bulk_management`` flag and checking the ``enabled`` box.
+
+    Alternatively, you could add these as regular waffle flags to enable the functionality for all courses.
 
 **NOTE:** IF the above flags are not configured correctly, the gradebook may appear to work, but will return bogus
 numbers for grades. If your gradebook isn't accepting your changes, or the changes aren't resulting in sane, 

openedx.yaml

@@ -1,13 +1,9 @@
 # This file describes this Open edX repo, as described in OEP-2:
 # http://open-edx-proposals.readthedocs.io/en/latest/oeps/oep-0002.html#specification
 
-nick: grbk
 tags:
   - frontend-app
   - masters
 oeps:
   oep-2: true    # Repository metadata
 openedx-release: {ref: master}
-owner:
-  type: team
-  team: edx/masters-devs-gta

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@edx/frontend-app-gradebook",
-  "version": "1.4.16",
+  "version": "1.4.18",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edx/frontend-app-gradebook",
-  "version": "1.4.16",
+  "version": "1.4.19",
   "description": "edx editable gradebook-ui to manipulate grade overrides on subsections",
   "repository": {
     "type": "git",

public/index.html

@@ -1,9 +1,9 @@
 <!doctype html>
 <html lang="en-us">
   <head>
-      <title>Gradebook | edX</title>
+      <title>Gradebook | <%= process.env.SITE_NAME %></title>
       <meta charset="utf-8">
-      <meta name="viewport" content="width=device-width, initial-scale=1.0">  
+      <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <link rel="shortcut icon" href="<%=htmlWebpackPlugin.options.FAVICON_URL%>" type="image/x-icon" />
   </head>
   <body>

src/components/Gradebook/Assignments.jsx

@@ -78,9 +78,6 @@ export class Assignments extends React.Component {
       <Collapsible title="Assignments" defaultOpen className="filter-group mb-3">
         <div>
           <div className="student-filters">
-            <span className="label">
-              Assignment Types:
-            </span>
             <InputSelect
               label="Assignment Types"
               name="assignment-types"
@@ -92,9 +89,6 @@ export class Assignments extends React.Component {
             />
           </div>
           <div className="student-filters">
-            <span className="label">
-              Assignment:
-            </span>
             <InputSelect
               label="Assignment"
               name="assignment"
@@ -105,7 +99,6 @@ export class Assignments extends React.Component {
               disabled={this.props.assignmentFilterOptions.length === 0}
             />
           </div>
-          <p>Grade Range (0% - 100%)</p>
           <form className="grade-filter-inputs" onSubmit={this.handleSubmitAssignmentGrade}>
             <div className="percent-group">
               <InputText

src/components/Gradebook/gradebook.scss

@@ -31,13 +31,9 @@
 }
 
 .student-filters{
-    display: flex;
     .label{
         padding-top: 30px;
     }
-    .form-group{
-        margin-left: 10px;
-    }
 }
 .grade-history-header{
     float: left;

src/components/Gradebook/index.jsx

@@ -252,7 +252,7 @@ export default class Gradebook extends React.Component {
   safeSetState = this.createLimitedSetter(
     'adjustedGradePossible',
     'adjustedGradeValue',
-    'assignmnentName',
+    'assignmentName',
     'modalOpen',
     'reasonForChange',
     'todaysDate',

src/containers/GradebookPage/index.jsx

@@ -28,6 +28,7 @@ import {
   formatMaxCourseGrade,
 } from '../../data/selectors/grades';
 import { selectableAssignmentLabels } from '../../data/selectors/filters';
+import { hasSpecialBulkManagementAccess } from '../../data/selectors/special';
 import { getCohortNameById } from '../../data/selectors/cohorts';
 import { fetchAssignmentTypes } from '../../data/actions/assignmentTypes';
 import { getRoles } from '../../data/actions/roles';
@@ -97,7 +98,10 @@ const mapStateToProps = (state, ownProps) => (
     selectedCohort: state.filters.cohort,
     selectedAssignmentType: state.filters.assignmentType,
     selectedAssignment: (state.filters.assignment || {}).label,
-    showBulkManagement: stateHasMastersTrack(state) && state.config.bulkManagementAvailable,
+    showBulkManagement: (
+      hasSpecialBulkManagementAccess(ownProps.match.params.courseId)
+      || (stateHasMastersTrack(state) && state.config.bulkManagementAvailable)
+    ),
     showSpinner: shouldShowSpinner(state),
     showSuccess: state.grades.showSuccess,
     totalUsersCount: state.grades.totalUsersCount,

src/data/selectors/special.js

@@ -0,0 +1,12 @@
+// Certain course runs may be expressly allowed to view the
+// bulk management tools, bypassing the other checks.
+// Note that this does not affect whether or not the backend
+// LMS API will permit usage of the tool.
+
+const hasSpecialBulkManagementAccess = courseId => {
+  const specialIdList = process.env.BULK_MANAGEMENT_SPECIAL_ACCESS_COURSE_IDS || '';
+  return specialIdList.split(',').includes(courseId);
+};
+
+export { hasSpecialBulkManagementAccess };
+export default hasSpecialBulkManagementAccess;