add integration_id to gradebook

closes: GRADE-1436

test plan:
- in the console, give a user in a course an integration_id on the
user's main pseudonym:

    user.pseudonym.update!(integration_id: 'sPeCiAl_Id')

- in new gradebook, the main student name column has an options menu in
the title header, change the secondary info to "Integration ID"
- now the integration id is displayed beneath student names

Change-Id: Icf6c9f7d454efc34abf37ee024183342ed60f8e8
Reviewed-on: https://gerrit.instructure.com/158746
Reviewed-by: Spencer Olson <solson@instructure.com>
Reviewed-by: Adrian Packel <apackel@instructure.com>
Tested-by: Jenkins
QA-Review: Derek Bender <djbender@instructure.com>
Product-Review: Sidharth Oberoi <soberoi@instructure.com>

app/jsx/gradezilla/default_gradebook/GradebookGrid/formatters/StudentCellFormatter.js

@@ -25,7 +25,7 @@ function getSecondaryDisplayInfo (student, secondaryInfo, options) {
     const sectionNames = student.sections.map(sectionId => options.getSection(sectionId).name);
     return $.toSentence(sectionNames.sort());
   }
-  return { login_id: student.login_id, sis_id: student.sis_user_id }[secondaryInfo];
+  return {login_id: student.login_id, sis_id: student.sis_user_id, integration_id: student.integration_id}[secondaryInfo];
 }
 
 function getEnrollmentLabel (student) {

app/jsx/gradezilla/default_gradebook/GradebookGrid/headers/StudentColumnHeader.js

@@ -66,6 +66,7 @@ export default class StudentColumnHeader extends ColumnHeader {
   onShowSectionNames = () => { this.onSelectSecondaryInfo('section'); };
   onHideSecondaryInfo = () => { this.onSelectSecondaryInfo('none'); };
   onShowSisId = () => { this.onSelectSecondaryInfo('sis_id'); };
+  onShowIntegrationId = () => { this.onSelectSecondaryInfo('integration_id'); };
   onShowLoginId = () => { this.onSelectSecondaryInfo('login_id'); };
 
   onShowFirstLastNames = () => { this.onSelectPrimaryInfo('first_last'); };
@@ -208,6 +209,14 @@ export default class StudentColumnHeader extends ColumnHeader {
                           {this.props.sisName || studentRowHeaderConstants.secondaryInfoLabels.sis_id}
                         </MenuItem>
 
+                        <MenuItem
+                          key="integration_id"
+                          selected={this.props.selectedSecondaryInfo === 'integration_id'}
+                          onSelect={this.onShowIntegrationId}
+                        >
+                          {studentRowHeaderConstants.secondaryInfoLabels.integration_id}
+                        </MenuItem>
+
                         <MenuItem
                           key="login_id"
                           selected={this.props.selectedSecondaryInfo === 'login_id'}

app/jsx/gradezilla/default_gradebook/constants/studentRowHeaderConstants.js

@@ -29,11 +29,12 @@ const defaultPrimaryInfo = 'first_last';
 const secondaryInfoLabels = {
   section: I18n.t('Section'),
   sis_id: I18n.t('SIS ID'),
+  integration_id: I18n.t('Integration ID'),
   login_id: I18n.t('Login ID'),
   none: I18n.t('None')
 };
 
-const secondaryInfoKeys = ['section', 'sis_id', 'login_id', 'none'];
+const secondaryInfoKeys = ['section', 'sis_id', 'integration_id', 'login_id', 'none'];
 const defaultSecondaryInfo = 'none';
 const sectionSecondaryInfo = 'section';
 

spec/javascripts/jsx/gradezilla/default_gradebook/GradebookGrid/formatters/StudentCellFormatterSpec.js

@@ -50,6 +50,7 @@ QUnit.module('StudentCellFormatter', function (hooks) {
       name: 'Adam Jones',
       sections: ['2001', '2003', '2004'],
       sis_user_id: 'sis_student_1101',
+      integration_id: 'integration_id_1101',
       sortable_name: 'Jones, Adam'
     };
   });
@@ -88,7 +89,7 @@ QUnit.module('StudentCellFormatter', function (hooks) {
   });
 
   test('renders the student name when displaying names as "first, last"', function () {
-    equal(studentGradesLink().innerHTML, 'Adam Jones');
+    equal(studentGradesLink().innerHTML, student.name);
   });
 
   test('does not escape html in the student name when displaying names as "first, last"', function () {
@@ -115,7 +116,7 @@ QUnit.module('StudentCellFormatter', function (hooks) {
 
   test('renders section names when secondary info is "section"', function () {
     gradebook.setSelectedSecondaryInfo('section', true); // skipRedraw
-    equal(renderCell().querySelector('.secondary-info').innerHTML, 'Freshmen, Juniors, and Seniors');
+    equal(renderCell().querySelector('.secondary-info').innerText, 'Freshmen, Juniors, and Seniors');
   });
 
   test('does not escape html in the section names', function () {
@@ -134,12 +135,23 @@ QUnit.module('StudentCellFormatter', function (hooks) {
 
   test('renders the student login id when secondary info is "login_in"', function () {
     gradebook.setSelectedSecondaryInfo('login_id', true); // skipRedraw
-    equal(renderCell().querySelector('.secondary-info').innerHTML, 'adam.jones@example.com');
+    equal(renderCell().querySelector('.secondary-info').innerText, student.login_id);
   });
 
   test('renders the student SIS user id when secondary info is "sis_id"', function () {
     gradebook.setSelectedSecondaryInfo('sis_id', true); // skipRedraw
-    equal(renderCell().querySelector('.secondary-info').innerHTML, 'sis_student_1101');
+    equal(renderCell().querySelector('.secondary-info').innerText, student.sis_user_id);
+  });
+
+  test('renders the Integration ID when secondary info is "integration_id"', function () {
+    gradebook.setSelectedSecondaryInfo('integration_id', true); // skipRedraw
+    equal(renderCell().querySelector('.secondary-info').innerText, student.integration_id);
+  });
+
+  test('does not render secondary info when any secondary info is null and secondary info is not "none"', function () {
+    student.login_id = null;
+    gradebook.setSelectedSecondaryInfo('login_id', true); // skipRedraw
+    equal(renderCell().querySelector('.secondary-info'), null);
   });
 
   test('does not render secondary info when secondary info is "none"', function () {
@@ -163,13 +175,13 @@ QUnit.module('StudentCellFormatter', function (hooks) {
 
   test('renders the "inactive" status label', function () {
     student.isInactive = true;
-    equal(renderCell().querySelector('.label').innerHTML, 'inactive');
+    equal(renderCell().querySelector('.label').innerText, 'inactive');
   });
 
   QUnit.module('#render with an concluded student');
 
   test('renders the "concluded" status label', function () {
     student.isConcluded = true;
-    equal(renderCell().querySelector('.label').innerHTML, 'concluded');
+    equal(renderCell().querySelector('.label').innerText, 'concluded');
   });
 });

spec/javascripts/jsx/gradezilla/default_gradebook/GradebookGrid/headers/StudentColumnHeaderSpec.js

@@ -268,6 +268,40 @@ test('calls onSelectSecondaryInfo with "sis id"', function () {
   ok(onSelectSecondaryInfo.calledWithExactly('sis_id'));
 });
 
+QUnit.module('StudentColumnHeader: Secondary info > Integration ID', {
+  setup () {
+    this.mountAndOpenOptions = mountAndOpenOptions;
+    const props = defaultProps();
+    this.integrationIDMenuItem = findMenuItem.call(this, props, 'Secondary info', 'Integration ID');
+  },
+
+  teardown () {
+    this.wrapper.unmount();
+  }
+});
+
+test('includes an Integration ID MenuItem', function () {
+  strictEqual(this.integrationIDMenuItem.length, 1);
+});
+
+test('calls onSelectSecondaryInfo once', function () {
+  const onSelectSecondaryInfo = sinon.stub();
+  const props = defaultProps({ props: { onSelectSecondaryInfo } });
+  const integrationID = findMenuItem.call(this, props, 'Secondary info', 'Integration ID');
+  integrationID.simulate('click');
+
+  strictEqual(onSelectSecondaryInfo.callCount, 1);
+});
+
+test('calls onSelectSecondaryInfo with "integration id"', function () {
+  const onSelectSecondaryInfo = sinon.stub();
+  const props = defaultProps({ props: { onSelectSecondaryInfo } });
+  const integrationID = findMenuItem.call(this, props, 'Secondary info', 'Integration ID');
+  integrationID.simulate('click');
+
+  ok(onSelectSecondaryInfo.calledWithExactly('integration_id'));
+});
+
 QUnit.module('StudentColumnHeader: Secondary info > Login ID', {
   setup () {
     this.mountAndOpenOptions = mountAndOpenOptions;