Paragon StatusAlert deprecation (#1692)

* refactor: updated deprecation of MasqueradeBanner component and updated unit tests * refactor: updated deprecation of ProgramRecord component and updated unit tests * refactor: updated deprecation of SendLearnerRecordModal component and updated unit tests * refactor: updated deprecation of ShareProgramRecordModal component and updated unit tests * refactor: updated Dismiss button size to be consistent with library * refactor: added override styles of Alert btn styling for edx theme
openedx · Jul 27, 2022 · 6774165 · 6774165
1 parent f825660
commit 6774165
Show file tree

Hide file tree

Showing 9 changed files with 103 additions and 111 deletions.
diff --git a/credentials/static/components/MasqueradeBanner.jsx b/credentials/static/components/MasqueradeBanner.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import axios from 'axios';
 import PropTypes from 'prop-types';
 import Cookies from 'js-cookie';
-import { Button, StatusAlert } from '@edx/paragon';
+import { Button, Alert } from '@edx/paragon';
 
 import StringUtils from './Utils';
 
@@ -106,17 +106,15 @@ class MasqueradeBanner extends React.Component {
             />
           </form>
         </div>
-        <StatusAlert
-          alertType="danger"
-          open={this.state.masqueradeFailureAlertOpen}
+        <Alert
+          variant="danger"
+          show={this.state.masqueradeFailureAlertOpen}
           onClose={this.closeMasqueradeFailureAlert}
-          dialog={(
-            <div>
-              <span className="h6">{ gettext('Masquerading failed') }</span>
-              <span className="alert-body">{ gettext('You either do not have permission to masquerade as this user, or the user could not be found.') }</span>
-            </div>
-            )}
-        />
+          dismissible
+        >
+          <Alert.Heading>{ gettext('Masquerading failed') }</Alert.Heading>
+          <span className="alert-body">{ gettext('You either do not have permission to masquerade as this user, or the user could not be found.') }</span>
+        </Alert>
       </nav>
     );
   }

diff --git a/credentials/static/components/ProgramRecord.jsx b/credentials/static/components/ProgramRecord.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import axios from 'axios';
 import PropTypes from 'prop-types';
-import { Button, Icon, StatusAlert } from '@edx/paragon';
+import { Button, Icon, Alert } from '@edx/paragon';
 import Cookies from 'js-cookie';
 
 import FoldingTable from './FoldingTable';
@@ -301,45 +301,39 @@ class ProgramRecord extends React.Component {
             />
           </div>
           )}
-        <StatusAlert
-          alertType="info"
-          open={this.state.sendRecordLoadingAlertOpen}
+        <Alert
+          variant="info"
+          show={this.state.sendRecordLoadingAlertOpen}
           onClose={this.closeSendRecordLoadingAlert}
-          dialog={(
-            <div>
-              <span className="h6">{ gettext('We are sending your program record.') }</span>
-              <Icon id="StatusAlertIcon" className={['fa', 'fa-spinner', 'fa-spin']} />
-            </div>
-          )}
-        />
-        <StatusAlert
-          alertType="danger"
-          open={this.state.sendRecordFailureAlertOpen}
+          icon={() => <Icon id="StatusAlertIcon" className={['fa', 'fa-spinner', 'fa-spin']} />}
+          dismissible
+        >
+          <Alert.Heading>{ gettext('We are sending your program record.') }</Alert.Heading>
+        </Alert>
+        <Alert
+          variant="danger"
+          show={this.state.sendRecordFailureAlertOpen}
           onClose={this.closeSendRecordFailureAlert}
-          dialog={(
-            <div>
-              <span className="h6">{ gettext('We were unable to send your program record.') }</span>
-              <span className="alert-body">
-                {StringUtils.interpolate(gettext('We were unable to send your record to {orgs}.  You can attempt to send this record again.  Contact support if this issue persists.'),
-                  { orgs: StringUtils.formatStringList(this.state.sendRecordFailureOrgs) })}
-              </span>
-            </div>
-          )}
-        />
-        <StatusAlert
-          alertType="success"
-          open={this.state.sendRecordSuccessAlertOpen}
+          dismissible
+        >
+          <Alert.Heading>{ gettext('We were unable to send your program record.') }</Alert.Heading>
+          <span className="alert-body">
+            {StringUtils.interpolate(gettext('We were unable to send your record to {orgs}.  You can attempt to send this record again.  Contact support if this issue persists.'),
+              { orgs: StringUtils.formatStringList(this.state.sendRecordFailureOrgs) })}
+          </span>
+        </Alert>
+        <Alert
+          variant="success"
+          show={this.state.sendRecordSuccessAlertOpen}
           onClose={this.closeSendRecordSuccessAlert}
-          dialog={(
-            <div>
-              <span className="h6">{ gettext('You have successfully shared your Learner Record') }</span>
-              <span className="alert-body">
-                {StringUtils.interpolate(gettext('You have sent your record to {orgs}.  Next, ensure you understand their application process.'),
-                  { orgs: StringUtils.formatStringList(this.state.sendRecordSuccessOrgs) })}
-              </span>
-            </div>
-          )}
-        />
+          dismissible
+        >
+          <Alert.Heading>{ gettext('You have successfully shared your Learner Record') }</Alert.Heading>
+          <span className="alert-body">
+            {StringUtils.interpolate(gettext('You have sent your record to {orgs}.  Next, ensure you understand their application process.'),
+              { orgs: StringUtils.formatStringList(this.state.sendRecordSuccessOrgs) })}
+          </span>
+        </Alert>
         <article className="program-record">
           <header className="d-flex justify-content-between program-record-header">
             <div className="program-overview">

diff --git a/credentials/static/components/SendLearnerRecordModal.jsx b/credentials/static/components/SendLearnerRecordModal.jsx
@@ -2,7 +2,7 @@ import 'core-js/features/promise'; // Needed to support Promises on legacy brows
 import React from 'react';
 import PropTypes from 'prop-types';
 import {
-  Button, CheckBoxGroup, CheckBox, Modal, StatusAlert,
+  Button, CheckBoxGroup, CheckBox, Modal, Alert,
 } from '@edx/paragon';
 import StringUtils from './Utils';
 
@@ -106,17 +106,16 @@ class SendLearnerRecordModal extends React.Component {
             </p>
             {this.anyInactivePathways && (
             <div>
-              <StatusAlert
-                alertType="danger"
-                open
+              <Alert
+                variant="danger"
+                show
                 dismissible={false}
-                dialog={(
-                  <div>
-                    <span className="h6">{gettext('Not all credit partners are ready to receive records yet')}</span>
-                    <p className="alert-body">{gettext('You can check back in the future or share your record link directly if you need to do so immediately.')}</p>
-                  </div>
-)}
-              />
+              >
+                <Alert.Heading>
+                  { gettext('Not all credit partners are ready to receive records yet')}
+                </Alert.Heading>
+                <p className="alert-body">{gettext('You can check back in the future or share your record link directly if you need to do so immediately.')}</p>
+              </Alert>
             </div>
             )}
             <p>{ gettext('Select organization(s) you wish to send this record to:') }</p>

diff --git a/credentials/static/components/ShareProgramRecordModal.jsx b/credentials/static/components/ShareProgramRecordModal.jsx
@@ -4,7 +4,7 @@ import axios from 'axios';
 import PropTypes from 'prop-types';
 import Cookies from 'js-cookie';
 import {
-  Button, Icon, InputText, Modal, StatusAlert,
+  Button, Icon, InputText, Modal, Alert,
 } from '@edx/paragon';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import trackEvent from './Analytics';
@@ -135,26 +135,26 @@ class ShareProgramRecordModal extends React.Component {
           <div>
             {urlError
               && (
-              <StatusAlert
-                alertType="danger"
-                open
+              <Alert
+                variant="danger"
+                show
                 dismissible={false}
-                dialog={(
-                  <div>
-                    <span className="h6">{ gettext('We were unable to create your record link.') }</span>
-                    <p className="alert-body">{ gettext('You can close this window and try again.') }</p>
-                  </div>
-                )}
-              />
+              >
+                <Alert.Heading>
+                  { gettext('We were unable to create your record link.') }
+                </Alert.Heading>
+                <p className="alert-body">{ gettext('You can close this window and try again.') }</p>
+              </Alert>
               )}
             {urlCopied
               && (
-              <StatusAlert
-                alertType="success"
-                open
+              <Alert
+                variant="success"
+                show
                 dismissible={false}
-                dialog={gettext('Successfully copied program record link.')}
-              />
+              >
+                {gettext('Successfully copied program record link.')}
+              </Alert>
               )}
             <p>{ gettext('Copy this link to share your record with a university, employer, or anyone else of your choosing. Anyone you share this link with will have access to your record forever.') }</p>
             {this.renderSwitchToSendParagraph()}

diff --git a/credentials/static/components/specs/MasqueradeBanner.test.jsx b/credentials/static/components/specs/MasqueradeBanner.test.jsx
@@ -30,19 +30,19 @@ describe('<MasqueradeBanner />', () => {
     });
 
     it('shows the failure alert', () => {
-      expect(wrapper.find('.alert-danger').prop('hidden')).toBe(true);
+      expect(wrapper.find('.alert-danger').exists()).toBe(false);
       wrapper.setState({ masqueradeFailureAlertOpen: true });
       wrapper.update();
-      expect(wrapper.find('.alert-danger').prop('hidden')).toBe(false);
+      expect(wrapper.find('.alert-danger .alert-heading').first().text()).toEqual(gettext('Masquerading failed'));
     });
 
     it('closes the failure alert', () => {
-      expect(wrapper.find('.alert-danger').prop('hidden')).toBe(true);
+      expect(wrapper.find('.alert-danger').exists()).toBe(false);
       wrapper.setState({ masqueradeFailureAlertOpen: true });
       wrapper.update();
-      expect(wrapper.find('.alert-danger').prop('hidden')).toBe(false);
-      wrapper.find('.alert-danger .close').simulate('click');
-      expect(wrapper.find('.alert-danger').prop('hidden')).toBe(true);
+      expect(wrapper.find('.alert-danger').hasClass('show')).toBe(true);
+      wrapper.find('.alert-danger .btn').first().simulate('click');
+      expect(wrapper.find('.alert-danger').hasClass('show')).toBe(false);
     });
 
     it('handles releasing masquerade', () => {
@@ -52,7 +52,7 @@ describe('<MasqueradeBanner />', () => {
 
       return postPromise.then(() => {
         wrapper.update();
-        expect(wrapper.find('.alert-danger').prop('hidden')).toBe(true);
+        expect(wrapper.find('.alert-danger').exists()).toBe(false);
       });
     });
   });
@@ -92,19 +92,19 @@ describe('<MasqueradeBanner />', () => {
 
       return postPromise.then(() => {
         wrapper.update();
-        expect(wrapper.find('.alert-danger').prop('hidden')).toBe(true);
+        expect(wrapper.find('.alert-danger').exists()).toBe(false);
       });
     });
 
     it('shows the failure alert on masquerade failure', () => {
-      expect(wrapper.find('.alert-danger').prop('hidden')).toBe(true);
+      expect(wrapper.find('.alert-danger').exists()).toBe(false);
       const postPromise = Promise.resolve({ status: 400, response: { message: 'error' } });
       axios.post.mockImplementation(() => postPromise);
       wrapper.find('.masquerade-form').simulate('submit');
 
       return postPromise.catch(() => {
         wrapper.update();
-        expect(wrapper.find('.alert-danger').prop('hidden')).toBe(false);
+        expect(wrapper.find('.alert-danger').hasClass('show')).toBe(true);
       });
     });
   });

diff --git a/credentials/static/components/specs/ProgramRecord.test.jsx b/credentials/static/components/specs/ProgramRecord.test.jsx
@@ -192,51 +192,51 @@ describe('<ProgramRecord />', () => {
     });
 
     it('shows the info alert', () => {
-      expect(wrapper.find('.alert-info').prop('hidden')).toBe(true);
+      expect(wrapper.find('.alert-info').exists()).toBe(false);
       wrapper.setState({ sendRecordLoadingAlertOpen: true });
       wrapper.update();
-      expect(wrapper.find('.alert-info').prop('hidden')).toBe(false);
+      expect(wrapper.find('.alert-info').hasClass('show')).toBe(true);
     });
 
     it('shows the success alert', () => {
-      expect(wrapper.find('.alert-success').prop('hidden')).toBe(true);
+      expect(wrapper.find('.alert-danger').exists()).toBe(false);
       wrapper.setState({ sendRecordSuccessOrgs: ['RIT'], sendRecordSuccessAlertOpen: true });
       wrapper.update();
-      expect(wrapper.find('.alert-success').prop('hidden')).toBe(false);
+      expect(wrapper.find('.alert-success').hasClass('show')).toBe(true);
     });
 
     it('shows the failure alert', () => {
-      expect(wrapper.find('.alert-danger').prop('hidden')).toBe(true);
+      expect(wrapper.find('.alert-danger').exists()).toBe(false);
       wrapper.setState({ sendRecordFailureOrgs: ['RIT'], sendRecordFailureAlertOpen: true });
       wrapper.update();
-      expect(wrapper.find('.alert-danger').prop('hidden')).toBe(false);
+      expect(wrapper.find('.alert-danger').hasClass('show')).toBe(true);
     });
 
     it('closes the info alert', () => {
-      expect(wrapper.find('.alert-info').prop('hidden')).toBe(true);
+      expect(wrapper.find('.alert-info').exists()).toBe(false);
       wrapper.setState({ sendRecordLoadingAlertOpen: true });
       wrapper.update();
-      expect(wrapper.find('.alert-info').prop('hidden')).toBe(false);
-      wrapper.find('.alert-info .close').simulate('click');
-      expect(wrapper.find('.alert-info').prop('hidden')).toBe(true);
+      expect(wrapper.find('.alert-info').hasClass('show')).toBe(true);
+      wrapper.find('.alert-info .btn').first().simulate('click');
+      expect(wrapper.find('.alert-info').hasClass('show')).toBe(false);
     });
 
     it('closes the success alert', () => {
-      expect(wrapper.find('.alert-success').prop('hidden')).toBe(true);
+      expect(wrapper.find('.alert-success').exists()).toBe(false);
       wrapper.setState({ sendRecordSuccessOrgs: ['RIT'], sendRecordSuccessAlertOpen: true });
       wrapper.update();
-      expect(wrapper.find('.alert-success').prop('hidden')).toBe(false);
-      wrapper.find('.alert-success .close').simulate('click');
-      expect(wrapper.find('.alert-success').prop('hidden')).toBe(true);
+      expect(wrapper.find('.alert-success').hasClass('show')).toBe(true);
+      wrapper.find('.alert-success .btn').first().simulate('click');
+      expect(wrapper.find('.alert-success').hasClass('show')).toBe(false);
     });
 
     it('closes the failure alert', () => {
-      expect(wrapper.find('.alert-danger').prop('hidden')).toBe(true);
+      expect(wrapper.find('.alert-danger').exists()).toBe(false);
       wrapper.setState({ sendRecordFailureOrgs: ['RIT'], sendRecordFailureAlertOpen: true });
       wrapper.update();
-      expect(wrapper.find('.alert-danger').prop('hidden')).toBe(false);
-      wrapper.find('.alert-danger .close').simulate('click');
-      expect(wrapper.find('.alert-danger').prop('hidden')).toBe(true);
+      expect(wrapper.find('.alert-danger').hasClass('show')).toBe(true);
+      wrapper.find('.alert-danger .btn').first().simulate('click');
+      expect(wrapper.find('.alert-danger').hasClass('show')).toBe(false);
     });
 
     it('correctly categorizes send request success', () => {

diff --git a/credentials/static/components/specs/ShareProgramRecordModal.test.jsx b/credentials/static/components/specs/ShareProgramRecordModal.test.jsx
@@ -139,7 +139,7 @@ describe('<ShareProgramRecordModal />', () => {
         expect(wrapper.find('.modal-body .alert-danger').length).toBe(1);
 
         const errorText = 'We were unable to create your record link.';
-        expect(wrapper.find('.modal-body .alert-danger span').text()).toBe(errorText);
+        expect(wrapper.find('.modal-body .alert-danger .alert-heading').first().text()).toBe(errorText);
       });
     });
   });

diff --git a/credentials/static/sass/overrides.scss b/credentials/static/sass/overrides.scss
@@ -9,4 +9,11 @@
     white-space: normal;
     overflow: hidden;
     text-overflow: ellipsis;
-  }
+  }
+
+.alert {
+  .btn {
+    font-size: .875rem !important;
+    font-weight: 500 !important;
+  }
+}
diff --git a/credentials/static/sass/views/_program-record.scss b/credentials/static/sass/views/_program-record.scss
@@ -22,12 +22,6 @@ $record-border-color: #C2C2C2;
   }
 
   // Needed to override paragon default .alert styles
-  .alert {
-    .btn {
-        font-size: 24px;
-        font-weight: bold;
-    }
-  }
 
   .alert-body {
       display: block;