Removed Table and StatusAlert deprecation of Paragon

src/components/Admin/__snapshots__/Admin.test.jsx.snap

@@ -6134,35 +6134,40 @@ exports[`<Admin /> renders correctly with error state 1`] = `
         className="col"
       >
         <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="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"
+                fill="currentColor"
+              />
+            </svg>
+          </span>
           <div
-            className="alert-dialog"
+            className="pgn__alert-message-wrapper"
           >
             <div
-              className="d-flex"
+              className="alert-message-content"
             >
               <div
-                className="icon mr-2"
-              >
-                <span
-                  aria-hidden={true}
-                  className="fa fa-times-circle"
-                  id="Icon109"
-                />
-              </div>
-              <div
-                className="message"
+                className="alert-heading h4"
               >
-                <span
-                  className="title"
-                >
-                  Unable to load overview
-                </span>
-                Try refreshing your screen (Network Error)
+                Unable to load overview
               </div>
+              Try refreshing your screen (Network Error)
             </div>
           </div>
         </div>

src/components/Admin/index.jsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Helmet from 'react-helmet';
-import { Icon } from '@edx/paragon';
+import { Icon, Alert } from '@edx/paragon';
+import { Error } from '@edx/paragon/icons';
 import { Link } from 'react-router-dom';
 
 import Hero from '../Hero';
-import StatusAlert from '../StatusAlert';
 import EnrollmentsTable from '../EnrollmentsTable';
 import RegisteredLearnersTable from '../RegisteredLearnersTable';
 import EnrolledLearnersTable from '../EnrolledLearnersTable';
@@ -248,24 +248,30 @@ class Admin extends React.Component {
 
   renderErrorMessage() {
     return (
-      <StatusAlert
-        alertType="danger"
-        iconClassName="fa fa-times-circle"
-        title="Unable to load overview"
-        message={`Try refreshing your screen (${this.props.error.message})`}
-      />
+      <Alert
+        variant="danger"
+        icon={Error}
+      >
+        <Alert.Heading>
+          Unable to load overview
+        </Alert.Heading>
+        {`Try refreshing your screen (${this.props.error.message})`}
+      </Alert>
     );
   }
 
   renderCsvErrorMessage(message) {
     return (
-      <StatusAlert
+      <Alert
         className="mt-3"
-        alertType="danger"
-        iconClassName="fa fa-times-circle"
-        title="Unable to Generate CSV Report"
-        message={`Please try again. (${message})`}
-      />
+        variant="danger"
+        icon={Error}
+      >
+        <Alert.Heading>
+          Unable to Generate CSV Report
+        </Alert.Heading>
+        {`Please try again. (${message})`}
+      </Alert>
     );
   }
 

src/components/BulkEnrollmentPage/CourseSearchResults.jsx

@@ -4,10 +4,10 @@ import React, {
 } from 'react';
 import PropTypes from 'prop-types';
 import { connectStateResults } from 'react-instantsearch-dom';
-import { DataTable, Skeleton } from '@edx/paragon';
+import { DataTable, Skeleton, Alert } from '@edx/paragon';
 import { SearchContext, SearchPagination } from '@edx/frontend-enterprise-catalog-search';
+import { WarningFilled, Error } from '@edx/paragon/icons';
 
-import StatusAlert from '../StatusAlert';
 import { CourseNameCell, FormattedDateCell } from './table/CourseSearchResultsCells';
 import { BulkEnrollContext } from './BulkEnrollmentContext';
 
@@ -96,20 +96,22 @@ export const BaseCourseSearchResults = (props) => {
 
   if (!isSearchStalled && error) {
     return (
-      <StatusAlert
-        alertType="danger"
-        iconClassName="fa fa-times-circle"
-        message={`${ERROR_MESSAGE} ${error.message}`}
-      />
+      <Alert
+        variant="danger"
+        icon={Error}
+      >
+        {`${ERROR_MESSAGE} ${error.message}`}
+      </Alert>
     );
   }
   if (!isSearchStalled && searchResults?.nbHits === 0) {
     return (
-      <StatusAlert
-        alertType="warning"
-        iconClassName="fa fa-exclamation-circle"
-        message={NO_DATA_MESSAGE}
-      />
+      <Alert
+        variant="warning"
+        icon={WarningFilled}
+      >
+        {NO_DATA_MESSAGE}
+      </Alert>
     );
   }
 

src/components/BulkEnrollmentPage/CourseSearchResults.test.jsx

@@ -7,10 +7,9 @@ import configureMockStore from 'redux-mock-store';
 import userEvent from '@testing-library/user-event';
 import thunk from 'redux-thunk';
 import { SearchContext, SearchPagination } from '@edx/frontend-enterprise-catalog-search';
-import { Skeleton } from '@edx/paragon';
+import { Skeleton, Alert } from '@edx/paragon';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 
-import StatusAlert from '../StatusAlert';
 import BulkEnrollContextProvider from './BulkEnrollmentContext';
 import {
   BaseCourseSearchResults, NO_DATA_MESSAGE, TABLE_HEADERS,
@@ -158,7 +157,7 @@ describe('<CourseSearchResults />', () => {
     const wrapper = mount(<CourseSearchWrapper
       props={{ ...defaultProps, searchResults: { ...searchResults, nbHits: 0 } }}
     />);
-    expect(wrapper.find(StatusAlert)).toHaveLength(1);
+    expect(wrapper.find(Alert)).toHaveLength(1);
     expect(wrapper.text()).toContain(NO_DATA_MESSAGE);
   });
 });

src/components/CodeSearchResults/CodeSearchResults.test.jsx

@@ -5,6 +5,7 @@ import { MemoryRouter } from 'react-router-dom';
 import { mount } from 'enzyme';
 import configureMockStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
 
 import CodeSearchResults from './index';
 
@@ -77,12 +78,14 @@ describe('<CodeSearchResults />', () => {
         .create((
           <MemoryRouter>
             <Provider store={store}>
-              <CodeSearchResults
-                onClose={jest.fn()}
-                searchQuery="[email protected]"
-                enableLearnerPortal={false}
-                enterpriseSlug="sluggy"
-              />
+              <IntlProvider locale="en">
+                <CodeSearchResults
+                  onClose={jest.fn()}
+                  searchQuery="[email protected]"
+                  enableLearnerPortal={false}
+                  enterpriseSlug="sluggy"
+                />
+              </IntlProvider>
             </Provider>
           </MemoryRouter>
         ))
@@ -105,11 +108,13 @@ describe('<CodeSearchResults />', () => {
         .create((
           <MemoryRouter>
             <Provider store={store}>
-              <CodeSearchResults
-                onClose={jest.fn()}
-                searchQuery="[email protected]"
-                isOpen
-              />
+              <IntlProvider locale="en">
+                <CodeSearchResults
+                  onClose={jest.fn()}
+                  searchQuery="[email protected]"
+                  isOpen
+                />
+              </IntlProvider>
             </Provider>
           </MemoryRouter>
         ))
@@ -164,11 +169,13 @@ describe('<CodeSearchResults />', () => {
         .create((
           <MemoryRouter>
             <Provider store={store}>
-              <CodeSearchResults
-                onClose={jest.fn()}
-                searchQuery="[email protected]"
-                isOpen
-              />
+              <IntlProvider locale="en">
+                <CodeSearchResults
+                  onClose={jest.fn()}
+                  searchQuery="[email protected]"
+                  isOpen
+                />
+              </IntlProvider>
             </Provider>
           </MemoryRouter>
         ))
@@ -204,11 +211,13 @@ describe('<CodeSearchResults />', () => {
         .create((
           <MemoryRouter>
             <Provider store={store}>
-              <CodeSearchResults
-                onClose={jest.fn()}
-                searchQuery="FAG2LVLNHAKIXQ0Q"
-                isOpen
-              />
+              <IntlProvider locale="en">
+                <CodeSearchResults
+                  onClose={jest.fn()}
+                  searchQuery="FAG2LVLNHAKIXQ0Q"
+                  isOpen
+                />
+              </IntlProvider>
             </Provider>
           </MemoryRouter>
         ))
@@ -235,11 +244,13 @@ describe('<CodeSearchResults />', () => {
         .create((
           <MemoryRouter>
             <Provider store={store}>
-              <CodeSearchResults
-                onClose={jest.fn()}
-                searchQuery="[email protected]"
-                isOpen
-              />
+              <IntlProvider locale="en">
+                <CodeSearchResults
+                  onClose={jest.fn()}
+                  searchQuery="[email protected]"
+                  isOpen
+                />
+              </IntlProvider>
             </Provider>
           </MemoryRouter>
         ))
@@ -262,11 +273,13 @@ describe('<CodeSearchResults />', () => {
         .create((
           <MemoryRouter>
             <Provider store={store}>
-              <CodeSearchResults
-                onClose={jest.fn()}
-                searchQuery="[email protected]"
-                isOpen
-              />
+              <IntlProvider locale="en">
+                <CodeSearchResults
+                  onClose={jest.fn()}
+                  searchQuery="[email protected]"
+                  isOpen
+                />
+              </IntlProvider>
             </Provider>
           </MemoryRouter>
         ))
@@ -305,11 +318,13 @@ describe('<CodeSearchResults />', () => {
       const wrapper = mount((
         <MemoryRouter>
           <Provider store={store}>
-            <CodeSearchResults
-              onClose={jest.fn()}
-              searchQuery="[email protected]"
-              isOpen
-            />
+            <IntlProvider locale="en">
+              <CodeSearchResults
+                onClose={jest.fn()}
+                searchQuery="[email protected]"
+                isOpen
+              />
+            </IntlProvider>
           </Provider>
         </MemoryRouter>
       ));
@@ -360,11 +375,13 @@ describe('<CodeSearchResults />', () => {
       const wrapper = mount((
         <MemoryRouter>
           <Provider store={store}>
-            <CodeSearchResults
-              onClose={jest.fn()}
-              searchQuery="[email protected]"
-              isOpen
-            />
+            <IntlProvider locale="en">
+              <CodeSearchResults
+                onClose={jest.fn()}
+                searchQuery="[email protected]"
+                isOpen
+              />
+            </IntlProvider>
           </Provider>
         </MemoryRouter>
       ));
@@ -405,11 +422,13 @@ describe('<CodeSearchResults />', () => {
       const wrapper = mount((
         <MemoryRouter>
           <Provider store={store}>
-            <CodeSearchResults
-              onClose={jest.fn()}
-              searchQuery="[email protected]"
-              isOpen
-            />
+            <IntlProvider locale="en">
+              <CodeSearchResults
+                onClose={jest.fn()}
+                searchQuery="[email protected]"
+                isOpen
+              />
+            </IntlProvider>
           </Provider>
         </MemoryRouter>
       ));
@@ -441,11 +460,13 @@ describe('<CodeSearchResults />', () => {
     const wrapper = mount((
       <MemoryRouter>
         <Provider store={store}>
-          <CodeSearchResults
-            onClose={mockOnClose}
-            searchQuery="[email protected]"
-            isOpen
-          />
+          <IntlProvider locale="en">
+            <CodeSearchResults
+              onClose={mockOnClose}
+              searchQuery="[email protected]"
+              isOpen
+            />
+          </IntlProvider>
         </Provider>
       </MemoryRouter>
     ));