Overall Grade Range in Grading does not show consistant view when grades are removed

TNL2159

cms/djangoapps/contentstore/features/grading.feature

@@ -14,6 +14,14 @@ Feature: CMS.Course Grading
         When I add "6" new grades
         Then I see I now have "5" grades
 
+    Scenario: When user removes a grade the remaining grades should be consistent
+      Given I have opened a new course in Studio
+      And I am viewing the grading settings
+      When I add "2" new grade
+      Then Grade list has "ABCF" grades
+      And I delete a grade
+      Then Grade list has "ABF" grades
+
     # Cannot reliably make the delete button appear so using javascript instead
     Scenario: Users can delete grading ranges
         Given I have opened a new course in Studio

cms/djangoapps/contentstore/features/grading.py

@@ -32,6 +32,14 @@ def delete_grade(step):
     world.browser.execute_script('document.getElementsByClassName("remove-button")[0].click()')
 
 
+@step(u'Grade list has "([^"]*)" grades$')
+def check_grade_values(step, grade_list):  # pylint: disable=unused-argument
+    visible_list = ''.join(
+        [grade.text for grade in world.css_find('.letter-grade')]
+    )
+    assert_equal(visible_list, grade_list, 'Grade lists should be equal')
+
+
 @step(u'I see I now have "([^"]*)" grades$')
 def view_grade_slider(step, how_many):
     grade_slider_css = '.grade-specific-bar'

cms/static/js/views/settings/grading.js

@@ -233,6 +233,28 @@ var GradingView = ValidatingView.extend({
         };
     },
 
+    renderGradeLabels: function(){
+        // When a grade is removed, keep the remaining grades consistent.
+        var _this = this;
+        if (_this.descendingCutoffs.length === 1 && _this.descendingCutoffs[0]['designation'] === _this.GRADES[0]) {
+            _this.descendingCutoffs[0]['designation'] = 'Pass';
+            _this.setTopGradeLabel();
+        } else {
+            _.each(_this.descendingCutoffs, function(cutoff, index) {
+                cutoff['designation'] = _this.GRADES[index];
+            });
+            _this.updateDomGradeLabels();
+        }
+    },
+    updateDomGradeLabels: function(){
+        // Update the DOM elements (Grades)
+        var _this = this;
+        var gradeElements = this.$el.find('.grades .letter-grade[contenteditable=true]');
+        _.each(gradeElements, function(element, index) {
+            if (index !== 0 ) $(element).text(_this.GRADES[index])
+        });
+    },
+
     saveCutoffs: function() {
         this.model.set('grade_cutoffs',
                 _.reduce(this.descendingCutoffs,
@@ -292,12 +314,9 @@ var GradingView = ValidatingView.extend({
         this.descendingCutoffs.splice(index, 1);
         domElement.remove();
 
-        if (this.descendingCutoffs.length === 1 && this.descendingCutoffs[0]['designation'] === this.GRADES[0]) {
-            this.descendingCutoffs[0]['designation'] = 'Pass';
-            this.setTopGradeLabel();
-        }
         this.setFailLabel();
         this.renderGradeRanges();
+        this.renderGradeLabels();
         this.saveCutoffs();
     },