Merge pull request #18 from edx/aed/edit-modal

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

package-lock.json

@@ -3098,7 +3098,7 @@
       "dependencies": {
         "@edx/edx-bootstrap": {
           "version": "1.0.0",
-          "resolved": "http://registry.npmjs.org/@edx/edx-bootstrap/-/edx-bootstrap-1.0.0.tgz",
+          "resolved": "https://registry.npmjs.org/@edx/edx-bootstrap/-/edx-bootstrap-1.0.0.tgz",
           "integrity": "sha512-ZVoGAqWo9NtPKoNRgOgiW+Qr83TyZ+CWiKFpTmqaG3fm0qBgysnYYRooh1pyaJPedgFw2ljGrAAHYpn94R3pfw==",
           "requires": {
             "bootstrap": "4.0.0",
@@ -3554,7 +3554,7 @@
     },
     "@types/object-assign": {
       "version": "4.0.30",
-      "resolved": "http://registry.npmjs.org/@types/object-assign/-/object-assign-4.0.30.tgz",
+      "resolved": "https://registry.npmjs.org/@types/object-assign/-/object-assign-4.0.30.tgz",
       "integrity": "sha1-iUk3HVqZ9Dge4PHfCpt6GH4H5lI="
     },
     "@types/tapable": {
@@ -20514,15 +20514,6 @@
       "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==",
       "dev": true
     },
-    "scheduler": {
-      "version": "0.11.0",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.11.0.tgz",
-      "integrity": "sha512-MAYbBfmiEHxF0W+c4CxMpEqMYK+rYF584VP/qMKSiHM6lTkBKKYOJaDiSILpJHla6hBOsVd6GucPL46o2Uq3sg==",
-      "requires": {
-        "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1"
-      }
-    },
     "schema-utils": {
       "version": "0.4.5",
       "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-0.4.5.tgz",

package.json

@@ -25,7 +25,7 @@
   },
   "dependencies": {
     "@edx/edx-bootstrap": "^0.4.3",
-    "@edx/frontend-auth": "^1.1.0",
+    "@edx/frontend-auth": "1.1.0",
     "@edx/paragon": "^3.7.1",
     "babel-polyfill": "^6.26.0",
     "classnames": "^2.2.5",

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;
   }