feat: default grade designations configurable from settings (#32406)

cms/static/js/factories/settings_graders.js

@@ -3,7 +3,7 @@ define([
 ], function($, GradingView, CourseGradingPolicyModel) {
     'use strict';
 
-    return function(courseDetails, gradingUrl, courseAssignmentLists) {
+    return function(courseDetails, gradingUrl, courseAssignmentLists, gradeDesignations) {
         var model, editor;
 
         $('form :input')
@@ -19,7 +19,8 @@ define([
         editor = new GradingView({
             el: $('.settings-grading'),
             model: model,
-            courseAssignmentLists: courseAssignmentLists
+            courseAssignmentLists: courseAssignmentLists,
+            gradeDesignations: gradeDesignations
         });
         editor.render();
     };

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

@@ -34,6 +34,7 @@ function(ValidatingView, _, $, ui, GraderView, StringUtils, HtmlUtils) {
                 $('#course_grade_cutoff-tpl').text()
             );
             this.setupCutoffs();
+            this.setupGradeDesignations(options.gradeDesignations);
 
             this.listenTo(this.model, 'invalid', this.handleValidationError);
             this.listenTo(this.model, 'change', this.showNotificationBar);
@@ -318,7 +319,7 @@ function(ValidatingView, _, $, ui, GraderView, StringUtils, HtmlUtils) {
         addNewGrade: function(e) {
             e.preventDefault();
             var gradeLength = this.descendingCutoffs.length; // cutoffs doesn't include fail/f so this is only the passing grades
-            if (gradeLength > 3) {
+            if (gradeLength > this.GRADES.length - 1) {
             // TODO shouldn't we disable the button
                 return;
             }
@@ -399,6 +400,9 @@ function(ValidatingView, _, $, ui, GraderView, StringUtils, HtmlUtils) {
             this.descendingCutoffs = _.sortBy(this.descendingCutoffs,
                 function(gradeEle) { return -gradeEle.cutoff; });
         },
+        setupGradeDesignations: function(gradeDesignations) {
+            if (Array.isArray(gradeDesignations) && gradeDesignations.length > 1) { this.GRADES = gradeDesignations.slice(0, 11); }
+        },
         revertView: function() {
             var self = this;
             this.model.fetch({

cms/static/sass/views/_settings.scss

@@ -777,23 +777,23 @@
                 height: 17px;
               }
 
-              &:nth-child(1) {
+              &:nth-child(5n+1) {
                 background: #4fe696;
               }
 
-              &:nth-child(2) {
+              &:nth-child(5n+2) {
                 background: #ffdf7e;
               }
 
-              &:nth-child(3) {
+              &:nth-child(5n+3) {
                 background: #ffb657;
               }
 
-              &:nth-child(4) {
+              &:nth-child(5n+4) {
                 background: #ef54a1;
               }
 
-              &:nth-child(5),
+              &:nth-child(5n+5),
               &.bar-fail {
                 background: #fb336c;
               }