show muted assignment indicator in gradebook2

there was already a tooltip as you hover over
each submission and the header menu let you mute/
unmute but I guess people wanted to see the little
'muted' icon in the header as well

in the process I broke it out into its own
handlebars template

fixes: #6804

test plan:
 * mute an assignment
 * go to gradebook2
 * look for a little mute icon in the header of
   that  column like on gradebook1

Change-Id: If728a4f11241440d377264123c0824edf05f12b3
Reviewed-on: https://gerrit.instructure.com/8114
Tested-by: Hudson <hudson@instructure.com>
Tested-by: Jake Sorce <jake@instructure.com>
Reviewed-by: Jake Sorce <jake@instructure.com>

app/coffeescripts/gradebook2/Gradebook.coffee

@@ -2,7 +2,8 @@
 define 'compiled/Gradebook', [
   'i18n'
   'jst/gradebook2/section_to_show_menu'
-], (I18n, sectionToShowMenuTemplate) ->
+  'jst/gradebook2/column_header'
+], (I18n, sectionToShowMenuTemplate, columnHeaderTemplate) ->
   I18n = I18n.scoped 'gradebook2'
 
   class Gradebook
@@ -18,7 +19,7 @@ define 'compiled/Gradebook', [
       @show_attendance = $.store.userGet("show_attendance_#{@options.context_code}") == 'true'
       @include_ungraded_assignments = $.store.userGet("include_ungraded_assignments_#{@options.context_code}") == 'true'
       $.subscribe 'assignment_group_weights_changed', @buildRows
-      $.subscribe 'assignment_muting_toggled', @buildRows
+      $.subscribe 'assignment_muting_toggled', @handleAssignmentMutingChange
       $.subscribe 'submissions_updated', @updateSubmissionsFromExternal
       promise = $.when(
         $.ajaxJSON( @options.assignment_groups_url, "GET", {}, @gotAssignmentGroups),
@@ -115,6 +116,14 @@ define 'compiled/Gradebook', [
     rowFilter: (student) =>
       !@sectionToShow || (student.section.id == @sectionToShow)
 
+    handleAssignmentMutingChange: (assignment) =>
+      idx = @gradeGrid.getColumnIndex("assignment_#{assignment.id}")
+      colDef = @gradeGrid.getColumns()[idx]
+      colDef.name = @assignmentHeaderHtml(assignment)
+      @gradeGrid.setColumns(@gradeGrid.getColumns())
+      @fixColumnReordering()
+      @buildRows()
+
     # filter, sort, and build the dataset for slickgrid to read from, then force
     # a full redraw
     buildRows: =>
@@ -434,6 +443,12 @@ define 'compiled/Gradebook', [
                                 submissionType is "attendance" and !@show_attendance
       res.concat(@aggregateColumns)
 
+    assignmentHeaderHtml: (assignment) ->
+      columnHeaderTemplate
+        assignment: assignment
+        href: "#{@options.context_url}/assignments/#{assignment.id}"
+        showPointsPossible: assignment.points_possible?
+
     initGrid: =>
       #this is used to figure out how wide to make each column
       $widthTester = $('<span style="padding:10px" />').appendTo('#content')
@@ -459,10 +474,6 @@ define 'compiled/Gradebook', [
       }]
 
       @allAssignmentColumns = for id, assignment of @assignments
-        href = "#{@options.context_url}/assignments/#{assignment.id}"
-        html = "<a class='assignment-name' href='#{href}'>#{assignment.name}</a>
-                <a class='gradebook-header-drop' data-assignment-id='#{assignment.id}' href='#' role='button'>#{I18n.t 'assignment_options', 'Assignment Options'}</a>"
-        html += "<div class='assignment-points-possible'>#{I18n.t 'points_out_of', "out of %{points_possible}", points_possible: assignment.points_possible}</div>" if assignment.points_possible?
         outOfFormatter = assignment &&
                          assignment.grading_type == 'points' &&
                          assignment.points_possible? &&
@@ -472,7 +483,7 @@ define 'compiled/Gradebook', [
         columnDef =
           id: fieldName
           field: fieldName
-          name: html
+          name: @assignmentHeaderHtml(assignment)
           object: assignment
           formatter: this.cellFormatter
           editor: outOfFormatter ||
@@ -485,7 +496,6 @@ define 'compiled/Gradebook', [
           toolTip: true
           type: 'assignment'
 
-
         if fieldName in @assignmentsToHide
           columnDef.width = 10
           do (fieldName) =>

app/stylesheets/gradebook2.sass

@@ -74,7 +74,9 @@ $cell_height: 33px
     overflow: hidden
     text-overflow: ellipsis
     white-space: nowrap
-
+  .muted
+    background: url('/images/sound_mute.png') no-repeat center right
+    padding-right: 16px
   .assignment-points-possible
     font-weight: normal
     text-shadow: #84848a 0 0 1px

app/views/jst/gradebook2/column_header.handlebars

@@ -0,0 +1,11 @@
+<a {{#if assignment.muted}} title="{{#t "this_assignment_is_muted"}}This assignment is muted{{/t}}" {{/if}} class="assignment-name {{#if assignment.muted}}muted{{/if}}" href="{{href}}">
+  {{assignment.name}}
+</a>
+<a class="gradebook-header-drop" data-assignment-id="{{assignment.id}}" href="#" role="button">
+  {{#t "assignment_options"}}Assignment Options{{/t}}
+</a>
+{{#if showPointsPossible}}
+  <div class='assignment-points-possible'>
+    {{#t "points_out_of"}}Out of {{assignment.points_possible}}{{/t}}
+  </div>
+{{/if}}

config/assets.yml

@@ -267,6 +267,7 @@ javascripts:
     - public/javascripts/jst/SubmissionDetailsDialog.js
     - public/javascripts/compiled/SubmissionDetailsDialog.js
     - public/javascripts/jst/gradebook2/section_to_show_menu.js
+    - public/javascripts/jst/gradebook2/column_header.js
     - public/javascripts/compiled/gradebook2/Gradebook.js
     - public/javascripts/compiled/gradebook2/SubmissionCell.js
   gradebooks:

spec/selenium/gradebook2_spec.rb

@@ -221,6 +221,29 @@ describe "gradebook2 selenium tests" do
     final_score_for_row(1).should eql STUDENT_2_TOTAL_IGNORING_UNGRADED
   end
 
+  def toggle_muting(assignment)
+    find_with_jquery(".gradebook-header-drop[data-assignment-id='#{assignment.id}']").click
+    find_with_jquery('[data-action="toggleMuting"]').click
+    find_with_jquery('.ui-dialog-buttonpane .ui-button:visible').click
+    wait_for_ajaximations
+  end
+
+  it "should handle muting/unmuting correctly" do
+    toggle_muting(@second_assignment)
+    find_with_jquery(".slick-header-column[id*='assignment_#{@second_assignment.id}'] .muted").should be_displayed
+    @second_assignment.reload.should be_muted
+
+    # reload the page and make sure it remembered the setting
+    get "/courses/#{@course.id}/gradebook2"
+    wait_for_ajaximations
+    find_with_jquery(".slick-header-column[id*='assignment_#{@second_assignment.id}'] .muted").should be_displayed
+
+    # make sure you can un-mute
+    toggle_muting(@second_assignment)
+    find_with_jquery(".slick-header-column[id*='assignment_#{@second_assignment.id}'] .muted").should be_nil
+    @second_assignment.reload.should_not be_muted
+  end
+
   it "should treat ungraded as 0's when asked, and ignore when not" do
     # make sure it shows like it is not treating ungraded as 0's by default
     is_checked('#include_ungraded_assignments').should be_false