refactor: migrated StatusAlert to Alert in GradesBook component

refactor: migrated StatusAlert to Alert in StatusAlerts component refactor: updated unit tests mocks to set snapshot issues
openedx · Jul 1, 2022 · a75f365 · a75f365
1 parent bbb7e89
commit a75f365
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 45 deletions.
diff --git a/src/components/GradesView/EditModal/__snapshots__/test.jsx.snap b/src/components/GradesView/EditModal/__snapshots__/test.jsx.snap
@@ -5,12 +5,13 @@ exports[`EditMoal Component snapshots gradeOverrideHistoryError is and empty and
   body={
     <div>
       <ModalHeaders />
-      <StatusAlert
-        alertType="danger"
-        dialog="Weve been trying to contact you regarding..."
+      <Alert
         dismissible={false}
-        open={true}
-      />
+        show={true}
+        variant="danger"
+      >
+        Weve been trying to contact you regarding...
+      </Alert>
       <OverrideTable />
       <div>
         <FormattedMessage
@@ -66,12 +67,13 @@ exports[`EditMoal Component snapshots gradeOverrideHistoryError is empty and ope
   body={
     <div>
       <ModalHeaders />
-      <StatusAlert
-        alertType="danger"
-        dialog=""
+      <Alert
         dismissible={false}
-        open={false}
-      />
+        show={false}
+        variant="danger"
+      >
+        
+      </Alert>
       <OverrideTable />
       <div>
         <FormattedMessage

diff --git a/src/components/GradesView/EditModal/index.jsx b/src/components/GradesView/EditModal/index.jsx
@@ -6,7 +6,7 @@ import { connect } from 'react-redux';
 import {
   Button,
   Modal,
-  StatusAlert,
+  Alert,
 } from '@edx/paragon';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 
@@ -53,12 +53,13 @@ export class EditModal extends React.Component {
         body={(
           <div>
             <ModalHeaders />
-            <StatusAlert
-              alertType="danger"
-              dialog={this.props.gradeOverrideHistoryError}
-              open={!!this.props.gradeOverrideHistoryError}
+            <Alert
+              variant="danger"
+              show={!!this.props.gradeOverrideHistoryError}
               dismissible={false}
-            />
+            >
+              {this.props.gradeOverrideHistoryError}
+            </Alert>
             <OverrideTable />
             <div><FormattedMessage {...messages.visibility} /></div>
             <div><FormattedMessage {...messages.saveVisibility} /></div>

diff --git a/src/components/GradesView/EditModal/test.jsx b/src/components/GradesView/EditModal/test.jsx
@@ -16,7 +16,7 @@ jest.mock('./ModalHeaders', () => 'ModalHeaders');
 jest.mock('@edx/paragon', () => ({
   Button: () => 'Button',
   Modal: () => 'Modal',
-  StatusAlert: () => 'StatusAlert',
+  Alert: () => 'Alert',
 }));
 jest.mock('data/actions', () => ({
   __esModule: true,

diff --git a/src/components/GradesView/StatusAlerts.jsx b/src/components/GradesView/StatusAlerts.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 
-import { StatusAlert } from '@edx/paragon';
+import { Alert } from '@edx/paragon';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 
 import selectors from 'data/selectors';
@@ -40,18 +40,20 @@ export class StatusAlerts extends React.Component {
   render() {
     return (
       <>
-        <StatusAlert
-          alertType="success"
-          dialog={<FormattedMessage {...messages.editSuccessAlert} />}
+        <Alert
+          variant="success"
           onClose={this.props.handleCloseSuccessBanner}
-          open={this.props.showSuccessBanner}
-        />
-        <StatusAlert
-          alertType="danger"
-          dialog={this.courseGradeFilterAlertDialogText}
+          show={this.props.showSuccessBanner}
+        >
+          <FormattedMessage {...messages.editSuccessAlert} />
+        </Alert>
+        <Alert
+          variant="danger"
           dismissible={false}
-          open={this.isCourseGradeFilterAlertOpen}
-        />
+          show={this.isCourseGradeFilterAlertOpen}
+        >
+          {this.courseGradeFilterAlertDialogText}
+        </Alert>
       </>
     );
   }

diff --git a/src/components/GradesView/StatusAlerts.test.jsx b/src/components/GradesView/StatusAlerts.test.jsx
@@ -13,7 +13,7 @@ import {
 } from './StatusAlerts';
 
 jest.mock('@edx/paragon', () => ({
-  StatusAlert: 'StatusAlert',
+  Alert: 'Alert',
 }));
 jest.mock('data/selectors', () => ({
   __esModule: true,

diff --git a/src/components/GradesView/__snapshots__/StatusAlerts.test.jsx.snap b/src/components/GradesView/__snapshots__/StatusAlerts.test.jsx.snap
@@ -2,23 +2,23 @@
 
 exports[`StatusAlerts snapshots basic snapshot 1`] = `
 <React.Fragment>
-  <StatusAlert
-    alertType="success"
-    dialog={
-      <FormattedMessage
-        defaultMessage="The grade has been successfully edited.  You may see a slight delay before updates appear in the Gradebook."
-        description="An alert text for successfully editing  a grade"
-        id="gradebook.GradesView.editSuccessAlert"
-      />
-    }
+  <Alert
     onClose={[MockFunction handleCloseSuccessBanner]}
-    open={true}
-  />
-  <StatusAlert
-    alertType="danger"
-    dialog="the quiCk brown does somEthing or other"
+    show={true}
+    variant="success"
+  >
+    <FormattedMessage
+      defaultMessage="The grade has been successfully edited.  You may see a slight delay before updates appear in the Gradebook."
+      description="An alert text for successfully editing  a grade"
+      id="gradebook.GradesView.editSuccessAlert"
+    />
+  </Alert>
+  <Alert
     dismissible={false}
-    open={false}
-  />
+    show={false}
+    variant="danger"
+  >
+    the quiCk brown does somEthing or other
+  </Alert>
 </React.Fragment>
 `;