openedx · abdullahwaheed · Aug 11, 2022 · Jun 21, 2022 · Jun 21, 2022 · Jun 21, 2022
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,7 +1,7 @@
 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 { AppContext } from '@edx/frontend-platform/react';
 import { faExclamationTriangle, faCheckCircle } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -49,44 +49,39 @@ export class CourseEnrollments extends Component {
     || this.hasCourseRunsWithStatus('upcoming')
   )
 
+  errorIcon = () => <FontAwesomeIcon className="mr-2" icon={faExclamationTriangle} />
+
+  succeesIcon = () => <FontAwesomeIcon className="mr-2" icon={faCheckCircle} />
+
   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={this.errorIcon}
+      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={this.succeesIcon}
         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,7 +2,7 @@ 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';
@@ -113,32 +113,25 @@ class EmailSettingsModal extends Component {
   render() {
     const { error, hasEmailsEnabled, isSubmitting } = this.state;
     const { title, open, courseRunId } = this.props;
+    const errorIcon = () => <FontAwesomeIcon className="mr-3" icon={faExclamationTriangle} />;
 
     return (
       <Modal
         title={`Email Settings for ${title}`}
         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={errorIcon}
+                show
+              >
+                <div className="d-flex">
+                  An error occurred while saving your email settings. Please
+                  try again.
+                </div>
+              </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,39 @@
 
 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"
+      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 retrieving your course enrollments. Please try again.
       </div>
     </div>
@@ -58,53 +61,57 @@ 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
+    <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"
     >
-      ×
-    </span>
-  </button>
+      <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>
+  </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,7 +4,7 @@ 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 { sendPageEvent } from '@edx/frontend-platform/analytics';
 import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -76,29 +76,26 @@ class ProgramPage extends Component {
     });
   }
 
+  errorIcon = () => <FontAwesomeIcon className="mr-2" icon={faExclamationTriangle} />;
+
   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={this.errorIcon}
         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,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() {
-Original file line number
+Diff line change
@@ Expand Up / @@ -64,3 +64,4 @@ public @@
     # Cookie cutter
     dist/
     .idea
+    .vscode