refactor: updated StatusAlert to Alert in ProgramListPage component

openedx · Jun 21, 2022 · 4b18087 · 4b18087
1 parent 0887685
commit 4b18087
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 39 deletions.
diff --git a/src/components/programs-list/ProgramListPage.jsx b/src/components/programs-list/ProgramListPage.jsx
@@ -3,7 +3,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { sendPageEvent } from '@edx/frontend-platform/analytics';
-import { StatusAlert } from '@edx/paragon';
+import { Alert } from '@edx/paragon';
 import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Layout } from '../layout';
@@ -78,20 +78,19 @@ export class ProgramListPage extends Component {
     return enrolledProgramsList;
   };
 
+  errorIcon = () => <FontAwesomeIcon className="mr-2" icon={faExclamationTriangle} />;
+
   renderError = ({ message }) => (
-    <StatusAlert
-      alertType="danger"
-      dialog={(
-        <div className="d-flex">
-          <div>
-            <FontAwesomeIcon className="mr-2" icon={faExclamationTriangle} />
-          </div>
-          <div>{message}</div>
-        </div>
-      )}
+    <Alert
+      variant="danger"
+      icon={this.errorIcon}
       dismissible={false}
-      open
-    />
+      show
+    >
+      <div className="d-flex">
+        {message}
+      </div>
+    </Alert>
   );
 
   render() {

diff --git a/src/components/programs-list/tests/ProgramListPage.test.jsx b/src/components/programs-list/tests/ProgramListPage.test.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
 import { shallow } from 'enzyme';
-import { StatusAlert } from '@edx/paragon';
+import { Alert } from '@edx/paragon';
 import { IntlProvider } from 'react-intl';
 import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
 import { ProgramListPage } from '../ProgramListPage';
@@ -114,6 +114,6 @@ describe('ProgramListPage', () => {
     wrapper.setProps({ enrolledPrograms: data });
 
     expect(wrapper.find('.table-responsive').exists()).toBeFalsy();
-    expect(wrapper.find(StatusAlert).exists()).toBeTruthy();
+    expect(wrapper.find(Alert).exists()).toBeTruthy();
   });
 });
diff --git a/src/components/programs-list/tests/__snapshots__/ProgramListPage.test.jsx.snap b/src/components/programs-list/tests/__snapshots__/ProgramListPage.test.jsx.snap
@@ -420,36 +420,39 @@ exports[`ProgramListPage renders fetching program error page when there are issu
       className="container my-4"
     >
       <div
-        className="alert fade alert-danger show"
-        hidden={false}
+        className="fade alert-content alert alert-danger show"
         role="alert"
       >
+        <span
+          className="pgn__icon alert-icon"
+        >
+          <svg
+            aria-hidden="true"
+            className="svg-inline--fa fa-exclamation-triangle fa-w-18 mr-2"
+            data-icon="exclamation-triangle"
+            data-prefix="fas"
+            focusable="false"
+            role="img"
+            style={Object {}}
+            viewBox="0 0 576 512"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
+              fill="currentColor"
+              style={Object {}}
+            />
+          </svg>
+        </span>
         <div
-          className="alert-dialog"
+          className="pgn__alert-message-wrapper"
         >
           <div
-            className="d-flex"
+            className="alert-message-content"
           >
-            <div>
-              <svg
-                aria-hidden="true"
-                className="svg-inline--fa fa-exclamation-triangle fa-w-18 mr-2"
-                data-icon="exclamation-triangle"
-                data-prefix="fas"
-                focusable="false"
-                role="img"
-                style={Object {}}
-                viewBox="0 0 576 512"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
-                  fill="currentColor"
-                  style={Object {}}
-                />
-              </svg>
-            </div>
-            <div>
+            <div
+              className="d-flex"
+            >
               An error occurred while fetching your program enrollments. Please try again later.
             </div>
           </div>