Merge pull request #55 from openedx/abdullah/paragon-status-alert-dep…

…recation

Paragon StatusAlert deprecation

package.json

@@ -14,7 +14,7 @@
     "precommit": "npm run lint",
     "snapshot": "fedx-scripts jest --updateSnapshot",
     "start": "fedx-scripts webpack-dev-server --progress",
-    "test": "fedx-scripts jest --coverage --passWithNoTests",
+    "test": "TZ=GMT fedx-scripts jest --coverage --passWithNoTests",
     "coveralls": "cat ./coverage/lcov.info | coveralls",
     "travis-deploy-once": "travis-deploy-once",
     "snapshot": "fedx-scripts jest --updateSnapshot"

src/console/ConsolePage.jsx

@@ -6,7 +6,7 @@ import {
   Collapsible,
   Pagination,
   SearchField,
-  StatusAlert,
+  Alert,
 } from '@edx/paragon';
 
 import {
@@ -113,32 +113,31 @@ export class ConsolePage extends React.Component {
     return (
       <div className="container half-width-element py-5 align-items-start">
         <h1>Program Console</h1>
-        <StatusAlert
-          alertType="danger"
+        <Alert
+          variant="danger"
           dismissible={false}
-          dialog={(
-            <div>
-              <p>
-                An error was encountered while loading your program list: <em>{`${this.props.loadingError}`}</em>
-              </p>
-              <p>
-                Please try waiting a moment and then refreshing the page.
-                If the issue persists, please reach out to <a href="mailto:[email protected]">[email protected]</a>.
-              </p>
-            </div>
-          )}
-          open={!!this.props.loadingError}
-        />
-        <StatusAlert
-          dismissible={false}
-          dialog={(
+          show={!!this.props.loadingError}
+        >
+          <div>
+            <p>
+              An error was encountered while loading your program list: <em>{`${this.props.loadingError}`}</em>
+            </p>
             <p>
-              It appears you do not have proper permissions to access this application.
-              Please reach out to <a href="mailto:[email protected]">[email protected]</a> requesting access to the Registrar service.
+              Please try waiting a moment and then refreshing the page.
+              If the issue persists, please reach out to <a href="mailto:[email protected]">[email protected]</a>.
             </p>
-          )}
-          open={!this.props.authorized && !this.props.loadingError}
-        />
+          </div>
+        </Alert>
+        <Alert
+          dismissible={false}
+          show={!this.props.authorized && !this.props.loadingError}
+          variant="warning"
+        >
+          <p>
+            It appears you do not have proper permissions to access this application.
+            Please reach out to <a href="mailto:[email protected]">[email protected]</a> requesting access to the Registrar service.
+          </p>
+        </Alert>
         {this.props.data.length > 0 && (
           <div>
             <SearchField
@@ -147,14 +146,15 @@ export class ConsolePage extends React.Component {
               onClear={() => this.handleFilter('')}
               placeholder="Filter by Program Title"
             />
-            <StatusAlert
+            <Alert
               className="mt-2"
-              alertType="danger"
+              variant="danger"
               dismissible
-              dialog="Invalid program title."
-              open={!!this.props.filterError}
+              show={!!this.props.filterError}
               data-testid="filter-alert"
-            />
+            >
+              <p>Invalid program title.</p>
+            </Alert>
             <Pagination
               className="mt-4"
               paginationLabel="pagination navigation"
@@ -168,19 +168,18 @@ export class ConsolePage extends React.Component {
                 {this.props.programBanners[program.programKey]
                   && !!this.props.programBanners[program.programKey].length
                   && this.props.programBanners[program.programKey].map(banner => (
-                    <StatusAlert
+                    <Alert
                       dismissible
-                      open
+                      show
                       key={banner.id}
-                      alertType={banner.bannerType}
+                      variant={banner.bannerType}
                       onClose={() => this.props.removeBanner(program.programKey, banner.id)}
-                      dialog={(
-                        <div className="modal-alert">
-                          {`${banner.message} `}
-                          {banner.linkMessage && <a href={banner.linkHref} target="_blank" rel="noopener noreferrer">{banner.linkMessage}</a>}
-                        </div>
-                      )}
-                    />
+                    >
+                      <div className="modal-alert">
+                        {`${banner.message} `}
+                        {banner.linkMessage && <a href={banner.linkHref} target="_blank" rel="noopener noreferrer">{banner.linkMessage}</a>}
+                      </div>
+                    </Alert>
                   ))}
                 {program.areEnrollmentsWritable && this.renderEnrollmentsCollapsible(program)}
                 {program.areReportsReadable

src/console/ConsolePage.test.jsx

@@ -235,8 +235,8 @@ describe('ConsolePage', () => {
     const tree = renderer.create(consolePageComponent).toJSON();
 
     expect(tree).toMatchSnapshot();
-    expect(wrapper.find('.alert-danger.show .alert-dialog').at(0).text()).toEqual('Sorry something went wrong ');
-    expect(wrapper.find('.alert-success.show .alert-dialog').at(0).text()).toEqual('You did it! ');
+    expect(wrapper.find('.alert-danger.show .modal-alert').at(0).text()).toEqual('Sorry something went wrong ');
+    expect(wrapper.find('.alert-success.show .modal-alert').at(0).text()).toEqual('You did it! ');
 
     wrapper.unmount();
   });