Paragon StatusAlert deprecation (#762)

* refactor: migrated StatusAlert deprecation to Alert * refactor: removed central StatusAlert and migrated each component to Paragon Alert
openedx · Aug 25, 2022 · 05afea4 · 05afea4
1 parent 4b61780
commit 05afea4
Show file tree

Hide file tree

Showing 28 changed files with 880 additions and 497 deletions.
diff --git a/.gitignore b/.gitignore
@@ -8,3 +8,4 @@ module.config.js
 dist/
 
 .idea
+.vscode
diff --git a/src/components/CollaboratorPage/index.jsx b/src/components/CollaboratorPage/index.jsx
@@ -1,9 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Helmet } from 'react-helmet';
+import { Alert } from '@edx/paragon';
 
 import CollaboratorForm from './CollaboratorForm';
-import StatusAlert from '../StatusAlert';
 import PageContainer from '../PageContainer';
 
 class CollaboratorPage extends React.Component {
@@ -51,12 +51,13 @@ class CollaboratorPage extends React.Component {
 
     if (!isCreateForm && (!location.state || !location.state.uuid)) {
       return (
-        <StatusAlert
+        <Alert
           id="error"
-          alertType="danger"
-          title="Could not load page: "
-          message="Direct access to collaborators not supported"
-        />
+          variant="danger"
+        >
+          <Alert.Heading>Could not load page: </Alert.Heading>
+          <p>Direct access to collaborators not supported</p>
+        </Alert>
       );
     }
 
@@ -87,12 +88,14 @@ class CollaboratorPage extends React.Component {
         <PageContainer>
           { referrer
           && (
-            <StatusAlert
+            <Alert
               id="sent-from-edit-course-info"
-              alertType="info"
-              message="The data you entered on the course edit screen is saved. You will return to that page when you have finished updating collaborator information."
+              variant="info"
               dismissible
-            />
+            >
+              The data you entered on the course edit screen is saved. You will return to that page
+              when you have finished updating collaborator information.
+            </Alert>
           )}
           <div>
             <h2>{titleText}</h2>
@@ -109,11 +112,12 @@ class CollaboratorPage extends React.Component {
               {...this.props}
             />
             { errorArray.length > 0 && (
-              <StatusAlert
+              <Alert
                 id="create-collaborator-error"
-                alertType="danger"
-                message={errorArray}
-              />
+                variant="danger"
+              >
+                {errorArray}
+              </Alert>
             )}
           </div>
         </PageContainer>

diff --git a/src/components/CreateCoursePage/__snapshots__/CreateCoursePage.test.jsx.snap b/src/components/CreateCoursePage/__snapshots__/CreateCoursePage.test.jsx.snap
@@ -142,21 +142,32 @@ exports[`CreateCoursePage renders page correctly with course create error 1`] =
         touchOnChange={false}
         updateUnregisteredFields={false}
       />
-      <StatusAlert
-        alertType="danger"
-        className=""
+      <ForwardRef
+        closeLabel="Dismiss"
         dismissible={false}
-        iconClassNames={Array []}
         id="create-error"
-        message={
-          Array [
-            "Fail",
-            <br />,
-          ]
-        }
         onClose={[Function]}
-        title={null}
-      />
+        show={true}
+        stacked={false}
+        transition={
+          Object {
+            "$$typeof": Symbol(react.forward_ref),
+            "defaultProps": Object {
+              "appear": false,
+              "in": false,
+              "mountOnEnter": false,
+              "timeout": 300,
+              "unmountOnExit": false,
+            },
+            "displayName": "Fade",
+            "render": [Function],
+          }
+        }
+        variant="danger"
+      >
+        Fail
+        <br />
+      </ForwardRef>
     </div>
   </PageContainer>
 </Fragment>
@@ -293,16 +304,45 @@ exports[`CreateCoursePage renders page correctly with course create success 1`]
 `;
 
 exports[`CreateCoursePage renders page correctly with no publisherUserInfo 1`] = `
-<StatusAlert
-  alertType="danger"
-  className=""
+<ForwardRef
+  closeLabel="Dismiss"
   dismissible={false}
-  iconClassNames={Array []}
   id="error"
-  message="User information unavailable"
   onClose={[Function]}
-  title="Course Create Form failed to load: "
-/>
+  show={true}
+  stacked={false}
+  transition={
+    Object {
+      "$$typeof": Symbol(react.forward_ref),
+      "defaultProps": Object {
+        "appear": false,
+        "in": false,
+        "mountOnEnter": false,
+        "timeout": 300,
+        "unmountOnExit": false,
+      },
+      "displayName": "Fade",
+      "render": [Function],
+    }
+  }
+  variant="danger"
+>
+  <AlertHeading
+    as={
+      Object {
+        "$$typeof": Symbol(react.forward_ref),
+        "displayName": "DivStyledAsH4",
+        "render": [Function],
+      }
+    }
+    bsPrefix="alert-heading"
+  >
+    Course Create Form failed to load: 
+  </AlertHeading>
+  <p>
+    User information unavailable
+  </p>
+</ForwardRef>
 `;
 
 exports[`CreateCoursePage renders page correctly with org error 1`] = `
@@ -365,21 +405,32 @@ exports[`CreateCoursePage renders page correctly with org error 1`] = `
         touchOnChange={false}
         updateUnregisteredFields={false}
       />
-      <StatusAlert
-        alertType="danger"
-        className=""
+      <ForwardRef
+        closeLabel="Dismiss"
         dismissible={false}
-        iconClassNames={Array []}
         id="create-error"
-        message={
-          Array [
-            "Fail",
-            <br />,
-          ]
-        }
         onClose={[Function]}
-        title={null}
-      />
+        show={true}
+        stacked={false}
+        transition={
+          Object {
+            "$$typeof": Symbol(react.forward_ref),
+            "defaultProps": Object {
+              "appear": false,
+              "in": false,
+              "mountOnEnter": false,
+              "timeout": 300,
+              "unmountOnExit": false,
+            },
+            "displayName": "Fade",
+            "render": [Function],
+          }
+        }
+        variant="danger"
+      >
+        Fail
+        <br />
+      </ForwardRef>
     </div>
   </PageContainer>
 </Fragment>

diff --git a/src/components/CreateCoursePage/index.jsx b/src/components/CreateCoursePage/index.jsx
@@ -1,11 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Helmet } from 'react-helmet';
+import { Alert } from '@edx/paragon';
 
 import CreateCourseForm from './CreateCourseForm';
 import LoadingSpinner from '../LoadingSpinner';
 import PageContainer from '../PageContainer';
-import StatusAlert from '../StatusAlert';
 import ConfirmationModal from '../ConfirmationModal';
 
 import { formatPriceData } from '../../utils';
@@ -94,12 +94,13 @@ class CreateCoursePage extends React.Component {
   render() {
     if (!this.props.publisherUserInfo) {
       return (
-        <StatusAlert
+        <Alert
           id="error"
-          alertType="danger"
-          title="Course Create Form failed to load: "
-          message="User information unavailable"
-        />
+          variant="danger"
+        >
+          <Alert.Heading>Course Create Form failed to load: </Alert.Heading>
+          <p>User information unavailable</p>
+        </Alert>
       );
     }
 
@@ -174,11 +175,12 @@ class CreateCoursePage extends React.Component {
                 courseRunOptions={courseRunOptions}
               />
               {errorArray.length > 1 && (
-                <StatusAlert
+                <Alert
                   id="create-error"
-                  alertType="danger"
-                  message={errorArray}
-                />
+                  variant="danger"
+                >
+                  {errorArray}
+                </Alert>
               ) }
             </div>
           )}

diff --git a/src/components/CreateCourseRunPage/CreateCourseRunPage.test.jsx b/src/components/CreateCourseRunPage/CreateCourseRunPage.test.jsx
@@ -1,10 +1,10 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import { shallowToJson } from 'enzyme-to-json';
+import { Alert } from '@edx/paragon';
 
 import { CreateCourseRunForm } from './CreateCourseRunForm';
 import CreateCourseRunPage from './index';
-import StatusAlert from '../StatusAlert';
 import { courseOptions } from '../../data/constants/testData';
 
 describe('CreateCourseRunPage', () => {
@@ -91,9 +91,9 @@ describe('CreateCourseRunPage', () => {
     />);
 
     // Confirm message is shown
-    const reviewAlert = component.find(StatusAlert);
+    const reviewAlert = component.find(Alert);
     const reviewMessage = 'Test Course has been submitted for review. No course runs can be added right now.';
-    expect(reviewAlert.props().message).toEqual(reviewMessage);
+    expect(reviewAlert.text()).toEqual(reviewMessage);
 
     // And confirm that we don't show form
     const form = component.find(CreateCourseRunForm);

diff --git a/src/components/CreateCourseRunPage/__snapshots__/CreateCourseRunPage.test.jsx.snap b/src/components/CreateCourseRunPage/__snapshots__/CreateCourseRunPage.test.jsx.snap
@@ -430,21 +430,33 @@ exports[`CreateCourseRunPage renders html correctly when error 1`] = `
         updateUnregisteredFields={false}
         uuid=""
       />
-      <StatusAlert
-        alertType="danger"
+      <ForwardRef
         className="mt-3"
+        closeLabel="Dismiss"
         dismissible={false}
-        iconClassNames={Array []}
         id="create-error"
-        message={
-          Array [
-            "failed",
-            <br />,
-          ]
-        }
         onClose={[Function]}
-        title={null}
-      />
+        show={true}
+        stacked={false}
+        transition={
+          Object {
+            "$$typeof": Symbol(react.forward_ref),
+            "defaultProps": Object {
+              "appear": false,
+              "in": false,
+              "mountOnEnter": false,
+              "timeout": 300,
+              "unmountOnExit": false,
+            },
+            "displayName": "Fade",
+            "render": [Function],
+          }
+        }
+        variant="danger"
+      >
+        failed
+        <br />
+      </ForwardRef>
     </div>
   </PageContainer>
 </Fragment>

diff --git a/src/components/CreateCourseRunPage/index.jsx b/src/components/CreateCourseRunPage/index.jsx
@@ -3,11 +3,12 @@ import moment from 'moment';
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Helmet } from 'react-helmet';
+import { Alert } from '@edx/paragon';
 
 import { IN_REVIEW_STATUS } from '../../data/constants';
 import { CreateCourseRunForm } from './CreateCourseRunForm';
 import LoadingSpinner from '../LoadingSpinner';
-import StatusAlert from '../StatusAlert';
+
 import PageContainer from '../PageContainer';
 import {
   buildInitialPrices, formatDate, getOptionsData, parseCourseTypeOptions,
@@ -151,10 +152,9 @@ class CreateCourseRunPage extends React.Component {
           { showSpinner && <LoadingSpinner /> }
           { courseInReview
             && (
-            <StatusAlert
-              alertType="warning"
-              message={`${title} has been submitted for review. No course runs can be added right now.`}
-            />
+            <Alert variant="warning">
+              {`${title} has been submitted for review. No course runs can be added right now.`}
+            </Alert>
             )}
           { showForm
           && (
@@ -177,12 +177,13 @@ class CreateCourseRunPage extends React.Component {
                 canSetRunKey={canSetRunKey}
               />
               {errorArray.length > 1 && (
-                <StatusAlert
+                <Alert
                   id="create-error"
-                  alertType="danger"
+                  variant="danger"
                   className="mt-3"
-                  message={errorArray}
-                />
+                >
+                  {errorArray}
+                </Alert>
               ) }
             </div>
           )}