add selection counts to gradebook

src/components/Gradebook/index.jsx

@@ -466,6 +466,13 @@ export default class Gradebook extends React.Component {
                   onClose={() => this.props.closeBanner()}
                   open={this.props.showSuccess}
                 />
+                <div>
+                  Showing
+                  <span className="font-weight-bold"> {this.props.filteredUsersCount} </span>
+                  of
+                  <span className="font-weight-bold"> {this.props.totalUsersCount} </span>
+                  total learners
+                </div>
                 <div className="gbook">
                   <Table
                     columns={this.formatHeadings()}
@@ -627,6 +634,13 @@ export default class Gradebook extends React.Component {
                     Results appear in the table below.<br />
                     Grade processing may take a few seconds.
                   </p>
+                  <div>
+                    Showing
+                    <span className="font-weight-bold"> {this.props.filteredUsersCount} </span>
+                    of
+                    <span className="font-weight-bold"> {this.props.totalUsersCount} </span>
+                    total learners
+                  </div>
                   <Table
                     data={this.props.bulkManagementHistory.map(this.formatHistoryRow)}
                     hasFixedColumnWidths
@@ -690,6 +704,8 @@ Gradebook.defaultProps = {
   showBulkManagement: false,
   bulkManagementHistory: [],
   errorFetchingGradeOverrideHistory: false,
+  totalUsersCount: null,
+  filteredUsersCount: null,
 };
 
 Gradebook.propTypes = {
@@ -764,4 +780,6 @@ Gradebook.propTypes = {
       skipped: PropTypes.number.isRequired,
     }).isRequired,
   })),
+  totalUsersCount: PropTypes.number,
+  filteredUsersCount: PropTypes.number,
 };

src/containers/GradebookPage/index.jsx

@@ -67,6 +67,8 @@ const mapStateToProps = (state, ownProps) => (
                       state.grades.bulkManagement.uploadSuccess),
     showBulkManagement: stateHasMastersTrack(state),
     bulkManagementHistory: getBulkManagementHistory(state),
+    totalUsersCount: state.grades.totalUsersCount,
+    filteredUsersCount: state.grades.filteredUsersCount,
   }
 );
 

src/data/actions/grades.js

@@ -34,7 +34,11 @@ const startedFetchingGrades = () => ({ type: STARTED_FETCHING_GRADES });
 const finishedFetchingGrades = () => ({ type: FINISHED_FETCHING_GRADES });
 const errorFetchingGrades = () => ({ type: ERROR_FETCHING_GRADES });
 const errorFetchingGradeOverrideHistory = () => ({ type: ERROR_FETCHING_GRADE_OVERRIDE_HISTORY });
-const gotGrades = (grades, cohort, track, assignmentType, headings, prev, next, courseId) => ({
+
+const gotGrades = ({
+  grades, cohort, track, assignmentType, headings, prev,
+  next, courseId, totalUsersCount, filteredUsersCount,
+}) => ({
   type: GOT_GRADES,
   grades,
   cohort,
@@ -44,6 +48,8 @@ const gotGrades = (grades, cohort, track, assignmentType, headings, prev, next,
   prev,
   next,
   courseId,
+  totalUsersCount,
+  filteredUsersCount,
 });
 
 const gotGradeOverrideHistory = ({
@@ -101,16 +107,18 @@ const fetchGrades = (
     return LmsApiService.fetchGradebookData(courseId, options.searchText || null, cohort, track)
       .then(response => response.data)
       .then((data) => {
-        dispatch(gotGrades(
-          data.results.sort(sortAlphaAsc),
+        dispatch(gotGrades({
+          grades: data.results.sort(sortAlphaAsc),
           cohort,
           track,
           assignmentType,
-          headingMapper(assignmentType || defaultAssignmentFilter)(data.results[0]),
-          data.previous,
-          data.next,
+          headings: headingMapper(assignmentType || defaultAssignmentFilter)(data.results[0]),
+          prev: data.previous,
+          next: data.next,
           courseId,
-        ));
+          totalUsersCount: data.total_users_count,
+          filteredUsersCount: data.filtered_users_count,
+        }));
         dispatch(finishedFetchingGrades());
         if (options.showSuccess) {
           dispatch(openBanner());
@@ -172,16 +180,18 @@ const fetchPrevNextGrades = (endpoint, courseId, cohort, track, assignmentType)
     return apiClient.get(endpoint)
       .then(response => response.data)
       .then((data) => {
-        dispatch(gotGrades(
-          data.results.sort(sortAlphaAsc),
+        dispatch(gotGrades({
+          grades: data.results.sort(sortAlphaAsc),
           cohort,
           track,
           assignmentType,
-          headingMapper(assignmentType || defaultAssignmentFilter)(data.results[0]),
-          data.previous,
-          data.next,
+          headings: headingMapper(assignmentType || defaultAssignmentFilter)(data.results[0]),
+          prev: data.previous,
+          next: data.next,
           courseId,
-        ));
+          totalUsersCount: data.total_users_count,
+          filteredUsersCount: data.filtered_users_count,
+        }));
         dispatch(finishedFetchingGrades());
       })
       .catch(() => {

src/data/reducers/grades.js

@@ -35,6 +35,8 @@ const initialState = {
   nextPage: null,
   showSpinner: true,
   bulkManagement: {},
+  totalUsersCount: null,
+  filteredUsersCount: null,
 };
 
 const grades = (state = initialState, action) => {
@@ -53,6 +55,8 @@ const grades = (state = initialState, action) => {
         nextPage: action.next,
         showSpinner: false,
         courseId: action.courseId,
+        totalUsersCount: action.totalUsersCount,
+        filteredUsersCount: action.filteredUsersCount,
       };
     case GOT_GRADE_OVERRIDE_HISTORY:
       return {

src/data/reducers/grades.test.js

@@ -100,6 +100,8 @@ describe('grades reducer', () => {
       nextPage: expectedNext,
       showSpinner: false,
       courseId,
+      totalUsersCount: 4,
+      filteredUsersCount: 2,
     };
     expect(grades(undefined, {
       type: GOT_GRADES,
@@ -111,6 +113,8 @@ describe('grades reducer', () => {
       cohort: expectedCohortId,
       showSpinner: true,
       courseId,
+      totalUsersCount: 4,
+      filteredUsersCount: 2,
     })).toEqual(expected);
   });