Ensure update of Individual Gradebook

The Individual Gradebook was not updating when the user toggled
back to a previously selected grading period.

Test plan:
  1. Create a term and grading period that uses weighted grading periods
  2. Create a course with assignments and scores for students in
    those grading periods
  3. Open the Individual Gradebook
  4. Filter the grading periods to 'All Grading Periods' and
    select the first student
  5. It should list all grading periods and the weights
    the student has received
  6. Toggle the grading period filter to other
    grading periods and it should update the totals correctly
  7. Toggle the grading period filter back to 'All Grading Periods'
    and notice it updates the totals correctly

Fixes EVAL-2804

flag=none

Change-Id: I8ef11f5c1c19b114e9f7fde6e595f02824c08ce8
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/309795
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
Reviewed-by: Kai Bjorkman <kbjorkman@instructure.com>
Reviewed-by: Derek Williams <derek.williams@instructure.com>
QA-Review: Kai Bjorkman <kbjorkman@instructure.com>
Product-Review: Jody Sailor

ui/features/screenreader_gradebook/ember/components/fast_select_component.js

@@ -42,16 +42,21 @@ const FastSelectComponent = Component.extend({
   },
 
   valueDidChange: function () {
-    const {items} = this
-    const {value} = this
     let selected = null
-    if (value && items) {
+    if (this.value && this.items) {
-      selected = items.findBy(this.valuePath, value)
+      selected = this.items.findBy(this.valuePath, this.value)
     }
-    set(this, 'selected', selected)
+    set(this, 'selected', selected || null)
-  }
+  }.observes('value'),
-    .observes('value')
+
-    .on('init'),
+  initialize: function () {
+    const value = this.value || this.valueDefault
+    let selected
+    if (value && this.items) {
+      selected = this.items.findBy(this.valuePath, value)
+    }
+    set(this, 'selected', selected || null)
+  }.on('init'),
 
   itemsWillChange: function () {
     const {items} = this
@@ -109,7 +114,7 @@ const FastSelectComponent = Component.extend({
     this.arrayDidChange(this.items, 0, 0, get(this.items, 'length'))
   }.observes('labelPath'),
 
-  arrayDidChange(items, start, removeCount, addCount) {
+  arrayDidChange(items, start, _removeCount, addCount) {
     let value
     const select = get(this, 'element')
     const hasDefault = get(this, 'hasDefaultOption')
@@ -127,7 +132,7 @@ const FastSelectComponent = Component.extend({
       const option = doc.createElement('option')
       option.textContent = label
       option.value = value
-      if (this.value === value) {
+      if ((this.value || this.valueDefault) === value) {
         option.selected = true
         set(this, 'selected', item)
       }

ui/features/screenreader_gradebook/ember/controllers/screenreader_gradebook_controller.js

@@ -85,7 +85,7 @@ function studentsUniqByEnrollments(...args) {
       array.pushObject(student)
       return array
     },
-    removedItem(array, enrollment, _, instanceMeta) {
+    removedItem(array, enrollment, __, instanceMeta) {
       const student = array.findBy('id', enrollment.user_id)
       student.sections.removeObject(enrollment.course_section_id)
 
@@ -177,7 +177,7 @@ const ScreenreaderGradebookController = Ember.ObjectController.extend({
     }
   })(),
 
-  selectedGradingPeriod: function (key, newValue) {
+  selectedGradingPeriod: function (_key, newValue) {
     let savedGP
     const savedGradingPeriodId = userSettings.contextGet('gradebook_current_grading_period')
     if (savedGradingPeriodId) {
@@ -418,6 +418,7 @@ const ScreenreaderGradebookController = Ember.ObjectController.extend({
       () =>
         $.ajaxJSON(`/api/v1/progress/${attachmentProgress.progress_id}`, 'GET').then(response => {
           if (response.workflow_state === 'completed') {
+            // eslint-disable-next-line promise/catch-or-return
             $.ajaxJSON(
               `/api/v1/users/${ENV.current_user_id}/files/${attachmentProgress.attachment_id}`,
               'GET'
@@ -478,7 +479,7 @@ const ScreenreaderGradebookController = Ember.ObjectController.extend({
       learningMasteryEnabled: ENV.GRADEBOOK_OPTIONS.outcome_gradebook_enabled,
     }
     const component = React.createElement(GradebookSelector, props)
-    return ReactDOM.render(component, mountPoint)
+    ReactDOM.render(component, mountPoint)
   }.on('init'),
 
   willDestroy() {

ui/features/screenreader_gradebook/jst/settings/grading_period_select.hbs

@@ -6,16 +6,18 @@
       </label>
     </div>
     <div class="span8">
-      {{
+      {{#if selectedGradingPeriod.id}}
-        fast-select
+        {{
-        id="grading_period_select"
+          fast-select
-        class="grading_period_select"
+          id="grading_period_select"
-        items=gradingPeriods
+          class="grading_period_select"
-        selected=selectedGradingPeriod
+          items=gradingPeriods
-        value=selectedGradingPeriod.id
+          selected=selectedGradingPeriod
-        valuePath="id"
+          valueDefault=selectedGradingPeriod.id
-        labelPath="title"
+          valuePath="id"
-     }}
+          labelPath="title"
+      }}
+     {{/if}}
     </div>
   </div>
 {{/if}}