add view menu to gradebook

this only adds the view container and dummy menu items

closes: CNVS-31604

test plan:
  - enable Gradezilla
  - View menu drop down is now present (nothing is wired up)

Change-Id: I8617e166cc949829f8114a58f0aff65dc5473817
Reviewed-on: https://gerrit.instructure.com/100360
Reviewed-by: Spencer Olson <solson@instructure.com>
Tested-by: Jenkins
Reviewed-by: Jeremy Neander <jneander@instructure.com>
QA-Review: Anju Reddy <areddy@instructure.com>
Product-Review: Keith T. Garner <kgarner@instructure.com>

app/coffeescripts/gradezilla/Gradebook.coffee

@@ -33,6 +33,7 @@ define [
   'jsx/gradezilla/default_gradebook/components/AssignmentGroupColumnHeader'
   'jsx/gradezilla/default_gradebook/components/StudentColumnHeader'
   'jsx/gradezilla/default_gradebook/components/TotalGradeColumnHeader'
+  'jsx/gradezilla/default_gradebook/components/ViewOptionsMenu'
   'jsx/gradezilla/SISGradePassback/PostGradesStore'
   'jsx/gradezilla/SISGradePassback/PostGradesApp'
   'jsx/gradezilla/SubmissionStateMap'
@@ -64,7 +65,7 @@ define [
   GradingSchemeHelper, UserSettings, Spinner, SubmissionDetailsDialog, AssignmentGroupWeightsDialog,
   GradeDisplayWarningDialog, PostGradesFrameDialog, SubmissionCell, GradebookHeaderMenu, NumberCompare, htmlEscape,
   AssignmentColumnHeader, AssignmentGroupColumnHeader, StudentColumnHeader, TotalGradeColumnHeader,
-  PostGradesStore, PostGradesApp, SubmissionStateMap, GroupTotalCellTemplate, RowStudentNameTemplate,
+  ViewOptionsMenu, PostGradesStore, PostGradesApp, SubmissionStateMap, GroupTotalCellTemplate, RowStudentNameTemplate,
   SectionMenuView, GradingPeriodMenuView, GradebookKeyboardNav, assignmentHelper
 ) ->
 
@@ -1009,6 +1010,7 @@ define [
       $('.post-grades-placeholder').toggle(showButton)
 
     initHeader: =>
+      @initViewOptionsMenu()
       @drawSectionSelectButton() if @sections_enabled
       @drawGradingPeriodSelectButton() if @gradingPeriodsEnabled
 
@@ -1080,6 +1082,11 @@ define [
       component = React.createElement(TotalGradeColumnHeader, {}, null)
       ReactDOM.render(component, $(obj.node).find('.slick-column-name')[0])
 
+    initViewOptionsMenu: () =>
+      component = React.createElement(ViewOptionsMenu, {}, null)
+      mountPoint = document.querySelectorAll("[data-component='#{component.type.name}']")[0]
+      ReactDOM.render(component, mountPoint)
+
     initAssignmentColumnHeader: (obj) =>
       original_assignment = obj.column.object
 

app/jsx/gradezilla/default_gradebook/components/ViewOptionsMenu.jsx

@@ -0,0 +1,32 @@
+define([
+  'react',
+  'underscore',
+  'instructure-icons/react/Solid/IconMiniArrowDownSolid',
+  'instructure-ui/Button',
+  'instructure-ui/Menu',
+  'instructure-ui/PopoverMenu',
+  'instructure-ui/Typography',
+  'i18n!gradebook'
+], (React, _, { default: IconMiniArrowDownSolid }, { default: Button }, { MenuItem, MenuItemSeparator },
+  { default: PopoverMenu }, { default: Typography }, I18n) => {
+  function renderTriggerButton () {
+    return (
+      <Button variant="link">
+        <Typography color="primary">
+          {I18n.t('View')} <IconMiniArrowDownSolid />
+        </Typography>
+      </Button>
+    );
+  }
+
+  const ViewOptionsMenu = () =>
+    <PopoverMenu trigger={renderTriggerButton()}>
+      <MenuItem disabled>Arrange</MenuItem>
+      <MenuItem type="radio" defaultSelected>Assignment Name</MenuItem>
+      <MenuItem type="radio">Due Date</MenuItem>
+      <MenuItem type="radio">Points</MenuItem>
+    </PopoverMenu>
+
+  return ViewOptionsMenu;
+});
+

app/views/gradebooks/gradezilla.html.erb

@@ -76,6 +76,7 @@
   <div class="assignment-gradebook-container hidden">
     <div id="gradebook-toolbar" class="toolbar">
       <div class="gradebook_dropdowns">
+        <span data-component="ViewOptionsMenu"></span>
         <% if multiple_grading_periods? %>
           <span class="multiple-grading-periods-selector-placeholder"></span>
         <% end %>

spec/coffeescripts/gradebook/GradebookSpec.coffee

@@ -40,11 +40,11 @@ define [
     , 'assignment1') < 0
     , "other fields are sorted by score"
 
-  gradebookStubs = ->
-    indexedOverrides: Gradebook.prototype.indexedOverrides
-    indexedGradingPeriods: _.indexBy(@gradingPeriods, 'id')
-
   module "Gradebook#hideAggregateColumns",
+    gradebookStubs: ->
+      indexedOverrides: Gradebook.prototype.indexedOverrides
+      indexedGradingPeriods: _.indexBy(@gradingPeriods, 'id')
+
     setupThis: (options) ->
       customOptions = options || {}
       defaults =
@@ -53,7 +53,7 @@ define [
         options:
           all_grading_periods_totals: false
 
-      _.defaults customOptions, defaults, gradebookStubs()
+      _.defaults customOptions, defaults, @gradebookStubs()
 
     setup: ->
       @hideAggregateColumns = Gradebook.prototype.hideAggregateColumns

spec/coffeescripts/gradezilla/GradebookSpec.coffee

@@ -40,11 +40,11 @@ define [
     , 'assignment1') < 0
     , "other fields are sorted by score"
 
-  gradebookStubs = ->
-    indexedOverrides: Gradebook.prototype.indexedOverrides
-    indexedGradingPeriods: _.indexBy(@gradingPeriods, 'id')
-
   module "Gradebook#hideAggregateColumns",
+    gradebookStubs: ->
+      indexedOverrides: Gradebook.prototype.indexedOverrides
+      indexedGradingPeriods: _.indexBy(@gradingPeriods, 'id')
+
     setupThis: (options) ->
       customOptions = options || {}
       defaults =
@@ -53,7 +53,7 @@ define [
         options:
           all_grading_periods_totals: false
 
-      _.defaults customOptions, defaults, gradebookStubs()
+      _.defaults customOptions, defaults, @gradebookStubs()
 
     setup: ->
       @hideAggregateColumns = Gradebook.prototype.hideAggregateColumns
@@ -298,3 +298,11 @@ define [
 
     ok @fakeSubmissionDetailsDialog.called
     deepEqual expectedArguments, @submissionDialogArgs
+
+  test 'ViewOptionsMenu is rendered on init', ->
+    fixtures = document.getElementById("fixtures")
+    fixtures.innerHTML = '<span data-component="ViewOptionsMenu"></span>'
+    Gradebook.prototype.initViewOptionsMenu.call()
+    buttonText = document.querySelector('[data-component="ViewOptionsMenu"] Button').innerText.trim()
+    equal(buttonText, 'View')
+    document.getElementById("fixtures").innerHTML = ""

spec/javascripts/jsx/gradezilla/default_gradebook/components/ViewOptionsMenuSpec.jsx

@@ -0,0 +1,19 @@
+define([
+  'react',
+  'enzyme',
+  'jsx/gradezilla/default_gradebook/components/ViewOptionsMenu'
+], (React, { mount }, ViewOptionsMenu) => {
+  module('ViewOptionsMenu', {
+    setup () {
+      this.wrapper = mount(<ViewOptionsMenu />);
+    },
+
+    teardown () {
+      this.wrapper.unmount();
+    }
+  });
+
+  test('it renders', function () {
+    ok(this.wrapper.component.isMounted());
+  });
+});