feat: add column for full name for masters students

Author: jansenk

src/components/GradesView/GradebookTable/Fields.jsx

@@ -29,16 +29,16 @@ Username.propTypes = {
 };
 
 /**
- * Fields.Email
- * Simple label field for email value.
- * @param {string} email - email for display
+ * Fields.SimpleText
+ * Simple label field for text value.
+ * @param {string} value - value for display
  */
-const Email = ({ email }) => <span className="wrap-text-in-cell">{email}</span>;
-Email.propTypes = {
-  email: PropTypes.string.isRequired,
+const SimpleText = ({ value }) => (<span className="wrap-text-in-cell">{value}</span>);
+SimpleText.propTypes = {
+  value: PropTypes.string.isRequired,
 };
 
 export default StrictDict({
-  Email,
+  SimpleText,
   Username,
 });

src/components/GradesView/GradebookTable/Fields.test.jsx

@@ -41,13 +41,13 @@ describe('Gradebook Table Fields', () => {
     });
   });
 
-  describe('Email', () => {
-    const email = '[email protected]';
+  describe('SimpleText', () => {
+    const value = '[email protected]';
     test('snapshot', () => {
-      expect(shallow(<Fields.Email email={email} />)).toMatchSnapshot();
+      expect(shallow(<Fields.SimpleText value={value} />)).toMatchSnapshot();
     });
-    test('wraps entry email', () => {
-      expect(shallow(<Fields.Email email={email} />).text()).toEqual(email);
+    test('wraps entry value', () => {
+      expect(shallow(<Fields.SimpleText value={value} />).text()).toEqual(value);
     });
   });
 });

src/components/GradesView/GradebookTable/__snapshots__/Fields.test.jsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Gradebook Table Fields Email snapshot 1`] = `
+exports[`Gradebook Table Fields SimpleText snapshot 1`] = `
 <span
   className="wrap-text-in-cell"
 >

src/components/GradesView/GradebookTable/__snapshots__/test.jsx.snap

@@ -12,6 +12,14 @@ exports[`GradebookTable component snapshot - fields1 and 2 between email and tot
           "Header": <UsernameLabelReplacement />,
           "accessor": "Username",
         },
+        Object {
+          "Header": <FormattedMessage
+            defaultMessage="Full Name*"
+            description="Gradebook table full name column header"
+            id="gradebook.GradesView.table.headings.fullName"
+          />,
+          "accessor": "Full Name",
+        },
         Object {
           "Header": <FormattedMessage
             defaultMessage="Email*"

src/components/GradesView/GradebookTable/index.jsx

@@ -39,6 +39,8 @@ export class GradebookTable extends React.Component {
       label = <LabelReplacements.UsernameLabelReplacement />;
     } else if (heading === Headings.email) {
       label = <FormattedMessage {...messages.emailHeading} />;
+    } else if (heading === Headings.fullName) {
+      label = <FormattedMessage {...messages.fullNameHeading} />;
     } else {
       label = heading;
     }
@@ -49,7 +51,8 @@ export class GradebookTable extends React.Component {
     [Headings.username]: (
       <Fields.Username username={entry.username} userKey={entry.external_user_key} />
     ),
-    [Headings.email]: (<Fields.Email email={entry.email} />),
+    [Headings.fullName]: (<Fields.SimpleText value={entry.full_name} />),
+    [Headings.email]: (<Fields.SimpleText value={entry.email} />),
     [Headings.totalGrade]: `${roundGrade(entry.percent * 100)}${getLocalizedPercentSign()}`,
     ...entry.section_breakdown.reduce((acc, subsection) => ({
       ...acc,

src/components/GradesView/GradebookTable/messages.js

@@ -1,6 +1,11 @@
 import { defineMessages } from '@edx/frontend-platform/i18n';
 
 const messages = defineMessages({
+  fullNameHeading: {
+    id: 'gradebook.GradesView.table.headings.fullName',
+    defaultMessage: 'Full Name*',
+    description: 'Gradebook table full name column header',
+  },
   emailHeading: {
     id: 'gradebook.GradesView.table.headings.email',
     defaultMessage: 'Email*',

src/components/GradesView/GradebookTable/test.jsx

@@ -22,7 +22,7 @@ jest.mock('./Fields', () => ({
   __esModule: true,
   default: {
     Username: () => 'Fields.Username',
-    Email: () => 'Fields.Email',
+    SimpleText: () => 'Fields.SimpleText',
   },
 }));
 jest.mock('./LabelReplacements', () => ({
@@ -75,6 +75,7 @@ describe('GradebookTable', () => {
       ],
       headings: [
         Headings.username,
+        Headings.fullName,
         Headings.email,
         fields.field1,
         fields.field2,
@@ -104,17 +105,22 @@ describe('GradebookTable', () => {
         expect(heading.accessor).toEqual(Headings.username);
         expect(heading.Header.type).toEqual(LabelReplacements.UsernameLabelReplacement);
       });
-      test('email sets key and Header from header', () => {
+      test('full name sets key and Header from header', () => {
         const heading = headings[1];
+        expect(heading.accessor).toEqual(Headings.fullName);
+        expect(heading.Header).toEqual(<FormattedMessage {...messages.fullNameHeading} />);
+      });
+      test('email sets key and Header from header', () => {
+        const heading = headings[2];
         expect(heading.accessor).toEqual(Headings.email);
         expect(heading.Header).toEqual(<FormattedMessage {...messages.emailHeading} />);
       });
       test('subsections set key and Header from header', () => {
-        expect(headings[2]).toEqual({ accessor: fields.field1, Header: fields.field1 });
-        expect(headings[3]).toEqual({ accessor: fields.field2, Header: fields.field2 });
+        expect(headings[3]).toEqual({ accessor: fields.field1, Header: fields.field1 });
+        expect(headings[4]).toEqual({ accessor: fields.field2, Header: fields.field2 });
       });
       test('totalGrade sets key and replaces Header with component', () => {
-        const heading = headings[4];
+        const heading = headings[5];
         expect(heading.accessor).toEqual(Headings.totalGrade);
         expect(heading.Header.type).toEqual(LabelReplacements.TotalGradeLabelReplacement);
       });
@@ -139,10 +145,15 @@ describe('GradebookTable', () => {
             userKey: entry.external_user_key,
           });
         });
-        test('email set to Email Field', () => {
+        test('fullName set to SimpleText Field', () => {
+          const field = row[Headings.fullName];
+          expect(field.type).toEqual(Fields.SimpleText);
+          expect(field.props).toEqual({ value: entry.full_name });
+        });
+        test('email set to SimpleText Field', () => {
           const field = row[Headings.email];
-          expect(field.type).toEqual(Fields.Email);
-          expect(field.props).toEqual({ email: entry.email });
+          expect(field.type).toEqual(Fields.SimpleText);
+          expect(field.props).toEqual({ value: entry.email });
         });
         test('totalGrade set to rounded percent grade * 100', () => {
           expect(

src/data/constants/grades.js

@@ -3,22 +3,25 @@ import { StrictDict } from 'utils';
 const EMAIL_HEADING = 'Email';
 const TOTAL_COURSE_GRADE_HEADING = 'Total Grade (%)';
 const USERNAME_HEADING = 'Username';
+const FULL_NAME_HEADING = 'Full Name';
 
 const GradeFormats = StrictDict({
   absolute: 'absolute',
   percent: 'percent',
 });
 
 const Headings = StrictDict({
-  email: 'Email',
-  totalGrade: 'Total Grade (%)',
-  username: 'Username',
+  email: EMAIL_HEADING,
+  totalGrade: TOTAL_COURSE_GRADE_HEADING,
+  username: USERNAME_HEADING,
+  fullName: FULL_NAME_HEADING,
 });
 
 export {
   EMAIL_HEADING,
   TOTAL_COURSE_GRADE_HEADING,
   USERNAME_HEADING,
+  FULL_NAME_HEADING,
   GradeFormats,
   Headings,
 };

src/data/selectors/grades.js

@@ -105,12 +105,17 @@ export const headingMapper = (category, label = 'All') => {
   } else {
     filter = filters.byLabel;
   }
-  const { username, email, totalGrade } = Headings;
+  const {
+    username,
+    fullName,
+    email,
+    totalGrade,
+  } = Headings;
   const filteredLabels = (entry) => entry.filter(filter).map(s => s.label);
 
   return (entry) => (
     entry
-      ? [username, email, ...filteredLabels(entry), totalGrade]
+      ? [username, fullName, email, ...filteredLabels(entry), totalGrade]
       : []
   );
 };

src/data/selectors/grades.test.js

@@ -1,4 +1,9 @@
-import { EMAIL_HEADING, TOTAL_COURSE_GRADE_HEADING, USERNAME_HEADING } from '../constants/grades';
+import {
+  EMAIL_HEADING,
+  FULL_NAME_HEADING,
+  TOTAL_COURSE_GRADE_HEADING,
+  USERNAME_HEADING,
+} from '../constants/grades';
 import { formatDateForDisplay } from '../actions/utils';
 import * as selectors from './grades';
 import exportedSelectors from './grades';
@@ -179,6 +184,7 @@ describe('grades selectors', () => {
   describe('headingMapper', () => {
     const expectedHeaders = (subsectionLabels) => ([
       USERNAME_HEADING,
+      FULL_NAME_HEADING,
       EMAIL_HEADING,
       ...subsectionLabels,
       TOTAL_COURSE_GRADE_HEADING,