From 924dcda0880264b094276952ad5756c41196b3af Mon Sep 17 00:00:00 2001
From: Matt Hughes <mhughes@edx.org>
Date: Tue, 10 Sep 2019 17:01:02 -0400
Subject: [PATCH 1/2] Add disclaimer about masters-specific features

JIRA:EDUCATOR-4637
---
 src/components/Gradebook/index.jsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/components/Gradebook/index.jsx b/src/components/Gradebook/index.jsx
index a2d4b0b..a0d6240 100644
--- a/src/components/Gradebook/index.jsx
+++ b/src/components/Gradebook/index.jsx
@@ -439,14 +439,16 @@ export default class Gradebook extends React.Component {
       const userInformationHeadingLabel = (
         <div>
           <div>Username</div>
-          <div className="font-weight-normal student-key">Student Key</div>
+          <div className="font-weight-normal student-key">Student Key*</div>
         </div>
       );
+      const emailHeadingLabel = 'Email*';
 
       headings = headings.map(heading => ({ label: heading, key: heading }));
 
       // replace username heading label to include additional user data
       headings[0].label = userInformationHeadingLabel;
+      headings[1].label = emailHeadingLabel;
     }
 
     return headings;
@@ -619,8 +621,8 @@ export default class Gradebook extends React.Component {
                         state={this.props.showSpinner ? 'pending' : 'default'}
                         className="ml-2"
                         labels={{
-                          default: 'Interventions',
-                          pending: 'Interventions',
+                          default: 'Interventions*',
+                          pending: 'Interventions*',
                         }}
                         icons={{
                           default: <FontAwesomeIcon className="mr-2" icon={faDownload} />,
@@ -644,6 +646,7 @@ export default class Gradebook extends React.Component {
                   </div>
                 </div>
                 {PageButtons(this.props)}
+                <p>* available for learners in the Master&apos;s track only</p>
                 <Modal
                   open={this.state.modalOpen}
                   title="Edit Grades"

From 7fa24969ace6039b7228a22914413998b8a53561 Mon Sep 17 00:00:00 2001
From: Matt Hughes <mhughes@edx.org>
Date: Tue, 10 Sep 2019 17:57:55 -0400
Subject: [PATCH 2/2] Limit the amount of space the uname & email columns can
 take up

This is meant to alleviate concerns about the table not showing grade information
while the drawer is open and few assignment columns are
visible (e.g. when the "specific assignment" filter is set).
---
 src/components/Gradebook/gradebook.scss | 19 +++++--------------
 src/components/Gradebook/index.jsx      | 23 ++++++++++++++++++++---
 2 files changed, 25 insertions(+), 17 deletions(-)

diff --git a/src/components/Gradebook/gradebook.scss b/src/components/Gradebook/gradebook.scss
index 8b36643..8fadb01 100644
--- a/src/components/Gradebook/gradebook.scss
+++ b/src/components/Gradebook/gradebook.scss
@@ -84,24 +84,15 @@
     }
 
     .table tr th:first-child {
-        position: absolute;
-        width: 160px;
-        height: 50px;
-        display: block;
         border-bottom: none;
     }
+    .table tr th:first-child,
     .table tr td:first-child {
-        position: absolute;
+        position: sticky;
         width: 160px;
-        height: 50px;
-        display: block;
-    }
-    .table tr td:nth-child(2) {
-        box-sizing: content-box;
-        padding-left: 170px;
-    }
-    .table tr th:nth-child(2) {
-        padding-left: 170px;
+        left: 0;
+        z-index: 1; // to float over the following children in the side-scrolling case
+        background: white;
     }
 
     .table tbody th {
diff --git a/src/components/Gradebook/index.jsx b/src/components/Gradebook/index.jsx
index a0d6240..5168009 100644
--- a/src/components/Gradebook/index.jsx
+++ b/src/components/Gradebook/index.jsx
@@ -377,7 +377,14 @@ export default class Gradebook extends React.Component {
   formatter = {
     percent: (entries, areGradesFrozen) => entries.map((entry) => {
       const learnerInformation = this.getLearnerInformation(entry);
-      const results = { Username: learnerInformation, Email: entry.email };
+      const results = {
+        Username: (
+          <div><span className="wrap-text-in-cell">{learnerInformation}</span></div>
+        ),
+        Email: (
+          <span className="wrap-text-in-cell">{entry.email}</span>
+        ),
+      };
 
       const assignments = entry.section_breakdown
         .reduce((acc, subsection) => {
@@ -400,7 +407,14 @@ export default class Gradebook extends React.Component {
 
     absolute: (entries, areGradesFrozen) => entries.map((entry) => {
       const learnerInformation = this.getLearnerInformation(entry);
-      const results = { Username: learnerInformation, Email: entry.email };
+      const results = {
+        Username: (
+          <div><span className="wrap-text-in-cell">{learnerInformation}</span></div>
+        ),
+        Email: (
+          <span className="wrap-text-in-cell">{entry.email}</span>
+        ),
+      };
 
       const assignments = entry.section_breakdown
         .reduce((acc, subsection) => {
@@ -444,11 +458,13 @@ export default class Gradebook extends React.Component {
       );
       const emailHeadingLabel = 'Email*';
 
-      headings = headings.map(heading => ({ label: heading, key: heading }));
+      headings = headings.map(heading => ({ label: heading, key: heading, width: 'col' }));
 
       // replace username heading label to include additional user data
       headings[0].label = userInformationHeadingLabel;
+      headings[0].width = 'col-2';
       headings[1].label = emailHeadingLabel;
+      headings[1].width = 'col-2';
     }
 
     return headings;
@@ -642,6 +658,7 @@ export default class Gradebook extends React.Component {
                         this.props.areGradesFrozen,
                       )}
                       rowHeaderColumnKey="username"
+                      hasFixedColumnWidths
                     />
                   </div>
                 </div>