feat(editing): display a status alert after grades have updated.

src/components/Gradebook/index.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button, Modal, SearchField, Table, InputSelect } from '@edx/paragon';
+import { Button, InputSelect, Modal, SearchField, StatusAlert, Table } from '@edx/paragon';
 import queryString from 'query-string';
 import { configuration } from '../../config';
 
@@ -62,7 +62,15 @@ export default class Gradebook extends React.Component {
         },
       },
     ]);
+
+    this.setState({
+      modalModel: [{}],
+      modalOpen: false,
+      updateModuleId: null,
+      updateUserId: null,
+    });
   }
+
   updateQueryParams = (queryKey, queryValue) => {
     const parsed = queryString.parse(this.props.location.search);
     parsed[queryKey] = queryValue;
@@ -292,6 +300,12 @@ export default class Gradebook extends React.Component {
               </div>
             </div>
             <br />
+            <StatusAlert
+              alertType="success"
+              dialog="The grade has been successfully edited."
+              onClose={() => this.props.updateBanner(false)}
+              open={this.props.showSuccess}
+            />
             <div className="gbook">
               <Table
                 columns={this.props.headings}

src/containers/GradebookPage/index.jsx

@@ -7,6 +7,7 @@ import {
   updateGrades,
   toggleGradeFormat,
   filterColumns,
+  updateBanner,
 } from '../../data/actions/grades';
 import { fetchCohorts } from '../../data/actions/cohorts';
 import { fetchTracks } from '../../data/actions/tracks';
@@ -20,6 +21,7 @@ const mapStateToProps = state => (
     selectedTrack: state.grades.selectedTrack,
     selectedCohort: state.grades.selectedCohort,
     format: state.grades.gradeFormat,
+    showSuccess: state.grades.showSuccess,
   }
 );
 
@@ -46,6 +48,9 @@ const mapDispatchToProps = dispatch => (
     filterColumns: (filterType, exampleUser) => {
       dispatch(filterColumns(filterType, exampleUser));
     },
+    updateBanner: (showSuccess) => {
+      dispatch(updateBanner(showSuccess));
+    },
   }
 );
 

src/data/actions/grades.js

@@ -9,6 +9,7 @@ import {
   TOGGLE_GRADE_FORMAT,
   SORT_GRADES,
   FILTER_COLUMNS,
+  UPDATE_BANNER,
 } from '../constants/actionTypes/grades';
 import LmsApiService from '../services/LmsApiService';
 import { headingMapper } from './utils';
@@ -25,7 +26,7 @@ const gotGrades = (grades, cohort, track, headings) => ({
 });
 
 const gradeUpdateRequest = () => ({ type: GRADE_UPDATE_REQUEST });
-const gradeUpdateSuccess = responseData => ({
+const gradeUpdateSuccess = (responseData) => ({
   type: GRADE_UPDATE_SUCCESS,
   payload: { responseData },
 });
@@ -43,7 +44,9 @@ const filterColumns = (filterType, exampleUser) => ({
   headings: headingMapper[filterType](exampleUser) 
 });
 
-const fetchGrades = (courseId, cohort, track) => (
+const updateBanner = (showSuccess) => ({ type: UPDATE_BANNER, showSuccess });
+
+const fetchGrades = (courseId, cohort, track, showSuccess) => (
   (dispatch) => {
     dispatch(startedFetchingGrades());
     return LmsApiService.fetchGradebookData(courseId, null, cohort, track)
@@ -51,6 +54,7 @@ const fetchGrades = (courseId, cohort, track) => (
       .then((data) => {
         dispatch(gotGrades(data.results, cohort, track, headingMapper.all(data.results[0])));
         dispatch(finishedFetchingGrades());
+        dispatch(updateBanner(!!showSuccess));
       })
       .catch(() => {
         dispatch(errorFetchingGrades());
@@ -79,7 +83,8 @@ const updateGrades = (courseId, updateData) => (
     return LmsApiService.updateGradebookData(courseId, updateData)
       .then(response => response.data)
       .then((data) => {
-        dispatch(gradeUpdateSuccess(data));
+        dispatch(gradeUpdateSuccess(data))
+        dispatch(fetchGrades(courseId, null, null, true))
       })
       .catch((error) => {
         dispatch(gradeUpdateFailure(error));
@@ -101,4 +106,5 @@ export {
   toggleGradeFormat,
   sortGrades,
   filterColumns,
+  updateBanner,
 };

src/data/constants/actionTypes/grades.js

@@ -10,6 +10,7 @@ const GRADE_UPDATE_FAILURE = 'GRADE_UPDATE_FAILURE';
 const TOGGLE_GRADE_FORMAT = 'TOGGLE_GRADE_FORMAT';
 const SORT_GRADES = 'SORT_GRADES';
 const FILTER_COLUMNS = 'FILTER_COLUMNS';
+const UPDATE_BANNER = 'UPDATE_BANNER';
 
 export {
   STARTED_FETCHING_GRADES,
@@ -22,4 +23,5 @@ export {
   TOGGLE_GRADE_FORMAT,
   SORT_GRADES,
   FILTER_COLUMNS,
+  UPDATE_BANNER,
 };

src/data/reducers/grades.js

@@ -4,6 +4,8 @@ import {
   GOT_GRADES,
   TOGGLE_GRADE_FORMAT,
   FILTER_COLUMNS,
+  GRADE_UPDATE_SUCCESS,
+  UPDATE_BANNER,
 } from '../constants/actionTypes/grades';
 
 const initialState = {
@@ -13,6 +15,7 @@ const initialState = {
   finishedFetching: false,
   errorFetching: false,
   gradeFormat: 'percent',
+  showSuccess: false,
 };
 
 const grades = (state = initialState, action) => {
@@ -49,6 +52,11 @@ const grades = (state = initialState, action) => {
         ...state,
         headings: action.headings,
       };
+    case UPDATE_BANNER:
+      return {
+        ...state,
+        showSuccess: action.showSuccess,
+      };
     default:
       return state;
   }