Removed Table and StatusAlert deprecation of Paragon

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

@@ -6332,35 +6332,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';
@@ -250,24 +250,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

@@ -5,10 +5,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';
 
@@ -136,20 +136,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,
@@ -145,7 +144,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/CodeSearchResultsTable.jsx

@@ -13,28 +13,28 @@ import EcommerceApiService from '../../data/services/EcommerceApiService';
 
 const tableColumns = [
   {
-    label: 'Coupon Batch',
-    key: 'couponName',
+    Header: 'Coupon Batch',
+    accessor: 'couponName',
   },
   {
-    label: 'Code',
-    key: 'code',
+    Header: 'Code',
+    accessor: 'code',
   },
   {
-    label: 'Redeemed',
-    key: 'isRedeemed',
+    Header: 'Redeemed',
+    accessor: 'isRedeemed',
   },
   {
-    label: 'Redemption Date',
-    key: 'redemptionDate',
+    Header: 'Redemption Date',
+    accessor: 'redemptionDate',
   },
   {
-    label: 'Course Title',
-    key: 'courseTitle',
+    Header: 'Course Title',
+    accessor: 'courseTitle',
   },
   {
-    label: 'Actions',
-    key: 'actions',
+    Header: 'Actions',
+    accessor: 'actions',
   },
 ];
 
@@ -72,16 +72,16 @@ const searchParameter = (searchQuery) => {
 };
 
 const handleTableColumns = (searchQuery) => {
-  const assignedToColumnIndex = tableColumns.findIndex(column => column.key === 'assignedTo');
+  const assignedToColumnIndex = tableColumns.findIndex(column => column.accessor === 'assignedTo');
   // If search is made by email, no need to show "Assigned To" field
   if (isValidEmail(searchQuery) === undefined && assignedToColumnIndex > -1) {
     // Remove "Assigned To" column if it already exists
     tableColumns.splice(assignedToColumnIndex, 1);
   } else if (isValidEmail(searchQuery) !== undefined && assignedToColumnIndex === -1) {
     // Add "Assigned To" column if it doesn't already exist
     tableColumns.splice(4, 0, {
-      label: 'Assigned To',
-      key: 'assignedTo',
+      Header: 'Assigned To',
+      accessor: 'assignedTo',
     });
   }
   return tableColumns;