Paragon StatusAlert deprecation (#248)

* refactor: updated StatusAlert to Alert in EmailSettingsModal component * refactor: updated StatusAlert to Alert in CourseEnrollments component * refactor: updated StatusAlert to Alert in ProgramPage component * refactor: updated StatusAlert to Alert in ProgramListPage component * fix: previous linting issues * refactor: updated alert component with suggestions * fix: snapshots fixed
openedx · Aug 11, 2022 · 6f265b8 · 6f265b8
1 parent 8ad2cc4
commit 6f265b8
Show file tree

Hide file tree

Showing 9 changed files with 146 additions and 179 deletions.
diff --git a/.gitignore b/.gitignore
@@ -64,3 +64,4 @@ public
 # Cookie cutter
 dist/
 .idea
+.vscode
diff --git a/src/components/course-enrollments/CourseEnrollments.jsx b/src/components/course-enrollments/CourseEnrollments.jsx
@@ -1,10 +1,9 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { breakpoints, StatusAlert } from '@edx/paragon';
+import { breakpoints, Alert } from '@edx/paragon';
+import { Warning, CheckCircle } from '@edx/paragon/icons';
 import { AppContext } from '@edx/frontend-platform/react';
-import { faExclamationTriangle, faCheckCircle } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import MediaQuery from 'react-responsive';
 import { LoadingSpinner } from '../loading-spinner';
 
@@ -50,43 +49,34 @@ export class CourseEnrollments extends Component {
   );
 
   renderError = () => (
-    <StatusAlert
-      alertType="danger"
-      dialog={(
-        <div className="d-flex">
-          <div>
-            <FontAwesomeIcon className="mr-2" icon={faExclamationTriangle} />
-          </div>
-          <div>
-            An error occurred while retrieving your course enrollments. Please try again.
-          </div>
-        </div>
-      )}
+    <Alert
+      variant="danger"
       dismissible={false}
-      open
-    />
+      icon={Warning}
+      show
+    >
+      <div className="d-flex">
+        An error occurred while retrieving your course enrollments. Please try again.
+      </div>
+    </Alert>
   );
 
   renderMarkCourseCompleteSuccessAlert = () => {
     const { modifyIsMarkCourseCompleteSuccess } = this.props;
     return (
-      <StatusAlert
-        alertType="success"
-        dialog={(
-          <div className="d-flex">
-            <div>
-              <FontAwesomeIcon className="mr-2" icon={faCheckCircle} />
-            </div>
-            <div>
-              Your course was marked as complete.
-            </div>
-          </div>
-        )}
+      <Alert
+        variant="success"
+        icon={CheckCircle}
         onClose={() => {
           modifyIsMarkCourseCompleteSuccess({ isSuccess: false });
         }}
-        open
-      />
+        show
+        dismissible
+      >
+        <div className="d-flex">
+          Your course was marked as complete.
+        </div>
+      </Alert>
     );
   };
 

diff --git a/src/components/course-enrollments/course-cards/email-settings/EmailSettingsModal.jsx b/src/components/course-enrollments/course-cards/email-settings/EmailSettingsModal.jsx
@@ -2,10 +2,9 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import {
-  Input, Modal, StatusAlert, StatefulButton,
+  Input, Modal, Alert, StatefulButton,
 } from '@edx/paragon';
-import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Warning } from '@edx/paragon/icons';
 
 import { updateEmailSettings } from './data';
 
@@ -120,25 +119,14 @@ class EmailSettingsModal extends Component {
         body={(
           <>
             {error && (
-              <StatusAlert
-                alertType="danger"
-                dialog={(
-                  <div className="d-flex">
-                    <div>
-                      <FontAwesomeIcon
-                        className="mr-3"
-                        icon={faExclamationTriangle}
-                      />
-                    </div>
-                    <div>
-                      An error occurred while saving your email settings. Please
-                      try again.
-                    </div>
-                  </div>
-                )}
+              <Alert
+                variant="danger"
                 dismissible={false}
-                open
-              />
+                icon={Warning}
+                show
+              >
+                An error occurred while saving your email settings. Please try again.
+              </Alert>
             )}
             <div className="form-check">
               <Input

diff --git a/src/components/course-enrollments/tests/CourseEnrollments.test.jsx b/src/components/course-enrollments/tests/CourseEnrollments.test.jsx
@@ -210,7 +210,7 @@ describe('<CourseEnrollments />', () => {
         />
       </AppContext.Provider>
     ));
-    wrapper.find('.alert .btn.close').simulate('click');
+    wrapper.find('.alert-success .btn').simulate('click');
     expect(mockModifyIsMarkCourseCompleteSuccess).toBeCalledTimes(1);
   });
 });
diff --git a/src/components/course-enrollments/tests/__snapshots__/CourseEnrollments.test.jsx.snap b/src/components/course-enrollments/tests/__snapshots__/CourseEnrollments.test.jsx.snap
@@ -2,36 +2,37 @@
 
 exports[`<CourseEnrollments /> renders course enrollments correctly with error 1`] = `
 <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}
+      fill="none"
+      focusable={false}
+      height={24}
+      role="img"
+      viewBox="0 0 24 24"
+      width={24}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"
+        fill="currentColor"
+      />
+    </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 retrieving your course enrollments. Please try again.
       </div>
     </div>
@@ -58,53 +59,55 @@ exports[`<CourseEnrollments /> renders course enrollments correctly with loading
 
 exports[`<CourseEnrollments /> renders course enrollments correctly with mark course as complete success status alert 1`] = `
 <div
-  className="alert fade alert-dismissible alert-success show"
-  hidden={false}
+  className="fade alert-content alert alert-success show"
   role="alert"
 >
-  <button
-    aria-label="Close"
-    className="btn close"
-    onBlur={[Function]}
-    onClick={[Function]}
-    onKeyDown={[Function]}
-    type="button"
+  <span
+    className="pgn__icon alert-icon"
   >
-    <span
-      aria-hidden="true"
+    <svg
+      aria-hidden={true}
+      fill="none"
+      focusable={false}
+      height={24}
+      role="img"
+      viewBox="0 0 24 24"
+      width={24}
+      xmlns="http://www.w3.org/2000/svg"
     >
-      ×
-    </span>
-  </button>
+      <path
+        d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
+        fill="currentColor"
+      />
+    </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-check-circle fa-w-16 mr-2"
-          data-icon="check-circle"
-          data-prefix="fas"
-          focusable="false"
-          role="img"
-          style={Object {}}
-          viewBox="0 0 512 512"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"
-            fill="currentColor"
-            style={Object {}}
-          />
-        </svg>
-      </div>
-      <div>
+      <div
+        className="d-flex"
+      >
         Your course was marked as complete.
       </div>
     </div>
+    <div
+      className="pgn__alert-actions pgn__action-row"
+    >
+      <span
+        className="pgn__action-row-spacer"
+      />
+      <button
+        className="btn btn-tertiary btn-sm"
+        disabled={false}
+        onClick={[Function]}
+        type="button"
+      >
+        Dismiss
+      </button>
+    </div>
   </div>
 </div>
 `;
diff --git a/src/components/program/ProgramPage.jsx b/src/components/program/ProgramPage.jsx
@@ -4,10 +4,9 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { Helmet } from 'react-helmet';
 import MediaQuery from 'react-responsive';
-import { breakpoints, StatusAlert } from '@edx/paragon';
+import { breakpoints, Alert } from '@edx/paragon';
+import { Warning } from '@edx/paragon/icons';
 import { sendPageEvent } from '@edx/frontend-platform/analytics';
-import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 import { Layout, MainContent, Sidebar } from '../layout';
 import { LoadingSpinner } from '../loading-spinner';
@@ -78,27 +77,22 @@ class ProgramPage extends Component {
 
   renderError = () => (
     <div className="container my-4">
-      <StatusAlert
-        alertType="danger"
-        dialog={(
-          <div className="d-flex">
-            <div>
-              <FontAwesomeIcon className="mr-2" icon={faExclamationTriangle} />
-            </div>
-            <div>
-              You are not authorized to view this page.
-              This page is reserved for Masters students only.
-              You may access public edX courses on
-              {' '}
-              <a className="alert-link" href="https://edx.org">edX.org</a>.
-              If you are a Masters student and believe you should have access,
-              please contact your advisor at the university for further assistance.
-            </div>
-          </div>
-        )}
+      <Alert
+        variant="danger"
+        icon={Warning}
         dismissible={false}
-        open
-      />
+        show
+      >
+        <div className="d-flex">
+          You are not authorized to view this page.
+          This page is reserved for Masters students only.
+          You may access public edX courses on
+          {' '}
+          <Alert.Link href="https://edx.org">edX.org</Alert.Link>.
+          If you are a Masters student and believe you should have access,
+          please contact your advisor at the university for further assistance.
+        </div>
+      </Alert>
     </div>
   );
 

diff --git a/src/components/programs-list/ProgramListPage.jsx b/src/components/programs-list/ProgramListPage.jsx
@@ -3,9 +3,8 @@ 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 { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Alert } from '@edx/paragon';
+import { Warning } from '@edx/paragon/icons';
 import { Layout } from '../layout';
 import { LoadingSpinner } from '../loading-spinner';
 
@@ -79,19 +78,14 @@ export class ProgramListPage extends Component {
   };
 
   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={Warning}
       dismissible={false}
-      open
-    />
+      show
+    >
+      {message}
+    </Alert>
   );
 
   render() {