Replace erb rubric with react

Change-Id: I55a371a34db75208d54d8370eba2718cc224ff8a
Reviewed-on: https://gerrit.instructure.com/148437
Reviewed-by: Michael Brewer-Davis <mbd@instructure.com>
Reviewed-by: Frank Murphy <fmurphy@instructure.com>
Tested-by: Jenkins
Product-Review: Michael Brewer-Davis <mbd@instructure.com>
QA-Review: Michael Brewer-Davis <mbd@instructure.com>

app/controllers/gradebooks_controller.rb

@@ -24,6 +24,8 @@ class GradebooksController < ApplicationController
   include Api::V1::Submission
   include Api::V1::CustomGradebookColumn
   include Api::V1::Section
+  include Api::V1::Rubric
+  include Api::V1::RubricAssessment
 
   before_action :require_context
   before_action :require_user, only: [:speed_grader, :speed_grader_settings, :grade_summary]
@@ -117,6 +119,8 @@ class GradebooksController < ApplicationController
       courses_with_grades: courses_with_grades_json,
       effective_due_dates: effective_due_dates,
       exclude_total: @exclude_total,
+      rubric_assessments: rubric_assessments_json(@presenter.submissions.flat_map(&:rubric_assessments), @current_user, session, style: 'full'),
+      rubrics: rubrics_json(@presenter.submissions.flat_map(&:rubric_assessments).map(&:rubric), @current_user, session, style: 'full'),
       save_assignment_order_url: course_save_assignment_order_url(@context),
       student_outcome_gradebook_enabled: @context.feature_enabled?(:student_outcome_gradebook),
       student_id: @presenter.student_id,

app/jsx/bundles/rubric_assessment.js

@@ -16,4 +16,33 @@
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 
+import React from 'react'
+import ReactDOM from 'react-dom'
+import Rubric from '../rubrics/Rubric'
+
 import 'rubric_assessment'
+
+const findRubric = (id) => {
+  if (ENV.rubrics) {
+    return ENV.rubrics.find((r) => (r.id === id))
+  }
+  return null
+}
+
+const findRubricAssessment = (id) => {
+  if (ENV.rubric_assessments) {
+    return ENV.rubric_assessments.find((r) => (r.id === id))
+  }
+  return null
+}
+
+document.querySelectorAll(".react_rubric_container").forEach((rubricElement) => {
+  ReactDOM.render((
+    <Rubric
+      rubricId={rubricElement.dataset.rubricId}
+      rubricAssessmentId={rubricElement.dataset.rubricAssessmentId}
+      rubric={findRubric(rubricElement.dataset.rubricId)}
+      rubricAssessment={findRubricAssessment(rubricElement.dataset.rubricAssessmentId)}
+    />
+  ), rubricElement)
+})

app/jsx/rubrics/Rubric.js

@@ -0,0 +1,42 @@
+/*
+ * Copyright (C) 2017 - present Instructure, Inc.
+ *
+ * This file is part of Canvas.
+ *
+ * Canvas is free software: you can redistribute it and/or modify it under
+ * the terms of the GNU Affero General Public License as published by the Free
+ * Software Foundation, version 3 of the License.
+ *
+ * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
+ * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
+ * details.
+ *
+ * You should have received a copy of the GNU Affero General Public License along
+ * with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import React from 'react'
+import PropTypes from 'prop-types'
+import PopoverMenu from '@instructure/ui-core/lib/components/PopoverMenu'
+import { MenuItem, MenuItemSeparator, MenuItemGroup } from '@instructure/ui-core/lib/components/Menu'
+import Text from '@instructure/ui-core/lib/components/Text'
+import I18n from 'i18n!edit_rubric'
+import $ from 'jquery'
+
+class Rubric extends React.Component {
+  static propTypes = {
+    rubricId: PropTypes.string,
+    rubricAssessmentId: PropTypes.string,
+    rubric: PropTypes.object,
+    rubricAssessment: PropTypes.object
+  }
+
+  render () {
+    return (
+      <span>I'm a dummy rubric {JSON.stringify(this.props.rubric)}</span>
+    );
+  }
+}
+
+export default Rubric

app/views/gradebooks/grade_summary.html.erb

@@ -22,6 +22,9 @@
   content_for :page_title, join_title(t(:page_title, "Grades for %{student}", :student => @presenter.student_name), @context.name)
 %>
 <% whatif_instructions = t("You can view your grades based on What-If scores so that you know how grades will be affected by upcoming or resubmitted assignments. You can test scores for an assignment that already includes a score, or an assignment that has yet to be graded.") %>
+<%
+  cache([@domain_root_account.feature_enabled?(:non_scoring_rubrics)]) do
+%>
 <div id="grade-summary-content" style="display: none;">
   <% content_for :right_side do %>
     <div id="student-grades-right-content" style="display: none;">
@@ -537,7 +540,18 @@
                 <% end %>
               </div>
               <div class="rubric-toggle"><a href="#" data-aria="rubric_<%= assignment.id %>" class="screenreader-toggle pull-left"><%= t(:close_rubric, 'Close Rubric') %></a></div>
-              <%= render :partial => "shared/rubric", :object => assessment.rubric, :locals => { :assessment => assessment } %>
+              <% if @domain_root_account.feature_enabled?(:non_scoring_rubrics)%>
+                <div
+                  class="react_rubric_container rubric <%= "for_grading" if assessment.rubric_association.try(:use_for_grading) %>"
+                  id="<%= assessment.rubric ? "rubric_#{assessment.rubric&.id}" : "default_rubric" %>"
+                  data-rubric-id="<%= assessment.rubric ? assessment.rubric.id : "default" %>"
+                  data-rubric-assessment-id="<%= assessment ? assessment.id : "none" %>"
+                  tabindex="0"
+                >
+              <% else %>
+                <%= render :partial => "shared/rubric", :object => assessment.rubric, :locals => { :assessment => assessment } %>
+              <% end %>
+              </div>
             <% end %>
           </td>
         <% end %>
@@ -554,3 +568,4 @@
   <a href="#" id="revert_score_template" class="revert_score_link" title="<%= t('titles.revert_score', "Revert to original score") %>"><i class="icon-reply-2"></i></a>
   <a href="<%= context_url(@context, :context_assignment_submission_url, "{{ assignment_id }}", @presenter.student_id) %>" class="update_submission_url" style="display: none;">&nbsp;</a>
 </div>
+<% end %>

lib/api/v1/rubric.rb

@@ -43,6 +43,7 @@ module Api::V1::Rubric
   def rubric_json(rubric, user, session, opts = {})
     json_attributes = API_ALLOWED_RUBRIC_OUTPUT_FIELDS
     hash = api_json(rubric, user, session, json_attributes)
+    hash['criteria'] = rubric.data if opts[:style] == "full"
     hash['assessments'] = rubric_assessments_json(opts[:assessments], user, session, opts) if opts[:assessments].present?
     hash
   end