correct rubric colspan

closes OUT-3308

Test plan:
- create assignments that have rubrics in the following
  configurations
  - regular points
  - free-form
  - remove points
  - hide score total
- as student (test student or other) submit to
  these assignments
- in speedgrader, assess each assignment,
  verifying that both the summary and the complete
  rubric show correctly
- in individual gradebook, verify that rubric assessments
  show correctly for each assignment
- as student, verify that rubric assessments show correctly
  on each submissions page

Change-Id: I207b1b70ddb238512b68729667e7e3093c62fc27
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/216750
QA-Review: Augusto Callejas <acallejas@instructure.com>
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
Tested-by: Jenkins
Product-Review: Jody Sailor
Reviewed-by: Augusto Callejas <acallejas@instructure.com>

app/jsx/rubrics/Criterion.js

@@ -74,7 +74,6 @@ const LongDescriptionDialog = ({open, close, longDescription}) => {
       </Modal.Body>
     </Modal>
   )
-  /* eslint-enable react/no-danger */
 }
 LongDescriptionDialog.propTypes = {
   close: PropTypes.func.isRequired,
@@ -236,9 +235,7 @@ export default class Criterion extends React.Component {
           </div>
           {!(hidePoints || _.isNil(threshold)) ? <Threshold threshold={threshold} /> : null}
         </th>
-        <td className="ratings" colSpan={isSummary ? '2' : null}>
-          {ratings}
-        </td>
+        <td className="ratings">{ratings}</td>
         {hasPointsColumn && (
           <td className="criterion_points">
             {pointsElement()}

app/jsx/rubrics/Rubric.js

@@ -128,7 +128,7 @@ const Rubric = props => {
     <th key="TableHeadingCriteria" scope="col" className="rubric-criteria">
       {I18n.t('Criteria')}
     </th>,
-    <th key="TableHeadingRatings" scope="col" colSpan={isSummary ? '2' : null} className="ratings">
+    <th key="TableHeadingRatings" scope="col" className="ratings">
       {I18n.t('Ratings')}
     </th>,
     showPointsColumn() ? (
@@ -138,6 +138,8 @@ const Rubric = props => {
     ) : null
   ]
 
+  const numColumns = 2 + (showPointsColumn() ? 1 : 0)
+
   return (
     <div className="react-rubric" style={minSize()}>
       <Table caption={<ScreenReaderContent>{rubric.title}</ScreenReaderContent>}>
@@ -145,7 +147,7 @@ const Rubric = props => {
           {/* This row is a hack to force the fixed layout to render as if the title does not exist */}
           <tr style={{visibility: 'collapse'}}>{headingCells}</tr>
           <tr>
-            <th colSpan="3" scope="colgroup" className="rubric-title">
+            <th colSpan={numColumns} scope="colgroup" className="rubric-title">
               {rubric.title}
             </th>
           </tr>
@@ -155,7 +157,7 @@ const Rubric = props => {
           {criteria}
           {showTotalPoints && (
             <tr>
-              <td colSpan="3">
+              <td colSpan={numColumns}>
                 <Flex justifyItems="end">
                   <Flex.Item data-selenium="rubric_total">
                     {hideScoreTotal || noScore ? null : total}

app/jsx/rubrics/__tests__/Rubric.test.js

@@ -116,6 +116,7 @@ describe('the Rubric component', () => {
           .at(0)
           .prop('hasPointsColumn')
       ).toBe(expected)
+      expect(el).toMatchSnapshot()
     }
 
     it('does not have a points column in summary mode', () => {

app/jsx/rubrics/__tests__/__snapshots__/Criterion.test.js.snap

@@ -108,7 +108,6 @@ exports[`Free-form Rubric with a custom criterion by default renders the root co
   </th>
   <td
     className="ratings"
-    colSpan={null}
   >
     <Comments
       allowSaving={true}
@@ -272,7 +271,6 @@ exports[`Free-form Rubric with a custom criterion when assessing renders the roo
   </th>
   <td
     className="ratings"
-    colSpan={null}
   >
     <Comments
       allowSaving={true}
@@ -436,7 +434,6 @@ exports[`Free-form Rubric with a custom criterion without an assessment renders
   </th>
   <td
     className="ratings"
-    colSpan={null}
   >
     <Comments
       allowSaving={true}
@@ -624,7 +621,6 @@ exports[`Free-form Rubric with a outcome criterion by default renders the root c
   </th>
   <td
     className="ratings"
-    colSpan={null}
   >
     <Comments
       allowSaving={true}
@@ -844,7 +840,6 @@ exports[`Free-form Rubric with a outcome criterion when assessing renders the ro
   </th>
   <td
     className="ratings"
-    colSpan={null}
   >
     <Comments
       allowSaving={true}
@@ -1064,7 +1059,6 @@ exports[`Free-form Rubric with a outcome criterion without an assessment renders
   </th>
   <td
     className="ratings"
-    colSpan={null}
   >
     <Comments
       allowSaving={true}
@@ -1198,7 +1192,6 @@ exports[`Point Rubric with a custom criterion by default renders the root compon
   </th>
   <td
     className="ratings"
-    colSpan={null}
   >
     <Ratings
       assessing={false}
@@ -1401,7 +1394,6 @@ exports[`Point Rubric with a custom criterion when assessing renders the root co
   </th>
   <td
     className="ratings"
-    colSpan={null}
   >
     <Ratings
       assessing={true}
@@ -1604,7 +1596,6 @@ exports[`Point Rubric with a custom criterion without an assessment renders the
   </th>
   <td
     className="ratings"
-    colSpan={null}
   >
     <Ratings
       assessing={false}
@@ -1818,7 +1809,6 @@ exports[`Point Rubric with a outcome criterion by default renders the root compo
   </th>
   <td
     className="ratings"
-    colSpan={null}
   >
     <Ratings
       assessing={false}
@@ -2077,7 +2067,6 @@ exports[`Point Rubric with a outcome criterion when assessing renders the root c
   </th>
   <td
     className="ratings"
-    colSpan={null}
   >
     <Ratings
       assessing={true}
@@ -2336,7 +2325,6 @@ exports[`Point Rubric with a outcome criterion without an assessment renders the
   </th>
   <td
     className="ratings"
-    colSpan={null}
   >
     <Ratings
       assessing={false}