fix: grade modal always showing

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

@@ -10,21 +10,9 @@ exports[`EditModal Component snapshots gradeOverrideHistoryError is and empty an
   isOpen={true}
   onClose={[MockFunction this.closeAssignmentModal]}
   size="xl"
+  title="Edit Grades"
   variant="default"
 >
-  <ModalDialogHeader
-    as="div"
-  >
-    <ModalDialogTitle
-      as="h2"
-    >
-      <FormattedMessage
-        defaultMessage="Edit Grades"
-        description="Edit Modal title"
-        id="gradebook.GradesView.EditModal.title"
-      />
-    </ModalDialogTitle>
-  </ModalDialogHeader>
   <ModalDialogBody
     as="div"
   >
@@ -133,24 +121,12 @@ exports[`EditModal Component snapshots gradeOverrideHistoryError is empty and op
   isBlocking={false}
   isFullscreenOnMobile={true}
   isFullscreenScroll={false}
-  isOpen={true}
+  isOpen={false}
   onClose={[MockFunction this.closeAssignmentModal]}
   size="xl"
+  title="Edit Grades"
   variant="default"
 >
-  <ModalDialogHeader
-    as="div"
-  >
-    <ModalDialogTitle
-      as="h2"
-    >
-      <FormattedMessage
-        defaultMessage="Edit Grades"
-        description="Edit Modal title"
-        id="gradebook.GradesView.EditModal.title"
-      />
-    </ModalDialogTitle>
-  </ModalDialogHeader>
   <ModalDialogBody
     as="div"
   >

src/components/GradesView/EditModal/index.jsx

@@ -9,7 +9,7 @@ import {
   ModalDialog,
   ActionRow,
 } from '@edx/paragon';
-import { FormattedMessage } from '@edx/frontend-platform/i18n';
+import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 
 import selectors from 'data/selectors';
 import actions from 'data/actions';
@@ -47,19 +47,14 @@ export class EditModal extends React.Component {
 
   render() {
     return (
-
       <ModalDialog
-        isOpen
+        title={this.props.intl.formatMessage(messages.title)}
+        isOpen={this.props.open}
         onClose={this.closeAssignmentModal}
         size="xl"
         hasCloseButton
         isFullscreenOnMobile
       >
-        <ModalDialog.Header>
-          <ModalDialog.Title>
-            <FormattedMessage {...messages.title} />
-          </ModalDialog.Title>
-        </ModalDialog.Header>
         <ModalDialog.Body>
           <div>
             <ModalHeaders />
@@ -101,6 +96,8 @@ EditModal.propTypes = {
   closeModal: PropTypes.func.isRequired,
   doneViewingAssignment: PropTypes.func.isRequired,
   updateGrades: PropTypes.func.isRequired,
+  // injected
+  intl: intlShape.isRequired,
 };
 
 export const mapStateToProps = (state) => ({
@@ -114,4 +111,4 @@ export const mapDispatchToProps = {
   updateGrades: thunkActions.grades.updateGrades,
 };
 
-export default connect(mapStateToProps, mapDispatchToProps)(EditModal);
+export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(EditModal));

src/components/GradesView/EditModal/test.jsx

@@ -49,6 +49,8 @@ describe('EditModal', () => {
       closeModal: jest.fn(),
       doneViewingAssignment: jest.fn(),
       updateGrades: jest.fn(),
+
+      intl: { formatMessage: (msg) => msg.defaultMessage },
     };
   });